Jump to content



Recommended Posts

Hello devs!

Im just started working on a project using pharser. 

I have a issue. I want to have a corridor where i you have to avoid approaching obstacles. So i decided to make 3 different camera views. Left, middle and right and link them to 3 lanes. Lane0 (left), Lane1 (middle), Lane3(Right).

Only the thing is the camera width and height are 1320x732,5 . I want the lane to say 0,1 or 2 if the camera.position or view(this is what confuses me.) is equal a position. 

Because the camerInfo renders view and position info on the screen. I will add some screenshots and the code that im using.



<!doctype html>
<html lang="en">
   <meta charset="UTF-8" />
    <title>Minigame - 1 Jaguar/Landrover</title>
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            margin-left: 15%;
            margin-top: 10%;

<script type="text/javascript">

var game = new Phaser.Game(1320, 742.5, Phaser.AUTO, '', {preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image ('bg', 'assets/proto-bg.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);


var card;
var cursors;
var moving = 0;

var lane = 0;

function create() {

    //  Make the world larger than the actual canvas
    game.world.setBounds(0, 0, 3840, 2160);

    //  We're going to be using physics, so enable the Arcade Physics system

    //  A simple background for our game
    game.add.sprite(0,0, 'bg');

    // World boundaries
    game.world.setBounds(0, 0, 1920, 1920);

    //  Our controls.
    cursors = game.input.keyboard.createCursorKeys();

    // Camera start position set


function update() {

    // Moving camera
    if (moving === 0)

        if (cursors.left.isDown)
            game.camera.x -= 300;
        else if (cursors.right.isDown)
            game.camera.x += 300;

    //TODO Configure
    // Lanes
    if(game.camera.x < 300)
        lane = 1;
    else if(game.camera.x > 300 && camera.x < 600) {
        lane = 2;

    else if(game.camera.x >= 600) {
        lane = 3;


function render() {

    game.debug.cameraInfo(game.camera, 32, 32);
    game.debug.text("Lane: " + lane, 32, 132);




Schermafbeelding 2016-03-09 om 12.04.33.png

Schermafbeelding 2016-03-09 om 12.04.42.png

Link to comment
Share on other sites

I'm pretty sure you want camera.view. From the docs: " The x/y values are in world coordinates, not screen coordinates, the width/height is how many pixels to render."

Watch out with that control scheme: update gets called really fast, so it might make it hard to sit in the middle lane.

Link to comment
Share on other sites

  • 2 weeks later...

Sure. You could assign each lane to a key. Hitting 1 goes to the left, 2 to the middle, 3 to the right. Or left arrow is left, up arrow is middle, right arrow is right. Or you could make it so hitting left moves you left: right, middle, left, Then hitting right moves you right: left, middle, right.

You should look into "debouncing" the signal. Either that, or make a flag that is set the first time the key goes down and isn't cleared until the key goes up, so you only check it once. Or use Phaser.Key.onDown.addOnce and re-attach the signal handler in the onUp. Or something like that.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...