Category Archives: Marketing

Animated GIFs of Gameplay Footage for Twitter on Mac OSX

I’ve been asked how I do this a few times on Twitter so thought I’d write a post about it. Haven’t done a ‘tutorial’ style post in a while. My bad.

Posting animated GIF images on Twitter is a very good way to get retweets and likes and build awareness of your game, but if you’re using a Mac there aren’t that many tools out there for the job. Most people seem to use GifCam on PC but there doesn’t seem to be a Mac equivalent.

In a nutshell I use Apple’s Quicktime Player to screen capture followed by a process in Photoshop to crop and convert to animated GIF. I tried a bunch of different tools and processes before deciding on this as by far the best way.

Make your GIFs 506 pixels wide by less than or equal to 506 pixels tall so that Twitter doesn’t resize them and make them all blurry (especially important for pixel art).

Photoshop has a stupid 500 frame limit for animated GIFs but you’ll probably hit Twitter’s 5mb size limit before this becomes a problem. It is, unfortunately, a problem sometimes though.

So, in detail…

1. Decide On An Emulator
I’m developing cross platform with Xamarin/MonoGame and have found by far the best emulator to use is GenyMotion for the Android platform. I use this for general development and for all screen capture. The iOS emulators are way to slow and grabbing video direct from iOS device is also too flakey and produces too many compression artefacts. The GenyMotion emulator is very fast and can be reliably run at 1:1 ration for pixel art – only downside is that the 1:1 function requires a ‘paid for’ licence.

Xamarin’s free Android Player is pretty good but at the time of writing there are bugs in the handling of key events which means I can’t use it for my purposes.

2. Capture
I use Apple’s Quicktime Player for this. I was using Snapz Pro but it only seems to capture up to 30fps. To screen capture from Quicktime Player just click ‘done’ on the first dialog that pops up then go to File->New Screen Recording. From there it’s self-explanatory.

3. Edit
This step is optional as you can do it in Photoshop. I find it much easier to crop the video to the section I want using Apple’s outdated but incredibly useful QuickTime Player 7 Pro. This is another paid app I’m afraid but it really makes the process a lot less painful.

4. Import Into Photoshop
Open your video in Photoshop and crop it to size. You can ‘scale up’ later when saving as a GIF so you could crop to 50% of your final size (or even less). This can look good for pixel art. Then I do the following procedure…

5. Adjust Colour Profile
– Edit->Assign Profile->Generic RGB Profile
Your mileage may vary on this but I find that screen captures from Quicktime always seem too dark when importing into Photoshop. This alleviates that issue to an extent.

6. Create Layers
Open the animation window (Window->Animation) and in the menu at the top rioght of the animation window select ‘Flatten Frames Into Layers’. This may take some time. Once this is done select the original movie layer (it will be the bottom layer in the layers palette) and delete it.

7. Create Frames
Back to the animation window menu now – this time select ‘Make Frames From Layers’.

8. Save As GIF
You are now ready to export your animation. For some reason I’ve found that Photoshop often does something weird with the first frame, like it’s assigned a different colour profile or something. You can check this by moving the timeline marker in the animation window and seeing if everything looks OK. If it doesn’t you can more the ‘start’ marker to just beyond the problem frame (you can also use these start/end markers to crop the timeline if you didn’t edit your video as described in step 3).

Use ‘Save For Web’ to export and you will have to mess around with the colour settings to get your animation under 5mb. Even if your image contains no transparency keep ‘transparency’ checked as without it file size jumps up dramatically (maybe photoshop uses this to only update areas of each frame that change). Note that you can scale up your image at this point – be sure to select ‘Nearest Neighbour’ scaling for pixel art.

I’ve found that the ‘loop’ setting keeps getting set back to ‘once’ when other parameters are changed so make this the last thing that you do. Changing colour options and the like can result in a lengthy ‘beachball of death’ depending on the size of your GIF so when you see this don’t panic just wait it out.

It’s easy to set up a Photoshop Action to cover steps 5 through 7.

That’s it. Any questions or comments please contact me here or on Twitter.

Advertisements

Retry – Why Both Apple And Rovio ‘Could Try Harder’.

