ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。
※enforceの現在のバージョンでは、tmlib.jsで物理演算スプライトが使えません。
box2dを使った物理演算スプライトを使う
enchant.jsには、box2dライブラリを使った専用のライブラリがあります。
enforceでは標準で物理演算ライブラリが読み込まれますので、システム側で特になにかする必要はありません。
地面を表示する
物理演算スプライトは、動的属性を付けた場合は重力によって延々と下へ落ちていってしまうため、地面となるオブジェクトを生成します。
まずは地面に使うスプライト画像をプリロード一覧に追加します。
「environ.coffee」を開き、
bear : 'media/picture/chara1.png'
の下に、
ground : 'media/picture/controlplane.png'
を追記してください。
この「controlplane.png」は、スマートフォンでタッチ操作を受け取るプレーンに使用する透明な画像なのですが、とりあえずはこれを使っておきます。
次に「enforceMain.coffee」を開き、「constructor」メソッドの最後に下記を追記してください。
box2dGround = addObject
image: 'ground'
width: SCREEN_WIDTH
height: 32
x: SCREEN_WIDTH / 2
y: SCREEN_HEIGHT
rigid: true
kind: STATIC_BOX
animlist: [
[100, [0]]
]
表示に使用する画像として、先ほどプリロード一覧に追加した「ground」を使っています。
ここで注目するのは、
rigid: true
kind: STATIC_BOX
です。
スプライト生成の際に「rigid」パラメータを「true」にすることで、物理演算スプライトになります。
物理演算スプライトには4種類あり、
- DYNAMIC_BOX
- DYNAMIC_CIRCLE
- STATIC_BOX
- STATIC_CIRCLE
という定数で「kind」パラメータで指定します。
「DYNAMIC」で始まるものは、重力の影響を受け下に落ちていきます。
「STATIC」で始まるものは、重力の影響を受けないので、その場に静止しています。
「STATIC」で始まる物理演算スプライトは、見た目は通常のスプライトと同じですが、通常のスプライトは物理演算スプライトとの物理衝突処理が行われません。
「enforceMain.coffee」に追記し、コンパイルされましたらWebブラウザをリロードしてみてください。
画面再下段に赤い枠が出て、物理演算スプライトが生成されているのが分かります。
物理演算キャラを生成する
次に、「gameControl.coffee」の「when 1」の最後にある「@nextjob()」の直前に、下記のコードを追記してください。
for i in [0...5]
box2dObj = addObject
image: 'bear'
motionObj: enemy01
width: 32
height: 32
x: SCREEN_WIDTH / 2 + (rand(6) - 3)
y: 0
rigid: true
kind: DYNAMIC_BOX
density: 1.0
friction: 0.1
restitution: 0.9
animlist: [
[50, [0, 1, 2, 1]]
]
今度は、「DYNAMIC_BOX」で物理演算スプライトを生成しています。
動きを定義するクラスとして「enemy01」を指定していますので、画面の左右を越えてしまう時の対処が行われるので、画面外に消えることはありません。
「density」で質量、「friction」で摩擦係数、「restitution」で反発力を指定します。
それでは、保存しコンパイルし、Webブラウザをリロードしてみてください。
「z」キーを押してゲームを開始すると上から5匹のクマが落ちて来ると思います。
そして、最初に生成した地面の物理演算スプライトに衝突すると弾け飛びます。
チュートリアル（１０） <--- ⬛︎ ---> チュートリアル（１２）