1 of 141

Game Design & �Development

Intro to Game Art

SCIENCE

PASSION�TECHNOLOGY

GAME LAB GRAZ

2 of 141

Erin List

@Scarfront

Intro to Game Art

Game Designer, 2D Artist, �Concept Artist, Character Designer

2

3 of 141

First Things First

Intro to Game Art

  • ❓ Feel free to ask questions
  • ⏳ Got at least 1 hour, but can do 2
  • 😅 First time I’m doing this
  • 🧐 Is supposed to be a tutorial
  • 🙃 Made slides as if it’s a lecture
  • 😐...also they’re not finished

3

4 of 141

About these Slides

Intro to Game Art

  • Made for presentation
  • ...but also to be useful on their own
  • Links & resources at the end

[Watch | 11 mins] So You Wanna Make Games?? | Episode 1: Intro to Game Art - Riot Games

BONUS LINKS�ON SOME SLIDES

4

5 of 141

The Role of Art in Games

1

6 of 141

What is Art in a Game?

What is Art in a Game?

Intro to Game Art - The Role of Art in Games

6

Characters, creatures, environment, objects, effects, UI, animation, cutscenes, sound, music, narrative, etc.

7 of 141

Types of Game Artists

Intro to Game Art - The Role of Art in Games

2D Artist

3D Artist

Environment Artist

Concept Artist

Character Artist

Texture Artist

UI Artist

Storyboard Artist

Marketing Artist

Pixel Artist

Technical Artist

Prop Artist

Cinematic Artist

Production Artist

VFX Artist

Sound Designer

Composer

Animator

Rigger

Creature Artist

Writer

Editor

Art Director

7

8 of 141

What is Art in a Game?

Intro to Game Art - The Role of Art in Games

  • Everything you can see and hear
  • Most often just means visuals tho
  • ...like the focus of these slides 🙃

8

9 of 141

The Role of Art in Games

Intro to Game Art - The Role of Art in Games

  • Art is more than a pretty wrapping
  • Aesthetic helps define game language
  • Art direction informs overall design
  • Can draw players into the game: screenshots, trailers, box art...

[Watch | 6 mins] Graphics vs. Aesthetics - Why High Resolution Graphics Aren’t Enough - Extra Credits

Great 10-part video series (~2 hours) about game art, by folks at Riot Games�Don’t let the face scare you :D�Little warning though for the first video at 2:55 (flashy images)

9

10 of 141

Can be broken down into 3 parts

Intro to Game Art - The Role of Art in Games

Style

Satisfaction

Clarity

Communicating gameplay�and what’s happening

Satisfying interactions and responsive feedback

Art feels cohesive and�sets an emotional tone

🧐

😀

😎

10

11 of 141

Clarity

Intro to Game Art - The Role of Art in Games

  • Communicating what’s going on
  • Making gameplay clear to players
  • Provide critical information
  • Some games have a lot going on ↘

[Watch | 26 mins] Building Games That Can Be Understood at a Glance - GDC (Zach Gage)

Into the Breach (Subset Games, 2018) ↑�Factorio (Wube Software, 2016/2020) →

11

12 of 141

Satisfaction

Intro to Game Art - The Role of Art in Games

  • Clear and responsive feedback
  • Sensations: touch, visual, auditory
  • Feeling of control in a game space
  • Aka. game feel, juice, and polish
  • At least some juice, but not too much�There’s even a paper that says so

[Watch | 5 mins] Secrets of Game Feel and Juice - Game Maker’s Toolkit�[Watch | 16 mins] Juice it or lose it - Martin Jonasson & Petri Purho�[Watch | 44 mins] The Art of Screenshake - Jan Willem Nijman

12

13 of 141

Satisfaction Examples

  • Immediate change from button press,
  • Hit pause
  • High score fanfare
  • Flowing momentum
  • Good running and jumping feel
  • Screenshake
  • Visual effects & lights
  • Sound effects & music
  • Good physics
  • Tactile feedback like controller rumble

13

14 of 141

Style

Intro to Game Art - The Role of Art in Games

  • Cohesive look and feel
  • Sets an emotional tone
  • Different colors, character designs, environment, pushed proportions…
  • Style ≠ Perspective ≠ Gameplay

Fez (Polytron, 2012) ↑�Cuphead (Studio MDHR, 2017) →

[Watch | 1 hour] Developing the Art of Fortnite - GDC (Peter Ellis)�[Watch | 26 mins] The Art of Journey - GDC (Matt Nava)�[Watch | 7 mins] The Uncanny Valley - Extra Credits

14

15 of 141

Art Style Examples - Side-Scroller with 2D Art

