So in my Simulation/Serous Game Development class we were put into groups to develop a small simulation of some sort. My group chose to create a vending machine simulator that has both a snack and soda machine. Just this last class, I was tasked with developing the UI for the simulation. So far I have created mockups for the full two vending machines, the input panels for each, and the user control methods. Below I will discuss my step-by-step process in developing each.
The first type of vending machine I was going work on creating the panel and full mockup was the snack one. The first thing I did with this one was took a long hard look at the many, many types of snack vending machines in service today. The last time me and my group met, we pretty much chose the models for both machines we would be using in our simulation, so looking for references was a bit simpler. The group and I decided to go for an older and more recognizable type of snack machine. After literally a couple hours of searching, I found a few that I could use to begin making a control panel. I’m not going to lie, but I just traced over the basic lining of the vending machine that I found and emulated the basic layout of the numbers and displays. Going from top to bottom, I originally used the font type called “HelveticaNeueLT Std Blk” and the reason for this is that I’ve always liked how it was simple to read and just looked different. Interestingly enough I liked this front from a game called Trials Fusion and it just always stuck with me. The only issue with this font is that there is a point where becomes too small and very hard to read. So with that, I decided to just go with Arial, because everything uses it. For the digital currency display, I went with the same font I used for my elevator Floor display and it is called “Digital-7”. Below that, I just ripped off the instructions plat off the machine I referenced. Next is the number panel, I made from scratch even though it looked exactly the same as the reference. The Bill Insert Instructions were made by me, same with the Coin Slot and Change Button. After I finished with the snack machine panel, I went on to put it on a very simplistic full machine mockup that I made by eye-balling the model we are going to use for the actual game. It looks pretty alright. Yes, I realize that the picture I used has beverages in it, quiet you, it’s only a mockup!
The first type of vending machine I was going work on creating the panel and full mockup was the snack one. The first thing I did with this one was took a long hard look at the many, many types of snack vending machines in service today. The last time me and my group met, we pretty much chose the models for both machines we would be using in our simulation, so looking for references was a bit simpler. The group and I decided to go for an older and more recognizable type of snack machine. After literally a couple hours of searching, I found a few that I could use to begin making a control panel. I’m not going to lie, but I just traced over the basic lining of the vending machine that I found and emulated the basic layout of the numbers and displays. Going from top to bottom, I originally used the font type called “HelveticaNeueLT Std Blk” and the reason for this is that I’ve always liked how it was simple to read and just looked different. Interestingly enough I liked this front from a game called Trials Fusion and it just always stuck with me. The only issue with this font is that there is a point where becomes too small and very hard to read. So with that, I decided to just go with Arial, because everything uses it. For the digital currency display, I went with the same font I used for my elevator Floor display and it is called “Digital-7”. Below that, I just ripped off the instructions plat off the machine I referenced. Next is the number panel, I made from scratch even though it looked exactly the same as the reference. The Bill Insert Instructions were made by me, same with the Coin Slot and Change Button. After I finished with the snack machine panel, I went on to put it on a very simplistic full machine mockup that I made by eye-balling the model we are going to use for the actual game. It looks pretty alright. Yes, I realize that the picture I used has beverages in it, quiet you, it’s only a mockup!
Next, I went on to the process of making the soda vending machine mockups. Same as the snack machines, I spent a bit time researching other soda machines to use as references. Making this one turned out to very easy to do. Once I made the first one, it just felt like almost nothing to make another. Well, that and soda machines appear inherently more simple than snack machines or at least the one we choose as our model seemed so. Also, I kind of used a lot of what I made for the snack machine. Well, that’s the thing with that, time is something me and a lot of college students don’t have much of. If you can shave off some time and it still looks nice, go for it. That’s honestly what developers have to do sometimes. Just look at my panel mockup below, anyone would see that on your average soda machine. Alright, so at the top of the panel has the Bill Insert Slot and Instructions which is kind of strange in the way the parts are positioned on the soda machines versus the snack machines. The Bill Insert is at the top instead of the bottom. I wonder, especially as someone who is designing the UI, why is it that way? Underneath the Bill Insert, is the Currency display and next to that are the Coin Insert and Change Button. Below that, are the drink selection buttons and the change slot. For some reason, the change slot on this machine is on the panel, where the other is not. Again, another odd difference. After creating this panel, I took the texture from the model we would use and just put it over the panel I made. I also created a box for the drink drop spot, whoop-dee-doo! That’s it for the vending machine mockups.
Now for the HUD! Really simple this one is and I actually started working on it a few days before the last class, so I could get a head start. I was able to find a picture of a close up shot of someone’s thumb pressing one of the buttons. I figured it would be a good place to start as that’s what I thought the game would vaguely look like. I first thought, okay if we are using money to buys snacks or drinks, we need to display the plays current money they posses. Also, why not put a snack count? Then I thought to put a notification in the middle of the screen telling the player that they can lock the camera to panel. We might scrap that, but I just made in case we wanted it. The last display at the top right just tells the player what button needs to be pressed to either insert money, pick a snack, put money in, and take the snack and change out of the machine. Also to shake the machine if the snack gets stuck. Then at the end I deleted the picture with the guy’s thumb and added what I made. That’s really it for the HUD, unless the group and I decide to add some more to it.
Alright, that will do it for this Dev Blog. I will be back with more updates in the coming weeks.
