「VisualStudio2015」&「typescript」&「Apache Cordova」&「pixi.js」でゲーム開発への道のり その1

タイトルのとおり
「VisualStudio2015」&「typescript」&「Apache Cordova」&「pixi.js」でゲームを作ってみようと思い立ったので作成日記をかねてメモ。

試行錯誤しながらやってるので、正しいかどうかの保証は無い。

まずは、「pixi.js」のサンプル(バニーがクルクル回るやつ)を動かすのにチャレンジ。

とりあえず、「VisualStudio2015」のインストールして、空のCordovaアプリを作り

1. 下準備
• Pixi.js
• 「pixi.js-master.zip」をここからダウンロードし解凍する。
• Pixi.jsのtypescript用のファイル
• 「pixi-typescript-master.zip」をここからダウンロードし解凍する。
2. 解凍したファイルの配置。
• 「pixi.js-master.zip」を解凍してできた「pixi.js」,「pixi.js.map」
• 「%プロジェクト%\www\scripts」に配置
• 「pixi.js-master.zip」を解凍してできた「bunny.png」
• 「%プロジェクト%\www\images」に配置
• 「pixi-typescript-master.zip」を解凍してできた「package.json」,「pixi-extra-filters.d.ts」,「pixi-spine-tests.ts」,「pixi-spine.d.ts」,「pixi.js-tests.ts」,「pixi.js.d.ts」
• 「%プロジェクト%\scripts」に配置
3. 「index.html」の編集
• 「<p>アプリケーションの準備が整いました。</p>」を削除。
• 「<script src="scripts/pixi.js"></script>」を追加
4. 「index.ts」の編集
• サンプルのコードを「index.ts」の関数「initialize() 」に追加、「'_assets/basics/bunny.png'」を「'images/bunny.png'」に書き換える。
5. 実行
• バニーがクルクル回る。

各ファイルの配置は以下の画像の通り。

「index.ts」はこんな感じ、

実行するとこんな感じ

その2に続く。