Stick Fight: The Game�(Landfall West, 2017)

Rayman Legends�(Ubisoft, 2013)

Gris�(Nomada Studio / Devolver Digital, 2018)

15

16 of 141

Art Style Examples - Side-Scroller with 3D Art

Super Smash Bros. Ultimate�(Bandai Namco Studios, Sora Ltd. / Nintendo, 2018)

Donkey Kong Country: Tropical Freeze�(Retro Studios / Nintendo, 2014)

Inside�(Playdead, 2016)

16

17 of 141

Art Style Examples - 2D Top-Down

Hotline Miami�(Dennaton Games, Abstraction / Devolver Digital, 2012)

Enter the Gungeon�(Dodge Roll / Devolver Digital, 2016)

Swords of Ditto�(onebitbeyond / Devolver Digital, 2018)

17

18 of 141

Art Style Examples - Isometric

Hades�(Supergiant Games, 2018/2020)

Age of Empires II: Definitive Edition�(Forgotten Empires, Tantalus Media, Wicked Witch�Xbox Game Studios, 2019)

Monument Valley 2�(ustwo games, 2017)

18

19 of 141

Art Style Examples - 3D Top-Down

The Legend of Zelda: Link’s Awakening�(Grezzo / Nintendo, 2019)

League of Legends�(Riot Games, 2009-Today)

Grim Dawn�(Crate Entertainment, 2016)

19

20 of 141

Art Style Examples - Pixel Art

Owlboy�(D-Pad Studio, 2016)

Celeste�(Matt Makes Games, 2018)

Hyper Light Drifter�(Heart Machine, 2016)

Here’s a whole bunch of pixel art tutorials by Pedro Medeiros

20

21 of 141

Art Style Examples - Realistic 3D

Dark Souls III

The Witcher 3: Wild Hunt�(CD Projekt RED, 2015)

​

Control�(Remedy Entertainment / 505 Games, 2019)

21

22 of 141

Art Style Examples - 3rd Person

22

23 of 141

Art Style Examples - 1st Person

23

24 of 141

Art Style Examples - Stylized 3D

Journey�(thatgamecompany, Santa Monica Studio, 2012)

World of Warcraft�(Blizzard Entertainment, 2004-Today)

The Legend of Zelda: Breath of the Wild�(Nintendo, 2017)

24

25 of 141

Art Style Examples - 2D Art in 3D Space

Paper Mario: The Origami King�(Intelligent Systems / Nintendo, 2020)

Don’t Starve�(Klei Entertainment, 2013)

Octopath Traveler�(Square Enix, Acquire, 2018)

25

26 of 141

Art Style Examples - Dark

Darkest Dungeon�(Red Hook Studios, 2016)

Binding of Isaac�(Edmund McMillen and Florian Himsl, 2011)

Bloodborne�(FromSoftware / Sony, 2015)

26

27 of 141

Art Style Examples - Hand-Drawn

Gorogoa�(Buried Signal / Annapurna Interactive, 2013)

27

28 of 141

Art Style Examples - Minimalist

Mini Metro�(Dinosaur Polo Club, 2015)

Hidden Folks�(Adriaan de Jongh, Sylvain Tegroeg, 2017)

Thomas Was Alone�(Mike Bithell, Bithell Games, 2012)

28

29 of 141

Art Style Examples - So many more...

Apotheon�(Alientrap, 2015)

Return of the Obra Dinn�(Lucas Pope / 3909 LLC, 2018)

Minecraft�(Mojang Studios / Microsoft, 2011-Today)

29

30 of 141

Visual Hierarchy

Intro to Game Art - The Role of Art in Games

  • Most important info → easiest to see
  • Keeps things from clashing
  • If everything stands out, nothing does
  • Manipulate contrast to achieve
  • Important for clarity & accessibility

30

31 of 141

Contrast

The Role of Art in Games - Visual Hierarchy

  • By contrast = compared to another
  • All art forms use contrast
  • Similarity vs. difference
  • Creates areas of focus
  • Impacts overall feeling

[Read / Look] How to THINK when you draw CONTRAST - The Etherington Brothers

31

While there’s life, there’s contrast.

Without contrast, life would be boring.

32 of 141

Types of Contrast

The Role of Art in Games - Visual Hierarchy

….and many more

32

33 of 141

Color

The Role of Art in Games - Visual Hierarchy

Saturation

Hue

Value

Dark vs. Light

Pure Color

Intensity of Hue

[Watch | 23 mins] Understanding Color - Blender Guru�[Watch | 9 mins] Color Theory for Noobs - Flow Graphics

There’s more to it ofc,�but this should do for now!

33

34 of 141

