NapeTutorial の変更点

*概要 [#td3c9932]
このページでは、2D物理エンジン「[[Nape]]」の使い方を紹介します

** Napeのインストール [#ndbe674a]
ターミナルを開いて、以下のコマンドでNapeをインストールします。

 haxelib install nape

** テスト用プロジェクトの作成 [#y5e7e273]
続けて以下のコマンドでテスト用プロジェクトを作成します。

 flixel tpl -n "TestNape"

** プロジェクトの設定 [#hd9ebd18]
Napeは初期状態では無効となっているので、Project.xmlを開いて以下の設定を有効化します

#geshi(xml){{
<!-- flixel-addons を有効化 -->
<!--In case you want to use the addons package-->
<haxelib name="flixel-addons" />

<!-- nape を有効化 -->
<!--In case you want to use nape with flixel-->
<haxelib name="nape" />
}}

** Main.hx [#i537c0e9]
Main.hx を開いて、起動時のスプラッシュを無効化します。
#geshi(Actionscript){{
// スプラッシュのスキップを有効にする
var skipSplash:Bool = true; // Whether to skip the flixel splash screen that appears in release mode.
}}

** MenuState.hx [#l8603202]
MenuState.hxを開いて、FlxNapeStateを継承するように修正します。

#geshi(Actionscript){{
import flixel.addons.nape.FlxNapeState;

/**
 * A FlxState which can be used for the game's menu.
 */
class MenuState extends FlxNapeState // ←ここを修正
{
}}

では、実行してみましょう。エラーが発生せずに起動できれば、Napeの設定がうまくできています。
ただし、まだ何も表示されませんが……。

*** 外周の壁を作成 [#w654a651]
MenuStateクラスにNapeの処理を書いていきましょう。create関数に以下のように書きます。

#geshi(Actionscript){{
	override public function create():Void
	{
		super.create();
  override public function create():Void
  {
    super.create();

		// 外周の壁を作成
		createWalls(0, 0, FlxG.width, FlxG.height);
	}
    // 外周の壁を作成
    createWalls(0, 0, FlxG.width, FlxG.height);
  }
}}

これで画面の周りに壁が作られました。

*** 剛体の追加 [#n1885615]
剛体を追加します。剛体の生成はFlxNapeSpriteで行います。

#geshi(Actionscript){{
	override public function create():Void
	{
		super.create();
  override public function create():Void
  {
    super.create();

		// 外周の壁を作成
		createWalls(0, 0, FlxG.width, FlxG.height);
    // 外周の壁を作成
    createWalls(0, 0, FlxG.width, FlxG.height);

		// スプライトの作成
		var spr = new FlxNapeSprite(FlxG.width/2, 0);
		// 描画情報の設定
		spr.makeGraphic(64, 32, flixel.util.FlxColor.WHITE);
		// 長方形の剛体生成
		spr.createRectangularBody();
		this.add(spr);
    // スプライトの作成
    var spr = new FlxNapeSprite(FlxG.width/2, 0);
    // 描画情報の設定
     spr.makeGraphic(64, 32, flixel.util.FlxColor.WHITE);
    // 長方形の剛体生成
    spr.createRectangularBody();
    this.add(spr);

		// 重力を設定
		FlxNapeState.space.gravity.setxy(0, 400);
	}
    // 重力を設定
    FlxNapeState.space.gravity.setxy(0, 400);
  }
}}

FlxNapeSprite.createRectangularBody() は、FlxSprite.width / height のサイズで剛体を作成します。

実行すると、長方形の剛体が落下して地面でバウンドします。

#ref(001.png);

** これより先は [#yf7e3787]
これでチュートリアルは終了です。
より詳しい情報は、HaxeFlixelのNapeデモや、FlxNapeSpriteのページの情報、[[Nape公式ページ>http://napephys.com]]のサンプルやヘルプなどを見て使い方を少しずつ理解していきます。