AS3 - Using sprite sheets to optimize my games - actionscript-3

So, I'm trying to make my flash "games" run more smoothly. I am using individual PNG files for each of my objects in order to create player animations.
I've heard from some places that using individual files like that is bad.
I heard about using sprite sheets in order to compress data and reduce memory usage.
Maybe I have it wrong, but is there a way to merge all of my PNG images (with transparency) together in such a way that flash can continue to use the images individually?
I am really looking for ways to make my programs run more smoothly in order to be able to have lots of images on screen without much lag. Any ideas on how I can make things run better?
Here is an example of a tile based game I'm trying to make that is having serious lag issues.

TexturePacker allows merge png files. It generates two files: png and config file. Png is just merged images and config file is txt file which you can load into your swf, parse and demerge your images using it. Config could be in various formats for different game engines.

Using Photoshop or similar software you would combine all of the animations frames into one file. The size and shape of the file can be whatever you want, but each of the 'frames' should be the same size, in the same order and with no space between them. For example, lets say each frame is 25x25px, your walk animation is 10 frames and you want the final .png to be one long strip. You would make a new .png with the dimensions of either 250X25 or 25X250 and then insert all of your frames into that one file in the order of the animation. It's up to you if you want to embed these as display object or files that get loaded, but once you have them you just need to use BitmapData to break up the input file into new BitmapData objects and then display them as needed. Going one step further, lets say that most if not all characters have a walk animation and an action animation, you would make a single class to deal with loading character animations and the first row of the image file would be the walk animation and the second would be the action animation.

Related

How to modify frame to 0 in motionbuilder?

I imported c3d file in motionbuilder, and found out the motion data actually starts from 175000.
Is there a way to start the animation from frame 0?
No need to script anything. Motionbuilder lets you input the start frame when importing your c3d file.
File > Motion File Import
You can try using the DopeSheet or timeline bar, select all objects, and respective keyframes and offset them manually. Note that MotionBuilder's UI doesn't do well with very large selections. If you have one point cloud it might not be too bad, but if you have several and an already crowded scene, this method will be frustrating.
The other option, assuming you can script in Python, would be to iterate all of the optical nodes, and offset all of their keyframes by -175000 frames.
If you need a starting point on scripting in Mobu: http://awforsythe.com/tutorials/pyfbsdk-1

Force certain sprites into only one image of the TextureAtlas in LIBGDX

I'm using TexturePacker to make a texture atlas. The result are 2 PNGs. I need certain images(sprites) to be deposited into only one of the pngs so I only have to bind only one texture to use in some shaders that I'm using. How can I force certain sprites to pack themselves at the same place and not dispersed randomly into the 2 PNGs?
Perhaps I've misunderstood your question, but you could just use texture packer twice, once with each set of sprites. Then you know which sprites will be in which png
You can create subdirectories within the directory of your source images and sort them into pages by placing them in different subdirectories. Each subdirectory will get its own unique Texture(s). The advantage of this method is that you have only one TextureAtlas to manage. The correct Texture will be automatically grabbed when you create sprites or get TextureRegions.
If you set flattenPaths to true, then you won't have to worry about what you name the subdirectories. If you leave it as the default false, then you must include the subdirectory name as part of the sprite name with a /.

Minimize memory usage with a multi-frame MovieClip