Value & Color Contrast

The Role of Art in Games - Visual Hierarchy

  • Can highlight things like bad guys ->
  • Sets an emotional tone

SUPERHOT (SUPERHOT Team, 2016) ↑� ->

34

35 of 141

Lighting

The Role of Art in Games - Visual Hierarchy

Uncharted: The Lost Legacy (Naughty Dog, 2017) ↑� Journey (thatgamecompany, 2012) ->

  • Light & shadow
  • Spotlight, leads eye to lightest area ->
  • Lighting interacts with materials ↘
  • Key to overall mood of environment

35

36 of 141

Shapes & Size

Squares, circles, triangles, �stars, trapezoids...

36

37 of 141

Shape & Size Contrast

The Role of Art in Games - Visual Hierarchy

  • 2D = shapes, 3D = forms

Super Mario 3D World (Nintendo, 2013) ↑�The Legend of Zelda: Breath of the Wild (Nintendo, 2017) ->

[Watch | 11 mins] Size Matters - Exploring Scale in Games - eurothug4000

  • Distinct and clear silhouettes ->
  • Can highlight where to look ↘
  • Shows what’s dangerous or safe

37

38 of 141

Level of Detail

The Role of Art in Games - Visual Hierarchy

  • Careful, don’t detail everything
  • Areas of rest vs. areas of high detail
  • Helps lead the player’s eye
  • Creates depth in environment
  • Close = high detail, Away = low detail

38

39 of 141

Layout & Position

The Role of Art in Games - Visual Hierarchy

  • Composition of various elements
  • Proximity, continuity, closure
  • Huge part of environment art and UI

[Watch | 30 mins] Understanding Composition - Blender Guru

39

40 of 141

Communicating Gameplay

Intro to Game Art - The Role of Art in Games

  • Player goals and progression
  • Player actions
  • Rewards and challenges

40

41 of 141

Visual Design

The Role of Art in Games - Communicating Gameplay

PRESENTING�COMPLEX INFORMATION�IN A SIMPLE WAY�THAT YOUR AUDIENCE CAN�INTUITIVELY UNDERSTAND�AND ACT UPON

41

42 of 141

Visual Design

The Role of Art in Games - Communicating Gameplay

  • Communicating a clear message
  • It’s about problem solving
  • In games it’s moving and changing
  • Especially important in UI Design

42

43 of 141

Understanding Your Audience

The Role of Art in Games - Communicating Gameplay

  • How do they think?
  • What things do they connect with?
  • How are they experiencing the game?
  • What info are they looking for?
  • Game genre is a big factor

43

44 of 141

Systems Thinking

The Role of Art in Games - Communicating Gameplay

  • Ecosystem for the whole game
  • Every part should feel unified
  • Consistency throughout the game
  • Meaning behind colors, shapes, etc.
  • Everything affects everything else

44

45 of 141

Shape Language

The Role of Art in Games - Communicating Gameplay

Standardize the use of certain shapes

for certain things across the entire game

​

[Watch | 24 mins] Intro to Shape Theory - TipTut

↑ Image Source: So You Wanna Make Games?? | Episode 7: Game VFX - Riot Games

45

46 of 141

Color

The Role of Art in Games - Communicating Gameplay

  • Can show what team you’re on
  • ...or tell player’s apart ->
  • What type of damage you’re dealing ↘
  • Helps tie different things together
  • eg. models and effects

46

47 of 141

Colorblindness

The Role of Art in Games - Communicating Gameplay

Avoid using color as the only distinction if possible

[Read] The UX of Among Us: The importance of colorblind-friendly design - UX Collective

Full Color Vision

Deuteranomaly�Green-weak, ~5% of people

Monochromacy�“Total color blindness”

47

48 of 141

Theme

2

49 of 141

Theme / Thematic

Intro to Game Art - Theme

  • Basically, what the game is about
  • A unifying idea that is present through:
    • Mechanics, narrative, audio, visual effects, characters, world, and general aesthetic
  • Consistent theme aids immersion

[Watch | 5 mins] How to Choose a Theme for Your Game - GDC (George Fan, Plants vs. Zombies creator)

49

50 of 141

Resonance

Intro to Game Art - Theme

  • When different elements consistently align with each other and the theme
  • Emotional impact
  • Creates an immersive experience
  • Emotions don’t need to be positive

50

51 of 141

Dissonance

Intro to Game Art - Theme

  • When different elements of a game don’t match each other or the theme
  • Draws attention to mismatch instead of the game
  • Pulls player out of immersion
  • Themes differ by culture

51

52 of 141

Complexity

