Problems with the `loadTexture()` method

[ylluminarious]

I've found a few problems with the `loadTexture()` method, which is used to change a sprite's texture. One of the problems that I've found with it is that the spritesheets that are played after loading new textures seem to skip, like so: http://cl.ly/2E073Q0O2m3C

 

(Here's the code for that example:)

// Constantsvar GAME_WIDTH = 800;var GAME_HEIGHT = 600;var TEXT_X_POS = 260;var TEXT_Y_POS = 100;var ALL_FRAMES = null;var FRAME_RATE = 15;var LOOP = true;var SPRITE_X_POS = 300;var SPRITE_Y_POS = 300;// New instance of Phaser.Gamevar game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update });var sprite;function preload () {    game.load.atlas("robot", "sprites/running_bot.png", "sprites/running_bot.json");    game.load.atlas("sea_creature", "sprites/seacreature.png", "sprites/seacreature.json");}function create () {    game.add.text(TEXT_X_POS, TEXT_Y_POS, "Click to change texture", {fontSize: "16px", fill: "white"});    sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "robot");    sprite.animations.add("robot", ALL_FRAMES, FRAME_RATE, LOOP);    sprite.animations.add("sea_creature", ALL_FRAMES, FRAME_RATE, LOOP);    sprite.animations.play("robot");}function update () {    game.input.onDown.add(changeTexture, sprite);}function changeTexture () {    sprite.loadTexture("sea_creature");    sprite.animations.play("sea_creature");}

You'll see that the sea creature's animation seems to skip, and I'm having this same problem with sprites of my own, so this problem is not specific to that particular texture.

 

Another problem that I've found with it is that when a new texture is loaded onto a sprite, the sizes of the original spritesheet stay on that sprite. For example: http://cl.ly/3F0C2k1G1G2z

 

(Here's the code for this example:)

// Constantsvar GAME_WIDTH = 800;var GAME_HEIGHT = 600;var CHANGE_TEXTURE_TEXT_X_POS = 260;var CHANGE_TEXTURE_TEXT_Y_POS = 100;var ARROW_KEYS_TEXT_X_POS = 260;var ARROW_KEYS_TEXT_Y_POS = 170;var SPRITE_X_POS = 300;var SPRITE_Y_POS = 300;var WALL_X_POS = 600;var WALL_Y_POS = 225;var STOPPED = 0;var SPRITE_RIGHT_VELOCITY = 150;var SPRITE_LEFT_VELOCITY = -150;var SPRITE_UP_VELOCITY = -150;var SPRITE_DOWN_VELOCITY = 150;// New instance of Phaser.Gamevar game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update });var sprite;var wall;var cursorKeys;function preload () {    game.load.image("master", "sprites/master.png");    game.load.image("melon", "sprites/melon.png");    game.load.image("rectangle", "sprites/Rectangle.png");}function create () {    game.add.text(CHANGE_TEXTURE_TEXT_X_POS, CHANGE_TEXTURE_TEXT_Y_POS, "Click to change texture", {fontSize: "16px", fill: "white"});    game.add.text(ARROW_KEYS_TEXT_X_POS, ARROW_KEYS_TEXT_Y_POS, "Use arrow keys to move", {fontSize: "16px", fill: "white"});    sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "master");    game.physics.arcade.enable(sprite);        wall = game.add.sprite(WALL_X_POS, WALL_Y_POS, "rectangle");    game.physics.arcade.enable(wall);    wall.body.immovable = true;        cursorKeys = game.input.keyboard.createCursorKeys();}function update () {    game.physics.arcade.collide(sprite, wall);        game.input.onDown.add(changeTexture, sprite);        sprite.body.velocity.x = STOPPED;    sprite.body.velocity.y = STOPPED;        if (cursorKeys.right.isDown) {        sprite.body.velocity.x = SPRITE_RIGHT_VELOCITY;    }    if (cursorKeys.left.isDown) {        sprite.body.velocity.x = SPRITE_LEFT_VELOCITY;    }    if (cursorKeys.up.isDown) {        sprite.body.velocity.y = SPRITE_UP_VELOCITY;    }    if (cursorKeys.down.isDown) {        sprite.body.velocity.y = SPRITE_DOWN_VELOCITY;    }}function changeTexture () {    sprite.loadTexture("melon");}

You'll see here that the first texture collides with the wall just fine, but when the new, smaller texture is loaded onto the sprite, its original sizes are still there. This makes the game look buggy and like the sprite is not actually colliding with the wall. Again, this problem is not specific to this example, as I have am having the same issue with my own sprites.

 

I really need a way around these problems of this `loadTexture()` method, as they've been causing me a lot of grief with my own project.

[kidos]

Just set the new size for the melon sprite

function changeTexture () {    sprite.loadTexture("melon");    sprite.body.setSize(sprite.width, sprite.height);}

[ylluminarious]

@kidos Thanks, that seems to have solved the problem of the sprite's size, but there is still the problem of the skipping animations.

[kidos]

I've got the feeling the it's related to ALL_FRAMES which is null in your code.

I'm not sure you can play the animation this way, since you have another frames in your atlas which are not related only to the blue jellyfish, and it's probably getting messy since the json probably has information about all the frames in the sea creatures atlas.

In contrary, on the robot animation, all of the frames are the robot and probably the json is related to the whole robot frames and this is why it works.

you should specify which frames need to be animated.

 

just my guts feeling...

[ylluminarious]

Well, in the Phaser documentation, it says that when you use null for the `frames` parameter, all frames are used (http://docs.phaser.io/Phaser.AnimationManager.html#add).

 

I tried doing what you said I should do (specifying which frames to use for both animations), but the jellyfish is not playing. When it tries to play, the JS console returns an error:

Uncaught TypeError: Cannot read property 'x' of undefined 

which is from Phaser's Sprite class's `setFrame` method (http://docs.phaser.io/Sprite.js.html#sunlight-1-line-422).

I've updated the example (http://cl.ly/2E073Q0O2m3C) so that you can see the error occurring with the jellyfish. Here's the updated source code for that as well:

// Constantsvar GAME_WIDTH = 800;var GAME_HEIGHT = 600;var TEXT_X_POS = 260;var TEXT_Y_POS = 100;var ALL_FRAMES_ROBOT = ["run00", "run01", "run02", "run03", "run04", "run05", "run06", "run07", "run08", "run09", "run10"];var ALL_FRAMES_JELLYFISH = [ 'blueJellyfish0000', 'blueJellyfish0001', 'blueJellyfish0002', 'blueJellyfish0003', 'blueJellyfish0004', 'blueJellyfish0005', 'blueJellyfish0006', 'blueJellyfish0007', 'blueJellyfish0008', 'blueJellyfish0009', 'blueJellyfish0010', 'blueJellyfish0011', 'blueJellyfish0012', 'blueJellyfish0013', 'blueJellyfish0014', 'blueJellyfish0015', 'blueJellyfish0016', 'blueJellyfish0017', 'blueJellyfish0018', 'blueJellyfish0019', 'blueJellyfish0020', 'blueJellyfish0021', 'blueJellyfish0022', 'blueJellyfish0023', 'blueJellyfish0024', 'blueJellyfish0025', 'blueJellyfish0026', 'blueJellyfish0027', 'blueJellyfish0028', 'blueJellyfish0029', 'blueJellyfish0030', 'blueJellyfish0031', 'blueJellyfish0032' ];var FRAME_RATE = 15;var LOOP = true;var USE_STRINGS = false;var SPRITE_X_POS = 300;var SPRITE_Y_POS = 300;// New instance of Phaser.Gamevar game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update });var sprite;function preload () {    game.load.atlas("robot", "sprites/running_bot.png", "sprites/running_bot.json");    game.load.atlas("sea_creature", "sprites/seacreature.png", "sprites/seacreature.json");}function create () {    game.add.text(TEXT_X_POS, TEXT_Y_POS, "Click to change texture", {fontSize: "16px", fill: "white"});    sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "robot");    sprite.animations.add("robot", ALL_FRAMES_ROBOT, FRAME_RATE, LOOP, USE_STRINGS);    sprite.animations.add("sea_creature", ALL_FRAMES_JELLYFISH, FRAME_RATE, LOOP, USE_STRINGS);    sprite.animations.play("robot");}function update () {    game.input.onDown.add(changeTexture, sprite);}function changeTexture () {    sprite.loadTexture("sea_creature");    sprite.animations.play("sea_creature");}

Also, here's the robot's JSON file: https://gist.github.com/anonymous/e3d0a5a5d9e867250441

and here's the jellyfish's JSON file (which also has information for other sea creature sprites): https://gist.github.com/7559980c9d42b23f8f6b

[kidos]

You're right, this is really strange.

The only way I could make it work is by removing this line from the create

sprite.animations.add("sea_creature", ALL_FRAMES_JELLYFISH, FRAME_RATE, LOOP, USE_STRINGS);

and paste it in the changeTexture

function changeTexture () {    sprite.loadTexture("sea_creature");    sprite.animations.add("sea_creature", ALL_FRAMES_JELLYFISH, FRAME_RATE, LOOP, USE_STRINGS);    sprite.animations.play("sea_creature");}

and it's working.. but it's really weird, hopefully someone can explain this (it looks like a bug to me).

[ylluminarious]

Yay, it's working. Thanks

But you are right, it is strange that it took taking that particular line out of `create` and into `changeTexture` to get it to happen : /