พัฒนา Application บน HTML5 Canvas โดยใช้ CreateJS

สำหรับ Framework ที่ช่วยในการพัฒนา Application บน HTML5 Canvas มีให้เลือกอยู่ค่อนข้างเยอะ ลองไป 2-3 ตัว แต่มาสะดุดที่ตัวนี้ ชื่อว่า EaselJS เป็น JavaScript Library สำหรับช่วยในการทำงานกับ HTML5 Canvas เป็นส่วนหนึ่งของ project ที่ชื่อว่า CreateJS ลองใช้แล้วรู้สึกว่าใช้ง่ายดี เข้าใจว่าวิธีการใช้งานน่าจะจำลองมาจาก ActionScript ครับ ทำให้ใครที่เขียน Flash มาก่อน น่าจะเริ่มใช้งานได้ไม่ยาก เรียนรู้ไม่นานก็ใช้เป็นแล้ว ตัว Framework รองรับ Physic Engine ที่ port มาจาก Box2d (ถ้าใครไม่รู้จัก มันคือ Physic Engine ที่ใช้พัฒนา Games อย่างเช่น Angry Bird หลายๆ Framework ที่ผมลองศึกษาดู ส่วนมากก็ใช้ Box2d เป็น Physic Engine) 

วิธีการใช้งานคร่าวๆ ก็เริ่มต้นจากการสร้าง stage ขึ้นมาก่อน (โดยสร้างขึ้นมาจาก canvas นั่นเอง ซึ่งผู้ออกแบบน่าจำทำให้ใกล้เคียงกับวิธีการพัฒนาด้วย Flash)  จากนั้นก็เริ่ม add ตัวละครต่างๆเข้าไปไว้ใน stage กำหนด frame rate จากนั้นก็เขียน code ควบคุม ตัว Framework รองรับการใช้งาน Sprite Sheet (ส่วนมาใช้กับภาพเคลื่อนไหวของตัวละคร โดยการนำหลายๆ frame มาเรียงไว้ใน file เดียวกัน เพื่อช่วยลด overhead ในการ request) รองรับการทำ Tween ค่า property ต่างๆ

การสร้าง Application บน HTML5 Canvas ให้สมบูรณ์ จะต้องประกอบขึ้นจากหลายๆส่วน ซึ่ง EaselJS เป็นเพียงส่วนหนึ่งของ CreateJS ซึ่งประกอบไปด้วย EaselJS, TweenJS, SoundJS, PreloadJS ซึ่งผมยังไม่มีเวลาลองทั้งหมด ได้ลองเล่นเพียงแค่บางส่วนของ EaselJS (เพราะอยากจะได้วิธีทำงานกับ canvas แบบง่ายๆหน่อย) พอได้ลองเล่นแล้วก็รู้สึกว่าสงสาร Flash ครับ คิดว่าไม่น่าจะรอด เพราะ Canvas บน HTML5 มันทำอะไรได้เยอะมาก แทบไม่แตกต่างจาก Flash นี่ขนาดยังไม่ได้ใช้ WebGL เลยนะครับ ทำให้คิดว่า Canvas น่าจะเป็น Application Platform ที่น่าจะได้รับความนิยม ควรศึกษาเอาไว้ครับ

แหล่งที่มา : http://www.createjs.com