Adding Depth to Drawers

October 13, 2017

Animation on the upcoming Sleuthhounds: The Yuletide Tail is getting closer and closer to being complete. At this point there’s only a small handful of “pick up” animations left to do – animations that I missed in my initial design evaluation of the game and that only came to light upon actually implementing the game. There are also a couple of animations left that are tricky from a technical how-do-I-actually-implement-this-in-the-game standpoint. One of these latter animations seems deceptively simple at first glance: opening a drawer and taking an item out of it.

Homes taking something from a non-existent drawer.

The character animation itself isn’t tricky. It’s a straightforward animation with relatively little movement; mostly just an arm reaching forward to manipulate the drawer and take what’s inside. The tricky part comes from integrating the animation with the scene itself.

Homes in front of the drawer.

When Pureluck Homes grasps the knob on the front of the drawer, his hand needs to be drawn over top of the drawer front itself.

Homes reaching into the drawer.

However, when Homes reaches into the drawer things get interesting. At this point the near side of the drawer needs to draw over top of Homes’s hand BUT Homes’s hand/arm needs to draw over top of the far side of the drawer.

The drawer components.

To achieve this effect, the drawer is created as two separate images. One image represents the front and the near side of the drawer and the other image represents the far side of the drawer.

When the player directs Homes to open a drawer the game then does a little shuffling of the order in which elements are drawn.

The far side of the drawer by itself.

The easy element is the far side of the drawer, which is always drawn first.

The drawing steps to open the drawer.

While Homes is reaching forward and opening the drawer, the near side and front of the drawer is then drawn over the far side. Homes is then drawn over top of both of those.

The drawing steps to reach into the drawer.

Once Homes has opened the drawer, and is starting to reach inside, the ordering changes. The far side is still drawn first but now Homes is drawn second. Finally, the near side and front of the drawer are drawn over Homes.

Homes taking something from a now existing drawer.

The final result is what appears to be one animation of Homes opening the drawer and reaching inside.

Previous:   |   Next: