We're going to make a racecourse for little cars to move around. We'll make it out of the stack we've built! First, we need to convert what is on the card into an image that represents walls and spaces:
- Using the LiveCode draw tools, add a bunch of objects to the
ImageDataTeststack. These are going to be the obstacles in the racecourse. - To create the image we'll need, type this in the message box:
import snapshot from rect the rect of this stack
- The preceding command will take a screenshot of the card window and place it onto the card as a new image control. The new image will overlay the whole card, so will not be noticeable. You can confirm that the image was created and select it with the Project Browser.
- Right-click on the image that was created and select Launch Editor. This will open the image in the bitmap editor that you have set in Preferences/General. You will be prompted by LiveCode to select an editor if you haven't previously done so.
- In your image editor's Layers window, duplicate the initial single layer.
- Make a new layer that is transparent beneath the duplicate image layer.
- Delete the original layer.
- Use the editor's Magic Wand to select the white space of the card image in the layer with the image in it (not the transparent layer). Delete the selected area to reveal the transparent layer.
- Inverse the selection and fill it with a dark color (the color doesn't matter, as it's used just so we can see where the holes are).
- Take some time to fill in any small gaps. Also, place a thick border around the outside of the image. This shows how the card looks like and how the snapshot image should look like by now:
- Merge the layers of the document and then select Save.
- Return to LiveCode and click on the Update button, and the snapshot image will be updated to reflect the changes you've made.
- Give the image the name
backdrop. Later, we'll set the image behind other objects, but for now, we'll leave it on top of everything else.
We just made a pretty strange looking racecourse! In a real top-down racing game, you would have to carefully design a nice-looking racecourse and make a duplicate of the image for collision detection. In the duplicate, you would have to erase the parts of the image that represent where cars are allowed to drive and then, you would have to fill the rest of the image with a flat color. Players would see the nice-looking racecourse, and underneath that would be the duplicate flat color version used to detect collisions.
We now need a car that drives itself around the course we've made.