วิธีทำภาพ Sprite by Queen
May0
วันนี้เราจะมาพูดถึงการทำภาพ 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
สวัสดีครับ…..
Enjoy this article?
Consider subscribing to our RSS feed!
ไม่มีความเห็น
ยังไม่มีความเห็น