Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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).

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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

share|improve this answer
    
Thanks for the reply. I tried out the scrollRect method and it does seem to be a lot smoother. Just wondering does flash apply clipping to objects outside of the screen/window or does it just render everything? –  Dekowta Mar 25 '13 at 15:57
    
not 100% sure. it shouldn't, but use scrollRect to be on the safe size :) feel free to vote/tick the answer as you see fit ;) –  George Profenza Mar 25 '13 at 16:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.