Jump to content

Single direction tile-sprite


Robominister
 Share

Recommended Posts

In Phaser, I want to create a TileSprite, that tiles in a single direction only (ie: horizontally). I also want to control the vertical proportion of my screen space that the sprite is drawn to. My questions are:
1) is there some API method to do this that doesn't involve TileScale?
2) If (1) is false, is there a way to access the source dimensions in pixels of the underlying sub-texture that I am using for the tile sprite?

Let's say I create the tile sprite like this:

var tileSprite = game.add.tileSprite(0, 0, game.world.width, game.world.height * 0.3, 'mySheet', 'myTextureId');

Then, to have the sprite tiled only in the horizontal dimension, I need the texture scaled up appropriately (the TileSprite occupies 30% of the screens vertical space) Unless I missed something, the only API I can find relating to this is to set the tileScale property. So, I could do this like so

var newTileScale = tileSprite.height / originalTextureHeight;
tileSprite.tileScale.setTo(newTileScale);

I have already tried this and it works fine, but I have to set originalTextureHeight as a constant value (the height I know the texture was). The moment the dimensions of that graphic get changed, this method no longer works as intended.

Can anyone point me to some useful API I might have missed, or is this really the only way to achieve this effect at the moment in Phaser?

Link to comment
Share on other sites

Thanks samme, I actually found this property quickly after I posted the question!

Interestingly, I had an issue though: I was creating a series of tilesprites for a background (all from the same spritesheet), and for one of them, sprite.texture.height was reporting the height of the whole texture atlas graphic (as opposed to the sub-texture that was being shown). I couldn't see a reason (and didn't investigate further to see if I had found an issu in the Phaser build I am using). All the other tilesprite's had the correct texture.height reported.

Switching to using sprite.texture.frame.height resolved the issue.

Link to comment
Share on other sites

  • 1 month later...

Not tested :unsure:

// Scale the texture to fit {count} tiles in the sprite's height

Phaser.TileSprite.prototype.scaleTileToHeight = function(count) {
  if (count == null) {
    count = 1;
  }
  this.tileScale.set(this.height / this.texture.frame.height / count);
  return this;
};

// Scale the texture to fit {count} tiles in the sprite's width

Phaser.TileSprite.prototype.scaleTileToWidth = function(count) {
  if (count == null) {
    count = 1;
  }
  this.tileScale.set(this.width / this.texture.frame.width / count);
  return this;
};

// Scale the texture to fit at least(?) {count} tiles in each dimension

Phaser.TileSprite.prototype.scaleTileToMax = function(count) {
  var x, y;
  if (count == null) {
    count = 1;
  }
  x = this.width  / this.texture.frame.width  / count;
  y = this.height / this.texture.frame.height / count;
  this.tileScale.set(Math.max(x, y));
  return this;
};

// Scale the texture to fit at most(?) {count} tiles in each dimension

Phaser.TileSprite.prototype.scaleTileToMin = function(count) {
  var x, y;
  if (count == null) {
    count = 1;
  }
  x = this.width  / this.texture.frame.width  / count;
  y = this.height / this.texture.frame.height / count;
  this.tileScale.set(Math.min(x, y));
  return this;
};

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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