Redesigning an Inventory.

15th of April, 2017

A few weeks ago I took a stab at redesigning the inventory system presented in Divinity: Original Sin. A quick bit about the game. It’s an RPG, Turn-based, Tactical game with tons of depth and an amazing amount of opportunity for creative problem solving in and out of battles. You can play alone, with a group of four adventurers, or invite a 2nd player to split the party, two characters to each person.

The Divinity Original Sin inventory system enables players to have a unique set of items stored by each of the four playable characters. Items magically float between inventories if the player decides different characters needs the items. The number of items is not limited but the weight of all of the items is limited based on character strength. There is a large variety item types. They can be filtered, sorted, and organized by the player.

 

First I step I took was to analyze what’s going on in the game. Break down the existing system into some major components and then have a more focused look at each piece.

Inventory Grid

  • Displays all items carried only by the selected character.
  • 5 x 10 grid displays 50 items at once.
  • Scrollable
  • 7 Filter options to help focus searches
  • 5 Sort options for organization
  • Items can be manual arranged via drag+drop

Character Information

  • Title bar identifies which character’s inventory is displayed.
  • Arrow buttons to rotate between available characters.
  • Character icons also used to select different inventories.
  • Displays selected character statistics and equipment.

Inventory Interactions

  • Hover items for Name + descriptions.
  • Hover equipment to see comparisons with equipped item.
  • Right click for context-sensitive action menu.
  • Left click drag to move items.

 

After analyzing the UI, I determined some high priority use cases or problems I would like to solve in this short exercise.

  1. As a player, I want to know if any of my characters are holding item C.
  • Displays all items carried only by the selected character.
  • Many items use the same or similar icons.
  • Not enough filter options / unintuitive options.
  1. As a player, I want to equip this item in character A’s inventory on character B.
  • You must move items to other character inventories one at a time.
  • Knowing which character inventory displayed is not obvious.
  • Determining if Character A meets an item’s requirements to wear, while it is held by Character B is a long process.
  1. As a player, I want to investigate the item I or another character just collected.
  • Finding the item you just picked up is difficult. But you can change the sort type to Recent for help.
  • Typography and style of hover menus difficult to read quickly.

Let’s take a look at what some other games do in their inventory and/or character interfaces.

Keeping the user stories and the references in mind, I stepped into a wireframing phase. Quickly roughing out different layouts allows me to visualize potential solutions and highlight successes and failures in each. For example, no one wants to play a game that looks like a spreadsheet (Options A/B) and that showing all of the information is probably just as harmful as showing none of the information (Option C).

I thought that Divinity: Original Sin would be more accessible if the inventory system was redesigned so that there is a singular inventory shared amongst all of the active characters. This, of course, has a lot of ripple effects across the other game systems, but leads to a more streamlined and manageable inventory. D:OS has a really awesome blur effect when you zoom the camera in (mouse scroll) which I thought could be used to highlight the selected character when opening the inventory. The zoom-in effect keeps the player ‘in the world’ so they remain connected despite working in an interface.

How does this concept address the prioritized user stories?

  1. As a player, I want to know if any of my characters are holding item C.
  • All items shown in one collected inventory.
  • Names are displays alongside item icons.
  • Increased room for 9 (or more) possible filters.

2. As a player, I want to equip this item in character A’s inventory on character B.

  • Large character portrait is visible. Helps show who an item will be used on.
  • No more item swapping to different characters.

     3. As a player, I want to investigate the item I or another character just collected.

  • Inventory list auto-sorts to the Recent sort.
  • New items marked with graphics until hovered over.
  • No longer have to look at every character inventory separately.

Looking back, I think this was a good exercise. I got to practice analyzing existing systems, identifying problems, prototyping solutions and trying to make some UI Art that matches an existing brand. The inventory of D:OS is essential to how the game establishes an old-school table-top game feeling where a lot of focus in the game is managing what your character is carrying. I think my result fails in that aspect. By pairing the inventory system down into ‘one big bag’, the ownership of items by each character is lost, and there are a lot of other systems that exist in the game that rely on that ownership. I made something that would be more useable and looks cool, but doesn’t fit with the soul or identity of the game.

Chucksports. Part III.

21st of January, 2017

Asset creation to help market Chucksports.

As you might be able to tell, Chucksports hit an untimely demise due to work and life becoming hectic for the both of us. But I think writing about and showing what we had planned for marketing could be cool.

Part of why we and many others like Charles Barkley so much is his personality. He’s a very confident, competitive and boisterous person who says the craziest things when mic’d up. I collected a few quotes of his that I found were amusing even without the conversation the quote was apart of, and wrote them elegantly on some serene backgrounds. I called these images the “Magnificent Chuck” series. They were super simple and quick to do. The reason I thought these might work as ad’s, was because Chuck talking smack, being funny, and loud exemplifies the mold a lot of our ideal players try to fit.

 

