การผูก bone กับภาพเข้าด้วยกันใน Spine by

28
Jun
0

 

หลังจากเราได้รู้วิธีสร้าง skeleton กันไปแล้ว ต่อมาเราจะเรียนรู้วิธีผูก skeleton กับภาพเข้าด้วยกัน

1 เตรียมภาพคาแรคเตอร์ที่เราต้องการทำอนิเมท

sample27a

2 แบ่งชิ้นส่วนตัวละครออกเป็นส่วนตามส่วนที่เคลื่อนไหวได้ โดยวาดส่วนที่ถูกชิ้นอื่นบังให้เต็มด้วย ดังเช่นนี้ เซฟทั้งหมดเข้าโฟลเดอร์เดียวกัน

sample27b

3 เปิด Spine ขึ้นมา ที่เมนู Image นี่เป็นตัวที่จะชี้ไปยังโฟลเดอร์ภาพต้นทาง โดยเราจะเลือกโฟลเดอร์ที่ Browse

sample27c

4 เมื่อเลือกโฟลเดอร์ต้นทางแล้ว รายชื่อภาพในโฟลเดอร์จะแสดงขึ้นมา ไอคอนสีแดงคือภาพที่ยังไม่ถูกใช้ในโปรเจค ส่วนภาพที่ถูกใช้แล้วจะแสดงด้วยสีเขียว

sample27d

5 ลากไฟล์ลงมาบน work space เรียงลำดับบนล่างที่ Draw Order

sample27e

Tip : เราสามารถใช้สคริปของโฟโตชอปหรืออิลลัสที่ทาง Spine แถมมา สร้างไฟล์ json ที่ระบุตำแหน่งและลำดับเลเยอร์ของภาพชิ้นส่วนแต่ละชิ้น และ import data เข้ามาได้ โดยกดที่นี่ โดยภาพที่ถูกอิพอร์ตเข้ามาจะเรียงลำดับบนล่างแบบเดียวกับในไฟล์โฟโตชอปหรืออิลลัสต้นฉบับ

sample27f

6 สร้าง bone ตามชิ้นส่วนของตัวละครโดยคำนึงตามวิธีดังนี้ http://goo.gl/VyMiY9

sample27g

7 เมื่อทำแล้ว ชิ้น bone และชิ้นของภาพจะถูกแสดงไว้ที่นี่

sample27h

8 เราสามารถคลิกเมาส์ลากชื่อไฟล์ภาพแต่ละชิ้นเข้าไปในชิ้น bone

sample27i

9 เมื่อเราขยับ/ หมุน/ ย่อ/ ขยาย bone แต่ละชิ้น ภาพที่ผูกอยู่ก็จะขยับตามไปด้วย

sample27j

วิธีโหลดรูปทั้งหมดจากโฟลเดอร์แบบไดนามิคขณะรันใน Unity by

30
Jun
0

ในการจะโหลดรูปทั้งโฟลเดอร์มาใส่ไว้ตัวแปร Sprite ใน Unity C# นั้น มีวิธีง่ายๆดังนี้ครับ

  • ขั้นแรก ห้ามพลาด รูปทั้งหมดถ้าจะใช้คำสั่ง Resources.Load หรือ Resources.LoadAll รูปทั้งหมดต้องอยู่ภายใต้โฟลเดอร์ Assets > Resources

Assets > Resources

  • จากนั้นที่ Start() เราก็จะทำการโหลดรูปทั้งหมดมาใส่ Array ที่จะเก็บ Sprite (ในตัวอย่างจะใช้ Resources.LoadAll ซึ่งจะใช้ Resources.Load วนลูปชื่อไฟล์ทั้งหมดก็ได้)

public string race;
public string job;
public int form = 0;
public string gender;
private SpriteRenderer sr;
private Sprite[] sprites;
private string[] names;
void Start ()
{
sr = gameObject.GetComponent(); //เรียก GameObject คือตัวมันเอง
string assetPath = "unit_assets/"+race+job+((gender=="M"||gender=="F")?"_"+gender.ToLower():"")+((form>0)?"_"+form:"")+"/"; //ตั้งค่าโฟลเดอร์ที่มีรูปทั้งหมดที่ต้องการโหลดโดยต่อสตริงจากตัวแปรที่ได้มา (นับ Path จาก Resources ลงมา)
sprites = Resources.LoadAll(assetPath); //โหลดรูปทั้งหมดจากโฟลเดอร์มาใส่ Array ของ Sprite
names = new string[sprites.Length]; //นับจำนวนรูปทั้งหมดในโฟลเดอร์
for(int i = 0; i < names.Length; i++)
names[i] = sprites[i].name; //วนลูปเพื่อจำชื่อไฟล์ทำหมดไว้ในอีก Array
}

  • เท่านี้รูปทั้งหมดก็จะมาอยู่ใน Array ในโค้ดเพื่อใช้ในการรัน Animation ต่อไปแล้วครับ ดาวน์โหลดโค้ดตัวอย่างที่นี่ครับ Click

