Quick and dirty – Making an AppStore Preview video for free, for iPhone and iPad resolutions

Hey everyone –

Since this is a dev blog, it would make sense to post on milestones in the development process! It’s tough to think about documenting work while working, like going on a bike ride and writing a manual on how to ride a bike at the same time. But that is just selfish – how can I keep people from 1) being entertained by my amateurish attempts at learning all of these technologies and 2) potentially helping someone out there with the same issue?

The problem to be solved here is that the Apple store asks you for a video preview of your game. Two problems actually – 1) I don’t have any video editing software, and 2) I have an iPhone 6, so screen captures / recordings would not be at native iPhone / iPad resolutions ( and would therefore be rejected by Apple). The solutions will be addressed using:

^ which, thank goodness, are all completely free! (Unless I did something terribly wrong.)

Let’s get to it.

A quick and dirty guide on how to make an AppStore preview:

 

1. Record your favorite iPhone or iPad gameplay with QuickTime Player

This simply involves connecting your device to your laptop, opening QuickTime, and selecting “New Movie Recording”. Next to the record button, there is an arrow key. Press that and select your device. You can also choose your device’s internal audio from the same menu:

Screen Shot 2017-03-06 at 9.06.25 PM.png

Now play your game / use your app, and record while doing it. This will generate a .mov file. As easy as that! Collect these in a folder somewhere, like so:

Screen Shot 2017-03-06 at 9.07.43 PM.png

2. Put those bad boys (video clips) together with Blender’s movie editing schtick

Thank goodness for Blender. The software originally made for creating/rendering 3d animations also does so much more! FOR FREE! https://www.blender.org/

I won’t explain each step, but I was trained in ~1 hour on using Blender video editing, at least as much as I needed, by these awesome series. He can explain it way better than I can: https://www.youtube.com/playlist?list=PLjyuVPBuorqIhlqZtoIvnAVQ3x18sNev4

Some notes –

Now after putting in some elbow grease to learn Blender 2d and throwing together your video, we’re on to the final step!

3. Cramming your hard work into Apple-accepted formats

  • If you try submitting an App Preview that does not have correct resolution (width, height in pixels), you will receive an error message.
  • If your video has +/- 30 fps, you will receive an error message.
  • If your video is longer than 30 seconds, you will receive an error message.
  • If you are generally a good person but show any fear / self-doubt, you will receive an error message.

This is where FFMPEG comes in. Apple will accept the highest-resolution iPhone (7 I think) format and apply it to all other generations, which is a handy perk for you. Same thing for iPad. So we just need to get one format per device family (?) correct.

You’ll need to install and use FFMPEG. If you’re not a Terminal junky (the command prompt-esque line-by-line Matrix portal on your computer), the bad news is you will be using Terminal. The good news is that it’s really quite straight forward.

Again, because there are people who explain these things better than I do, I recommend installing ffmpeg with this wonderful set of instructions: http://www.renevolution.com/ffmpeg/2013/03/16/how-to-install-ffmpeg-on-mac-os-x.html

(I had previously used http://ericholsinger.com/general/install-ffmpeg-on-a-mac/ but it appears to be down at the moment.)

Seriously consider sticking it through, because I anticipate that this software will save $ and headaches down the road.

Once you have it, you can both:

  • Change the FPS of a .mov (and other types of) video
  • Change the resolution of a .mov (and other types of) video
    • This also comes in handy for screenshots you’d like to rescale
    • Word of warning – my game just straight up stretches out to fit the iPad, so this method works for me (movies captured on my iPhone stretched to iPad dimensions). If you are using some kind of scene scaling other than a straight up scaled fit (AspectFill, AspectFit, etc) then the new iPad video will not reflect what users will see. However, this method still applies for the iPhone in that case, even if not for the iPad.

Example on the above sub-bullet (iPad screenshot on the left is just a stretched version of the iPhone screenshot on the right – scaled using FFMPEG similar to how you will scale the movie):

Specifically, the FFMPEG commands I used were:

At last – you have an App Preview in the correct format to put on the App Store! Congratulations!

I know that this was a bit of an amalgamation of materials, but I hope it saves someone some time researching / provides some kind of insight.

Oh, you want to see the one that I made? How generous! Check it out here – https://www.youtube.com/watch?v=4AbrWm-i2ic

Also – if you are putting an app up on the AppStore, I’d love to see it! Will also be happy to answer any questions on the above materials since I know it can get a bit nuanced. Shoot me a message in either of these two places:

See ya around!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s