Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1395477 Posts in 67266 Topics- by 60350 Members - Latest Member: Anyobin

September 25, 2021, 07:54:27 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsZig Zag - very hard reaction-based game
Pages: [1] 2 3
Print
Author Topic: Zig Zag - very hard reaction-based game  (Read 9350 times)
cousin_it
Level 0
***


View Profile
« on: July 15, 2016, 01:02:01 AM »

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.
« Last Edit: September 01, 2016, 08:00:35 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #1 on: July 15, 2016, 01:12:48 AM »

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 :-)
Logged

cousin_it
Level 0
***


View Profile
« Reply #2 on: July 15, 2016, 01:31:59 AM »

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.
« Last Edit: July 15, 2016, 07:06:08 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #3 on: July 15, 2016, 01:40:43 AM »

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 :-)
Logged

Ian_A
Level 2
**


Indie Artist & Designer


View Profile WWW
« Reply #4 on: July 15, 2016, 01:54:16 AM »

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

CRIMSON KEEP - First Person Action Roguelite
cousin_it
Level 0
***


View Profile
« Reply #5 on: July 15, 2016, 07:17:16 AM »

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:

« Last Edit: July 16, 2016, 04:44:27 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #6 on: July 16, 2016, 04:39:58 AM »

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:




« Last Edit: July 16, 2016, 11:19:19 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #7 on: July 16, 2016, 12:46:49 PM »

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.
« Last Edit: August 08, 2016, 11:30:08 PM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #8 on: July 16, 2016, 10:56:22 PM »

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:

« Last Edit: July 16, 2016, 11:06:04 PM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #9 on: July 17, 2016, 01:22:36 AM »

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.
« Last Edit: July 17, 2016, 01:37:51 AM by cousin_it » Logged

jctwood
Level 10
*****



View Profile WWW
« Reply #10 on: July 17, 2016, 04:12:00 AM »

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.
Logged

cousin_it
Level 0
***


View Profile
« Reply #11 on: July 17, 2016, 11:42:41 PM »

New title screen:

Logged

Think Inside The Box
Level 0
***

Think Inside The Box


View Profile WWW
« Reply #12 on: July 17, 2016, 11:47:51 PM »

Quite addicting game actually, even though it made me a little bit dizzy.
Logged
cousin_it
Level 0
***


View Profile
« Reply #13 on: July 19, 2016, 12:50:35 AM »

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:

Logged

cousin_it
Level 0
***


View Profile
« Reply #14 on: July 19, 2016, 12:42:04 PM »

Or even



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

rj
Level 10
*****


bad, yells


View Profile WWW
« Reply #15 on: July 19, 2016, 01:02:44 PM »

oh i really like the transitions a lot
Logged

cousin_it
Level 0
***


View Profile
« Reply #16 on: July 20, 2016, 01:33:07 AM »

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.
« Last Edit: July 20, 2016, 02:24:11 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #17 on: July 20, 2016, 03:03:37 AM »

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

cousin_it
Level 0
***


View Profile
« Reply #18 on: July 21, 2016, 03:12:27 AM »

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.
« Last Edit: July 21, 2016, 07:52:46 AM by cousin_it » Logged

cousin_it
Level 0
***


View Profile
« Reply #19 on: July 22, 2016, 12:30:46 AM »

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.
Logged

Pages: [1] 2 3
Print
Jump to:  

Theme orange-lt created by panic