Forums » Help » Sprite sheet animation scale

Is it possible to make entity animation scaled down but source image higher res for example I have anim where frame is 100x100 but I want it to be 50x50 on smaller screen like iPhone... How do I do that?

You can specify the global scale of your game when calling ig.main().

Generally, non-integer values for the scaling are not officially supported, but something like 0.5 should work as long as all your graphics are cleanly divisible by 2.

You could also use the Canvas API directly and call ig.system.context.scale( 0.5, 0.5 ); before drawing - but I think this will be quite slow on the iPhone.

That's the thing I don't want to scale the whole context I just want an entity animation being rescaled.

Then use the Canvas API's scale method in your entity's drawing code:

draw: function() {
  ig.system.context.save();
  ig.system.context.scale( 0.5, 0.5 );

  this.parent();

  ig.system.context.restore();
}

Quote from dominic
Then use the Canvas API's scale method in your entity's drawing code:

##
draw: function() {
ig.system.context.save();
ig.system.context.scale( 0.5, 0.5 );

this.parent();

ig.system.context.restore();
}
##

Big thanks man!

How would you fix collision when you do this.

When you resize the scale, the entity that was shrunk bases it's collision on the it's scaled down canvas context.

I have an entity that chases my mouse, when I scale the entity by .5 using this method and have my mouse at the lower right corner of my game, the entity "collides" when it is in the center of the screen because that is the lower right corner area of it's half-scaled context.

thanks

edit: so this didn't quite work out either...

this.anims.right.sheet.image.resize(.5);
this.anims.right.sheet.image.width *=.5;
this.anims.right.sheet.image.height *=.5;
this.anims.right.sheet.width *= .5;
this.anims.right.sheet.height *= .5;

this.size.x *= .5;
this.size.y *= .5;