Calendar – Building a Tool Before a Game

It’s been many months since I last posted on this blog, so I figured an update was in order. My last post was my personal post-mortem for Box Voyage. The game’s been released on Steam, which was a major milestone for myself and the team. But since I just got a job working with Savepoint Games, it made sense to post the work I did on my own this summer and fall!

Since Box Voyage launched, the ongoing pandemic has taken its toll on my creativity and motivation. Without the structure of classes and projects to push me forward after graduation, I spent my time focusing on the job hunt. I was so burnt out from finishing off my degree and having every day feel the same that I didn’t even want to look at Unity. I’d open the program to try to start something or just to fool around, but I’d immediately close it because I couldn’t bring myself to be productive.

While this few-month period was really difficult, I felt it was exactly what I needed. Burnout is not something you want to play around with, and, having experienced it at previous points in my career, I felt it was more important to devote myself elsewhere. I caught up on many games and shows that I missed, focused on improving my portfolio and resume, and spent time with my family now that I was back home until the pandemic passed. Time away has always been the best medicine for burnout, and I knew some tugs of creativity would come eventually.

At about the midpoint of summer, I finally felt that pull again. My goal going into whatever prototype I’d make was that it had to be something modular. I didn’t want to have an endgoal and then reach it because I knew I’d feel forced to keep moving. With a more modular idea, I could build things a system at a time and constantly assess my interest in the project. This would allow me to either change course if I became uninterested, or to give up on the project and feel like I still made some good progress. This, strangely enough, led me to the Calendar prototype.

Around July, I was scheduling a time slot for an interview. It made me think about my time in production courses, and specifically about the time at the beginning of a semester where we would overlay everyone’s calendars and try to find free time for meetings. This maneuvering of appointments felt like a puzzle in an otherwise mundane activity. I knew from my experience with games such as Papers, Please that menial tasks that can be gamified make for interesting and engaging gameplay, so I said “why not?” However, I knew right away that I couldn’t just jump into the game. I first needed to build a useful calendar tool that could function on its own, and then I could build the game around that.

I first got to work creating the calendar itself. I limited myself to the 8am-6pm timeframe and weekdays because I felt it would be more manageable and would fit into the office vibe the game would likely have. The grid is built through code and each space is its own button that I modified to register both click and release. I liked the simplicity some calendars have with clicking and dragging to instantly block out time for a new appointment, so I managed to get that up and running first as seen below.

One goal I had with the Calendar prototype was to get a better grasp on my UX skills. As a technical designer, I want to be able to build toolsets and systems that are easy for the players and developers to pick up and use. They have to function in a way that’s expected while also doing everything I want them to. Luckily, calendars have a lot of utility and functionality that made this project perfect for that growth. I spent time using the most popular calendars to see how they tackled some problems, and used my findings as I built things.

From there, I had each cell of the calendar auto-populate its relevant information upon creation so that it knew what time and day it held. Letting go after dragging a block of time will bring up the appointment creation window, which autofills all info but allows the player to edit it before actually creating the appointment. However, we wanna be able to see the appointments, so I used simple panels that stretch to fill the time slot.

Next up was introducing people for these appointments. This is where the calendar viewing system came into place. Just like the leading online calendar tool, you can view multiple people’s schedules simultaneously in order to easily find the time slot right for you. I didn’t want these lists to be endless, though, so players can only view 5 people’s calendars at a time and can only invite up to 10 people to a single appointment. I’ll change these numbers around later if I need to. Appointments now only visualize once you are looking at an invitee’s calendar.

This addition is a little less exciting because I just hooked it up, but nonetheless is part of the game’s UX development. I originally was going to include 5 set colors that each person’s calendar would be shown in, and that’s it. It was mentioned to me that people would like to change the colors used so that they could personalize the game’s feel to their taste, and it got me thinking about how this could also solve any issues colorblind players may have with my choices. I promptly found a well-made and open-source color picker package for Unity and fitted it right in as you can see below.

My last major development I have to show is one that took up most of my development time recently. When looking at how other services handle an event that 2+ of the viewed calendars have, they mostly would just show 2+ large blocks taking up that time frame. I thought there may be a cleaner solution, so I developed the multi-tab appointment block seen below. These blocks are always grey, with the tabs up top marking the color and relative position of each invitee that has their calendar visible. If I return to this project and I get some actual gameplay into testers’ hands, I’ll see how they respond to the multi-tab blocks.

When you add and remove calendars to view, all of the relevant appointments are modified to stay up-to-date. Blocks will shift and stack appropriately to try and make sure all appointments can be seen easily. Trust me, it was a headache to get it to do things right.

So after all of that hard work and without talking about the couple of bugs leftover, below are a bunch of gifs of where the project currently is!

Now that I have work, my commitment to Calendar is much more limited and it’ll honestly stop altogether for the foreseeable future. I’m a bit disappointed because I never got to get any of the game into it! However, it was exactly what I needed to maintain my design and programming skills during quarantine, and I learned many lessons about UX that I have already started to carry over into my job. Maybe you’ll get an update on this game or the one I’m working on full-time in the coming months, but until then, thank you for reading!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s