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

Hi mọi người!

Animation là 1 phần không thể thiếu trong Game. Ở bài trước, chúng ta đã cùng nhau nghiên cứu cách tạo Animation bằng Sprite Sheet. Cách này có ưu điểm là đơn giản dễ làm, tuy nhiên sẽ gặp phải vấn đề về bộ nhớ  nếu khối lượng Sprite Sheet lớn, số lượng ảnh chuyển động phải vẽ là khá nhiều, nếu game mà có nhiều nhân vật chuyển động thì chắc cũng hơi oải nhỉ.

Trong bài này mình sẽ hướng dẫn các bạn Cách sử dụng CocoStudio để tạo Animation. Loại Animation tạo ra bởi CocoStudio có ưu điểm là mềm mại hơn, linh hoạt hơn, giải quyết được vấn đề bộ nhớ, quy trình làm cũng không quá khó. Đó chính là Skeleton Animation - Chuyển động dạng khung xương

Nội dung chủ yếu của bài:

+ Giới thiệu về CocoStudio và các chức năng chủ yếu của nó
+ Làm quen với giao diện thiết kế Animation
+ Các bước thiết kế Animation từ việc: dựng khung xương, kéo thả hình ảnh, gắn xương, tạo chuyển động với keyframe trên timeline

OK, thế thôi nhỉ! À, bài này khiến mình hơi phân vân trong việc

+ Hướng dẫn chi tiết bằng hình ảnh
+ Hay quay video + chú thích với từng bước

Thôi, cứ làm cách 1 đã, Video hẹn hôm sau

B1 - Giới thiệu về Cocos Studio, Các chức năng của nó

CocoStudio - cái tên nói lên tất cả. là phần mềm chuyên để thiết kế giao diện, animation, scene, data cho Engine Cocos2d-x. Soft nào mà gắn chữ Studio là bạn biết rồi đấy, chuyên để design.

Bạn hoàn toàn có thể chỉ dùng mỗi Engine Cocos2d-x để build game với từng dòng Code. Tuy nhiên nhờ sự hỗ trợ mạnh mẽ của các extension, plugin hoặc các soft của bên thứ 3 như CocoStudio mà việc thiết kế Game của bạn đơn giản đi rất nhiều. Tất nhiên nó sẽ không làm cho việc thiết kế game đơn giản tới mức chỉ việc ngồi rung đùi, uống cà phê và kéo thả đâu. Nó chỉ làm đơn giản hóa 1 vài công đoạn viết code cho bạn thôi. Tất nhiên đều là những công đoạn quan trọng cả.

Giao diện chính

Những tính năng chủ yếu của CocoStudio

+ Thiết kế Animation

+ Thiết kế Giao diện

+ Thiết kế Màn chơi

+ Thiết kế Data

Bạn có thể download bản mới nhất tại trang chủ của Cocos2d-x. Hiện phiên bản mới nhất là 1.4.x, hỗ trợ Engine 3.1.1

B2 - Làm quen với giao diện thiết kế Animation

Các bạn mở CocoStudio lên, chọn nút đầu tiên : Animation Editor

Giao diện thiết kế của phần Animation như ảnh dưới

Chọn New Project ở bên trái, trọn tên và vị trí lưu Project

Và dưới đây là toàn bộ giao diện WorkSpace của CocoStudio 1.4.x,

Chế độ Pose Mode ( dựng xương, và hình )
















Chế độ Aniatmion : Dựng hoạt hình

Sau đây sẽ là các lệnh, và nút lệnh cơ bản CocoStudio. Thực sự khi mới bắt đầu dùng thì mình cũng thấy hơi khó khăn, do chưa quen nút lệnh, menu chuột phải thì rất ít tác vụ. Nhưng chỉ sau khoảng 1h đồng hồ tìm hiểu là các bạn biết cách sử dụng thành thạo phần Animation này ngay ấy mà. Mình chắc chắn đấy.

* Các menu chính

FILE:

EDIT

VIEW

WINDOW

2 Menu Help, Language thì thôi nhé. Các menu kể trên rất gọn gàng và đơn giản phải không.

* Các Nút lệnh

Các nút màu đỏ là khá quan trọng, thường hay dùng nhé, 2 chế độ Pose Mode và Animation đều dùng chung các nút này.

Quên 1 nút chưa chú thích là nút Selection hình mũi tên và dấu +

* Các khung cửa sổ cơ bản

Cửa sổ Action và Timeline chỉ xuất hiện ở Mode Animation nhé

Cửa sổ ẩn, Bones Relationship ( quan hệ xương ), trông khá giống cây gia phả nhỉ, Xương "cha" nằm phía trên, xương "con" nằm phía dưới, khi di chuyển xương "Cha", xương "con" sẽ di chuyển theo

Cửa sổ Resource Editor ( Sửa tài nguyên ), ở đây bạn có thể chỉnh vị trí điểm neo ( dấu + đỏ ) là điểm gắn vào xương. Còn mấy cái vẽ khung hình ( vẽ ra khung màu xanh ) trong này mình cũng chưa biết ý nghĩa để làm gì nữa.

