Game, Mobile, Online, Social Ngi chi, team 3

WHY CHOOSING 2D ANIMATION FOR MOBILE GAMES ?

SENIOR ANIMATOR - ZOYGAME joe@vinova.vnJOE TRAN

Cho cc bn, ti l Joe Trn, hin ti ti ang l animator ca Vinova, hm nay n vi OGDC rt vui khi c chia s nhng kinh nghim, nhng tri nhim m mnh thu c trong thi gian lm animation cho game mobile. Ti cng xin cm n VNG to ra 1 hi ngh, 1 saan chi anh em studio trong nc v c nc ngoiaf c th chia s, hc hi kinh nghim ln nhau. qu l 1 iu tuyt vi.

n vi OGDC nm nay ti mun chia s vi cc bn 1 ch : Ti sao nn chn 2D animation cho game mobile? Nh cc bn bit:

Hin nay xu hng lm game 2d ang c cc nh lm game mobile hng ti v ang dn ly li c v th ca mnh trc dng mobile game 3d, v vic la chn animation cho game mobile l iu khin cc nh lm game vn phi au u. (v k thut, v nhng gii hn cho mobile)

Trong khi Animation 2D vn l 1 li th, 1 hng i d dng hn nhiu gip cc nh lm game nh v va pht trin tt, p ng c nhu cu. Nhng hm nay, ti mun chia s vi cc bn cch cho game 2D c o, c bit hn n nh mt lung gi mi, gip cho game 2d ngy mt i ln bi s a dng v i mi v ti tm gi n l 2,5 D Amination

Bi ni ca ti l mt cu chuyn k v qu trnh tm hiu v pht trin, nhng kinh nghim thu c, nhng bi hc m ti v nhm lm animation thu c qua 1 game rt ln m chng ti va thc hin chnh l Vua Th Thnh, 1 dng game th thnh vi hng trm nhn vt.

Xin cc bn cho 1 trng pho tay ti c th ly ng lc c khng ^^

1

OUT LINE1. Chn dng animation no cho mobile game l ti u nht?2. Ti sao chn animation 2,5 cho mobile game?4. Thnh qu3. Hng dn lm animation 2,5d

y l nhng chnh ti xin chia s ngy hm nay:

l chn dng animation no cho mobile game mobile l ti u nht?Ti sao li chn n? cch m chng ti to ra n v cui cng l thnh qu m chng ti t c.

Mi cc bn lng nghe

1. Animation 2D?2. Animation 3D?3. Animation 2,5D?4. Bng so snh gia animation 2D v 3D5. La chn Animation 2d cho game l ti u nht? 6. Cc im c bit khi a animation 2D vo game 7. Hng dn c bn animation 2D bng spine

2

Ta cn 1 game tht ngon!

Vo 1 ngy p tri th sp bng ra lnh t hp anh em trong cng ty li, v ua ra quyt nh Ta cn 1 game tht Ngon! Cc ngi phi hon thin tht nhanh cho ta.

Chng ti thc s khng hiu Ci game Ngon ny n nh th no.

khng bit phi bt u t u, v quyt nh phi hiu c n .3

Sau chng ti quyt nh tm hiu r v ci game Ngon ny xem n nh th no.

4

game mobile th thnh chin thut 1 gc nhn duy nht.

Animation 500 Nhn vt - 4 class v kh (Cung, Thng, Qut, Kim) - V kh pht sng theo cp

Nhn vt chuyn ng vi 3 gc

Game ngon l:Th nht Game Ngon l 1 Th Loi game mobile th thnh chin thut, vi 1 gc nhn duy nht.Th 2 n Sc Mnh C th phn thn ra 500 con tiu yu khc nhau, rt ng v hung hn.Th 3 n s dng Chin thut chuyn ng vi nhiu gc khc nhau trn mi a hnh.

Qu thc 1 ca kh nhn Sau khi nm c nhng c im v bi ri

Chng ti quyt nh dng th v kh b o m chng ti ang c chnh l 2D Animaiton v 3D animation

5

2d khng c, 3d cng khng, khng bit l cn cch no c th tiu dit c Yu Qui y?

Trong lc ang hoang mang khng bit phi lm th no th 1 tng cht bt ln trong u chng ti

6

Animation trn 1 mt phng - 4 trng thi (walk, attack, die, idle)2D ANIMATION V KH 2D ANIMATION

