html5 canvas animation

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
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

 

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

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

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

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

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

html5_drawImage

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

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...
HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax... HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง ...
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...
fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js... fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js / resize and rotate controls with custom images สำหรับคนที่ใช้ fabric.js ในการทำแอพต่าง ๆ อาจจะม...

Comments

comments