Camera in Flash

Question

Im having a hard time trying to work out how to implement a smooth camera in flash.

In something like openGL i would use a transformation matrix to move the camera around the scene.

However with flash my current solution is to put everything into one movie clip and then move that clip around the scene which doesnt seem like the most elegant solution Since my level is rather large.

What other solutions are the to creating a 2D camera in flash (I have also tried the Vcam but that also seems rather over the top and also lagged out way more than my current solution).

Answer 1

You can try playing with the scrollRect property. Here's a minimal example:

package  {

    import flash.display.Sprite;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.display.Shape;
    import flash.geom.Rectangle;


    public class CamTest extends Sprite {

        private var world:Sprite;
        private var view:Rectangle = new Rectangle(0,0,300,300);//only display a portion
        private var ease:Number = .075;

        public function CamTest() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        private function init(e:Event):void{
            world = addChild(new Sprite) as Sprite;//add a container
            for(var i:int = 0 ; i < 100; i++) world.addChild(getRandomShape());//populate it with random shapes
            stage.addEventListener(Event.ENTER_FRAME,update);//loop
        }

        private function update(e:Event):void{
            view.x += (mouseX-view.x) * ease;//ease the pan positions
            view.y += (mouseY-view.y) * ease;//might want to map mouse coords
            world.scrollRect = view;//re-apply the scrollRect
        }
        //dummy shapes, not important
        private function getRandomShape():Shape{
            var s:Shape = new Shape();
            var np:int = (int)(3+Math.random()*9);//random points
            var ai:Number = Math.PI / (np * .5);//angle increment
            s.graphics.lineStyle(1+Math.random() * 7);
            for(var i:int = 0 ; i <= np; i++) {
                var a:Number = ai*i;
                var r:Number = 20+Math.random() * 10 - Math.random() * 10;
                var x:Number = Math.cos(a) * r;
                var y:Number = Math.sin(a) * r;
                if(i == 0) s.graphics.moveTo(x,y);
                s.graphics.lineTo(x,y);
            }
            s.x = Math.random() * 1000;
            s.y = Math.random() * 1000;
            return s;
        }
    }



}

If your world is dense you might want to consider using bitmap sprites/blitting. Here's a minimal example using BitmapData's copyPixels() method:

package  {

    import flash.display.MovieClip;
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.display.BitmapDataChannel;
    import flash.geom.Point;
    import flash.events.Event;
    import flash.geom.Rectangle;


    public class CamTest2 extends MovieClip {

        private var world:BitmapData = new BitmapData(1000,1000,false,0xFFFFFF);
        private var render:BitmapData = new BitmapData(300,300,false,0xFFFFFF);
        private var view:Rectangle = new Rectangle(0,0,render.width,render.height);//only display a portion
        private var zero:Point = new Point();
        private var ease:Number = .075;

        public function CamTest2() {
            init();
        }
        private function init() {
            world.perlinNoise(200, 180, 6,(int)(Math.random() * 10), false, true, BitmapDataChannel.RED, false, null);//random world
            addChild(new Bitmap(render));
            addEventListener(Event.ENTER_FRAME,update);
        }
        private function update(e:Event):void{
            //update pan
            view.x += (mouseX-view.x) * ease;//ease the pan positions
            view.y += (mouseY-view.y) * ease;//might want to map mouse coords   
            //render based on updated view rect
            render.lock();
            render.copyPixels(world,view,zero);
            render.unlock();
        }
    }

}

You should also look into actionscript game engines that already implement cameras like Flixel or Starling