[1.1.3] Composed objects

[tiedscreams]

I'm trying to do a board game in which the board tiles are "composed objects", i.e. each tile is made by an image + a colored background.

I'm migrating my code from a DOM based rendering, where that task was really trivial: a div with a background color and an image within.

 

I was thinking it would be easy to achieve the same with Phaser.

 

My initial idea was to subclass Phaser.Sprite so to have a MyTile object able to have a texture composed by overlaying, in some way, some "tile.png" file over a colored background obtained through Phaser.Graphics, for example.

 

I tried with BitmapData.

Lot of problems even in trying to understand how to "render" an image on it. I made some try, then I read (from docs) that it's experimental and I decided to give up.

 

I tried with RenderTexture and it worked in my sample code where I passed the RenderTexture instance directly to the Phaser.Sprite constructor or the game.add.sprite method.

But refused to work in my game code where, having subclassed Phaser.Sprite, I had to set the sprite texture (i.e. the RenderTexture instance) only after object construction using the loadTexture method.

 

I tried alot (my code is now full of commented parts with all the experiments) and achieved nothing.

 

I really liked to do that with a single sprite, but failing on that I decided to use groups.

 

My idea was to have a group for each tile and put, in each group, one Graphics for the colored background and one Sprite for the foreground image.

No way: it seems that groups can't be nested...

I made several (failing) tried until I reduced my code to the following:

var a = view.game.add.group();var b = view.game.add.sprite();a.add(;

...that of course fails.

 

The error shows in phaser.js at line 1556 (I'm using release 1.1.3):

	if(nextObject)	{		nextObject._iPrev = childLast;		childLast._iNext = nextObject;	}

because childLast (that was assigned from child.last some line before) is undefined.

 

I was thinking that groups where like the containers in EaselJS (where I can nest them), but probably I'm misunderstanding their use.

 

Now the only thing I think I can do is to produce a png image for each tile color for each tile kind (so if I have 20 tile kinds and 8 colors, I can reach the nice number of 160 images only for the tiles).

 

Since I really don't want to do that, I'm here asking for help.

Any suggestion?

 

 

 

 

 

[rich]

In your code above, what is view ?

 

If I do this (in 1.1.3) it works fine for me:

var g = game.add.group();var s = game.add.sprite(0, 0, 'test');g.add(s);

Although the following is a bit cleaner:

var g = game.add.group();var s = g.create(0, 0, 'test');

To solve the problem of a background color behind a Sprite I would use a BitmapData. They are a bit experimental, but easily have the features needed to handle this. I'll post an example later tonight.

[tiedscreams]

I'm really sorry: I copied and pasted the wrong piece of code (did I already say that I've done a lot of tries?)

 

It was:

var a = game.add.group();var b = game.add.group();a.add(;

[tiedscreams]

BitmapData can be used even in case of WebGL rendering?

[tiedscreams]

I tried again with BitmapData.

I gave a look at the "Bitmapdata Wobble" example, that I previously ignored because it doesn't seem to work (at least with Chrome), and found this code to work:

var tileSize = 32; // for examplevar tilePos = { x: 96, y: 64 }; // again, for examplevar bmd = game.add.bitmapData(tileSize, tileSize);// this one works too:// var bmd = new Phaser.BitmapData(game, this._tileSize, this._tileSize);bmd.fillStyle("red");bmd.fillRect(0, 0, tileSize, tileSize);var foreground = game.cache.getImage('tileA'); // being "tileA" the tile image that I previously loaded into game cachebmd.context.drawImage(foreground, (tileSize-foreground.width)/2, (tileSize-foreground.height)/2);bmd.render();game.add.sprite(tilePos.x, tilePos.y, bmd);

Later tonight I'll put all the pieces together and see if this stuff works with the rest of my code.