[CreateJS] カラー効果 (2) ~ColorMatrixFilter~

CreateJSを使って、カラー効果を学習するよ。 :bouzu:

createjs_colormatrixfilter_basic

ColorMatrixFilterクラスを試してみたよ。 :boy:

Shape, Bitmap の色と ColorMatrixFilter の組み合わせによっては、カラー効果が反映されない場合があるよ。 :girl:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ColorMatrixFilter [basic] | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var images;

function init() {

    (中略)

}
function initialize() {
  //ColorMatrix
  var matrix1 = new createjs.ColorMatrix().adjustBrightness(255);
  var matrix2 = new createjs.ColorMatrix().adjustBrightness(-255);
  var matrix3 = new createjs.ColorMatrix().adjustContrast(100);
  var matrix4 = new createjs.ColorMatrix().adjustContrast(-100);
  var matrix5 = new createjs.ColorMatrix().adjustSaturation(100);
  var matrix6 = new createjs.ColorMatrix().adjustSaturation(-100);
  //ColorMatrixFilter
  var colorfilter1 = new createjs.ColorMatrixFilter(matrix1);
  var colorfilter2 = new createjs.ColorMatrixFilter(matrix2);
  var colorfilter3 = new createjs.ColorMatrixFilter(matrix3);
  var colorfilter4 = new createjs.ColorMatrixFilter(matrix4);
  var colorfilter5 = new createjs.ColorMatrixFilter(matrix5);
  var colorfilter6 = new createjs.ColorMatrixFilter(matrix6);

  //白の矩形Shape
  var whitesquare = createSquare("#FFFFFF");

  var whitesquare1 = createSquare("#FFFFFF");
  whitesquare1.filters = [colorfilter1];
  whitesquare1.cache(-25, -20, 50, 40);

  var whitesquare2 = createSquare("#FFFFFF");
  whitesquare2.filters = [colorfilter2];
  whitesquare2.cache(-25, -20, 50, 40);

  var whitesquare3 = createSquare("#FFFFFF");
  whitesquare3.filters = [colorfilter3];
  whitesquare3.cache(-25, -20, 50, 40);

  var whitesquare4 = createSquare("#FFFFFF");
  whitesquare4.filters = [colorfilter4];
  whitesquare4.cache(-25, -20, 50, 40);

  var whitesquare5 = createSquare("#FFFFFF");
  whitesquare5.filters = [colorfilter5];
  whitesquare5.cache(-25, -20, 50, 40);

  var whitesquare6 = createSquare("#FFFFFF");
  whitesquare6.filters = [colorfilter6];
  whitesquare6.cache(-25, -20, 50, 40);

  //黒の矩形Shape
  var blacksquare = createSquare("#000000");

  var blacksquare1 = createSquare("#000000");
  blacksquare1.filters = [colorfilter1];
  blacksquare1.cache(-25, -20, 50, 40);

  var blacksquare2 = createSquare("#000000");
  blacksquare2.filters = [colorfilter2];
  blacksquare2.cache(-25, -20, 50, 40);

  var blacksquare3 = createSquare("#000000");
  blacksquare3.filters = [colorfilter3];
  blacksquare3.cache(-25, -20, 50, 40);

  var blacksquare4 = createSquare("#000000");
  blacksquare4.filters = [colorfilter4];
  blacksquare4.cache(-25, -20, 50, 40);

  var blacksquare5 = createSquare("#000000");
  blacksquare5.filters = [colorfilter5];
  blacksquare5.cache(-25, -20, 50, 40);

  var blacksquare6 = createSquare("#000000");
  blacksquare6.filters = [colorfilter6];
  blacksquare6.cache(-25, -20, 50, 40);

  //白の斜線ドットBitmap
  var whitetile = createTile("tile_white");

  var whitetile1 = createTile("tile_white");
  whitetile1.filters = [colorfilter1];
  whitetile1.cache(-25, -20, 50, 40);

  var whitetile2 = createTile("tile_white");
  whitetile2.filters = [colorfilter2];
  whitetile2.cache(-25, -20, 50, 40);

  var whitetile3 = createTile("tile_white");
  whitetile3.filters = [colorfilter3];
  whitetile3.cache(-25, -20, 50, 40);

  var whitetile4 = createTile("tile_white");
  whitetile4.filters = [colorfilter4];
  whitetile4.cache(-25, -20, 50, 40);

  var whitetile5 = createTile("tile_white");
  whitetile5.filters = [colorfilter5];
  whitetile5.cache(-25, -20, 50, 40);

  var whitetile6 = createTile("tile_white");
  whitetile6.filters = [colorfilter6];
  whitetile6.cache(-25, -20, 50, 40);

  //黒の斜線ドットBitmap
  var blacktile = createTile("tile_black");

  var blacktile1 = createTile("tile_black");
  blacktile1.filters = [colorfilter1];
  blacktile1.cache(-25, -20, 50, 40);

  var blacktile2 = createTile("tile_black");
  blacktile2.filters = [colorfilter2];
  blacktile2.cache(-25, -20, 50, 40);

  var blacktile3 = createTile("tile_black");
  blacktile3.filters = [colorfilter3];
  blacktile3.cache(-25, -20, 50, 40);

  var blacktile4 = createTile("tile_black");
  blacktile4.filters = [colorfilter4];
  blacktile4.cache(-25, -20, 50, 40);

  var blacktile5 = createTile("tile_black");
  blacktile5.filters = [colorfilter5];
  blacktile5.cache(-25, -20, 50, 40);

  var blacktile6 = createTile("tile_black");
  blacktile6.filters = [colorfilter6];
  blacktile6.cache(-25, -20, 50, 40);

  //ひよこちゃんBitmap
  var piyo = createPiyo();

  var piyo1 = createPiyo();
  piyo1.filters = [colorfilter1];
  piyo1.cache(0, 0, 52, 65);

  var piyo2 = createPiyo();
  piyo2.filters = [colorfilter2];
  piyo2.cache(0, 0, 52, 65);

  var piyo3 = createPiyo();
  piyo3.filters = [colorfilter3];
  piyo3.cache(0, 0, 52, 65);

  var piyo4 = createPiyo();
  piyo4.filters = [colorfilter4];
  piyo4.cache(0, 0, 52, 65);

  var piyo5 = createPiyo();
  piyo5.filters = [colorfilter5];
  piyo5.cache(0, 0, 52, 65);

  var piyo6 = createPiyo();
  piyo6.filters = [colorfilter6];
  piyo6.cache(0, 0, 52, 65);
}
function createSquare(color) {
  var square = new createjs.Shape();
  stage.addChild(square);
  square.graphics.beginFill(color);
  square.graphics.drawRect(-25, -20, 50, 40);
  square.graphics.endFill();
  return square;
}
function createTile(id) {
  var tile = new createjs.Shape();
  stage.addChild(tile);
  tile.graphics.beginBitmapFill(images[id], "repeat");
  tile.graphics.drawRect(-25, -20, 50, 40);
  tile.graphics.endFill();
  return tile;
}
function createPiyo() {
  var piyo = new createjs.Bitmap(images["piyo"]);
  stage.addChild(piyo);
  piyo.regX = 26;
  piyo.regY = 59;
  return piyo;
}

  (中略)

</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <canvas id="canvas" width="600" height="450" style="background-color:#FFFFFF"></canvas>
</body>
</html>

:caution: cache()を使わないと、ColorMatrixFilterが反映されないよ。 :girl:


[修正] (15/09/21 Mon 00:48)
CreateJS 0.8.1 にバージョンアップ。