Office of Digital Humanities

Side Scroller steps

Using the same basic game loop framework as we used for the "blastoff" stack, we can modify the image assets and the card's updateScreen handler to create a very different animation. In the DigHT 310 file server, get the SideScroller folder in the lesson_materials/Time_and_timing/GameLoop folder, which should contain all of the required image and audio files. This is how we built the stack:

1. Create a new Stack for a tablet landscape layout (1024 X 748)
   name the stack: sideScroller
2. Import these images to use as background images;
   • mountbakerpanoramic-tall.png
   • sun.png
3. Set the Resize quality of the imported images to Good
4. Resize and position the imported background images
   (Mount Baker image should be resized to the same width as the screen, anchored to topLeft corner. It will not reach to the bottom of card.)
5. Lock size and position of the background images.
6. Import images roadway.png and roadway2.png. These will become the panels for the scrolling background.
   
   • simplify the image names to "road1" and "road2"
   • set resizeQuality to Good
   • proportionally resize them so that they are exactly the width of the card. Both images should be exactly the same height and width
   • position them so that the bottoms of both images are at the bottom of the card
   • lock size and position of both images
7. Import auto image "roadster.png"
   - set resize quality to Good, resize as desired, lock size and position
8. Make a button for the car. Use the imported image as its icon. Do it in the property inspector or message box command:
   

   set the icon of btn "car" to "roadster.png"

9. There is a little-known property of objects that can make it more efficient for LiveCode to redraw them when they are being animated, called layerMode. Because the car and road objects will be moving, set their layerMode to "dynamic":

   set the layerMode of img "road1" to "dynamic"
   set the layerMode of img "road2" to "dynamic"
   set the layerMode of btn "car" to "dynamic"
   

10. Scripts:
    Stack - Use same stack script as rocket stack
    Card - Use side scroller card script
11. Start and Stop buttons - copy/paste from rocket stack
12. Add audio loop as desired.
13. Test in simulator or on device.

See the stacks "sideScroller1.livecode" and "sideScrollerFinal.livecode" on the server to see the final product.