[phina.js] 이미지의 색상을 변경하는 방법 (마스크)

이미지의 색상을 변경하는 함수 만들기

// 画像マスク用の関数を定義
function maskImage(imageKey, color, distKey) {
  var original = AssetManager.get('image', imageKey).domElement;

  // 画像生成用にダミーのシーン生成
  var dummy = DisplayScene({
    // 元画像と同じサイズにする
    width: original.width,
    height: original.height,
    // 背景色を変更したい色にする
    backgroundColor: color,
  });

  var originalSprite = Sprite(imageKey).addChildTo(dummy);

  // 描画の位置を変更
  originalSprite.setOrigin(0, 0);
  // 描画方法をマスクするように変更
  originalSprite.blendMode = 'destination-in';

  // シーンの内容を描画
  dummy._render();

  // シーンの描画内容から テクスチャを作成
  var texture = Texture();
  texture.domElement = dummy.canvas.domElement;
  if (distKey) {
    AssetManager.set('image', distKey, texture);
  }
  return texture;
}

사용법

// あらかじめ読み込んである 'kumo' という画像から　'青いくも' という asset を生成
maskImage('kumo', 'blue', '青いくも');
Sprite('青いくも').addChildTo(this);

// 直接テクスチャとして使う
var texture = maskImage('kumo', 'pink');
Sprite(texture).addChildTo(this);

처리 흐름

샘플