Trình diễn Spine

Spine vượt xa những giới hạn của hoạt hình 2D truyền thống. Các bản trình diễn dưới đây minh họa một số cách mà các họa sĩ, nhà hoạt họa và lập trình viên có thể tận dụng các quy trình làm việc và khả năng được cung cấp bởi Spine để xây dựng những trò chơi tuyệt vời.

Tất cả các bản trình diễn dưới đây đều là trình diễn trực tiếp, sử dụng thư viện spine-ts cho WebGL. Tìm hiểu cách chúng tôi đã sử dụng các Thư viện thực thi Spine trong các bản trình diễn bằng cách khám phá mã nguồn của từng bản trình diễn.

So sánh Spine và sprite sheets

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger
Tốc độ hoạt hình
 

Hoạt hình sprite truyền thống đòi hỏi một hình ảnh cho mỗi khung hình hoạt hình, dẫn đến các sprite sheet khổng lồ. Mỗi hoạt hình bổ sung sẽ làm tăng đáng kể dung lượng đĩa và bộ nhớ của trò chơi, đặc biệt ở tốc độ khung hình cần thiết để phát mượt mà. Rất nhanh chóng, điều này trở nên một khối lượng công việc khổng lồ cho họa sĩ của bạn và sản phẩm cuối cùng bị ảnh hưởng khi số lượng hoạt hình bị giảm bớt do giới hạn kích thước.

Hoạt hình Spine chỉ lưu dữ liệu xương và hoạt hình, kết hợp với một bộ hình ảnh duy nhất được tái sử dụng cho mọi hoạt hình. Điều này cho phép bạn làm sống động trò chơi bằng cách nhồi nhét thật nhiều hoạt hình độc đáo. Ngoài ra, hoạt hình Spine được nội suy nên luôn phát mượt mà hoàn hảo, bất kể tốc độ khung hình.

So sánh yêu cầu bộ nhớ và dung lượng đĩa giữa Spine và hoạt hình sprite sheet.

Spine với hoạt hình dựa trên khung hình

Mặc dù Spine phần lớn thay thế nhu cầu hoạt hình từng khung hình truyền thống, hình ảnh vẫn có thể được hoán đổi khi cần thiết. Ví dụ, thay đổi góc nhìn cho phần thân hoặc cánh vỗ, biểu cảm khuôn mặt, hoặc tia lóe nòng súng.

Các cơ chế slot, attachment và thứ tự vẽ (draw order) của Spine cho phép bạn dễ dàng tích hợp hoạt hình từng khung hình vào các hoạt hình Spine hoàn toàn động khác. Thậm chí tuyệt hơn, Spine có thể thao tác các hình ảnh từng khung hình, được minh họa trong bản trình diễn này bằng cách phóng to phần đầu phát nổ của người ngoài hành tinh.

Chuyển đổi và phân lớp

Smooth
Abrupt
Tốc độ hoạt hình
 

Một nhược điểm thường gặp của các trò chơi 2D là thiếu sự chuyển tiếp hoạt hình mượt mà. Trong trò chơi 3D, chuyển cảnh giữa các hoạt hình có thể được tính toán động lúc chạy. Thậm chí có thể trộn các hoạt hình, ví dụ như vừa đi bộ vừa chạy một nửa. Trong các trò chơi 2D không sử dụng Spine, việc trộn là không thể và thường các chuyển cảnh bị khựng. Các họa sĩ có thể tạo khung hình thủ công cho mọi trường hợp chuyển cảnh, nhưng ngay cả điều đó cũng không giúp được khi hoạt hình có thể bị ngắt giữa chừng.

Spine mang những lợi ích từ thế giới 3D trở lại 2D. Thư viện thực thi Spine chuyển tiếp từ một hoạt hình sang hoạt hình khác một cách mượt mà và động, giúp nhân vật của bạn có sự uyển chuyển tự nhiên. Tính phân lớp cho phép trộn hoạt hình chồng lên nhau, ví dụ như chơi hoạt hình bắn súng trong khi nhân vật đang chạy hoặc trộn đi bộ và đi khập khiễng dần dần khi nhân vật nhận sát thương.

Biến dạng mesh

Hiển thị xương
Hiển thị tam giác

