Suzy Cube Update: February 9, 2018

#SuzyCube #gamedev #indiedev #madewithunity @NoodlecakeGames 

I'm going to be getting a bit technical in this one. So, buckle up!

Class is in Session

As mentioned last week, I took a break from level decoration to concentrate on creating animated tutorial screens for all the possible control schemes available in the game. ("what does he mean!?")

Up top, you can see a still from the gamepad tutorial scene. It's pretty self explanatory as gamepads, themselves, are pretty self explanatory.

The more important one was the touchscreen tutorial scene. Here is what new players have been faced with now for almost two years.

Pretty... I know...

Serviceable, sure, but it had it's issues.

I quickly changed the iconography associated with the jump action because this version tended to be interpreted as 'swipe'. Swiping would work, though, meaning players who did it wrong initially would continue to inefficiently swipe to jump when a simple tap would suffice. 

Easy fix!

All it took to get around this was a simple graphical change. Players stopped trying to swipe, jumping was pretty much solved. Yay!

Two issues remained, players not knowing how to use the movement side of the screen and not realising that jump height was variable. The second issue wasn't actually a big deal in practice, the movement issue, though... Ya, that needed solving.

As far as I could tell, the issue stemmed mostly from the fact that many mobile gamers simply didn't think to approach controlling a game on a touchscreen as if they were holding a gamepad. Heck, Suzy is a simple and colourful platformer, perfect for kids, yet many kids who play tons of games on phones and tablets have never, or barely ever, even touched a gamepad! 

Most commonly, I would see non gamers hold the phone in one hand while using the index finger of the other hand to play, like they were playing "Candy Cruncher" or something. These players would also, often, make short swiping motions to try and get Suzy to move. This would, again, kind of work which would only reinforce the behaviour. 

It was, thus, months and months ago that I took notes and knew that I would, one day, have to make a more informative tutorial screen.

Is this clear enough!?

And here it is. The GIF is kind of zoomed in, but the scene shows a pair of hands holding the device and, as you can see, the thumbs actually animate along to Suzy's actions showing exactly how each is performed. I look forward to handing this new version off to new players to see how they fare!

Under the Hood

Now, you may be thinking, "This doesn't seem like it would take so long to make!" and you would be right, but like I said up top, I had a number of control schemes to address. ("What DOES he mean!!?")

In order to cut down on redundant work and to allow the tutorial sequence to be easily edited if needed, I came up with what I think was a pretty clever solution.

First, I plopped Suzy into the scene. Yes, the actual playable Suzy, but without any links to real input devices. Then, I created a script which could, essentially, spoof inputs by way of a couple of public variables.

Like a script driven control pad

Since these variables were public, they could also be animated. This is how Suzy's movement sequence was created.

That's a lot of keyframes

By animating these parameters, I was able to, essentially, control Suzy via an animation track. The last piece of the puzzle was to get the instructional visuals to animate along to the actions. Now, I could have simply animated the thumbs by hand to match the actions Suzy was performing, but that wouldn't have been very flexible, right? Instead, I had my new fangled script send the variable changes not only to Suzy as inputs but also to the instructional graphic's own animator controller as parameter changes.

When your life needs a little direction...

The simple explanation is that the instructional graphics for each control scheme have their own set of individual animations for pressing the jump button and moving in all eight directions. The state machine which drives these animations receives the input changes from the sequence handler script and causes the tutorial graphics to animate to match the actions Suzy is performing.

This also means, that the graphics can be swapped out for each control scheme without having to change the actual sequence of actions Suzy is performing. So a thumb sliding on a touchscreen can easily be swapped out for a rotating joystick. 

So, there you have it. Overkill? Maybe, kind of depends on how many different control schemes I have to accomodate, I suppose. ("Why does he keep saying that!!?")

See you next week, guys! Back to level decoration!