How to correctly change an Entities image source?

[Nick Newman]

Hey folks, so basically I have two spritesheets:

player_walk and player_idle

They are both loaded in from the resource object:

    { name: "player_idle", type: "image", src: "NXSBIN/Images/Characters/Idle 135.0 -- 57.png" },

    { name: "player_walk", type: "image", src: "NXSBIN/Images/Characters/Walking 135.0 -- 42 noleg.png" },

Code:

game.Player = me.Entity.extend({

  init : function (x, y, data) {

  var image = me.loader.getImage("hello");

  this.data = data;

  this.onBodyEntered = false;

       this._super(me.Entity, "init", [x, y, {

            image: "player_idle",

            width: 250,

            height: 250,

            anchorPoint : new me.Vector2d(0.5, 0.5)

        }]);

this.body.gravity = 0;

this.body.gravityForce = 0;

    this.body.removeShapeAt(0);

this.body.addShape(new me.Ellipse(this.width/2, this.width/2, 45, 45))

this.canimation = "idle";

this.playerstate = "idle";

this.newanimation = "";

this.body.collisionType = me.collision.types.PLAYER_OBJECT;

this.chooseShipImage();

  },

  chooseShipImage: function () {

        var frame = ~~(Math.random() * 3);

        this.renderable.addAnimation("idle", generateFrames(57), 57/1.4);

        this.renderable.addAnimation("walk", generateFrames(42), 42/1.4);

        console.log(this.canimation)

        this.renderable.setCurrentAnimation("idle");

  },

  update : function (dt) {

this.body.update(dt);

if(!me.collision.check(this)){ // They are not colliding

this.onBodyEntered = false

}

if(this.body.vel.x != 0 || this.body.vel.y !=0){

//console.log("Player is moving");

this.canimation = "walk";

//console.log(this.renderable.getCurrentAnimationFrame())

}else{

this.canimation = "idle";

}

if(this.canimation != this.newanimation){

this.renderable.setCurrentAnimation(this.canimation)

this.renderable.image = me.loader.getImage("player_"+this.canimation)

this.newanimation = this.canimation;

}

Basically this just changes the animation when the character starts to walk. 

`this.renderable.image = me.loader.getImage("player_"+this.canimation)`

Actually works fine. The problem is when you first start to move   your character freezes for about 200ms.  Then, after that, your character is fine and changes between the spritesheet images without any hiccups. And it actually works great.

My problem is how can I get rid of that small initial 200ms lag? Isn't that spritesheet already preloaded? Also, I'm not sure if this is how you would even do this correctly :P

[Jay Oster]

Combine them into a single sprite sheet, and setup an animation to switch between them. There is a tutorial available here: https://github.com/melonjs/melonJS/wiki/How-to-use-Texture-Atlas-with-TexturePacker And a description of how it works here: https://github.com/melonjs/melonJS/wiki/Renderables

The combined sprite sheet and texture atlas will have much better performance (Your GPU won't have to swap textures into memory when you advance the animation). The Renderables article (above) describes how the update() return value is used to trigger redraws. So my guess is that even though your image swapping will do stuff visually, you may not be asking the engine to redraw the frame when the image is updated.

In any case, we recommend the texture atlas approach.

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nick Newman]

 

Aww the texture atlas.   I just have a large number of these spritesheets that get exported from Blender and putting them all into one file would be kind of a PITA.  However, I assume TexturePacker makes that problem easier. I'll give it a try, thank you.

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.