Inventory Icons
Aug 13, 2015
So in case you hadn't heard...."The current icons in the game are not final... ignore them!"
In putting together a functional pre-production wireframe I had to knock out a group of about 125 quickie icons™ that could be used to simulate real inventory icons necessary for game play.
Ron pretty much always says to both myself and Mark "This is temporary, don't spend more than 5 or 10 minutes on it!" Of course, as an artist I sometimes have a hard time with that (and don't get started on Mark doing something in 5 or 10 minutes - but I'm sure he'll weigh in on that when he writes an art post - sometime soon we promise).
In any case, I tried to bomb through the first pass of these keeping them as flat two dimensional versions although we'd decided to make the finals more three-dimensionally rendered the way the icons appear in Monkey Island.
Here's a smattering of a few of the before and after versions wireframe on the left, newly revised on the right.
Creating the first pass 2 dimensional wireframe icons has been a very helpful exercise in their design process, as creating icons tends to be more about being able to select an item or visual reference that clearly communicates the idea of what the icon represents.
In the case of the inventory icons, since they do represent some manner of physical item that exists in the world it still requires quickly designing the look of that item- in most cases before it exists in the game world. When brainstorming designing story and puzzles is usually when we realize we need a particular item and then backtrack to where it physically exists in the game world. This can become a bit of a hodgepodge as we weave together story, locations, characters and puzzles. FYI, the following example is made up for the purpose of this post, it's not really in the game (at least not yet) so is spoiler free.
"Maybe Ransome likes ham sandwiches, let's have a dried up rotten one under his bed.... How about getting him one in the Diner, or maybe you need to get all the ingredients to make one...."
Additionally, it's pretty likely that when we create ‘The ham sandwich puzzle' that asset does not exist anywhere visually in the production game art at that point or if it does it's generally at lower pixel resolution and a different angle then the icon needs to be.
Typically the first place we're going to create a visual representation of that ham sandwich will be in its inventory icon form, then retrofit the design of that item back into it's game world counterpart so the two somewhat match- after all, the player needs to be able to make the visual connection between them asap.
The first thing I'll do to create that icon is research it online by searching ‘ham sandwich' or ‘ham sandwich icon', additionally, if I find a good iconic representation of the item online, it really only serves as a starting point to get the idea underway, you have to be careful about copying anything you find too literally as the ‘Ham Sandwich Icon Designers Union' (local 517) could end up be fairly litigious about their intellectual property.
Once you have your own good representation of that ham sandwich simplified and sketched out at the proper orientation you'll need to make sure it's rendered in the same style and color space as your existing icons as they belong as a group together and needs to share the same harmony and continuity.
Finally, given the nature of needing to translate the game into multiple languages, icons need to be pretty universally recognizable (at least as much as possible) so we try to keep them as as representationally visual as we can.
This can be somewhat problematic when it comes to an icon that mainly exists with printed text as it's primary identification, I.E. ‘Last Will and Testament or Lab Report". In those cases you do your best to create an icon that's different looking enough from other similar items and depend mainly on the player mousing over it to get a text description to do the trick.
Great icon design is an art form unto itself and requires a particular type of shorthand visual designer. In many cases the evolution of iconic communication is based in our collective societal consciousness when creating that items' representation during a particular time in history.
Take the classic phone handset as an example, today, most people I know use a cell phone that looks like a flat rectangle, but every kid still recognizes the representation of a 1940's style rotary phone handset when it appears on their screen, it's become a pop culture representation to communicate an idea, the same will go for the graphical icon of an envelope representing email that will still be around long after the day we stop using paper post.
Additionally, a lot of game inventory icons are designed by the lowest common denominator, few projects (our's included) tend to have the budget to hire a dedicated icon designer, it falls to the most logical available resource, in our case that would be myself, and I'm really a comic book artist and character animator, so bear with me, I'll do the best I can.
- Gary
P.S. The icons are not final until the game ships...
This comment is not final.
They are more clear and iconny.
I'd really prefer just plain text. Takes up less space, is much easier to understand and is very easily translateable to any culture and language. Also, it is far faster to make and alter.
by replacing the word "text" with the word "graphic" (more than others, at least) :P
As a Maniac Mansion spiritual successor, I expected Thimbleweed Park not to have icons... but I appreciate that you took the hardest way through.
Having a "hardcore legacy mode" with no inventory icons could be interesting, but I think that if you guys feel that the game should have icons simply go for it. At the very end you are making the game the way you like it. ;)
:)
(or Monkey Island 1 VGA) had a magic that Maniac Mansion didn't have for me (I appreciated it later, when I grew up);
it was fun playing them with my elder brother and participating in trying to solve the puzzles,
whose solution often gave visible reward (humor was quite evident too, not just written).
Inventory was graphical and it helped very much to this.
So I'll prefer graphic icons. I like them more.. do it for the kids!
(well, I don't know if the subject of this game could be applied to kids too)..
what's the Thimbleweed Park rating target??
I think it was nice.
This is a very personal, emotional preference that people have. I don't think there's a lot of conscious logic going into it.
I wonder whether it is possible to get a era-specific design into such small icons. But when playing Gone Home, I immensly enjoyed the popcultural hints to the time the game takes place in.
And if you want to make it look coherent, you need to make them all 3D.
I like these new wireframes!
When you add depth they look smaller and the diagonals look a bit strange.
Due to the 3D conversion the can of tuna now clearly looks like a can.
0. Overall, I do like the new icons. Just getting some flattery in here to make you want to read on. The rest is meant to be constructive (yet subjective) criticism, not a low form of insult. :P
1. The red arrow on the hotel card (or whatever the thing under the tuna can is) seems too close to the darker half of the card. It makes it a little difficult to tell it's an arrow and not a random shape. Also, I think the icon would be improved with a little anti-aliasing on the top and bottom sides. Straight, aliased, low-resolution lines with small slopes look hideous (to me, anyway).
2. I'm not sure what kind of receipt that is but if it's the kind you get in grocery stores, maybe make a long, curved piece of white paper with (unreadable) black "text" on either side of it. That's more easily recognizable than having an unreadable "RECEIPT" printed on.
3. Did you try drawing the vacuum tube at a different angle in order to take advantage of the other pixels? It might help make the legs look a tiny bit better. I'm not sure if it's possible. Just throwing it out there.
4. I'm not sure if that's a concrete block at the very end (probably not judging from the X on the front side of it) but it bothers me that the bottom 45 degree line is not entirely straight. I do see why you did it, though.
Good luck.
Cheers
It felt like I was carrying around a ton of expository dialog in the inventory.
have an option to read the blog posts spoiler free.
Would that be possible?
A start could be images, marked as 'may contain spoilers',
that are only visible upon a click. So it's the reader's decision,
if he wants to see the image(s).
After all, I now know 9 items and I claim I will remember at least 5 of them. :)
That potentially spoils the fun of some puzzles, don't they?
Anyway, thanks for the excellent work. Really!
Don't worry. Ron will cut them.
And if there are more design stuff that you want us all to participate in, then please say so. The book title and dolores stuff was fun.
OFF-TOPIC: My 7-year-old girl is wanting sooo badly to play Thimbleweed Park... I keep feeding her images and videos, so it is my fault. I am sure I will have a great time gladly inventing excuses for bad language and murders and all that.
Inventory icons are one of the best things about adventure games...
They really make the items come alive and give the game more personality - some of those little icons stick in your mind for decades and their inclusion was a HUGE step up from text inventory.
Rubber chicken with a pulley in the middle was a source of constant amusement as an icon sitting there in the inventory of the VGA version.
In any case, you are already doing this subconsciously for the other items. Look at the E-ticket. Everyone knows that it is an E-ticket because of the capital letter 'E' logo on the paper combined with the arrow. Without these it would just be a funny piece of paper that users need to hover the mouse over (or look at) to see what it is exactly.
But I really prefer the 3D versions. ;)
"WE'RE THE DESIGNERS" ...
Maybe you should think about Mouse Over Text.
It's funny, I recently heard a tween asking me: "Why to save a document I have to click that blue square? Why a blue square means To SAVE??"
Damn, I felt older than I am... grandpa Zak...
Unfortunately this will multiply by four the art work to do for the translations...
This post made me think of a question - Will Thimbleweed Park have a button that enables the player to see all the hot spots on the screen?
A hot spot button might remove some of the "mystery" from the game world but it will prevent pixel hunting...
I have to play the game _myself_?
How rude!!!
:-)
I'm glad _Real Designers_ still exist in this age where everybody gets a ribbon for effort and any small action is cause for celebration.
Keep up the great work!
dZ.
I reckon Gary has signed up on here as a load of aliases, so he can plant comments like:
"We don't need icons! Text is much better! Less work is awesome!"
"Don't make Gary do all the icons, he has enough work as it is!"
"I agree! Just make it text, let Gary watch TV and relax!"
The thing that gave it away is that no real person would ever actually prefer a text inventory, it just doesn't make any logical sense.
Nice try Gary - get back to work on those beautiful 3D icons.
Great to see Ron isn't the only one to suck at math! :P
3D icons in a 2D point and click adventure? Oh no, I'm so confused right now...
Math teacher:"they're both projections of a three dimensional object onto a plane, one being orthogonal to one of the original objects main symmetrical axes while the other is projected at an angle of ...."
Zzzzzzzzzz snore zzzzzzzz snore ...
I was just being sarcastic, because of the whole "the 2D looks better" , "no the 3D looks better", "it should be text as in MM/Zak" funny but futile discussion above; as Ron pointed out nicely they're the ones deciding.
So, the definition of 3D space changes over time? That's like 5D!
(Again, being sarcastic- I am old enough to have played the first so-advertised "3D" games on the Atari 2600. By the way, I just checked my mint condition C64 boxed copy of Zak McKracken and it mentions "stunning 3D environment " lol!)
That's particularly interesting because the sandwich icon you've used as an example uses wonderbread or toast slices or some other kind of square bread slices. I'm not from the US, and I've never seen a sandwich like that in the real world. I was immediately able to recognize it as a sandwich, probably either because I've seen "square bread" sandwiches in US TV shows, or because it looks similar enough to a "normal" sandwich that I was able to figure out what it was, but all of the sandwiches I've ever seen in real world either used a horizontally cut roll as its bread, or slices of a "normal" loaf of bread.
I myself use to eat such slices only toasted, not as a sandwich. But I prefer more satiable bread in general.
Sometimes the items were just a few pixels on the screen but when you picked them up, the icon brought some new information about the object (Now owned by you, almost like in the real world! No way! Yes, way) or even perhaps a visual joke that exists only on the graphic, bringing a small but not insignificant extra dimension to the story experience. I also thought it was cool when you could mix some objects together and you got a whole new interesting or fun object. Hard to achieve that effect with text only I think.
*scnr*