Beach

beach2

This past week I went to Brighton, England to visit work colleagues at the Unity office there and got stuck. The #snowpocalypse hit the east coast and New York City was snowed in. My flight was cancelled and so I found myself with a quiet weekend on my hands. I’d noticed a few weeks ago that #screensaverjam was happening and loved the idea but figured I wouldn’t be able to participate due to scheduling. The idea of making something using game tools that was non-interactive and just about creating nice visuals felt really liberating. I thought about a few ideas I might like to do and then remembered a raw prototype I’d made from the summer, Beach.

I love to read science fiction, especially some of the more recent generation of space opera, people like Iain M. Banks and Ann Leckie. I love the broad, expansive feeling of intelligent space ships travelling through vast spaces and all the strangeness that may arise.  This lead me to the concept for Beach. I wanted to make something which would capture some of that awe inspiring feeling, of space, distance and smallness. The original idea was to have a simple beach that the player was positioned on and then watching as procedurally generated spaceships arrive and depart.  In the process I realized that having some framing geometry, buildings between the player and the ships would make things much more visually interesting and so began to add some very random ‘building’ like alien megastructure things to act as frame and foreground for the floating ships.

I built the project in Unity, and used some simple primitive based geometry and textureless materials. I like the feeling of abstraction that this affords and it also makes it fairly easy for me to create evocative visuals relatively quickly using simple colors and shapes.  I initially attempted to use some procedural color palette tools I’d created but wasn’t too happy with the results. At some point the tool flung up the predominantly blue palette that is in the current version of the piece and I turned off the color switching and decided to stick with that pallette.  This combination of using procedural tools as a kind of ‘collaborator’ which throws up ideas which you as the creator then edit is pretty interesting. I’d like to explore this technique further in the future, a combination of procedural generation and human selection and editing.

I originally had a first person style controller in there so that the player could turn and look around. I removed this for the #screensaverjam version and replaced it with a simple, slow rotation for the camera. I actually prefer this approach as it gives the piece a more sweeping, cinematic feel.

beach3

In the original prototype I had experimented with having the ship geometry being animated in response to playing audio in the scene. I scrapped the idea for this version as it didn’t end up being very interesting. As scratch audio however I had used an album created by Autechre side project Gescom titled ‘MD’ which is a collection of ambient and noise works released on minidisc and designed to be played on shuffle, creating an aleatoric, randomly generated sequence. I’ve done several works in the past which attempted to explore this concept further, cutting and shuffling between audio files, and thought this would be a cool chance to pursue it.  I recorded a series of very rough, loosely tonal improvisations using a physical modeling synthesizer. I selected about 12 takes from these and wrote a script in Unity to mix slowly between them at random, selecting and playing two at any given time.  I’m fairly happy with the results. At times it throws up some nice combinations and I feel like the slightly abrasive, unsettling textures and tonality of the audio matches the alien mood I wanted for the piece. I was hoping to create the feeling of being far from home, surrounded by giant alien structures which are completely impassive to you.  I feel that at times the audio conveys that well. Given some time I might return to it and edit the tracks a bit more, clean up some of the obvious glitches and errors. Part of me also just wants to leave them and have that be part of the user-hostility of the piece. I’m undecided.

I do have a game idea which I’d like to explore that’s set in this world. Loosely speaking it’s a networked multiplayer information and economic warfare game in which players inhabit a space port and try to out trade and spy each other, responding to what ships arrive and depart. It’s probably stupidly ambitious and I’m not sure if I’ll ever get to pursue it. At the very least I need to finish Monarch Black first. I would very much like to attempt a networked multiplayer game in the future though, maybe for the project after MB so we’ll see.

You can download either a screensaver only version of Beach or the version with the audio for free on my page at itch.io.

beach1

Promoting Your Game With Animated GIFs

Why Use GIFs?

As indie developers more often then not it falls to us to market and promote our own games. There are many ways to do this but one of my favorite is to use animated GIFs. Video games are an art form of moving images (mostly!) and if a picture is worth a thousand words an animated GIF is worth 80 to 100 thousand words.

Seeing your game in motion is a great way for people to get an idea about what it will be like to play it.  I’ve found that the amount of interaction and interest I’ve gotten for my game Monarch Black on social media has increased the most at two key points: The first was when I started participating in the #screenshotsaturday hashtag on Twitter posting still images, and the second was when I switched to regularly posting animated GIFs, instead of stills.

Twitter is a great place to post GIFs but they’re also great for development forums like TIGSource’s Dev Logs area or your own dev blog. When people are scanning a feed or thread, the great thing about GIFs is that they automatically start playing, and looping as the user scrolls past. This gives your game a chance to reach new players that weren’t keen enough to click through a YouTube link, but might become interested seeing your GIF at a glance. In a conversation on Twitter with Jonathan Holmes of Destructoid he suggested to me that a simple email with a nice GIF embedded in it might be a good way to quickly capture a writers attention, and get them to click on further links to learn more.

For players and press, there’s very little friction in viewing a GIF. You know it’s going to be short, you don’t have to wait through ads and you can instantly see some piece of a game.

Easy Tools

There are a number of simple tools like Gyazo and GifCam which may be all that you need, depending on how involved you want to get. Both of these are stand alone applications designed to allow you to record things on your screen and output directly to GIF. What they lack in complex features or output quality they make up for in ease of use.