On the other end of the spectrum, I created a series of images that went with the concept “If you can do this task, then you belong here”. Nicknames are huge in the sports world.The are usually earned, sometimes they are self-given. As a fan, knowing the nickname of player creates this a feeling similar to being ‘in’ on a joke. Being more connected to the player and team than people that don’t know the nicknames of all the players. Superiority and pride. This second series of images “Nicknames”, focused on getting people that are connected in interested enough in sports to know the nicknames of players into Chucksports. I took images of a number of players from the four major sports found in Chucksports, blacked them out so you only see a silhouette, and wrote their nicknames on the bottom. If you can name the player’s real name using the nickname and sport as clues, than we have a game for you.

 

To wrap it all up, I made a website that we could use as a place to direct potential players that want more info, and just as importantly, a place for them to send feedback from. I used large banner images that displayed what Chucksports was at it’s core to try to hook players in, and below, smaller bullet notes about specific features that were the most interesting bits of Chucksports.

You can view the website here

That wraps up the Chucksports series of articles. I really enjoyed working and playing this game. I wish it was still around, maybe we’ll bring it back some time. If you got here without seeing the first two articles, check ’em out. Concept Development and Visual Development

Glitterdeep UI Style polish

19th of June, 2016

To ship our alpha, I worked on creating a rough UI Skin to apply to the game’s UI. I wanted it to feel heavy, simple, and crafted. I wanted to use wood, steel, and dwarven motifs that we can often see in fantasy settings. The reason I liked the idea of a crafted + material is to continue the context and world created by the Mining Town ‘metagame’. The result ended up being pretty nice aesthetically, but a little more complex than desired.
UIPolished

A month or two later, we’re looking at beta. And I’m thinking that the UI needs to be much lighter in terms of number of elements and also visually. I want to keep the dwarven feel (angular, + embellishments). I want the ‘skin’ of the UI to be something I can create and tweak very quickly because it should be in a supporting role to the cool unique assets. Being able to whip up a basic modal quickly is essential for prioritizing more time in the higher-impact assets that the game needs. I like where it’s going, and have been getting a large chunk of the game’s UI already overhauled. It should be out in the next build alpha build!

Blacksmith09

MetagameOptions05

Victory! Screen

21st of May, 2016

Hey! My first post that include day-job work!

We’ve been in soft launch for a while, and figured it’s fine to post this sort of stuff now.
As we move nearer to hard launch, a lot of the features are wrapping up, and I’m spending more time polishing existing screens to make them a bit more emotionally impactful. Let’s check out the victory screen. This screen celebrates the player’s good work, and is the first thing they see after eliminating another player’s Headquaters or finishing a Campaign Mission. I want it to be fun, have a lot of energy (Shit yea, you just won!), and minimal information (seeing stats and info here will counter-act the emotional high of winning).

This was the first edition of the Victory screen, which was shipped with Soft Launch version 1.
Tally00

Not seen here, are the animations. There’s a large burst at the top of the screen, followed by the Stars the player earned slamming and flashing into place. Then the rewards would appear and the digits would count up, revealing the reward details. At the bottom, a recap of what the player spent to acquire this victory.

The first impression of this screen is that it’s very blocky, the value range is minimal, the soft green background is relaxing and low-key. The overall design feels like reading a book. Top down, left-to-right. The animation not seen in this screen shot is nice and impactful, but after the animation the rest of the screen does not continue that idea. Lets. AMP. IT. UP.

Tally01

Get that title “Annihilation” outta here. Reading is for nerds. Destruction %? You too. OUT! Crank up the size of those rewards. YOU GOT REWARDS, YOU WON! Make your troop list smaller, who really cares about that. Go train some more troops, you’re a Dictator, remember?

So I got rid of as much text as I could. Grouped and scaled the textures so that there is a visual priority instead of looking like a designer’s spreadsheet. By scaling the stars and currency images up, the player focuses on the awesome things they were rewarded, and less so on the quantities or meanings behind those items. The darker background really punches up the bright colors and particle effects, increasing the energy of the screen. I created a gradient from the top of the screen, Yellow and orange, to the bottom, blue and silver, that helps lead the player’s eyes around the UI. The Blue banner behind the stars connects all three stars together, as well as prevents the top from feeling too dominated by yellow while also connecting with the blue at the bottom of the screen.

That’s all for now, more to come in the future!

Goblins

15th of May, 2016

Just a quick post of some Goblin sketches for Glitterdeep.

GoblinLineup2

Sketches0

Ended up working towards a style a little less severe than the goblins sketched in the 2nd image.

Making an entrance

30th of April, 2016

In Ruins of Glitterdeep, the player scrolls down on their screen to descend into a great, ancient dwarven mine. As they scroll they are presented mine entrances which will act as the ‘mission nodes’. When tapped, the entrances allow the player to enter the mines and recover ancient dwarven treasures. Here’s an early sketch of the metagame setting. A small town atop a mountain at the mouth of Glitterdeep Mines.

