object prototype, constructors and having separate js files issues

[Kamigerami]

Hi All,

 

I am trying to clean up my code from having everything in my main Game.js. I am using the phaser full screen mobile example.

 

 

I am trying to put the "player" related stuff in a separate file called Player.js and call it from my Game.js create function.

 

 

Using * v2.0.3 "Allorallen" - Built: Fri Apr 11 2014 13:08:30

 

 

Can't use the latest Phaser version because using the Full Screen Mobile example won't work on my Iphone 5 (I'ts completely dark and nothing shows up on it -> works only on my pc )

 

 

Issues I am having are :

 

1. I can't get the player.body stuff to work (getting 'undefined' messages in the console)

 

I know that I have game.physics.enable inside the Game.js file as well as the Player.js file.

If I remove the game.physics.enable line in the Player.js file I get other errors like "x" is undefined (for the velocity.x line in the Player.js file). 

 

I suspect that there are issues with how I am calling the player.create function. Not sure how to do it properly. Please advice.

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined phaser.js:45547Phaser.Physics.Arcade.enableBody phaser.js:45547Phaser.Physics.Arcade.enable phaser.js:45527Phaser.Physics.enable phaser.js:45193Player.create Player.js:19 /// this right hereBasicGame.Game.create Game.js:30 // this right herePhaser.StateManager.loadComplete phaser.js:13876Phaser.StateManager.preUpdate phaser.js:13745Phaser.Game.update phaser.js:18892Phaser.RequestAnimationFrame.updateRAF phaser.js:33200_onLoop phaser.js:33186

2. can't use game.add.tileSprite only game.add.sprite - If I do use tileSprite I get the following error : 

 

2014-11-08 17:31:48.086WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. phaser.js:5986

Here is my code. 

 

Please give me some guidance on whether I am going about this wrong (prototype constructors, scope issues, globals etc)

 

my code for errors 1 and 2.

 

The line with the error is in BOLD (Game.js line 30, Player.js line 19 and Line.js for the tileSprite WEBGL issue)

 

Game.js

 

var spaceKey, firstInput, newTime;BasicGame.Game = function (game) {};BasicGame.Game.prototype = {        create: function () {                this.line = new Line(this.game);                this.add.existing(this.line);                this.player = new Player(this.game);                this.add.existing(this.player);                this.cube = new Cube(this.game);                this.add.existing(this.cube);                this.game.physics.enable([this.line, this.player, this.cube], Phaser.Physics.ARCADE);                // set new bounds of world x, y, x ,y bounds                this.world.setBounds(0,0,this.convertWidth * 4,this.convertHeight);                this.player.create(); // this is the line                this.line.create();                this.cube.create();                 // follow player with camera                this.camera.follow(this.player);                // print start text                /// if first input then start game                this.input.onDown.addOnce(this.startGame, this);                spaceKey = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);                spaceKey.onDown.add(this.jump, this);                console.log ("new time is most like undef ? :", newTime);                if (undefined == newTime) {                        console.log("newTime undefined");                        newTime = this.time.now + (this.rnd.realInRange(10,100) * 50 );                }        },        update: function () {                // check collision                this.game.physics.arcade.collide(this.player, this.line);                                if (this.time.now > newTime) {                                        console.log("newtime is now");                                        this.updateNewTime();                                }                        if (this.player.x > this.world.width + 1)                                console.log("next level");        },        updateNewTime: function () {                console.log("updating NewTime", newTime);           this.player.tint = Math.random() * 0xffffff;           newTime = this.time.now + (this.rnd.realInRange(10, 100) * 100);                console.log("new newTime : ", newTime);        },        jump: function() {                if (!this.player.body.onFloor() && this.player.body.velocity.y == 0)                this.player.body.velocity.y = -250;        },        startGame: function () {                console.log("startGame function");                this.player.body.velocity.x += 150;        },        restartGame: function () {         this.state.start('Game');        },        quitGame: function (pointer) {                //      Here you should destroy anything you no longer need.                //      Stop music, delete sprites, purge caches, free resources, all that good stuff.                //      Then let's go back to the main menu.                this.state.start('MainMenu');        }};

 

Player.js

var Player = function (game) {Phaser.Group.call(this, game);};Player.prototype = Object.create(Phaser.Group.prototype);Player.prototype.constructor = Player;Player.prototype.create = function () {                // the player        var player = this.game.add.sprite(10, this.game.height / 2 - 20, 'player');              this.game.physics.enable(this.player, Phaser.Physics.ARCADE); //// this is the LINE              this.body = true;              this.collideWorldBounds = true;                              this.smoothed = false;              this.body.velocity.x = 0;};

 

Line.js

var Line = function (game) {Phaser.Group.call(this, game);};Line.prototype = Object.create(Phaser.Group.prototype);Line.prototype.constructor = Line;Line.prototype.create = function () {                // the line                var line = this.game.add.tileSprite(0, this.game.height / 2, this.game.width * 2, this.game.height / 2, 'line'); // can't have this as tileSprite because I get WEBGL errors -> only "sprite" works.                //var line = this.game.add.sprite(0, this.game.height / 2, 'line');        //      var line2 = this.game.add.sprite(line.width + 40, this.game.height / 2, 'line2');  //              line.collideWorldBounds = true;//                line.allowGravity = false;// the above are only commented so that I can get past the errors in point 1 so I can see the WEBGL error in the console};

 

my Index.html is just a standard html from the examples. I've added the js file to it

 

        <script src="src/game/scene/MainMenu.js"></script>

        <script src="src/game/scene/Player.js"></script>

        <script src="src/game/scene/Line.js"></script>

        <script src="src/game/scene/Cube.js"></script>

        <script src="src/game/scene/Game.js"></script>

 

 

as well as : 

 

        game.state.add('Player', BasicGame.Player);

        game.state.add('Line', BasicGame.Line);

        game.state.add('Cube', BasicGame.Cube);

        game.state.add('Game', BasicGame.Game);

 

 

[eguneys]

I know the second issue, It says the texture size has to be power of two, you can configure that on texture power to be power of 2. Or if you use Canvas renderer the error will go away.

[Kamigerami]

thnx man - Yeah I completely missed that. Changed the size of it to 64x16. Works great.

 

Still having issues thought with separating the player, the obstacles etc into different JS files. I've read and gone through numerous guides including the one on toastedware. Can't really get it to work the way I want to. 

 

Do I have to create my object with the Phaser.Sprite prototype to be able to enable the body on them ? not sure. oh well... lets see if somebody replies here  

 

[spencerTL]

If you're using phaser 2.1 + and a template from an earlier version you've probably still got the hasResized event in boot.js or your equivalent. The api changed and this gives you the blank screen problems on mobile but not desktop.

In your player class you're referring to this.body - as your player class extends group it doesn't have a body, you need to use a sprite's body. I think that's your other error.

[eguneys]

It's hard to figure out what exactly your problem is, you should clarify your post. Also take a look at my Phaser game structure, here https://github.com/eguneys/lose-your-marbles. I also suggest using a yeoman generator to structure and scaffold your application, here's generator-phaserjs.

 

Basically you have this structure:

app|-- main.js|-- states|   |-- mainState.js|   `-- playState.js`-- prefabs    |-- player.js    `-- game.js

`prefabs`  folder is for your assets, sprites, groups etc. `states` folder is for game states. and `main.js` is for entry point to the game.

[Kamigerami]

Thnx guys!

Issue number two is solved.

 

let me clarify a bit on what I am trying to achieve here. 

I am basically trying to create something similar to what the generator phaser does by having sprites, groups etc as separate js files separated from my state files.

 

I guess I am having scope issues. I'll have a look at the generator phaser and will try to mimic that behavior to see if that can teach me something on how to use prototype and constructors in phaser.

 

 

This is probably not a "phaser" related issue but rather a javascript oob lack of knowledge

 

Thank you all for the help! You've been very helpful!

[spencerTL]

I've hollowed out one of my classes that extends sprite and put in what you have in your player class.  As you have it, it won't work because it extends group and group has no body:

Player = function  (game,x,y,key,frame)  {    Phaser.Sprite.call(this, game, x, y,key,frame);                     game.physics.enable(game, Phaser.Physics.ARCADE); //// this is the LINE              this.body = true;              this.collideWorldBounds = true;              this.smoothed = false;              this.body.velocity.x = 0;};Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;Player.prototype.yourFunction = function() {  };Player.prototype.update = function() {  }; 

I haven't tested this, so there may be typo or something but the structure works.  

 

I usually enable the physics  of the extended sprite by the class instantiating it rather than within the class itself.  I don't know which is best practice, that way just makes more sense to me.