This blog, soon into website, rates video games so people don't become ostracized gamers.

Thursday, December 3, 2015

Simulation Game Dev Blog #2

This is the second dev blog for my class Group Project for
Vending Machine Simulator. This iteration, I was tasked with taking my UI
mockups and turning them into the actual UI for the Simulation. Here is my step
by step of my development of the UI.

So to start I took a more detailed look at what the actual
vending machine inputs looked like. I noticed right away that the mockups I
made were not very accurate, so it was time redesign them. Then I figured, why redesign
the mockup If I were to just make each button individually anyway? Oh, before I
continue, let me flash back to last Thursday. My group and I just made the UI
placeholder, and we were just messing around with it. We noticed that the
default buttons were only square shaped. After trying for awhile to create
circular ones in UE4, the instructor gave us the suggestion to make a material
with a circle shape and put that in place of the default one. We attempted to
do so even with his help, but no luck getting it in. Let this be a lesion, don’t
use material for the UML, use textures, because it worked perfectly after we
assigned the PNG as a texture to the buttons. With that, I had to design more
realistic buttons. Now back to modern
day! I went back to viewing the snack machine model, but I needed to get the
colors into the Photoshop pallet to make them appear more accurate. I
remembered that I had the texture image I could use to get the colors. After
getting the right color, I made a circle, filled it with the color, and I added
a gradient to make it look more 3D. After I made the button, I imported it into
UE4, but I realized, I did not have a texture for when the button is pressed
down. So I just tinted it in idle, and when it is clicked, it goes a bit
lighter has if going closer to inside of the panel. Those were the buttons for
the letters and then I made the buttons for the numbers. I just took the same
shape and just made it white with a gradient. I imported them all in and added
the corresponding numbers/letters to the buttons. The font for those were just
UE4 default. Speaking of Fonts, I made sure to use a digital font type, colored
red, to get the look just right. The font I used is called Digital 7 and I
actually used it for a previous simulation. Also the backgrounds for the
digital displays were black, of course. Also the other buttons and displays may
have no alterations, but that was for the inputs that would not exist in real
life. For the soda machine buttons, I just took logos from real sodas and made
PNGs in Photoshop. I also used the same tint method to make the buttons look
like they really clicked. After buttons for both machines were made and the
other displays were set. It was time to make the slots/button for the money.

I decided to create
the “Return Change Button” first because I was already on the mindset of making
buttons. What I did was I took a vending machine with a much better resolution
as a reference to create this button. I used the same size of the earlier
buttons and cut out the middle to then use Bevel and Emboss to create the area
the button is set inside. I then took a smaller circle and also used Bevel and
Emboss to make the button have a 3D effect. I knew that using tint would not
work well so I made the actual button smaller as when pressed the button would
move away from the player ever so slightly. I did however use the tint when the
button was hovered over. Next it was time to make the Coin Slot. What I did was
take the same old circle shape and Bevel and Embossed it and cut out a
horizontal slot in middle. I also used the tint when hovered over and for the
click action, I then an image of a coin and stuck it half way in. Next thing up
was the Collect Change slot. This time I needed it to be square, so I made the
it up and much like the Change Button; I cut out the middle a Beveled and
Embossed it. I then took the cut out portion, colored it a bit light and also
Beveled it. For the mouse hover action, I made the slot appear open with a coin
inside and when clicked on, the coin goes away and the slot is still open until
hovered off. Unfortunately, when there is no money to collect the coin still
shows, I need to find a way to remedy that. Last thing left to do was create
the Dollar Insert slot. Just a note, I used the same vending machine to reference
the money slots and used them for both machines. So for the dollar slot, I
literally took the same one I created for the mockup because it looked so good.
I just used the real ref image to make it have the correct colors, 3D effect,
and other small details. For the mouse actions, the hover just tints it and the
click shows a dollar in the slot. Same with the coin showing up in the change
slot with no money, the same happens with the bills, so that also needs to be
fixed as well. There was a problem I ran into after importing the Dollar Slot
images. When it was clicked on, the whole image with the Bill in contracted. So
all I needed to do was make all the images the same size, it worked fine.

Well that is my development iteration for my Vending Machine
Simulator group project. The final
products are below. Also, there was no coding since the placeholders were made to be coded with and I just change the look of them.