Monday, July 25, 2011

New Hex Tiles and Items

Wrestling with inventory took quite a while, but I think it's better for the effort. This post, I figured I'd detour from code talk to show off some of the other stuff that's been percolating.

New Hex Art
First off, we have new hex art! The last round of hex art was a little too grainy and indecipherable for my taste. So I dusted off the Wacom and tried to spruce them up a bit.

New plains, hills, forest, and suburb hexes.
So far, I'm pretty happy with the direction they're going. The style is reminiscent of 16-bit era pixel art, but with an expanded palette. I pushed colors slightly into cartoonish territory, but I think that helps the user to identify features better at this small resolution. (e.g. look at the forced highlights on the treetops)

Approaching urban ruins along a river.
In this shot, we can see the new urban ruins tile. It sports a skeletal skyscraper, complete with draped blue tarp and cables strung across the air to the neighboring brick high rise. And a few brownstones are sprinkled in for good measure.

While I like the tile a lot, it doesn't repeat well. It may be too busy for the primary city tile. The water is passable, but I may rework it later.

A couple mountains along a river.
I also have a smattering of mountains in certain highland regions of Michigan. I liked them when I was drawing them, but in-situ, they just don't seem to fit the scenery well. I may have to save that art for something else, and replace them with greener mountains.

All this new art presents a new issue, however: draw-order. Both the player and the hex highlight are being drawn on top of the hexes. It ruins the illusion a bit. I'm thinking an easy solution might be to create a foreground graphic for each tile, and just draw it on tiles that need it (e.g. when player or highlight is in a hex). But I'll save that polish for later.

New Inventory Screen and Items
I also have a few shots of new items and the new inventory screen to show. First off, you'll notice I went with the third layout mentioned in my previous post.

New inventory UI with new items.
Thanks to everyone for the input and support. I was a little overwhelmed, and your comments helped guide me to a solid solution. Most importantly, you reminded me that good, agile development means taking baby steps. I was trying to design the perfect system on paper, and forgetting that it'd be further defined by trying it out in-situ.

So what we have here is a paper doll UI with storage spaces. Simply drag and drop any item to an applicable slot, and it gets installed in that slot. Dragging a container to a slot creates a storage box alongside that slot for holding items. Drag any item into a box to store it. Only one item per slot now, but there are a hefty number of slots to play with. (e.g. one per foot, one per forearm, face, head, eyes, etc.)

In the above picture, the player has two plastic bags in his hands. Note: There are four hands in the paper doll. The attached ones are for gloves, the unattached ones (behind the bags) are for holding items. In the left bag, there's a wadded-up, brown t-shirt. He's wearing a hospital gown, a hospital wrist strap, and a talisman (more on the reasons for this starting loadout in a future post).

Dragging a shoe to a foot slot.
When dragging an item around, it gets highlighted blue when over a valid slot, and red otherwise. Valid slots that are empty are highlighted white. I've made equipped items semi-transparent during dragging in case slots are obsured (such as the legs under the gown). Here, I'm dragging a boot to the empty foot slot (boot image gets mirrored when installed, if necessary).

Wearing a t-shirt.
One final feature is the concept of equipped vs. stored items. Earlier, we saw this brown t-shirt crumpled into a plastic bag. Since inventory management was such a big deal in this game, I wanted to make sure items took an appropriate amount of space when stored. And since I had a paper doll, that meant one image for equipped, and one for stored. Containers will collapse when stored too, unless they have items in them.

I've started working on the encounter system now. I'm actually trying to make the initial 5-minutes playable, so that means I need some way of communicating a quick backstory, as well as negotiating an encounter. Not out of the UI woods yet!