Array ของ Sprite ที่โหลดมาทั้งหมด

Array ชื่อของ Sprite ที่โหลดมาทั้งหมด

ทำ animation ง่ายๆด้วย flixel by

30
May
0

ก่อนอื่นเลยต้องบอกก่อนว่า flixel คืออะไรมันคือlibraryที่ใช้เขียนเกม 2D แบบอย่างง่ายนั่นเองพูดแบบนี้แล้วมันจะง่ายขนาดไหนนั้นเราต้องมาลองดูกัน โดยที่เราสามารถเข้าไปที่ลิงค์นี้แล้วทำการดาวโหลดlibraryมาได้เลย flixel

แล้วเราจะเขียนเกมบน software อะไรดีหละในส่วนตรงนี้ขอแนะนำเป็น freeware ดีกว่าโดยเฉพาะมือใหม่จะได้ทดลองกันอย่างสบายๆว่าเกมนั้นง่ายกว่าที่คิด ขอแนะนำเป็นตัวนี้เลย flashdevelop เข้าไปดาวโหลดมาใช้กันฟรีๆเลย

ซึ่งเกมของเราเนี่ยถ้ามีแต่ภาพนิ่งมันจะน่าเบื่อเพราะฉะนั้นแล้วจะขอพูดถึงการทำ animation อย่างง่ายของflixel ดีกว่า

ในส่วนนี้ สิ่งที่เราต้องการคือ ภาพที่เป็น sprite แล้ว sprite คืออะไรหละ มันคือ ภาพที่เป็น frame ท่าทางที่ต่อๆกัน

rockman
ดังตัวอย่างแบบนี้นี่เอง จะเห็นว่า rockman ในท่าทางต่างๆเช่นเดินก็จะมีหลายๆเฟรมต่อกัน

ในเมื่อเรามีทุกอย่างที่ต้องการแล้วเรามาเริ่มทำกันเลยดีกว่า

ให้เปิดโปรแกรม flashdevelop ขึ้นมาแล้วทำการ  new project ให้เลือก as3 Project นะครับ

ตั้งชื่อโปรเจคตามใจชอบเลย หลังจากนั้น ให้เลือก properties ในแถบของ project แล้วเลือก tab classpaths ให้ทำการaddเพิ่มเข้าไปโดยเลือก directory ของflixel ที่เราทำการ download เข้ามาน

untitled

เมื่อทำการแอดเสร็จแล้ว ให้เราเปิด ไฟล์ main แล้วแก้ตาม example

โดยในไฟล์ตัวอย่าง จะมีการ class ทั้งหมด3 classดังนี้

1คือ main ไว้ใช้เรียกตัวเกม กำหนดขนาดของตัวเกม

2คือ PlayState เป็นสิ่งที่ main เรียกว่าให้ไปเล่นที่ state ไหนของเกมซึ่งเราสามารถกำหนดเองได้ซึ่งในนี้จะมีการadd player เข้ามาในเกมนั่นเอง

3คือ Player เป็นส่วนของ ตัวละครที่เราจะนำมาทำ animation นั่นเอง

ในส่วนของตัวอย่างนั้นเราจะสามารถควบคุมเดินซ้ายขวาได้เท่านั้น โดยจะมีโค๊ดส่วนในการดักคีบอดและเล่นภาพ sprite นั่นเอง

โดยขั้นแรกจะต้องทำการ loadGraphic(PlayerBitmap, true, true, 50, 97.25); มาก่อนโดยให้ใส่class ของรูปspriteนั่นเองและกำหนดความกว้างความยาวของรูปเล็กๆเข้าไปด้วย

ขั้นที่2 ทำการ

addAnimation(“running”, [14, 13, 12, 13,10], 10);

addAnimation(“stand”, [0]);

addAnimation(“shoot”, [5]);

addAnimation(“lose”, [6, 7], 1);

ต่างๆโดยที่มีชื่อของ animation นั่นเป็น string และarray ของรูป ที่เราจะใช้ใน animation นั้นๆ โดยที่บนสุดซ้ายสุดจะเริ่มที่0 ไล่มาทางขวาเรื่อยๆขึ้นบรรทัดใหม่ก็นับต่อจากเดิม ส่วนต่อมาคือ framerate ต้องการให้เล่นไวขนาดไหนก็ลอง set ค่ากันดู

ต่อมาคือการเขียน function update ในส่วนนี้เหมือนกับ enterframe ใน flash เลยคือจะเข้ามารันในนี้ตลอดโดยในส่วนโค๊ดตัวอย่างจะมีการดัก event ของ keyboard ว่ามีการกดลูกศรหรือไม่

แล้วถ้ากดลูกศร ก็จะมีส่วนของการ play animation นั่นเอง

เท่านี้เราก็จะสามารถ สร้าง animation ง่ายๆได้แล้ว

และเมื่อเรามาถึงขั้นนี้ เราก็จะสามารถเขียนเกม 2d อย่างง่ายได้แล้ว ^^