Visual Snacks

Now a little piece of advice. It’s possible to get very fussy about creating perfect, beautiful GIFs of your game but I would advise that this is a mistake. There are places for trying to make things perfect and beautiful, like in your trailer. The trailer is a piece of content that will be used in many places, hopefully seen by many people and will be a key selling tool for your game. The fun thing about GIFs is that they are ephemeral and a bit disposable. They’re like little visual snacks that you can sprinkle into your promotional efforts for your game.I think this is a strength of them as a medium and therefore instead of obsessing over quality you should focus on quantity.

Work Flow

This is where work flow comes in.  Making and sharing GIFs, especially if you obsess over them, can be surprisingly time consuming. When you’re a one man band like me you want the time consuming thing you do to be making your game more awesome, not tweaking GIF compression. So! Here is a work flow that I’ve found works for me and allows me to produce the quality of GIF I want and seed them into the world.

Capture

First, I capture HD footage of my game using Open Broadcaster Software. OBS is an awesome tool. It captures great looking footage, allows you to stream on Twitch if you want to and is FREE. Tough to beat. I’ve used other capture packages like Screenflow (Mac only) and while it can be nice to have editing functionality in your capture software I’ve since switched over to using OBS and a Non Linear Editing (NLE) package instead. In this case because I have an Adobe Creative Cloud subscription I’m using Adobe Premiere for video editing.The settings I use to capture in OBS (which aren’t super important, but I’ll share for completeness sake) are as follows:

  • Mode: File Output Only
  • Resolution: 1920 x 1080
  • Max Bit Rate (kb/s): 8000

I’ve gotten in the habit at the end of a dev session to make a build of the game and capture myself playing for half an hour or so. This has a few benefits. First, I’m capturing high quality video footage regularly which I could use in other video content (like a new trailer I’m planning to cut soon). Second it forces me to play the game differently and focus more on playing and less on bug seeking and note taking. Third it gives me lots of material for GIFs!

Once I’ve got my footage captured I drop it in my NLE, in this case Premiere. I then go through the captured footage and find five or six nice moments that show new features, look good or whatever my goal for the GIFs are. I mark in and out points and then export this directly to GIF using Premiere’s Animated GIF export option.

The most important venue for my own GIF output thus far has been Twitter so it’s important to make sure that any GIFs I am authoring can be posted there, along with wherever else. This means that I want all of the GIFs I am creating to be between 3 and 4 MB in file size. The variables that we have to tune are resolution, frame rate and image quality. It’s important to note that depending on the visual content of your game your mileage may vary but I’ve found a sweet spot with the following settings in Premiere.

  • Length: Under 5 seconds (usually aim for 4 seconds 20 frames)
  • Resolution: 500 x 280 or 400 x 300 (which results in letterboxing, see below)
  • FrameRate: 20
  • Field Order: Progressive
  • Aspect: Square Pixels

This generally results in a GIF that’s around 3.8MB give or take which I find gives me a nice balance of quality to file size.

I’m currently doing this on Windows. My understanding (correct me if I’m wrong!) is that  the Animated GIF export option is not available on Premiere on OS X. On Mac I’ve gotten very good results using GIF Brewery.  GIF Brewery actually has more control over the output and allows you to tune the compression and get it looking better. I found this lead me to obsess over tweaking it which slowed down my output a bit, and my main dev machine is a Windows box which is why I shifted over to my current workflow. GIF Brewery is a great option though if you’re on Mac. I learned about it from a tip from Justin Pierce on Twitter, and he’s actually done a good post comparing different compression settings with it on his blog.

Scheduling and Posting

The last bit of the workflow is posting them to Twitter. Of course this can be done using the regular Twitter web client, but I’ve found that using Tweetdeck has a few advantages.

The main advantage is that you can schedule GIF posts. I love this since being consistent about posting things regularly is hard when you’re working on your game or taking care of the rest of your life. This allows me to sit down, make a batch of new GIFs, set a posting schedule and then come back periodically to find a bunch of notifications (the Twitter ego equivalent of cocaine pellets for experimental rats).  To schedule tweets on Tweetdeck first hit the compose button, add your image (do this before writing so you know your available character count), compose your message, add your hashtags, and then instead of hitting the ‘Tweet’ button, press ‘Schedule’ and choose a date and time.  It’ll appear in a Tweetdeck column showing when it’s scheduled to go out on the right. Don’t worry if later scheduled tweets don’t show the GIF preview, it’s there.

As far as hashtags to post to I like #screenshotsaturday, #gamedev, #indiedev and #indiedevhour. The communities around those tags are generally very nice, supportive and happy to like and retweet your stuff if they dig it. These tags are public free spaces so please don’t spam them or abuse them! I won’t put forward a rate for how often you should post to them but I do see people setting up armies of bots all tweeting the same thing in there and I block them. Don’t be that guy (or girl, or bot). Also, if you’re using those tags, retweet and like some of the cool stuff you see! I’ve met a lot of interesting people online just cruising those tags and helping to signal boost other people’s stuff, and other people have done the same for me.

Questions?

Hopefully this has been helpful for you! If you found it useful or have questions feel free to hit me up on Twitter, I’m @mattmirrorfish.  The GIFs in this post are from my game Monarch Black which is currently in development. You can learn more about it at my website, mirrorfishmedia.com