html5 canvas animation

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
html5canvas_animation

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

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

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

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

html5 canvas วิธีทำ animation จาก sprite sheet

    • สร้าง 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_drawImage

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


By codebee

- Programmer & Writer