Until a few weeks ago, this was new to me. So I decided to give it a try. I took an old game that I had written long ago and decided to rewrite it in JavaScript. This is my first attempt using that language and I have learned a lot.
Canvas is basically an image on a web page. It is an image that you can manipulate from within your script.
You can find the beta version of my game and a Beta Testers' Blog at:
http://ggbbetatesters.blogspot.com/
One of the neatest things I discovered very early on in the project is that there is plenty of room to hide data right inside the image. I have objects that move around on the game board. I need to know who they are and what attributes they have. I hide that info in the image itself. So it doesn't matter where an object ends up, I can read the data I need when I need it, and ignore the data I don't need even though it's location changes.
How do I do that? It's cool. You see each pixel in an image contains four bytes of data. The first three are the RGB color values. These are numbers between 0 and 255. The fourth byte is a transparency level. I've played around with it a bit which I will discuss later.
This game is very simple, so there isn't a lot of information that I need to hide. I found it convenient to simply do everything with the first byte of each pixel. This is where the Red value is stored. The human eye (and the computer monitor for that matter) doesn't distinguish between very small changes in value. That is why most of the color pickers that you use when creating web pages trim the number of choices way down. We can't really tell the difference between values like 255, 254, 253, 252. They all look the same to us. But from a programming point of view, they are each very much different, so they can tell us different things.
If you search the web for canvas demos you will see examples of space ships trying to avoid asteroids as you maneuver them over a black background. Black makes a great background color because it is 0 0 0 in RGB or #000000 in hex. Zero is a great value to test for in your code because IF statements treat any non-zero value as true and zero itself as false. So you can write something like this:
if (!myColor){do something here;}
[you need to know that ! means NOT ... so 'do something here' will only happen when myColor is zero.]
I soon realized that my game did not have to have a black background. I am only going to test the first byte of a pixel, so any color that has it's R value as zero will work just the same as black. So a blue slate background might look much better. Instead of #000000 I chose #007777.
In fact, there were other things that I wanted to put on the game board that I render neutral to the moving players. Like the text for the high wire that defines the end of the game. A value of #00EEEE works well for that job. Notice again, that the first byte is zero.
The gumdrop game is about colors and I need lots of them. When one of my players hits a target, I need to know what color I just hit. To make that job easy I have made sure that the first byte of each color is unique. No two are the same. Here is how they are defined:
var myRed = "#FE0000"; //red - first byte is 254
var myBlue = "#0200DD"; //blue - first byte is 2
var myYellow = "#FCFF00"; //yellow - first byte is 252
var myMagenta = "#660066"; //magenta - first byte is 253
var myOrange = "#FF6600"; //orange is - first byte is 255
var myGreen = "#06FF00"; //green is - first byte is 6
var myBrown = "#993300"; //brown is - first byte is 153
To actually test for a color you need to have the X Y coordinates of the spot you want to test.
Grab a small rectangle of the image and store it:
var testSpot = ctx.getImageData(X, Y, 2, 2);
testSpot will be an array of 16 bytes. You can pick any size, we are only going to look at one byte anyway. For debugging purposes it is nice to be able to park a test image on your canvas so you can visually see exactly what you're testing. Then you REM out the line that does that when you don't need it anymore. So we have a group of 4 pixels in a square that is 2x2. Each pixel is 4 bytes which gives us that array of 16.
Now test the value of the first byte:
hitColor = testSpot[0];
if (hitColor > 0){we just hit something!;}
[Stuff you need to know: The first item in an array is numbered: 0. The text I have in {}'s won't do anything ... you would probably call a function there.]
All of our colors have their own unique value. We can look it up and see who it is.
Just think of all the things you might want to hide in the image. You can keep track of hit points that a player might have or even the health of one of your dragons! What if you played around with the transparency byte? As your hero does battle with the evil zombie, the zombie becomes more and more transparent with each blow. Finally he's gone! You can have a cool visual effect on an object that can wander around your screen at random and you don't have to have fancy complicated code to keep track of where he is and what his current health may be. Wow. Canvas and HTML5 really open the door to some new ways to have fun on the web.
Please, please, please help me beta test the game. Try it out, and be sure to subscribe to the Beta Tester's Blog as well. We'll keep that blog simple and put the techie stuff over here.
C U next time.
No comments:
Post a Comment