3月15日にMicrosoftセミナールームにて行われた第二回CreateJS勉強会の発表内容です。今回はMicrosoftさんということでCreateJSを使用してWindows8アプリの開発に挑戦してみました。その内容を忘れないように簡単にメモしておきます。
開発環境
まずは開発環境を整える必要があります。今回の開発は
・Windows8
上の
・Visual Studio Express 2012 for Windows 8
で行いました。
プロジェクト作成
Visual Studioで新規プロジェクトを作成すると色々なファイルが詰まったプロジェクトが自動で出来あがりますが、とりあえずWindow 8アプリ開発に触れてみるだけなら変更を加えるのは、default.htmlとjs/default.jsの二つだけでした。
普通のCreateJSを用いた制作との違いは？
開発をしていて驚いたのですが、PhpStormで書いてコードをコピペするだけで同じように動きました。Windows 8の魅力としてタッチによる操作があると思いますが、タッチイベント、マウスイベントの違いも気にしなくて大丈夫でした。当日お見せしたサンプルでは下記のようにマウスイベントを登録していたのですが、これがタッチイベントにも問題なく対応してくれました。
|
1 2 3 |
canvas.addEventListener("mousedown", onMouseDown, false); canvas.addEventListener("mousemove", onMouseMove, false); canvas.addEventListener("mouseup", onMouseUp, false); |
今回実際にコードを書き換えたのは２箇所だけでした。
１．初期化のタイミング
コードエディタで書く際は”DOMContentLoaded”のタイミングで初期化をしていましたが、Windows 8アプリではdefault.jsの初期化をすべき場所にコメントがあるのでそこで初期化をするようにしました。
２．Canvasのサイズ
コードエディタで書く際はhtmlのCanvasタグ内でサイズを指定していたのですが、Windows 8アプリではデバイス毎の解像度を考慮してdefault.jsでwindowのサイズを取得し、それをCanvasのサイズに指定しました。
（この処理はコードエディタで書く際にやっておいてもいいですね。）
感想
CreateJSのおかげでAS3を書いている気分でWindows8アプリの開発に取り組めました。CreateJS素晴らし過ぎです。
参考サイト
http://www.sitepoint.com/series/create-a-windows-8-game-with-javascript/
http://msdn.microsoft.com/ja-jp/library/windows/apps/br211385.aspx
当日の様子はこちらからどうぞ。
