next »

[cousin_it]

I started making this game two weeks ago:  http://vladimirslepnev.itch.io/zigzag




Making a game turned out to be a much more exciting and varied hobby than I expected. There's a lot of good feedback from people on Reddit, Facebook etc. and I'm updating the game almost every day. Here I'll be posting about the details of development, because I'm really itching to share all the interesting tasks that have come up.

[cousin_it]

For example, here's a fun thing I did last night - added support for capturing screenshots and animated gifs directly in the game. (It's not in the public version yet, but I'll upload it when it's more presentable.)

To make animated gifs, most people use screen recording software and then convert to gif. I don't like that workflow because it's hard to keep a consistent framerate throughout the chain, especially if you're capturing on a 5 year old laptop like mine. Since my game uses HTML5 and Canvas, I wondered if I could just dump the canvas state at successive frames, encode it as a gif with JavaScript, and stuff it into a data URI.

Turns out there's already a library for the hard parts: https://github.com/antimatter15/jsgif. Though if I try to encode on the fly, even with a tiny size of 480x300, everything slows to about 3 frames per second. But if I build up a buffer of ImageData objects and encode only at the end, the game plays normally, though the encoding step takes a couple minutes.

Implementing the whole thing took me about an hour. Right now, in my home build of the game, pressing S instantly opens a screenshot in another tab. Pressing G starts recording a gif (at a fixed framerate of 60fps) and pressing G again stops recording and opens the gif when it's done. Then I just upload it to imgur, that's how I got the gifs above :-)

[cousin_it]

The song in the game is Quazar's "Funky Stars", you can hear it here:





Quazar is the demoscene alias of a well known DJ, but I don't think he'll come after me for copyright, because a) all music released under the Quazar name is apparently public domain, b) this song originally became popular when it was used in a crack for Worms 2 :-)

My version of the song is different from the version on YouTube, because I've cut out the repeated part from 1:06 to 1:50. Given the ultra hard nature of my game, no one would ever hear the awesome part after 1:50 unless I moved it earlier.

Making the cut and splice precisely while keeping the beat turned out to be pretty hard. I tried Audacity first, but it didn't give me a beat grid and couldn't save an MP3 without going through some crazy instructions, so I gave up. Next I turned to FFmpeg, but it started inserting 0.12s pauses at the beginning of every MP3 it saved, because apparently that's how things work. I couldn't live with a stuttering splice, so eventually I wrote a shell script that cuts out the required parts in WAV, trims them down to size, concatenates them, and converts back to MP3.

The end result is here: http://commondatastorage.googleapis.com/itchio/html/239738/hybrid-edit.mp3. The cut is around 1:06.

[cousin_it]

While we're on the topic of audio, the game over sound in the game is a fragment of a free sound taken from here: https://www.freesound.org/people/feveran/sounds/59003/

It's the sound of a vinyl scratch, though the music in the game is a tracker song that would never be on vinyl. This mixing of metaphors is deliberate and I have more such ideas for later :-)

[Ian_A]

Fun. I'm now dizzy, but it was fun! 

[cousin_it]

Choosing colors for this game was really hard for me, because I'm slightly red-green colorblind. I decided to use https://coolors.co/app, which is based on actual good art, and keep the three-color combinations that I liked. That was a very long process, took maybe 10 or 15 hours total, with a lot of artistic critique from my family. Eventually I ended up with seven palettes, plus one grayscale palette for the very beginning of the game. Here's a couple that were also good but didn't make the cut:

[cousin_it]

This morning I decided that this way of displaying time isn't ideal:



So I made a seven-segment display instead. The design took me about four hours to get right, now I'm really proud of it:

[cousin_it]

Why I'm making this game:

I'm a big fan of Super Hexagon (http://superhexagon.com/) and have gotten pretty good at it, e.g. beat the last level five times in a row just to prove that I can. The difficulty in that game comes from visual confusion, not pure reflexes or high APM. And it has an uncanny way of teaching you to react faster than you thought possible. But it's still not quite perfect for me:

- It has "dead man walking" states where you know you'll hit a wall, but have to wait until it actually happens.

- It makes you wait for the next obstacle even if you're perfectly ready for it.

- It encourages pressing hard on the keys in an attempt to turn faster.

- It has patterns that you must memorize.

So I decided to fix all of those. In my game, passing an obstacle takes a single tap instead of a sustained press; you can pass obstacles as fast as you can see them; there are no patterns to memorize; and every situation is salvageable. As a result, Zig Zag feels very different from Super Hexagon: my fingers actually get more relaxed the faster I play. Another bonus is that there's no learning curve for the input lag like in every other game, because there's no penalty for pressing keys faster. That makes my game perfect for HTML5 with its unpredictable response times.

But the main idea of confusing the player with a zooming and rotating screen is obviously taken from Super Hexagon, and I'm very grateful to Terry for making it.

[cousin_it]

The first version of the game title used the default kerning from the Roboto font, which looks pretty bad:



ZA is too close, AG is too far, etc. This was bothering me a lot.

At first I had crazy ideas like exporting the letter outlines to SVG and moving them around, or editing the TTF to change kerning data... But then I realized that this is HTML, so I can just wrap each letter in a <span> and adjust its position. That only took a couple minutes. Here's a better kerned version:

[cousin_it]

More work on the game over screen, now it shows a randomly selected quote in a cursive font:



Not just any kind of quote will do, though. I'm looking for quotes that have a certain kind of peaceful, soothing stupidity. Here's the list so far:

• To be great is to be misunderstood.
• There are more stars in the Milky Way than there are atoms in the universe.
• On the sea of life, sometimes the best ships, are friendships.
• It's hard to be someone's everything. It's easier to be everyone's nothing.
• We are infinitely complicated in every possible and impossible way.
• If you love someone, put their name in a circle, instead of a heart, because hearts can break, but circles go on forever.

[jctwood]

Wow this is looking very slick! Although if a star consists of atoms how can there be more stars than atoms? Wait they are fake quotes I understand now.

[cousin_it]

New title screen:

[Think Inside The Box]

Quite addicting game actually, even though it made me a little bit dizzy.

[cousin_it]

Thanks!

I've started making a new animation for palette transitions. This is definitely not final, but there's something about it that I like:

[cousin_it]

Or even



Still not happy with it though. I may scrap this whole idea and go with something simpler.

[rj]

oh i really like the transitions a lot

[cousin_it]

I decided not to do the transitions, they are too distracting, and not in the way that I want.

Just uploaded a new playable version, with one new palette and a redesigned game over screen:



And a new quote: "The only person you should try to be better than is you". It certainly has the right flavor for my game.

[cousin_it]

I just uploaded another update to the game. Now you can speed up by pressing the up arrow. It feels incredibly good.

[cousin_it]

New palette I made this morning:



I'm also working on mechanics, but it's pretty slow. Most things I try, like Super Hexagon-inspired twirls or smooth color transitions, end up feeling "wrong" for the game somehow. But the speedup mechanic immediately felt "right" to me and now I use it all the time.

[cousin_it]

This morning I got frustrated with the colors in my game, so I read up on some color theory and wrote my own in-game random palette generator! It makes many bad palettes and some good ones:



I'm liking these much more than the style I had before.