🐦

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

2 min read

はじめに

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

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

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

  • Shapergbの3つのプロパティを追加する。
  • Shapetweenerでプロパティの値を変化させる。
  • Shapeupdateでプロパティの値を使って色を変化させる。

プロパティを追加する

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();

色を変化させる

  • updateShapeの塗りつぶし色であるfillにプロパティ値を代入します。
  • rgbは文字列指定する必要があるため、 formatメソッドの引数から渡しています。
// 毎フレーム処理
shape.update = function() {
  // 色指定
  shape.fill = 'rgb({0}, {1}, {2})'.format(shape.r, shape.g, shape.b);    
};

まとめ

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

サンプルコード

コードを見る
// グローバルに展開
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();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/a7341442

Discussion

ログインするとコメントできます