Jump to content

TileSprite with either Graphics or BitmapData


Recommended Posts

Hi, I've finally started using Phaser after a few months of looking at it with interest.


I'm using the latest version of Phaser that bower knows about, which is version 1.1.3.


I have come across some problems while trying to draw a hexagonal grid. I'm trying to draw a hexagon using either Phaser.BitmapData or Phaser.Graphics and I then assumed I could use the Phaser.TileSprite class to create a tiled pattern of hexagons.


The drawing of the hexagon is easy enough with Phaser.Graphics but then there is no texture to reference in the Phaser.TileSprite. With the Phaser.BitmapData class, I'm not seeing a rendered hexagon and I also get errors from referencing this in Phaser.TileSprite.

I'm creating the BitmapData as follows:
this.bitmapData = game.add.bitmapData(64,64);var angle,    i = 0,    len = 7,    position = {x:0, y:0},    center = {x:32, y:32},    size = 64;    angle = 2*Math.PI/6*(i+0.5);    position.x = center.x + size*Math.cos(angle);    position.y = center.y + size*Math.sin(angle);    this.bitmapData.moveTo(position.x, position.y);    this.bitmapData.beginFill(0xffffff);    for(;i<len;++i) {        angle = 2*Math.PI/6*(i+0.5);        position.x = center.x + size * Math.cos(angle);        position.y = center.y + size * Math.sin(angle);        this.bitmapData.lineTo(position.x, position.y);    }    this.bitmapData.fill();

Basically, I get one of two errors. Both are related to frames:

  • Cannot read property 'sourceSizeW' of null - phaser.js:19079
  • Uncaught TypeError: Cannot read property 'frame' of undefined -phaser.js:19327

The former error occurs when I give the tileSprite a reference to the bitmapData.texture, e.g. 


The latter error occurs when I give the tileSprite a reference to the bitmapData itself, e.g.


I don't get any problems if I use a loaded image with the tileSprite.


Any help would be appreciated.





Link to comment
Share on other sites

You can't use Graphics for this - it works by rendering the geometry natively using lots of quads on the GPU (when in WebGL mode), so there's no 'texture' as such which a tilesprite could use.


Using a bitmapData could possibly work, technically it creates a canvas object which is drawn to, which could then be uploaded to the GPU as a texture. However I'm not sure if Pixi supports using anything other than an image as a texture for a tile sprite specifically. Until very recently they had to be power of two sized as well (a restriction still in the version of Pixi used in Phaser).


I'll have a check and see if passing a bitmapData directly will work (I know it works fine for normal Sprites, and as a tileSprite extends a normal sprite it may be possible).

Link to comment
Share on other sites

Thanks for the very fast response. I wasn't sure if I was just getting something wrong or if it was a limitation. Still trying to get my head around the relationship between some of the Texture classes and things like Graphics. So, thanks for the explanation of what Graphics is actually doing under the bonnet.


It looks like PIXI.TilingSprite works with Image or Canvas elements.


After poking around with debugging a little bit, does the problem lies here: phaser.js - line 19994 or TileSprite.js - line.27?

this.texture = PIXI.TextureCache[key];

I maybe getting confused but I think, unless the key is a string, this.texture is always going to be undefined but bitmapData does not have a key.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...