[Stage3D] Starlingでピクセルマスク (1) ~PixelMaskDisplayObject, Image~

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

starling_pixelmask1

拡張機能のPixelMaskDisplayObjectクラスで、矩形以外のマスクを試してみちゃうよ。 :boy:

:caution: 要 Flash Player 11.8 以上

This movie requires Flash Player 11.8.0

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="200", 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.MovieClip;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;

import starling.extensions.pixelmask.PixelMaskDisplayObject;

internal class MainView extends Sprite {
  [Embed(source="assets/piyo.png")]
  private var PiyoTexture:Class;
  [Embed(source="assets/piyo.xml", mimeType="application/octet-stream")]
  private var PiyoAtlas:Class;
  [Embed(source="assets/mask.png")]
  private var Circle:Class;
  // プロパティ
  private var container:PixelMaskDisplayObject;
  private var mask:Image;
  private var texture:Texture;
  private var atlas:TextureAtlas;
  private var piyo:MovieClip;

  // コンストラクタ
  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 night:Quad = new Quad(600, 200, 0x002267);
    addChild(night);
    container = new PixelMaskDisplayObject();
    addChild(container);

    var basic:Quad = new Quad(600, 200, 0x008A42);
    container.addChild(basic);
    texture = Texture.fromBitmap(new PiyoTexture());
    atlas = new TextureAtlas(texture, XML(new PiyoAtlas()));

    piyo = new MovieClip(atlas.getTextures(), 60);
    piyo.currentFrame = Math.random()*60;
    piyo.pivotX = 26;
    piyo.pivotY = 59;
    piyo.x = 300;
    piyo.y = 175;
    container.addChild(piyo);

    Starling.juggler.add(piyo);
    mask = Image.fromBitmap(new Circle());
    mask.pivotX = uint(mask.width/2);
    mask.pivotY = uint(mask.height/2);

    mask.x = 300;
    mask.y = - 128;
    container.mask = mask;
    stage.addEventListener(TouchEvent.TOUCH, touch);
  }
  private function remove(evt:Event):void {
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
    Starling.juggler.remove(piyo);
  }
  override public function dispose():void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
    super.dispose();
  }
  private function touch(evt:TouchEvent):void {
    var touch:Touch = evt.getTouch(stage);
    if (touch) {
      mask.x = touch.globalX;
      mask.y = touch.globalY;
      mask.width = 600;
      mask.height = 256;

    } else {
      mask.width = 0;
      mask.height = 0;

    }
  }

}

Texture, TextureAtlasクラスについては、 :banana: [AS3.0] Starlingを試すのだ! (5) 参照。


参考資料「Pixelmask - Starling Wiki
:check: 「jonathanhart/pixelmask · GitHub

mask.png (透過PNG)

starling_pixelmask_mask


[修正] (14/06/25 Wed 15:28)
Starling 1.5 にバージョンアップ。
[修正] (14/06/25 Wed 17:18)
Starling 1.5.1 にバージョンアップ。
[修正] (14/12/14 Sun 20:53)
Starling 1.6 にバージョンアップ。