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

Art and Light: The Cleveland Apollo

We stepped into the Cleveland Museum of Art on Tuesday morning, wishing to find our treasure. From the previous day's brainstorming sessions during walks and lunch, we've decided that focusing on one artifact in the museum is the best way to explore the object's history and represent its story. We had some general ideas - the object would preferably be from ancient civilizations - but other than that, we hoped to go on impromptu adventures and see where history leads us. We entered through the East wing of the Hubbell & Benes building, and under the brilliant sunlight diffracted through the glass ceiling, we saw it: Apollo.  He was a bronze statue, unfortunately missing both arms, standing atop a square pedestal and leaning towards an invisible tree. Apollo Sauroktonos ,  Apollo the lizard-slayer , they used to call him, from his mythological root and battle of wits against a lizard. There are many Hellenistic copies of this story, one of the more famous ones preserved ...
1 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

Art, Architecture, and History

I've always been drawn to the concept of creating . The painter builds their world upon a canvas,  letting their imagination run wild. We break the sky as the limit, reaching into the stars. I imagine that creating  is something akin to a magic performance, the magician skillfully deceiving the audience into thinking there really are no cards up his sleeve, except there are no rabbits jumping out of top hats, just the visceral humanity  tainting the canvas. And thus, needless to say, I'm in love with the arts. With my endless passion comes curiosity. This hunger to learn and explore initially found its place in self-reflection and improvement: I will obsess over my own pieces, critiquing them until the pieces have no shred of validity left in my eye. I drove myself to achieve perfection, trying vainly to grasp the ultimate beauty, form, and skill. That, I suppose, is what most artists go through; a period of self-deprecation, times when I reach for the fruit hanging too f...
Post a Comment
Read more