Một nhân vật Spine được tạo thành từ các hình ảnh 2D cứng nhắc đã có thể mang lại kết quả tuyệt vời, như Spineboy trong bản trình diễn phía trên. Để mang đến nhiều sức sống hơn cho nhân vật, Spine cung cấp thêm nhiều thủ thuật từ thế giới 3D dưới dạng mesh và trọng số. Với mesh, hình ảnh không còn cứng nhắc và có thể uốn cong cũng như biến dạng theo ý muốn. Trọng số giúp ràng buộc mesh với xương, do đó hình ảnh tự động biến dạng khi xương được di chuyển.

Mesh cũng có thể cải thiện hiệu suất cho trò chơi của bạn, giảm việc vẽ những vùng trong suốt của hình ảnh. Điều này đặc biệt quan trọng trên các thiết bị di động.

Tác phẩm nghệ thuật tuyệt vời cho bản trình diễn này được cung cấp bởi Hwadock (hay còn gọi là dugy). Theo dõi anh ấy trên Twitter và trên blog của anh ấy.

Giao diện (skins)

Skin ngẫu nhiên

Tính năng skins của Spine rất phù hợp để cung cấp tùy chỉnh và đa dạng mà vẫn giữ khối lượng công việc ở mức hợp lý. Chỉ cần tạo hoạt hình một lần, sau đó bạn có thể áp dụng các giao diện khác nhau cho khung xương nhưng vẫn dùng chung toàn bộ hoạt hình. Để có tính linh hoạt tối đa, Thư viện thực thi Spine cho phép bạn kết hợp các phần từ những skins khác nhau lúc chạy, đáp ứng mọi nhu cầu tùy chỉnh.

Skins cho phép người chơi tùy chỉnh thế giới của trò chơi theo ý muốn bằng cách trang bị cho nhân vật của họ những ngoại hình mới, trang phục, vũ khí, và phụ kiện khác. Skins cũng giúp bạn tận dụng tốt hơn các hoạt hình: kết hợp và thay thế hình ảnh cho kẻ địch, vật phẩm, và các đối tượng trong trò chơi để tăng sự đa dạng một cách đáng kể.

Tác phẩm nghệ thuật cho bản trình diễn này có thể được tìm thấy trong gói nhân vật 2D Anim Heroes dành cho Unity.

Động học nghịch (IK)

Ngắm
Hiển thị xương

Spine hỗ trợ động học nghịch, cho phép chuyển động chân thực và linh hoạt mà nếu không sẽ rất khó hoặc không thể tạo ra. Tính năng này cũng cho phép thiết lập rig phức tạp, trong đó các tư thế khó có thể được điều khiển dễ dàng chỉ với một số ít xương.

Bởi vì Spine không dùng phương pháp ghi sẵn hoặc cứng hóa, IK thực sự tỏa sáng khi chạy. Bằng cách định vị xương động lúc chạy, các ràng buộc IK cho phép nhân vật dễ dàng phản ứng với môi trường, ví dụ như ngắm bắn kẻ địch, cho bàn chân bám theo địa hình dốc, và nhiều hơn thế nữa. Trong bản trình diễn này, Spineboy giữ thăng bằng trên một ván lướt bay do người dùng điều khiển trong khi đồng thời chơi một hoạt hình.

Hãy thử! Kéo các vòng tròn màu đỏ để điều khiển tư thế Spineboy một cách động. Nút bắn và nhảy cùng với tùy chọn ngắm sẽ được xếp chồng lên hoạt hình chờ (idle).

Trộn hoạt hình dạng cộng

Khi phát hoạt hình trên các track riêng biệt, tư thế từ track dưới thường bị ghi đè bởi track cao hơn. Với một track dạng cộng (additive), tư thế của nó được cộng vào kết quả của track dưới. Điều này cho phép trộn tư thế từ nhiều hoạt hình độc lập với mức ảnh hưởng khác nhau, như các biểu cảm khuôn mặt khác nhau ở mức 50% vui, 20% tức giận, và 30% phấn khích.

Con cú trong bản trình diễn này có 4 hoạt hình, mỗi cái cho một hướng. Tư thế độc lập của mỗi hoạt hình được trộn lại dựa trên vị trí của con trỏ chuột so với trung tâm khung hình.

Ràng buộc đường dẫn

Hiển thị xương & đường dẫn

