Supporting Gameplay with Art
1
What is “Gameplay” ?
2
WHAT IS “GAMEPLAY” ?
3
Graphics are NOT Gameplay...?
4
GRAPHICS ARE NOT GAMEPLAY - Example # 1
5
GRAPHICS ARE NOT GAMEPLAY - Example # 2
6
GRAPHICS ARE NOT GAMEPLAY - Example # 3
7
GRAPHICS ARE NOT GAMEPLAY - Example # 4
8
Game art should SUPPORT GAmeplay!
9
EACH ASSET HAS A PURPOSE
Assets crucial to gameplay ( = Interactable )��Player Character (Duh!)�Enemies (Duh!)�NPCs (Quests)�Animals/Creatures (RDR - Horses, Minecraft - Pigs)�Items (Weapons, Potions, Vehicles)�Level elements (Doors, Ledges, Ladders)�Effects (Fire, Water)�
Supporting assets ( = Non-Interactable )��Environment assets (Trees, Buildings)�Background (3D - Skybox, 2D - Background)�Wildlife (Birds, Mice)�Ambient effects (Wind, Smoke, Clouds)�Lighting (Visibility, Ambience)
10
If it doesn’t, is it necessary? Prioritize, don’t waste time!
The purpose needs to be COMMUNICATED!��( But how? )
11
Visual Hierarchy
12
VISUAL HIERARCHY - TL;DR
“The elements of a game scene forms a natural hierarchy of importance. For example, the player, followed by enemies, followed by interactive objects, followed by background elements. Color can help make this hierarchy visually clear. In visual works, such as painting and film, this principle is used to guide the viewer’s visual focus to what is important. In interactive works, this is even more important, because it helps the player figure out what to do: where to go, who to attack, what to pick up.”�� Color in games: An in-depth look at one of game design's most useful tools��“It’s helpful to create your assets with the big picture in mind, even if you're working in the vacuous space that is a blank Photoshop file. However, your job can be greatly simplified by organizing your assets into levels of importance in terms of gameplay—with the main character (or object) on top, followed by other interactive objects, surfaces and enemies, followed by anything else. In most cases these levels will form a pyramid, with the most significant elements taking up the least physical amount of screen space. You're going to want to render these assets and distribute colors accordingly. In terms of the 1990’s food pyramid, the fats, sugars, and oils of your palette—the tasty colors—should be reserved for your character only. To prevent your product from turning into a game of Where’s Waldo?, you want your character to stand out, and the best way to achieve this is with contrast.”�� Visual Hierarchy for Game Developers: A Practical Guide to Making Important Stuff Seem Important�
13
VISUAL HIERARCHY - So basically this
14
> > > ��
� More important_ Less important_
VISUAL HIERARCHY - Example # 1
15
VISUAL HIERARCHY - Example # 2
16
VISUAL HIERARCHY - Example # 3
17
VISUAL HIERARCHY - Example # 4
18
VISUAL HIERARCHY - How to:
��Bright colors (Red, Green, Complementary colors)�High contrast (Black outline + Light colors, etc.)�More detailed (Main characters > NPCs, etc.)�Good silhouette (Mickey Mouse, Halo Energy Sword)�Exaggeration (Enemies spiky, Heroes round)�Lighting (Spotlight, “Godrays”)�Effects (Particles, Glowing parts/outline)
��Muted colors (Limited palette, Desaturated)�Low contrast (Dark or Light, not both)�Less detailed (Smaller & Tiling Textures)�Generic silhouette (Simple shapes -> a cup)�Blend it in (Assets should “belong”)�Lighting (Create a mood, don’t overdo it)�Effects (Natural, not distracting)�
19
Is the asset important to the player/gameplay?�
YES - EMPHASIZE!
NO - TONE DOWN!
Emphasize!
20
EMPHASIZE - Bright colors
21
EMPHASIZE - High contrast
22
EMPHASIZE - More detailed
23
_Environment “Hero” asset_
_Environment asset_
_>_
EMPHASIZE - Good silhouette
24
EMPHASIZE - Exaggeration # 1 (Symbolism)
25
Circle: innocence, youth, energy, femininity�
Square: maturity, stability, balance, stubbornness��Triangle: aggression, masculinity, force
EMPHASIZE - Exaggeration # 2 (Stylization)
26
EMPHASIZE - Lighting
27
EMPHASIZE - Effects # 1
28
EMPHASIZE - Effects # 2
29
https://goo.gl/6eYClS
Tone down!
30
TONE DOWN - Muted colors
31
Characters
Background
TONE DOWN - Low contrast
32
TONE DOWN - Less detailed
33
_Tiling textures_
_Per-asset textures_
_<_
TONE DOWN - Generic silhouette
34
TONE DOWN - Props should blend in
35
TONE DOWN - Lighting
36
TONE DOWN - Effects
37
Test it!!
38
TEST IT - Sketches
39
Concepts for an unreleased game by me (2014)
TEST IT - Mockups
40
_Early Mockup_
_Final Game_
TEST IT - In practice # 1
41
The assets inside Construct 2 game engine
Assets from my 1st year of studies at KUAS (2013)
_Individual assets_
_Do they fit together?_
_NO:_�_Busy BG_
_Dark FG_
_NO:_�_Busy BG_
_Light FG_
_OK:_�_Dark BG_
_Light FG_
_A_
_B*_
_C_
_A_
_B_
_C_
TEST IT - In practice # 2
42
Same asset in UE4 (Wrong tangent basis)
Normal-mapped asset in Marmoset Toolbag 2
_3D Software_
_Game Engine_
TEST IT - Iterate # 1
43
TEST IT - Iterate # 2
44
Tips & Tricks? (WIP)
45
Silhouette/Thumbnail sketching�� - Fast� - Small� - B&W, Grayscale� - Silhouette� - Value��Do mockups!�Squint your eyes! (Or blur image)�Photoshop contrast check (Grayscale/B&W)�Adjustment layers in general + masks�Make animations fit into in-game speed (2D&3D)�Colorblind check (Proofing)�On-screen color picker (Ctrl+Alt+Shift+RMB)�Brush Size/Hardness/Opacity (Alt+RMB+Up-Down/Left-Right)