ゲーム作成フレームワークとは

もともと、enchant.jsやtmlib.jsもフレームワークと言われることがありますが、なぜ、このenforceがさらに強調してフレームワークを謳うのか。
それには以下の点が挙げられます。

ゲーム毎にサンドボックス化される
ゲームを作る上での雛形が形成されている
最低限のゲームシステムが完成しているのでゲームを作るということに専念出来る

全てのゲームが同じシステムを使用するため、ゲーム毎の仕組みがほぼ同じになり後からソースを読みやすいという利点もあります。

このゲームフレームワークは、特に記載が無い場合はすべてCoffeeScriptが前提になります。

1. ゲーム毎にサンドボックス化される

各ゲームがひとつのディレクトリで完結し、DocumentRoot配下であればどこに置いても動かすことが出来ます。
また、ゲームの開発中はPHP5が必要ですが、完成した後は静的モードにすることで、PHP5の動かないサーバーでも動かすことが出来ます。
スタティックモードのゲームはHTML5(Canvas)＋Javascriptライブラリ(enchant.js or tmlib.js、その他)＋Javascriptゲームスクリプトだけで動作します。
静的モードにしたゲームは、クライアントのWebブラウザだけで実行することが出来ます。

2. ゲームを作る上での雛形が形成されている

このフレームワークを使ってゲームを作る場合、画像のアニメーション設定や、使用する画像の指定とかでenchant.jsやtmlib.jsを直接叩くことはありません。
また、完全にオリジナルの新規クラスを生成することもありません。
このフレームワークでは、使用するクラスは全て同一のクラスを継承したクラスになります。
この「同一のクラスを継承したクラス」も自分でファイルを作ることはしません。
コマンドラインでコマンドを叩くことによって生成されます。

3. 最低限のゲームシステムが完成しているのでゲームを作るということに専念出来る

スプライトのサイズを指定したり、アニメーションを指定したり、サウンドを鳴らしたりする仕組みが作ってあるので、関数を呼んだりパラメータで指定するだけで操作することが出来るので、システム周りのプログラミングをする必要がなく、純粋に「ゲームを作る」ということに専念出来ます。

環境

enforceを使ってゲームを作るには下記の環境が整ったWebサービスが使えるサーバーが必要になります。
（Macであればローカルで整います）
PHP5はWebとコマンドラインと両方で使えるようにしてください。

PHP5.x
CoffeeScript

インストール

githubにあるリポジトリをクローンします。

$ git clone https://github.com/digitarhythm/enforce.git

カレントディレクトリにリポジトリが正常にクローンされた後、

[クローンされたパス]/bin

にPATHを通してください。

新規ゲーム作成

新しいゲームを作成する時はDocumentRoot配下のディレクトリで、

$ enforce new [ゲームディレクトリ名]

というコマンドを実行します。
ちなみに「enforce」コマンドをオプション無しで実行すると、コマンドの説明が表示されます。

<Usage>
enforce2 function [option]
<function>
new : create new project(require option is package name)
update : update system library
derive : create a new object class(require option is new class name)
static : project to static mode
develop: project to develop mode

ここでは「game01」というディレクトリ名を指定したとして進めていきます。

$ enforce new game01

コマンドの実行が正常終了した場合は、カレントディレクトリに指定した名前(game01)のディレクトリが生成されています。
ゲーム開発はこのディレクトリの中で行います。
ゲームに必要なメディアファイルも全てこのディレクトリ内の適当な場所に配置します。
このディレクトリの外のメディアは使用出来ません。

ゲームを作成する

ゲームのディレクトリを作成した後に、

http://ゲームにアクセスするためのドメイン/game01/

にアクセスしてみてください。
httpdが正しく設定されていれば、クマのキャラクタが飛び回る画面が表示されるはずです。
それでは、スクリプトを見てみましょう。
[ゲームディレクトリ]/src/
の中を見ると、

.htaccess
droid.coffee
enforceMain.coffee
environ.coffee
sample.coffee

の5つのファイルが自動的に生成されています。
「.htaccess」はスクリプトではないので無視してください。
enforceでは、ディレクトリにアクセスすると、「enforceMain.coffee」で生成したスクリプトが実行されます。
では、この「enforceMain.coffee」を見てみましょう。

class enforceMain
    constructor:->
        dir = rand(16) - 8
        bearobj = addObject
            motionObj: sample
            type: SPRITE
            x: SCREEN_WIDTH / 2
            y: 100
            gravity: 1.0
            xs: dir
            image: 'bear'
            width: 32
            height: 32
            opacity: 1.0
            scaleX: if (dir < 0) then -1 else 1
            animlist: [
                [50, [0, 0, 1, 1, 2, 2, 1, 1]]
            ]

ゲームスタート時にこの処理が呼ばれます。
上から解説していきます。

class enforceMain
    constructor:->

この2行は決まりなのでこういうものだと思ってください。

    dir = rand(16) - 8

この行は乱数（-8〜8）を発生させています（rand(n)は、0〜nまでの乱数）。
次の行からの「addObject」がキャラクタの生成になります。
キャラクタの情報をオブジェクトで渡します。
motionObjは、このキャラクタの動きを定義したクラスの名前を定義します。
指定しない場合は特別な動きを記述していないキャラクタになります。
typeは、このキャラクタの種類を指定します。
デフォルトは「SPRITE」になっているので、指定をしないとSPRITEになります。
xと、yはキャラクタの初期座標を指定します（必須）。
gravityは重力を指定します。
ここで言う重力は物理演算の重力ではなく、毎フレームにY座標の加速量（ys）に加算される値を指定します。
xsは、フレーム毎にX座標に加算される値を指定します。
同様にysというパラメータもあります。
imageは、このキャラクタで使うグラフィックを指定します（必須）。
後述する「environ.coffee」で設定した名前を指定します。
widthは、このキャラクタの幅を指定します（必須）。
heightは、このキャラクタの高さを指定します（必須）。
ここで指定したサイズで、グラフィック画像から切り出して表示されます。
opacityは透明度を指定します。
0.0〜1.0の範囲で指定します。
scaleXと、scaleYは拡大率を指定します。
このパラメータで拡大縮小をしても、当たり判定はwidthと、heightのサイズで行われます。
animlistは、このキャラクタで使用するアニメーションパターンを2次元配列の配列で指定します（必須）。

[50, [0, 0, 1, 1, 2, 2, 1, 1]]

この場合は、各フレームを50msで画像番号0, 0, 1, 1, 2, 2, 1, 1の順番で表示ということになります。
このパターンを複数登録しておき、アニメーション番号を設定することでアニメーションを切り替えることが出来ます。

⬛︎ ---> チュートリアル（２）

enforceチュートリアル一覧

enchant.jsとtmlib.jsを使ったゲーム作成フレームワーク「enforce」チュートリアル（１）導入編