Thường thì một bộ phận của nhân vật đi theo một đường dẫn mở hoặc kín. Thay vì phải thiết lập khung hình thủ công cho chuyển động này, ràng buộc đường dẫn của Spine có thể được sử dụng để xương tự động theo dõi đường dẫn. Đường dẫn đa cung Bézier được tạo từ một tập các điểm liên kết, cho phép bạn bẻ cong và tạo hình cho đường dẫn. Chính đường dẫn cũng có thể được hoạt hình và thậm chí gán trọng số cho xương, nhờ đó đường dẫn tự động biến dạng khi xương di chuyển.

Trong bản trình diễn này, một mesh dây leo được liên kết với các xương bị ràng buộc bởi một đường dẫn. Càng nhiều đỉnh (vertex) trong mesh, dây leo sẽ uốn cong càng mượt.

Ràng buộc đường dẫn cũng có thể được sử dụng rất hiệu quả khi chạy. Di chuyển các tay cầm màu đỏ để thay đổi đường dẫn một cách động và xem dây leo theo sát một cách mượt mà!

Hiển thị xương & đường dẫn

Ràng buộc đường dẫn giúp thiết lập rig mạnh mẽ, như được minh họa bởi Stretchyman trong bản trình diễn này. Đối với cánh tay và chân, mesh được gán trọng số cho nhiều xương nhỏ, sau đó được ràng buộc để theo một vài đường dẫn đơn giản cho chi. Tiếp đó, bản thân các đường dẫn được gán trọng số cho xương, cho phép đường dẫn tự động biến dạng khi xương di chuyển. Thiết lập này cho phép một số lượng lớn xương được điều khiển chỉ bằng vài xương. Không chỉ giúp việc tạo hoạt hình dễ dàng hơn, mà lúc chạy, bạn chỉ cần điều chỉnh vài xương để tạo tư thế động.

Di chuyển các tay cầm màu đỏ và làm Stretchyman nhảy múa!

Cắt xén

Hiển thị tam giác

Đôi khi các phần của hoạt hình cần được ẩn một phần, như ví dụ khi Spineboy xuất hiện từ một cổng. Tính năng cắt xén (clipping) trở nên hữu ích trong những trường hợp này bằng cách giới hạn việc vẽ trong một vùng đa giác. Chỉ các phần của bộ xương nằm trong vùng được xác định trước, có thể hoạt hình, được hiển thị. Điều này cho phép nhiều hiệu ứng không thể thực hiện được, như cửa sổ, hiệu ứng ánh sáng, v.v. Thậm chí có thể chỉ cắt xén một phần của bộ xương, ví dụ như một hoạt hình nhân vật đi qua máy quét X-quang.

Ràng buộc biến đổi

Hiển thị xương & đường dẫn

Hoạt hình cho các khung xương phức tạp với nhiều bộ phận phụ thuộc có thể rất tốn công. Tính năng ràng buộc biến đổi của Spine giúp giải quyết khó khăn này bằng cách mở khóa thiết lập rig mạnh mẽ hơn. Bằng cách ràng buộc các biến đổi xương với xương khác, bạn chỉ cần hoạt hình một xương và các xương khác sẽ tự động được điều chỉnh. Dù có vẻ đơn giản, nhưng các thiết lập rig nâng cao có thể tận dụng điều này để tự động hóa hành vi của bộ xương khi nó được tạo dáng.

Ràng buộc biến đổi cũng rất hữu ích cho các cỗ máy, như chiếc xe tăng trong bản trình diễn này. Thay vì phải đặt key khung hình cho mỗi bánh xe, chỉ cần hoạt hình một bánh xe duy nhất trong khi các bánh xe khác tuân theo nhờ ràng buộc biến đổi. Việc tùy chỉnh offset và trộn (mix) có thể mang lại sự khác biệt cho từng bộ phận bị ràng buộc.

Dải xích trên xe tăng được dịch chuyển tuần hoàn nhờ ràng buộc đường dẫn, điều này sẽ không thể hoạt hình được nếu không có đường dẫn. Đường dẫn được gán trọng số cho bánh xe, vì vậy đường dẫn tự động uốn cong khi bánh xe di chuyển lên xuống.

Độ lệch góc quay
 
Trộn dịch chuyển
 

Trong bản trình diễn này, góc quay của hai bánh xe nhỏ hơn bị ràng buộc bởi góc quay của bánh xe lớn. Ngoài ra, vị trí của bánh xe lớn cũng bị ràng buộc để nó luôn nằm giữa hai bánh xe nhỏ.