Everyone knows how difficult it is for indie devs without a massive marketing budget to get visibility on the AppStore, which is why the minimal amount of curation Apple does is so important for indies – and why it’s doubly depressing to see the “Editor’s Choice” section of the AppStore so often filled with big-budget, big-name titles. Do consumers really need to have yet another ‘Saga’ or ‘Angry Birds’ game rammed down their throats when King/Rovio’s overflowing marketing coffers are quite capable of doing that without Apple’s help? Whenever I take a look at the “Editor’s Choice” section the vast majority of it seems to consist of titles that have already been pushed at me through some other marketing channel (usually Facebook or in-app advertising).

Anyway, self-righteous moaning aside, I thought I’d give Rovio’s ‘Retry’ (which was #1 in the “Editor’s Choice” section a few days ago) a spin and see if there was enough quality there to justify it’s placement. Despite my sour-grapes cynicism and automatic distrust of big-budget apps I’m working on a pixel-art type project at the moment and the game art intrigued me if nothing else.

What a major disappointment. ‘Retry’ is a game so woefully lacking in imagination that it makes ‘Custer’s Revenge’ look like ‘Ocarina Of Time’. My real problem with ‘Retry’ though is not the paucity of original ideas within it, or that it’s a bad game (it’s not actually that bad if I’m honest). My issue with it is that the boardroom level thinking that must have given birth to it is so obvious that Rovio may as well have transcribed the meeting minutes in the App Description:

“Fellow Directors, I feel we’ve reached about level 7 of the game they call ‘Shit Creek’. People are getting bored of ‘Angry Birds’ and the shareholders are getting twitchy about all these layoffs. We need another Big Idea – something to prove “Angry Birds” wasn’t just a fluke. You all get paid enormous salaries – what have you got for me?”

“Well, that ‘Flappy Bird’ game was huge and it was made by just the one guy. Imagine if we took a concept that braindead and then threw shedloads of money at it!”

“Good idea – we wouldn’t even need shedloads of money. These mofos love that retro pixel-art shit and it’s a piece of piss to churn that stuff out. We can even copy some old SNES games!”

“Sold! We can’t use a bird though, too hard to animate. What about a plane – they’re easy to draw?”

“Genius idea – we could call it ‘Big Budget Flappy Plane’!!”

“We’re so cool. No wonder this company is worth biilions. See you soon Rovi-bros!”

I do like the art though, the art is pretty cool. And it’s not really nicked from a SNES title – it’s simple, chunky, colourful and general very appealing. And the plane control is quite nice when you get the hang of it. The main problem (and it’s a big problem) with the gameplay is that the sprite sizes and game physics are so designed that you simply can’t see far enough in front of you to react effectively to what’s coming up, making success more about memorising the levels than anything else. I guess if that’s your thing though….

Did I mention I have a ‘Flappy Bird’ clone coming out? Guilty as charged, your honour.

retry1
Retry – aka Big Budget Flappy Plane

retry2
Budget Wouldn’t Stretch To A Crash Anim Though

custer
Custer’s Revenge – Don’t Even Go There


Floppy Frog – NOT a Flappy Bird Clone, Honest

Why Being An iOS Developer Makes Me Feel Like Lance Armstrong

Is it because working at the cutting edge of a fast-changing new technology is a non-stop thrill ride? Like the nail-biting descent off the Col De Tourmalet, you never know quite what’s round the next corner. Just grit your teeth, hang on, and try and enjoy the ride?

Er, nope.

Then is it because you have to commit and be in there for the long haul? Plan ahead, cope with the many ups and downs, don’t let the smaller setbacks knock you off your game. Stay focussed and know that if you’ve put the groundwork in and prepared well and can hang in there your determination and persistence will win out?

Wrong again.

It’s because Lance Armstrong was a cheat.

And the excuse that he gave for cheating was pretty much that everyone else was cheating. Taking performance-enhancing drugs, though he knew it was wrong, was simply his way of being able to compete on a level playing-field – a necessary evil. The system was flawed and he was just trying to make the best of it.

Apple’s iOS AppStore is similarly flawed. It’s pretty much impossible for a small, independent developer with no marketing budget to speak of to cut through the noise – whatever the quality of their work. And as so many are resorting to the ‘performance enhancing drugs’ of app title/keyword manipulation, fake reviews, bought reviews/downloads and the like, it puts a huge amount of pressure on others to do the same just to level the playing field. The result is a dysfunctional, ugly mess that works neither for the developer nor the consumer. One huge, cancerous, cannibalistic peleton with ‘Flappy Bird’ and a few others at the head and everyone else desperately scrapping amongst themselves to get in their slipstream. Eventually it’ll disappear up its own arse like those cartoons of a snake eating its own tail.

So far I’ve drawn the line at buying reviews or downloads – when things sink to that level you may as well be spamming Viagra for a living. I have changed the title of ‘Floppy Frog‘ though. It’s now ‘Toss The Floppy Frog And Bounce Around The Spikey Lilly Pads‘. Ridiculous, I know. And I may have a ‘Flappy Bird‘ clone launching soon (just because I had it hanging around of course). If I was a pro athlete they’d probably have banned me already.

Give us a break, Apple. The drugs don’t work.


Lance Armstrong – The Bastards Must Have Spiked My Champagne!


Floppy Frog – Now Officially A Tosser

Creating App Promo/Demo Videos With Adobe Premiere

One of the things I’ve had to do with Floppy Frog is create a promo video for uploading to YouTube. I’ve made many promo videos for my JavaME apps and games but these were very simple and I’ve never had to do them in a YouTube-friendly format.

I used to use iMovie for promo videos until Apple changed it from a very simple, flexible and useable tool into the pile of arcane, prescriptive and utterly useless garbage that it is now. For the last few years I’ve been using Apple’s Quicktime 7 pro which, ironically, was much more suited to task than the ‘new and improved (read ‘ruined’) iMovie.

But, Quicktime 7 Pro was not going to cut it (pun intended) for this task so I decided to try Adobe Premiere. Overall I found it a good application for the task in hand though getting the settings right was somewhat time consuming, I’ll therefore detail the process here.


1. Capturing The Video

I thought initially that I’d capture video from the iOS Simulator. Bad idea. It runs much too slowly. Next attempt was to run Floppy Frog on the iPad and capture using Reflector as an Airplay Receiver. Again, bad idea. Frame rate was OK but quality wasn’t up to scratch.

Third attempt was to run the Android version of Floppy Frog using the GenyMotion emulator and capture using the excellent Snapz Pro. Success! GenyMotion runs Floppy Frog just as fast as it would on device and Snapz Pro is a highly configurable and useable screen capture tool. It even captured the audio without a hitch. Had to purchase the full version of GenyMotion to get rid of the ‘free for personal use’ message but I don’t begrudge them that as it’s a fantastic piece of software at a reasonable price.

GenyMotion also has the benefit of being able to configure device display height/width so you can set up a virtual device that’s ideal for the video format you want to capture. In this case my video will run on YouTube at HD 1280*720. Floppy Frog is a portrait game so I wanted a device size that wouldn’t look too ‘squished’ within the HD landscape frame, therefore I set up a virtual device of 600*720 and captured at this size at 30fps which is the frame rate at which the game runs.


2. Import The Video Into Premiere

You’d expect this bit to be easy, and it is easy to simply import the captured video into Premiere. Where I ran into difficulties was that Premiere organises all video into a ‘sequence’ and setting up a ‘sequence’ that matched my video capture settings seemed impossible. All I could do was choose from a series of preset sequences and changing the preset sequence settings was not allowed for some reason. The key issue was that none of the preset sequences ran at 30fps, only 29.97 fps and when Premiere attempted to match my 30fps captured video to the 29.97 sequence settings I was getting horrible interlacing effects.

The solution was to start the Premiere project with any old sequence settings, import the captured video, then select the captured video and choose ‘New Sequence From Clip’. This creates a new sequence matching the captured video settings exactly. Only issue was my video was captured at 600*720 and I wanted a video running at 1280*720! Solution: capture a few seconds of random 1280*720 30fps video using Snapz Pro, import into Premiere, then create the sequence from this. The 600*720 video can now be dragged into this new sequence no problem and the 1280*720 capture can be deleted from the project.

Next issue (which most people probably won’t run into) is that my sound hardware runs at a 48khz sample rate whereas my video was captured at a 48khz sample rate. For some reason Premiere seems pretty flaky about converting between the two (whatever the project Audio settings) so I had to make sure my captured video was saved with the audio running at a 48khz sample rate.

3. Export The Video For YouTube

Once the video is comped together in Premiere it has to be exported at high-quality for uploaded to YouTube. I got and tweaked ‘export media’ settings from a YouTube tutorial and they might be slightly overkill quality-wise but I’ve added screenshots on the right…

4. Sit Back And Watch The Traffic Roll In

Or maybe not. But here’s the finished product anyway…

premiere_vid_youtube
Adobe Premiere YouTube Video Export Media Settings.

premiere_audio_youtube
Adobe Premiere YouTube Audio Export Media Settings.