CODEWITHSUNDEEP
javascriptphaser-framework
Ahmed Mohsen
Ahmed Mohsen

Reputation: 433

a strange behavior in Phaser with javascript

firstly

I am not beginner at game development at all - but beginner in web game development specially

I started with Phaser as it looks good and optimized for mobile games

anyway ..

I have a strange behavior with my game - I put a rectangle and trying to move it (when I debugged the X axis already changes correctly , but I can't see the rectangle move!!)

my codes

var game = new Phaser.Game(window.innerWidth,window.innerHeight,Phaser.AUTO);
var colors = ["#FF0000" , "#00FF00" , "#0000FF" , "#FFFF00" , "#00FFFF" , "#FFFF00"];
var lst;
var hlprs = [];
var gameState = {
    preload: function () {
        this.game.stage.backgroundColor = "#FFFFFF";
    },
    create: function () {
        for (var i = 0 ; i < 8 ; i++)
        {
                hlprs[i] = new Phaser.Rectangle((i*200),0,100,20);
                hlprs[2*i + 1] = new Phaser.Rectangle((i*200),window.innerHeight - 20,100,20);

                game.debug.geom(hlprs[i] , colors[Math.floor((Math.random() * 6))]);
                game.debug.geom(hlprs[2*i + 1] , colors[Math.floor((Math.random() * 6))]);
        }
    },
    update: function ()
    {
        moving();// it calls moving function and X axis is changes but (the rectangle does not move !!!)
    }
};
function moving()
{
    for (var i = 0 ; i < 8 ; i++)
    {
        hlprs[i].offset(-1,0);
        hlprs[2*i + 1].offset(-1,0);
    }
}
game.state.add('GameState' , gameState);
game.state.start('GameState');

Upvotes: 1

Views: 59

Answers (2)

user2314737
user2314737

Reputation: 29317

Since the update() function calls moving() you might want to have your game.debug commands within moving 

function moving()
{
    for (var i = 0 ; i < 8 ; i++)
    {
       hlprs[i].offset(-1,0); 
       hlprs[2*i + 1].offset(-1,0);
       // update here
       game.debug.geom(hlprs[i] , colors[Math.floor((Math.random() * 6))]);
       game.debug.geom(hlprs[2*i + 1] , colors[Math.floor((Math.random() * 6))]);            
    }
}

Here's a demo: https://jsfiddle.net/user2314737/J5fUE/253/

Upvotes: 1

Kamen Minkov
Kamen Minkov

Reputation: 3712

Without testing it, I'd guess that what happens is the following: you create a bunch of shapes and do a single call to game.debug.geom() for each of the shapes. In the meantime the shapes do start moving, but since you never call game.debug.geom() again, you never see anything moving.

If you intend to use methods from game.debug, they should usually go inside the render() method of your state (which will be called once for every frame).

Note that the debug methods are to be used, well, for debugging. The proper way of displaying a shape is by making a sprite or an image (in which case you won't have to update anything manually since Phaser will handle it).

Upvotes: 3

Related Questions