How to integrate each one into the scene and performance overview.

Sprite sheet

When creating the sprite sheet, make sure not to leave empty spaces anywhere i.e. each row must be filled with frames to the end.

Note: Textures up to 16,384 by 16,384 pixels are allowed. Keep in mind that this imposes a limitation of the total duration (number of frames) of the effect you want to create through the sprite sheet. With transparent video this limitation does not exist.

The sprite sheet used for this sample has 12 columns and 8 rows and its dimensions are 6000x2248 pixels.

Open spritesheet

Element style, animation and keyframes:

.element {
    width: 100%;
    height: 100%;
    background-image: url("spritesheet.png");
    background-size: 1200% 800%;
    animation: playX 0.504s steps(12) infinite, playY 4.032s steps(8) infinite;
}

@-webkit-keyframes playX {
     0% { background-position-x: 0%; }
   100% { background-position-x: -1200%; }
}

@-webkit-keyframes playY {
     0% { background-position-y: 0%; }
   100% { background-position-y: -800%; }
}

In short, each row is displayed for half a second and for that half a second each and every frame is displayed. Imagine a typewriter which instead of printing it is reading.

The sprite sheet element should be inside another element which controls the dimensions. Every frame in the sprite sheet has 500x281 pixels so the controlling element will have that dimensions.

playX animation

The "steps" represent the number of individual frames in a row/column.

The playX animation is for the the animation from left to right and its duration (0.504s) is actually the steps (12) multiplied by (42ms - the time between the keyframes). In this case the time between the frames (42ms) is actually 24 frames multiplied by 42ms = 1008ms.

In another example - if there are 25 frames per second in the animation, the time between the frames will be 1000ms / 25 frames = 40ms.

playY animation

The playY animation is for the animation from top to bottom and its duration (4.032) is actually the duration of the playX animation (0.504) multiplied by the number of steps in the PlayY animation (8).

Keyframes

One frame is one "element" part (100%) from the sprite sheet. So 12 columns times 100% = 1200%. For the playY keyframe - 8 * 100% = 800%. Moving by 100% each animation step.

Transparent video

The same effect can be achieved with transparent video using FFmpeg to join a sequence of transparent .PNG images in video.

Here is how to do it - Video Support

In short:

ffmpeg -i sequence/image-%05d.png -c:v libvpx -pix_fmt yuva420p -metadata:s:v:0 alpha_mode="1" -auto-alt-ref 0 -s 500x281 -b:v 1M -r 24 output.webm

The %05 in the given path after the -i parameters means that the source images have 5 digits in this scope i.e. image-00000.png, image-00001.png, image-00002.png and etc.
If you have intervals in the names of the images just wrap the path in quotes -> -i "sequence/image %05d.png".
To set custom resolution add for example "-s 500x281". If no resolution is specified the output resolution is the same as the source images.
To set custom bit rate add "-b:v 1M".
To set frame rate add "-r 24".

Further readings: This guide explains and provides some common options for creating video with libvpx. For all options visit the official Documentation page.

Video integration

<video class="video-wrap">
    <source id="myVideo" src="output.webm" type="video/webm">
</video>

Apply the dimensions to the video element:

.video-wrap {
    width: 26vw;
    height: 14.6vw;
}

Performance testing

Use the following techniques to check the CPU time and memory used.

Using GT Player (CPU Time)

Disable vsync (using the -vsync 0 command argument) and while your page is running pay attention to the Av. dt. field in the window’s title.

Using Unreal Engine 4 (CPU Time)

If running GT in UE4, the test can be performed with any game (e.g. CoherentPlayer, our FPS sample or your own).

With the game running, hit the tilde button (~) to open the UE4 console and execute stat CoherentGT to see the performance data.

See our UE4 docs for more information about supported console commands - http://coherent-labs.com/Documentation/UnrealEngine4-GT/

Memory usage

To see how much memory GT is taking, run the GTPlayer with -track_alloc 1. The window’s title will now display the amount of RAM / VRAM taken.

Note: Attaching the Inspector to the scene takes up memory too so keep it detached while measuring memory.

Sprite sheet animation

Test is performed with one animated sprite sheet on the page.

PNG, 6000x2248px.

CPU (GTPlayer): 0.15ms - 0.17ms

Total CPU (UE4): 0.2ms - 0.22ms

Total RAM: 12MB

Total VRAM: 60.1MB

9 sprite sheets (same one used) animations running simultaneously

CPU (GTPlayer): 0.23ms - 0.24ms

Total CPU (UE4): 0.24ms - 0.28ms. Not much of CPU time taken to run 8 more sprite sheet animations.

Total VRAM: 61.1MB. Adding nine elements using the same sprite sheet takes up virtually the same amount of memory.

Video

CPU (GTPlayer): 0.3ms - 0.32ms

Total CPU (UE4): 0.58ms - 0.82ms

Total RAM: **~20MB**

Total VRAM: **~20MB**

Note: More videos running on the page consume more processing power. Higher bitrate videos are also demanding more CPU power.

Additional test using 3 different sprite sheets

PNG, 3 x 6000x2248px.

CPU (GTPlayer): 0.21ms - 0.22ms

Total CPU (UE4): 0.21ms - 0.24ms

Total VRAM: 168MB

Sprite sheet vs Video Summary

Sprite sheet animation is very light. It needs less CPU time while running than video. Adding more sprite sheets doesn't affect the Total CPU that much. Every single video demands more CPU power. Videos use mainly CPU memory, sprite sheets use up mainly video memory.

Strive to keep the dimensions of the sprite sheet squarer. The provided sprite sheet transforms into 96 frames animation for 4 seconds which is 24 fps. Do not make larger sprite sheets if you don't have to. Keep it as small as possible. Making 60 fps animation may not look that much better than 24 fps one.