The Making Behind StarChild ☆

MACY JOLIE MERCADO

2022-2023

BOOK CONTENTS

1. Introduction to Video Game Art

2. Planning Stage + Concept Art

3. Character Art + In-Game Model

4. Environment Art + Backgrounds

5. Game Animation + Character Rigs

6. Item Art, Special FX + Interface

7. Game Trailer + Final Thoughts

INTRODUCTION TO INTRODUCTION TO VIDEO GAME ART ★ VIDEO GAME ART ★

WhyisVideoGameArtImportant?

2D video game art has its own charming pressence to it, from the beautiful hand-drawn scratched style of OMORI, the 1920s rubber-hose style of CUPHEAD or the intricate illustration style sprites of ARKNIGHTS. Video game art ranges from characters, environment, user interface, special effects, animation, and even sound. [2]

Clarity signals key parts to the player, things like location, health, enemies and objectives.

Satisfaction offers responsive feedback to the player, making actions like movement and achievement feel fulfilling.

Its main role is to provide clarity, satisfaction and style into a game. 1. 2. 3.

Art style, colour, atmosphere and more all contribute to the tone and individuality of a game, making its appearance both memorable and recognizable. [2]

The most common way to establish clarity is through a visual hierarchy, where different factors can come together to create contrast. Through shape, colour, saturation, size, layout, position and more, contrast helps guide the eyes to where the creator wants players to look. [2]

With size contrast, stronger enemies are commonly depicted as larger, as seen in SUPER MARIO BROS. This is helpful as size is an immediate and universal indicator of what may be more or less dangerous.

Detail can also be pulled or pushed to create focal points, like keeping simple background elements to frame a detailed player model, or detailing items to show that they’re obtainable.

Here, we see an example of colour contrast. The first thing we notice about this image is the person with a big backpack Everyone else blends into each other as they’re all cool-coloured , but the focus stands out because they are warm-coloured.

Artist : Avogado6

(Super Mario Bros 3)

PLANNING STAGE PLANNING STAGE + CONCEPT ART ★ + CONCEPT ART ★

WhatisConceptArt?

As an early phase in the development of a game, the main role of creating concept art is to solve initial problems surrounding how things will look and interact. Various different styles of gameplay will result in different constraints while designing, like the differences between stories that take place in the future and stories that take place in the past. [3]

EX. The region here, inspired by Chinese culture, is reflected in its architecture (Genshin Impact)

1. 2. 3

Understand the problem: Why are you drawing this and how can you improve on it? If it’s a weapon meant to show a character’s strength, how can that be emphasized?

Set your constraints: This can tie in with story lore, style, location, etc. Set limits to the things you’re creating concepts for, and keep a clear, focused idea of what you want.

Do your research: How do items or creatures similar to these move and interact in real life? [3]

Research

Concept artists conduct their own research all the time, from collecting image references, visiting different environments in person and learning about how real world things work. All of this can help you capture something’s likeness and main attributes, as understanding something’s functional purpose makes manipulating it creatively easier. [3]

Concepts should be drawn fast and loose, valuing quantity over quality during this experimental stage so that individual parts and pieces can be picked out. This is called “Drawing for Ideation”, when you’re just trying to get a general idea out into the world. “Draw as if any component could change majorly” is a good sentiment to stick by during this brainstorming process. [3]

”Closing Doors” is a method commonly used, where with each pass of ideas, you close the doors on ideas that didn’t work, and expand on the ones that did This makes sure that each subsequent round of ideas becomes closer to what actually works. [3]

Concepts by Dollightful

Concept Work by Knight Zhang for a game pitch called “Wrath of Dogs”

StarChild’sConceptArtStage

Effective mood boards are good at showing your ideas to a team of collaborators. They also provide a general idea of the direction that you want to go towards, and act as early inspiration through style and colour. When working with a team, your mood board should be narrow and direct to avoid future confusion or misunderstandings. Otherwise, a broad range of ideas and concepts is helpful personally when you’re unsure of a theme.

IDEAS

★ Pinterest is a really great way to compile photos and different aesthetics to create a vision for your art. Writing is also a good way to process ideas Some of my personal notes were :

