Bài 24 Giới thiệu CocoStudio - Công cụ tạo Animation cực cool - Import game (Part 2)

Hi đầu tuần!

Ở bài 23, mình đã giới thiệu sơ qua với mọi người về CocoStudio - 1 Tool khá hay để tạo Animation. Các bạn đã biết cách dựng khung xương, gắn xương với nhau, gắn ảnh Texture với xương rồi phải không, tuy lúc đầu sẽ gặp chút khó khăn ( thậm chí là bực mình ) khi thao tác nhưng chỉ cần bỏ ra 1 tiếng là bạn sẽ quen ngay với công việc "xương xẩu" này.

Trong bài tiếp theo này, mình sẽ hướng dẫn mọi người cách để tạo Animation cho nhân vật. Nếu ai đã từng học Flash rồi thì bước này thật sự dễ dàng nhé, vì nó khá giống. Tuy giống là vậy nhưng mình thấy Flash có một cái hơn đó là có thể can thiệp sâu bằng mã AS mà trong CocoStudio không thể can thiệp bằng script được ( Ai học Flash + AS rồi thì cho mình so sánh nhé, vì mình ko học ). Nhưng, vâng lại nhưng, CocoStudio lại có thể IMPORT Flash Project vào trong Studio, và hơn nữa Import được cả file Plist ( Particle - hiệu ứng, Physics ?? ) có sẵn từ bên ngoài vào. Vậy là bạn không phải lo Studio không thể tạo được Animation và Effect đẹp mắt nha.

Trong bài này mình sẽ hướng dẫn các bạn các công việc sau:

+ Sử dụng Timeline tạo Animation với Animation Mode
+ Xuất ra dịnh Resource phù hợp với Coco2d-x V3
+ Import vào game, QUAN TRỌNG nha

Bắt đầu nào!!!

B1 - Sử dụng Timeline tạo Animation + Export Resource

Bạn mở project MyAnimation của bài trước ra, với khung xương, texture đã được tạo sẵn ( Các bạn hãy nghiên cứu lại bài 23 một chút để chuẩn bị tốt cho bài này - Nhất là các thao tác với chuột ). OK?

Bạn bật sang chế độ Animation, sẽ hiện ra bảng Timeline như hình dưới

Trong ô Animation List, là danh sách các cử động - chuyển động của nhân vật, bạn có thể xóa, tạo mới, đổi tên, copy bằng menu chuột phải.

Tại ô Timeline bên cạnh liệt kê ra các Layer tạo nên nhân vật. Ở đây bạn sẽ dùng Timeline + Keyframe + di chuyển các đoạn xương để tạo nên chuyển động của Nhân vật. Các điểm cần lưu ý liên quan tới Animation:

+ Mỗi Layer được tạo chuyển động bằng 1 đường Timeline, màu trắng ( bên phải ). 

+ Layer nào ko có timeline có nghĩa là không xuất hiện trong chuyển động

+ Các số 0,5,10,15 là số khung hình / giây. Có thể ngầm hiểu là Thời gian luôn cũng được

+ Các dấu tròn là các Keyframe. Keyframe là gì, chính là những Frame đánh dấu sự thay đổi của hướng  chuyển động, hoặc thay đổi cách chuyển động ( hiệu ứng - tốc độ )

Hướng chuyển động: 

- Bạn hãy hình dung khi di chuyển từ A tới B, rồi tới C ( A,B,C không thẳng hàng) thì ta sẽ đặt 3 Keyframe tại thời điểm chuyển động qua A, B, C. 

- Hoặc khi chuyển động từ A tới B, rồi quay lại A thì sao? Bạn cũng sẽ phải đặt 3 Keyframe tại thời điểm chuyển động qua A, B, A. Nghĩa là khi có sự đổi hướng, đảo chiều chuyển động, thay đổi vận tốc, hiệu ứng thì thường đặt Keyframe tại điểm thay đổi đó. 

- Vậy với cung tròn thì sao, bạn hãy cố gắng chia cung tròn ra làm các đoạn ngắn rồi thêm Keyframe vào các đoạn chuyển hướng đó. 

