[Stage3D] ExtensionGraphicsを試すのだ! (1) ~導入~

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

starling_exgraphics31

:caution: 要 Flash Player 11.2 以上

まずは、Starling Framework を使えるようにする。
:banana: [AS3.0] Starlingを試すのだ! (1) 参照。

次に、ExtensionGraphics を使えるようにする。
:check: 「unwrong/Starling-Extension-Graphics · GitHub


This movie requires Flash Player 11.2.0

Main.as
package {

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

  import starling.core.Starling;

  [SWF(backgroundColor="#000000", width="600", height="480", 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 flash.geom.Rectangle;
import flash.display.Bitmap;

import starling.core.Starling;
import starling.display.Sprite;
import starling.display.Shape;
import starling.textures.Texture;
import starling.events.Event;
import starling.events.ResizeEvent;


internal class MainView extends Sprite {
  [Embed(source="assets/pattern.png")]
  private var Pattern:Class;
  // プロパティ
  private var texture: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 pattern:Bitmap = new Pattern();
    texture = Texture.fromBitmap(pattern);

    draw();
    stage.addEventListener(ResizeEvent.RESIZE, resize);
  }
  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();
  }
  private function draw():void {
    //矩形
    var rect1:Shape = new Shape();
    rect1.graphics.beginFill(0xFFFFFF, 0.6);
    rect1.graphics.drawRect(-50, -40, 100, 80);
    rect1.graphics.endFill();

    addChild(rect1);
    rect1.x = 70;
    rect1.y = 100;
    var rect2:Shape = new Shape();
    rect2.graphics.lineStyle(1, 0xFFFFFF);
    rect2.graphics.drawRect(-50, -40, 100, 80);

    addChild(rect2);
    rect2.x = 70;
    rect2.y = 200;
    var rect3:Shape = new Shape();
    rect3.graphics.beginTextureFill(texture);
    rect3.graphics.drawRect(-50, -40, 100, 80);
    rect3.graphics.endFill();

    addChild(rect3);
    rect3.x = 70;
    rect3.y = 300;
    var rect4:Shape = new Shape();
    rect4.graphics.lineTexture(1, texture);
    rect4.graphics.drawRect(-50, -40, 100, 80);

    addChild(rect4);
    rect4.x = 70;
    rect4.y = 400;

    //円
    var circle1:Shape = new Shape();
    circle1.graphics.beginFill(0xFFFFFF, 0.6);
    //circle1.graphics.beginFill(0xFFFFFF, 0.8);
    circle1.graphics.drawCircle(0, 0, 40);
    circle1.graphics.endFill();

    addChild(circle1);
    circle1.x = 180;
    circle1.y = 100;
    var circle2:Shape = new Shape();
    circle2.graphics.lineStyle(1, 0xFFFFFF);
    circle2.graphics.drawCircle(0, 0, 40);

    addChild(circle2);
    circle2.x = 180;
    circle2.y = 200;
    var circle3:Shape = new Shape();
    circle3.graphics.beginTextureFill(texture);
    circle3.graphics.drawCircle(0, 0, 40);
    circle3.graphics.endFill();

    addChild(circle3);
    circle3.x = 180;
    circle3.y = 300;
    var circle4:Shape = new Shape();
    circle4.graphics.lineTexture(2, texture);
    circle4.graphics.drawCircle(0, 0, 40);

    addChild(circle4);
    circle4.x = 180;
    circle4.y = 400;

    //角丸矩形
    var roundRect1:Shape = new Shape();
    roundRect1.graphics.beginFill(0xFFFFFF, 0.6);
    roundRect1.graphics.drawRoundRect(-50, -40, 100, 80, 20);
    roundRect1.graphics.endFill();

    addChild(roundRect1);
    roundRect1.x = 290;
    roundRect1.y = 100;
    var roundRect2:Shape = new Shape();
    roundRect2.graphics.lineStyle(1, 0xFFFFFF);
    roundRect2.graphics.drawRoundRect(-50, -40, 100, 80, 20);

    addChild(roundRect2);
    roundRect2.x = 290;
    roundRect2.y = 200;
    var roundRect3:Shape = new Shape();
    roundRect3.graphics.beginTextureFill(texture);
    roundRect3.graphics.drawRoundRect(-50, -40, 100, 80, 20);
    roundRect3.graphics.endFill();

    addChild(roundRect3);
    roundRect3.x = 290;
    roundRect3.y = 300;
    var roundRect4:Shape = new Shape();
    roundRect4.graphics.lineTexture(2, texture);
    roundRect4.graphics.drawRoundRect(-50, -40, 100, 80, 20);

    addChild(roundRect4);
    roundRect4.x = 290;
    roundRect4.y = 400;

    //楕円
    var ellipse1:Shape = new Shape();
    ellipse1.graphics.beginFill(0xFFFFFF, 0.6);
    //ellipse1.graphics.beginFill(0xFFFFFF, 0.8);
    ellipse1.graphics.drawEllipse(0, 0, 100, 80);
    ellipse1.graphics.endFill();

    addChild(ellipse1);
    ellipse1.x = 410;
    ellipse1.y = 100;
    var ellipse2:Shape = new Shape();
    ellipse2.graphics.lineStyle(1, 0xFFFFFF);
    ellipse2.graphics.drawEllipse(0, 0, 100, 80);

    addChild(ellipse2);
    ellipse2.x = 410;
    ellipse2.y = 200;
    var ellipse3:Shape = new Shape();
    ellipse3.graphics.beginTextureFill(texture);
    ellipse3.graphics.drawEllipse(0, 0, 100, 80);
    ellipse3.graphics.endFill();

    addChild(ellipse3);
    ellipse3.x = 410;
    ellipse3.y = 300;
    var ellipse4:Shape = new Shape();
    ellipse4.graphics.lineTexture(2, texture);
    ellipse4.graphics.drawEllipse(0, 0, 100, 80);

    addChild(ellipse4);
    ellipse4.x = 410;
    ellipse4.y = 400;

    //個別角丸矩形
    var roundRectComplex1:Shape = new Shape();
    roundRectComplex1.graphics.beginFill(0xFFFFFF, 0.6);
    roundRectComplex1.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 0, 0);
    roundRectComplex1.graphics.endFill();

    addChild(roundRectComplex1);
    roundRectComplex1.x = 530;
    roundRectComplex1.y = 100;
    var roundRectComplex2:Shape = new Shape();
    roundRectComplex2.graphics.lineStyle(1, 0xFFFFFF);
    roundRectComplex2.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 0, 0);

    //roundRectComplex2.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 1, 1);
    addChild(roundRectComplex2);
    roundRectComplex2.x = 530;
    roundRectComplex2.y = 200;
    var roundRectComplex3:Shape = new Shape();
    roundRectComplex3.graphics.beginTextureFill(texture);
    roundRectComplex3.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 0, 0);
    roundRectComplex3.graphics.endFill();

    addChild(roundRectComplex3);
    roundRectComplex3.x = 530;
    roundRectComplex3.y = 300;
    var roundRectComplex4:Shape = new Shape();
    roundRectComplex4.graphics.lineTexture(2, texture);
    roundRectComplex4.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 0, 0);

    //roundRectComplex4.graphics.drawRoundRectComplex(-50, -40, 100, 80, 10, 10, 1, 1);
    addChild(roundRectComplex4);
    roundRectComplex4.x = 530;
    roundRectComplex4.y = 400;
  }
  private function resize(evt:ResizeEvent):void {
    var sw:uint = evt.width;
    var sh:uint = evt.height;
    Starling.current.viewPort = new Rectangle(0, 0, sw, sh);
    stage.stageWidth = sw;
    stage.stageHeight = sh;
  }

}

flash.display.Graphicsクラスと同じように使えるみたいだが、一部残念な感じ。 😥