。Astronaut

。City

。Dreams

。Space

。Candy

。Sugar

。Glass

With character design, you want to have a general idea of the character’s personality and struggles. This helps when you need to balance aesthetics and story elements in their design. How can you convey the type of person they are through their outward appearance? What hints can you include to showcase their interests?

。Crystal

。Clouds

。Skies

。Blues

。Butterflies

。Water

I began drafting and sketching out some concept designs for my game’s protagonist, as well as experimented with a few potential colour schemes. I went into this with an astronaut/general space theme in mind and worked from there to expand it. Below is a great source on costuming!

“Level Up Your Character Design With Knight Zhang” By Proko

CHARACTER ART + CHARACTER ART +

IN-GAME MODEL ★ IN-GAME MODEL ★

WhatMakesGoodCharacterArt?

Often the faces of many video game franchises, compelling and recognizable character designs are crucial to a game’s success and popularity. It’s important for character designs to be simplified down as many will either appear smaller on a screen, only seen from a birds eye view, moving around constantly, etc. The point being that you should extract and amplify the most iconic and important elements from character concepts, as this ensures that they’re recognizable in any form. [4]

A B

Here, the characters are all distinct and unique to each other despite having the same art style. In terms of their iconic elements, A’s would be his gradient hairstyle and beret, B’s would be her flower pupils and decorated hat, C’s would also be her split fringe and long braid, and D’a would be her choppy hair and light two-toned eyes.

Official Chibi Art (1:1 Head to Body Proportions) of Characters from Genshin Impact

Aestheticsvs.Function

Characters should balance visual elements with practical ones that can help tell their story. Another main difference between character designing for a video game rather than a comic, cartoon or other animation is that with character models, we’re able to pile on a lot more detail without worrying about recreating it time and time again in the future.

STORY

With this character design, we see them in a conductor uniform with an item akin to a telescope Along with the various star decals in their outfit, like their hat and sleeves, we can interpret a night/astrology theme.

(Cookie Run Kingdom)

Surprise! The character is a train conductor who travels through dream-like night skies on a magical train. Their design alone is able to convey the character’s place/role in their world, while still being engaging and unique

In 3D video games, character models have to be sculpted, rendered, painted, and rigged for animation. However, it’s much simpler when it comes to 2D art as it heavily relies on transparent still images and layers. Character sprites are common in visual-novel styled games like DANGANRONPA, where each character has a set of pictures for emoting, like talking, laughing, fear, confusion, etc.

(The Danganronpa Franchise)

AnatomyStudies+Applications

Learning basic anatomy is important to any kind of art, as learning the rules makes manipulating and breaking them easier. Animal studies could be useful not only to designing real world creatures, but fantastical ones as well. Because you’re aware of how similar bodied animals function, you’re able to transfer that information over to something that doesn’t exist yet. [4]

Hand Studies By Qinni Han, Better Known as QinniArt

COMBINING

An example of this is how the creators behind “Coco” decided to Frankenstein a jaguar, eagle, ram horns and other animal parts to create Pepita the chimaera; a fantastical beast that still seems believable in a real world setting.

Disney’s Concept Art of Pepita

StarChild’sCharacterArt

Referencing my concepts and mood boards for the most part, I worked towards creating the actual player model. I decided to keep them helmetless in the end for a more distinct character design as the blank astronaut face was more ambiguous/vague, and made the colours brighter to match some candy-themed item art I planned to include in the future.

SKETCH LINES COLOUR SHADING

I also made sure that different parts of the model were separated onto different layers, like the head being separate from the body, to make animation easier later on. The main kind of animation I'll be utilising is known as skeletal animation, where instead of piecing together drawn pictures frame by frame, a model is “rigged” like a skeleton and then moved through keyframing.

CharacterModelRecolours

I also created 4 additional recolours of my original model through hueshifting and blending modes, giving me 5 total versions to work with in my game trailer. I also made sure they matched/paralleled the starcandy item art I planned to make later on.

ENVIRONMENT ART ENVIRONMENT ART + BACKGROUNDS ★ + BACKGROUNDS ★