Intro to Game Art - Theme

  • Amount of info a player needs to know to make a decision
  • Complexity ≠ Difficulty
  • Complexity in game design is a cost
  • Influences accessibility and amount of time before players have fun

52

53 of 141

Piggybacking

Intro to Game Art - Theme

  • Use of preexisting knowledge to front-load game information
  • Taking advantage of known behaviour of common objects or ideas
  • Theme can explain otherwise nonsensical behaviour
  • Reduces complexity
  • Makes learning easier

53

54 of 141

Narrative

Intro to Game Art - Theme

  • Ties gameplay and theme together
  • Explains motivation for characters
  • Explanation for overall setting
  • Can be direct, like a story being told

54

55 of 141

It’s All Connected

Intro to Game Art - Theme

  • Narrative, art, sound, theme, mechanics
  • All should aim in the same direction
  • They all guide each other’s design
  • Collaborative process, back and forth
  • Start to design them together early!!!

[Watch | 1 hour] Magic: The Gathering - Twenty Years, Twenty Lessons Learned - GDC (Mark Rosewater) Watch this one, it’s one of the best GDC talks, seriously, like 5th most popular

55

56 of 141

Concept�Art

3

57 of 141

Concept Art & Illustration

Intro to Game Art - Concept Art

Illustration

Beautiful Drawings

Concept Art

Visual Design & Problem Solving

[Watch | 23 mins] Illustration VS Concept - Trent Kaniuga

↑ Aphelios (Champion Insight) from League of Legends (Riot Games, 2009 - Today)

57

58 of 141

Concept Art

Intro to Game Art - Concept Art

  • Helps solve problems visually
  • Makes ideas clear to the team
  • Lets people imagine the game world
  • Makes folks excited about the game
  • Easier to change than polished art

​

[Watch | 12 mins] So You Wanna Make Games?? | Episode 2: Concept Art - Riot Games�[Online-Artbook] The Art of League of Legends - Riot Games

Minecraft (2011 - Today), Cave Update - Artist: Mariana Salimena ↑

58

59 of 141

Concept Art Examples

Intro to Game Art - Concept Art

Design Plans, Character Sketches, Model Sheets, �Visual Documentation, Storyboards, Thumbnails, Mood Pieces, Blueprints, etc.

[Website] Creative Uncut - Video Game Concept Art Library�[Website] Living Lines Library - Collection of Production Art for Animated Films

59

60 of 141

Project Preparation

Intro to Game Art - Concept Art

Before you even start drawing

60

61 of 141

Understand the Problem

Concept Art - Project Preparation

  • Know what you’re solving
  • Don’t draw cool things just because
  • Ask “why” to get to the root problem
  • Know who you’re making it for

[Read] What makes concept art useful from a 3D Character Artist’s point of view - Baj Singh

61

62 of 141

Set Constraints

Concept Art - Project Preparation

  • “Restrictions breed creativity”
  • Helps to narrow the creative focus
  • Prevents endless spinning on ideas

[Watch] Magic: The Gathering - Twenty Years, Twenty Lessons Learned, #18 Restrictions Breed Creativity - GDC (Mark Rosewater)

62

63 of 141

Constraint Examples

Concept Art - Project Preparation

  • Thematic: lore, setting, tone...
  • Perspective: first-person, top-down...
  • Mechanics: hit points

[Watch] Magic: The Gathering - Twenty Years, Twenty Lessons Learned, #18 Restrictions Breed Creativity - GDC (Mark Rosewater)

63

64 of 141

Research!!!

Concept Art - Project Preparation

  • Find your palette of inspiration
  • Similar genre, aesthetics, theme...
  • No limits: games, books, films...
  • Use real references if possible
  • Maybe even visit real places

64

GATHER REFERENCE!!!

65 of 141

Moodboard

Concept Art - Project Preparation

  • Palette of inspiration and reference 🎨
  • Get feedback without much work
  • Great to stay on track
  • Include short descriptors
  • Should represent fairly narrow direction

[Tool | Win, Mac, Lin] PureRef - Free (can donate) program for making mood boards.

So You Wanna Make Games?? | Episode 2: Concept Art - Riot Games ↑�Original Volibear Splash Art - League of Legends ->

65

66 of 141

Generating Ideas

Intro to Game Art - Concept Art

  • Don’t chase originality
  • Try lots of stuff
  • Mix strange with familiar
  • Pick apart, put together
  • Steal from many places

[Watch | ~1 hour] Practical Creativity - GDC (Raph Koster) The talk is mostly about games and its mechanics, but you can apply lots of it to other stuff as well�[Read] How to THINK when you draw CHANGING ONE THING - The Etherington Brothers

66

There’s no simple formula

