There are plenty of places online to get public domain images to use in your applications. Search for public domain images and you will see links to Wikipedia articles, government sites, and other sites that let you download images that are free to use. The map shown in the following steps came from the file at:
http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg.
- Make a new field named
states. Find an alphabetical list of the 50 united states to paste it into the field or you can type them in! - Make another field, set the text size to 24, and the size of the field wide enough for New Hampshire to fit in (just the words, not the entire state!). Name the field
state.Tip
Download the completed map
Note that you can save a lot of work here by downloading the
us-map.pngfile from the support file section for this book, which you can find at www.PacktPub.com. - If you have Adobe Illustrator, open the SVG file with it. If not, open it with GIMP. Pixelmator is a low-cost alternative on Macintosh OS X.
- In alphabetical order, fill in each state with a color where the red, green, and blue values match the line number of that state + 100 . We're adding 100 so that the shades of gray we'll see will not be so dark.
- Continue the same through all the states. Here's how it will start to look like in Illustrator, where Idaho is about to be colored as
112,112,112:
- Change the size of the map, so that it would fill about a third of the stack window, and choose Export.
Tip
Color profile settings
LiveCode treats bitmaps in a way that ignores color profile information in the image, and that would ruin this thing we're trying to do. While exporting an image, check whether there is an option to set the color profile to
genericRGB. If there isn't, then use a utility such as Color Sync to apply thegenericRGBcolor profile. Once the image is saved, there is something you can do to make sure that it gets imported into LiveCode OK. Before importing, set the screen gamma to2.23by typing in the message box and press Enter. This will set LiveCode to the right settings to make sure that the color values appear correctly. - If you're using Illustrator, set the background to be White and anti-aliasing to be None. With GIMP, make sure that the PNG is saved without an alpha channel.
- Type this line followed by the Enter key into the message box:
set the screengamma to 2.23
- Import the PNG into your
ImageDataTestsstack. - Set the image's script to this:
on mouseMove pMx,pMy put getPixel(the short name of me,pMx - the left of me,pMy - the top of me) into tStateColor set the itemdelimiter to comma put item 1 of tStateColor - 100 into tLine put line tLine of field "states" into field "state" end mouseMove
- Try pointing at the different states, at least point at the ones that you have colored. The state name should appear in the
statefield.
For this case, we only needed to look at the value of the red channel for the pixel under the cursor (the green and blue values are the same because we used a gray color value for both). Rather than writing another function to get only the red part of the data, we reused the existing getPixel function, but then only took notice of the first item that the function returned. That number, after subtracting 100 that we had added to it to make the shades not be so dark, was then used as a lookup value to get the corresponding state name.
The example map image was an SVG file. Is an SVG file smaller than a PNG file for a given image? (do a little Wikipedia research and decide on the answer.)
- Yes
- No
- Depends on the nature of the image
Answer: 3
SVG is a description of how to draw the image, whereas PNG is a description of the pixels in the image. In PNG, this information is also data compressed in a lossless way. For the example map, at its original size, a 24-bit PNG is half the size of the SVG file. There is a lot of data needed to describe the outlines of the U.S. states! If the image needs to be enlarged, the PNG would become a bigger-sized file and the SVG would remain at the same file size. On the other hand, if an image was a rectangle piece of a diagonal gradient, the SVG would be tiny and the PNG would be huge because there are no long runs of the same-colored pixels for the data compression to work well.
In old 2D maze adventure games, your character would move in distinct chunks, and while checking whether there was a wall or gap, the program only had to check relatively few locations. The occupied spots could be stored in an array, taking up little memory.
With other maze games, like those of marble maze tilt boards, you have to detect collisions at a much finer degree. A full-blown physics engine could take care of the problem, but it's possible to get some interesting results by storing the maze as an image and checking the pixels that are in front of your character or marble as the case may be.
In a full-featured game, it would be better to use imageData or perhaps alphaData, so that you can tell when you are going to hit something, and from the value you read, you can also tell what it is you have hit. In the marble maze game, you need to know when you have gone over a hole, for example.
For this next test though, we'll just use maskData and see what we can do about not hitting the thing that is in front of us.