| Tile Based Scroller | ActionScript 3.0 |
Tile Based ScrollerThis is a demo I wrote to experiment with scrolling graphics for creating a tile based game. Use the arrow keys to move up, down, left or right. Frames per second are displayed to measure performance - the stage is set to 120 frames per second so that should be the highest number possible.Some Notes About This DemoThe map is stored in an array of integers representing which tiles to draw (0 = grass, 1 = tropical tree on top of grass, 2 = deciduous tree on top of grass). The map is randomly generated but it is a real map, if you move back and forth you can see the same trees you just passed scroll back on screen.I used to write 2D games back in the 90's when computers were much slower, so I am used to pushing CPU's to the limit. One of the techniques I like to use for scrolling games is instead of redrawing the entire screen each frame, I play around with the coordinate system so that I only have to draw new tiles that are about to scroll onto screen. In AS3, it seems the best way to handle this is to break the screen down into tiles (in this demo a tile is 50x50 pixels). Each tile is stored as a Bitmap on screen, and stored in an array. Whenever the screen is scrolled, all that is needed is to cycle through all the tiles and change the x or y coordinate, rather than redraw everything. Before scrolling I also draw the new tiles that are coming onto the screen. As tiles are pushed off screen, they are removed from the stage so that they no longer take up any memory or resources. I'd like to experiment more with scrolling to see if I can get better results, however I have yet to see this demo choke. When I set the demo to 1000x800 pixels (the current size is 600x450), I was still getting over 40 frames per second. Measuring Frames per SecondThe most accurate way to measure frames per second is to use the Date function. I thought about using Timers but there is no guarantee that the Timer will trigger the Timer.Event exactly when it is supposed to. The Date class on the other will return the system time, which is the most accurate way to measure time on a computer.The way to set things up:
var lastDate : Date = new Date(); // returns current time var frames : int = 0; ... stage.addEventListener(Event.ENTER_FRAME, mainLoop); ... function mainLoop(e : Event) { // this is the main game loop ... frames++; if (frames == 20) frameCounter(); // check the frame rate every 20 frames } function frameCounter() { // this is where we calculate the frame rate var now : Date = new Date(); // returns the current time var ellapsed : Number = now.time - lastDate.time; // ellapsed time in milliseconds var fps : int = Math.round(frames / (ellapsed / 1000)); // frame rate in FPS lastDate = now; // reset variables for next count frames = 0; } |
Latest Work:ApplicationsContent Management System Local Developer Manager's Advantage Manager's Advantage Support Games • ActionScript 3 Hootris Dinky Chase (not finished) Demos • ActionScript 3 Loading and Saving XML Physics - 2D Collision Physics - 1D Collision Scroller Filters Demo Transition Demo Tween Demo Psychedelic Stage Light Video Player Hotdog Guitar Filters and Gradients Keyboard Demo Hello World Simple Button Previous Work:Applications • Turbo PascalMap Editor Master GFX 16 Hooman's File Manager Games Stone Bringer The Original Hootris Demos • C++ / DirectX Fish |
