Thursday, December 10, 2015

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.