Cách chuyển động:
Tạm hiểu là hiệu ứng hoặc tốc độ chuyển động ( bạn nhìn thấy ở bảng nhỏ bên phải Timeline là Custom Curve ko - chính hắn ). Bạn đặt con trỏ vào Keyframe, rồi chọn 1 hiệu ứng, rồi chạy thử xem, sẽ thấy khác biệt.

Tất nhiên trên 1 đường chuyển động thẳng, bạn có thể đặt nhiều hơn 2 Keyframe cũng ko sao, khi đó hướng chuyển động là ko đổi, nhưng kiểu cách chuyển động sẽ thay đổi ( bằng cách áp dụng Custom Curve) hoặc vận tốc thay đổi ( thay đổi số khung hình ). Bạn sẽ thấy cùng 1 đường thằng nhưng cách chuyển động - vận tốc chuyển động có khác nhau.

* Một số lưu ý với Keyframe

+ Layer ko có Keyframe nào, sẽ không hiện lên trong chuyển động.

+ Keyframe hide ( màu đỏ ) để ẩn Layer tại timeline đặt Keyframe cho tới khi gặp 1 Keyframe hiện ( màu trắng ) . Bạn dùng menu chuột phải để Set thuộc tính.

+ Chuyển động giữa 2 Key gọi là Tween Frame

+ 1 Chuyển động được tạo nên bởi >=2 Keyframe.

+ Số khung hình giữa 2 Keyframe càng lớn, chuyển động càng mượt, và càng chậm ( với cùng 1 đoạn đường ) - Dựa vào đây bạn có thể chỉnh vận tốc nhanh chậm của chuyển động. Tăng số khung hình sẽ cho vận tốc chậm và ngược lại. 

Bạn Test thế này:

- Tại Key 1 (timeline 0) bạn đặt đối tượng ( 1 xương gắn 1 texture cho dễ nhìn ) tại vị trí A.

- Kéo đối tượng ra vị trí B khác A ( xa xa vào cho dễ nhìn ), đặt con trỏ tại timeline 40, chuột phải/Add frame - Hoặc bạn dùng nút Record Frame bên dưới nút Play ấy, đây sẽ là Key2

- Nhấn Play xem kết quả

- Bây giờ kéo Key2 lại gần Key1 ( về timeline 10 ), nhấn Play xem kết quả,

- Giờ lại kéo Key2 ra timeline 80, nhấn Play

- Giờ đặt chuột vào Key1, chọn Custom Curve tùy ý, rồi nhấn Play, bạn thấy chuyển động có tí hiệu ứng chưa.

OK, xong phần lý thuyết, Bây giờ chúng ta thực hành chút, Mình sẽ tạo chuyển động bước đi của nhân vật, đặt tên là walk

Bạn làm như sau:

1/ Chuột phải trong ô Animation List, chọn Add Animation, đặt tên là walk

2/ Key1: bạn đặt chuột vào cột Timeline0 của Layer trên cùng, chuột phải / Add Frame. Các Layer bên dưới cũng làm như thế. Vậy là tất cả Layer đều hiện trong chuyển động