Xong bước làm quen với Giao diện, Work Space của CocoStudio rồi, chúng ta sẽ đi vào 1 phần rất hay của bài hôm nay, đó là tạo Dựng khung Xương

B3: Thiết kế Animation qua từng bước

1/ Dựng khung xương

Mở khung làm việc, chọn Create Bones ( Alt + K ), vẽ 1 bộ khung xương người như sau, chỉ việc kéo chuột từ điểm này tới điểm kia thôi, khi cần di chuyển xương, nhấn Alt + S, khi cần xoay xương chọn nút "Cử Động Xương". Cần kéo dài, hoặc rút ngắn xương hãy chọn Alt + D. Trông khá giống khung xương người nhỉ

2/ Liên kết khung xương với nhau, mục đích để chúng chuyển động hài hòa, ăn ý với nhau gần giống thật nhất
( Ví dụ: liên kết 2 xương tay, 2 xương chân, liên kết chân với người, đầu với người ) Càng nhiều liên kết thì chuyển động càng uyển chuyển, nhưng cũng khó quản lý hơn đấy

Có 3 cách để liên kết khung xương
C1 : Sử dụng menu chuột phải, chọn Binding Parent ( Alt +P ) : bạn Click chọn 1 Xương - mục đích làm xương con ( nó sáng màu ) sau đó chuột phải chọn Binding Parent ( hoặc nhấn Alt +P ), sau đó chọn 1 xương Cha, 1 thông báo Binding thành không sẽ hiện ra, như sau

C2 : Sử dụng bảng quan hệ Bones RelationShip, với cách này bạn làm như sau: Kéo xương con vào xương cha là xong, mối quan hệ cha con sẽ được thể hiện qua mũi tên, đầu nhọn mũi tên là con, đầu ko có mũi tên là cha
C3 : Sử dụng nút "Gắn xương" để chuyển sang Binding Mode, rồi kéo xương Con vào xương Cha

Mỗi cách có 1 điểm mạnh điểm yếu riêng:

- Cách 1 nhìn được vị trí các xương, có thể xác định được xương nào với xương nào, nhưng ko thể nhìn thấy được mối quan hệ giữa các xương, ko biết xương cha con,
- Cách 2 không nhìn thấy vị trí các xương, vẫn có thể xác định được xương nào = cách click vào layer, nhìn thấy được mối quan hệ cha con.
- Cách 3: nhìn được vị trí các xương, không nhìn thấy mối quan hệ, nhưng có khả năng kéo thả tiện dụng

Hãy phối hợp cả 3 cách để xây dựng khung xương linh hoạt.

* Lưu ý khi tạo liên kết xương:

+ 1 Con không thể có >1 Cha, Khi bạn tạo cha mới cho 1 xương con đã có cha, thì Xương con sẽ nhận Xương Cha sau cùng
+ 1 Cha có thể có nhiều con
+ 1 Xương con, lại có thể là Cha của 1 hoặc nhiều xương con khác

+ Bạn không đảo liên kết Cha - Con, Ông - Cháu với nhau khi còn liên kết Ông - Cha - Con. Tức là bạn ko thể thiết lập cho Cháu lại làm "bố" của Ông, và Con ko thể làm "bố" của Cha. Giống với thực tế đấy chứ. Nhưng khi bạn hủy bỏ liên kết Ông - Cha - Con đi, thì bạn hoàn toàn có thể chọn xương nào làm Cha, xương nào làm Con cũng được, nhưng phải tuân thủ 3 điều trên

Hãy nắm vững 3 quy tắc đó là bạn sẽ dựng được khung xương dễ dàng

Đây là bảng khung xương mình đã dựng ( hình của bạn có thể khác )

OK giờ sang bước tiếp theo là, gắn "da thịt" cho bộ xương này. Có bạn sẽ thắc mắc, lấy "da thịt" này ở đâu? Da thịt ở đây chính là hình ảnh của nhân vật bạn định tạo ra trong game, hình ảnh nhân vật thì bạn phải vẽ rồi. Khi vẽ nhân vật bạn hãy hình dung ra nhân vật sẽ cử động như thế nào, càng nhiều cử động trên cơ thể thì khung xương càng phức tạp. Đơn giản thì chia cử động nhân vật thành các phần: Đầu, thân, tay, chân, bàn chân, bàn tay, vũ khí..... Khi có nhân vật tổng thể bạn phân chia hình ảnh ra các phần Đầu, thân, tay, chân, bàn chân, bàn tay, vũ khí....có thể mỗi phần chia sẽ lẹm của nhau một tý nhưng ko sao đâu, làm thế nào khi ghép lại trông không quá rời rạc là được.

Ở bài này mình lấy sẵn thư viện của CocoStudio để minh họa nhé, tất nhiên chỉ lấy phần tài nguyên hình ảnh thôi.

Nhân tiện về phần Tài nguyên của CocoStudio mình giới thiệu luôn là, nó có thể Import các loại tài nguyên sau đây:

