読者です 読者をやめる 読者になる 読者になる

futoase

よろしくお願いします。

俺 AdventCalendar 9日目

gamejsとは

検証した内容

  • game.js の release-2011-10 tag を利用しています
  • Mac OSX(Lion) にて、ブラウザは Safari 5.1.2 を利用しています

インストール

  • github より対象物をcloneしましょう
git clone git://github.com/oberhamsi/gamejs.git
git checkout -b release-2011-10 release-2011-10
  • clone後、スケルトンの作成をしましょう(一応gitのリポジトリ上、examples/skeltonがありますが)
% ./wrap-gamejs.sh 
Wrote ./examples/skeleton/public/gamejs-wrapped.js
  • 作成されたスケルトンページにブラウザでアクセスしてみましょう(index.htmlを開く)

無事作成されたようです

矩形を表示させてみる

  • では矩形を表示させてみましょう

作成したスケルトンの以下のjsファイルをいじります。
examples/skeleton/javascript/main.js

var gamejs = require('gamejs'),
    draw = require('gamejs/draw');
// $gamejs.preload([]);

gamejs.ready(function() {

    var display = gamejs.display.setMode([600, 400]);

    draw.rect(display, '#FF0000', new gamejs.Rect([10, 100],[30,30]), 2);
    draw.rect(display, '#00FF00', new gamejs.Rect([30, 150],[30,30]), 3);
    draw.rect(display, '#0000FF', new gamejs.Rect([50, 200],[30,30]), 5);
    display.blit(
        (new gamejs.font.Font('30px Sans-serif')).render('Hello World')
    );

    /**
    function tick() {
        // game loop
        return;
    };
    gamejs.time.fpsCallback(tick, this, 26);
    **/
});
  • draw.rectについてdraw.jsを参考
    • 第一引数がサーフェイスオブジェクト、第二引数が色、第三引数が矩形オブジェクト(Rect)、第四引数が外枠の太さとなります
  • Rectオブジェクトについてgame.js(Rectオブジェクト定義部分)を参考
    • オブジェクト作成時の第一引数は[top, left]となり、描画の座標を指定します
    • オブジェクト作成時の第二引数は[width, height]となり、矩形の大きさを指定します


綺麗な矩形が表示されました!

矩形を動かしてみる

  • せっかくだから、キーイベントに対応させてみましょう
var gamejs = require('gamejs'),
    draw = require('gamejs/draw');
// $gamejs.preload([]);

gamejs.ready(function() {

    var display = gamejs.display.setMode([600, 400]);
    var box = new gamejs.Rect([50, 200],[50,50]);

    gamejs.display.setCaption('rectangle action');

    function tick() {
      // game loop
      gamejs.event.get().forEach(function(event){
        if (event.type === gamejs.event.KEY_DOWN){
          if (event.key === gamejs.event.K_UP){
            box.top -= 2
          }
          if (event.key === gamejs.event.K_DOWN){
            box.top += 2
          }
          if (event.key === gamejs.event.K_LEFT){
            box.left -= 2
          }
          if (event.key === gamejs.event.K_RIGHT){
            box.left += 2
          }
        }
      });
      display.fill('#ffffff');
      draw.rect(display, '#ff0000', box, 2); 
      return;
    };
    gamejs.time.fpsCallback(tick, this, 26);
});

  • gamejs.time.fpsCallback にて、 tickを毎度呼ぶようになっています。
  • tick内では以下の処理を行なっています
    • gamejs.event.get() にて取得したイベントをコールバックに渡す
    • コールバック内でキーイベント及び押下されたキーについて確認する
    • 押下されたキーに応じて、作成している矩形の座標を移動させる
    • display.fill にて矩形移動前に描画していた矩形などを消去するため画面全体を特定の一色(今回は白色)で塗りつぶす
    • 矩形を描画しなおす

ものすごく短い紹介でしたが

  • 時間的な問題(すでに日を過ぎまくってる)ということでここまでにします
  • 矩形同士の衝突やSpriteオブジェクトをまとめて処理するなどは後日書きます...

Copyright (c) 2013-2017 Keiji Matsuzaki