3/ Bước này khó nè: Bạn phải xác định trong chuyển động walk thì bộ phận nào ( layer ) chuyển động nhiều nhất, phức tạp nhất thì bộ phận đó sẽ có nhiều Keyframe nhất. Ví dụ là 2 chân và 2 tay. Và bạn phải hình dung cách bước đi của nhân vật như thế nào cho chuẩn: Chân trái + tay phải cùng đưa lên, sau đó thu về, sau đó chân phải + tay trái đưa lên, rồi lại thu về. Chả thấy ai chân và tay cùng 1 bên đưa lên, đưa về cả trừ ông dị dạng. :-((

4/ Ví dụ cái cánh tay trái ( Layer 19 ) sẽ có 5 vị trí Keyframe như sau ( bạn nhớ chọn vào nút Xoay xương - Inverse Kinematics nhé)

+ Key 1 : duỗi thẳng - Timeline 0

+ Key 2: đưa lên trước - Timeline 10

+ Key 3: về vị trí Key1 - Timeline 20, bạn copy Key1 rồi paste vào timeline 20 để đảm bảo đúng vị trí cũ của tay

+ Key 4: đưa về sau - Timeline 30

+ Key 5: về vị trí giống Key1 - Timeline 40, bạn copy Key1 rồi paste vào timeline 40 để đảm bảo đúng vị trí cũ của tay

Thử nhấn Play xem

5/ Cánh tay cầm súng - phải ( Layer 20 ) Cũng tương tự với 5 vị trí Keyframe

+ Key1 : duỗi - TL0

+ Key2 : đưa về sau - TL10

+ Key3: duỗi: Copy Key1 - TL20

+ Key4: đưa lên trước - TL 30

+ Key5: duỗi: Copy Key1 - TL40

* Tay này gồm 2 xương gắn nhau, nên bạn phải di chuyển sau cho khéo 1 tý cho tay hơi cong ở phần khuỷu tay nhé

6/ Chân Phải ( Layer 16 ) Cũng tương tự với 5 vị trí Keyframe , di chuyển giống tay Trái

+ Key1 : đứng thẳng- TL0

+ Key2 : đưa lên Trước- TL10

+ Key3: duỗi: Copy Key1 - TL20

+ Key4: đưa về Sau - TL 30

+ Key5: duỗi: Copy Key1 - TL40

* Chân này gồm 2 xương gắn nhau, nên bạn phải di chuyển sau cho khéo 1 tý cho chân hơi cong ở phần đầu gối nhé

7/ Chân Trái ( Layer 26 ) Cũng tương tự với 5 vị trí Keyframe , di chuyển giống tay Trái

+ Key1 : đứng thẳng - TL0

+ Key2 : đưa về Sau- TL10

+ Key3: duỗi: Copy Key1 - TL20

+ Key4: đưa lên trước- TL 30

+ Key5: duỗi: Copy Key1 - TL40

* Chân này gồm 2 xương gắn nhau, nên bạn phải di chuyển sau cho khéo 1 tý cho chân hơi cong ở phần đầu gối nhé.

8/ Cái đầu ( Layer 14) Chỉ cần 3 Key

+ Key1: ngả về trước

+ Key2: ngả về sau

+ Key3: Copy Key1

9/ Các bộ phận còn lại, như 2 bàn chân ( 27, 17) sẽ chia 5 key giống 2 chân, bạn cũng chỉnh vị trí sao cho bước đi mềm mại chút

Layer 21, là bắp tay phải, cũng giống tay phải cầm súng

* Thân người (15) hầu như không di chuyển, nhưng bạn cũng chia 5 key, với các vị trí đứng thẳng ( 2 chân thẳng ) thì trọng tâm cao  + Và khi bước đi, thì kéo cả khung xương xuống 1 đoạn, nhớ đặt Ruler ở vị trí bàn trân để căn chỉnh giả làm mặt đất, chỉnh cho chuẩn.

Của mình tạo đây

Nếu bạn làm theo 9 bước nhỏ trên đảm bảo không Animation nào làm khó được bạn, mình cam đoan đấy ( trừ Animation của F.A hoặc FAP thì..... :-))

Sau khi chỉnh, bạn thấy ưng ý thì Export ra thôi, chọn File / Export, để các thông số mặc định, chọn đường dẫn rồi nhấn OK. sau đó Copy toàn bộ các file trong thư mục Export đó quăng vào Resource của game là xong. Có 3 file ( plist, ExportJson, png ).

Không biết mình chỉ dùng Text mà ko có ảnh mỉnh họa, mọi người theo dõi có hiểu không?

Còn bây giờ chúng ta đi vào phần quan trọng không kém trong việc tạo Animation, đó là..

B2 - Import vào game

Bạn tạo 1 Project mới, đặt tên WalkMan nhé

Bạn mở file HelloWorldScene.h, thêm vào đoạn code sau:

Phần Include, bổ sung thêm các thư viện Extensions, CocoStudio, và UI

#include "cocos2d.h"
#include "extensions/cocos-ext.h" 
#include "cocostudio/CocoStudio.h"
#include "UI/CocosGUI.h"

USING_NS_CC;
using namespace cocostudio;

Trong Class:
   
private:
cocostudio::Armature* armature; // Cái này mình chịu ko biết giải thích thế nào, tra từ điển cũng ko có nghĩa nào hợp lý.

Trong file  HelloWorldScene.cpp, Ta thêm code như sau

USING_NS_CC;
using namespace cocostudio;

Trong hàm init ()

// Nạp 3 file tài nguyên được xuất bởi CocoStudio, đoạn này xin ko giải thích thêm, hãy đọc thuộc cú pháp này nhé.

ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("DemoPlayer0.png","DemoPlayer0.plist","DemoPlayer.ExportJson");
armature = Armature::create("DemoPlayer");
armature->setPosition(ccp(visibleSize.width * 0.8,visibleSize.height * 0.5));
armature->getAnimation()->playByIndex(0);
armature->setScale(0.25);
this->addChild(armature);

Việc nạp tài nguyên từ CocoStudio đơn giản như vậy đó, Nhưng việc build ra không hề đơn giản nhé, mình cũng đã phải loay hay mất nửa ngày để tìm hiểu cách Build. Đã thế việc Build Android, và Win32 lại rất khác nhau. ( WP8 chắc tương tự Win32, còn IOS + MAC thì ko có máy ). Sau đây mình trình bày cách làm cho các bạn nhé.

1/ Build Android 

Vâng, các bạn để ý thấy đoạn Include sau
#include "extensions/cocos-ext.h" 
#include "cocostudio/CocoStudio.h"
#include "UI/CocosGUI.h"

Lệnh Import file này dùng chung cho Cocos2d-x, và để build Android. bạn phải chỉnh sửa file Android.MK nằm trong đường dẫn walkman\proj.android\jni, như sau

Thêm dòng code

Với phiên bản Engine 3.0
LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static
vào bên dưới của
LOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static
và

$(call import-module,editor-support/cocostudio)

$(call import-module,extensions)

vào dưới lệnh

include $(BUILD_SHARED_LIBRARY)

Với phiên bản Engine 3.1.x, bạn chỉ việc xóa dấu # trước 24dòng
cocostudio_static, 
cocos_extension_static,
$(call import-module,extensions), 
$(call import-module,editor-support/cocostudio)

là ok,

Nếu bạn có thêm Class mới nhớ phải thêm Class vào đoạn này

LOCAL_SRC_FILES := hellocpp/main.cpp \ 

(Đọc bài lưu ý này )

Xong rồi, Build Android thôi, các bạn tự làm nhé, xong rồi quẳng vào Máy ĐT để chạy nhé, ko nên xài máy ảo.

* Có  chút lưu ý, file Android.MK ở 2 phiên bản 3.0 và 3.1.x có 1 chút khác biệt 

+ 3.1.x bổ sung sẵn các mở rộng và đóng dấu #, và có dòng này

$(call import-module,.) khác với bản 3.0 là $(call import-module,2d). Bạn đừng cố sửa đổi thành 2d khi đang xài Engine 3.1.x

+ 3.0 thì cung cấp phần mở rộng ít hơn, và ko có gợi ý trong dấu #, bạn phải có chút kinh nghiệm mới biết thêm gì vào chỗ này khi dùng thêm thư viện.

2/ Build Window

Build cha này phức tạp hơn 1 chút, và nếu có xảy ra lỗi thì quả thật rất khó tìm, liên quan tới code thì không sao, nhưng liên quan tới thư viện thì khó tìm lắm. Mày mò cũng mất khá nhiều thời gian. Và đây là kết quả mày mò của mình sau nửa ngày.

Bạn để ý phần Include

#include "extensions/cocos-ext.h" 
#include "cocostudio/CocoStudio.h"
#include "UI/CocosGUI.h"

Ở trường hợp Android, bạn thêm 2 dòng code vào Android.MK, vậy thì với window bạn phải thêm dòng code tương tự vào đâu. Chính là file walkman.vcxproj ( file VCXPROJ này rất quan trọng nhé, các bạn lưu ý). 

Đầu tiên: 

Bạn hãy xem lại bài 15, cách mình thêm thư viện Box2D vào VS2012 nhé. Ở bài này chúng ta cũng làm tương tự như vậy nhưng ko phải là Box2D mà là 3 thư viện nêu trong INCLUDE kia, quan trọng là bạn phải biết IMPORT đúng thư viện nào, mình chỉ luôn:

+ libExtensions.vcxproj nằm trong đường dẫn walkman\cocos2d\extensions\proj.win32
+ libCocosStudio.vcxproj nằm trong walkman\cocos2d\cocos\editor-support\cocostudio\proj.win32

+ libGUI.vcxproj nằm trong walkman\cocos2d\cocos\ui\proj.win32

Và kết quả mình thêm đây

Đã có 3 lib kể trên ( Nhớ xem lại cách làm ở bài 15 - QUAN TRỌNG nhé). bạn phải nhớ SAVE solution đấy, sau đó bạn mở file walkman.vcxproj trong đường dẫn ( walkman\proj.win32 ) lên xem kết quả

Đã chứa 3 Lib ( và có mã ID ở dưới, vì thế bạn ko thể Add = tay nhé)

Tiếp theo: 

Các bạn search trong file walkman.vcxproj cụm từ AdditionalIncludeDirectories

và tìm tới dòng 72 + 105 (2 vị trí): thêm vào đoạn code sau ngay phía đầu

$(EngineRoot)cocos;$(EngineRoot)cocos\editor-support;$(EngineRoot);

Hoặc bạn có thể thêm các dòng trên ( EnginRoot) bằng VS2012 như sau

+ Chuột phải vào project walkman trong cửa sổ Solution Explorer / References / Configuration Properties / Additional Include Directories ( Ngay dòng đầu tiên ) có các thông số ở ô bên phải. Bạn Click vào đó và chọn Edit nhé, rồi chọn nút New Line - nút đầu tiên ( hình thư mục ). Add 3 cái EngineRoot vào là Xong

OK, chỉ như vậy thôi, là BUILD thành công, có phức tạp quá không nhỉ ???

Kết quả đây, 1 chú Cowboy đang bước đi tại chỗ, hehe. Nếu mình xây dựng hàm Touch cho move tới vị trí Touch thì sẽ có nhân vật bước đi thôi. Để sau vậy

OK, Vậy là đã xong 1 bài khá công phu. Trong bài này chúng ta học được những gì? Rất nhiều cái hay ho:

+ Sử dụng chức năng Animation của CocoStudio thành thạo.
+ Cách Import tài nguyên vào game qua đoạn code đơn giản.
+ Cách Build với Android, Window khi thêm thư viện mới.

Một số điểm còn hạn chế:

+ Mới học được 1/4 chức năng của CocoStudio thôi nhé, Nhân vật mới chỉ có 1 chuyển động. Vậy nếu nhân vật có nhiều chuyển động thì sao? Import Particle, Vật lý vào thế nào đây? Các bài sau hi vọng sẽ có.

+ Mới chỉ có cách build trên 2 Platform Android, Window, còn Mac + IOS, WP8 thì mình ko có máy MAC + Win8 nên chịu, các bạn mò vào proj.ios_mac, proj.wp8-xaml xem có soi được gì ko.

Mình dừng bài ở đây thôi, dài quá rồi.

Hẹn gặp lại các bạn ở những bài sau.

Dowload Source:

+ Cocostudio Project
+ Class
+ Export Resource

À, vào thời điểm mình viết xong bài này, CocoStudio có phiên bản mới 1.5 nhé. Mọi người nghiên cứu có gì HOT

Bài 25: Hiệu ứng Parallax Scrolling