JS用2Dゲーム開発フレームワーク「phasejs」のropeを使う

phaser.jsってなに？

JS用2Dゲーム開発フレームワークです。特徴としてはスマホでサクサク動くことが特徴です。一時期流行ったenchant.jsに比べるとメチャクチャ動作が軽いです。他のライブラリと比べてもはやりphaserが一番軽いです。なので「スマホでも動くアクションゲームをjsで作りたい！」って思ったら現実的にはphaser一択だと思ってます。

ropeの使い方

pahserの入門記事はググれば出てくるので今日はちょっとマニアックなropeの使い方を紹介します。

こんな感じで魚を泳がせます。

よくあるゲームライブラリでこうゆう動きを作ろうと思ったらパラパラマンガみたいな絵を沢山描いてアニメーションさせるとか自分でspriteオブジェクトを連結させてがんばって書くとかして結構大変ですが、phaserはそれ用の関数"rope"があるので一瞬でできます。

魚オブジェクトの生成部分のコードはこんな感じ。

var segmentWidth = 400 / 10;
var points = [];
for (var i = 0; i < 10; i++) points.push(new Phaser.Point(i * segmentWidth, 0));
fish = game.add.rope(20, game.world.centerY, 'fish', null, points);

まず体10分割したような点"points"を生成して fishを生成するときに渡します。 fish生成で使う関数はもちろんropeです。

あとはメインループで今設定したpointsの座標を変更してあげればライブラリが自動的にpointsが繋がってるように表示してくれます。

メインループはこんな感じ。

var count = 0;
fish.updateAnimation = function() {
  count += 0.1;
  // 頭を揺らす
  points[0].y = Math.sin(count) * 3;
  // 揺れを増幅して伝播する
  for (var i = 0; i < points.length - 1; i++) points[i + 1].y = points[i].y * 1.3;
};

簡単や！これがあればゲームの表現がサクサク作れそうですね。たとえば揺れる草とか、ラスボスのドラゴンとか、道具のムチとか。

ソース全体はこちら。

var game = new Phaser.Game(400, 490, Phaser.AUTO, 'phaser-area');
var fish;
game.state.add('main', {
  preload: function() {
    game.stage.backgroundColor = '#ffffdd';
    // 魚の画像をロード
    game.load.image('fish', '../../common/img/fish_left.png');
  },
  create: function() {
    var segmentWidth = 400 / 10;
    var points = [];
    for (var i = 0; i < 10; i++) points.push(new Phaser.Point(i * segmentWidth, 0));
    fish = game.add.rope(20, game.world.centerY, 'fish', null, points);
    var count = 0;
    fish.updateAnimation = function() {
        count += 0.1;
        // 頭を揺らす
        points[0].y = Math.sin(count) * 3;
        // 揺れを増幅して伝播する
        for (var i = 0; i < points.length - 1; i++) points[i + 1].y = points[i].y * 1.3;
    };

  },
  update: function() {},
  render: function() { /*game.debug.ropeSegments(fish);*/ }
});
game.state.start('main');