V y chnh l th v kh 2D animation ca chng ti:

Nhn vt chuyn ng vi 1 gc ngang v c 4 trng thi animation i, ngh, nh v cht, vi 4 trng thi ny th con nhn vt th hin c c im v tnh cch cn c trong 1 game chin thut.

- V vi v kh 2d animation chng ti cng luyn tay cng vi 1 s game 2d c bn va thun thy7

2D ANIMATION S DNG VO CC GAME ULTIMATE ARROWGODS RAGE

- chnh l Ultimate Arrow v Gods Rare

- c bit l trong trn chin vi qui vt Ultimate Arrow, 1 ngy chng ti animation c 2 nhn vt vi 4 trng thi khc nhau, gip game sm hon thin c ch tiu a ra v t c nhng thnh cng ln. (khi dnh gii nht bets of show hi ngh game quc t Casual Connect nm 2013 c t chc ti Singapore)

- V chng ti rt t tin vi v kh 2d animation bc vo trn nh vi con Yu Qui Vua Th Thnh.8

2D ANIMATION KT QU KHI S DNG 2D ANIMATION

Nhc im- Hn ch gc nhn vtu imTc nhanhAnimation kh d dng

l 1 ngy chng ti c th din hot 2 nhn vt vi 3 trng thi chuyn ng i, Ngh v nh.

Nm c u im v nhc im ca vic s dng 2d animation:

V u im th 2d animation c c tc din hot, nhn vt chuyn ng n gin khng cn qu cu k nhng cng c th to ra nhn trng thi animation mong mun (din hot nv trn 2 trc x,y)

Nhc im dn n tht bi l Nhn vt ch hn ch vi 1 gc , khng xoay c nhiu hng khc nhau => khng p ng c ch tiu a ra l nhn vt cn chuyn ng vi 3 gc . V vy m chng ti quyt nh ngay l s 3d animation ang rt l mnh hin nay

9

3D ANIMATION TM HIU 3D ANIMATION

10

3D ANIMATION TM HIU 3D ANIMATION

Chng ti bt u ln k hoch gp g v hc hi kinh nghim t cc animator 1 s studio lm game mnh nh VNG, VTC, E Mobile xem h lm game nh th noSau khi trao i v hc hi th chng ti chn ra c loi v kh mi mang tn 3d animation. Vi 3d animation th chng ti chn ra c 2 c im chnh

11

3D ANIMATION NGUYN L C BN 3D ANIMATION Nhn vt c chiu su - nh sng r rng, bng by, ni khiChuyn ng trong khng gian 3 chiu - Nhn vt chuyn ng trong khng gian 3 chiu(ngang, dc, su) - Di chuyn trn 3 h trc ta (x,y,z)

- + Th nht ha 3d animation c thit k kh k cng v t m, cc nhn vt c nh sng r rng, bng by v ni khi+ Th hai Cc i tng chuyn ng trong mt khng gian 3 chiu (ngang, dc, su) di chuyn trn 3 h trc ta (x,y,z)

Ri chng ti nhanh chng bt tay vo rn luyn v kh 3d animation.12

3D ANIMATION NGY M RN LUYN

+ Chng ti chn cc loi phn mm lm 3d hiu qu nht c hin nay nh 3ds max v Maya luyn v kh 3d animation.

13

3D ANIMATION TH NGHIM 3D ANIMATIONAnimation 3DRender 8 gc

- Vi 3D animation:Nhn vt ca chng ti tr ln n tng hn vi ha p lung linh v nv c th di chuyn vi 8 gc khc nhauNh vy vic tiu git Yu Qui s d dng hn nhiu.

Hng hc kh th, ln ny chng ti quyt tm khng con qui gian c git hi dn lng thm na.

Chng ti rt t tin v quyt u trn th 2 vi bn Yu Qui hung hn kia.

* Nu cc bc lm v thc hin t Art -> Animation->Code cho n khi gi code

14

3D ANIMATION CHIN U VI V KH 3D ANIMATIONTurn 1Turn 2

Nhng ngy u tin vi v kh 3d animation chng ti chm 1 nht i i 1 con qui, thc s l 1 bc tin ln.

