javascript - Problems with the `loadTexture()` method in the Phaser framework -

i've found few problems loadtexture() method, used change sprite's texture. 1 of problems i've found spritesheets played after loading new textures seem skip, so: http://cl.ly/text/123s1n2r1m35

(here's code example:)

// constants var 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.game var 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 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 sea creature's animation seems skip, , i'm having same problem sprites of own, problem not specific particular texture.

another problem i've found when new texture loaded onto sprite, sizes of original spritesheet stay on sprite. example: http://cl.ly/3f0c2k1g1g2z

(here's code example:)

// constants var 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.game var 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 change texture", {fontsize: "16px", fill: "white"});     game.add.text(arrow_keys_text_x_pos, arrow_keys_text_y_pos, "use arrow keys 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 first texture collides wall fine, when new, smaller texture loaded onto sprite, original sizes still there. makes game buggy , sprite not colliding wall. again, problem not specific example, have having same issue own sprites.

i need way around these problems of loadtexture() method, they've been causing me lot of grief own project.

concerning issue sprite's size:

all needs done set sprite's size new texture once new texture loaded, so:

function changetexture () {     sprite.loadtexture("melon");     sprite.body.setsize(newtexture.width, newtexture.height); } 

concerning issue skipping animations:

what first must done specify frames use, opposed setting frames parameter null. secondly, particular line new animation added new texture must put in method new texture loaded, so:

function changetexture () {     sprite.loadtexture("sea_creature");     sprite.animations.add("sea_creature", specificframestouse, framerate, whethertoloop, whethertouseanumericindex);     sprite.animations.play("sea_creature"); }