WhyareBackgroundsImportant?

Video game backgrounds establish the settings and places our main character will explore, both the familiar and unfamiliar. From modern city skylines to flowery green meadows to spooky dark swamplands, background art can tell a story all on its own. Complementary to character and item art as well, can work together to create an eye-catching visual. [5]

1. Choose a theme/setting idea.

2. Establish any areas of danger or advantage to the player.

a. Ex. “If the player goes here, this will happen”

3. Work out an actual concept of how everything will look.

4. Create and finalize your finished, polished background.

5. Add any additional lighting, effects or foreground elements. [5]

Background Art by Willem Rosenthal for the Mobile Game Pakka Pets

CharacterModelRecolours

Certain background art may act as an actual in-game mechanic. If you want enemies to spawn out of the sky, how can you signal that hazard to the player? Something like an ominous portal floating above would work both aesthetically and functionally in this case. [5]

Here in Hollow Knight, it’s background and foreground elements are clearly defined.

Depending on the game, different objects could serve as the same gameplay mechanic. Walls, buildings, and cliff sides can all act as player boundaries, but choosing between the three relies on the game’s style and setting. Similarly to character designs, backgrounds should convey a story to the player. Both major and minor details can reveal things such as climat though

BACK OF THE CAVE

Art from the Indie Game Unpacking, a Story Told Purely Through Background and Items

ScalingBackgroundstoCharacters

Scaling is also an important detail to look out for, as it’s an easy way to mess up an environment and interfere with the believability of a space. Common cues are things like chairs, doors and other items that the character will constantly interact with. Always work on backgrounds with a character to scale as reference. [5]

(Toca Life : City)

LOWONTIME?

Re-using or re-colouring previous item artwork such as crates, vehicles, shrubbery, etc. is also a great way to fill up a space in a more efficient and time saving way. There’s no shame in helpful shortcuts.

“How To Make 2D Game Art (My Simple Process)“ By Blackthornprod

(Love Nikki-Dress UP Queen)

GAME ANIMATION + GAME ANIMATION +

CHARACTER RIGS ★ CHARACTER RIGS ★

HowDoesAnimationHelpinVideoGames?

Animation can add so much to the atmosphere of a game, whether it’s a simple sprite change, dynamic movement, dramatic story cutscene or even the idle animation that occurs when a character is left alone for a while. Little bits of animation are sprinkled into every game to create an engaging and immersive experience.

The Art of Cuphead Book

The 3 Main Goals for Game Animation are,

1 Clearly display action : For example, an enemy ' s anticipation to strike so that the player knows a) what’s coming, and b) to avoid them.

2 Have believable motion + physics : How can you show that an object is heavy as a boulder or light as a feather? How does it interact with the world?

3 Inject personality into a character : Show how they’re unique and distinct from others by having different kinds of walks, reactions or idle stances. [7]

The12PrinciplesofAnimation

Used by Disney animators since the 1930s and outlined by Ollie Johnston and Frank Thomas in the 1981 book “The Illusion of Life: Disney Animation”, “The 12 Principles of Animation” serves as a kind of guide to creating fluid and eyecatching animations with the illusion of gravity, weight and flexibility. [1]

1. Squash and stretch

2. Anticipation

3. Staging

4. Straight-ahead action and pose-to-pose

5. Follow through and overlapping action

6. Slow in and slow out

7. Arc

8. Secondary action

9. Timing

10. Exaggeration

11. Solid drawing

12. Appeal [10]

“How To Start Animating Your Characters : 4 Principles“ By BaM Animation

Disney’s 1928 Short Film “Steamboat Willie”

StarChild’sCharacterAnimation

The blinking animation and leg movements were all done through frameby-frame animation, with the frame count being purposely low to mimic simple-styled pixel games. With the 12 Principles in mind, I also made sure to stretch and squash the eyes to give it a bouncier motion to it.

SAVING

After finishing the animations, they were individually saved as their own loop-able videos with transparent backgrounds. This makes it easy to layer over the still frames of their body.

SkeletalAnimation+CharacterRigging

