はじめに

enchant.js を使ってゲームやアプリケーションを作るにはたくさんの方法があります。この中には、「前田ブロック」などのenchant.js から派生して作られた開発環境は含まれていません。

  • code.9leap を使って開発する
  • jsdo.it を使って開発する
  • ファイルシステム上で開発する
  • ローカルのサーバ上で開発する
  • リモートのサーバ上で開発する

code.9leap を使って開発する

code.9leap」は、enchant.js を使って簡単にゲームを作ることができる統合学習・開発環境です。enchant.js や、JavaScript を使ったプログラミングが初めての人におすすめです。

左の画面で実行結果をプレビューしながら、右の画面でプログラミングを進めていきます。好きな画像をアップロードしたり、enchant.js 以外のライブラリやスクリプトファイルを添付することができます。

jsdo.it を使って開発する

jsdo.it」 は、KAYAC Inc. によって提供されているWeb上の開発環境です。enchant.js を利用することもできます。

(ローカルの)ファイルシステム上で開発する

JavaScriptに慣れている方には一番簡単な方法です。JavaScriptファイルをテキストエディタで編集し、enchant.js を読み込むように指定したhtmlファイルをそのままWebブラウザで開くことで確認できます。

たとえば、ダウンロードしたフォルダ内にある /examples/beginners/hellobear/index.html (Web上にある同じファイルはこちら) をブラウザで開いてください。index.html と同じフォルダにある、main.js を編集し、index.html を開き直すと、結果を確認しています。

テキストエディタには様々な種類があります。Mac には CotEditormi など、Windows では Terapadサクラエディタ などがあります。 IDEと呼ばれる、ファイルをプロジェクト単位で管理する様々な機能を持った開発環境も便利です。EclipseAptanaWebStorm などが知られています。

但し、Google Chrome, Firefox などのブラウザの仕様[1]により動かない機能があり、ゲームが起動できないことがあります。例えば:

  • gl.enchant.js を使っている場合、モデルデータの読み込みに失敗する
  • サウンドを使っている場合、サウンドファイルの読み込みに失敗する

ブラウザの起動オプションを指定して起動することで、この制限を回避できます。また、下記のようにWebサーバ上で動作を確認しながら開発することもできます。

[1]: ローカルファイルの origin にファイル名が指定され、Same Origin Policy でアクセスが制限される仕様。Google Chrome 5 以降で導入された。

Webサーバ上で開発する

ローカルに立てた apache などのWebサーバ上で開発します。これらは、インターネット上のサーバを使わず、ブラウザ仕様による制限を回避することができる方法です。

実際に編集するファイルは、ローカルに置いてあるものですが、htmlファイルをWebサーバを経由して見ることで、

たとえば、MAMP (Mac)、XAMPP (Windows) などのパッケージを利用して、ローカルにApache サーバを簡単に立ち上げる方法があります。もちろんリモートのWebサーバが利用できる方はそちらでも問題ありません。

This post is also available in: 英語