This blog post will be kinda short due to the fact that, well, there was not much left to do for Vending Machine Simulator 2015. So lemme get started so we can get oust of here quick.
So for this final iteration I was tasked with adding all the different names and types of snacks either machine provided. I also set the prices for each snack as well. So the first thing I did was take our existing UI, which only had the codes in the "Snack List". Whilst adding the names I realized that the amount of combinations on the key pad could far exceed the amount of snacks available. Thank you so much original model for being so unnecessary! So I did more work than I needed to, great. Luckily the way Garret set it up the widget was that we could just choose what combinations worked and which ones were invalid. Alright, so I made the the names for the candies and chips and then put down their codes and the price of each. I made the vending machine prices from like the 90's (as my instructor observed) with chips costing $.50 and candy costing .75. I originally made the chips $.65, but Garret set up the returning of money only utilizing quarters, so we worked the prices to use multiples of 25 due to sake of time. The last thing I did for the Snack Machine was set the correct models of either candy or chips to spawn out when purchased. The current UI is below along with the changes in the widget as well.
Now for the Soda Machine. I originally just put,"All Sodas Cost $1". For some reason though the part that said "All Sodas" was not visible, but said it was in the UML editor. I must have left it because it seems that Garret just listed the Soda and each cost $1. As you can tell I also made the Sodas cost $1 in the widget blueprints. I guess that's it. Oh and of course I rigorously tested out my older UI stuff to see if it was all good and it was except for not returning the money fully, but we fixed that with the price change. Images for that are below.
One last thing, we also completed our presentation I felt like it went very well. I don't know if we are going to any more to it, but we made a great simulation. The one regret I have is feeling like I didn't do enough. I mean Garret did so much more than the other three of us. Maybe he just had a lot of fun with it. I think for any next project I do with a group I should really be on the members asking if there is anything I can do and if I'm doing enough. Well that's it for these dev blogs for a while. I'm outtie fivethougtee.
Thursday, December 3, 2015
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.