Let system time determine animation speed, not program FPS - actionscript-3

I'm writing a card game in ActionScript 3. Each card is represented by an instance of a class extending movieclip exported from Flash CS4 that contains the card graphics and a flip animation. When I want to flip a card I call gotoAndPlay on this movieclip.
When the frame rate slows down all animations take longer to finish. It seems Flash will by default animate movieclips in a way that makes sure all frames in the clip will be drawn. Therefor, when the program frame rate goes below the frame rate of the clip, the animation will be played at a slower pace.
I would like to have an animation always play at the same speed and as a consequence always be shown on the screen for the same amount of time. If the frame rate is too slow to show all frames, frames are dropped. Is is possible to tell Flash to animate in this way? If not, what is the easiest way to program this behavior myself?

The easiest way would be to use a Timer (or a setInterval) triggering every 1000/fps milliseconds, telling your MovieClip to go to its next frame.
If you need something more accurate, you'll have to check the time spent since the last update (stolen from the first comment of this article from Keith Peters' blog, which explains everything pretty well).

It's been a while since I used Flash but from what I understand it's not possible because Flash uses a frame based animation model.
Silverlight however uses a time based animation model and will just draw as many intermediate frames as the frame-rate allows.

The tween class (fl.transitions.Tween) is perfect for this situation. By setting the last argument of the constructor to TRUE then it bases its animations/triggers off of seconds, and as far as I know it compensates for FPS loss/gain.
You can easily use it like the Timer class by passing a new object (Trigger(new Object(), "x") to the constructor and creating a listener for MOTION_FINISH (TweenEvent.MOTION_FINISH) to trigger your event!
I use Tweens for a LOT of things because they're easy, fast, and supported by everything. And like I said, it should solve your FPS/lag issues since it adjusts to FPS changes in real-time (as far as I know!).

Related

Box2D world.step() delay at first 2 runs

I'm programming a game using ActionScript 3.0 and included Box2D classes for its physics. It's a maze/labyrinth game having a lot of walls and a ball inside.
In my main fla when I call the maze.create(), the maze is created (visually and physically) and it will dispatch an event so I know when it's done working and then I call my frameHandler which calls another function from my maze class every frame and the big delay accrues exactly at world.step() in it. BUT THE THING IS that it lags only the first two times this function runs!!!
The reason I notice this lag, is that I've got another object starting to move according to mouse position in the same frame handler.
The reason I'm sure the world.step() is causing it, is that everything works fine when I dont call it.
I've seen many codes using Box2d, some had more objects than i have and I know that I've created my b2World and all the objects correctly, similar to all the Box2d tutorials and stuff BUT THEY DONT LAG AT ALL. Its just mine lagging and all!!
Do you have any Idea or similar experience?
Do you have any suggestion in general how to deal with heavy functions?
PLEEEEASE +.-
A maze will have a lot of fixtures in close proximity making a very dense dynamic tree (the method Box2D uses to optimize collision checks). There is unlikely to be any way around this. Perhaps you could just call Step a few times after adding the static walls, but before you add the dynamic ball bodies, and consider it part of the loading process. At least the lagging movements will not be visible to the player.

AS3 - What are the different methods of rendering animation on the screen?

I'm a beginner to AS3 and programming in general, but have learned enough that I want to now start learning how to render animations on the screen. These are the methods that I know of from two days of "researching" on google.
I'm not in a situation where I could afford to take courses from an educational institution, so my only means of learning are through online sources.
Update an objects x or y positions in a loop on every frame. Very basic. Of course any kind of advanced animation (say, showing a character running) is not possible with this method alone.
Using Flash and creating animation on a movie clip's timeline and, combined with moving the position of the object we can achieve some proper animation this way. However I cannot afford Flash, so this is not an option available to me. It also doesn't seem to be a popular option among more experienced programmers either (I think, due to having poor performance when lots of objects animating on the screen?)
Using a sprite sheet and then blitting the relevant image from the sprite sheet onto the screen.
Is there any other way to put an image from a sprite sheet onto the screen other than blitting?
And what other methods of rendering animation are available?
Some online websites claim that blitting is all I'll ever need, but I want to know all the options available so I could choose the most appropriate one for any given situation.
Any help would be appreciated :)
Another option for blitting is Stage3D. Take a look at Starling for 2D animations.
Blitting would be my best opinion. The only other thing I can think of is manually taking the images from the sprite sheet and putting it into each frame of an animation.
To render animation, you can create a frame in a MovieClip and convert it into a MovieClip and name the frame 'running'. Then you need to create an Enter Frame event where the MovieClip's instance name is 'Guy' and in the code on the function write 'Guy.x += 5;' to make your MovieClip go 5 pixels to the right every frame and also in the function write "Guy.gotoAndStop('running');"
Use TweenMax engine for better animation purposes. Easy coding, more Animation!!

