Racing game with following camera

Question

I'm trying to figure out how to create a racing game in flash (like many tutorials already out there on the web).

However instead of keeping the level static and moving the car around - Is it possible to keep the player's car motionless in the center of the screen and rotate the level around the player?

heya, heres an example of what your trying to do, I had made it in as2 a while ago, comes with complete source code http://ffiles.com/flash/games/helicopter_game_with_camera_follow_3159.html hope it helps — joshua, Dec 06 '12 at 12:11
Thanks, but the really tricky part is keeping the player's rotation the same and rotating the level instead. — PROWNE, Dec 06 '12 at 15:05
just do the same thing, except motion the bg instead of the car — joshua, Dec 28 '12 at 07:28

score 2 · Answer 1 · answered Dec 06 '12 at 05:43

Yep.

What you'll want to do is have the car on a different clip to everything else (everything you'll want to move/rotate), then whenever you come to transform (move/rotate) the car, you apply the inverse to everything else.

I'm imagining this is top-down, so for example every pixel up the y-axis the car would usually move, you now move everything else down the y-axis by the same amount.

Similarly, for every positive degree you'd usually rotate the car, you now rotate everything else by the negative of the same number of degrees.

The other thing you'll have to worry about is creating the edge of the world, since before you could use the edges of the screen, now you'll be able to go forever.

score 2 · Accepted Answer · answered Dec 06 '12 at 17:40

Here's a runnable demo that should do what you want; use the up, left, down and right keys to control the car.

The important stuff is in the last 5 or 6 lines near the bottom.

package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

public class Untitled2 extends Sprite{
    private var level:Sprite = new Sprite();
    private var car:Sprite = new Sprite();
    private var carVelocityX:Number = 0;
    private var carVelocityY:Number = 0;
    private var keyLeft:Boolean;
    private var keyRight:Boolean;
    private var keyUp:Boolean;
    private var keyDown:Boolean;

    public function Untitled2(){
        level.graphics.lineStyle(4, 0xFF0000);
        level.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);

        car.graphics.beginFill(0x000000);
        car.graphics.moveTo( -5, -5);
        car.graphics.lineTo( 5, -5);
        car.graphics.lineTo( 8, 0);
        car.graphics.lineTo( 5, 5);
        car.graphics.lineTo( -5, 5);

        addChild(level);
        level.addChild(car);
        car.x = 100;
        car.y = 100;

        addEventListener(Event.ENTER_FRAME, onEnterFrame, false, 0, true);
        stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);
        stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp, false, 0, true);
    }

    private function onKeyUp(event:KeyboardEvent):void{
        if(event.keyCode == Keyboard.LEFT)
            keyLeft = false;
        else if(event.keyCode == Keyboard.RIGHT)
            keyRight = false;
        else if(event.keyCode == Keyboard.UP)
            keyUp = false;
        else if(event.keyCode == Keyboard.DOWN)
            keyDown = false;
    }

    private function onKeyDown(event:KeyboardEvent):void{
        if(event.keyCode == Keyboard.LEFT)
            keyLeft = true;
        else if(event.keyCode == Keyboard.RIGHT)
            keyRight = true;
        else if(event.keyCode == Keyboard.UP)
            keyUp = true;
        else if(event.keyCode == Keyboard.DOWN)
            keyDown = true;
    }

    private function onEnterFrame(event:Event):void{
        // Other stuff for controlling the car
        carVelocityX *= 0.98;
        carVelocityY *= 0.98;
        car.x += carVelocityX;
        car.y += carVelocityY;

        if(keyLeft) car.rotation -= 7;
        if(keyRight) car.rotation += 7;

        var carRotationRadians:Number = car.rotation / 180 * Math.PI;

        if(keyUp){
            var speed:Number = Math.sqrt(carVelocityX * carVelocityX + carVelocityY * carVelocityY);
            speed += 0.1;
            carVelocityX = Math.cos(carRotationRadians) * speed;
            carVelocityY = Math.sin(carRotationRadians) * speed;
        }

        if(keyDown){
            carVelocityX *= 0.8;
            carVelocityY *= 0.8;
        }

        // Add 90 degrees because we want the car pointing up
        carRotationRadians += Math.PI * 0.5
        // Rotate the cars position to get its stage coordinates
        var carX:Number = Math.cos(-carRotationRadians) * car.x - Math.sin(-carRotationRadians) * car.y;
        var carY:Number = Math.sin(-carRotationRadians) * car.x + Math.cos(-carRotationRadians) * car.y;
        // Position and rotate the level
        level.rotation = -car.rotation - 90; // Add 90 degrees because we want the car pointing up
        level.x = stage.stageWidth  * 0.5 - carX;
        level.y = stage.stageHeight * 0.5 - carY;
    }

}// End class Untitled2

}// End package

Racing game with following camera

2 Answers2