สำหรับ 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
Showing posts with label canvas. Show all posts
Showing posts with label canvas. Show all posts
Wednesday, 14 November 2012
Saturday, 10 November 2012
เทคนิคการทำให้ IE8 ใช้งาน HTML5 Canvas 2D ได้
สำหรับ Browser ใหม่ๆอย่างเช่น Firefox, Safari, Chrome และ Opera ต่างรองรับการใช้งาน HTML5 canvas 2D context อยู่แล้ว แต่ปัญหาอยู่ที่ IE8 ซึ่งยังไม่รองรับการใช้งาน ซึ่งเราสามารถทำให้ IE8 รองรับการใช้งาน canvas ได้ โดยใช้ ExplorerCanvas ซึ่งวิธีการใช้งานก็เพียงแค่ include script ดังต่อไปนี้เข้าไปบริเวณส่วนหัวของ page
<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
แต่วิธีนี้ก็มีปัญหาอยู่นิดนึง คือ ในกรณีที่เราสร้าง canvas ขึ้นมาเองในขณะ runtime (คือ ไม่ได้เขียน canvas tag ไว้ใน HTML แต่ใช้ JavaScript สร้างขึ้นมา) ซึ่งในกรณีนี้ canvas ที่ถูกสร้างขึ้นจะไม่มี method ที่ชื่อว่า getContext ซึ่งจะทำให้เราไม่สามารถวาดอะไรไปบน canvas ได้นั่นเอง วิธีในการแก้ไขก็คือ คุณจะต้องเรียก G_vmlCanvasManager.initElement() ก่อน ดังต่อไปนี้
var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
สำหรับผู้ที่สนใจ สามารถเข้าไปดาวน์โหลด ExplorerCanvas มาใช้งานได้จากที่นี่ครับ http://code.google.com/p/explorercanvas/
แหล่งที่มา: http://diveintohtml5.info/canvas.html
<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
แต่วิธีนี้ก็มีปัญหาอยู่นิดนึง คือ ในกรณีที่เราสร้าง canvas ขึ้นมาเองในขณะ runtime (คือ ไม่ได้เขียน canvas tag ไว้ใน HTML แต่ใช้ JavaScript สร้างขึ้นมา) ซึ่งในกรณีนี้ canvas ที่ถูกสร้างขึ้นจะไม่มี method ที่ชื่อว่า getContext ซึ่งจะทำให้เราไม่สามารถวาดอะไรไปบน canvas ได้นั่นเอง วิธีในการแก้ไขก็คือ คุณจะต้องเรียก G_vmlCanvasManager.initElement() ก่อน ดังต่อไปนี้
var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
สำหรับผู้ที่สนใจ สามารถเข้าไปดาวน์โหลด ExplorerCanvas มาใช้งานได้จากที่นี่ครับ http://code.google.com/p/explorercanvas/
แหล่งที่มา: http://diveintohtml5.info/canvas.html
Subscribe to:
Posts (Atom)