Creating FMV-like cutscenes from video clips.

[NickyP]

NOTE 1: This tutorial is for making gifs. Yes, I know that WebM is now compatible with OpenBOR, and yes, I know that WebM has smaller file sizes and better quality than gifs. I'm teaching you how to do this with gifs because that's what I used.

NOTE 2: This tutorial is subject to becoming obsolete, should the websites and tools mentioned below become no longer accessible.

So, maybe you played Sonic SatAM Liberations and said to yourself, "holy cow, NickyP! I wanna turn video clips into cool cutscenes like you! How do I do it?" Well, Merry late-Christmas friend, because here's a tutorial for you.

Now mind you, this same tutorial can be found in Sonic SatAM Liberations, if you paxplode it. But I like you so much, that I'll expand upon it!

Now remember, this tutorial is specifically about turning a video file into a gif, then ripping the sound from the video, to play both as a cutscene in OpenBOR.

Step 1: Getting your clip

Do you already have a video clip you want to use? If so, skip to Step 2. If not, read on.

First, find the clip you want to use on a video streaming website, preferably YouTube. Once you have that, copy the video URL. If you're going to use the whole video, then you're golden up to this point; but, if you're using only specific time cues from a video, be sure to make note of them! In other words, say you want only a 5 minute clip from a 30 minute YouTube video, etc.

Alright, take your video URL, and go to this website:

http://www.clipconverter.cc/

Paste your video URL into the appropriate box. Click the MP4 tab below it. If you're going to convert only a specific scene like I mentioned above, use Converter Options to set the time cues. When you're ready, click Continue.

Now, you have an option here for video quality. I personally use Standard Quality (360p) for minimum file size. You're more than welcome to use the highest quality you want, but keep in mind that this whole tutorial will make your game's file size explode. Games that would otherwise only be 20 mb without cutscenes will suddenly become 400 mb with them. Keep this in mind, and let's move forward.

Like I said, I recommend you select Standard Quality (360p). Once you pick your video quality, click the Start button below. After it converts, click Download.

Step 2: Making the GIF

You've got your video file, right? Right, so now you're going to go to this website:

http://ezgif.com/video-to-gif

** Pay very close attention to the following instructions, if you want your video to be in sync with your audio! **

First, you're going to upload your video clip. Once you do, the page will change. Note the URL, it should have the MP4 listed, with the filename replaced with a bunch of numbers. I recommend copying this URL, because you're going to go back to it a lot depending on how long your video is.

After you upload your video, set Method to Legacy (Old). You MUST do this for the first gif file! For the second and all other gif files, set Method to ffmpeg.

Now, this next part is very tricky. Read carefully.

You are going to make gifs in 30 second intervals. This is because the ezgif website does not allow you to make longer gifs. The pattern for timing intervals, for best quality, is as follows: 0 to 30, 30.01 to 60, 60.01 to 90, etc.

So, let's start with the beginning of your cutscene. You'll set the Start Time to 0, and the End Time to 30. Click Convert. Scroll down the page, now you'll see your gif.

Under your gif, click Resize. Set the size of your gif to match the size of your game's video. IE, I usually make 320x240 games, so I would set the gif here to 320x240.

After you resize your gif, the resized version will appear below it. Under the resized version, click Optimize. You are free to set it to whatever you want, but I strongly recommend Lossy 140 (Heavy), for best file size.

After you optimize your gif, the optimized version will appear below. Click Save on the optimized version.

Now remember when I told you to save the URL of your MP4 on ezgif? Go back to that page. From this point forward, you will be following the exact same procedure for every gif you make, until you convert the entire video clip into gifs.

For the second and further gifs, set the Method to ffmpeg. Then, use the 30-second #.01 and # intervals I told you about before. In other words, the second gif will be from 30.01 to 60, the third gif from 60.01 to 90, the fourth gif from 90.01 to 120, etc.

Once you're done, you should have a collection of gifs, perfectly optimized, resized, and timed for your cutscene. I hope you didn't delete your video clip yet, because you're going to need it.

Step 3: Grabbing the background music

Hopefully you still have your video clip, either the one you had or the MP4 you made in Step 1. Go to this website:

https://cloudconvert.com/

You're going to convert your video file to a sound file. You can use any sound format you want, but I usually convert it to MP3. Once you're done, convert the sound file to whichever format you use for music in your game; either .BOR or .OGG.

However, this part is very important: DO NOT alter the length of the sound file when you convert it to OpenBOR music. You want it to play in sync with all of your gifs! You can change the volume if you'd like, but NOT the length!

Step 4: Putting it all together

It's been a long journey, friends, but here we are. Light at the tunnel, finish line, etc.

First, put your gifs and music wherever you choose to put them. I personally put the gifs in a folder in Data/Scenes and the music in Data/Music, but you're free to do whatever. Then, you're going to make a text file to play your cutscene. Here's an example of mine from Sonic SatAM Liberations:

