Week 8: Who Would’ve Thought UI Would Be the Most Difficult Part??

Hi everyone! Somehow, this week ended up being the one in which I spent the most time on my project—and the one in which I faced the bottleneck that almost made me abandon my UI-upgrading campaign. However, I somehow survived it with the help of my advisors, Google, and staring at the code for too long, so I expect to formally begin playtesting very soon.

Custom Fonts Are My Greatest Enemy

One of the first things I decided to do was change the in-game clock to a digital one and give it a digital clock font to match. Tkinter doesn’t have a built-in digital clock font, so I had to use my own. However, I believed this wouldn’t be much of a challenge, since I just had to download, import, and load in the font to use it. Right?

Unfortunately, a recurring motif of my senior project has been “easier said than done.” Initially, I tried to use a package called “pyglet” to load the font in, but no matter what I did, the clock still displayed as the default font, not the one I had chosen. Checking whether the font had been loaded in properly yielded “True,” but there seemed to be no way of getting the font to actually render. 

After hours of googling and confusedly emailing/texting my advisors, we determined that pyglet doesn’t work on MacOS. Thus, I had to use the package PIL to draw out the font (in the form of my desired numbers) as an ImageDraw object. The ImageDraw could then be converted into a tkinter PhotoImage and displayed onscreen like any other uploaded image.

Updating the clock was a little tricky, as I had to determine how to remove the image and redraw it. I also made sure to take care of special cases such as negative times. In total, working on the digital clock took almost a day and a half, which was the longest I’d ever spent solving one particular issue in my senior project.

Improved Capacity Meter

As Ms. Silva suggested, I added an ambulance image to the background of my capacity meter so that it looks like the humanoids are actually being stored in the back of the ambulance: 

Though this addition was not as difficult to implement as the clock, I had to do some research to figure out how to layer the images properly. I also made use of a convenient background remover for the ambulance image, as I have found that searching “transparent” images on Google Images does not actually yield images with transparent backgrounds. 

Other Changes

Besides the two main UI changes I made, I also added an HP bar for the ambulance, replaced the zombie images with better ones made in Unity, modified the Suggest button, and adjusted the format of the final score. 

I look forward to playtesting, as much as the logistics of it worry me (I can’t believe I’ll have to do a crash course for Statistics as part of my senior project soon). It’s weird knowing that the majority of the coding is over now and I only have to do data collection and analysis from now on.

Thank you for reading and see you next week!