August 8, 2015 ryanjuckett One comment

Subtle Squish

Adding an assortment of subtle polish items to your game is a great way to create that je ne sais quoi that leads to comments about fluidity, feel, and tight controls. Each little bit might not have a huge impact, but the summed result separates you from the crowd.

Inversus has a very minimalist aesthetic and at first blush a build of the game from a year ago might be hard to distinguish from what I have now. However, what I have now looks and feels an order of magnitude better. One of the comments I often get is how smooth the game looks, but its a bit hard to pinpoint why unless you know about all the things to look for. Today I’m going to talk about the most recent one of those things.

I made a new trailer last week which you can see below. The video opens up with the player bashing into a wall. This impact hadn’t received much love prior to recording so I used it as an impetus to spruce things up. When first prototyping the game, player ships would just slide around the screen as static images. Honestly, to most people that is still what it looks like they are doing, but at the same time it “feels” better. One part of that feel is the subtle application of squash and stretch.

spacer_40

I want the ships to maintain their original rigidity. It helps sell the neo-arcade vibe and gives them strength. On the other hand, I want the screen to be very reactive to player input and movement. I want fluidity. To get this balance, I apply a hint squash and stretch. This bit of flavor has been part of player motion for around a year, but it was not part of smacking into walls until last week.

Below you can see the three stages of iteration. In game, this all animates at a smooth 60fps so this isn’t a perfect 1-to-1 representation, but it gets the point across. You might want to block out two of the animations with your hands to help focus on each individually.

Top: Perfect rigid motion (this is how the game started)

Middle: Squash and stretch while moving (this is how the game was for the past year)

Bottom: Squash and stretch while moving and on impact (this is how the game is now)

Let’s take a look at stills from the three most important states.

  • On the left you can see all three iterations have the same square stationary state.
  • Once the player starts moving, the later two iterations stretch ever so slightly in the direction of motion and squish perpendicular to the direction of motion. The difference is on the order of a few pixels, but it really makes a difference to how your brain processes the screen.
  • Finally, at the right bottom you can see the player ship briefly squish up against the wall. Unfortunately, it doesn’t stretch past its stationary width during the squish. Adding a couple more pixels of counter stretch here will likely make this interaction feel even a more natural and I’ll slip that in sometime this week.

full

If you are passionate about feel and creating satisfying interactions, I suggest looking at each action of your game, no matter how small, and gracing it with with a hint of life.

 

One thought on “Subtle Squish

Leave a Reply

Your email address will not be published. Required fields are marked *