[Stage3D] Starlingを試すのだ! (25) ~MovieClip, Texture, TextureAtlas~

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

starling325

MovieClipクラスTextureクラスTextureAtlasクラスを使ってみちゃうよ。 :boy:
アニメーションは、小橋先生 :hakase: に作っていただきました!

: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;


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;
  // プロパティ
  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);
    texture = Texture.fromBitmap(new PiyoTexture());
    atlas = new TextureAtlas(texture, XML(new PiyoAtlas()));

    piyo = new MovieClip(atlas.getTextures(), 60);
    piyo.pivotX = 40;
    piyo.pivotY = 168;
    piyo.x = 300;
    piyo.y = 175;
    addChild(piyo);

    Starling.juggler.add(piyo);
  }
  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();
  }

}

Texture, TextureAtlasデータは「TexturePacker」というツールで作成。 :doki:
データ形式は「Sparrow/Starling」でパブリッシュ。(トリムモード: Trim)
:check: 「TexturePacker - Sprite sheet maker, image packer and optimizer | TexturePacker | Sprite sheet creation and image optimization

piyo.png

starling325_piyo

piyo.xml
<?xml version="1.0" encoding="UTF-8"?>
<!- Created with TexturePacker http://www.codeandweb.com/texturepacker->
<!- $TexturePacker:SmartUpdate:******************************$ ->
<TextureAtlas imagePath="piyo.png">
<SubTexture name="piyo0001" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0002" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0003" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0004" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0005" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0006" x="110" y="514" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0007" x="2" y="576" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0008" x="56" y="514" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0009" x="164" y="448" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0010" x="110" y="448" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>

  (中略)

<SubTexture name="piyo0051" x="450" y="104" width="54" height="92" frameX="-13" frameY="-82" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0052" x="394" y="112" width="54" height="82" frameX="-12" frameY="-92" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0053" x="222" y="444" width="52" height="72" frameX="-14" frameY="-102" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0054" x="218" y="518" width="52" height="62" frameX="-14" frameY="-112" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0055" x="164" y="514" width="52" height="62" frameX="-14" frameY="-112" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0056" x="56" y="448" width="52" height="64" frameX="-14" frameY="-110" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0057" x="388" y="524" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0058" x="442" y="506" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0059" x="388" y="456" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
<SubTexture name="piyo0060" x="442" y="574" width="52" height="66" frameX="-14" frameY="-108" frameWidth="80" frameHeight="180"/>
</TextureAtlas>

GAFを使った場合は、 :banana: [AS3.0] StarlingでGAFに挑戦! 参照。


[修正] (14/06/25 Wed 15:25)
Starling 1.5 にバージョンアップ。
[修正] (14/06/25 Wed 17:16)
Starling 1.5.1 にバージョンアップ。ひよこちゃんの位置も修正。
[修正] (14/12/14 Sun 20:48)
Starling 1.6 にバージョンアップ。