วิธีทำภาพ Sprite by Queen

วันนี้เราจะมาพูดถึงการทำภาพ Sprite

เริ่มจากเตรียมรูปที่เราจะทำเป็นภาพ Sprite

เราจะทำอุกาบาศให้ขยับแบบปิ๊งแวร๊บ ด้วยการย่อขนาดลงเป็นสเต็ป ซักสามระดับ

แล้วซ้อนให้อยู่ในทิศทางการเคลื่อนไหวเดียวกัน

จากนั้นเราจะตัดส่วนเกินทิ้งไป

โดยไปที่  Image > Trim  เลือก Transparent pixels > OK

ทีนี้เนื่องจากทั้งสามรูปมีขนาดไม่เท่ากัน วิธีแก้ก็คือ แยกสามรูปเป็นสาม Group

แล้วสร้างเลเยอร์เปล่าขึ้นมาทุกGroup เทสีลงไปแล้วปรับ Opacity ให้เป็น 0

เท่านี้เราก็จะได้รูปที่มีกรอบเท่ากัน

ต่อมาคือขั้นตอนการเอามาวางต่อกันซึ่งจะต่อแนวนอนหรือแนวตั้งก็ได้

แต่ในกรณีนี้เราจะต่อแนวนอน

ขนาดของรูปคือ 151 * 138  เราจะวางทั้งหมด 4 frame

ก็เอาความกว้างของรูป คูณด้วยจำนวน frame แล้วก็ลาก Group ลงไปวาง

กด Ctrl+T แล้วกดที่มุมซ้ายตรงวงกลม รูปแล้ว ตั้งค่า แกน X และ Y เป็น0

รูปต่อๆ ไป X เท่ากับ ระยะห่างของขอบกับรูปที่จะวาง  (ความกว้างของรูปก่อนหน้า)

และ Y =0 เสร็จแล้วเซฟเป็น PNG.

Thadaaaaaaaaa

เราก็จะได้อะไรประมานนี้

จากนั้นก็เอาภาพทีได้ไปใช้ต่อในเอนทรีนี้ >> ทำ animation ง่ายๆด้วย flixel

สวัสดีครับ…..