This forum is read only and just serves as an archive. If you have any questions, please post them on

1 decade ago by Zetaphor

Hello everyone, I'm trying to develop a formula for scaling the sprite of an entity to a maximum over a time. I'm constrained within the float range of 0.0-1.0 as I'm using the canvas context to perform the scale.
That's not really clear, allow me to explain the situation.

I have "baby creatures", when they're born they start at a predefined baby_size and grow to adult_size over time, time being current_age <= adult_age. I'm performing this check on a timer, current_age is incremented on every timer execution.

I have to use the canvas scale function to properly size my sprites, which accepts a float multiplier. 0.1 would should represent the baby_size and 1.0 the adult_size.
I also have to set the x and y size on the entity so collisions are mapped to the sprite dimensions. The sprites are always squares, so x = y

What I'm trying to get here is a formula that will give me, based on the current_age relative to adult_age, the 0.1-1.0 scale and the x,y scale based on adult_size relative to baby_size.

I'm also tracking current_scale across updates, as I set this in the timer to be used by the draw function.

Any help here is greatly appreciated, I'm terrible with math so my current attempts have failed :-(

1 decade ago by dominic

The Number's .map method makes it quite easy to "map" one range of values to another. You can also use .limit to... well, limit the number :)

var scale =
	.map( 0, 5, 0.1, 1 ) // From 0 to 5 seconds, get a value from 0.1 to 1
	.limit( 0.1, 1 ); // Make sure it doesn't exceed 1

1 decade ago by Zetaphor

Just as I was refreshing in hopes of a reply, here comes Dominic!
This looks like something I can effectively use, and will cut down on the amount of voodoo math I'll have to use. I'll give it a shot and share my results, thanks Dom!

1 decade ago by Zetaphor

Thanks a million Dom, your map function works perfectly for getting my scale values!
I've only got one problem left with this, when I perform the scaling using the canvas context, the creatures have massive offsets from their actual positions.
The best way I can explain is to show you:

The blue cube on the right is static. That is the creatures scaling from their baby_size to their adult_size. The position they're showing at the end is where they should be the entire time. If I debug their X/Y, I see that it never changes during the scaling.

I read something about someone having to use offset on position, but I don't know how that would apply to my current situation.

Again any help is much appreciated, thanks again for that great map function Dominic!
Page 1 of 1
« first « previous next › last »