[SOLVED] Why my game doesn't appear?

[ekeimaja]

var RPG_test = RPG_test || {};

RPG_test.game = new Phaser.Game(640,640, Phaser.AUTO, 'game');

RPG_test.game = function () {

};

RPG_test.game.prototype = {
    preload: function () {

        this.game.load.image('street', 'img/street.png', 980, 860);
        this.game.load.image('player', 'img/human.png', 50, 50);

    },
    create: function () {
        
        this.game.physics.startSystem(Phaser.Physics.P2JS);
        this.cursors = this.game.input.keyboard.createCursorKeys();
        
        this.game.add.sprite(0, 0, 980, 860, 'street');
        this.player = this.game.add.sprite(400, 400, 'player');
        this.game.world.setBounds(0, 0, 980, 860);
        this.game.physics.p2.enable(this.player);
        this.game.camera.follow(this.player);
        

    }

When I try to run that, game area appears just black.

[bruno_]

Any error on the console?

Press F12 on the browser to show

[Zeterain]

You are overwriting your game immediately after you create it. Notice how you set RPG_test.game to an empty function right after you create your new game.

RPG_test.game = new Phaser.Game(640,640, Phaser.AUTO, 'game');

RPG_test.game = function () {

};

 

[ekeimaja]

Now I removed that function, but it is still black.

[Zeterain]

Alright, so it looks like you are trying to create a state object that you want your game to use.

You will need to create your game separately and add your state object to your game. Something like this:

var RPG_test = RPG_test || {},
    game = new Phaser.Game(640,640, Phaser.AUTO, 'game');

RPG_test.game = function (game) {

        this.game = game;

};

RPG_test.game.prototype = {
    preload: function () {

        this.game.load.image('street', 'img/street.png', 980, 860);
        this.game.load.image('player', 'img/human.png', 50, 50);

    },
    create: function () {
        
        this.game.physics.startSystem(Phaser.Physics.P2JS);
        this.cursors = this.game.input.keyboard.createCursorKeys();
        
        this.game.add.sprite(0, 0, 980, 860, 'street');
        this.player = this.game.add.sprite(400, 400, 'player');
        this.game.world.setBounds(0, 0, 980, 860);
        this.game.physics.p2.enable(this.player);
        this.game.camera.follow(this.player);
        

    }
};

// The name of the state doesn't matter too much. The last argument, true, automatically starts the new state
game.state.add('RPG_test', RPG_test.game, true);

Note that I didn't test this, but this should be enough to get you in the right direction. If there are any small errors like syntax issues, the console will tell you.

[ekeimaja]

No, still black screen. Now I got error Uncaught TypeError: e.create is not a function Earlier I haven't had any problem like this. 980x860 image is ok by its size?

[Zeterain]

The problem was on this line:

this.game.add.sprite(0, 0, 980, 860, 'street');

You are using the sprite factory method incorrectly. The proper order of arguments can be found: http://phaser.io/docs/2.4.4/Phaser.GameObjectFactory.html#sprite

[ekeimaja]

Now I changed it to tileSprite, and now it works. Thank you all!

[Zeterain]

No problem! Glad it works now.