- Nhng c 1 iu chng ti khng ng ti l v kh 3D animation kh nng, tung c nhiu n lin tip cn kh nhiu thi gian, i vi sc lc ca chng ti by gi k th chin u lu c nn nh ngm ngi rt lui.V kh 3d animation rt sc bn v cht lng, nhng n li qu nng vi sc ca chng ti hin ti,

Sau tht bi ln ny chng ti thc s chn nn, tuy nhin chng ti cng thu li c 1 s th

Em cn nu tht chi tit, v rt nhiu cng ty lm 3D animation cho nhn vt, v h s t rat rt nhiu cu hi nu nh em khng nu tht chi tit v logic (nn tham kho kin anh Tng, Tin, Hu...)

15

3D ANIMATION KT QU 3D ANIMATION

u im

- ha p- Nhn vt chuyn ng nhn tht v c chiu su- D dng to nhiu gc cho nhn vt

Vi v kh 3d animation, 1 ngy chng ti c th animation c 1 nhn vt vi 4 trng thi i, Ngh, nh v Cht.

Nhn vt ca chng ti chuyn ng nhn rt tht , mt m, c chiu su v thc s n tng ha p lung linh.

3D animation rt tt v t c cc tiu ch m chng ti a ra nhng m c 1 vn m chng ti gp phi l

16

3D ANIMATION VN 3D ANIMATIONMobile GameB NH HN CHDUNG LNG DOWNLOAD HN CHMN HNH NH

Vi v kh 3d animation, 1 ngy chng ti c th animation c 1 nhn vt vi 4 trng thi i, Ngh, nh v Cht.

Nhn vt ca chng ti chuyn ng nhn rt tht , mt m, c chiu su v thc s n tng ha p lung linh.

Tuy nhin th 3d animation c nhc im l khu to hnh model nhn vt li mt kh nhiu thi gian do cc chin binh ca chng ti li chuyn su v 2d, cn c thm thi gian tm hiu su v to hnh v cht liu 3d.Tc din hot nhn vt kh chm v cn phi key nhn vt trn 3 h trc ta , xoay nhiu gc chnh sa.

th ht cc loi v kh m chng ti bit m li sp n hn ca nh vua ban ra m chng ti vn cha tiu dit c con Yu Qui.

* y thm cc , tinh ty hn phn u v nhc

17

- ti sao chng ta khng kt hp 2 loi v kh ny vi nhau nh nh vy chng phi l 1 v kh hon ho hay sao?

Vy l chng ti nhanh chng bt tay vo nghin cu loi v kh mi ny

18

2d animation

Chng ti ln k hoch phn tch v chn ra nhng u im ca 2 loi v kh 2D v 3D chn ra nhng im tinh ty nht v kt hp chng li vi nhau

- Vi 2D animation chng ti chn ra c u im tc , linh hot, nh nhng.- Cn 3D animation li c s sc bn, a dng v gc chm. (8 gc khc nhau)

V chng ti tu luyn ra c loi v kh mi b o ny19

2,5D ANIMATION V KH MI CA CHNG TI

V kh qu thc b o v honh trng, gip chng ti t tin hn rt nhiu c th bc vo trn chin th Sinh T th 3 vi con Yu Qui.20

2,5D ANIMATIONSC MNH 2,5D ANIMATION

Tht bt ng v nm ngoi sc tng tng ca chng ti

- V kh 2,5d va c rt ra lin ta nh ho quang nh cm nhn c s c lit ca cuc chin ny- Ch va mi vung kim chm nht u tin th 2 con tiu yu b tiu dit 1 cch nhanh chng.- c bit l s di chuyn linh hot ca cc chin binh v tc tn cng chp nhong.Chng ti dnh c nhng thng li u tin trc con Yu Qui Vua Th Thnh.

Chc hn cc bn rt mun bit cch m chng ti ch to ra loi v kh 2,5D animation ny, sau y ti xin chia s vi cc bn qu trnh tu luyn ra v kh 2,5D ca chng ti.

Mnh xin chia s 1 cht v 2,5d animation.

21

2,5D ANIMATION NGUYN L 2,5D ANIMATIONC bn l 2D animation

S dng cc hiu ng bng , chiu sng, phn chiu, gc nhn m phng to cm gic 3D (gi 3D)

Animation 2,5D gi lp cc gc 3D (back, front, right, left)

Nu 2D v 3D d nh ngha v xc nh th 2.5D l mt khi nim kh tru tng

