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.
Related
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.
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!!
I'm working on a kind of 2d platform ARPG in Flashpunk, and have run into somewhat of a conundrum.
Ranged weapons are no big deal. They are a flat image that I move and rotate to emulate the feel of throwing or firing a ranged weapon. Melee weapons are a bit more of a pain, as I want to use a sprite map for different weapon animations.
The problem I run into is that I have to manually adjust the hitbox for every frame of the melee weapon. I would like to use the Pixelmask function included with Flashpunk, but it does not seem to work with Spritemap. Is there a way to force it to work, or a way to convert the current frame of the Spritemap into an Image so I can apply a Pixelmask?
It's a bit hacky, but what you could do is create a Vector of images separate from the animation itself, with indices equal to that of the corresponding animation, and create the pixelmask from there. If that ends up being too slow (dynamically allocated memory being slower than reusing preallocated), you could load the images, create pixelmasks from them, and push the pixelmasks to a vector instead. From there, all you would need to do is switch to the correct pixelmask during the attack animation.
When i play a video game (any old game like a racing game or pack man or whatever) how does everything get displayed on the screen in terms of what is going on in the program? is there some big RenderEverything method that is executed once a frame? this strikes me as a bit of a slow way to go about such a thing though.
EDIT: as a follow up question:
How does the computer doing the rendering define the frame both for rendering graphis and for doing in game activites like having a character walk across a room slowly. Like is there some clock t that keeps increasing and every render and every movment hapens as a function of t? If so how is t defined relative to the system that it runs on?
I intend this question to be somewhat synonomous to: When my cursor in the screen right now blinks twice every second how does it know what a second is? Also in java how would i make a program that displays a line of text then waits a second and desplays another line? (perahps this is getting too spacific)
They have a loop. Inside this loop it's called a method for rendering graphics and another for processing logic (and getting input). So this method will calculate everything based on the input and the graphics method print on screen based on the data already computed -- like what should be printed and its position.
Is that what you asked?
Questions about game development should be made here: https://gamedev.stackexchange.com/ :)
When i play a video game (any old game like a racing game or pack man or whatever) how does everything get displayed on the screen in terms of what is going on in the program? is there some big RenderEverything method that is executed once a frame?
Depends on the game. 2D games may be able to keep part of scenes rendered in previous frames, especially old games without scrolling screens. 3D game most likely redraws entire screen. Also good game never renders everything - only visible objects. Because rendering everything is slow, while rendering only visible objects is significantly faster.
this strikes me as a bit of a slow way to go about such a thing though.
You are free to try to find different way. Normal game repaints every visible object. Non-hardware-accelerated game may track unmodified screen regions, and repaint only objects that changed, moved, etc. Hardware accelerated game doesn't have to do that - it can redraw everything on screen every frame. As game/frame/scene complexity increases, it is much easier to simply repaint every visible object during every frame instead of tracking things that changed from previous frame.
That's basically it. The 'video game' is effectively a big state machine where all state is updated according to a frame rate. User input combined with game rules and enemy AI affect the state of the game. Once every frame the players view of the game, not the complete view of the game, is rendered.
Download the quake source, it makes for some interesting reading in the comments and also gives excellent insight as to how a game is constructed.
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!).