WHY CHOOSING 2D ANIMATION FOR MOBILE GAMES ?

Senior animator - ZOYGAME

JOE TRAN

We need

a badass GAME !!

Requirement

s

1. Single camera view tower defense mobile game

2. 500+ characters in 4 classes

- bow, spear, fan & sword

- weapon glows by level

3. 4 animation direction

Requirements

3D ANIMATION

• Game object have

depths, with lighting,

shadow, bevel

• Animations are in 3-dimentional

world

The basics

3D ANIMATION In practice

3D ANIMATION Experiment

RENDERING 8 directions

• Pros:

- Beautiful graphics

- Realistic animation

- Easy rendering into any direction

3D ANIMATION Results

3D ANIMATION Testing

• Platform

- Mobile devices have very limited memory.

- (4MB / 1 character) * 500 = 2000MB

- Cannot modify frame-based animated

characters on-the-fly

• Ability

3D ANIMATION Limitation

- Character modeling takes a lot of time

• Time

Animation on single plane 4 states: walk, attack, die, idle

2D ANIMATION Experiment

ULTIMATE ARROW GOD’S RAGE

2D ANIMATION Apply

1 character

17 animations

402 frames

Size on disk: 1.3MB

FRAME-BASED animation

1 character

4 animations

300KB on disk

Size on disk: 1.2MB

SPINE animation

• Cons:

- Each animation can be rendered for 1

direction only

• Pros:

- Simple graphics requirements

- Speed

1 day = 2 full

character

2D ANIMATION Results

• 3D animation

- Multiple directions

• 2D animation

- Simple graphics requirements

- Speed

2,5 D ANIMATION 2D & 3D combined

2,5D ANIMATION A new type of animation

2,5D ANIMATION Effectiveness

Đảo Hải Tặc Võ Lâm Truyền Kỳ

Kingdom Rush

2,5D ANIMATION Examples

1. Is basically 2D animation

- Using graphical effects: shadow, lighting, reflection, perspective

2. Creates 3D feeling by

- Simulating 3D directions: back, front, right, left

2,5D ANIMATION The basics

Front Back Right

2,5D ANIMATION Experiments

• Animation with Spine

• 1 day: 2 characters / 3 directions / 3 states

2,5D ANIMATION In use

ART

- More directions to draw

- Slicing & orgranizing character parts

ANIMATION

- Re-do 1 animation in many directions

2,5D ANIMATION Caveats

1. Create a good team workflow

2. Reuse animations for characters of same class

2,5D ANIMATION Solutions

JSON

2 4

5 1

3

200KB / 1 character

2,5D ANIMATION Workflow

2,5D ANIMATION Reuse animation

1. Can effectively re-use animations

2. Creates 3D feeling

3. Gets good feedbacks from players

2,5D ANIMATION Conclusion

Trailer game Vua Thủ Thành

Results

• It’s Q/A time ;)

Thanks You