V c bn th 2,5 chnh l 2d animation pht trin thm bng cch s dng cc hiu ng ca 3d nh bng , chiu sng, phn chiu v gc nhn to cm gic 3d.

u tin chng ta c th to ra 1 khng gian hon ton bng 3d hoc gi lp 3d bng nhiu cch,vd: 1. a cc i tng vt 3d vo trong 1 nn background 2d 2. Thit k background 2d 1 gc cho 45 , to cm gic bng v chiu su cho cc i tng trn background 3. Thit k nhn vt nhiu gc khc nhau vd nh (4 gc c bn nht l back, front, right v left) din hot c nhiu gc ging nh 3d animation nhm to chiu su cho nhn vt

Chng ti cng tm hiu qua 1 s game s dng 2,5d animation22

2,5D ANIMATION CC DNG GAME 2,5Do Hi TcV Lm Truyn KKingdom Rush

Nhn chung c 3 th loi game 2,5D c trng nht l game s dng :

1. o Hi Tc s dng Nhn vt 2d v background 3d (mt s game nh o hi Tc...)2. V Lam Truyn K, 1 game thuc th loi Cy ko v auto, nhn vt khng c qu nhiu animation m ch tp trung lm hiu ng effect cc skill ca nhn vt.3. Kingdom Rush mt game chin thut Tower defense, vi kh nhiu nhn vt v, nhn vt khng c nhiu trng thi animation nhng chuyn ng li rt funny.

V chng ti a 2,5d animation vo sn phm u tin23

Front Back Right

2,5D ANIMATION NHN VT VI GC 2,5D ANIMATION

chng ti tm gi n l 2,5D animation - Vi 2,5d animation nhn vt c luyn tp 3 gc Front, Back v Right- Vi phng php luyn tp mi m v y sng to ny, nhng chin binh ca chng ti s mnh m v linh hot hn nhiu.- Mc d cc chin binh di chuyn trn c 3 gc khc nhau nhng vn c c nhng trng thi chuyn ng v sc chin u ging nhau (to hiu qu ging 3d animation)

V bng tt c s t tin ca mnh, chng ti quyt nh trn th 3 quyt sinh t vi con Yu Qui Vua Th Thnh ny.

24

Animation bng Spine animation1 ngy animation 2 nhn vt / 3 gc / 3 trng thi khc nhau

2,5D ANIMATION P DNG VO SN PHM THC T

y l 3 nhn vt u tin m chng ti to ra.Chng ti s dng phn mm Spine lm animation, y l mt phn mm ang rt ni ting v din hot 2d animation cho game.Vi 1 con nhn vt th chng ti mt na ngy hon thin v mt ngy chng ti c th din hot 2 nhn vt mt cch hon ho vi mi nhn vt c 3 gc v 3 trng thi (i, Ngh, nh)Nhn vt chuyn ng linh hot v mt m trn 3 gc nhng c cng nhng trng thi animation ging nhau c th dng i dng li nhiu ln.

Trong qu trnh rn ra v kh 2,5D animation th cng c nhng kh khn m chng ti cng gp phi.

25

ARTV nhiu gc Ct file, t tn ng vi qui nh a ra (hnh nh chp file cut)

ANIMATIONS lng animation rt ln Din hot 1 trng thi vi nhiu gc

Mobile game

2,5D ANIMATION KH KHN KHI S DNG 2,5D ANIMATION

V art Cn v nhn vt vi 3 gc , t l hnh nh cc gc phi tng ng nhau.Khi ct file nh cn t tn tng nh ng vi qui nh a ra (hnh nh chp file cut) v nu t sai tn s gp li khi xut file

V Animation

Cn din hot s lng animation rt ln m s lng nhn lc li c hnDin hot 1 trng thi vi 3 gc , cc trng thi animation phi ging nhau.

Chng ti chn cho mnh nhng gii php hp l v loi b nhng kh khn i n thnh cng, chinh phc c nhng con qui to.

26

Ln sn 1 qui trnh lm vic r rng v t tn, v qui chun

Animation chia r cc class (eg:kim cung thng qut)

2,5D ANIMATION GII PHP 2,5D ANIMATION

Chng ti to sn ra 1 quy trnh t Art n animation nh sau:

