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.