Add physics properties to a "class" object?

[fubeca6]

I'm doing some experimenting in Phaser (to say the least), trying to find a way to randomly generate maps. Now, I've got something of a "framework" worked out for this. My problem, however, is that although I can display  a "wall" tile, I can't configure physics. Here's where I'm at - including a few ideas I've tried:

    create: function() {                this.makeMap();               this.map.push(new this.Tile(128, 64, true, true));        this.renderMap();    },        // This is actually a "class" and is used to define a single     // tile on the game screen. It also defines blocked vs. non-blocked    // tiles both for movement and sight    Tile: function(x, y, moveBlock, sightBlock) {        this.x = x;        this.y = y;        this.moveBlock = moveBlock;        this.sightBlock = sightBlock;        this.body = this;        if (moveBlock == false) {            this.image = 'floor';        } else if (moveBlock == true){            this.image = 'wall';            this.tile = game.add.sprite(this.x, this.y, this.image);            /* This doesn't work:            game.physics.enable(this.tile, Phaser.Physics.ARCADE);            game.physics.arcade.collide(this.tile, this.player);            */        }    },    // "map" is an array, and this function creates floor tiles (32, 32) and feeds    // them into the map array. However, they are NOT actually rendered at this     // point    makeMap: function() {                        for (var y = 0; y < game.world.height; y+=32) {            for (var x = 0; x < game.world.width; x+=32) {                this.map.push(new this.Tile(x, y, false, false));            }        }        this.room1 = new this.Room(32, 64, 64, 64);        this.room2 = new this.Room(128, 128, 64, 64);        //this.createRoom(this.room1);        //this.createRoom(this.room2);    },    // This is where the tiles are actually rendered...    renderMap: function() {        for (var i = 0; i < this.map.length;i++) {                        this.newtile = game.add.sprite(this.map[i].x, this.map[i].y, this.map[i].image);            game.physics.enable(this.newtile, Phaser.Physics.ARCADE);            this.newtile.body.immovable = true;                        /* this doesn't work:            if (this.map[i].image == 'wall') {                game.physics.arcade.collide(this.newtile, this.player);                    }*/                        console.log(this.map[i].image); // for debugging        }    },

As always, your help is greatly appreciated

 

[lewster32]

The collide method must be called every frame for it to work, so it typically sits in the update function. Without it running every frame, the object will simply ignore collisions. Also, the collide and overlap methods look directly for the body property on a Sprite, and because yours are not extending Sprites, it won't work. You could maybe get it working if you set this.body to this.tile.body after enabling physics, but it'll be messy and may still not work. In the case that you were filling this.map with actual Sprite objects, you would have something like the following:

update: function() {  game.physics.arcade.collide(this.player, this.map, function(player, tile) {    // do something upon collision (if you want) here - 'tile' will represent the tile the player collided with  }},

You should definitely consider instead extending Phaser.Sprite like in this example as it will be much easier to get working as intended: http://examples.phaser.io/_site/view_full.html?d=sprites&f=extending+sprite+demo+2.js&t=extending%20sprite%20demo%202

[fubeca6]

Lewster, as always I really appreciate your input! My first impression of the Phaser.Sprite extending example is that it will be so much simpler and easier than what I'm doing now!!

 

Thank you for you help!

[fubeca6]

Hey Lewster,

 

I reviewed the Extending Sprite Examples, but found it rather difficult and awkward to implement in my code. What I'm trying to do is create a random-dungeon generator. I do this by creating "Tiles" (objects with various properties: x, y, image, whether it's a wall or floor, etc.), and feeding them into an array. There's some more to it, but as part of it, from my "create" function, I call a function that does the following:

        for (var i = 0; i < this.map.length;i++) {                        if (this.map[i].image == 'floor') {                this.newtile = game.add.sprite(this.map[i].x, this.map[i].y, this.map[i].image);                game.physics.enable(this.newtile, Phaser.Physics.ARCADE);                this.newtile.body.immovable = true;            } else if (this.map[i].image == 'wall') {                this.update();            }                   }

Now, "map" is an array that contains the tile objects that are used to create sprites (as you can see in this example.

 

My "update" function, has the following code:

        for (var i = 0; i < this.map.length;i++) {            if (this.map[i].image == 'wall') {                this.newtile = game.add.sprite(this.map[i].x, this.map[i].y, this.map[i].image);                game.physics.enable(this.newtile, Phaser.Physics.ARCADE);                this.newtile.body.immovable = true;                game.physics.arcade.collide(this.newtile, this.player);            }                        // For troubleshooting:            if (game.physics.arcade.collide(this.newtile, this.player)) {                console.log("true");                }        }

So what I'm expecting, is that if the map.image = wall, then it will be created as a sprite, physics set, and collision configured. However, when I run it, the map fills with "wall" tiles, and the console is blank. I'm pretty new at Phaser and Javascript, so I recognize that this is a fairly ambitious project, and I readily admit my noob-ish-ness  

 

Anyways, I know there's a logic error in here  - I'm just not sure how to fix it.

[lewster32]

Be aware that update is a reserved function name - it is called by Phaser every frame and acts as the main game loop. It looks like the loop in your update function is being run every frame and continually adding tiles over and over. Also, unless absolutely necessary, try to keep things encapsulated. When you use this.newtile, you're creating a property on the state which will be accessible anywhere, when var newTile; outside of the loop will be sufficient:

        var newtile;        for (var i = 0; i < this.map.length;i++) {            if (this.map[i].image == 'wall') {                newtile = game.add.sprite(this.map[i].x, this.map[i].y, this.map[i].image);                game.physics.enable(newtile, Phaser.Physics.ARCADE);                newtile.body.immovable = true;                game.physics.arcade.collide(newtile, this.player);            }                        // For troubleshooting:            if (game.physics.arcade.collide(newtile, this.player)) {                console.log("true");                }        }

If you don't encapsulate like this, it may become unclear what this.newtile refers to when you re-use it, whereas a local variable will always be undefined when the function is called again,

[fubeca6]

Well my problem is - my script is randomly creating series of tiles - either "floor" or "wall" and I can't get the player sprite to collide with the "wall" tiles. That's why I used the "update" function, because that's where I have to have the game.physics.arcade.collide statement. 

 

So I tried creating a new array that would hold only the "wall" tiles, and then in my update statement, iterating through them and creating the collide physics:

        for (var i = 0; i < this.wallTiles.length;i++) {            game.physics.arcade.collide(this.wallTiles[i], this.player);            }

So now I have collision...sort of. My sprite is now stuck within a 64x64 invisible pixel box      This seems so much more complicated than it should be. But I think that's because I'm maybe trying to work outside of how Phaser was really designed to work? I dunno. I'm gonna keep playing with it.

 

Here's some photos:

 

https://onedrive.live.com/?cid=A6D87D0508D102F4&id=A6D87D0508D102F4%21148&v=3

 

The first one you can see the map fully generated (but with no collide physics) just to kinda show what I'm working towards.