Tt c cc nhn vt s c v gc Front trc sau s chnh sa v bin i thnh 2 gc cn li, ( y chng ti la chn ra 3 gc c bn nht o l Front, Back v Right, cn gc Left s c lt sang t gc Right)Tt c cc file nh ca nhn vt u c chung 1 kiu t tn, theo th t u tin t trn xung di, t tri sang phi, t layer trong n layer ngoi.

Ri chuyn qua phn mm Spine v bt u to xng v din hot cc trng thi cho nhn vt phn chia r cc kiu nh ca tng class, thun tin cho vic s dng li animation cho nhng con c nhng im tng ng nh dng ngi, gip v v kh27

2,5D ANIMATION QUI TRNH LM ANIMATION 2,5D

JSON245

13

- y l ton b qu trnh rn luyn v kh 2,5D animation t khu thit k nhn vt cho tii khi xut ra file Json.

Vi 2,5D animation th chng ti t c nhng thnh qu cng vi game Vua Th Thnh.28

Th Loi: game mobile th thnh chin thut 1 gc nhn duy nht.

Sc Mnh: Animation 500 Nhn vt - 4 class v kh (Cung, Thng, Qut, Kim) - V kh pht sng theo cp

Chin thut: Nhn vt chuyn ng vi 3 gc

Cho o vt sui, ngy m theo di:

V sau nhng ngy, m tm hiu v nghin cu th chng ti tm ra c nhng c im chnh ca con qui vt chng ti tm gi n l Vua th Thnh bi trn lng n c khc 1 3 ch rt ln Vua Th Thnh

c im qui vt:

Th nht Vua Th Thnh l 1 Th Loi game mobile th thnh chin thut, vi 1 gc nhn duy nht.Th 2 n Sc Mnh C th phn thn ra 500 con tiu yu khc nhau, rt ng v hung hn.Th 3 n s dng Chin thut chuyn ng vi nhiu gc khc nhau trn mi a hnh.

Qu thc y l mt con yu qui va to va bo, th li cn nhanh na :D

Sau khi nm c nhng c im v con yu qui

Chng ti quyt nh dng th v kh b o m chng ti ang c chnh l 2D Animaiton

Mnh xin chia s 1 cht v v kh 2d animation

29

WHY 2,5D ANIMATION FOR GAME?L DO CHNG TI CHN 2,5D ANIMATION

Dng li animation vi s lng ln cc nhn vt = > Tc nhanh, hiu qu cao

To cm gic khng gian, gip cho ngi chi thch th.

(Dn chng ngi ni ting, ngi thng dn phn nh v animation ca game)

V l do m chng ti la chn 2,5D animation cho game ca chng ti.

V n p ng c nhng yu t quan trng m game cn

1. Tc nhanh, hiu qu cao khi dng li c animation vi s lng ln cc nhn vt.2.Animation 3 gc nhng c chung nhng trng thi animation ging nhau to cm gic nhn vt chuyn ng trn c 3 hng nh v kh 3D.3. Game ca chng ti cng c ngi chi v nhng ngi c kinh nghim lm game cho nhn xt kh tt v animation mt m, sinh ng

1. iu khin n gin, khng i hi nhiu k nng2. Tp trung nhiu hn vo gameplay thay v ch trau chut ha3. Ct truyn n gin d nm bt4. S lng mn chi a dng

31

WHY 2,5D ANIMATION FOR GAME?Bng kt qu

Chng ti a ra cc tiu ch v lm 1 bng kt qu thu c ca 3 loi v kh th thy v kh 2,5d hu nh hi t nhng tiu ch v yu t cn thit chng ti cn c c th tiu dit c con Qui.2,5D animation p ng c hiu qu v ph hp c th tiu dit c con Qui gm ghic ny.32

THNH QUTrailer game Vua Th Thnh

1. Game u tin a ra th trng c rt nhiu ngi a thch ( t mc 50.000 user/3 tun)2. Tc lm nhanh hiu qu chnh l thnh cng3. Trong vng 3 thng chng ti animation c 200 nhn vt khc nhau

Thnh qu t c t l trong thi gian ngn dp lon c 2 qui vt khng mang tn Ultima Arrow v Vua Th Thnh.Mi qui vt u c tiu dit nhanh gn, dn chng c 1 cuc sng bnh an v hnh phcNh vua rt vui mng nn ra lch ch to v s dng v kh 2,5D ny trn ton t nc v ngi ban thng cho dn lng chng ti rt nhiu vng bc, chu bu ^^

33