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

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

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

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

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

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

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

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

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

เมื่อทำการแอดเสร็จแล้ว ให้เราเปิด ไฟล์ 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 อย่างง่ายได้แล้ว ^^