i am new to easel js. When we convert a flash/AS3 project to an HTML5Canvas project using adobe flash cc, the animations and movieclips will become easeljs Movieclip. But in easeljs we can use Sprite to show animation. But using movieclip is easy since flash will generate it.
My question is whether is there any benefit of using easeljs Sprite instead of easeljs Movieclip in terms of performance?
Sprite and MovieClip are totally different in EaselJS.
In Flash, MovieClips extend Sprites, so they have similar functionality.
In EaselJS, a Sprite displays frames of a SpriteSheet, and a MovieClip is a content Container, which understands the concepts of frames, including timelines and frame actions.
MovieClips are generally only used with Flash CC output, although you can make them manually. Ideally, Flash could export Sprites and SpriteSheets as well when it makes sense - however because of the nature of Flash timeline animations, this would be incredibly difficult to determine when and how to export Sprites/SpriteSheets vs MovieClips.
Strictly speaking on performance, Sprites should be better performing because they use a single (or a few) bitmap(s) for all frames, which gets GPU benefits. Multiple, large images (which happens with different sprites, or just single sprites with lots of large frames that span across images) can actually cause performance issues when the GPU switches textures.
There is also a SpriteSheetBuilder class (and example) that you can refer to, which takes Flash CC output, and generates a run-time SpriteSheet, giving you the performance benefits of Sprites, with the complex vector/image output of Flash CC.
Hope that clears things up somewhat.
Related
I am developing a 2D game using Adobe Flash Pro CS 6 and ActionScript3. I am having some trouble in developing some effects e. g. bomb blast, particle effects etc. I want to know, whether I can use After Effects for those and then use them the game. Please suggest me.
There's no problem of using any graphics data from any program in Flash as long as flash can support the file format.
In case of After Effects graphics, you'll probably have to export them as a PNG file sequence, so they'll most probably be pretty large in file size.
To import:
You can either make a movie clip and just import the first image of a sequence with CRTL/CMD + R and Flash with be "smart" enough to suggest to load the other files of that sequence.
If you want, you can load them during run-time, add them to the array/vector, create a Bitmap object and change it's bitmapData property on enter frame/timer to animate it.
If you are decided on using the actual After Effects graphics rather than emulating them using an Actionscript 3 particle effect, I'd actually recommend exporting them as video on an alpha channel and then converting that to flv and then hosting them individually and streaming them in via Netstream and placing them on the proper layer via an addchild. If bandwidth isn't a huge concern here, this would be a good method for achieving this effect.
Here is some documentation on Netstream. http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d4e.html
If this seems like it might achieve the desired result, I can explain further if needed.
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 am creating a bejeweled style game using flash builder for the web and I am wondering if it would be best (higher framerates, less render intensive, fast on all types of computers) to use the native rendering of actionscript 3 (display lists) or the gpu rendering of the Starling 2D Framework? My reasoning for wanting to use the native flash rendering is because from my research I understand that flash will utilize redraw regions and only redraw portions of the stage that need to be updated whereas starling will re-render the entire stage every frame. In a bejeweled style game there are many static objects and fewer dynamic objects so generally the entire stage does not need to be redrawn every frame, only small portions of the stage. Would it be better for performance to stick with the native rendering calls of actionscript 3 or would it be wiser to use the starling framework to utilize the gpu to accelerate the rendering? Any perspective would be much appreciated. Thanks.
Starling will be faster if you are using images, particularly on mobile.
The static regions can either be rendered as a single Sprite, or you can flatten it at runtime to improve the performance.
If you are drawing, in Starling you'll need to draw to a bitmap and then use that as a Sprite. You'll get better performance if everything is in the same sprite sheet, however.
While it's true that Starling draws every frame, it's a different sort of operation. Here's what actually happens:
1) The textures (images) being used by the app are uploaded to the GPU. This is done once.
2) Each frame, Starling tells the GPU "render this texture at this position with this scale and rotation". This is called a "draw call" but it's extremely fast. The slick thing with Starling is that it can batch these draw calls under certain circumstances to get serious speed improvements.
So yes, everything is "redrawn" each frame, but the GPU's hardware acceleration is used.
On mobile, Starling (or similar) is really the only way to do something at 60fps.
I have an animation that is created in flash, I have used the 3d tween changing many angles and rotations over 60 frames
playing this animation works fine by its self, The "snowy Screen is the 3d tween"Below is the object rotating
When I load this SWF into another Main SWF the 3d tween is ignored.Below
is the problem
Im hoping some one can explain if this is a glitch of some sort..
I have exported into different flash versions and have created different loader classes to try and find a solution.
Thanks
I have encountered this before and it killed me. If you load one 3D tween into a different SWF the parent SWF will control the perspective (there can only be one perspective per SWF at least as of Flash 10 player). You will need to set the perspective values identically in both the loaded SWF and the parent SWF. This one aspect of Flash 3D turned me off so much I do not use the feature at all anymore. This even goes for different assets dynamically parented together.
My questioin is pretty much in the title, Why do I keep reading in actionscript 3.0 that its a good idea to seperate the 'mind' from the 'object' when writing code?
Thanks for any help, this is confusing the hell out of me.
If you're asking why graphics are separated from the positioning, movement and physics; take this tree I've drawn:
In the tree you'll see that Entity has two properties:
Graphics - what the entity should look like.
Body - where the entity should be.
Moving down, you will see that there are several things that extend Entity - most notable are the Player and the Enemy classes.
Extending my Entity class above, I can easily change what should be used as the graphics and also provide slightly different bodies. For example, the player and enemies will have obviously different appearances, and the Tree class won't need to use a Body that deals with values like velocity because it doesn't move.
Here are some advantages of the above:
We can create entities that don't have graphics, saving performance and memory.
We can use different types of graphics rather than having to stick to MovieClip if you had extended MovieClip with your Entity class.
We can add additional logic into the Graphics class such as being able to easily covert a Sprite or MovieClip into a sprite sheet for better performance.
The graphics will be easier to manage and more lightweight (as opposed to if it were auto-bundled with each entity).
Physics will be easier to deal with without needing to know about graphics.
The Body can be updated without immediate effects on the graphics.
Your understanding of physics being completely unrelated to appearance will improve significantly.