How to correctly change an Entities image source?

Skip to first unread message

Nick Newman

Nov 20, 2016, 2:51:26 PM11/20/16
to melonJS - A lightweight HTML5 game engine
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" },


game.Player = me.Entity.extend({
  init : function (x, y, data) {
  var image = me.loader.getImage("hello"); = 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.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;
  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);

  update : function (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";
this.canimation = "idle";

if(this.canimation != this.newanimation){
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

Nov 20, 2016, 3:21:36 PM11/20/16
Combine them into a single sprite sheet, and setup an animation to switch between them. There is a tutorial available here: And a description of how it works here:

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
For more options, visit

Nick Newman

Nov 20, 2016, 3:42:05 PM11/20/16
to melonJS - A lightweight HTML5 game engine

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
Reply all
Reply to author
0 new messages