Pseudo 3d scrolling example in Actionscript 3



A while ago I found this great resource for pseudo 3d racing games by Louis Gorenfeld. Unfortunately, the page is more of a general guide than a complete tutorial. I created the example above, the *.swf is locked at 6 fps so you can see the scrolling very clearly.

You can expand it further if you want (I might try so too in the future):
Main.as

// Main.as
package 
{
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.display.Bitmap;
   import flash.display.BitmapData;
   import flash.display.StageDisplayState;
   import flash.utils.Timer;
   import flash.events.TimerEvent;
   
   [SWF(width = "320", height = "240")]
	
   /**
    * Pseudo 3d racer example
    * based on Louis Gorenfeld's explanations (http://www.extentofthejam.com/pseudo/).
    * 
    * Adapted to Actionscript 3 by Kees from www.kcnhgames.com
    */
    public class Main extends Sprite
    {
        // Colours
        private const SKY:Number = 0xFF228dcb;
        private const GRASS_LIGHT:Number = 0xFF00c500;
        private const GRASS_DARK:Number = 0xFF009a00;
        private const ROAD_LIGHT:Number = 0xFF8e8c8e;
        private const ROAD_DARK:Number = 0xFF656765;
        private const STRIPES:Number = 0xFFFFFFFF;
        private const MARKINGS:Number = 0xFFff2e00;
		
        // Bitmap
        private var _bd:BitmapData;
        // Width of bitmap
        private var _bdWidth:int = 320;
        // Height of bitmap
        private var _bdHeight:int = 240;
        // Horizon y
        private var _hor:int = 100;
        // Rotation
        private var _light:Boolean = true;
        // Z value
        private var _z:int = 0;
        private var _dz:int = 0;
        // ddz remains constant
        private var _ddz:int = 1;
        public function Main():void
        {
                super();
			
                // Add bitmap to stage
                _bd = new BitmapData (_bdWidth, _bdHeight, false, SKY);
                var bmp:Bitmap = new Bitmap (_bd);
                addChild(bmp);
			
                stage.addEventListener(Event.ENTER_FRAME, render);
        }
        /**
         * Render all the pixels on the bitmap
         * @param e
         */
        private function render(e:Event):void
        {
                updateBG();
        }
        /**
         * Update the background
         */
        private function updateBG():void
        {
                _z = 0;
                _dz = 0;
			
                var colour:Number = GRASS_LIGHT;
                var tY:int = 0;
			
                for (var y:int = _hor; y < _bdHeight; y++)
                {
                        // Draw line
                        for (var x:int = 0; x < _bdWidth; x++)
                        {
                                if (_light)
                                {
                                        colour = GRASS_LIGHT;
                                }
                                else
                                {
                                        colour = GRASS_DARK;
                                }
					
                                _bd.setPixel(x, y, colour);
                        }
				
                        // Update dark/light lines
                        if (_z <= tY)
                        {
                                if (_light)
                                {
                                        _light = false
                                }
                                else
                                {
                                        _light = true;
                                }
                                _dz += _ddz;
                                _z += _dz;
                        }
                        tY++;
                }
        }
    }
}

Leave a comment

Your email address will not be published. Required fields are marked *