SpriterHaxeEngine の変更点

[[Spriter]]

* [[Spriter]]をHaxeFlixelに組み込む方法 [#cc913ade]
このページでは[[Spriter]]をHaxeFlixel上で表示する方法を解説しています。

** SpriterHaxeEngineのインストール [#j84a7dca]
以下のコマンドで表示に必要なライブラリをインストールします
 haxelib install SpriterHaxeEngine

** Project.xml にライブラリを指定する [#xca0fedb]

#geshi(xml){{
  <!-- SpriterHaxeEngineを使えるようにする -->
  <haxelib name="SpriterHaxeEngine" />
}}

** サンプル [#r89221bb]
以下は公式サンプルのGrey Guyを表示するサンプルです

#geshi(ActionScript){{
package;

import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.PixelSnapping;
import spriter.engine.Spriter;
import spriter.engine.SpriterEngine;
import spriter.library.BitmapLibrary;
import openfl.Assets;

/**
 * A FlxState which can be used for the game's menu.
 */
class MenuState extends FlxState {
  // Spriter再生エンジン
  var _engine:SpriterEngine;
  // Flixelのスプライト
  var _spr:FlxSprite;

  /**
   * シーンの生成
   */
  override public function create():Void {
    super.create();

    // Flixelのスプライトを生成
    _spr = new FlxSprite();
    this.add(_spr);
    
    // 画面サイズの画像を作る
    _spr.makeGraphic(FlxG.width, FlxG.height);
    // Bitmapを作る
    var spriterRoot:Bitmap = new Bitmap(_spr.pixels, PixelSnapping.AUTO, true);
    // Spriter描画ライブラリの生成
    var lib:BitmapLibrary = new BitmapLibrary('assets/GreyGuy/', _spr.pixels);

    // Spriterエンジンを生成
    _engine = new SpriterEngine(openfl.Assets.getText("assets/GreyGuy/player.scml"), lib, null);
    // 描画オフセットを設定
    _engine.addEntity("entityName", 130, 330);
  }


  /**
   * 更新
   */
  override public function update():Void {
    super.update();

    // アニメーション更新
    _engine.update();
    
    // マウス座標に動かしてみる
    _spr.x = FlxG.mouse.x;
    _spr.y = FlxG.mouse.y;
  }
}

}}

実行するとGrey Guy君がマウスの位置に表示されます。

#ref(greyguy.png);

** 参考ページ [#df2557b9]
- [[https://github.com/loudoweb/SpriterHaxeEngine]]
- [[https://github.com/loudoweb/Spriter-Example]]