Is it better to hide or remove MovieClips that aren't on the screen?

I'm working on a program in Flash coded in Actionscript 3 and I'm trying to determine if I should remove MovieClips from the stage when they're not on screen, or just stop moving them once they're outside the viewing area. If I do not removeChild() the MovieClips once they move out of the viewing area, I can potentially end up with tens of thousands of MovieClips on the stage (though not in view).
Is there a standard recommendation for hiding vs. removing MovieClips when not in view?
Basically, I'm trying to find out:
Does having MovieClips on the stage but outside of the viewing area use a lot of resources?
How much of a penalty does removing and adding MovieClips to and from the stage incur?
Is there an estimate of how many MovieClips you are working with before you should switch from one method to the other?
Thanks!
--EDIT--
In my program, MovieClips will often have to reappear on the screen. This means that when I remove them from the stage, they might have to be added back. If I hide them off-screen, they might have to be moved back on-screen. This is why I don't just removeChild() everything and null out the object.
Does having MovieClips on the stage but outside of the viewing area
use a lot of resources?
Your MovieClip uses the same amount of memory whether it is inside or outside of the viewing area.
How much of a penalty does removing and adding MovieClips to and from
the stage incur?
Removing/nulling is cheap, creating new object is much more expensive.
Is there an estimate of how many MovieClips you are working with
before you should switch from one method to the other?
If you are dealing with hundreds or thousands of instances have a look into object pooling.
There is also a nice video tutorial about object pooling. It is worth watching if you want to know more about destroying/creating display objects.
If you do not intend to reuse the movieclips, you should definitely remove them. The action is costless and it frees the memory of your movieclip. Having a hidden movieclip uses the same amount of memory, it is just easier on the display process (your application won't lag but this is a major memory leak).
It's a good idea to remove them if they are not being used. If it's an item that moves (say at an x speed of 5px/s), even once it's left the screen the item is still being processed and is moving farther and farther away.
Basically if it's not in use and serves no purpose then remove it to save on resources.

Each frame calculation vs pre-rendered bitmaps

We create some MovieClips and use Motion Tween to animate them.
We create some MovieClips and use Motion Tween to animate them, then render all frames as .png and create MovieClips with all those rendered .pngs.
I guess second way take less time, because you skip tween calculation step. Which way of animation is more proper/fast?
It's of course the first one. Maybe your intention is good but it wouldn't pay off in the long term and it's also micro-optimization and it's considered bad. It doesn't make the code readable and it can slow down your loading time. In general calculation is also faster because you don't need to change the whole screen. So it really depends if the second version uses for example delta packing for the animation.

ActionScript 3: Smooth programmatic animation

I want to animate MoviveClips/Sprite objects as smootly as possible. However so far the only method that works is placing the movement code into the EnterFrame event handler. There is one problem with this approach: when the framerate on a specific machine is below the desired framerate then the whole game slows down. I want to be able to do this in a time-independent manner.
There are two ways to do programmatic animation within the Flash player. The first you already pointed out by using a onEnterFrame. However, as you might already have noticed, to get a smooth animation you need to increase the overall frame rate of your movie. Doing this will also increase the CPU load for the entire period of time your SWF runs. This is not something you always want.
The other way of doing programmatic animation is by using a timer. Within a timer handler it is possible to call a function named updateAfterEvent which will update the screen independent from the FPS you'd set for your SWF. Therefore, using a timer leaves a gateway to do smooth animation within the Flash player without increasing the overall frame rate of your SWF.
Two years ago or so I set out to create my own tween libraries for Flash (because of my frustrations with the then existing tween libraries available). I released it under the name Coretween and this library lets you, among other things, choose what type of animation you prefer for every individual tween. On the documentation page I give an example of the difference between frame based and time based animation. The example SWF on that page runs at 12 fps but as you can see, the lower circle tweens much smoother because it's controlled by a timer that ticks at 60 fps and updates the screen in-depended from the SWF frame rate. Do keep in mind though that even the timer ticks at 60 fps in reality the Flash Player will never be able to achieve this frame rate. However, it will try to achieve this frame rate which results in a much smoother overall animation.
Unfortunately until now I've not been able to release a 1.0 version of my library but as far as I know it's pretty stable. You're more than welcome to use it in any way you see fit. I've used Coretween in many commercial productions including this one we did for StGeorge bank here in Australia.
Here are a few Actionscript based animation libraries:
TweenMax
Tweener
They both work well, and should help you with what you need.