~ Cancer update at the end
Hey Giggle Horse Fans, as you probably already know, we have been working on a point-n-click adventure game that we hope to release soon. While in game development, one of the less exciting jobs a person might be asked to do, is create marketing assets. Like this nifty button telling you to go add Absolute Zero to your wish list on Steam. So yeah! Go ahead, click the button below, add it to your Wish List, then you can read below how an asset like this button is made.
Herd Your Cats
Given that there are a million things needed to complete a video game, it is important to herd all your cats together so you don't feel overwhelmed. I have tried a bunch of different methods for project organization and tasking. Currently we use a type of Kanban scrum system, but in the end I always take a single task and break that down into a list of subtasks and put those on the black board.
 |
| Tasks needed to create my button |
3D Model the Button
From the black board above, you can see that the first few things on the list involve creating the 3D frame part of the button, So I use 3DS Max and model the button the way I like. Then I take the 3D model, export it out to another program called Substance Painter where I choose all the materials and actually paint the object the way I want it to look. Before this step, the model is just grey and boring. Once I get it looking like I want, I have Substance Painter export the image maps, or textures back out so I can used them on the model inside 3DS Max. This is a process known as "Baking your textures" (Which is the only thing I know how to bake). Here is what it looks like inside Max with the textures.
 |
| 3D Button Frame Modeling |
Render the Button
Once everything looks the way I want, I render it out first with the Steam logo dark, then with the logo lit. After that I have to render out the shape of the button window so I can create an image mask using that as the transparency shape. I do the next steps in Adobe Photoshop, but first I have to save my window view shape out as a TGA with an alpha channel because Adobe won't let you use the existing alpha of a PNG. So when I render the image in Max, I always turn on 'Alpha Split' in the TGA settings to split the alpha (transparency mask) out to a separate file. Like in this TGA setup. Only you need to check "Alpha Split" still.
 |
| TGA File Settings |
Create the Button Images
Now that I have an image of the button with the Steam logo off, an image with the Steam logo on, and an alpha mask of the hole where the content of the button will show through I can make my button. I start by putting in the background, in this case the nebula. The view port mask image will be used as a mask to only show the nebula inside the button...everything outside the mask will but transparent. Like below. Then I put the button frame with the logo off in as a separate later. Save that out 'as a copy' so it flattens all the layers into a single image and call that the 'off' state. Then I add the image where the button is lit, and save that as the 'on' state of the button.
 |
| PhotoShop Button Construction |
Code the Buttons
Next I store the buttons up on the web server in a place where I know they will be no matter where in the world the button is used. So 'images' is a good place. Then all I have to do is use some embedded JavaScript in the link so that when you rollover the button the lit one shows up. When you leave the button, the button will appear off. Here is the rollover code to do this sort of thing.
<p style="text-align: center;">
<a href="https://store.steampowered.com/app/1224630/Absolute_Zero/" target="_blank">
<img alt="Add To Wishlist!"
onmouseout="this.src='https://www.gigglehorsegames.com/images/steam_az_wishlist_off.png'"
onmouseover="this.src='https://www.gigglehorsegames.com/images/steam_az_wishlist_on.png'" src="https://www.gigglehorsegames.com/images/steam_az_wishlist_off.png" />
</a><br />
</p>
And that is how a simple rollover button is created! Just think how much work it takes to create an entire website for a game. So keep in mind that developing a video game takes a lot of extra work that actually doesn't go into the game itself.
Cancer Free!!!
Ok, now for the important stuff that matters. I went in on Tuesday and they ran an endoscope up my nose and into my sinus cavity under my right eye. They can do this because now my sinus of my cheek and my nostril are all one big room. They removed all the bone separating them. At first, after surgery, another growth formed in there. It scared the hell out of me, but they said they were 99% sure it was a nasal polyp formed from the inflammation of the surgeries I had. In other words, my sinus cavity was pissed off! So they put me on a very high dose of Prednisone and when I came back, all of that was gone and the inside of my nose is now smooth as a baby's butt! I have to go back in February for an MRI and CT to make sure it is staying away, but for now things couldn't have been better!
So until next time, take care people!
No comments:
Post a Comment