Smooth movement in Starling

To whoever doesn’t know Starling is a flash library which incorporates GPU acceleration of Flash 11 (Molehill, Stage3D, name it as you want). I’ve been wanting to try it since I wanted to learn AS3, by not using FlashPunk just for academic reasons. And Starling was a good choice since it is very similar to Flash itself. But I had a major problem. There was not a variable from which I could have the time between two frames independently of the frame rate.

By a search in Starling forum I didn’t find the solution I wanted. So I solved it by myself.

Update: Please see the end of the post for an even better way.

Create three variables

		/**
		 * The time between the previous and the present frame in milliseconds.
		 */
		private var deltaTime:Number;
		private var prevFrame:int; // The time of the previous frame rendered.
		private var currentFrame:int; // The present time.

In your Constructor add an Added to stage event listener

			addEventListener(Event.ADDED_TO_STAGE, init);

In your init function add the enterframe event (which will implement your update methods) and take the current time.

private function init(e:Event):void
{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			stage.addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(TouchEvent.TOUCH, fire); // Mouse event.

			prevFrame = getTimer();
}

And finally in your update method do take the current time and subtract it from the previous. And there you have it :) Don’t forget to pass the new time to the previous for when the next update will be called.

private function update(e:Event):void
{
			currentFrame = getTimer();
			deltaTime = (currentFrame - prevFrame) / 1000;

			// Do your stuff here.

			prevFrame = currentFrame;
}

So there you have it. Simply multiply any movement by deltaTime and it will be smoothened. Just have in mind that the result will be far smaller since the deltaTime will be in milliseconds (eg. ~0.036).

Why have I done this, since the framerate will be 60 fps? Well, for starters no one guarantees that it will be 60 fps. In my laptop with an onboard Intel graphics card it hardly raises to 30 fps. If I didn’t use the deltatime to calculate the movement you can imagine how slow everything would move, and how different would be the game.

A second important reason would be that between frame changes the time isn’t always the same. No one guarantees that the first 30 frames of a second will be calculated at exactly the first half of the second. And I certainly don’t want objects in my game moving awkward or asynchronously.

PS: The code has been updated to be more efficient thanks to @digitaloranges.

Update thanks to @Daniel.

It’s even easier than I described. Add an enter frame listener and put there this code.

		private function update(e:EnterFrameEvent):void
		{
			deltaTime = e.passedTime;
		}

You’ll need to add the EnterFrameEvent as the type of your parameter for this to work.

Advertisements

Posted on 11 March, 2012, in Actionscript 3, Starling and tagged , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: