Skip to main content

How to Make a Game: Maps, Sprites, & Icons

After preliminary research, the next step is to bring our idea to life. We decided to focus on each individual stage of the game separately, aiming to completely finish the gameplay for one before moving on to another. And for me, that means building a fictional ancient Greek town from the ground up.

The Temple of Apollo

Step One: Maps

As our game refers to the visual formats of a 2-D exploring RPG, I have to illustrate entire areas with all interactive objects embedded. During the first stage, James (our protagonist) will travel through a dark alleyway before entering a Greek marketplace and garden, eventually entering the temple of Apollo. I did ample research on styles of Greek apartment buildings, the types of stalls and goods sold in the Agora (ancient Greek marketplace), and received help from Ms. Hoxha for the floorplans of the temple of Apollo. Below are the progress work and final product of the alleyway, Agora, and garden.

Sketch & Lineart

Base Colors & Texture

Overlaying Objects & Elements

After uploading the map into unity, some issues appeared from overlaying objects (fountains, flower pots, and some stalls), which caused the character sprite to hover above objects that should be put in the foreground. This problem is quickly resolved by cutting the objects out and creating custom transparent-background sprites.

Step Two: Sprites

After the world is made, it's now time to populate it with characters. In this stage, there are two main characters that require an animated sprite: James and the thief he encounters at the beginning. I started my work with these two characters, creating a simple four-frame walking animation for James and a running amination for the thief. The process is slightly longer for James, as he can walk freely on the map, thus requiring a walking animation from four angles (front, back, left, right). Although slightly repetitive, this process is made a lot easier with pre-made character templates and guidelines. Below are the character sprite sheets for James and the thief.

James Walking (Front & Back)

James Walking (Left & Right)

Thief Running (Left & Right)

And of course, these sprites can be animated in the real game! Below are animated versions of the sprite sheets.

James and Thief Animated GIF

Finally, there are some miscellaneous character sprites that needed to be uploaded. Below is one that I'm particularly proud of.

Just a Pigeon

Of course, there are many other interactive characters and items on the map, but it's for you to discover them when playing the game.

Step Three: User Interface (UI) System

The UI system is a very important part of creating a cohesive visual aesthetic in a game. This is a relatively easy job, so in order to make the system look customized, I took inspiration from Ms. Hoxha's research, more specifically the many architectural column styles of ancient Greek. Below are the UI system designs, incorporating Doric and Ionic columns.

UI Design

Step Four: Character Icons

My final task of the week is to create character icons. Although sprites are useful at demonstrating character design and movement, it's not very useful when coming to expressing mood and emotions. Icons are specifically created to cover the sprites' shortcomings. Of the three main characters in this stage (James, the thief, and the guard) and various people in the Agora, I created 18 character icons in total, making sure to cover all the facial expressions needed for storytelling. Although I need to illustrate a high number of icons in a short period of time, basic face models and templates helped to shorten this process significantly. Below are all the character icons for the thief.

Thief (Basic Template)

Thief (Maniacal)

Thief (Happy)

Thief (Default)

All other major characters also have multiple custom-made icons. Explore them in-game along with the witty dialogue written by Jasmine & Sam!

Bonus: Battle Screens!

As game development requires me to create a lot of assets in a short period of time, I cannot mass-produce detailed or stylized illustrations other than the maps. However, the battle screens gave me an opportunity to stretch my artistic muscles. With only one frame needed for these sprites, I can pose the characters in any interesting positions or compositions I prefer. I truly had a lot of fun creating these battle screens, and I hope their over-the-top dramatics can give you a laugh too. Below is the "Fight!" screen between James and the thief.

Who Will Win...?

Comments

  1. Rachel MullenDecember 11, 2022 at 3:12 AM

    Angela, wow, you have done so much in such a short period of time! You are an amazing artist. It's wonderful that your mentor, Ms. Hoxha, has been able to give you advice about how to make your artwork cohesive and consistent with the time period in which your game takes place. I love all of the different facial expressions that the Thief has to show different reactions. There are so many little details that your team has to consider (such as character facial expressions), and I am impressed how well your video game is coming together. Keep up the amazing work! -Mrs. Mullen

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Make a Game: Research, Interactions, & Animations

 After finishing the first stage of the scene (the alleyway, agora, and garden), it's now time to move on to an even bigger part - tackling the temple of Apollo and its many mysteries. An Iteration of the Temple of Apollo, Assassin's Creed Step One: Research As the artistic director of our project, my main concern is to restore the design of the temple as close to its original as possible. This is an educational game, after all, and an accurate visual is key to introducing our players to authentic ancient Greek architecture. Thus, to ensure the validity of my preliminary research, I requested help from our mentor. Ms. Hoxha provided a brief document that's rich in information about the structure and aesthetics of Apollo's temple at the "navel of the world," Delphi, which gave me important information on its scale, construction materials, layout, and color palette. The floor plans included especially helped to spatially orient myself, finding essential landmark...
Post a Comment
Read more

How to Make a Game: The Mastermind Behind Stories

As you can probably see from my last two blogs, our team has been working on the first one-third of the game very intensively during the first two-and-a-half weeks. If fact, we're almost done with the first scene, now just tidying up some loose ends and finding problems to fix. But here's a huge elephant in the room, so let's just address it directly. ... So, yes, we don't have time to finish the entire project during the allotted three-week period. There are simply too many mechanics to code, too many assets to illustrate, and too many storylines to write in such a short time. However, luckily, we found a compromise - we will sacrifice quantity for quality, focusing to make the first stage of our game the best we can make it, and then creating storyboards for the rest. What is a storyboard, you may ask? Well, a storyboard usually looks like this: It's essentially just a series of frames indicating character action, setting, and the plot that happens for a particula...
Post a Comment
Read more

Culture and Art and... Food?

It's not the first time I've been to the West Side Market. I was here three years ago on a field trip, and the experience was admittedly hazy at best. I only remembered the noises of downtown Cleveland, chilly autumn winds, and well-worn beige brick walls. I had a general impression of the place, but it never left a lasting imprint on my memory. This time, the visit is different. Out of the three locations we've chosen, I'm looking forward to the West Side Market the least. I wasn't totally convinced by the idea that cuisines can also be a valid part of our project about art and architecture, but out of pure curiosity, I decided to give it a try. My first thought when entering one of the many side doors is that, wow, this place is smaller than I expected . But after walking between the tightly packed stalls for several minutes, I realized that the building is large enough to be divided into three sections, and it was only the busy visuals that obscured its real size...
Post a Comment
Read more