Hướng dẫn chi tiết tạo 2D Animation theo khung xương với Spine

Thảo luận trong 'Công cụ, ebooks' bắt đầu bởi Khúc Vương, 20/10/14.

  1. Administrator
    Khúc Vương
    Nhân viên CoronaViet
    Tham gia ngày:
    17/1/14
    Bài viết:
    499
    Đã được thích:
    130
    Nếu bạn thực hiện một trò chơi 2D và cần sprites cho animation của bạn, bạn có thể yêu cầu artist tạo ra những hình ảnh riêng biệt cho mỗi frame của animation, như ví dụ dưới đây:
    [​IMG]
    Sau đó bạn có thể viết một số code để play 1 trình tự các frame để tạo ra sự chuyển động, như bạn thấy ở đây:
    [​IMG]
    Phương pháp này rất đơn giản và hiện giờ vẫn còn khá nhiều dev đang sử dụng nó, nhưng nó có một số nhược điểm lớn:

    Yêu cầu memory và storage cao: Bởi vì bạn phải tạo một hình ảnh riêng biệt cho mỗi frame trong animation nên bạn đang sử dụng rất nhiều memory và storage cho các kết cấu (texture) của bạn. Đây là một vấn đề đặc biệt lớn trên các thiết bị di động, bởi nó có một số lượng hạn chế về memory and texture memory.

    Thực hiện animation rất tốn kém: Vẽ animation frame riêng lẻ như thế này làm artist của bạn tốn rất nhiều thời gian. Ngoài ra, nếu muốn thay đổi animation sau khi họ đã hoàn thành sẽ rất tốn thời gian.

    Bạn (có thể) không thể thực hiện animation cho bản thân: Vì mỗi animation frame cần phải được vẽ tay, nếu bạn là một dev, điều này có lẽ là một cái gì đó bạn cần phải dựa vào artist của bạn mới có thể thực hiện được - thậm chí nếu có một hiệu ứng đặc biệt mà bạn đang theo đuổi bạn vẫn phải hoàn toàn dựa vào artist của bạn.

    Các cách để giải quyết những vấn đề như thế này là tích hợp một cái gì đó gọi là một hệ thống 2D Skeletal Animation vào trò chơi của bạn. Ý tưởng là thay vì save mỗi frame hình cho animation, thay vào đó bạn chỉ cần save từng bộ phận cho cơ thể một cách riêng lẻ như thế này:
    [​IMG]
    Sau đó, bạn tạo ra một file nhỏ để mô tả cách các bộ phận của cơ thể di chuyển xung quanh để thực hiện animation mà bạn muốn, chẳng hạn như đi bộ, chạy, hoặc nhảy…. Bạn cũng có thêm một số code vào trò chơi của bạn để đọc tập tin animation này, tạo sprites cho từng bộ phần của cơ thể và di chuyển chúng xung quanh theo các hướng dẫn trong tập tin.

    Tất nhiên, việc tạo ra một hệ thống 2D skeletal animation bằng tay là một công việc điên rồ. May mắn thay, Esoteric Software đã tạo ra một công cụ tuyệt vời để giúp bạn gọi là Spine.
    [​IMG]

    Spine là một giao diện đồ họa cho phép bạn tạo ra một bộ xương trên mỗi bộ phận của sprite, và di chuyển nó để tạo ra animations, cho phép bạn có thể sử dụng chúng trong trò chơi của bạn.

    Spine còn trang bị một danh sách rất nhiều các runtimes mà Spine hổ trợ trước khi thực hiện, Runtimes bao gồm Unity, Sprite Kit, cocos2d, Corona ...và khá nhiều engine khác nữa.
    [​IMG]

    Trong hướng dẫn này, bạn sẽ sử dụng Spine để tạo những cử động cho một elf vụng về để nó đi và vấp ngã. Bạn sẽ tìm hiểu làm thế nào để:

    - Import tác hình ảnh vào Spine.
    - Build một bộ xương cho elf.
    - Tạo ra hai animations khác nhau.
    - Save và export công việc của bạn.

    Lưu ý rằng hướng dẫn này không bao gồm việc tích hợp các kết quả animation vào một trò chơi. Thay vào đó, trọng tâm của hướng dẫn này là sử dụng Spine để giúp ích cho bạn trong việc tạo animation.

    Nếu bạn đã sẵn sàng để thực hiện các bước đầu tiên của bạn với Spine, chúng ta hãy bắt đầu!

    Bắt đầu
    Trước tiên bạn cần phải tải về và cài đặt Spine. Spine có thể dùng trên Windows, Mac và cả Linux. Có 5 phiên bản của Spine từ đó bạn có thể lựa chọn cho phù hợp với công việc.

    Trial (Free): Có tất cả các tính năng, nhưng bạn không thể save, import hoặc export projects. Phiên bản này rất tốt cho việc tìm hiểu phần mềm, nhưng bạn sẽ không thể export animations vào ứng dụng của bạn.

    Essential ($ 60 - $ 75 USD): Chứa các tính năng quan trọng nhất với khả năng save, import hoặc export projects. Phiên bản này không có một số tính năng hiện tại, chẳng hạn như auto-keying, dopesheets và ghosting. Nó cũng không hỗ trợ những tính năng mới trong phiên bản mới.

    Professional ($ 249 - $ 299 USD): Có tất cả các tính năng, cũng như tất cả các tính năng phát hành trong tương lai của Spine.

    Enterprise ( giá cơ bản $ 2200 USD): Cũng giống như Professional, nhưng đối với các doanh nghiệp có doanh thu hàng năm hơn $ 500,000 +.

    Education ($610 – $8217 USD + 10% Lệ phí tuyển sinh): Cũng giống như Professional, nhưng đối với các trường học và cơ sở giáo dục. Giá của giấy phép phụ thuộc vào số lượng máy tính được hỗ trợ.

    Theo hướng dẫn này, bạn có thể làm hầu như tất cả mọi thứ với phiên bản dùng thử. Tuy nhiên, ở phần cuối của hướng dẫn này, bạn sẽ thấy một phần tùy chọn exporting your animations, và bạn không thể làm điều này với phiên bản dùng thử. Nếu bạn hoàn tất phần còn lại của hướng dẫn và mong muốn nhìn thấy animations của bạn chạy trong ứng dụng của bạn, bạn nên xem xét mua một Essential hoặc Professional license để bạn có khả năng save và export công việc của bạn.

    Vì vậy, - chọn một phiên bản của Spine và tải về, cài đặt và chạy nó. Nếu bạn đang chạy trên Mac, bạn có thể nhận được thông báo sau khi chạy Spine:
    [​IMG]
    Click Continue và bạn sẽ được dẫn đến một trang hỗ trợ của Apple. Trên trang này, nhấp vào liên kết http://xquartz.macosforge.org trong đoạn đầu tiên. Điều này sẽ đưa bạn vào trang download X Quartz. Tải về và cài đặt X11, sau đó chạy lại Spine và nó sẽ khởi động mà không gặp phải vấn đề gì nữa.

    Một khi bạn chạy thành công Spine, bạn sẽ được chào đón với một project mẫu như sau.
    [​IMG]
    Hãy “ngấm nghía” xung quanh project mẫu nếu bạn muốn. Khi bạn đã sẵn sàng, hãy đọc tiếp để tìm hiểu - làm thế nào để tạo ra animation của bạn!

    Importing Artwork vào Spine
    Để bạn có thể tập trung vào việc học cách sử dụng Spine, tôi đã tạo ra một số hình ảnh để bạn có thể tạo ra một elf animation. Tải về ở đây, giải nén các thư mục và drag nó vào Desktop của bạn. Điều này sẽ làm cho Spine dể dàng tìm thấy nó hơn.

    Nhấn vào biểu tượng Spine ở góc trên bên trái và chọn New Project.
    [​IMG]

    Trong Tree panel bên phải, chọn thư mục Images và sau đó nhấn Browse ở dưới.
    [​IMG]

    Duyệt đến thư mục SpineElf_START trên Desktop của bạn, chọn nó và click Choose.
    [​IMG]
    Bây giờ cửa sổ Tree của bạn có chứa tất cả các hình ảnh elf trong thư mục Images.
    [​IMG]

    Tại thời điểm này, bạn cần save project của bạn. Bởi vì, nguyên tắc số 1 trong việc phát triển là save thường xuyên.

    Thật không may, nếu bạn đang sử dụng phiên bản dùng thử của Spine, bạn sẽ không thể save. Tuy nhiên, nếu bạn đã nâng cấp lên phiên bản Essential hoặc Professional, bạn có thể Ctrl + S hoặc Cmd + S và save project của bạn trong thư mục SpineElf_START.

    Lắp ráp nhân vật của bạn
    Để tạo ra nhân vật của bạn, bạn sẽ cần phải ghi danh vào lớp học để học giải phẫu học và mỹ thuật tại trường đại học ở địa phương của bạn. Đùa thôi! Vì hướng dẫn này cung cấp hình ảnh cho bạn rồi, tất cả những việc bạn cần làm là drag và drop các hình ảnh vào Spine.

    Chọn body trong thư mục Images và sau đó drag nó vào giao diện chính.
    [​IMG]
    [​IMG]
    Bây giờ drag phần head vào luôn
    [​IMG]
    Drag cả lArm, lLeg, rArmrLeg vào màn hình chính luôn nhưng chừa lại head2 hoặc head3. Bạn biết công dụng của Ctrl+Z hoặc Cmd+Z mà đúng không, nó sẽ rất có ích đấy.
    [​IMG]

    Bây giờ ta sẽ “lắp ráp” elf của chúng ta. Chọn công cụ Translate trong Transform toolbar và chọn head của elf.
    [​IMG]

    Drag đầu của elf gắn vào phía trên body của nó. Nếu giao diện của bạn không đủ lớn, bạn có thể sử dụng wheel scroll của chuột để thu nhỏ hoặc sử dụng công cụ zoom ở phía bên trái của Spine.
    [​IMG]

    Tiếp tục sử dụng công cụ Translate, drag các tay và chân của elf vào các vị trí thích hợp của chúng.
    [​IMG]

    Khoan đã ... tại sao tay trái và chân trái lại ở trên body thay vì đằng sau nó? Có vẻ như bạn cần phải điều chỉnh thứ tự cho các bộ phận của elf.

    Thay đổi Draw Order
    Phía trên thư mục Images, bạn sẽ thấy một danh sách gọi là Draw Order. Nếu bạn đã quen thuộc với Adobe Photoshop hay Sketchbook Pro, bạn sẽ thấy rằng nó cũng như các layers. Các tác hình ảnh ở đầu danh sách xuất sẽ nằm trên các hình ảnh ở dưới nó.
    [​IMG]

    Để sắp xếp lại thứ tự, chỉ đơn giản là drag và drop một label lên hoặc xuống trong danh sách. Sắp xếp lại thứ tự từ trên xuống dưới để được như thế này: rArm, rLeg, head, body, lLeglArm.
    [​IMG]

    Elf của bạn bây giờ sẽ trông như thế này:
    [​IMG]

    Bây giờ bạn đã có một elf khá đẹp. Bước cuối cùng trong việc thiết lập elf của bạn là sắp xếp đôi chân nó nằm trên một line màu đen trong Spine (nó như mặt đất trong game của bạn). Bạn có thể làm điều này bằng cách di chuyển từng bộ phần một hoặc bạn có thể chọn tất cả và làm điều đó chỉ trong một bước, sẽ dễ dàng hơn nhiều.

    Chọn tất cả các bộ phận của elf trong thư mục Draw Order bằng cách nhấn Shift+clicking.
    [​IMG]

    Hãy “đặt” elf của bạn đứng trên đường màu đen ấy.
    [​IMG]

    Có thể bạn sẽ tự hỏi ta nên làm gì với hai hình ảnh head2head3. Hãy kiên nhẫn, ta sẽ sử dụng chúng sau.

    Multiple Images cho One Body Part
    Phía trên thư mục Draw Order, có một danh sách của root. Nhấn vào mũi tên thả xuống bên cạnh root và bạn sẽ thấy tất cả các bộ phận được liệt kê ở đây.
    [​IMG]

    Click vào mũi tên thả xuống bên cạnh head và bạn sẽ thấy hình ảnh head được sử dụng ở đây.
    [​IMG]

    Bạn có thể add nhiều hình ảnh cho mỗi bộ phận và chuyển đổi giữa chúng để làm nhân vật của bạn trở nên sinh động. Drag head2 từ những thư mục Images và drop nó vào dưới head trong danh sách root.
    [​IMG]

    Làm tương tự cho head3.
    [​IMG]

    Nếu bạn muốn chuyển đổi qua lại các mặt khác nhau của elf, nhấp vào dấu chấm bên dưới con mắt trong Tree panel.
    [​IMG]

    Bây giờ bạn có thể xây dựng bộ xương cho elf của bạn!

    Bone Up !: Add một Skeleton
    Trong cửa sổ Tree, chọn danh sách root.
    [​IMG]

    Sau đó, chọn công cụ Create từ cửa sổ Tool ở dưới cùng của Spine.
    [​IMG]

    Click vào giữa ngực của elf. Điều này sẽ tạo ra một xương mới được gọi là bone1 (hoặc có thể chỉ là bone).
    [​IMG]

    Bây giờ click và drag từ phía dưới đầu của elf đến chiếc mũ của nó. Điều này sẽ tạo ra một joint mới ở cổ của nó.
    [​IMG]

    Xương vừa được gắn được gọi là bone2 và xuất hiện dưới bone1 trong cửa sổ Treebone2 là con của bone1. Điều đó có nghĩa nếu bạn đã di chuyển bone1, bone2 và những phần tử con khác của bone1 cũng sẽ di chuyển theo.
    [​IMG]

    Trong cửa sổ Tree, chọn bone1. Điều này sẽ làm cho xương tiếp theo bạn tạo ra cũng sẽ là con của bone1.
    [​IMG]

    Click và drag từ phần được gắn vào body của cánh tay trái xuống đến khuỷu tay để tạo ra bone3.
    [​IMG]

    Lặp lại tương tự cho cánh tay phải của elf và cả hai chân. Đầu tiên, nhấn bone1 trong cửa sổ Tree.
    [​IMG]

    Sau đó nhấp vào điểm mà cánh tay phải gắn vào body của elf và drag xuống đến khuỷu tay phải.
    [​IMG]

    Quay trở lại và nhấp vào bone1 trong cửa sổ Tree một lần nữa.
    [​IMG]

    Tiếp theo, click lên điểm nơi chân trái gắn với body và drag xuống tới đầu gối.
    [​IMG]

    Làm tương tự với chân phải của elf.
    [​IMG]

    Bộ xương của elf đã hoàn tất.
    [​IMG]
    Lưu ý: Bạn có thể tạo ra nhiều bộ xương phức tạp tùy thuộc vào nhu cầu nhân vật của bạn. Bạn có thể có xương cho vai, khuỷu tay, cổ tay, mắt cá chân, đuôi và thậm chí cả quần áo.

    Gắn xương cho body
    Bây giờ bạn đã có hình ảnh được ghép lại với nhau để trông giống như một elf và một bộ xương bên trong elf, nhưng chúng không thực sự gắn liền với nhau. Bạn không tin? Chọn công cụ Rotate và sau đó nhấp vào bất kỳ xương nào của bộ xương.
    [​IMG]

    Nhấn vào bất cứ nơi nào trong giao diện. Xương quay, nhưng elf không di chuyển. D'oh :D
    [​IMG]

    Nhấn Ctrl + Z hoặc Cmd + Z để trở lại và nhìn vào cửa sổ Tree. Bạn sẽ thấy rằng những hình ảnh và xương trong các danh sách khác nhau, đó là lý do tại sao chúng chưa ghép nối với nhau.
    [​IMG]

    Để ghép nối chúng, bạn sẽ phải: drag và drop! Click vào hình ảnh body trong cửa sổ Tree và drag nó xuống bone1.
    [​IMG]

    Lưu ý là body bây giờ được liệt kê dưới bone1? Xương body và hình ảnh body đã được gắn vào nhau và có cùng một chức năng.
    [​IMG]

    Kéo hình ảnh head xuống bone2 để gắn xương đầu vào hình ảnh head của elf.
    [​IMG]

    Nếu bạn bối rối bởi các cấu trúc phân cấp trong cửa sổ Tree, một cách dễ dàng để biết các bộ phận đã được gắn đúng với xương của nó hay chưa. Thì bạn có thể làm như trên, chọn công cụ rotate để xoay, nếu cả hay cùng di chuyển tức là bạn đã làm đúng và Ctrl+Z or Cmd+Z thôi :D
    [​IMG]

    Drag và drop như sau:

    LArm với bone3
    rArm với bone4
    lLeg với bone5
    rLeg với bone6
    [​IMG]
    Elf của bạn bây giờ đã có một bộ xương với đầy đủ chức năng! Tiếp theo bạn sẽ làm cho elf của bạn hoạt động.

    Một Standing Animation
    Animation đầu tiên bạn sẽ tạo ra là một elf đang đứng. Có thể bạn sẽ hỏi, "Không phải là nó đang đứng sao!? "

    Đúng, elf của chúng ta đang đứng, nhưng nó không làm bất cứ điều gì. Điều đó khá nhàm chán, bạn có thể cung cấp cho nó một số chuyển động nhẹ nhàng trong khi nó đang đứng tại chỗ. Điều đó sẽ làm cho trò chơi thú vị hơn.

    Để chuyển sang chế độ Animate, nhấp vào SETUP trong góc trên bên trái của Spine. Điều này sẽ đưa ra một timeline ở dưới cùng của màn hình.
    [​IMG]
    [​IMG]
    Trong cửa sổ Tree, bấm vào Animations và sau đó vào New Animation.
    [​IMG]

    Đặt tên cho animation mới là standing.
    [​IMG]
    [​IMG]

    Giả sử bạn đang sử dụng phiên bản dùng thử của Spine, bạn có thể truy cập vào các tính năng tiên tiến có sẵn trong phiên bản Professional mà không có trong phiên Essential đó là Dopesheet Auto Keying.

    Sử dụng Dopesheet và Auto Keying
    Hãy nghĩ rằng Dopesheet là một timeline tiên tiến hơn mà animations của bạn sẽ được play. Và Auto Key cho phép Spine thiết lập keyframes cho bạn khi bạn animation vật của bạn. Vậy keyframes là gì?

    Keyframes là frames quan trọng nhất của một animation. Nếu bạn muốn animate một quả bóng lăn tròn từ trái sang phải, bạn sẽ cần một keyframe bên trái của quả bóng bên và một keyframe bên phải của quả bóng. Các frame ở giữa được gọi là in-betweens, hay còn được gọi là "tweens". Spine tạo ra in-betweens cho bạn và Auto Key sẽ giúp bạn thiết lập các keyframes. Khá ngọt ngào!

    Click vào nút DopesheetAuto Key ở dưới cùng của Spine.
    [​IMG]

    Giữ Cmd hoặc Ctrl và click vào các xương tay trái, tay phải và đầu của elf.
    [​IMG]

    Trong cửa sổ Transform có ba biểu tượng chìa khóa màu xanh lá cây. Click vào từng chìa khóa một để biến nó thành màu đỏ.
    [​IMG]
    [​IMG]

    Điều này chỉ đơn giản là thiết lập keyframes ban đầu cho cánh tay và đầu của elf, bạn sẽ thấy trong Dopesheet.
    [​IMG]

    Bạn không cần phải thiết lập keyframes cho đôi chân của elf trong animation này, vì nó sẽ đứng yên.
    Ngoài ra, kể từ khi bạn đã kích hoạt Auto Key, bạn sẽ không cần click vào nó lần nữa. Spine sẽ tự động làm điều đó cho phần còn lại của standing animation.

    Chọn công cụ Rotate nếu nó chưa được chọn, và sau đó nhấn vào xương đầu của elf trong bộ xương.
    [​IMG]

    Trên timeline trong Dopesheet, bấm vào đánh dấu cho frame 5. Để giữ cho mọi thứ đơn giản, bạn sẽ animate tất cả mọi thứ cách nhau 5 frame.
    [​IMG]

    Bây giờ click và drag trên giao diện để di chuyển đầu của elf về phía trước một chút. Tinh tế là chìa khóa ở đây, trừ khi bạn muốn anh ta trông như nhân vật hoạt hình. Vì bạn đã kích hoạt Auto Key, Spine sẽ tạo một keyframe mới cho bạn vào frame thứ 5.
    [​IMG]
    [​IMG]

    Bạn cũng có thể thay đổi biểu hiện trên khuôn mặt của elf ở đây. Trong cửa sổ Tree, điều hướng đến hình ảnh head ở dưới bone2 và mở rộng danh sách bằng cách nhấn vào biểu tượng mũi tên tương ứng.
    [​IMG]

    Nhấp chuột vào dấu chấm bên dưới biểu tượng con mắt bên cạnh head để hiển thị hình ảnh mỉm cười của elf.
    [​IMG]

    Nếu bạn thấy một dấu chấm màu đỏ bên cạnh head dưới biểu tượng chìa khóa thì ok, bạn có thể tiếp tục. Nhưng nếu bạn nhìn thấy một dấu chấm màu vàng thay vào đó, điều này là để cho bạn thấy rằng bạn đã thực hiện một sự thay đổi. Nhấp vào dấu chấm màu vàng để biến nó thành màu đỏ, sẽ thiết lập một keyframe cho việc hoán đổi hình ảnh.
    [​IMG]
    [​IMG]

    Nhấp chuột vào frame 10 trong Dopesheet timeline và di chuyển đầu của elf nhẹ về phía trước một lần nữa bằng cách kéo thả trong Spine.
    [​IMG]
    Để đẩy đẩy nhanh quá trình animation, bạn cũng có thể copy và paste keyframes. Với xương đầu vẫn còn được chọn, nhìn trong timeline và click vào hình chữ nhật màu trắng trên frame 5 ở hàng standing. Sau đó nhấp vào nút sao copy.
    [​IMG]

    Click vào frame 15 và sau đó nhấn vào nút paste.
    [​IMG]

    Bây giờ chọn frame 0, click copy, chọn frame 20 và sau đó nhấp vào paste.
    [​IMG]

    Trong playback controls, nhấn vào nút loop và sau đó Play. Elf của bạn bây giờ đã lắc đầu qua lại.
    [​IMG]

    Nếu bạn muốn thử nghiệm thêm, hãy thử thay đổi đầu của elf trên các keyframes khác nhau. Nhớ chọn frame bạn muốn, chọn hình ảnh head khác nhau trong cửa sổ Tree và sau đó nhấp vào dấu chấm màu vàng để biến nó thành màu đỏ để thiết lập các keyframe.

    Hoàn thiện animation
    Bây giờ ta sẽ tiếp tục ở cánh tay! Chọn khung 0 và sau đó chọn đúng xương cánh tay của elf. Sau đó, chỉ cần làm theo các bước tương tự mà bạn sử dụng để làm cử động cho phần đầu.
    [​IMG]

    Chọn frame 5 và xoay tay phải ra phía ngoài một chút.
    [​IMG]

    Chọn frame 10 và di chuyển nó ra ngoài thêm chút nữa.
    [​IMG]

    Nhấp vào hình chữ nhật màu trắng ở frame 5 trong hàng standing và sau đó nhấp vào copy. Paste nó vào frame 15.
    [​IMG]

    Click vào hình chữ nhật màu trắng ở frame 0 trong hàng standing, nhấp copy và paste nó vào frame 20.
    [​IMG]

    Lặp lại các bước tương tự cho các cánh tay trái và sau đó bấm play để xem kết quả. Bạn đã có một standing animation cho elf của bạn, chúc mừng!
    [​IMG]

    Tạo Walking và Tripping Animation
    Bây giờ bạn sẽ tạo ra một animation mới. Vì bạn đã trãi qua những công viêc chính nên những bước này sẽ rất vẻ quen thuộc và ban sẽ nhanh chóng hoàn thành nó.

    Trong cửa sổ Tree, click vào animation, sau tạo một animation mới và đặt tên cho nó là walking.
    [​IMG]

    Bạn đã tạo ra một animation mới, vì vậy Spine sẽ reset elf về vị trí mặc định của nó. Chọn frame 0 trong timeline và sau đó trong cửa sổ Tree, Shift + chọn tất cả các xương.
    [​IMG]
    Click vào biểu tượng chìa khóa màu xanh lá cây trong cửa sổ Transform để biến chúng thành màu đỏ. Điều này sẽ thiết lập keyframe ban đầu.
    [​IMG]

    Trước tiên ta tạo elf bước đi…
    Chọn frame 5, sau đó chọn xương chân trái của elf và xoay nó về phía trước một chút. Sau đó chọn xương tay phải và xoay về phía trước một chút. Khi con người (và elf) đi, họ thường cử động đồng thời tay này nhưng chân kia, do đó hãy chắc chắn rằng bạn đang chuyển động chân và tay đối lập (chân trái chuyển động cùng với tay phải và ngược lại)
    [​IMG]

    Chọn frame 10 trong timeline và sau đó xoay cả chân trái và tay phải của elf về phía trước thêm một chút nữa. Đồng thời xoay chân phải và tay trái của elf ra phía sau một chút và đầu thì có một chút nguyên về phía trước.
    [​IMG]
    Chọn frame 15 và bắt đầu đảo ngược dần dần các hình ảnh bằng cách xoay chân trái-tay phải về phía sau, chân phải-tay trái về phía trước và vv….
    [​IMG]

    Nếu bạn đang gặp khó khăn trong việc giữ chân của elf đứng trên lines màu đen, chọn xương body và sau đó chọn công cụ Translate để di chuyển toàn bộ cơ thể của elf.

    …và ngã.
    Bắt đầu chuyển động vấp ngã vào frame 20. Khi ai đó ngã, đôi chân họ bị vắt lên trên, cánh tay đưa ra phía trước và đầu của họ nghiêng về phía sau. Bây giờ cũng là lúc để hoán đổi hình ảnh head cho head2. Hãy nhớ đưa head2 lên trên trong cửa sổ Tree, và sau đó nhấp vào dấu chấm màu vàng để biến nó thành màu đỏ.
    [​IMG]

    Chọn frame 25, sử dụng công cụ Translate để chọn xương body để nâng cao elf lên khỏi mặt đất. Chuyển sang công cụ Rotate và xoay toàn bộ cơ thể để tạo chuyển động vấp ngã. Tiếp tục với việc xoay cánh tay, chân và cổ.

    Nếu bất cứ lúc nào bạn nhận thấy một bộ phận bắt đầu bật ra, sử dụng công cụ Translate để đưa nó trở lại phía sau body.
    [​IMG]

    Ở frame 30, bạn thực sự có thể bắt đầu để có được elf trong không khí và bay như siêu nhân.
    [​IMG]

    Frame 35, bắt đầu chuyển động rơi trở lại mặt đất của elf.
    [​IMG]

    Vào frame 40, làm cho elf có những tác động ban đầu với mặt đất.
    [​IMG]

    Thay đổi đầu của elf với head3 thông qua cửa sổ Tree vào frame 45 để mô tả va chạm với mặt đất.
    [​IMG]

    Vào frame 50, làm cho đầu của elf nằm trên trên mặt đất. Bây giờ bạn có thể thêm một số chi tiết để nâng cao sự mô phỏng. Khi ai đó đập khuôn mặt của họ trên mặt đất, đầu của họ sẽ bị bật ngược trở lại một chút. Animation điều này ở frame 51 và xoay xương đầu nhẹ lên trên một ít, và sau đó di chuyển nó xuống ở frame 53.
    [​IMG]

    Và bạn đã có nó! Bạn đã tạo ra một animation của một elf đang đứng và một animation chạy rồi vấp ngã của elf. Nếu bất cứ lúc nào bạn muốn chuyển đổi giữa các animation, chỉ cần nhấp vào vòng tròn bên dưới biểu tượng con mắt trong danh sách animation trong cửa sổ Tree.
    [​IMG]

    Tùy chọn: Export công việc của bạn
    Nếu bạn đã quyết định upgrade Spine của bạn. Bạn đã có thể xuất export animation của bạn. Để làm điều này, đầu tiên bấm vào biểu tượng Spine ở phía trên bên trái và chọn Export.
    [​IMG]

    Kết luận
    Hướng dẫn này là một ví dụ rất cơ bản về những gì bạn có thể làm với Spine. Hãy thử nghiệm với việc thêm keyframes, thêm vào các hình ảnh khác nhau, xây dựng bộ xương phức tạp hơn, tạo hiệu ứng cho animation và bất cứ điều gì khác mà bạn có thể nghĩ đến.

    Tôi đã tạo ra một phiên bản hơi phức tạp với một elf vấp ngã, bạn có thể tải về tại đây. Nếu bạn không có Essential hoặc Professional license, bạn sẽ không thể mở các tập tin .spine, nhưng bạn sẽ có thể sử dụng các tập tin JSON tôi đã thêm và import nó vào trò chơi của bạn. Cảm ơn Greg Pugh (raywenderlich.com) đã hổ trợ.
    Last edited: 21/10/14
    Võ Thanh Liêm thích bài này.
  2. New Member
    Võ Thanh Liêm
    Tham gia ngày:
    2/1/16
    Bài viết:
    18
    Đã được thích:
    3
    Cảm ơn bài viết hay lắm
  3. New Member
    thaiyuong
    Tham gia ngày:
    29/11/17
    Bài viết:
    1
    Đã được thích:
    0
    sao mình không thấy được ảnh và link materials nhỉ

Chia sẻ trang này