Tuesday, July 16, 2013

Dev Notes: Cursors!

Having hammered the menu aesthetic into a cohesive form, it was time to fall upon the actual gameplay interface, and knock that into place. Ideally, games don't need to hold your hand through every simple action: you want it to feel like you're pulling on clothes that fit exactly as they should, without a tailor fussing about, or an instruction manual to refer to.

But when I sat people down with an early prototype of Chess Heroes, and they asked "which one am I," when there was a single white King, on the left, facing off against three black Pawns, I realized that there would have to be more handholding that I originally thought.

I'll admit, I spun my wheels for a bit, desperate for a way to indicate to the player what was going on, without using ugly in-game menus or text. Finally, I decided to pull up some videos of an old-school tactics game: Heroes of Might and Magic II. When I saw the cursor icons, I realized: that was the core solution!

I'd shied away from custom cursors in Unity before, because they rendered at game speed instead of hardware speed (imagine a target reticle following your mouse, and only catching up when you slowed it down). But in Unity 4, they introduced hardware-speed custom cursors! 

Happily, I went to game-icons.net, found some likely candidates, and went to work. Here are the results so far:

This changes the cursor into a "verb," so to speak: select, move, kill, etc. The next questions players have are: what is the subject ("who is doing this verb?") and what is the object?

Without the ability to dynamically draw an outline around mesh objects (I believe that's only in Unity Pro), I fell back on an old "cel-shading" trick: increasing the scale of a mesh and reversing the normals.*

It's not perfect, but for now, it's Good Enough. You move the mouse around, and the cursor changes to a Pointing Finger when it goes over a chess piece. You click, the piece glows gold, and the finger now has an X on it. You click, it's deselected, and the finger goes back to normal. Ah! Select and deselect.

You select the piece again, then move the cursor around the screen. You highlight a space, and see a boot: walk here. You highlight an enemy piece, it glows red, and the cursor becomes a sword: capture this. It all makes sense! That's a happy place to be right now.

* Everything in a game is drawn with triangles, and every triangle is one-sided. The side it faces is represented by the normal (I don't know why it's called that!). Imagine a perfect one-way mirror: one side is transparent, while you can see your face on the other side. That side is where the normal is facing.

No comments:

Post a Comment