Recommended
More Related Content
What's hot
Similar to OGDC2013_ Spine Animation_ Mr Alviss Ha
Similar to OGDC2013_ Spine Animation_ Mr Alviss Ha (20)
More from ogdc
More from ogdc (20)
Recently uploaded
Recently uploaded (20)
OGDC2013_ Spine Animation_ Mr Alviss Ha
- 1. Awesome 2D game animations with Spine ALVISS HA Lead Designer, VINOVA Pte. Ltd alviss@vinova.sg
- 2. “Here comes the greatest creative beast Let’s tame it, my brave warriors!!!”
- 4. Anime studio 9 “A precious 2D animation charm we’ve mastered thousand years ago In combat, it generates frame-based animation”
- 5. Train, team needs to train Here, my warriors, practice with these cute monsters You gotta be Kidding me
- 7. Gasboy Animations • 1 character • 1 animation • 15 frames • Size on disk: 90KB
- 8. 2nd Game: God’s Rage
- 9. God’s Rage Animations • 1 character • 17 animations • 402 frames • Size on disk: 1.3MB Happy with frame-based animation
- 11. Dozen of characters, smooth animations
- 12. BOSSes EAT Too much disk & RAM!
- 13. “One boss and we’re starving already. Frame-based animation won’t make it” Bosses EAT Too much disk & RAM!
- 14. Frame-based animation vs Modular animation • “Old-time” technique • Easy to produce • Inflexible – Changes require recompile – Take more space as animation gets more complex • Expensive trick used in 2D games with bigger budgets • Flexible – Animations compiled as plain text – Smooth animation with little disk usage • No public tool for 2D games yet :(
- 15. “Spine, We’ve been watching you” “Your Majesty, the charm named Spine by Nathan Sweet got ready to produce 2D skeletal animations for game which is modular animation bonus programmable ability”
- 16. Spine does one thing and does it perfectly Feature Spine Anime Studio Flash Easy to master v Separate Rotate, Translate, Scale v v Key-framing at bone level v Interpolation curve v v Import PSD layers v v Work with Vector image v v Inverse Kinematics (planed ) v v
- 17. Animators love it! Interpolation curveBone-level key-framing Great key-framing system Clean, elegant UI
- 19. but, does it solve the proble m of storage & memory usage
- 20. Yes, it does! FRAME-BASED animation SPINE animation Smoother animation with half storage & memory usage! 700KB on disk 2.5MB on RAM 300KB on disk 1.2MB on RAM
- 22. FLEXIBLE: Run-time auto-generated animation transition Without transition With transition
- 23. Programmable: animation procedural Captured from project http://github.com/EsotericSoftware/spine-workshop
- 24. Programmable: Combine with physic engine
- 25. Cool! But here comes the trade off
- 26. Need more computation at run-time Benchmark: display a walking character multiple times on screen • Environment: XCode 4.5, cocos2d-x 2.1.2 • Device: iPhone 4S running iOS 6
- 27. Need more computation at run-time 0 50 100 150 200 250 300 25 50 75 100 125 150 175 200 Framepersecond(FPS) Number of characters on screen Frame-based animation Skeletal-based animation 60FPS
- 28. Doesn’t replace frame-based animation • Spine is great 2D skeletal animation tool • Flexible, programmable, smooth & small • But need more computation at run-time Should use both animation methods in game
- 29. Should use both animation methods in game Frame-based animation for small characters Skeletal-based animation for huge characters and/or those need detailed, complex animations
- 31. Thank you It’s Q/A time ;) info@vinova.sg
- 32. Why choose spine over spriter? • Right tool: – Slicker & friendlier GUI – Export format: JSON (Spine) vs XML (Spriter) – Interpolation curve • Right time: – Spine app works great when we try it out (March 2013) – Usable cocos2d-x runtime right when we needed it (April 2013) • Right team: – Nathan Sweet is also the author of libGDX – Fast development: • Spine started 1 year later (early 2013 vs early 2012) • But ecome usable sooner, support more platforms faster: cocos2d-x, cocos2d-iPhone, Unity, libGDX, Starling, XNA, Flash… – Open to the community: very fast pull-request merging cycle (within hours)
Editor's Notes
- Xin chào tất cả các bạn, rất vinh dự khi được có mặt tại hội nghị OGDC do VNG tổ chức ngày hôm nay.Mình tên là Alviss hiện tại là Lead Designer tại Vinova.Hôm nay đếnvới OGDC mìnhsẽgiớithiệuđếncácbạn 1 phầnmềmdiễnhoạttrong game, đóchínhlà SpineĐâylà 1 côngcụgiúptăngchất animation trong game giúpgiảmthiểuđángkể dung lượngvàtăngtínhmượtmàtrong gameTeam meat củachúngtôi lead game develop Stefan vìlí do sứckhỏenênkhôngthamgiađượchộinghị, chonêntôiLead Designer sẽthay team meat củatôitrìnhbàybàinóinày
- Mìnhxinđượckể 1 câuchuyện, Vinovađượcthànhlậptừnăm 2010 tại Singapore,bướcđầuchúngtôipháttriểncácdịchvụcho web và mobile. Đếnnăm 2012, chúngtôibắtđầubướcchânvào mobile game.Chúngtôicoimìnhlàcácchiếnbinh, chiếnđấuvớinhữngthửtháchthúvịtrongthếgiớicôngnghệ. Và Mobile Game là con quáivậtrấtkhủngkhiếpvàthông minh đểchúngtôichinhphục.
- Vâng,vàđâyđộingũlàm game củachúngtôivới 6 thànhviên, chúngtôiđãtựchọnchomìnhvũkhíđểramặttrậnDev đã chọnvũkhí cocos2d-xlàcôngcụ open soucerấthữuíchCác artist chọnvũkhílà PhotoshopCác animator đã chọn Anime Studiolà 1 tool phổbiếntronglàmhoạthình
- Tại sao lại chọn "Anime Studio"? Không phải đâylà một công cụ chuyên dụng cho việc làm phim hoạt hình hayquảngcáo 2d haysao?Đúng, vìnólà 1 côngcụ animation 2D rấtmạnh. Vàchúngtôiđãcó 1 sốkinhnghiệmlàmhoạthìnhtrướcđó.Cáchmàchúngtôisửdụnglà:Anime Studio exportcác animation rachuỗiảnh. Như bạn đã biết, kỹ thuật này được gọi là frame-based animation
- Saukhiđãlậpteam, chọnvũkhíchomìnhchúngtôitựhỏinênlàm game báđạo, game mìnhthíchhaylàmnhững game nhỏtrướcđểlấykínhnghiệm? Chúngtôilànhữngngườimớitronglĩnhvực game, vàcònthiếunhiềukinhnghiệm, chonênđểcóđượckinhnghiệmvànhữngkĩnăngphùhợp, chúngtôiquyếtđịnhlàmcácbàitậpnhỏtrước.
- Game đầutiêncủachúngtôilàGasboy, một game nhỏvàđángyêu.Bạnnghiêngchiếcđiệnthoạisangtráisangphảiđểđiềukhiểncậubégasboybaytrongvũtrụđểănsaovàtránhchứngngạivật, bạnbaycàngxathìđiểmsốcàngcao
- VớiGasboychỉcó 1 nhânvậtvà 1 animationvàchỉtốncó 15 frame ảnh, Anime studioxửlí 1 cáchhoànhảo.
- Tiếptụcluyệntập 1 bàitậpkhóhơn, game T2 củachúngtôilàGod’s Rage: Câuchuyệnlà 1 chàngtraiyêu con gáicủavịthầnvàtìmmọicáchvượt qua mọigiankhổđểđếnđượcvớingườimìnhyêu. Nhưng hay ởchỗbạnkhôngđiềukhiểnchàngtraiđó, thayvàođóbạnlàChúatrờingăncảnchàngtraiđếnvới con gáicủamình, tại sao..bởivìbạnghétanhta, anhtayêu con gáibạnvàbạnnàocó con gáimớilớnchắcsẽhiểuđiềuđó ^^
- Với 1 game thúvịnhưvậychúngtôilàmrấtnhiều animation chochàngstickman v 1 nhânvậtvới 17 animation vàlênđến 400 bứcảnhchỉtốnhơn 1 Mb dung lượngTínhđếnthờiđiểmnày, thìchúngtôivẫnhàilòngvới frame based animation và Anime Studio qua 2 game: GasBoy & God rage
- Sau 2 game, chúngtôiđãcósựtựtin, kinhnghiệm, độchắcchắnvềcôngcụđểthựchiệnlàm 1 game lớn , màchúngtôiưuthíchvàđammêtừlâu, đóchínhlàUltimate Arrow Ultimate ArrowLà 1 game thủthànhhơnlàchiếnlược, khônggiống 1 số game nổitiếngnhư: fiedrunner, haykingdom rush. Ở UA bạnnhập vai AnDươngVươngđiềukhiểnnỏthần, gọilínhđểbảovệthànhtrì.
- Chúngtôiđãđầutưkhánhiềuvàocốttruyên, UA đượcpháttriểntừcâutruyệntruyềnthuyếtViệt Nam đólàAnDươngVương, Ngàiđãdùngchiếcnỏthầncủamìnhđểchốnglạiquânđịch, mỗiphátnỏthầnbắnragiếtchếthàngtrăm, hàngngànquânđịch. Trong UA thìchúngtôicórấtnhiềunhânvật, banđầuthìanimationcácnhânvậtnhỏ, cácloạilính, loạiquáithì Anime Studio xửlírấthoànhảo, cứngỡlàmọichuyệnêmxuôi..Nhưngxuấthiện 1 conBossđầutiên
- Đóchínhlà: Golem ném đáHãy để tôi giới thiệu với bạn con boss của chúng tôi:Như bạn có thể thấy, con quáivậtnày thực sự lớn và ... cũng ... Rấtlà nặng.Với tổng số 8 animation khác nhau, nóngốncủa chúng tôi 20MB dung lượngđĩavà50MB bộ nhớ RAM.Game lúcnàythường crash xuyênthiếubộnhớram.Chúngtôiđãcốgắngtôiưuvềchấtlượnghìnhảnhvàsố frame nhưngvẫnbị crash
- Chỉriêngvới 1 con Boss nhưvậymàcácbạnthửtưởngtượng 5 con boss sẽnhưthếnào ?Chúngtôibuộcphảitìm 1 phươngánkhácđểthaythếđểgiảiquyếtvấnđề animation chonhữngnhânvậtlớn
- Ngaytừnhữngngàyđầubắttayvàolàm game, chúngtôicũngđãnghiêncứuvàbiếtđượckháiniệm: Frame base animationvà Modular animationModular animation có 1 sốưuđiểmhơn ở chỗ:Cácbộphậnnhânvậtđượctáchrờira, thông tin về animation đượclưu ở file text riêngbiệt, do đótốnrấtítbộnhớ, giảiquyếtvấnđềbộnhớmàchúngtôiđãgặpphảiTuynhiênvàothờiđiểm ban đầuchúngtôilàm game chưacócôngcụnàođược public, cáccôngtylớnthườngpháttriểnriêngchomình 1 côngcụ animation, vàkhông share rangoài. Đâylà 1 trởngạivớihầuhếtcácstuidonhỏ.Modular animation: là animation dựatrêncácbộphậnnhânvậtFrame baselàkĩthuậtcũ, tuynhiênlạithiếutínhlinhhoạttốnnhiềubộnhớ
- Lúcbấygiờ qua tìmhiểuchúngtôibiếtđượcrằngcó 1 lậptrìnhviêntên Nathan Sweet ôngđãquyếtđịnhthayđổitìnhhìnhbếtắcđóvàquyếtđịnhlàm 1 dựán animation dựatrênxương. Đóchínhlà Spine.Chúngtôicũngđãtìmhiểuvàtheodõiquátrìnhpháttriểncủa Spine ngaytừnhữngngàyđầupháttriểnVàthật may mắnđúnglúckhichúngtôigặpvấnđềvềbộnhớvà dung lượnglưutrữthì Spine đãchínmuồivàđãhỗtrợ Cocos2d-xHỗtrợ (cocos2d, unity, và 1 số framework làm game khác, bạncóthểxemtrêntrang web)http://esotericsoftware.com/spine-runtimes/
- Sau khi dùngchúngtôinhậnthấyđâylà 1 côngcụrấttốtvàcónhiềuưuđiểm, bạnchỉmấtnửangàyđểhọcnó1.Dễ học2.Tách biệtgiữa Rotate, translate, scale3.Key frame choxươngdễdàng4.Nội suylàmmượtchuyểnđộng
- Animators sauvàigiờdùngthửthìđãrấtthích Spine vìgiaodiệnđơngiản, dễdùng, animation mượtmàMột hệ thống key-frame lớn cho phép animator tạo ra hình ảnh đẹp, dễ dàng, trong một thời gian ngắn.Vàkhi animation xongviệctíchhợpvào game cũngrấtdễdàng,Đểcácbạndễhình dung tôisẽtrìnhbày qui trìnhlàmviệcvới Spine
- Đây là quy trình làm việc:1. Boctáchhìnhảnhcácbộphậntừ PTS2. Xây dựng bộ xương3. Đính kèm hình ảnh vàoxương4. Làmanimaiton5. Xuất ra file JSON6. Importcả file Jsonvà h/ả vàotrongCocos (sửdụng texture packer đểtạora 1 spritesheet )7. Nhập vàotrò chơi
- Dễdùngrồi, thíchrồi, nócógiảiquyếtđượcvấnđề : Dung lượnglưutrữvàbộnhớsửdụng hay không?Spine nàycó sử lí được vấn đề chúng tôi đang gặp phải hay không?
- Câu trả lời là có!Chúng tôi có thể tiết kiệm một nửa lưu trữ và bộ nhớ, vàtuyệtvờihơn animation nuộtnàhơn frame base rấtnhiềuChỉtốn 1 nửa dung lượngmà animation nuộtnàhơnrấtnhiều
- Oh, đó không phải là điều duy nhất. Spine còn nhiều thứ hay ho hơn nữa
- Linhhoạtthứ 1: Làcóthểtựchuyểntiếpgiữa 2 animation 1 cáchtựđộngvàrấtmượt=> làm mượt mà sự chuyển giao giữa các animationCách tay từ từ đưa xuống và có sự chuyển giao
- Lậptrìnhđượcchuyểnđộng:Điềukhiểnkhungxươngđượctrong codeChúngtacóthểdùng code đểđiềukhiểnxương:nhưcáchbạncóthểthấy, chúngtacóthểđiềukhiểnxươngtaytheohướngnhấtđịnhtrongkhinhânvậtvẫnđi
- Lậptrìnhthứ 2:Chúngtacóthểkếthợpđượcvớicác engine vậtlí (vd Chipmunks / Box2D) trêntừngbộphận, kếtquảdạtđượcxácđịnhvachạmđượcchuẩnhơnỞ dạngframebaseluônlàhìnhchữnhậtnhưngvới skeletal based animaitonthìbạncóthểtươngtáctrêntừngbộphậncủanhânvật
- Spine córấtnhiềuđiểmtuyệtvờituynhiêncũngcó 1 điểmhạnchếnhấtđịnh
- Nó tiêu thụ nhiều CPU(chíp) và GPU(cardmànhình) trong thời gian chạy (trong so sánh với frame base animation)Chúng tôi đã làm một thử nghiệm nhỏsắpxếprấtnhiềunhânvậtđangchuyểnđộnglênmànhìnhvàđosựkhácbiệtvề frame rate giữa 2 dạng animationFPS là: frame hình trên 1s
- Vàđâylàkết quả: Màuxanhthểhiện: Frame based animationMàuđỏthểhiện: Skeletal based animationNếudùng skeletal based animation trên 50 nhânvậtthì frame rate sẽgiảmxuốngdướimức 60fpsTrongkhiđónếudùng Frame Base thìkểcảcóđến 200 nhânvậtthì frame rate vẫntrênmức 60fpsFrame rate: Sốlượng frame mà device cóthểvẽratrong 1s60FPS làmứclýtưởng
- Tóm lại, đây là những gì đáng ghi nhớ của 15 phút vừa qua:Spine là một công cụ làm2D skeletal animation tuyệt vời cho gameNólinhhoạt, lậptrìnhđượcchuyểnđộng, dung lượngnhỏTuynhiênlạitốnnhiềuvềtínhtoánxửlí. >Vìvậychúngtanêndùngcả 2 cáchlàm animation trong game
- Vàlàmsaođểkếthợp 2 dạng animation trong game:Frame Base animation cho các nhân vật nhỏ, nhiềuđôngSkelatal based animation cho các nhân vật rất lớn, chi tiết hoặc những nhânvậtmìnhmuốnđiềukhiểntrong game.Chắchẳnbạnsẽbănkhoănliệuvới 1 phầnmềmmớinhưvậy, liệunócóđáng tin đểsửdụng hay không?
- Và điều đó đã được chúng tôikiểmchứng khi đoạt giải nhất tham dự hội nghị game quốc tế: Casual connect Asia 2013Một phần thành công lớn của chúng tôi là từ animation trong game, nó quá nuột nà, và hầu như ai xem cũng rất bất ngờ.Game của chúng tôi cũng được rất nhiều publichsher chú ý đến và trong đó có 2 công ty: Kongregate của Anh phát hành Kingdom RushWorker Bee của Nhật chuyên nội địa hóa gameBước đầu thành công chúng tôi sẽ cố gắng hết mình phát triển thật tốt game UA Và các thể hiện game độc đáo, cá tính, có nét riêng để cho gamer trong và ngoài nước yêu thích.
- Cảmơncácbạnđãlắngnghebàichiasẻcủamình, nếucócâuhỏi hay thắcmắcvề Spine animation mìnhxinsẵnsànggiảiđápvớicácbạnFrame base animation: xuấtrachuỗiảnhModuler animation : Không có xương, cũng tách riêng các bộphânSkeletal based: Tách riêng và có bone để điều khiển
- Vì spine ra đúng thời điểm tôi cầnThằng làm Spine lại là tác giả của 1 framework làm game khác lib GDX (tương tự cocos)Vì nó cũng là thằng làm game, mình tin tưởng và nó hiểu game cần gì, mình tin tưởng vào điều đó