Skip to content

Optimized Art Creation and Usage

Jump to bottom Edit New page
Andrew Start edited this page Mar 1, 2016 · 4 revisions

Information about making art and animation for Canvas games.

Overview

It is strongly encouraged to use a Canvas document type in Flash CC, as this disables features that aren't supported.

Working In Adobe Flash/Animate

Vector Art

  • EaselJS and PixiJS (with PixiFlash) both support vector art made in Flash. It can be rather expensive to draw however, so should be used carefully. PixiJS does not support as much as EaselJS does, as it is primarily a WebGL engine without a browser standard API to use for drawing.
  • Due to browsers drawing shapes slightly differently than Flash, you may find it necessary to place fills on separate layers and to expand them a pixel or two, so that they overlap with other fills or lines slightly. This prevents gaps from showing up when the art is used.
  • In EaselJS, gradients are supported, but are slower than regular fills. Elliptical gradients are not supported, make sure they are circular gradients instead.
  • In PixiJS gradients are not supported.
  • Dashed and Ragged strokes are not supported. If they are required, convert them to fills within an AS3 document (or draw many short lines). Just know that this will have a larger size and reduced performance.
  • Don't use bitmap fills - just use bitmaps directly.

Bitmaps

  • Bitmaps are good for displaying static art, and particularly complex art. This allows you to have lots of curves drawn, as well as fancy gradients and filters with no performance penalty, as they have already been drawn in the bitmap.
  • Generally speaking, drawing bitmap images is faster in both EaselJS and PixiJS's canvas fallback than drawing vector art. When in WebGL in PixiJS, it is exceptionally fast.
  • Don't use bitmap fills - just use bitmaps directly.
    • Using the Break Apart command on bitmaps creates a bitmap fill.

Masks

  • Masks are supported in EaseJS and PixiJS. However, in EaseJS and PixiJS's Canvas2D fallback, they are a significant performance hit, especially if you are masking a lot of content.

Special Effects

  • EaselJS supports most filters in Flash. Filters are slower than in AS3, but are supported in Canvas documents in Flash CC. Filters on animated objects require progamming to handle them specially, as they cache the filtered object as a bitmap and do not redraw it normally.
  • Color effects (not including Alpha) are handled as filters. They should not be used on graphics that change frames (like a mouth) as that prevents the graphic from visually changing frames.
  • PixiJS does not support the filters in Flash, with the exception of the 'advanced' color effect. However, only the multiplicative modifiers are supported - the additive values are ignored. This is reasonably fast to use.

Animating

  • When animating graphics/movieclips, a given graphic or movieclip should be the only thing on the entire layer - when other movieclips or vector art is included on the layer, Flash may export some inefficient code to determine what art is visible on each keyframe. This is bad, given how easily avoidable it is.
  • Audio - Guide out all layers with audio so that Flash doesn't try to export code to make audio play. Unfortunately, the Canvas document type only supports event audio, which makes it more difficult make animations sync to audio while scrubbing through the timeline.

Art Optimization

  • When optimizing, you are optimizing for 3 different things: file size, rendering performance, and memory usage. Many optimizations you make will improve two or more of these categories.
  • Avoid having content off screen, weather off the stage or out of a masked area. If it will never be seen, it is wasting file size, rendering performance, and memory. This can be especially common with legs and feet of characters who pop up in front of the screen to say things.
  • Use the HTML5 Canvas Size Report script to determine how large your published JavaScript file is, from individual graphics/movieclips to the overall size (it does require the file to be published).

