Sprite class - drawing multiple sprites

[Xron 0]

Hi,

Can anyone provide a clean way of drawing multiple sprites using a different x, y, and a different Sprite key.

[san40511 7]

you need create group and new class extended from Phaser.Sprite class.

Or use logic from here http://phaser.io/examples/v2/tilemaps/create-from-objects - you need just  substitute  tiled object to yours

[forkgame 0]

use this map editor to create a tilemap

www.mapeditor.org

 

then use tilemap feature from phaser..

http://phaser.io/examples/v2/category/tilemaps

[xronn 4]

use this map editor to create a tilemap

www.mapeditor.org

 

then use tilemap feature from phaser..

http://phaser.io/examples/v2/category/tilemaps

I mean a number of game sprites not tiles, such as players/npcs, instead of drawing each one at a position with the key, looking for an example of how this could be done. If not then is using groups best?

 

Edit: Posted from a member of the team  of the op

[san40511 7]

var self = this;

var sprites = [{x:15,y:10,key:"image1"},{x:15,y:10,key:"image2"},{x:15,y:10,key:"image3"}]

sprites.forEach(function(el){self.add.sprite(el.x,el.y,el.key)})

 

or

 

var groupObj = this.add.group();

var self = this;

var sprites = [{x:15,y:10,key:"image1"},{x:15,y:10,key:"image2"},{x:15,y:10,key:"image3"}]

sprites.forEach(function(el){groupObj.add(self.add.sprite(el.x,el.y,el.key))})

 

it can help

[forkgame 0]

I mean a number of game sprites not tiles, such as players/npcs, instead of drawing each one at a position with the key, looking for an example of how this could be done. If not then is using groups best?

 

Edit: Posted from a member of the team  of the op

 

oh, sorry I've got the question wrong..

 

san40511's answer is pretty good..

[xronn 4]

var self = this;

var sprites = [{x:15,y:10,key:"image1"},{x:15,y:10,key:"image2"},{x:15,y:10,key:"image3"}]

sprites.forEach(function(el){self.add.sprite(el.x,el.y,el.key)})

 

or

 

var groupObj = this.add.group();

var self = this;

var sprites = [{x:15,y:10,key:"image1"},{x:15,y:10,key:"image2"},{x:15,y:10,key:"image3"}]

sprites.forEach(function(el){groupObj.add(self.add.sprite(el.x,el.y,el.key))})

 

it can help

 

Hi, thanks so much for the demo I really like that second option, could you explain the use of "el" in the forEach

[forkgame 0]

Hi, thanks so much for the demo I really like that second option, could you explain the use of "el" in the forEach

 

it is the same as this I guess

 

for(var i=0;i<sprites.length;i++){

     var el = sprites;

     ....

     ....

}

[liakos1992 5]

The most professional way to do this is this:

var builder = {    rectHouse: function(x, y, width, height) {        var sprite = game.add.sprite(x, y, "rectangle_house");        sprite.x = x; sprite.y = y;        sprite.anchor.setTo(0.5, 0.5);        game.physics.arcade.enable(sprite);        sprite.body.setSize(width, height, 0, 0);        sprite.body.immovable = true;        return builder; //important    },    circleHouse: function(x, y, r) {        var sprite = game.add.sprite(x, y, "circle_house");        sprite.x = x; sprite.y = y;        sprite.anchor.setTo(0.5, 0.5);        game.physics.arcade.enable(sprite);        sprite.body.setSize(r, r, 0, 0);        sprite.body.immovable = true;        // optional: phaser_sprite_group.add.(sprite); (add this to a group)        return builder; //important    }}builder.rectHouse(0, 0, 100, 100).rectHouse(200, 0, 100, 100).rectHouse(300, 0, 100, 100).circleHouse(400, 500, 50).circleHouse(600, 400, 50);

A better way is "builder" to be a class instead of an object. If you want I can show you how to create classes.

[xronn 4]

Aha, thank you likaos I like you're idea too, I'll give it a go thanks!