ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。
※このセッションは、enchant.jsを使用している場合が対象になります。
プリミティブモデルを表示する
enchant.jsには「gl.enchant.js」というWebGLライブラリがあります。
オブジェクトを生成する際に、2Dスプライトの代わりにプラグインで用意されたプリミティブモデルや、Colladaモデル（以降「3Dスプライト」と呼びます）を表示することが出来ます。
この場合、2Dスプライトと3Dスプライトの衝突判定は出来ません。
WebGLのシーンは、2Dのすべてのシーンよりも下になりますので、WebGLゲームのスコア表示やUIなどに2Dスプライトを使うことが出来ます。
それではまず、enforceでWebGLが使えるようにします。
デフォルトではWebGLはオフになっています。
WebGLの使用を開始するには、lib/config.ini に、
WEBGL=true
と記述してください。
こうすることで、「gl.enchant.js」が読み込まれるようになり、WebGLのシーンが生成され3Dオブジェクトを表示出来るようになります。
設定変更が終わりWebGLが使えるようになりましたら、プラグインで用意されているプリミティブオブジェクトを表示してみます。
「gameControl.coffee」を開き、「when 1」の最後にある「@nextjob()」の直前に下記のコードを追記してください。
addObject
type: PRIMITIVE
model: SPHERE
motionObj: droid
x: -40
y: 0
z: -300
gravity: 0.2
scaleX: 5.0
scaleY: 5.0
scaleZ: 5.0
「type」には「PRIMITIVE」を指定しています。
これでこのオブジェクトの持つスプライトがWebGLの3Dスプライトになります。
2Dスプライトは「image」パラメータで使用する画像データを指定しますが、3Dスプライトは表示するモデルデータを「model」パラメータで指定します。
ここでは「SPHERE」を指定しています。
これはプリミティブで用意された球のモデルです。
プリミティブには他に、
- BOX(width, height, depth)
- CUBE(size)
- SHERE(size)
- CYLINDER(radius, height)
- TORUS(radius, radius2)
- PLANE(size)
があります。
引数はそれぞれのモデルに必要なパラメータになります。
動きを定義したクラスとして「droid」を指定します（これは雛形に標準で入っているので削除していなければすでに「src」ディレクトリに「droid.coffee」があるはずです）。
処理としては、ある程度まで落ちると跳ね返る処理が記述されています。
x、y、zは表示する3次元座標になります。
gravityは重力、scaleX、scaleY、scaleZは拡大率を渡します。
このコードでは「(-40, 0, -300)の位置に5倍の大きさで、重力は0.2」で表示させます。
修正が終わり保存／コンパイルを行いWebブラウザをリロードさせ、「z」キーを押すと画面左側に球が跳ねていると思います。
Colladaモデルデータを表示する
次にenforceに標準で入っている「droid君」のColladaモデルデータと、サンプルのクラスが入っているのでこれを使ってみます。
まずは「environ.coffee」を開き、プリロードデータ設定のコードに下記のコードを追記してください。
droid : 'media/model/droid.dae'
オリジナルデータを使用する場合はColladaのデータである、拡張子が「dae」のファイルと、必要なテクスチャファイルを
media/model
の中に用意し、「environ.coffee」に追記してください。
次に、「gameControl.coffee」を開き、「when 1」の最後にある「@nextjob()」の直前に下記のコードを追記してください。
addObject
type: COLLADA
model: 'droid'
motionObj: droid
x: 40
y: 0
z: -300
gravity: 0.2
scaleX: 5.0
scaleY: 5.0
scaleZ: 5.0
「type」に「COLLADA」を指定しています。
これがColladaモデルデータの指定になります。
「model」には「environ.coffee」に記述したモデル名を指定します。
動きを定義したクラスとして先ほどのPRIMITIVEと同じく「droid」を指定しています。
パラーメータに関してはプリミティブの時とほとんど同じです。
このコードでは「(40, 0, -300)の位置に5倍の大きさで、重力は0.2」で表示させます。
修正が終わり保存／コンパイルを行いWebブラウザをリロードさせ、「z」キーを押すと画面左側に先ほどの球が、画面右側にdroid君が表示され跳ねていると思います。
これら3Dオブジェクトは、z座標の処理が増えている以外は2Dスプライトと同じように操作することが出来ます。
3Dスプライトも2Dスプライトと同様に、「拡大縮小したとしても、当たり判定はオリジナルサイズで行われる」というポリシーは引き継がれています。
（これはenchant.jsのポリシーのようです）
チュートリアル（１６） <--- ⬛︎ ---> チュートリアル（１８）