The main kind of animation I utilized is known as skeletal animation or 2D rigging, where instead of drawing individual pictures frame-by-frame to create an animation, a model is completely drawn with certain things like their hair, eyes, head, etc. separated onto different layers [6] This way, they can be “rigged” like a skeleton and moved through digital joints and key frames. With skeletal animation, you can create a variety of different motions and actions with just a single character model, and this practice is seen professionally in video games with 3D characters.

Anchor points, or points of rotation, act as joints in animating each part of your model. They’re typically placed in places like the elbows, wrists, neck, knees, etc. Parenting layers are when two layers, a child and parent, are linked in a way where the child layer moves connected with the parent layer, but is still able to move independently of itself.

“Introducing A New Model With A High Range Of Motion!“ By Kazuya Seto

Illustration by Justine Cunha, Rigging by Nicolas Dufresne

ITEM ART, SPECIAL ITEM ART, SPECIAL FX + INTERFACE ★ FX + INTERFACE ★

UserInterfacevs.UserExperience

UI is short for user interface, and focuses mainly on the visual design and interface for a game, such as what the menu, inventory and achievements windows will look like. UX is short for user experience, and flow charts are often used to show how different options can be accessed (ex. going from menu > sound > music files). [9]

In Arknights, a Bar Alone is Able to Show What Character is “Dead”, Their Cost to Deploy, a Visual Icon and Their Type/Position in Battle

Both want to be as clear as possible to give the player an easy and intuitive navigation experience. It’s important for visual design to show complex information in a simple way, and the design itself should stay consistent throughout, keeping things like font, icons, colours, animations and shapes in mind. [9]

UI motion graphics, or MoGraphs, typically have 5 main goals :

1. Responsiveness - Have immediate and clear responses to player action.

2 Intention - The Motion should lead the eye to whatever it wants to highlight

3. Awareness - Elements should respond to movement (ex. a menu bar moving with the cursor).

4. Consistency - Establish familiar behaviour by creating similar responses to similar issues.

5. Physical Intuition - They should fit the game’s style, theme and keep its story in mind. [9]

SpecialEffects+VFX

Special effects can be used to show achievement, mistakes, danger and more in a quick and innate way. VFX is short for visual effects; things like healing, damage, and attacks are often represented with different shape-based effects (think plus signs for healing and minus signs for damage). It’s also common to see different characters in fighting games have different coloured effects to clearly show what character is currently dealing damage. [8]

SpellAttack

”Oh, a star! It seems like she’s aiming, so that’s probably where it’ll deal damage”

CanonBlast

”That seems like a lot of fire and energy. It’ll probably result in a direct blast!”

AoEDamage

”That seems ominously powerful I wonder if the attack is gonna span over a large area”

Official Character Attack Animation’s From Arknights

Here, we can see that the item art all falls into the same general style, making they all look cohesive when placed together This helps as it makes the items feel like they belong in the world of the video game.

FinishingUpTheArtofStarChild

Most, if not all, video games have inventory items for the character to either find, unlock, or obtain for story purposes, crafting, levelling-up, etc.

ITEMART

For StarChild, I wanted the main gameplay mechanic to be collecting star candies to complete levels and unlock new areas, so I made 5 different colours variants of the StarCandy item. Blue was the original, and the others were created just by hue-shifting and messing around with colour blending modes. I also created an item called StarDust, making it rainbow in colour to show that it's crafted with all the different variants of StarCandy.

GAMELOGO

For the logo, I knew that I wanted it to include a pixel-based font, have star emblems and keep the characters blue colour scheme. I first started with the two fonts “Candice” and “Game Over” and messed around until I had a word composition that I was happy with. I then added flat colour, gradients, a diamond patterned overly, drop shadow, highlights, two outlines and some stars.

InterfaceLayouts+Planning

For the game interface and main “screens” I planned them all out in Canva, and used shapes to block out where I wanted things and how I wanted the whole image to be composed. This also helped with editing the video game trailer later on, as everything was put into place already and the only thing left to do was some animation and video effects.

GAME TRAILER + GAME TRAILER + FINAL THOUGHTS ★ FINAL THOUGHTS ★

We’veReachedtheEnd!

