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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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