OGDC 2014: 2D Animation using After Effect for mobile game

44
USING AFTER EFFECT 2D BASIC ANIMATION Nguyen Tien Thong – 2D Artist Jingle Bee Studio – VNG Corp.

Transcript of OGDC 2014: 2D Animation using After Effect for mobile game

Page 1: OGDC 2014: 2D Animation using After Effect for mobile game

USING AFTER EFFECT

2D BASIC ANIMATION

Nguyen Tien Thong – 2D Artist Jingle Bee Studio – VNG Corp.

Page 2: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION

ANIMATION

USING AFTER EFFECT

CONTENTS

Page 3: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC

ANIMATION

1. The first to know 2. How to draw it?

Page 4: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION 1. The first to know

Tools & Working Process

Page 5: OGDC 2014: 2D Animation using After Effect for mobile game

1. The first to know BASIC ANIMATION

IN-BETWEEN DRAWING

Page 6: OGDC 2014: 2D Animation using After Effect for mobile game

1 5 3 2 4

1 6 4 5 2 3

BASIC ANIMATION

ARROW DIRECTION

1. The first to know

Page 7: OGDC 2014: 2D Animation using After Effect for mobile game

Basic Animation for Games

2. Explosion 3. Flame

1. Wave

BASIC ANIMATION 2. How to draw it?

4. Walking 5. Running

Page 8: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION - Wave

Example

1 3 2 4 1

1 2 3 4

Page 9: OGDC 2014: 2D Animation using After Effect for mobile game

1

4

2

3

BASIC ANIMATION - Wave

Page 10: OGDC 2014: 2D Animation using After Effect for mobile game

1

4

2

3

BASIC ANIMATION - Wave

Page 11: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION - Wave

Page 12: OGDC 2014: 2D Animation using After Effect for mobile game

Example

1 3 2 4 5

1 2 3 4 5

BASIC ANIMATION – Birth & Death

Page 13: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Birth & Death

1 2 3 4 5

Page 14: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Birth & Death

1

2

3

4

5

Page 15: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Birth & Death

Page 16: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Birth & Death

1 3 2 4 5 1 3 2 4 5

Page 17: OGDC 2014: 2D Animation using After Effect for mobile game

1 2 3 4 5

BASIC ANIMATION – Birth & Death

1

2

3

4 5

Page 18: OGDC 2014: 2D Animation using After Effect for mobile game

Example

1 2 3 4

1 3 2 4 1

BASIC ANIMATION – Flame

Page 19: OGDC 2014: 2D Animation using After Effect for mobile game

1 3 LEFT RIGHT

BASIC ANIMATION – Flame

Page 20: OGDC 2014: 2D Animation using After Effect for mobile game

1 3 2

2

BASIC ANIMATION – Flame

Page 21: OGDC 2014: 2D Animation using After Effect for mobile game

1 3 2

2

4

4

BASIC ANIMATION – Flame

Page 22: OGDC 2014: 2D Animation using After Effect for mobile game

1

3

2

4

1

3

2

4

1

3

2

4

1

2

3

4

BASIC ANIMATION – Flame

Page 23: OGDC 2014: 2D Animation using After Effect for mobile game

Color + Effect

1 2 3 4

BASIC ANIMATION – Flame

Page 24: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

1 2 3 4 5 6 7 8

Page 25: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

1 2 3 4 5 6 7 8

Page 26: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

1 2 3 4 5 6 7 8

Page 27: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

1 2 3 4 5 6 7 8

Page 28: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

1 2 3 4 5 6 7 8

Page 29: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Walking

Page 30: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Running

1 2 3 4 5 6

Page 31: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Running

1 2 3 4 5 6

Page 32: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Running

1 2 3 4 5 6

Page 33: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Running

1 2 3 4 5 6

Page 34: OGDC 2014: 2D Animation using After Effect for mobile game

BASIC ANIMATION – Running

Page 35: OGDC 2014: 2D Animation using After Effect for mobile game

ANIMATION USING

AFTER EFFECT

Page 36: OGDC 2014: 2D Animation using After Effect for mobile game

ANIMATION USING AFTER EFFECT - Comparison

167x235 /38.9KB 1658x940/266KB

FRAME BY FRAME AFTER EFFECT

Page 37: OGDC 2014: 2D Animation using After Effect for mobile game

ANIMATION USING AFTER EFFECT - Demo

Page 38: OGDC 2014: 2D Animation using After Effect for mobile game
Page 39: OGDC 2014: 2D Animation using After Effect for mobile game
Page 40: OGDC 2014: 2D Animation using After Effect for mobile game
Page 41: OGDC 2014: 2D Animation using After Effect for mobile game
Page 42: OGDC 2014: 2D Animation using After Effect for mobile game

SUMMARY

Page 43: OGDC 2014: 2D Animation using After Effect for mobile game
Page 44: OGDC 2014: 2D Animation using After Effect for mobile game