67 of 141

How Much/Good is Enough?

Concept Art - Generating Ideas

  • Depends on subject, perspective, style, mechanics, time, final artist...
  • Good enough to get idea across
  • Sketch can be enough to excite
  • Start rough, get more detailed later

[Read] The art behind the gorgeous indie game Gris - The Verge

67

68 of 141

Drawing for Ideation

Concept Art - Generating Ideas

  • Not about polished image
  • Keep it simple, not too much detail
  • Draw fast and loose
  • Don’t be too precious about it
  • 10 sketches > 1 amazing drawing

So You Wanna Make Games?? | Episode 2: Concept Art - Riot Games ↑ ->

68

69 of 141

Closing Doors

Concept Art - Generating Ideas

  • Zero in on the concept
  • Work from broad to narrow
  • Close ideas that don’t work
  • Expand upon ideas that work
  • Resist urge to reopen closed doors

So You Wanna Make Games?? | Episode 2: Concept Art - Riot Games ↑

69

70 of 141

Navigating Feedback

Intro to Game Art - Concept Art

Because people might have different opinions

70

71 of 141

Ask Specific Questions

Concept Art - Navigating Feedback

  • Ask questions relating to goals
  • Don’t just ask “do you like this?”
  • Adjust for your audience
  • They need to understand your goals

71

72 of 141

Show Your Work!

Concept Art - Navigating Feedback

  • Do it early and often!!!
  • Don’t wait for a grand reveal
  • Communicate vision as it evolves
  • If something needs to change, it’s better to know as soon as possible
  • Anticipate questions

72

73 of 141

Care About Your Work!

Concept Art - Navigating Feedback

  • Present your work like you care
  • How you communicate matters
  • Pitch the feeling
  • Inspire your team

73

74 of 141

Character�Art & Design

4

75 of 141

Character Art & Design

Intro to Game Art - Character Art & Design

  • Multidisciplinary process
  • Design, sculpt, paint, rig, animate...
  • It’s all connected!

[Watch | 9 mins] Creative Collaboration: Making League of Legends Champions - Riot Games�[Read] Dota 2 Workshop - Character Art Guide (PDF) - Valve

The Art of League of Legends - Riot Games ↑

75

76 of 141

Character Design

Intro to Game Art - Character Art & Design

  • Lots of aspects to consider
  • Looks, movement, personality, story, voice, clothes, skills, gameplay...
  • Who they are, where they live, what they believe in, what clothes they wear
  • We are characters!

[Watch | 21 mins] Illustration Master Course - Ep. 2: CHARACTER DESIGN - Ross Draws�[Watch | 76 mins] Creating Compelling Characters: Insights from a Panel of Character Concept Artists - GDC

76

77 of 141

Iconic Elements

Intro to Game Art - Character Design

  • Iconic design works in many styles
  • Visuals can tell a lot about characters
  • Pick around 3 things that stand out
    • Green tunic & pointy hat
    • Sword and shield
    • Blonde hair

[Watch | 8 mins] The Mechanics of Character Design - Extra Credits

Evolution of Link - Hyrule Historia (Dark Horse Comics, 2011)�The Legend of Zelda Series (Nintendo)

77

78 of 141

Shapes & Silhouette

Intro to Game Art - Character Design

  • A character is a collection of shapes
  • Recognizable by silhouette alone
  • Push shapes to make it more iconic
  • Strong positive and negative forms
  • Variety of big, medium, small shapes

[Read / Look] How to THINK when you draw SILHOUETTE THUMBNAILS - The Etherington Brothers

78

79 of 141

Color Palette

Intro to Game Art - Character Design

  • Don’t use too many colors
  • Choose a color hierarchy
  • Think about value contrast
  • Color language: color tells a story

Street Fighter - Abstract Edition (2010) by Ashley Browning

79

80 of 141

Exaggeration

Intro to Game Art - Character Design

  • ​

80

81 of 141

Pose

Character Design - Exaggeration

  • Tells a lot about personality
  • feminine / masculine
  • extroverted / introverted
  • lazy / focused

81

82 of 141

Body Variety

Character Design - Exaggeration

  • Don’t just use textbook proportions
  • Can vary wildly between individuals

[Reference] The Body Shapes of the World’s Best Athletes Compared Side by Side by Howard Schatz�[Read / Look] How to THINK when you draw BODY SHAPES - The Etherington Brothers

82

83 of 141

Appeal

Intro to Game Art - Character Design

  • Strong visual interest
  • Doesn’t mean ‘good-looking’
  • Everyone has different standards
  • Dynamic design

83

84 of 141

Environment�Art

5

85 of 141

What is Environment Art?