# music [path] [loop] # BOR file to play
# animation [path] [x] [y] # GIF animation to play
# silence # Stop music

music data/music/scene1.bor
animation data/scenes/scene1/1-1.gif 0 0 0 1
animation data/scenes/scene1/1-2.gif 0 0 0 1
animation data/scenes/scene1/1-3.gif 0 0 0 1
animation data/scenes/scene1/1-4.gif 0 0 0 1
animation data/scenes/scene1/1-5.gif 0 0 0 1
animation data/scenes/scene1/1-6.gif 0 0 0 1

Note the 0 0 0 1 at the end of every gif. I have that there to prevent the player from skipping the cutscene. You can remove that, if you wish.

Then, you'll want to put the cutscene in your level set in Levels.txt. Here's an example from Sonic SatAM Liberations:

#
set Story_Mode
nosame 1
noshare 1
lives 3
credits 10

scene data/scenes/scene1/scene1.txt
z 166 224 160
file data/levels/rob1.txt
z 194 231 160
file data/levels/rob2.txt
next
scene data/scenes/scene2/scene2.txt

If you've followed my instructions to the T, then congratulations! You now have cutscenes like the ones I have in Sonic SatAM Liberations.

Have fun. 

 

[aL BeasTie]

I suggest using Animation Shop 3, which you can get for free now, it can open .AVI files and save as .gif easily, you will have more control over the process and have a nicer looking result than what these online converters do.  Also splitting scenes into parts will reduce the colour loss, dithering should be avoided too.

OpenBOR will actually support gif's that have individual palettes for each frame, so there would be no colour loss, but to date I have not found a program that will save them correctly for use in openbor.


http://www.freewaregeeks.com/jasc-animation-shop-3-11/

 

[esn23]

Virtual dub also does this its a free video editor program you can save all as gif and even add music to it without much a fuss or keep the music you already have.  But this stuff is not needed anymore because openbor uses webrm or whatever its called for videos which is a better result.

 

[NickyP]

Animation Shop 3 and Virtual Dub are indeed more efficient options--I wish I knew about them when DJ and I were making our Sonic game! Still, I'm glad I posted my methodology, because as a result the community now has three different ways to accomplish the same thing... all in one convenient tutorial thread!  ;D

But this stuff is not needed anymore because openbor uses webrm or whatever its called for videos which is a better result.

Au contraire, mon ami. Besides what nsw stated, there are also other OpenBOR-compatible systems that don't have WebM capability yet. PSP and Dreamcast, for example.

Once all of those issues are ironed out, WebM will undoubtedly be the superior option. But as things are now, GIFs are better if you're aiming for cross-platform compatibility.

EDIT: A couple minutes ago, I was messing around and I discovered a method that's several times easier than the one in the original post. Cloudconvert.com, one of the links I mentioned, can turn any video file into a gif. Just pick the resolution that matches your game, and then follow Step 3. What was then a half hour process ended up becoming a five minute one.

There's a catch, though. Two of them. If you follow my method in the original post, you'll get several gifs that are about 4-6 mb each. If you use cloudconvert to convert the whole clip, you'll get one file with a much larger file size. I'm not sure, but it's possible this can cause compatibility issues with low memory machines. I don't know because I'm unsure how OpenBOR handles gifs with RAM, but I worry that a gif's file size exceeding the total RAM available may crash the game. I'd have to experiment, though. And of course, this is particularly concerning consoles like PSP or Dreamcast.

Additionally, my method in the original post creates gifs with a Sega CD-like image quality. Using cloudconvert will have higher quality images in terms of color, but it will do so via error defusing. In other words, the gif will have those dots all over it.

Your mileage may vary, but once I do some testing I may stick to this new method I just ran into.

 

[aL BeasTie]

GIF is still the superior option imo for retro games, until filesize or colour loss becomes a major concern, I don't see a reason to use webm over gif just because.

There is a lot that can be done with GIF, it can be more powerful for game creation, for example there is no reason to convert something like this to webm.

It's 8 frames looped, the file is 67k - you could have it run endlessly if you wanted.

When you need to convert things like cartoons to .GIF thou, try to avoid scene changes and transitions.  Cut scenes into parts, parts with a fade to black transition should be their own .GIF each scene should be a separate .GIF - this avoids as much colour loss as possible, you will instantly use your entire palette just from a transition, transitions may even need to be broken into two parts (fading in, fading out etc.)

 

[ABK]

webm is with sound, its hard to sync sound with gifs and create complicated cutscene or just slap animated cartoon intro into one gif, you have to split it to multiple gifs and that wont sync properly with sound.

 

[aL BeasTie]

yeah that's totally another reason for webm.  (I know the pain of trying to sync gifs, especially hard when you have talking heads animations)