iPhone Game Development - Chris Craft [45]
Name the new project iFlame and then click the Save button in the bottom right of the dialog box. You should now have a new Xcode iPhone OS application named iFlame.
Note
The secret to how the iFlame application is able to create such a photorealistic flame is that the application is actually playing a video loop of a real lighter's flame. All we did to create the flame video was to take a lighter into a windowless room and record it with a digital video recorder.
FIGURE 4.2
What's the secret behind the iFlame application?
It was very important for the video of the flame to have a seamless loop. This means that when you watch the flame you never see the flame reset with the video loop repeated from the end of the loop back to the beginning. This is another one of our behind-the-scenes iFlame tricks. Can you guess how we did it? No, we did not record hours and hours of video and find a section of video that just happened to match up over a reasonable interval of time. Here's how we did it: Imagine you have a short video loop that consists of five frames. You could imagine that the following numbers represent those five frames: 1, 2, 3, 4, and 5. Now if you took that video loop and reversed and then pasted it after the original video loop, you would end up with something like this: 1, 2, 3, 4, 5, 5, 4, 3, 2, 1.
FIGURE 4.3
New Project dialog box
This would technically be a seamless video loop, but it has a couple of problems. The number 5 frame is repeated twice, which will make that frame appear to last twice as long to viewers. And since the first frame is frame 1, and the last frame is frame 1,whenever the video loops back from the end to the beginning, frame 1 will appear to take twice as long as well. This is easy to fix with the following corrections: 1, 2, 3, 4, 5, 4, 3, 2. Notice all we had to do was remove the repeated frames: frames 1 and 5.
While this trick will make any video technically seamless, it is really only useful with video of things that look the same whether the video is being played forward or backward. All it would have taken to ruin this effect for us would have been for the flame to create smoke while it burned. Half the time the smoke would have floated away from the fire, while the other half of the time the smoke would have floated toward the flame. This would have completely destroyed the viewer's suspension of disbelief.
As you can see in Figure 4.4, if you have three frames of video and you want to create a seamless video loop, you will need to take the original three frames and reverse them, and then remove the duplicate first and last frames. Oftentimes with larger amounts of video you will not have to remove these overlapping frames.
FIGURE 4.4
Simple three-frame seamless video
You can either create your own flame video, which we recommend you try at some point, or use one of ours. There is a lot of video-editing software out there that you can use to create your videos. Start with products like iMovie, since it is free and should already be installed on your machine. You might also want to consider QuickTime Pro, which is affordable (less than $50 at the time of this writing) and powerful. It can open and save video from and to almost any video format, including the iPhone-compatible M4V format. It can even convert videos to sequences of images and vice versa. The iPhone lets only one video play at a time, and it will fill the screen. If you convert your videos to images and then play them as animations, you can have a lot more freedom. The tradeoff is that when videos are converted to images, they usually need more storage space.
For example, this would be a great answer if you had a dozen videos, any one of which the user can play full-screen, but you want the user to be able to see live, independently controlled thumbnails of all the videos at the same time.
You will need to use the MPMoviePlayerController class to play video on the iPhone. The MPMoviePlayerController is a full-screen movie player. If that does not