Intro to Game Art

  • Basically, 90% of the screen
  • The world or background of the game
  • Terrain, props, set pieces
  • Key to immersion and storytelling

[Watch | 11 mins] So You Wanna Make Games?? | Episode 4: Environment Art - Riot Games�[Watch / Talk | 1 hour] Interior Design and Environment Art: Mastering Space, Mastering Place - GDC (Dan Cox)

85

86 of 141

Process

Intro to Game Art - Environment Art

  • Prioritize things that are important to achieving the overall game experience

86

87 of 141

Believability

Intro to Game Art - Environment Art

  • Things don’t need to be real to be believable
  • Put a character in for scale reference
  • Use interactive objects as scale cues:
    • Chairs, doors, railings, stairs

87

88 of 141

Storytelling

Environment Art - Believability

  • Environment tells a lot about:
    • Climate, age, culture
  • Key to enforcing game experience
  • Makes places feel interesting and real
  • Research!!!

[Watch | 18 mins] How Level Design Can Tell a Story - Game Maker’s Toolkit - check the video description for even more resources

88

89 of 141

Efficiency

Intro to Game Art - Environment Art

  • Keep the polycount low
  • Reuse models and textures
  • Use modular kits
  • Consider tilemaps for 2D games

89

90 of 141

Animation

6

91 of 141

Animation

Intro to Game Art

  • Motion, timing

[Watch | 28 mins] Cuphead’s Animation Process and Philosophy (Jake Clark) - GDC

91

92 of 141

12 Principles of Animation

Intro to Game Art - Animation

  • Important for any kind of animation
  • ​

[Watch | 24 mins] 12 Principles of Animation - AlanBeckerTutorials�[Watch | 16 mins] Disney - The Magic of Animation - kaptainkristian

92

93 of 141

Frame-by-Frame

Intro to Game Art - Animation

  • Used for 2D animation
  • Often uses sprite sheets

Super Mario World Sprite Sheet

93

94 of 141

2D Skeletal Animation

Intro to Game Art - Animation

  • An often used tool is Spine
  • Uses images attached to bones
  • Then animates those bones
  • Benefits: Fewer assets, smoothness
  • Can procedurally animate ingame

[Watch | ~30 mins total] 3 videos from one of the devs of The Adventure Pals about Character Design, Spine Rigging, and Spine Animation

94

95 of 141

Character Animation

Intro to Game Art - Animation

[Watch | 13 mins] So You Wanna Make Games?? | Episode 6: Character Animation - Riot Games�[Watch | 21 mins] Making Fluid and Powerful Animations for Skullgirls - GDC (Mariel Cartwright)

95

96 of 141

Game Animation Goals

Intro to Game Art - Character Animation

  • Clearly displaying actions
  • Believable motion and physics
  • Injecting personality

[YouTube Channel] New Frame Plus - A series about video game animation, created by Daniel Floyd�[YouTube Channel] Video Game Animation Study - Another series analyzing animation in video games!

96

97 of 141

Preparation

Intro to Game Art - Character Animation

  • Visualize
  • Use reference
  • Act it out
  • Sketch out ideas
  • Research

97

98 of 141

Posing

Intro to Game Art - Character Animation

  • Animation is a series of poses
  • Clear and instantly readable
  • Proper physicality
  • Visually interesting
  • Conveys character

[Watch | 21 mins] Tracer & Pose Design 101 - The Animation of Overwatch - New Frame Plus

[Watch | 9 mins] The Importance of Keyframes / Run Cycles - Video Game Animation Study�[Website] Posemaniacs - Pose references

98

99 of 141

Line of Action

Character Animation - Posing

  • Imaginary line through a pose

99

100 of 141

Weight and Balance

Character Animation - Posing

  • Pose indicates distribution of weight
  • Check character's center of gravity
  • Can show the weight of props

100

101 of 141

Specificity

Character Animation - Posing

101

102 of 141

Motion

Intro to Game Art - Character Animation

  • Spacing and eases
  • Squash and stretch

102

103 of 141

Animation Systems

Intro to Game Art - Character Animation

103

104 of 141

Visual�Effects

7

105 of 141

Real-Time VFX

Intro to Game Art - Visual Effects

  • Needs to be more efficient than pre-rendered
  • There’s no standard approach
  • Often made inside game engines

[Watch | 13 mins] So You Wanna Make Games?? | Episode 7: Game VFX - Riot Games�[Watch | 1 hour] Visual Effects Bootcamp: Artistic Principles of VFX - GDC (Hadidjah Chamberlain and Jason Keyser)�[Read] League of Legends’ VFX Style Guide (PDF)

105

