html5 Canvas วิธีทำ Animation จาก Sprite Sheet

html5 Canvas วิธีทำ Animation จาก Sprite Sheet

html5 Canvas วิธีทำ Animation จาก Sprite Sheet ( Frame by frame )

Sprite Sheet หมายถึงรูปแผ่นใหญ่ที่ภายในจะเก็บรูปย่อย ๆ ไว้อีกหลายรูป แล้วค่อยนำมาตัดแบ่งใช้งานเฉพาะส่วนที่จำเป็นต้องแสดงผลเท่านั้น ตัวอย่างเช่นในรูปขนาด 1024×1024 pixel อาจจะมีทั้งรูปต้นไม้ คน ไอเทมต่าง ๆ ในเกมส์ เมื่อต้องการแสดงผลต้นไม้ ก็ไปครอปเอาเฉพาะต้นไม้เท่านั้นมาแสดง เป็นการโหลดรูปแผ่นใหญ่เพียงครั้งเดียว แต่สามารถนำไปใช้ได้กับหลาย ๆ ส่วนของงาน

ประโยชน์ของการใช้งานการโหลดข้อมูลรูปภาพในรูปแบบ sprite sheet ก็เพื่อลดข้อผิดพลาดของลำดับการโหลดข้อมูล ลดปริมาณการโหลดข้อมูลมากเกินจำเป็น ช่วยให้เกมหรือโปรแกรมทำงานได้เร็วขึ้น

ตัวอย่าง Animation frame by frame จาก Sprite Sheet

ลิงค์ตัวอย่าง และดาวน์โหลดโค๊ด html5 Canvas วิธีทำ Animation จาก Sprite Sheet

โหลด sprite sheet และทำ Animate แบบ frame by frame

• • สร้างไฟล์ sprite sheet

ใช้โปรแกรมสำหรับสร้างไฟล์ sprite sheet เช่นโปรแกรม TexturePacker หรือลองค้นหารูปมาไว้สำหรับทดสอบ ประมาณนี้

• • สร้าง canvas div

ในส่วนของ html body ให้สร้าง div และตั้งชื่อ id ดังนี้

• • ตัวแปรหลัก และการโหลดรูปเข้ามาใช้งานใน Canvas

var hero; // ฟังก์ชั่นหลักสำหรับการ วาดและแสดงวนแต่ละเฟรม
var heroSrc; // พาธของรูปที่ sprite จะต้องวาดลงบน canvas
var canvas; // canvas หรือพื้นที่หลักที่จะแสดงผล animation

canvas = document.getElementById("canvas");
canvas.width = 324; // ความกว้างของ canvas
canvas.height = 324; // ความสูงของ canvas


heroSrc = new Image();	
heroSrc.addEventListener("load", loopHero); // โหลดเสร็จให้เริ่มทำงานที่ฟังก์ชั่น loopHero
heroSrc.src = "walking.png"; // โหลดรูป sprite sheet

 

• • ฟังก์ชั่นสำหรับการวาดแต่ละเฟรมลงบน canvas และวน loop frame

จากรูปตัวอย่าง จะมีขนาด 1980×324 px และมีทั้งหมด 12 เฟรม ในการวาดแต่ละครั้ง จะเท่ากับ 1980/12 = 165 เพราะฉะนั้นแต่ละรูปจะมีขนาด 165×324 ในการทำรูป sprite sheet นั้น ขนาดของรูปจำเป็นจะต้องนำมาหารด้วยจำนวนเฟรมได้ลงตัว เพื่อให้ animation ดู smooth ที่สุด

// ฟังก์ชั่น update สำหรับนับจำนวนเฟรม เมื่อสิ้นสุดก็ให้วนกลับมาเริ่มที่เฟรมแรกใหม่

function sprite (options) {
	var ops = {},
		frameIndex = 0,
		tickCount = 0,
		ticksPerFrame = options.ticksPerFrame || 0,
		numberOfFrames = options.numberOfFrames || 1;
	
	ops.context = options.context;
	ops.width = options.width;
	ops.height = options.height;
	ops.image = options.image;
	
	
	ops.update = function () {
		tickCount += 1;
		if (tickCount > ticksPerFrame) {
			tickCount = 0;
			if (frameIndex < numberOfFrames - 1) {
				frameIndex += 1;
			} else {
				frameIndex = 0;
			}
		}
	};

// ฟังก์ชั่น render สำหรับวาดแต่ละรูปลงไปบน canvas
ใช้เมธอด context.drawImage() กำหนดตำแหน่งที่จะเริ่มวาดและขนาดของแต่ละเฟรม

	ops.render = function () {
	  this.context.clearRect(0, 0, this.width, this.height); // เคลียร์รูปเก่าทุกครั้งก่อนวาดรูปใหม่ลงไป
	  this.context.drawImage(
		this.image,
		frameIndex * this.width / numberOfFrames,
		0,
		this.width / numberOfFrames,
		this.height,
		0,
		0,
		this.width / numberOfFrames,
		this.height);
	};
	
	return ops;
}

// ความหมายของ พารามิเตอร์ (Parameters) แต่ละตัวของเมธอด drawImage()

ลิงค์ตัวอย่าง และดาวน์โหลดโค๊ด html5 Canvas วิธีทำ Animation จาก Sprite Sheet