🐦

【phina.js】Tweenerとupdateを使ってShapeの色を変化させる

2021/06/08に公開

JavaScript

はじめに

phina.jsのTweenerはキャラクターの動きをコントロールする場合などに使えるとても勉強な機能です。今回は、 Tweenerとupdateを併用したTipsを紹介します。

Shapeの色変化アニメーション

Shapeの色を一定時間で変化させるアニメーションを作ります。方法は以下のとおりです。

Shapeにrgbの3つのプロパティを追加する。
Shapeのtweenerでプロパティの値を変化させる。
Shapeのupdateでプロパティの値を使って色を変化させる。

プロパティを追加する

javascriptは、後から好きな時にプロパティを追加できる柔軟さを持ってますので、これを利用します。

// shape
var shape = StarShape().addChildTo(this);
shape.setPosition(this.gridX.center(), this.gridY.center());
shape.radius = 128;
// プロパティ追加
shape.r = 0;
shape.g = 0;
shape.b = 0;

プロパティ値を変化させる

追加したプロパティ値をtweenerで変化させます。

// プロパティ値変化
shape.tweener.to({r: 10, g: 100, b: 200}, 2000)
             .to({r: 200, g: 200, b: 10}, 2000)
             .setLoop(true).play();

色を変化させる

updateでShapeの塗りつぶし色であるfillにプロパティ値を代入します。
rgbは文字列指定する必要があるため、 formatメソッドの引数から渡しています。

// 毎フレーム処理
shape.update = function() {
  // 色指定
  shape.fill = 'rgb({0}, {1}, {2})'.format(shape.r, shape.g, shape.b);    
};

まとめ

phina.jsのtweenerだけで完結する処理がメジャーですが、工夫次第でこのような表現もできます。

サンプルコード

コードを見る

// グローバルに展開
phina.globalize();
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // shape
    var shape = StarShape().addChildTo(this);
    shape.setPosition(this.gridX.center(), this.gridY.center());
    shape.radius = 128;
    // プロパティ追加
    shape.r = 0;
    shape.g = 0;
    shape.b = 0;
    // プロパティ値変化
    shape.tweener.to({r: 10, g: 100, b: 200}, 2000)
                 .to({r: 200, g: 200, b: 10}, 2000)
                 .setLoop(true).play();
    // 毎フレーム処理
    shape.update = function() {
      // 色指定
      shape.fill = 'rgb({0}, {1}, {2})'.format(shape.r, shape.g, shape.b);    
    };
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  app.run();
});