I went into the Preproduction of the Tooltips a bit in the Preproduction Article on this project. A link to that can be found there. Overall, I knew I wanted a floating tooltip. I originally programmed it to be dynamic and move with the mouse (which you can still flip the setting and it will) but the fluidity of moving with the mouse didn't really feel right for something that's supposed to look wooden and rigid. So there's only one spot where the tooltip will appear. I like this pattern because the player will always know where to look for information on what they're mousing over.
The bulk of my time working on the tooltips was spent on these stat icons. I wanted something super graphic that could be taken into other parts of the game and you would know what it is. I started with Viking Runes roughly translated into the made up stats I chose. Then I made an icon but I didn't like how some of the icons were really strong (like the strength icon and pierce icon) but other icons were weak at a small size (attack speed and agility). I tried a bunch of different versions and ended up making little rune stones in Substance Designer so be used in their place.
These are renders of my Stat Icons from Substance Designer. Some of the icons lost their detail at a small size but I felt like they held up pretty decently as a graphic icon that can be used anywhere else in the game. I didn't add color to these because I wasn't sure which way to go. I was originally thinking they could all be the same color (like in my mockups) but ended up making them different colors to further differentiate them. This way I can rely on the UI light to tint them a consistent color and I could just focus on what they actually are. Red for strength, Green for agility, etc.
Although I'm confident that my programming can get the job done, I'm not a programmer so there are probably better ways to implement everything here. Here's a high-level overview of how these tooltips work and some notes I made on the implementation.
The overall theme is, of course, Viking. I wanted to make something from a culture I was interested in and last year I read the book Norse Mythology by Neil Gaiman so I felt particularly interested in learning more about Norse Mythology and the Vikings. I watched a few documentaries about Vikings and did some personal Google Searches too. Come to find out, I actually have no idea how to make Viking Art. Most people know the runes of the Vikings and the gear (axes, shields, horned helmets, and such) but what about their art? I stumbled across a great resource by Jonas Lau Markussen and it truly changed my perspective on Viking Art. It was fascinating for me to learn about how Viking Art changed through time and the materials used to make this art drastically changed when they adopted Christianity. After some more reading I decided I liked the Mammen style the best so I found a bunch of inspiration from that.
During this project I went through my Pinterest Board on colors and it turns out I really like the color Red, Orange, and Blue. I picked a few of the images I saved there and made some color palettes. This step of the process was more towards my original idea of Cyberpunk Inventory but I still tried to stick to the palettes to make something not many people have seen before. Going into this I knew I wanted to make something more on the dark side. Not dark as in blacks and greys but more adult and grim. Like Loki broke free from his chains and brought forth Ragnarok.
Here are a few explorations for the different UI components. This step in the pre-production process was after my greybox wireframe and during my shape study wireframe. It took the most time to get the border between the world and Inventory to look natural. I spent a lot of time there because that border should be a perfect blend between the in-game world and the UI world.
These are a few environment tests to see how my style and shapes would hold up in different places. I tried to use backgrounds that I thought were dark and grim. Somewhere I could see the Viking player going to. I knew that they might not go to a tropical beach or a rain forest so I didn't get background in those styles.
Credit to the artists who made the backgrounds in the captions.
STEP 1 - List of Icons
Come up with a list of icons I wanted to make. I made 4 categories of items that the inventory could handle. Those categories are Weapon, Armor, Consumable, and Junk. My goal was to make at least 2 items in each category to effectively showcase the tooltips.
STEP 2 - 3D Model, Lighting, and Export
Then, I took my idea and modeled it in Fusion360. Since I was just starting to learn Fusion360 I skipped sketching the icons because I had a general idea of what I wanted and since I was learning Fusion360 I let my curiosity drive the look of these icons.
STEP 3 - Photoshop Polish
After exporting the 3D model as a PNG with a transparent background, I took it into Photoshop to do the finishing touches. Again I just let my curiosity drive the final look of the icon. I don't know Photoshop as well as I know Illustrator so this was also a bit of a learning experience for me.
The Helmet was the first icon I did. This is where the bulk of my learning went. Trying to figure out the controls to Fusion360 and crashing a few times because I chamfered the wrong edge. This icon is definitely one I would redo in the future. I feel like there's not enough contrast between the helmet and the background and I feel like the overall shape of the helmet is a bit on the boring side. I would like to see a little irregularity in the dome at the top and maybe some angled slats for the eyes and mouth.
Bonus Note: this render is overall smaller than the other renders because I figured out how to render in a square aspect ratio in the later icons.
The spear was the 2nd icon I did. My goal was to get some more intricate designs on the blade of the spear so I mode the general form and designs in Illustrator and then I took it into Fusion360 as a sketch to extrude it from there. I did figure out though that Fusion360 treats edges from an SVG different than if you were to make the edge in Fusion360. This means that I wasn't able to do a double-sided chamfer for the edge so one side is actually flat.
While making the spear I noticed there's a 'form' tool in Fusion360. I figured a form tool would be useful for something like the ring so to get used to the form controls I decided to make the Dragon Egg first since it was just going to be a slightly oblong sphere. I also learned here that Fusion360 does a lot of calculations for reflections and shadows for it's water material. So by making the outer shell of my egg a water it took the render way longer than I anticipated. In the future if I want something to look semi-translucent I will probably just use a colored glass material.
This icon was fun because I was able to apply things I learned from my last 2 icons here. The ring shape is done as a form that I was able to bend and make into something that looks like it will fit on a finger. The face of the ring was done in illustrator and imported into Fusion360 as an SVG Sketch. I also found a really nice "Old Brass" material in Fusion that I was able to apply to the ring to make it a little more bumpy.
The drinking horn icon was originally meant to hold beer or ale. However I couldn't get the foam right for the liquid so it ended up being a holy water type drink instead. This was is interesting because I was originally going to make it out of wood like a classic tankard but after doing some research it turns out that Vikings did actually drink from hollowed out horns. I took inspiration from a few pictures of Viking Horns from the National Museum in Copenhagen. I was also experimenting with implementing my own materials in Fusion360 so the bone texture is custom made.
Bonus Note: I learned from my mistakes in the Dragon Egg and the liquid is actually a colored glass to reduce render time.
The rocks were another experiment to get my custom materials in Fusion360 but I messed something up and they didn't turn out right. I ended up overlaying the texture in Photoshop instead. A lot of my tweaks were done Photoshop for this one. I really like how the little rainbow of colors turned out in the final icon. Hence the in-demo name "Pretty Rocks".
At this point I felt pretty comfortable in Fusion360 so it was time to learn something new. This scroll is made by sweeping a line along a path to get a form. Then I pinched the middle bits and made it look more "flowy". I was able to make the cuts in the sides by using excluding a triangle shape from them. The print is a decal added in the materials phase. I've never used the decals in Fusion360 and it might have actually been nice for the drinking horn's dark base.
No viking is complete without a round wooden shield. This model is a good example of a combination between SVG assets (the wood slats) and Fusin360 native assets (the center and outer rings). Much of the texture was done in Photoshop because I wanted to make the shield look old and weathered. I like how the chipped paint turned out in the final version. I also used this model as a 3D asset for my inventory.