townmode

My goal here, is to create a contextual setting for the game, that will feel like a story to the player, and work as a restriction that will help us develop ideas and think of creative solutions to the game’s designs.

Anyways, the entrances. We needed three entrances to start. Locked, Unlocked, Completed. I’m thinking that we’ll need special ‘boss’ dungeon entrances, or maybe more descriptive entrances that signify the types of bad guys and puzzles you’ll find inside. Or we could leave all that to some UI display.

entranceslayout

It’s important that the Unlocked and Completed missions are visually distinct even if you squint, so I added a bright light in the cave, as if to say “it’s all clear in here, light are on, come dig some gems!”. The Locked missions were simple, throw some boards up! The people fleeing the mines boarded up the entrances to keep the bad guys in, or something.

Here’s an extra shot I took that I thought was neat.

ready

Dwarf Model

24th of April, 2016

Have miner update! (lol)
Got the model unwrapped and rendered. I really like putting all my models on Sketchfab. It’s a pretty awesome website. Most of the stuff is placeholder stuff I put ingame, other are WIPs, and this guy’s a little combo of both. He’s the main character, so I will most likely be coming back to him to polish it up.

I Used 3DSMax to create the high poly geometry to which I applied VRay materials render-to-texture’d to a lower (7.1k tri) poly character. This was a good first pass at the VRay-Material-to-Color workflow. I think it will save a lot of time in the long term, compared to hand painting the textures. There are certainly lots of little bugs with the render-to-texture, but I will only be fixing those that are immediately noticeable from the ingame camera angles. Since the assets appear so small ingame, fixing them isn’t a high priority at the moment.

After rendering the UVW map, I tinkered with colors in Photoshop. Adding some blue to the shadows, and a warmer blue to the highlights using masks. By adjusting the levels on a mask, I was able to pick the darkest shadows and add some color to them to simulate some more bounced light, and lighten the overall appearance. I used a High Pass filter + levels modification to select out the highlights and expose them a little more to emphasis some crisp edges.

Here’s the before + after of the diffuse texture for the Miner.

MinerTexture

Yay! Miner complete and ingame!

MinerIngame

Cya soon with Dungeon Entrance models!

Chucksports. PART II

16th of May, 2015

Defining the visual style of Chucksports

While Chris and I were making mock ups and wireframes we were not concerned about the visual style. We wanted to get features in fast to make sure they worked well. Once the number of features going into the game slowed, and the time spent bug fixing went up, we really began focusing on the presentation of the game. Chris had made the original Chucksports website with the 1963 Topps baseball cards in mind as inspiration. That’s where I started. Making a sports trivia app whose demographic mainly includes sports fanatics, bringing up their card-collecting nostalgia through the game’s visual design made sense. And it doesn’t hurt that the ’63 Topps are really great looking. Bold, bright, and simple.

BaseballCards

I collected more reference than just the ’63 Baseball cards just to be sure there weren’t any awesome evolutions that I could pull inspiration from. I am too young to have any sort of childhood connection with the ’63 Topps aside from generally liking their design, so I wanted to check out the cards that I sorta-kinda collected when I was a kid. Cards throughout the ages have kept a bright color scheme, but have messed around with the way the information was presented. None were as bold as the ’63 Topps, who were minimal in complexity and information while still attention grabbing. Newer cards tended to distract the collector from the player’s portrait with outrageous framing elements and corny graphics.

IngameEvolution

My focus was to make the app feel like a you were playing with baseball cards on your phone. Being developed in xCode and Interface Builder, we were pretty limited with what we could do animation-wise, so I tried my best getting the graphics looking the part, as well has having bits of homage via the app’s design.

Stats01 copy

To create the look and feel of a card I created a rough looking texture that eliminated the smooth, glossy look that is generally found on iOS apps, and applied that texture to everything. This caused us some headaches, but I think the effect it had on the presentation was worth it. I also noticed how the old ’63 Topps had a bit of ink bleed around it’s text and large areas of color, which I mimic’d by using various outer glow/stroke/dropshadow effects in Photoshop. I took advantage of working digitally to enhance the way important elements stood out and called focus to itself, which I think is where the baseball cards lacked.

HiRes

The buttons originally had a strong bevel that made the graphics appear more 3 dimensional. The 3 dimensionality was ruining the card-effect that I was trying to achieve because the buttons did not look like an object that could be generated by a baseball card printer.

Buttons

Here’s a little display of a few key-screens of the final product.
Chucksports01

With simple, bold design and colors figured out, we continued onto some higher-level branding of Chusksports. We thought about what would come after Chucksports. Why is it called Chucksports? Who should we market to and how?

Part III will show how we developed the brand and display some of our marketing ideas.

Check out Part I if you missed it.