Vector Art Optimization

  • Open each symbol in the library and run Flash's Optimize... command on all the wet art. (Select wet artwork, Modify > Shape > Optimize...) Optimize Curves will decrease the number of points in the selected art. The slider will determine how many points will be removed - choose a number that smooths unwanted points but keeps the art looking somewhat close to the original.
    • In general, fast in-between frames and smears can be optimized more than art that is used on a holding pose or long shots. You can use a higher optimization strength for art that is only on screen for a frame or two.
    • You can run Optimize Curves on multiple frames at once using Edit Multiple Frames. However, this will more than likely cause the art to break, so be careful when optimizing too many frames at once.
    • If art is breaking when you run Optimize Curves even on a low strength, you can optimize it in smaller selections instead of all in one selection. You can also adjust optimized art, but try to do so by moving points and not by drawing over the artwork, as that will just add more points back in.
    • Optimizations:
      • File size: moderate
      • Rendering: major
      • Memory: minor
  • Put your vector art in graphics, and reuse those graphics. Avoid having duplicate vector art, ever.
    • Optimizations:
      • File size: moderate
      • Rendering: none
      • Memory: moderate
  • Movieclips (not graphics) can be cached as bitmaps in the Display section of the Properties panel, using the Render dropdown. This can be a good option for something like a background, if the background is relatively simple, as the JavaScript for the vector art can be much smaller than a PNG could be.
    • Important Note: If caching as a bitmap, ensure that your movieclip is approximately the same size as it will be on the stage. Movieclips are cached at their own internal size, meaning that if they are scaled down, you still end up with a large cached bitmap which wastes memory and performance. Additionally, iOS will just silently fail to draw bitmaps that are too large.
    • Movieclips are cached as rectangles, specifically the rectangle that shows up when the movieclip is selected on the stage. If this rectangle includes a lot of transparency, it may be better to cache the separate objects inside the movieclip to avoid including excess transparency, which isn't good for memory usage or drawing performance.
    • Optimizations:
      • File size: none
      • Rendering: minor to major, depending on what is cached
      • Memory: none
  • Converting vector art to bitmaps can be very beneficial, especially if using PixiJS.
    • The Copy Layers To Bitmap script (FlashToolkit) makes this very easy, and reversible.
    • Optimizations:
      • File size: minor to moderate
      • Rendering: moderate to major
      • Memory: minor to moderate

Animation Optimization

  • On timelines where you are animating different graphics, run Optimize Keyframes (FlashToolkit) as a cleanup step. It removes duplicate keyframes that you might have created, which reduces filesize and memory. Note that this script does not play well with multiple frames of wet art and should not be used on such timelines.
    • Optimizations:
      • File size: minor
      • Rendering: minor
      • Memory: minor
  • When reusing specific graphics many times, like rain drops or snowflakes, definitely use a bitmap. Each instance of the art uses the same bitmap, instead of each getting their own set of vector drawing commands.
    • Optimizations:
      • File size: none to minor
      • Rendering: major
      • Memory: major

Bitmaps

  • Avoid compressing bitmaps within Flash - compression will be done better during integration. Additionally, you do not want to apply JPEG compression to a PNG - it harms the image quality and interferes with the PNG compression.
  • Bitmaps should be sized at/near 100% on the main timeline to retain image quality and avoid wasting space. If a bitmap is within a symbol that is smaller than 100%, the bitmap will need to be scaled down to match the size that it is on the main timeline.
    • Conversely, if a bitmap is scaled up within symbols to be larger than 100%, the bitmap itself should be larger to retain image quality.
    • When converting vector art to bitmaps with the Copy Layers to Bitmap script, the script will attempt to do this for you, so long as you entered the clip you wish to convert from the main timeline instead of the library.
    • Optimizations:
      • File size: minor to moderate
      • Rendering: minor to moderate
      • Memory: minor to moderate
  • Combining images into spritesheets can save memory and reduce filesize, but also reduces the number of file requests that you need to send to load your assets.
    • Flash is capable of combining images into a spritesheet when you publish.
    • TexturePacker is also an excellent tool for combining images into spritesheets, with more features and flexibility than Flash's built in spritesheet exporter.
    • Optimizations:
      • File size: minor to moderate
      • Rendering: EaselJS - none to minor, PixiJS - minor to moderate
      • Memory: minor
  • Avoid having large amounts of transparency in images - this can generally be trimmed off in some form.
    • If there is a lot of transparency in an image between separate elements, those elements should probably be split into separate images.
    • TexturePacker can automatically trim transparency off of images while combining images into spritesheets.
    • Optimizations:
      • File size: minor
      • Rendering: minor to moderate
      • Memory: minor to moderate
  • Compress images - use a moderate amount of JPEG compression on JPGs, and use 8-bit (paletted) PNGs whenever possible on PNGs.
    • On OSX, ImageAlpha is a great program for making 8-bit PNGs, and hooks into ImageOptim, which is a great program for lossless compression for both PNGs and JPGs.
    • On Windows, it is hard to find programs that compare to ImageAlpha and ImageOptim, but searching around will find you good tools.
    • There are also online tools like TinyPNG that can make 8-bit PNGs for you.
    • If you have an image that needs transparency and has too many colors to be converted into an 8-bit PNG without noticable loss in image quality, you can use the AlphaSplitter tool (FlashToolkit) to split the PNG into separate alpha and color images. These can be recombined during SpringRoll's loading process.
    • Optimizations:
      • File size: major
      • Rendering: none
      • Memory: none

Using Art Efficiently

Animation

TODO

Mouse input

TODO

Add a custom footer

Modules

Workflows

Clone this wiki locally