Texture key when extending a sprite

[spencerTL]

I feel I must be missing something obvious - maybe scope, maybe not understanding how to extend a sprite properly.

 

I have extended a sprite so that it can be a tile so that can change colours.  Each color is going to be a different sprite.  The sprites are held on an atlas called 'tiles'.  When the the extended sprite object (called Tile) is instantiated it can use the key that is passed to it and set the frame.  If I change the frame immediately in the constructor it changes correctly.

 

However, if I have the frameName change in another method to be called by the main game it ignores it completely.  If I tell it to change the alpha in the same function it does it.  If I use the loadTexture method in the same function it also works.  This leads me to believe that it is either 'forgetting' the texture key or for some reason is unable to access it from this function.  Here's a cut down version of my code:

Tile = function  (game,x,y,key,frame)  {    Phaser.Sprite.call(this, game, x, y,key,frame);};Tile.prototype = Object.create(Phaser.Sprite.prototype);Tile.prototype.constructor = Tile;Tile.prototype.setColor = function() {this.frameName='greentile70.png'  //does nothing//this.loadTexture('tiles', 'redtile70.png')// DOES change the tile but I feel it should not be necessary to reload the texture...or is it?this.alpha=0.5;//DOES change the alpha  };Tile.prototype.update = function() {  };

All advice gratefully received.

[spencerTL]

Hmmm looking at Phaser's source suggested this line would force the frame to update

 

PIXI.WebGLRenderer.updateTextureFrame(this.texture);

 

and it works.  (Yay!).

 

What I don't understand though is why I need to add that manually after the frameName change.  As I am extending the Phaser.sprite I thought it would just inherit this method and just work.  This is clearly my weakness in understanding inheritance in JS,  so I'd appreciate an explanation if anyone can.

[InsaneHero]

It looks to my (inexperienced with JS) eye that your inheritance pattern is correct.

 

However changing the frame name directly won't do what you want unless the frameName variable is set up with a complex setter/getter function... looking at Phaser source, it is but it doesn't refresh the sprite...

Object.defineProperty(Phaser.Sprite.prototype, "frameName", {    get: function () {        return this.animations.frameName;    },    set: function (value) {        this.animations.frameName = value;    }});

...which I think is the correct approach, you don't want a ton of work being hidden under a simple string change.

 

I think I see where you got the updateTextureFrame call from, it's in the method "setFrame".  Did you try calling setFrame on your Tile object instead of setting it directly with frameName = "XXXX"; ?  That should do exactly what you want without dropping down to PIXI function calls.

[spencerTL]

Thanks, what you say makes sense but a Phaser sprite does change frame just by setting the frameName to a new string eg:

sprite.frameName = 'frame2.png'

This will change, and update the display of a sprite to frame2.png of a sprite atlas provided at its instantiation. Indeed it will work in my code if I place it in the constructor and not in another method.

In some ways my question is more like why does this work in Phaser's source when, as you point out, the set frameName doesn't seem to do anything to update the actual display.

SetFrame is where I got the PIXI call from, and while the docs don't say this shouldn't be used, they say it is mainly for internal use, so I try to avoid it especially when frameName works in other situations, ie when called from outside the extended sprite.