Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
manual:movie_clips [2013/10/03 15:43] – [Movie Clips] 157.181.161.144manual:movie_clips [2015/01/08 11:27] (current) – [More Complex Animations] daniel
Line 1: Line 1:
 +====== Movie Clips ======
  
 +Sparrow contains a very lightweight movie class: SPMovieClip. You can imagine this class as an SPImage with changing textures. (As it extends SPImage, it is really just that.)
 +
 +===== Acquiring Textures =====
 +
 +It is recommended that all frames of your movie clip are from one texture atlas, and that all of them have the same size (if they have not, they will be stretched to the size of the first frame).
 +
 +You can use tools like //Adobe Flash Pro// to create such an animation (beginning with Flash CS 6, you can export any movie in Sparrow's format).
 +
 +This is a sample of a texture atlas that contains the frames of a movie clip. First, look at the XML with the frame coordinates. Note that each frame starts with the name "flight_".
 +
 +<code xml>
 +<TextureAtlas imagePath="atlas.png">
 +    <SubTexture name="flight_00" x="0"   y="0" width="50" height="50" />
 +    <SubTexture name="flight_01" x="50"  y="0" width="50" height="50" />
 +    <SubTexture name="flight_02" x="100" y="0" width="50" height="50" />
 +    <SubTexture name="flight_03" x="150" y="0" width="50" height="50" />
 +    <!-- ... -->
 +</TextureAtlas>
 +</code>
 +
 +Here is the corresponding texture:
 +
 +{{ :manual:flight_animation.png?nolink&760 |}}
 +
 +===== Creating the MovieClip =====
 +
 +Now let's create the MovieClip:
 +
 +<code objc>
 +// we're using the textures from an atlas
 +SPTextureAtlas *atlas = [SPTextureAtlas atlasWithContentsOfFile:@"atlas.xml"];
 +
 +// this method returns all textures starting with the given string, sorted alphabetically.
 +// -> e.g. "flight_00", "flight_01", "flight_02"
 +NSArray *textures = [atlas texturesStartingWith:@"flight_"];
 +
 +// create movie clip
 +SPMovieClip *movie = [[SPMovieClip alloc] initWithFrames:textures fps:10];
 +
 +// control playback:
 +[movie play];
 +[movie pause];
 +
 +// looping:
 +movie.loop = NO; // default: YES
 +
 +// important: add clip to juggler
 +[Sparrow.juggler addObject:movie]
 +</code>
 +
 +We created a movie from the provided textures and a playback rate of 10 frames per second. Like all animations, it has to be handed over to a juggler --- don't forget that!
 +
 +You can also use custom durations for certain frames, and start playback of a sound whenever a certain frame is displayed.
 +
 +<code objc>
 +// add another frame that is displayed for half a second
 +[movie addFrameWithTexture:texture3 duration:0.5];
 +
 +// add sound at frame 0
 +SPSound *sound = [SPSound soundWithContentsOfFile:@"sound.caf"];
 +[movie setSound:[sound createChannel] atIndex:0];
 +
 +// listen for the COMPLETED event (dispatched once per loop)
 +[movie addEventListenerForType:SP_EVENT_TYPE_COMPLETED block:^(id event)
 +{
 +    NSLog(@"movie completed");
 +}];
 +</code>
 +
 +All in all, the class provides a very simple way to display an animation that's made up from lots of smaller images. 
 +
 +===== More Complex Videos =====
 +
 +A downside of this animation technique has to be mentioned, though: you will run out of texture memory if your animations are either very long or if the individual frames are very big. If your animations take up several big texture atlases, they might not fit into memory.
 +
 +For these kinds of animations, you need to switch to a more elaborate solution: skeletal animation. You have to split up your object into different bones and animate them separately. Going into detail on that topic is out of the scope of this manual; however, I recommend you look at the [[https://github.com/threerings/flump|Flump]] plugin to achieve this in Sparrow.
 +
 +-----
 +
 +//Next section: [[Audio Playback]]//
  manual/movie_clips.txt · Last modified: 2015/01/08 11:27 by daniel
 
Powered by DokuWiki