Site icon บริษัท โค๊ดบี จำกัด

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

codebee
html5 canvas animation

html5 canvas animation

<h2>html5 Canvas วิธีทำ Animation จาก Sprite Sheet<&sol;h2>&NewLine;<p><strong>html5 Canvas วิธีทำ Animation จาก Sprite Sheet &lpar; Frame by frame &rpar;<&sol;strong><&sol;p>&NewLine;<p>Sprite Sheet หมายถึงรูปแผ่นใหญ่ที่ภายในจะเก็บรูปย่อย ๆ ไว้อีกหลายรูป แล้วค่อยนำมาตัดแบ่งใช้งานเฉพาะส่วนที่จำเป็นต้องแสดงผลเท่านั้น ตัวอย่างเช่นในรูปขนาด 1024&&num;215&semi;1024 pixel อาจจะมีทั้งรูปต้นไม้ คน ไอเทมต่าง ๆ ในเกมส์ เมื่อต้องการแสดงผลต้นไม้ ก็ไปครอปเอาเฉพาะต้นไม้เท่านั้นมาแสดง เป็นการโหลดรูปแผ่นใหญ่เพียงครั้งเดียว แต่สามารถนำไปใช้ได้กับหลาย ๆ ส่วนของงาน<&excl;--more--><&sol;p>&NewLine;<p>ประโยชน์ของการใช้งานการโหลดข้อมูลรูปภาพในรูปแบบ sprite sheet ก็เพื่อลดข้อผิดพลาดของลำดับการโหลดข้อมูล ลดปริมาณการโหลดข้อมูลมากเกินจำเป็น ช่วยให้เกมหรือโปรแกรมทำงานได้เร็วขึ้น<&sol;p>&NewLine;<p><strong>ตัวอย่าง Animation frame by frame จาก Sprite Sheet<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;02&sol;html5canvas&lowbar;animation&period;gif" alt&equals;"html5canvas&lowbar;animation" &sol;><&sol;p>&NewLine;<p>ลิงค์ตัวอย่าง และดาวน์โหลดโค๊ด <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5canvas&lowbar;animate&sol;html5canvas&lowbar;animate&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">html5 Canvas วิธีทำ Animation จาก Sprite Sheet<&sol;a><&sol;p>&NewLine;<h4>โหลด sprite sheet และทำ Animate แบบ frame by frame<&sol;h4>&NewLine;<ul>&NewLine;<li style&equals;"list-style-type&colon; none">&NewLine;<ul>&NewLine;<li><strong>สร้างไฟล์ sprite sheet<&sol;strong><&sol;li>&NewLine;<&sol;ul>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>ใช้โปรแกรมสำหรับสร้างไฟล์ sprite sheet เช่นโปรแกรม TexturePacker หรือลองค้นหารูปมาไว้สำหรับทดสอบ ประมาณนี้<&sol;p>&NewLine;<p><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;02&sol;walking&period;png" alt&equals;"html5 canvas วิธีทำ animation จาก sprite sheet" &sol;><&sol;p>&NewLine;<ul>&NewLine;<li style&equals;"list-style-type&colon; none">&NewLine;<ul>&NewLine;<li><strong>สร้าง canvas div<&sol;strong><&sol;li>&NewLine;<&sol;ul>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>ในส่วนของ html body ให้สร้าง div และตั้งชื่อ id ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true "> &NewLine; &NewLine;&Tab; &NewLine; &NewLine; &NewLine;&Tab;<canvas id&equals;"canvas"><&sol;canvas> &NewLine; &NewLine; &NewLine;<&sol;pre>&NewLine;<ul>&NewLine;<li style&equals;"list-style-type&colon; none">&NewLine;<ul>&NewLine;<li><strong>ตัวแปรหลัก และการโหลดรูปเข้ามาใช้งานใน Canvas<&sol;strong><&sol;li>&NewLine;<&sol;ul>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">var hero&semi; &sol;&sol; ฟังก์ชั่นหลักสำหรับการ วาดและแสดงวนแต่ละเฟรม &NewLine;var heroSrc&semi; &sol;&sol; พาธของรูปที่ sprite จะต้องวาดลงบน canvas &NewLine;var canvas&semi; &sol;&sol; canvas หรือพื้นที่หลักที่จะแสดงผล animation &NewLine; &NewLine;canvas &equals; document&period;getElementById&lpar;"canvas"&rpar;&semi; &NewLine;canvas&period;width &equals; 324&semi; &sol;&sol; ความกว้างของ canvas &NewLine;canvas&period;height &equals; 324&semi; &sol;&sol; ความสูงของ canvas &NewLine; &NewLine; &NewLine;heroSrc &equals; new Image&lpar;&rpar;&semi;&Tab; &NewLine;heroSrc&period;addEventListener&lpar;"load"&comma; loopHero&rpar;&semi; &sol;&sol; โหลดเสร็จให้เริ่มทำงานที่ฟังก์ชั่น loopHero &NewLine;heroSrc&period;src &equals; "walking&period;png"&semi; &sol;&sol; โหลดรูป sprite sheet<&sol;pre>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<ul>&NewLine;<li style&equals;"list-style-type&colon; none">&NewLine;<ul>&NewLine;<li><strong>ฟังก์ชั่นสำหรับการวาดแต่ละเฟรมลงบน canvas และวน loop frame<&sol;strong><&sol;li>&NewLine;<&sol;ul>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>จากรูปตัวอย่าง จะมีขนาด 1980&&num;215&semi;324 px และมีทั้งหมด 12 เฟรม ในการวาดแต่ละครั้ง จะเท่ากับ 1980&sol;12 &equals; 165 เพราะฉะนั้นแต่ละรูปจะมีขนาด 165&&num;215&semi;324 ในการทำรูป sprite sheet นั้น ขนาดของรูปจำเป็นจะต้องนำมาหารด้วยจำนวนเฟรมได้ลงตัว เพื่อให้ animation ดู smooth ที่สุด<&sol;p>&NewLine;<p><strong>&sol;&sol; ฟังก์ชั่น update สำหรับนับจำนวนเฟรม เมื่อสิ้นสุดก็ให้วนกลับมาเริ่มที่เฟรมแรกใหม่<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">function sprite &lpar;options&rpar; &lbrace; &NewLine;&Tab;var ops &equals; &lbrace;&rcub;&comma; &NewLine;&Tab;&Tab;frameIndex &equals; 0&comma; &NewLine;&Tab;&Tab;tickCount &equals; 0&comma; &NewLine;&Tab;&Tab;ticksPerFrame &equals; options&period;ticksPerFrame &vert;&vert; 0&comma; &NewLine;&Tab;&Tab;numberOfFrames &equals; options&period;numberOfFrames &vert;&vert; 1&semi; &NewLine;&Tab; &NewLine;&Tab;ops&period;context &equals; options&period;context&semi; &NewLine;&Tab;ops&period;width &equals; options&period;width&semi; &NewLine;&Tab;ops&period;height &equals; options&period;height&semi; &NewLine;&Tab;ops&period;image &equals; options&period;image&semi; &NewLine;&Tab; &NewLine;&Tab; &NewLine;&Tab;ops&period;update &equals; function &lpar;&rpar; &lbrace; &NewLine;&Tab;&Tab;tickCount &plus;&equals; 1&semi; &NewLine;&Tab;&Tab;if &lpar;tickCount &gt&semi; ticksPerFrame&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;tickCount &equals; 0&semi; &NewLine;&Tab;&Tab;&Tab;if &lpar;frameIndex &lt&semi; numberOfFrames - 1&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;frameIndex &plus;&equals; 1&semi; &NewLine;&Tab;&Tab;&Tab;&rcub; else &lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;frameIndex &equals; 0&semi; &NewLine;&Tab;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;&semi; &NewLine;<&sol;pre>&NewLine;<p><strong>&sol;&sol; ฟังก์ชั่น render สำหรับวาดแต่ละรูปลงไปบน canvas <&sol;strong><br &sol;>&NewLine;ใช้เมธอด context&period;drawImage&lpar;&rpar; กำหนดตำแหน่งที่จะเริ่มวาดและขนาดของแต่ละเฟรม<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true ">&Tab;ops&period;render &equals; function &lpar;&rpar; &lbrace; &NewLine;&Tab; this&period;context&period;clearRect&lpar;0&comma; 0&comma; this&period;width&comma; this&period;height&rpar;&semi; &sol;&sol; เคลียร์รูปเก่าทุกครั้งก่อนวาดรูปใหม่ลงไป &NewLine;&Tab; this&period;context&period;drawImage&lpar; &NewLine;&Tab;&Tab;this&period;image&comma; &NewLine;&Tab;&Tab;frameIndex &ast; this&period;width &sol; numberOfFrames&comma; &NewLine;&Tab;&Tab;0&comma; &NewLine;&Tab;&Tab;this&period;width &sol; numberOfFrames&comma; &NewLine;&Tab;&Tab;this&period;height&comma; &NewLine;&Tab;&Tab;0&comma; &NewLine;&Tab;&Tab;0&comma; &NewLine;&Tab;&Tab;this&period;width &sol; numberOfFrames&comma; &NewLine;&Tab;&Tab;this&period;height&rpar;&semi; &NewLine;&Tab;&rcub;&semi; &NewLine;&Tab; &NewLine;&Tab;return ops&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><strong>&sol;&sol; ความหมายของ พารามิเตอร์ &lpar;Parameters&rpar; แต่ละตัวของเมธอด drawImage&lpar;&rpar;<&sol;strong><br &sol;>&NewLine;<ins datetime&equals;"2018-02-05T08&colon;51&colon;18&plus;00&colon;00"><&sol;ins><&sol;p>&NewLine;<p><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;02&sol;html5&lowbar;drawImage&period;png" alt&equals;"html5&lowbar;drawImage" &sol;><&sol;p>&NewLine;<p>ลิงค์ตัวอย่าง และดาวน์โหลดโค๊ด <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5canvas&lowbar;animate&sol;html5canvas&lowbar;animate&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">html5 Canvas วิธีทำ Animation จาก Sprite Sheet<&sol;a><&sol;p>&NewLine;

Exit mobile version