このエントリーは、「ゲームエンジン・ライブラリ・ツールの開発 Advent Calendar 2016」の12/9の記事です

enforceIDEとは

enforceIDEは、Webゲーム開発プラットフォームです。Webブラウザだけで完結しています。使い始めるにはメールでの登録、もしくはTwitter認証が必要になります。Twitterアカウントを持っていれば、トップ画面のTwitterボタンをクリックし、Twitter認証でenforceIDEへのログインを許可すれば、すぐに使い始めることが出来るのでオススメです。

開発言語

enforceIDEでは、ゲームをCoffeeScriptで記述します。CoffeeScriptのクラスを修正／追記することでゲームを作っていきます。

概要

ゲーム自体は、私が作っているWebゲーム作成フレームワーク「enforce」を使用しています。
（enforce自体のチュートリアルはQiitaにまとめています → enforceチュートリアル）
このenforceのゲームをWebブラウザから管理／編集出来るようにしたものがenforceIDEになります。Webサービス自体は私の作っているCMS作成フレームワーク「code:JS」で作成しています。
enforceは独自のスプライト管理方法を使い、スプライトの動作を定義していく形でゲームを作っていきます。内部的なスプライトはenchant.jsと、tmlib.jsを使うことが出来ます。ゲーム自体は各スプライトライブラリの独自クラス／メソッドに直接アクセスしたりせず、完全にラップされた状態になっているので、まったく同じゲームスクリプトが、スプライトライブラリを切り替えてもそのまま動作します。（一部、片方のライブラリにしかない機能もあります（ExtendMap、box2dなど））。

ゲーム開発

enforceでのゲーム開発は、上でも書きましたがフレームワークが生成するクラスのメソッド内に、キャラクタの動きを定義する形でゲームを作っていきます。ゲームシステムに関するコードは一切書きません。
ゲームを作るというより、キャラクタの動きを時系列で定義していくというプログラミングになります。

ゲーム一覧画面

ログインすると、下記のような画面になります。まだゲームがひとつも無い状態です。
一番上の左端にある「enforceIDE」をクリックすると、またこの画面に戻ってきます。
隣にあるアカウント名の歯車アイコン周辺をクリックすると、環境設定画面になります。

環境設定画面

「エディターとゲーム画面を分割」を「する」にすると、右ペインが左右に分割され、右にゲーム画面、左にエディター画面が表示されるようになり、ゲームの動作を見ながらゲームを作れるようになります。
ブラウザを横長に出来ない状態だと、ゲーム画面が小さくなってエディットしづらいので、そういう時は「しない」で作業してください。

「デフォルトスプライトライブラリ」は新規ゲーム作成時に選択されているスプライトライブラリを指定します。
現在は「enchant.js」と「tmlib.js」から選択出来ます。

「エディターモード」はソースコードのエディット時のキーバインドの選択になります。
デフォルトは「Normal」になります。「vim」に慣れている人は「vim」を選択してください。

新規ゲーム作成

画面最上部のアカウント名の右にあるアイコンをクリックすると、「新規ゲーム作成」ダイアログが表示されます。プロジェクト名を入力し「OK」を押すとゲームの雛形が作成され、図のようにゲームのアイコンがひとつ表示されます（ゲームの作成にはちょっと時間がかかります）。

ゲーム編集画面

ゲームのアイコンをクリックするとゲームの編集画面に変わります。左ペインにソースコード一覧が表示されます。ソースファイル一覧の上にある3つのアイコンの真ん中、ファイル画像のアイコンをクリックするとソースファイルを追加することが出来ます。
ここで追加するソースファイルは真っさらなファイルではなく、enforceで用意した雛形ファイルになります。このファイルはenforceで使用出来るようにするためのクラスを継承したクラスファイルになります。このクラスファイルをどう修正してゲームを作っていくかは、enforceチュートリアルに一部機能ですがまとめてあります。

ゲームページのQRコード

画面最上部のログインID名のすぐ右にあるゲームアイコンをクリックすると、このゲームを遊ぶためのURIがQRコードで表示されます。スマートフォンなどで確認したり、人に遊んで貰う場合はこのQRコードで表示されたページのURIを教えてください。

ソース編集画面

ソース部分をクリックすると編集モードになります。ノーマル編集モードであればカーソルキーを使って、vimモードであればvimキーオペレーションで編集します。「保存」という動作は特にありません。他のファイルを選択するか、ゲームを実行すると編集していたファイルはすべて保存されます。編集中にページを閉じたりブラウザを終了すると、一部のファイルが保存されない場合があるのでご注意ください。

ゲーム一覧画面を表示する

QRコードを表示するアイコンの右にあるフォルダアイコンをクリックすると、最初のゲーム一覧画面に戻ります。

メディア管理画面

ゲーム一覧に戻るアイコンの右にあるアイコンをクリックすると、ゲームで使うための画像と音声ファイルを管理する状態になります。左ペインの画像ファイル名や音声ファイル名をクリックするとプレビューすることが出来ます。画像は右ペインに表示され、音声は再生されます（音声は再生中に同じファイルをクリックすると停止します）。
ファイルをアップロードするとIDEが生成したユニークなファイル名が付けられます。ゲームで使う時はこの名前をコピー／ペーストして使います。

ゲーム実行

上に並んでいるアイコンの右向き三角形（再生ボタンみたいなアイコン）をクリックするとブラウザ内でゲームが実行されます。画面分割設定をしていない場合は、右ペイン全体にゲームが表示されます。このままだとゲームにキーイベントなどが渡らないので、ゲーム画面の中のゲームで使っていない部分（画像例では黒ではなくグレーの部分）をクリックすることでゲームにイベントが渡るようになります。

画面を分割する設定にしている場合は、右ペインの右半分にゲームが表示されます。この状態だとゲームの動きを見ながらデバッグすることが出来ます。ブラウザを横長に出来る場合は重宝すると思います。

ジョイパッド対応

enforceIDEでは、私が別で公開しているGamePadAPIをJavaScriptで扱うようにするライブラリGamepadProcedureを使っています。このライブラリとキーボード入力を合成して、ワンソースでキーボードとゲームパッドでの操作を対応できるようにしています。

スプライトライブラリとして、enchant.jsと、tmlib.jsを使っていますが、これらのライブラリを直接叩くわけではないので、enforceIDEはenchant.jsなどの学習には使えません。

システムプログラミングなどをせずに、ゲームを作ることだけに集中するために作成しました。