106 of 141

Techniques & Methods

Visual Effects - Real-Time VFX

  • Particle systems for 3D games
  • Camera-facing cards, meshes, trails
  • Pixel Art usually uses frame-by-frame
  • As do many other 2D games

106

107 of 141

Particle Systems

Visual Effects - Real-Time VFX

  • Consists of an emitter
  • Like an invisible point in space
  • Fires sprites and models into the air
  • Manipulating options creates different effects

Particle System in Unity

107

108 of 141

UI�Design

8

109 of 141

What is a User Interface?

Intro to Game Art - UI Design

  • Players interact with the game via UI
  • HUD, level maps, character selection, inventories, level editors, skill trees, quest windows

[Watch | 12 mins] So You Wanna Make Games?? | Episode 9: UI Design - Riot Games�[Website] Interface in Game - Collection of Video Game UI Screenshots and Videos

Super Smash Bros. Ultimate (Nintendo, 2016) ↑� Fallout 4 (Bethesda, 2015) ->

109

110 of 141

UI & UX

Intro to Game Art - UI Design

  • UX = User Experience
  • The experience of using something
  • UI = User Interface
  • The interface which you’re using to interact with the thing
  • Both work closely together

[Watch | 13 mins] Fortnite UX Designer Breaks Down Fortnite’s UI / UX - Ars Technica (Celia Hodent)�[Watch | 54 mins] The Gamer’s Brain: How Neuroscience and UX Can Impact Design - GDC (Celia Hodent)

110

111 of 141

Understanding Your Audience

Intro to Game Art - UI Design

  • Playing a game on mobile vs. PC
  • Some games are 90% UI
  • …others have a minimal UI

111

112 of 141

Motion Graphics (MoGraph)

Intro to Game Art - UI & Visual Design

[Watch | 30 mins] Intro to Motion Graphics [1/4] | After Effects Tutorial - TipTut

112

113 of 141

Responsiveness

UI Design - Motion Graphics

  • Fast interactions
  • Clicking feels fluid and effortless

113

114 of 141

Intention

UI Design - Motion Graphics

  • Motion leads the eye!

114

115 of 141

Awareness

UI Design - Motion Graphics

  • Elements respond from location
  • eg. UI moves with cursor

115

116 of 141

Consistency

UI Design - Motion Graphics

  • Similar element types and actions
  • Repeated motion patterns
  • Establish familiar behaviors

116

117 of 141

Physical Intuition

UI Design - Motion Graphics

  • Elements are stylized
  • Fit the game’s brand
  • Feel natural
  • Movement is affected by forces
    • eg. friction and scale

[Watch | 8 mins] Diegetic UI - Realistic, or Distracting? - Extra Credits

117

118 of 141

Sound�& Music

9

119 of 141

Sound Design in Games

Intro to Game Art - Sound Design

  • Reinforces experience and thematic
  • Provides gameplay cues
  • Gives the player feedback
  • Drives the core emotion

[Watch | 14 mins] So You Wanna Make Games?? | Episode 8: Sound Design - Riot Games

119

120 of 141

Sound Terminology

Intro to Game Art - Sound Design

  • Frequencies
  • Envelopes
  • Dynamics

120

121 of 141

Sound Design Toolbox

Intro to Game Art - Sound Design

  • Attenuation
  • Equalization
  • Reverb

121

122 of 141

Implementation

Intro to Game Art - Sound Design

  • Attaching sounds to game events

122

123 of 141

How to Get Sounds

Intro to Game Art - Sound Design

  • Sound libraries
  • Foley - making your own sounds

123

124 of 141

Visuals & Sound

Intro to Game Art - Sound Design

  • Make visuals and sound cohesive

124

125 of 141

That’s it folks

:D

126 of 141

Final Thoughts

Intro to Game Art

  • Stay open-minded
  • Try out lots of things
  • Find out what you like
  • Create something
  • Practice makes progress

DON’T FORGET�THE BONUS LINKS

  • Learn why, not just how

126

127 of 141

THANKS FOR JOINING!

Continue for Further Reading & Resource Links

127

128 of 141

Further Reading & Resources

Intro to Game Art

https://80.lv/

​

Cameras

50 Game Camera Mistakes - GDC (John Nesky)

The Challenge of Cameras - Game Maker’s Toolkit

How Cameras in Side-Scrollers Work - GDC (Itay Keren)

​

Blender

Openframeworks

​

Books

Game Feel

​

PixelProspector

​

128

129 of 141

Visual Art & Design

Intro to Game Art - Further Reading & Resources

Tools

  • GIMP
  • Getpaint
  • mapeditor
  • inkscape
  • pixlr

