Mageball is a first-person, spell-casting sports game. Players take control of a mage on either the fire or ice team and compete to score more points on the other team's goal. Players can choose from seven unique spells to help their teammates or hinder enemies.

This project was in development September 2012 - April 2013.

I was lead artist on the team, as well as the 2D artist, texture artist, and GUI/menu artist. Programs used: Photoshop, Illustrator, Paint Tool SAI, 3D Coat, Maya, Zbrush.

A general overlook of the art in Mageball can be found here. I felt it was important to highlight and dissect the art and my thought process for the User Interface. The UI went through a lot of different iterations and required a lot of communication between the programmers, designers, and I. My first step was considering the UX -- what information we developers needed to convey to the players, both in and out of gameplay. The next step was finding inspiration and references to inform the style we were going for. This process can be found in the Art Style Guide made late 2012. Furthermore, I kept a blog during the game's entire development, which can be found here:



These are the UI elements during gameplay. The elements are: scoreboard and game timer (top), health and mana meters (bottom left), and the active/chosen spells (bottom right). Each element was exported separately with a transparent background, and placed as shown by the programmer. Some elements have numbers overlaying them, also handled on the programmer's end. My goal with UI is always, first and foremost, to portray information clearly and concisely. Since this game has more of a playful and active theme, I wanted to incorporate bright colours (which matched the player's team) and fun themes like the team logos and the potion bottles.

Here is a video of the UI in action. If I had to change anything at all, it would be the "damage" overlay you see happening when the player's health gets low. We had plans to change it throughout development, but everything else ended up taking priority until art lock.



During gameplay, players can also view a "scoreboard" and a "pause screen" element. We wanted to include the scoreboard, because we took a lot of inspiration from FPS's we all played (specifically Killing Floor and Team Fortress 2). Hitting tab would always display information like the players in game, and a ranking system based on kills or points. While this was not necessary, it was something that we felt was important to the genre. Sometimes it's the little things that make a game what it is.







The next step was taking care of the menus. First and foremost, I wanted to take care of the spell and team choosing menu that pops up after a lobby starts. This screen went through a couple of iterations. I wanted players to learn a lot of information from this screen:

- What spells there are - How much mana spells cost - Which players are on what team - Which players have what spells

Players also have to be able to do the following:

- Pick spells - Join a team

Obviously, there also needed to be a lot of feedback on this screen. I opted for a glow over anything else, because I felt it matched the theme more. Had the theme not been "magic," other options would have been considered. I also had the idea of making the "spell selection" element look like a page out of a student-mage's notebook. I used that idea, making the background of the "spell selection" parchment.



My next biggest task was creating the character customization screen. Besides configuring the layout of all the information needed, I also needed to include an image of all of the mage outfits, matching all of the skins I painted on the 3D mage models.



This is all of the assets I gave the programmer, layered on top of one another. All of the assets were exported exactly in the same spot you see them in the image. In other words, all of the elements were exported as a 1280 x 720 image with them in the intended spot, and the rest of the image being transparent. This way, the images could simply be imported as they are and layered on top of one another, with no extra effort on the technical side of this process.

As this is a big waste of texture space, this would be unacceptable if we actually had the right tools available to us. We did not use a premade UI tool for Unity - our programmer made his own from scratch. It was not working out for the customization screen, so I offered to export it all in a way that would make it easier for him.

The next big UI screen I worked on was the lobby screen. This screen was very important to us to make the game feature complete and professional. Many multiplayer FPS's have lobbies, where players can wait for more to join, invite friends, pick the map, change settings, and chat. Leaving this out was not an option for us, especially since our lead development team plays FPS's together a lot.

Going along with the "medieval" and "mage" theme, I really wanted to incorporate a parchment map in the lobby screen. First of all, I thought it added a nice, subtle narrative touch to the game. We worked hard to not only create a game, but also a whole world and backstory for it. This helped us inform the art style and assets that went in. So, I felt it was important to also include that in the lobby screen. Secondly, I am a huge fan of Lord of the Rings. The map of Middle Earth is iconic, and was my main inspiration for it.

I had our narrative designer draw me a very basic version of what he wanted on the map and where. I took that, and expanded upon it and turned it into something that would be an actual landscape, all the while taking inspiration from Tolkein's map of Middle Earth.