I have a MovieClip in Flash with 100 frames. Each frame contains a certain icon I need to use in a project. I create instances of this icon MovieClip wherever I need an icon to appear, and gotoAndStop to a certain frame to display that icon.
Will storing a 100 icons in a single movieclip cause every single icon to be created in memory whenever I create an instance of the MovieClip? If I stored each icon in the library and attached only the icon that is needed, would that consume less memory than creating this MovieClip that has all the icons in it?
To answer your question: When you go to a frame with an icon on it, Flash will create a new instance of that icon. When you leave that frame, Flash will make that icon eligible for garbage collection, unless you force it to hold the instance in memory somehow, such as using addEvenListener where the method that is the listener is the icon or somewhere inside it.
I think the memory usage is likely to be higher for the goToAndStop vs. the new instance. If you are not experiencing problems with goToAndStop(), you are unlikely to experience additional issues by instantiating a new icon each time you switch from one icon to another. The other people who have answered are quite right that you will use fewer CPU cycles by instantiating all the icons only once (by whatever method), and then simply using the same one every time you use that icon. However, your overall memory footprint will be higher, because you will have all of the icons (even ones you are not currently using) in memory all the time.
If you want to go the route of only instantiating each on once, I'd suggest you go with Lazy Loading, where you only instantiate each icon when it is first used. One way to do this is to use what you already have and visit the frame the first time you want to use a specific icon, then store the BitmapData or a reference to the icon itself after that and reuse it. Another way is to build a swc and use a similar pattern.
None of this requires a static variable BTW, since it sounds like you're not using tons of different copies of your icon MC. Even if you are, it's probably better to handle referencing the icons you have through dependency injection.
I think you are probably asking about file size, however, vs. actual memory usage. The answer to that questions is that all assets that are used by your fla get compiled into the swf, regardless of whether they are in a MovieClip, a SWC, or in the library with Export for Actionscript in Frame N checked.
I get it, I've got boobs, I'm guessing
Try this, to verify my "guess."
Create a swf that has a keyframe on frame 1.
Draw a circle there.
Put another keyframe on frame 10. Draw a square.
In Publish Settings, check "Generate size report."
Now, you know (or you should know) that this swf can display the circle on frame 1, even if the assets compiled on frame 10 have not yet been downloaded. So, is there any possible way that the square could be loaded into memory before Frame 10 has been downloaded? Hint: the answer is no.
Now ask yourself this: Do you think Macromedia wrote a special version of MC that is incapable of lazy loading that the MC that is the main Document Class that Flash generated for the movie you made above so obviously handles so well?
The Macromedia engineers did a lot of things that in hindsight look pretty stupid, but they're not that incompetent.
If each icon that goes into the 100 frames MovieClip is an image you can easily enough export that image for actionscript and access only the image you need.
Another idea is to create a static class that stores each icon frame as a symbol in a static array(if you want to access the icon by index) or Dictionary(if you want to retrieve it by name).
e.g.
package{
import flash.display.Bitmap;
public class Icons{
public static const assets:Vector.<Bitmap> = Vector.<Bitmap>([new Icon01ASExportName(),//instance bitmaps once
new Icon02ASExportName(),//reuse them later multiple times
...
new Icon99ASExportName()]);
}
}
Yet another is to generate a SpriteSheet, either once and save it as a file, either at runtime, then copyPixels() to paste the icon from the right rectangle of the main spritesheet. You've got multiple tools available for generating the spritesheet:
Zoƫ
SWFSheet
Flash CS6
TexturePacker (if you have movieclips, you can export them as an image sequence to drop into the software)
There are also ways to generate a spritesheet at runtime.
For some nicely explained video tutorials on spritesheets and BitmapData by Lee Brimelow: Sprite Sheets and Blitting - Part 1,2 and 3.
If your icons are Bitmaps then each movieclip will share the same data - the only memory increase will be due to more movieclips, rather than their contents (which shouldnt be a problem).
If your icons are not Bitmaps (other movieclips, shapes, buttons etc), then everything gets duplicated, so memory usage will increase a lot faster as more movieclips are added.
Another consideration is that lots of movieclips on screen will have more of an effect on FPS than simpler objects so you may want to consider adding the icon itself rather than the movieclip even if you are using Bitmaps.

SWF with multiple "stages"

Is it possible to have a single SWF file with multiple "stages" appearing at different parts of the page and sharing data?
What I'm trying to do requires sharing big amount of data (byteArrays of image data) that cannot be shared through LocalConnections or via JS (very slow) so I'm trying to avoid the "sharing" part and somehow do it in a single SWF. Problem is, those images need to appear on different parts of the page thus I'm stuck.
There is only one Stage in swfs - the Stage is effectively the background; and you cant have more than one background.
"Problem is, those images need to appear on different parts of the page" - why cant you adjust the position of the images?
Use swf 100x100 % of browser window with transparent bg (wmode='transparent'), load images and place them in appropriate position. Main problem how to calculte coordinates for thumbnails... ^)
And flash with transparent bg very slow too...

How to extract the shape of MovieClip?

We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.