[Stage3D] Starlingでカラー効果 (1) ~QuadとImageのcolorプロパティ, ColorMatrixFilter~

Flash Player 11 から採用された Stage3D を学習するよ。 :bouzu:
Starling Framework を試しちゃうんだからね。 :girl:

starling_color1

QuadクラスImageクラスcolorプロパティColorMatrixFilterクラスを使ってみちゃうよ。 :boy:

:caution: 要 Flash Player 11.8 以上

This movie requires Flash Player 11.8.0

Quad, Image の色と colorプロパティ/ColorMatrixFilter の組み合わせによっては、カラー効果が反映されない場合があるよ。 :girl:  特に、黒のImageは着色できない場合が多いので、注意が必要だよ! :bear:

Main.as
package {

  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.display.StageAlign;

  import starling.core.Starling;

  [SWF(backgroundColor="#FFFFFF", width="600", height="450", frameRate="60")]

  public class Main extends Sprite {
    // プロパティ
    private var starling:Starling;

    // コンストラクタ
    public function Main() {
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      init();
    }

    // メソッド
    private function init():void {
      starling = new Starling(MainView, stage, null, null);
      starling.enableErrorChecking = true;
      starling.start();
    }

  }

}



import starling.core.Starling;
import starling.display.Sprite;
import starling.display.Image;
import starling.display.Quad;
import starling.events.Event;
import starling.textures.Texture;
import starling.filters.ColorMatrixFilter;


internal class MainView extends Sprite {
  [Embed(source="assets/tile_white.png")]
  private var TileWhiteTexture:Class;
  [Embed(source="assets/tile_black.png")]
  private var TileBlackTexture:Class;
  [Embed(source="assets/piyo.png")]
  private var PiyoTexture:Class;
  // プロパティ
  private var piyotexture:Texture;

  // コンストラクタ
  public function MainView() {
    addEventListener(Event.ADDED_TO_STAGE, init);
    addEventListener(Event.REMOVED_FROM_STAGE, remove);
  }

  // メソッド
  private function init(evt:Event):void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    var tilewhitetexture:Texture = Texture.fromBitmap(new TileWhiteTexture());
    var tileblacktexture:Texture = Texture.fromBitmap(new TileBlackTexture());
    piyotexture = Texture.fromBitmap(new PiyoTexture());

    var redfilter:ColorMatrixFilter = new ColorMatrixFilter();
    redfilter.tint(0xFF0000, 1);
    var whitefilter:ColorMatrixFilter = new ColorMatrixFilter();
    whitefilter.tint(0xFFFFFF, 1);
    var blackfilter:ColorMatrixFilter = new ColorMatrixFilter();
    blackfilter.tint(0x000000, 1);


    //白の矩形Quad
    var whitesquare:Quad = createSquare(0xFFFFFF);
    whitesquare.x = 50;
    whitesquare.y = 150;

    var whitesquare1:Quad = createSquare(0xFFFFFF);
    whitesquare1.x = 150;
    whitesquare1.y = 150;
    whitesquare1.color = 0xFF0000;

    var whitesquare2:Quad = createSquare(0xFFFFFF);
    whitesquare2.x = 230;
    whitesquare2.y = 150;
    whitesquare2.filter = redfilter;

    var whitesquare3:Quad = createSquare(0xFFFFFF);
    whitesquare3.x = 310;
    whitesquare3.y = 150;
    whitesquare3.color = 0xFFFFFF;

    var whitesquare4:Quad = createSquare(0xFFFFFF);
    whitesquare4.x = 390;
    whitesquare4.y = 150;
    whitesquare4.filter = whitefilter;

    var whitesquare5:Quad = createSquare(0xFFFFFF);
    whitesquare5.x = 470;
    whitesquare5.y = 150;
    whitesquare5.color = 0x000000;

    var whitesquare6:Quad = createSquare(0xFFFFFF);
    whitesquare6.x = 550;
    whitesquare6.y = 150;
    whitesquare6.filter = blackfilter;

    //黒の矩形Quad
    var blacksquare:Quad = createSquare(0x000000);
    blacksquare.x = 50;
    blacksquare.y = 210;

    var blacksquare1:Quad = createSquare(0x000000);
    blacksquare1.x = 150;
    blacksquare1.y = 210;
    blacksquare1.color = 0xFF0000;

    var blacksquare2:Quad = createSquare(0x000000);
    blacksquare2.x = 230;
    blacksquare2.y = 210;
    blacksquare2.filter = redfilter;

    var blacksquare3:Quad = createSquare(0x000000);
    blacksquare3.x = 310;
    blacksquare3.y = 210;
    blacksquare3.color = 0xFFFFFF;

