スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JSゲームエンジンPropulsionJSのソースを読む

引き続き、読めそうなサイズのJavaScriptゲームエンジンを探して読んでいる。
Canvasを使っているエンジンを探して見つけたのがPropulsionJS
ファイルは propulsion.jsのみ。非圧縮で36KB。

ドキュメントを見ると、アクションゲームに必要な機能がそろっているのがわかる。
<機能について気づいたこと>
・PP.Alarmで「指定したフレーム数経過後に指定した関数を起動」を設定できる。
・シーン管理機能は無いが、PP.loop.roomに関数をセットすることで画面を切り替えることができる。オブジェクトの入れ替えなどを行う関数をユーザーが作成する必要がある。
・レイヤー管理機能は無い。PP.draw.depthでオブジェクトごとに管理。
・CSS Spriteには対応していない。同一オブジェクトのアクション画像だけは、等幅画像を横一列につなげて1枚の画像ファイルを作成する必要がある。

ソースを読んでわかったことは以下のとおり。
1.衝突判定がかなり気合入っている
・任意の多角形同士の衝突判定ができる。ただし、デフォルトではキャラクター画像サイズの長方形で判定。
・衝突した結果跳ね返った位置を算出できる。衝突した2つのオブジェクトに対して、跳ね返りの割合をパラメータで設定できる。
・衝突位置を算出できる。
SATアルゴリズムで判定しているとソースのコメントにある。
各多角形の辺と、それぞれの垂直ベクトルとの内積を使っているが、何でそれで衝突判定できるのかわからない。
後でちゃんと調べてみるかな。

2.accessor propertyを活用
ECMAScript 5th editionで導入されたaccessor propertyを使いこなしている。
accessor propertyとは、「プロパティに対してgetやsetが発生したときに呼び出す関数を設定できる」プロパティ。
PropulsionJSでは、次の3種類のやり方で実装している。
get演算子set演算子を使用
 日本語のリファレンスは見つけられなかった。
・Object.definePropertyメソッドを使用
 definePropertyメソッドについては ECMA-262 5th edition で導入された Object.defineProperty を使い、属性を指定してプロパティを定義する に詳しい解説がある。
Object.watchメソッドを使用
 setしか設定できない。PropulsionJSでは、watchメソッドがサポートされていない環境用に、Object.definePropertyで実装したwatchメソッドを提供している。

accessor propertyの利用方法に興味がある人には、PropulsionJSのソースを見る価値があると思う。
代入文を記述するだけで関数が実行されるため、コードがすっきりする。
ただし、コードの一部を読んだだけでは関数が実行されていることに気づかない。


ゲームエンジンよりも、accessor propertyについて勉強になった。
accessor property関連はIE8以前では全く動かないが、そもそもCanvasが動かないからPropulsionJSでは考慮していないのだろう。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。