mobile-graphic-enchant-examples-beginner-hellobear-main.js / js
enchant(); Preparation for using enchant.js. (Exporting enchant.js class to global namespace. ex. enchant.Sprite -> Sprite etc..) enchant.js を使う前に必要な処理。 (enchant.js 本体や、読み込んだプラグインの中で定義されている enchant.Foo, enchant.Plugin.Bar などのクラスを、 それぞれグローバルの Foo, Bar にエクスポートする。)
new Game(width, height) Make instance of enchant.Game class. Set window size to 320 x 320 Game オブジェクトを作成する。 画面の大きさは 320ピクセル x 320ピクセル に設定する。
Game.fps Set fps (frame per second) in this game to 15. ゲームの fps (frame per second) を指定する。この場合、1秒間あたり15回画面が更新される。
Game#preload You can preload all assets files before starting the game. Set needed file lists in relative/absolute path for attributes of Game#preload 必要なファイルを相対パスで引数に指定する。 ファイルはすべて、ゲームが始まる前にロードされる。
Game#onload ロードが完了した直後に実行される関数を指定している。 onload プロパティは load イベントのリスナとして働くので、以下の2つの書き方は同じ意味。 game.onload = function(){ // code } game.addEventListener("load", function(){ // code })
new Sprite(width, height) スプライトオブジェクトを作成する。 Sprite は、Entity, Node, EventTarget を継承しており、それぞれのメソッドやプロパティを使うことができる。
Sprite.image {Object} Game#preload で指定されたファイルは、Game.assets のプロパティとして格納される。 Sprite.image にこれを代入することで、画像を表示することができる
Node.x Node.y {Number} x, y 座標を指定する。 viewport の大きさに合わせて画面が拡大縮小されている場合も、 オリジナルの座標系で指定できる。
Sprite.frame {Number} (width, height) ピクセルの格子で指定された画像を区切り、 左上から数えて frame 番目の画像を表示することができる。 デフォルトでは、0:左上の画像が表示される。 このサンプルでは、シロクマが立っている画像を表示する (chara1.gif 参照)。
Group#addChild(node) {Function} オブジェクトをノードツリーに追加するメソッド。 ここでは、クマの画像を表示するスプライトオブジェクトを、rootScene に追加している。 Game.rootScene は Group を継承した Scene クラスのインスタンスで、描画ツリーのルートになる特別な Scene オブジェクト。 この rootScene に描画したいオブジェクトを子として追加する (addChild) ことで、毎フレーム描画されるようになる。 引数には enchant.Node を継承したクラス (Entity, Group, Scene, Label, Sprite..) を指定する。
EventTarget#addEventListener(event, listener) イベントに対するリスナを登録する。 リスナとして登録された関数は、指定されたイベントの発行時に実行される。 よく使うイベントには、以下のようなものがある。 - "touchstart" : タッチ/クリックされたとき - "touchmove" : タッチ座標が動いた/ドラッグされたとき - "touchend" : タッチ/クリックが離されたとき - "enterframe" : 新しいフレームが描画される前 - "exitframe" : 新しいフレームが描画された後 enchant.js やプラグインに組み込まれたイベントは、それぞれのタイミングで自動で発行されるが、 EventTarget#dispatchEvent で任意のイベントを発行することもできる。 ここでは、右に向かって走っていくアニメーションを表現するために、 新しいフレームが描画される前に、毎回クマの画像を切り替え、x座標を1増やすという処理をリスナとして追加する。
クマを走らせるために、x座標をインクリメントしている。 この無名関数 function(){ ... } は enterframe イベントのリスナなので、毎フレーム実行される。
this.age (Node.age) は、クマのオブジェクトが今までに何回描画されたか クマの画像を変えて走るアニメーションを表現するために、 frame を 6 -> 7 -> 6 -> 7.. と順番に変えている。
タッチされると消える処理を実現するために、 touchstart イベントが起こったとき、クマが消える処理をリスナとして追加する。
クマを game.rootScene から削除する。 Group#addChild の逆は Group#removeChild。
Game#start ゲームを開始する。この関数を実行するまで、ゲームは待機状態となる。 代わりに Game#debug を使うことで、デバッグモードで起動することができる。 Game#pause(); で一時停止し、 Game#resume(); で再開することができる。
(C) Æliens 04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.