topical media & game development

talk show tell print

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 にエクスポートする。)

  
  enchant();
  
  /*
   * window.onload
   *
   * The function which will be executed after loading page.
   * Command in enchant.js such as "new Game();" will cause an error if executed before entire page is loaded.
   *
   * ページがロードされた際に実行される関数。
   * すべての処理はページがロードされてから行うため、 window.onload の中で実行する。
   * 特に new Game(); は、<body> タグが存在しないとエラーになるので注意。
   */
  window.onload = function(){
      
new Game(width, height) Make instance of enchant.Game class. Set window size to 320 x 320 Game オブジェクトを作成する。 画面の大きさは 320ピクセル x 320ピクセル に設定する。

  
      var game = new Game(320, 320);
  
      
Game.fps Set fps (frame per second) in this game to 15. ゲームの fps (frame per second) を指定する。この場合、1秒間あたり15回画面が更新される。

  
      game.fps = 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.preload("mobile-graphic-enchant-examples-beginner-hellobear-chara1.png");
  
      
Game#onload ロードが完了した直後に実行される関数を指定している。 onload プロパティは load イベントのリスナとして働くので、以下の2つの書き方は同じ意味。 game.onload = function(){ // code } game.addEventListener("load", function(){ // code })

  
      game.onload = function(){
          
new Sprite(width, height) スプライトオブジェクトを作成する。 Sprite は、Entity, Node, EventTarget を継承しており、それぞれのメソッドやプロパティを使うことができる。

  
          bear = new Sprite(32, 32);
  
          
Sprite.image {Object} Game#preload で指定されたファイルは、Game.assets のプロパティとして格納される。 Sprite.image にこれを代入することで、画像を表示することができる

  
          bear.image = game.assets["chara1.png"];
  
          
Node.x Node.y {Number} x, y 座標を指定する。 viewport の大きさに合わせて画面が拡大縮小されている場合も、 オリジナルの座標系で指定できる。

  
          bear.x = 0;
          bear.y = 0;
  
          
Sprite.frame {Number} (width, height) ピクセルの格子で指定された画像を区切り、 左上から数えて frame 番目の画像を表示することができる。 デフォルトでは、0:左上の画像が表示される。 このサンプルでは、シロクマが立っている画像を表示する (chara1.gif 参照)。

  
          bear.frame = 5;
          
Group#addChild(node) {Function} オブジェクトをノードツリーに追加するメソッド。 ここでは、クマの画像を表示するスプライトオブジェクトを、rootScene に追加している。 Game.rootScene は Group を継承した Scene クラスのインスタンスで、描画ツリーのルートになる特別な Scene オブジェクト。 この rootScene に描画したいオブジェクトを子として追加する (addChild) ことで、毎フレーム描画されるようになる。 引数には enchant.Node を継承したクラス (Entity, Group, Scene, Label, Sprite..) を指定する。

  
          game.rootScene.addChild(bear);
  
          
EventTarget#addEventListener(event, listener) イベントに対するリスナを登録する。 リスナとして登録された関数は、指定されたイベントの発行時に実行される。 よく使うイベントには、以下のようなものがある。 - "touchstart" : タッチ/クリックされたとき - "touchmove" : タッチ座標が動いた/ドラッグされたとき - "touchend" : タッチ/クリックが離されたとき - "enterframe" : 新しいフレームが描画される前 - "exitframe" : 新しいフレームが描画された後 enchant.js やプラグインに組み込まれたイベントは、それぞれのタイミングで自動で発行されるが、 EventTarget#dispatchEvent で任意のイベントを発行することもできる。 ここでは、右に向かって走っていくアニメーションを表現するために、 新しいフレームが描画される前に、毎回クマの画像を切り替え、x座標を1増やすという処理をリスナとして追加する。

  
          bear.addEventListener("enterframe", function(){
              
クマを走らせるために、x座標をインクリメントしている。 この無名関数 function(){ ... } は enterframe イベントのリスナなので、毎フレーム実行される。

  
              this.x += 1;
  
              
this.age (Node.age) は、クマのオブジェクトが今までに何回描画されたか クマの画像を変えて走るアニメーションを表現するために、 frame を 6 -> 7 -> 6 -> 7.. と順番に変えている。

  
              this.frame = this.age % 2 + 6;
          });
  
          
タッチされると消える処理を実現するために、 touchstart イベントが起こったとき、クマが消える処理をリスナとして追加する。

  
          bear.addEventListener("touchstart", function(){
              
クマを game.rootScene から削除する。 Group#addChild の逆は Group#removeChild。

  
              game.rootScene.removeChild(bear);
          });
      };
  
      
Game#start ゲームを開始する。この関数を実行するまで、ゲームは待機状態となる。 代わりに Game#debug を使うことで、デバッグモードで起動することができる。 Game#pause(); で一時停止し、 Game#resume(); で再開することができる。

  
      game.start();
  };
  


(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.