“What happens when dreams become a reality that you’re unable to wake up from? Follow our character through time and space as they navigate the life of a world never once seen before” - StarChild Game Trailer Blurb.

Sounds fun, doesn’t it? Using all the tips and information in this guide book of sorts, I hope that you’ll be able to create a world of your own to explore sometimes, as well. Good luck ! ☆

REFERENCES

1. Coron, Tammy. “Understand Disney's 12 Principles of Animation.” Creative Bloq, Creative Bloq, 9 Dec. 2022, www.creativebloq.com/advice/understand-the-12-principles-ofanimation.

2. Riot Games. “So You Wanna Make Games??” Episode 1: Intro to Game Art.” YouTube, 13 Dec. 2018, youtu.be/RqRoXLLwJ8g.

3. Riot Games. “So You Wanna Make Games??” Episode 2: Concept Art.” YouTube, 13 Dec. 2018, youtu.be/FqX-UMVTLHI.

4. Riot Games. “So You Wanna Make Games??” Episode 3: Character Art.” YouTube, 13 Dec. 2018, youtu.be/PfpE5dNTWeI.

5. Riot Games. “So You Wanna Make Games??” Episode 4: Environment Art.” YouTube, 13 Dec. 2018, youtu.be/37LVhP15zGw.

6. Riot Games. “So You Wanna Make Games??” Episode 5: Technical Art.” YouTube, 13 Dec. 2018, youtu.be/kr7XYXMM7-U.

7. Riot Games. “So You Wanna Make Games??: Episode 6: Character Animation.” YouTube, 13 Dec. 2018, youtu.be/VmNUAX2V8JQ.

8. Riot Games. “So You Wanna Make Games??: Episode 7: Game VFX.” YouTube, 13 Dec. 2018, youtu.be/3QKK2o5rWSQ.

9. Riot Games. “So You Wanna Make Games??: Episode 9: User Interface Design.” YouTube, 13 Dec. 2018, youtu.be/sc3h5JXtIzw.

10. “The Principles of Animation.” The Illusion of Life: Disney Animation, by Ollie Johnston and Frank Thomas, Disney Editions, 1981, pp. 46–66.

IMAGE SOURCES

Avogado6. “上京. ” Twitter, 17 Jan. 2020, twitter com/avogado6/status/1218159422351925248

BaM Animation. “How to Start Animating Your Characters : 4 Principles.” YouTube, 25 Nov. 2021, youtu.be/ynBENQJBQbE.

Blackthornprod “How to Make 2D Game Art (My Simple Process) ” YouTube, 20 Apr. 2021, youtu.be/QE1D5tF7u3A.

Disney. “Pepita Concept Art.” Disney Wiki, disney.fandom.com/wiki/Pepita/Gallery?file=Pepita concept.png.

Disney. “Steamboat Willie.” IMDb, 1 Jan. 1929, www.imdb.com/title/tt0019422/.

Dollightful. “Fire Dragon: Pass 2.” Twitter, 12 June 2020, twitter com/dollightfully/status/1271447598029606912?lang=en

Dufresne, Nicolas, and Justine Cunha. “Behind the Scenes: From Illustration to Animation!” Duduf, duduf.com/behind-the-scenes-animate-a-characterillustration/.

“Our Plucky Heroes.” The Art of Cuphead, by Eli Cymet et al., Dark Horse Books, 2020, pp. 13.

QinniArt “New Collection of Hands ” Twitter, 22 Dec 2017, twitter.com/QinniArt/status/944328699209383936?lang=en.

Seto, Kazuya. “【Live2D _ 2021】⾼可動域な新モデルをご紹介!” YouTube, 15 Nov. 2021, youtu.be/jSDvZucqmco.

Zhang, Knight. “Level Up Your Character Design With Knight Zhang.” YouTube, Proko, 21 Jan. 2021, youtu.be/CjiKlLE3NuI.

Zhang, Knight “Wrath of Dogs ” Knight Zhang, www knightzhang net/wrath-ofdogs.

Thank You For Reading

What happens when dreams become a reality that you’re unable to wake up from? Follow our character through time and space as they navigate the life of a world never once seen before