TUTORIAL
HKU Games & Interaction 4 module UPD tutorial by Rafael Lie Kwie
How to bring inanimate objects to life in videogames
------------------------------------------- #1. introduction ----------------------------------------------
1.1 preface
this tutorial is for pixel art animators that are, or will be working on a game project that includes inanimate objects which need to be designed and animated to appear as lively as possible.
Inanimate objects are things that are non-living. Chairs, baseballs, sofa cushions, books and lamps. Though these things are not alive, we can still make them appear alive.
In This tutorial you will learn how to achieve that by applying certain elements/features to our object's character design. You will get tips and guidelines on how to apply them. You can also follow and go through my workflow a long with examples. much of the subjects covered in this tutorial will also apply to other mediums and is therefore also suited for non-pixel artist and animators. in that case you can ignore some of the pixel-only related subjects.
1.2 You will learn about
* Core Elements that will bring your character object alive
and how to apply them to your design and game animations
* Important animation principle Stretch and Squash
* A step by step workflow
1.3 You will not learn about
* how to use a pixel art software
* the fundamentals of Pixel art
1.4 requirements
* Pixel art software
you need to be familiar with a pixel art animation software.
I recommend -> Pyxel edit ($9.00) or -> asprite ($19.99). Pyxel
edit is a better software for animations because it allows
you to work with all frames stacked or next to each other
at the same time. Asprite works with stacked frames but has
better edit-functions and effects.
* You need to be familiar with the basic fundamentals of pixel
art. Thins like jaggies and doubles. You need a solid character
design to work and animate with.
* you need to be familiar with the basic animation principles.
you can learn more about the 12 principles of animation -> here.
------------------------------------------------- #2 INDEX ---------------------------------------------------
#1 introduction
1.1 preface
1.2 You will learn about
1.3 You will not learn about
1.4 Requirements
#2 index
#3 core elements & how to Implement
3.1 What makes things alive?
3.2 Impersonation and Personality
3.3 Anatomy, structure and Function
3.4 Senses and facial features
3.5 Consciousness & Instincts
3.6 Vulnerability, mortality & emotional expressions
3.7 quiz
#4 An Important animation principle
4.1 Stretch and squash
#5 Workflow
step 1 define your project
step 2 list your animations
step 3 list possible objects
step 4 combine
step 5 Implement into design & animation
----------------------------- #3 Core Elements & how to implement -------------------------------
Chapter INDEX - core elements & how to Implement
3.1 What makes things alive?
3.2 Impersonation, Personality and function
3.3 Anatomy and structure
3.4 Senses and facial features
3.5 Consciousness & Instincts
3.6 Vulnerability, mortality & emotional expressions
3.7 Quiz
3.1 What makes things alive?
Living things are considered persons, animals, insects or plants which are living and not dead. Being alive also means having a soul. It has the capacity for growth, reproduction, functional and moving activity and continual change preceding death.
Generally speaking, living things have a few similar aspects that make up for their liveliness. I divided and categorized these aspects into different chapters to make things more clear. These chapters will help you to bring inanimate objects to life. The chapters serve as a guide and In each category there are main keypoints you should consider applying to your game character's design and animations that will help to make your object appear more lively.
3.2 Impersonation, Personality and Function
The object is the embodiment of a soul which has it's own personality. The personality of the character-object will affect the way it will compose & express itself which are lead by a physical, visual or auditory input.
The personality does not necessarily improve the lifelines of the character-object but is simply a responding reaction towards it's feeling and senses which are led by a physical, visual or auditory input.
Giving the Object an impersonation (a soul) of a familiar living thing will help to convince the audience they are looking at a living thing that they can relate to and emphasize for. Make sure to implement that into your design and animations. Study the life form the object has to resemble and implement it's traits and behavior into your designs and animations.
The plant is mimicking a snake
Add features to your design in favor of animating and impersonation the living thing you are mimicking. Features such as different attributes like limbs, wings, Sharp teeth, insect's antenna's or the way it eats or behaves or any other characteristic that is an indication of the life form it is mimicking. This will contribute to the illusion of life and will convince the audience that they are dealing with that specific life form. It will also prevent being uncanny (valley) as it is something they can already relate with.
use features that are within the subject's matter. Be creative and try to use the objects features to serve as parts of the life form you are mimicking.
In this example the box object is mimicking a frog
It's using features within the subjects matter
such as The lit and handle.
You can also use the functionality of the object to be the leading factor of it's personality. For example, let's say we have a broom character object. The function of the broom is to clean the floor. The personality could be clean and tidy together with a neat and orderly appearance as well as habits, Or the personality of broom could be wild, dirty and with bristles all over the place. Either personalities has something in common with the functionality of the object the character is presenting.
I prefer to use creative design instead of just adding faces and limbs onto the object. or at least use the features within the subject's matter. IF it's absolutely necessary that it needs those limbs consider picking a different object.
We can implement the functionality and personality traits into our game animations such as a cleaning/sweeping motion for an attack, way of moving or idling.
Example of using the swiping functionality of a broom
Summary Impersonation and personality
* mimic a life form and Use it for design and animation purposes.
* combine the objects functionality and personality into Design and animation.
3.3 Anatomy and structure
Living things have a body which have attributes such as limbs in order to perform moving and functional activity. The body is structured in a way to survive and has functional organs. In our case the body is the object itself and must be equipped with features that resemble human, animal or insect-like nature. We can apply those features into our design and animations.
We can make our character breath in order to imply Functional organs. Adding breathing to your animations is one of The most common ways to resemble life and functional organs (lungs). You can easily apply this onto your idles and hurt stages.
(Examples of breathing)
You don't necessarily have to increase and decrease the chest's volume to make it appear to breath. One pixel can make a huge difference in pixel art and could make the breathing too overexaggerated. making the character go up and down could easily imply that they are breathing. Use more or less frames based on the type and pace of game.
The object should be structured like a living thing such as a Human, animal or insect. The life form it resembles should be clearly visible in design or animation. This will not confuse the player with something it is not familiar with or cannot refer to.
We can add limbs onto our object's character design so it is capable to perform moving and functional activities. We need those attributes in order to create our game animations. The object does not always need limbs as it can also move and function like a snake or a snail or hop to move around.
We should use the object's features to serve as limbs and if we add limbs, we should stay within the subject's matter. This takes imagination and creativity, while it is easy to just slap a pair of legs and arms onto your character.
(use the objects features to function as wings instead of adding actual wings)
The smaller the tile and character size, the more difficult it becomes to design and animate. When you are working with small tile sizes like 8x8 you want to work with silhouettes and test the animation before rendering.
Summary Anatomy and structure
* Body structure that resemblance human, animal or insect-like nature.
* Use or add features which makes moving and functional activity
possible.
* Breathing is an easy way to imply functional organs into
our animations.
* use the objects features to function as limbs, Add limbs as a
last resort.
3.4 Senses and Facial features
All living things have the ability to sense and will respond to stimuli in their environment. Things like temperature, light, gravity, physical, auditory or visual inputs. The Senses are important for survival because it allows living things to detect and respond to events in the world around them and It also helps them to find food. There are five basic human senses: sight, sound, smell, taste and touch.
Add the necessary sensory organs: eyes, ears, nose, mouth or insect sensory features like antennae's to your character object. This will depend on the needs of your game character and which game animations it has to perform.
Similar to adding limbs, Avoid just adding full faces to the object and rather be creative and make use of the parts and features of the subject's matter into the design of the object.
Taking a closer look at the frog object
The lit functions as a mouth,
The handle functions as a tongue
Summary Senses and Facial features
* Add sensory organs: eyes, ears, nose, mouth or insect sensory
features.
* Combine the sensory organs with features of the subjects matter.
3.5 Consciousness & Instincts
The object character should be moving independently and be aware of themselves, their environment and the player character. It has to notice them, have appropriate reflexes, reactions and behavior towards it's surroundings.
These inputs will affect the feelings and emotion of the object character and The ways the character object composes and responds towards this depends on the personality of the character. Being reactive makes makes the character object appear less static and more lively.
We can achieve this by adding reactive statuses in our game. These animations react to certain inputs. a couple of examples are:
-
Standing still for a long time will execute a waiting idle(Alerted, reponse to afk, response to getting hit).
-
When getting to close to this object it will execute a different idle stance.
-
Use eye contact.
What we are trying to do is making the character object to notice you and react to it's environment. These things will help increase the game world's immersion, it suggest that the objects have some sort of intelligence, instinctive reflexes and are able to actively process specific information in the environment.
Summary Consciousness & Instincts
* add Reactive animation statuses towards player and environment
"Make them notice you"
* Use eye contact
3.6 Vulnerability, Mortality & Emotional Expressions
The character object is vulnerable and has feelings in a social, economic, environmental physical, visual and auditory way and can hurt. You can indicate their vulnerability by adding suggestive elements in your design and animations. We can design characters with Clearly visible flaws and weak spots that can help the player defeat it.
(Example of A weak spot)
The glowing orb indicates a vulnerability"
What we are trying to achieve is to make The object appear like if it's able to have feelings, And Just like other living things it can get hurt, sick and tired. We can use different statuses animations to our character object. For examples, poisoned status, stunned status or (stages of) being hurt.
Example of poisoned status and hurt/damaged status
It is important to indicate the vulnerability of the object. IT is a clear sign that it has feelings and this will make it appear alive. It can also improve the user experience as vulnerabilities can indicate ways to defeat the object and it gives away visual queues when a player damages the object and reaches a certain threshold. This is especially useful in games that does not show any health bars to the enemies. THe object can break and has hurt stages when below a certain health threshold and gives the player interactive input.
Example of a kettle object with multiple hurt stages
Summary Vulnerability, Mortality & Emotional Expressions
* Add visual weak spots
* Use status effects
* Use Hurt stages
3.7 Quiz Core ELements
A quiz is an effective way to test and measure your knowledge and understanding about a topic. Answer multiple-choice questions and get detailed feedback on the previous chapter which was about the core elements that bring objects to life. The quiz takes about 5 to 10 minutes to complete.
---------------------------- #4. AN Important animation principle -------------------------------
4.1 Stretch and Squash
I will not go into elaborate details about this principle but you should use it to create the illusion of mass, volume and texture. This will give your character a more convincing appearance and help to make it feel alive as the substance of the object will be very clear.
The more exaggerated you use stretch and squash the more gooey and flexible it becomes. The less you use the more it solid and sturdy. Slightly use it for solid and sturdy materials. Stretch and squash are important to use in the anticipation frames. These are important visual queue's for the player to anticipate on and make for a better readability.
Summary An Important animation principle
* Use Stretch and squash it to imply material, mass and volume
----------------------------------------------- #5 Workflow ------------------------------------------------
#5 Workflow
step 1 define your project
step 2 list your animations
step 3 list possible objects
step 4 combine
step 5 Implement into design & animation
-------------------------------------------------------------------------------------------------------------------
step 1 define your project
Getting a clear overview of what your game is about will help you with your selection. It's important to select objects that fit in your game and is able to perform your game animations.
1 What kind of genre and theme does your game have?
2 What is the perspective of the game (top-down or sideview)?
3 what size are your tiles and character (8x8, 16x16, 32x32)?
Example
1 What kind of genre and theme does your game have?
Metroidvania, Sci-fi
2 What is the perspective of the game (top-down or sideview)?
Platformer side-view
3 what size are your tiles and character (8x8, 16x16, 32x32)?
32x32
-------------------------------------------------------------------------------------------------------------------
step 2 list your animations
Define the function of your character object and Create a list of animations required for your game.
Example
My animation list for NPC character object:
The function of my objects is to scan the area and surroundings for enemies. It attacks enemies from a distance when they are nearby and detected.
List of animations it needs to perform:
- Idle scanning area
- Idle status alerted
- move (while scanning) animation
- Attack animation
- Hurt animation
- Death animation
-------------------------------------------------------------------------------------------------------------------
step 3 list possible objects
Create a list of possible objects that fit within your game. This depend on your genre, theme and scene.
Example
My list of possible objects based on my genre and theme:
- Computers
- Pipes
- Barrels
- Boxes
- Switches or handles
- Pots
- Servers
- Power supplies/Devices
- Lights (lamps)
- Laser sensors
- antenna's
- radio's
- Turrets
- holographic devices
- energy source (orbs, chargers)
- Computer chips and components (motherboard)
- Cameras
- Robots and machines
- Drones
- Tech trash
-------------------------------------------------------------------------------------------------------------------
step 4 combine
imagine how the objects will be able execute your animations and Combine the objects that are most fit to perform them. Fit the most suited object to your game animation instead of forcing the game animation to fit your object. know your limitations when working with 8x8, not many objects will be able to fit your resolution.
Example
Based on the function and animations my object has to perform. The best objects that I find fit the description best are: Computers, Camera's, drones, turrets, robots and machines.
Because I have a clear view on how they will be able to execute the necessary animations. Camera's, drone's and robots already have very similar functions and features that allow them to be able to scan the area by using their visual components. I might try a combination of those to create my design.
-------------------------------------------------------------------------------------------------------------------
step 5 Implement into design & animation
Apply the core elements into your design and animation.
3.2 Impersonation, Personality and function
3.3 Anatomy and structure
3.4 Senses and facial features
3.5 Consciousness & Instincts
3.6 Vulnerability, mortality & emotional expressions
Try to use at least one feature of each core element.
Example
I'm going to go with a design that is a mix between a robot and camera. I can imagine how they might be able to perform the actions needed.
3.2 Impersonation, Personality and function
I tried to combine the object (Robot and camera) together with a spider. It will be able to move through the area on the ground, wall or ceiling and could be a perfect scanning object. The object has spiderlike attributes and features.
Trying to combine a robot, camera together with a spider
Spiders have 8 legs but these are too cluttered in this pixel size. I found that 6 legs were also too cluttered and went with 4 instead and I think it will still read as a spider.
3.3 Anatomy and structure
The structure should be similar to that of a spider. We already gave it spider-like limbs. It might be able to perform a distant (projectile) attack the same way a spider is able to shoot it's web.
I took a closer look at the anatomy of a spider and divided the body into two parts.
3.4 Senses and facial features
Spider have spider-like senses which make them have the ability to sense imminent danger. They can taste and smell and have sensory organs on their legs, as well as on their pedipalps. They usually have eight eyes: two very large front eyes to get a clear, color image and judge distance, and extra side eyes to detect when something is moving.
I think my design already has these covered. Adding 8 eyes isn't necessary for my design purpose and will make the design cluttered in this small pixel size. the laser eye already serves as it's ability to sense imminent danger and adding any extra's to emphasize this will only make the overall design cluttered.
3.5 Consciousness & Instincts
The character object scanning idle reacts to the environment.
3.6 Vulnerability, mortality & emotional expressions
The character object shows signs of vulnerability when getting hurt.
The character is hunched forward and showing signs of malfunction.
This is the end of the tutorial. I hope that it helped you in a way. Good luck bringing your game objects to life when creating your own designs and animations and Above all keep it up and be creative!