    var blacksquare4:Quad = createSquare(0x000000);
    blacksquare4.x = 390;
    blacksquare4.y = 210;
    blacksquare4.filter = whitefilter;

    var blacksquare5:Quad = createSquare(0x000000);
    blacksquare5.x = 470;
    blacksquare5.y = 210;
    blacksquare5.color = 0x000000;

    var blacksquare6:Quad = createSquare(0x000000);
    blacksquare6.x = 550;
    blacksquare6.y = 210;
    blacksquare6.filter = blackfilter;

    //白の斜線ドットImage
    var whitetile:Image = createTile(tilewhitetexture);
    whitetile.x = 50;
    whitetile.y = 270;

    var whitetile1:Image = createTile(tilewhitetexture);
    whitetile1.x = 150;
    whitetile1.y = 270;
    whitetile1.color = 0xFF0000;

    var whitetile2:Image = createTile(tilewhitetexture);
    whitetile2.x = 230;
    whitetile2.y = 270;
    whitetile2.filter = redfilter;

    var whitetile3:Image = createTile(tilewhitetexture);
    whitetile3.x = 310;
    whitetile3.y = 270;
    whitetile3.color = 0xFFFFFF;

    var whitetile4:Image = createTile(tilewhitetexture);
    whitetile4.x = 390;
    whitetile4.y = 270;
    whitetile4.filter = whitefilter;

    var whitetile5:Image = createTile(tilewhitetexture);
    whitetile5.x = 470;
    whitetile5.y = 270;
    whitetile5.color = 0x000000;

    var whitetile6:Image = createTile(tilewhitetexture);
    whitetile6.x = 550;
    whitetile6.y = 270;
    whitetile6.filter = blackfilter;

    //黒の斜線ドットImage
    var blacktile:Image = createTile(tileblacktexture);
    blacktile.x = 50;
    blacktile.y = 330;

    var blacktile1:Image = createTile(tileblacktexture);
    blacktile1.x = 150;
    blacktile1.y = 330;
    blacktile1.color = 0xFF0000;

    var blacktile2:Image = createTile(tileblacktexture);
    blacktile2.x = 230;
    blacktile2.y = 330;
    blacktile2.filter = redfilter;

    var blacktile3:Image = createTile(tileblacktexture);
    blacktile3.x = 310;
    blacktile3.y = 330;
    blacktile3.color = 0xFFFFFF;

    var blacktile4:Image = createTile(tileblacktexture);
    blacktile4.x = 390;
    blacktile4.y = 330;
    blacktile4.filter = whitefilter;

    var blacktile5:Image = createTile(tileblacktexture);
    blacktile5.x = 470;
    blacktile5.y = 330;
    blacktile5.color = 0x000000;

    var blacktile6:Image = createTile(tileblacktexture);
    blacktile6.x = 550;
    blacktile6.y = 330;
    blacktile6.filter = blackfilter;

    //ひよこちゃんImage
    var piyo = createPiyo();
    piyo.x = 50;
    piyo.y = 430;

    var piyo1 = createPiyo();
    piyo1.x = 150;
    piyo1.y = 430;
    piyo1.color = 0xFF0000;

    var piyo2 = createPiyo();
    piyo2.x = 230;
    piyo2.y = 430;
    piyo2.filter = redfilter;

    var piyo3 = createPiyo();
    piyo3.x = 310;
    piyo3.y = 430;
    piyo3.color = 0xFFFFFF;

    var piyo4 = createPiyo();
    piyo4.x = 390;
    piyo4.y = 430;
    piyo4.filter = whitefilter;

    var piyo5 = createPiyo();
    piyo5.x = 470;
    piyo5.y = 430;
    piyo5.color = 0x000000;

    var piyo6 = createPiyo();
    piyo6.x = 550;
    piyo6.y = 430;
    piyo6.filter = blackfilter;
  }
  private function createSquare(color:uint):Quad {
    var square = new Quad(50, 40, color);
    addChild(square);
    square.pivotX = 25;
    square.pivotY = 20;
    return square;
  }
  private function createTile(texture:Texture):Image {
    var tile:Image = new Image(texture);
    addChild(tile);
    tile.pivotX = 25;
    tile.pivotY = 20;
    return tile;
  }
  private function createPiyo():Image {
    var piyo:Image = new Image(piyotexture);
    addChild(piyo);
    piyo.pivotX = 26;
    piyo.pivotY = 59;
    return piyo;
  }
  private function remove(evt:Event):void {
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
  }
  override public function dispose():void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
    super.dispose();
  }

}