表示モード

エンティティの描画方法を変える (compositeOperation) ​

エンティティの描画方法を変えるには、g.E#compositeOperation を利用します。

凡例 ​

javascript
var green = new g.FilledRect({
  ... // その他のプロパティ
});
var red = new g.FilledRect({
  ... // その他のプロパティ
  compositeOperation: "lighter" // 描画時の合成方法を指定
});
scene.append(green); // シーンに追加する
scene.append(red); // シーンに追加する
javascript
red.compositeOperation = "lighter"; // 既存のオブジェクトを変更
red.modified(); // modified() で表示に反映

利用例 ​

次のコンテンツは、g.E#compositeOperation の各値を反映した内容を表示します。"次へ", "前へ" のラベルを押下することで描画内容が変更されます。

詳細 ​

g.E#compositeOperation は、エンティティを描画する際の合成方法を指定するプロパティです。

以下の値が指定できます。experimental の prefix が付いた値は、ゲームを実行する環境(Web ブラウザ)によって挙動にばらつくことがあるため、試験的導入としています。

compositeOperation内容備考
"source-over"先に描画された領域の上に描画する。
"source-over"先に描画された領域の上に描画する。
"source-atop"先に描画された領域と重なった部分のみを描画する。
"lighter"先に描画された領域と重なった部分の色を加算して描画する。
"copy"先に描画された領域を全て無視して描画する。
"experimental-source-in"先に描画された領域と重なった部分に描画を行い、それ以外の部分を透明にする。
"experimental-source-out"先に描画された領域と重なっていない部分に描画を行い、それ以外の部分を透明にする。
"experimental-destination-atop"描画する領域だけを表示し、先に描画された領域と重なった部分は描画先を表示する。
"experimental-destination-in"先に描画された領域と重なっていない部分を透明にし、重なった部分は描画先を表示する。
"destination-out"描画する領域を透明にする。
"destination-over"先に描画された領域の下に描画する。
"xor"先に描画された領域と重なった部分のみ透明にする。
"difference"先に描画された内容との差 (の絶対値) を描画する。レンダラーに制限あり
"saturation"先に描画された領域の彩度を上書きする (色相と輝度は維持する) 。レンダラーに制限あり

WARNING

"difference" と "saturation" は webgl レンダラーでは利用できません。 game.json の "renderers" を ["canvas"] とするか、または省略してください 。

参考: リファレンス » game.json の仕様 » renderers

Pane の利用 ​

"source-atop" や "ligther" を利用する際に、Pane を利用することで、先に描画された領域を合成対象に含めないようにすることが出来ます。 下記のコードでは Pane の子エンティティを合成対象にし Pane の外にある bg は含まれなくなります。

javascript
function main() {
  var scene = new g.Scene({ game: g.game });
  scene.onLoad.add(function () {
    const bg = createRect(
      scene,
      g.game.width,
      g.game.height,
      0,
      0,
      "lightgray"
    );
    const green = createRect(scene, 100, 100, 50, 0, "green");
    const red = createRect(scene, 100, 100, 0, 20, "red");
    red.compositeOperation = "source-atop";
    const blue = createRect(scene, 100, 100, 75, 50, "blue");
    blue.compositeOperation = "source-atop";

    const pane = new g.Pane({ scene: scene, width: 175, height: 150 });
    pane.append(green);
    pane.append(red);
    pane.append(blue);
    scene.append(bg);
    scene.append(pane);
  });
  g.game.pushScene(scene);
}

function createRect(scene, width, height, x, y, color) {
  return new g.FilledRect({
    scene: scene,
    width: width,
    height: height,
    x: x,
    y: y,
    cssColor: color
  });
}

module.exports = main;

関連情報 ​