+ Hình ảnh
+ File Json
+ File Plist
+ File Fla?? ( Chưa thử )

Rất phong phú phải không, hình ảnh thì bình thường rồi, nhưng 3 cái sau rất quan trọng nhé, JSon, Plist có thể dùng cho Particle, Physic, tuyệt không?

* Đắp da thịt cho Xương
+ Trước tiên bạn Import Tài nguyên vào bằng lệnh Import Folder / hoặc Import Files ( Chuột phải ở ô Resource ), rồi chọn Tài nguyên ( Image, Json, Plist, Fla)

Tiếp theo là bước quan trọng, đắp da, thịt cho nhân vật, có 2 cách như sau

+ Cách 1: Kéo thả từng ảnh vào WorkSpace : ví dụ ảnh cái đầu ( bạn có thể phóng to thu nhỏ ảnh cho phù hợp khung hình. Sau đó chuột phải vào Ảnh, chọn Binding Bones( Alt + I) rồi tiếp theo chọn cái Xương đầu là xong. Một khi đã gắn Thịt vào Xương, bạn không thể tách ra được, không còn menu chuột phải trên hình ảnh, bạn chỉ có thể xóa Xương đó khỏi khung xương, hoặc Ctr + Z

Để kiểm tra Ảnh đã được gắn vào Xương chưa, chọn nút Xoay Xương, nếu thấy ảnh xoay theo thì là thành công

+ Cách 2: Bạn chọn vào Xương cần gắn, nhìn vào bảng bên phải, ở Tab Layer, xương nào được chọn sẽ sáng lên, tiếp đó bạn Click vào Tab Properties. Tab này chứa các thông số của Xương như: Tên, chiều dài, góc quay, tọa độ, GRAPHIC. bạn có thể dùng các thông số này để hiệu chỉnh Xương khi chưa gắn Ảnh, hoặc hiệu chỉnh cả Ảnh khi được gắn vào Xương. ( Nếu không nhìn thấy 2 Tab này hãy vào menu Window/Reset Window Layout)

Bạn để ý 1 ô quan trọng, GRAPHIC, hãy kéo hình ảnh vào đây, nó sẽ gắn luôn với Xương được chọn, nhưng hình ảnh sẽ không đúng tỷ lệ mong muốn, và thường bị quay đi 1 góc. Hãy chỉnh lại tỷ lệ ảnh, và góc quay với Lưu ý bên dưới.

* Lưu ý đặc biệt quan trọng

2 Cách đều có cái hay riêng:

Cách 1: Kéo thả ảnh, chỉnh ảnh - xoay ảnh thoải mái rồi mới gắn xương. Tuy nhiên có thể gắn nhầm xương, hoặc chọn nhầm ảnh ( do nhiều ảnh ) để gắn.

Cách 2: Khó để nhầm ảnh hoặc Xương, gắn phát dính luôn,

Và cái dở:

Cách 1: Bạn không thể tách xương khỏi ảnh, tuy nhiên vẫn có thể dùng Ctrl + Z để trở lại bước chưa gắn xương

Cách 2: Bạn cũng ko thể tách xương khỏi ảnh, và Đặc Biệt, bạn ko thể dùng Ctrl + Z để trở lại bước trước khi gắn Xương, nghĩa là bạn chỉ có thể mở lại Project ( nếu chưa lưu bước gắn xương mà thôi ), hoặc chỉ có thể xóa Xương và Ảnh khỏi khung xương. Sẽ rắc rối nếu Xương đó là xương Cha của nhiều xương, lại phải gắn khung xương lại rồi.

Và có 1 điều khó chịu khi làm theo cách 2  ( thậm chí là cách 1) . Khi gắn xương theo cách 2, ảnh sẽ bị quay 1 góc, bạn phải làm như sau:
- Trước tiên Bạn phải chỉnh tỷ lệ hình ảnh = 4 nút vuông ở 4 góc ảnh, nhớ giữ SHIFT
- Sau đó bạn mới quay ảnh = 1 nút vuông nằm trên 1 Cạnh của ảnh
- Nếu ko làm theo thứ tự này, tức bạn xoay ảnh trước, rồi mới chỉnh tỷ lệ, thì sẽ cực khó chịu vì phương chiều sẽ bị đảo lộn rất ức chế. Bạn thử đi là biết.

Vậy mình khuyên các bạn dùng cách 1 đi, bớt khó chịu hơn cách 2

Và đây là khung xương đã gắn da thịt của mình ( Mình lấy tạm Project của CocoStudio nhé )

Mình dừng bài học ở đây nhé, cũng khá dài rồi. Phần Animation mình hẹn ở Phần 2 nha. Trong bài này chúng ta đã học được:

+ Các chức năng chính của CocoStudio
+ Làm quen giao diện WorkSpace
+ Dựng khung xương, gắn xương với nhau
+ Đắp "da thịt" cho bộ xương

Chào và hẹn gặp lại các bạn ở bài sau!

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