References

  • Creative Uncut - A library of video game concept art
  • Visual Library - You need a free Pinterest account to look at the entire thing

Videos

129

130 of 141

Art Assets

Intro to Game Art - Further Reading & Resources

  • Game-icons.net
  • Textures.com

130

131 of 141

Digital Drawing / Painting 🎨

Intro to Game Art - Further Reading & Resources

Tools

  • Krita (free)
  • Autodesk Sketchbook (free)
  • Paint Tool SAI (paid)
  • Clip Studio Paint (paid, 45€ full price, occasionally on sale for less)
  • Procreate (paid, 11€, OSX)
  • Adobe Photoshop (paid, too much)
  • PureRef (free) - Reference Tool
  • Kuadro (free) - Reference Tool
  • IRL Sketchbook, carry one with you for scribbling ideas :D

Books

Tutorials

131

132 of 141

Pixel Art 👾

Intro to Game Art - Further Reading & Resources

Tools

  • Aseprite (paid, 10€)
  • Graphics Gale (free)

Tutorials

Websites / Communities

  • PixelJoint - A gallery showcase and community for pixel artists
  • Pixel Dailies - A Twitter account that posts daily themes for practicing pixel art

People

​

132

133 of 141

3D Art

Intro to Game Art - Further Reading & Resources

Tools

  • Blender (free)
  • Maya
  • 3DS Max
  • Cinema4D
  • ZBrush
  • Mudbox
  • Meshmixer
  • Substance Painter (paid) - Texturing

Books

  • Anatomy for 3D Artists
  • Digital Modeling

​

133

134 of 141

Character Design 🐱‍👤

Intro to Game Art - Further Reading & Resources

Websites / Blogs

Videos

Reading

134

135 of 141

Animation 🏃‍♀️

Intro to Game Art - Further Reading & Resources

Books

Websites

  • Posemaniacs - Pose references

​

Video Channels

  • New Frame Plus - A series about video game animation, by Daniel Floyd
  • Video Game Animation Study - A series analyzing animation in video games
  • AlanBeckerTutorials - Animation tutorials from the “Animator vs. Animation” guy

​

135

136 of 141

UI, UX, and Visual Design 📱

Intro to Game Art - Further Reading & Resources

Tools

  • Figma - A collaborative interface design tool

Color Tools

Books

Websites

  • Game UI Database - Collection of Video Game UI Screenshots and Videos
  • Interface in Game - Similar to above

Videos

​

136

137 of 141

Level Design

Intro to Game Art - Further Reading & Resources

Books

Videos

137

138 of 141

Audio 🎶

Intro to Game Art - Further Reading & Resources

Tools

  • Bfxr (free) - Sound effect generator
  • LabChirp (free) - Sound effect generator
  • Irrklang
  • Audacity (free) - Open-source audio editor

Digital Audio Workstations

  • Cakewalk (free)
  • LMMS (free)
  • Ardour (free)
  • FL Studio (paid)
  • Reaper (paid)
  • Garageband (free, OSX)

Books

  • The Sound Effects Bible - Ric Viers (2008)
  • Game Sound - Karen Collins (2008)

Videos

Sound Libraries

Free Sounds

  • wip

People

  • Joonas Turner (Broforce, Nuclear Throne, Downwell)
  • Martin Kvale (Owlboy, Hidden Folks, GoNNer)
  • Darren Korb (Hades, Pyre, Transistor, Bastion)
  • Paul Lackey (Overwatch, Midtown Madness)
  • Sally Kellaway (VR/AR/MR & 3D audio specialist)

​

138

139 of 141

Accessibility

Intro to Game Art - Further Reading & Resources

Websites

Videos

  • Designing for Disability - Videos from Game Maker’s Toolkit about accessibility

People

  • Laura Kate Dale
  • Ian Hamilton

139

140 of 141

Writing, Narrative, Storytelling 📝

Intro to Game Art - Further Reading & Resources

Tools

  • Twine (free) - An open-source tool to tell interactive, non-linear stories
  • Inkle Writer (free) - Tool to write and publish interactive stories
  • RenPy (free) - A visual novel engine
  • Notebook, like, carry an actual notebook with you to write down ideas. :D

Books

Videos

140

141 of 141

Project Management

Intro to Game Art - Further Reading & Resources

Tools

  • Notion (free or paid)
  • Trello (free or paid) An online collaborative kanban boards platform
  • Miro (free or paid) An online collaborative whiteboard platform
  • HacknPlan (free or paid)
  • Codecks (free or paid)
  • Joplin (free) An open source note taking and to-do tool
  • Asana (free or paid)
  • Evernote (free or paid)

141