I am making a game where you play as fish. When you eat food you become larger. I am counting the camera scale as follows:

camera.scale = (player.originalWidth / player.width)

Then I apply it as a transform to the whole world. Now when the fish grows up you don't see any change on your sprite, only on the surrounding world. I want to achieve that you will see the growing a little bit. How should I modify this equation?


1 Answer 1


Because making the fish actually occupy more screen space would eventually cause problems, you could instantly grow the fish, but then zoom the camera out over a couple seconds from the old zoom to the new zoom level. To zoom gradually you could use linear interpolation (often abbreviated 'lerp'), or you could use a logistic function to make the zoom smoother.

To do this, you would first store the current zoom level when a growth event happens:

oldScale = camera.scale;
newScale = player.originalWidth / player.width
zoomDuration = 500 // time it will take to zoom out in ticks
zoomElapsed = 0;

Then you would run a short function every tick to animate the zoom (here's how to do it with linear interpolation):

if(zoomElapsed < zoomDuration) {
  camera.scale = (zoomElapsed/zoomDuration)*(newScale-oldScale)+oldScale;
} else {
  camera.scale = newScale;

And that would be it. Note that the linear interpolation above is going to 'jerk' into movement then instantly stop when it hits the new scale; to avoid that, the logistic curve would do nicely because it has tapered ends.

  • \$\begingroup\$ I'm not sure if I understand you. I want the fish to occupy gradually more and more space of camera viewbox \$\endgroup\$
    – duri
    Jul 28, 2016 at 20:28
  • \$\begingroup\$ To clarify, would you like to have the fish (when all the growth animations finish) occupy the same amount of screen (~same # of pixels) or occupy more screen (more pixels)? \$\endgroup\$ Jul 28, 2016 at 20:36
  • \$\begingroup\$ I want it to occupy more pixels from the camera viewport \$\endgroup\$
    – duri
    Jul 28, 2016 at 20:38
  • \$\begingroup\$ My current answer has it occupy the same number of pixels when it's done, but demonstrates the change through some animation to show that the fish has grown as opposed to the background shrinking. \$\endgroup\$ Jul 28, 2016 at 20:39
  • \$\begingroup\$ Ok I like your answer, maybe it looks better than what I wanted... thank you (btw I can't upvote cause I haven't a reputation 15) \$\endgroup\$
    – duri
    Jul 28, 2016 at 20:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .