RPGツクールMV Ver.1.6.2以降
RPGツクールMZ Ver.1.0.0以降
Spine 3.8

デプロイメント時に「未使用ファイルを含まない」を有効にすると、[img/spines]フォルダは
出力対象外となります。デプロイメント後に手動でコピーしてください。
デプロイメント時に画像ファイル暗号化を有効にすると画像ファイルが読み込めなくなります。
暗号化していない画像ファイルをデプロイメント後に手動でコピーするか、
下記プラグインの導入をご検討ください。
[ イメージソース復号プラグイン ]

i) 以下の場所から[pixi-spine.js]を取得
　[MV] https://github.com/pixijs/spine/tree/pixi4-spine3.8/dist
　[MZ] https://github.com/pixijs/spine/tree/pixi5/dist
ii) [pixi-spine.js]を[js/libs]フォルダに配置

iii) [img]フォルダに[spines]フォルダを作成

i) SpineデータをJSON形式（atlasファイル付き）でエクスポート
　エクスポートの詳細については [ Spineユーザーガイド ] をご参照ください。
　（Spineユーザーガイド > エクスポート）

ii) エクスポートしたファイル（json/atlas/png）を[img/spines]フォルダに置く
　spinesフォルダの中にサブフォルダを作り、その中に置いてもOK。
　jsonファイルとatlasファイルは同じ名前であること。
　pngファイルはatlasファイルに記述されている名前であること。

[ json file ] 　使用するSpineファイルを指定します。
　下記の例を参考にしてjsonファイルの場所を指定してください。 　[ img/spines/spineboy.json を使用する場合 ] 　　spineboy 　[ img/spines/spineboy/spineboy.json を使用する場合 ] 　　spineboy/spineboy [ disable auto loading ] 　ゲーム起動時のSpine自動読み込みを無効にする場合、ON（true）を指定してください。
　デフォルトではOFF（false）となっており、起動時にすべてのSpineファイルの読み込みを
　開始しゲーム実行の裏で並行して読み込みを行います。 　ON（true）にするとゲーム起動時にSpineの読み込みを開始しません。
　読み込みはsetSkeletonコマンドにより初めて表示されるときに行われます。Spineによっては
　読み込みに時間がかかり、表示までにラグが発生する可能性があります。
　以下のスクリプトを実行することで事前にSpineを読み込むこともできます。 　　Game_Spine.loadSkeleton(<name>);
　指定するスケルトン名の詳細についてはsetSkeletonコマンドの説明をご参照ください。

本プラグインにプラグインコマンドはありません。
説明文に記載されているコマンドはすべてスクリプトとなります。

i) [ピクチャの表示]でSpineを紐づけるピクチャを表示する
　画像はなくてもOK。

ii) ピクチャにSpineを紐づける 　[ ピクチャ5番に'spineboy'を紐づける場合 ] 　　$gameScreen.spine(5).setSkeleton('spineboy');

iii) スキンを設定する 　[ ピクチャ5番のSpineに'clothes'という名前のスキンを設定する場合 ] 　　$gameScreen.spine(5).setSkin('clothes');

iv) アニメーションを表示する 　[ ピクチャ5番のSpineに'walk'という名前のアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, 'walk'); 　[ ピクチャ5番のSpineに'walk'->'run'->'jump'の順でアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump']);

以下のように記述することでコマンドを短縮することができます。

$gameScreen.spine(5).setSkeleton('spineboy')

文字列の中では制御文字「\\v[n]」「\\V[n]」を使用することができます。
これらの制御文字を記述した箇所はツクールの変数n番の値に置き換わります。

[ 変数5番の値をアニメーション名として指定する場合 ] 　$gameScreen.spine(5).setAnimation(0, '\\v[5]'); [ 変数10番の値をアニメーションの再生速度として指定する場合 ] 　$gameScreen.spine(5).setAnimation(0, 'walk/timeScale=\\v[10]');

ピクチャにSpineを紐づけます。

setSkeleton(<name>)

[ ピクチャ5番に'spineboy'を紐づける場合 ] 　$gameScreen.spine(5).setSkeleton('spineboy');

Spineにスキンを設定します。

setSkin(<name>)
setSkin(<name1>, <name2>, ...)

[ ピクチャ5番のSpineに'clothes'という名前のスキンを設定する場合 ] 　$gameScreen.spine(5).setSkin('clothes'); [ ピクチャ5番のSpineに'clothes'、'hat'という名前の2つのスキンを設定する場合 ] 　$gameScreen.spine(5).setSkin('clothes', 'hat');

Spineにアニメーションを設定します。

setAnimation(<tack>, <animation>[, <continuance>, <interrupt>])
setAnimation(<tack>, <animations>[, <order>, <continuance>, <interrupt>])

a) トラック番号
　アニメーションを表示するトラックの番号を指定します。

　[ ピクチャ5番のSpineのトラック1番にアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(1, 'walk');
b) アニメーション名／アニメーション名リスト
　Spineに登録されているアニメーション名を指定します。
　複数のアニメーションを指定する場合は[]で括って記述します。

　[ ピクチャ5番のSpineに'walk'という名前のアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, 'walk');
　[ ピクチャ5番のSpineに'walk'->'run'->'jump'の順でアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump']);
　 c) 順序オプション
　複数アニメーション指定時の表示順序を指定します。
　

　[ 'walk'->'run'->'jump'の順でアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'sequential');
　[ 'walk'->'run'->'jump'のうちいずれか1つを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'random');
　[ 'walk'、run'、'jump'の順番を入れ替えて表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'shuffle');
d) 継続オプション
　指定したアニメーションの表示が終わったあとの動作を指定します。
　

　[ 'walk'->'run'->'jump'と表示したあと'jump'を繰り返し表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'sequential', 'continue');
　[ 'walk'->'run'->'jump'と表示したあと'walk'からもう一度表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'sequential', 'reset');
　[ 'walk'->'run'->'jump'と表示したあと'jump'の終わりの状態で停止させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, ['walk', 'run', 'jump'], 'sequential', 'none');
　 　
e) 割り込みフラグ
　Spineが現在表示しているアニメーションの終了を待つか、中断させて表示するかを指定します。
　

　[ 表示中のアニメーションを中断して指定したアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, 'walk', 'continue', true);
　[ 表示中のアニメーションの終了を待ってから指定したアニメーションを表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(0, 'walk', 'continue', false);
f) アニメーションオプション
　アニメーション名を指定する際、アニメーションごとに以下のオプションを指定できます。
　オプションは「アニメーション名/オプション名=値」の形で記述します。
　1つのアニメーションに複数のオプションを指定する場合はカンマ区切りで記述します。
　[ 'walk'を2回、'run'を3回、'jump'を1回の順で表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(1, ['walk/times=2', 'run/times=3', 'jump']);
　[ 'walk'を2倍速、'run'を1.5倍速で表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(1, ['walk/timeScale=2', 'run/timeScale=1.5', 'jump']);
　[ 'walk'のアルファ値を0.3、'run'のアルファ値を0.25で表示させる場合 ] 　　$gameScreen.spine(5).setAnimation(1, ['walk/alpha=0.3', 'run/alpha=0.25', 'jump']);
　[ 表示回数、タイムスケール、アルファ値をまとめて指定する場合 ] 　　$gameScreen.spine(5).setAnimation(1, 'walk/times=2,timeScale=2.5,alpha=0.5');
　

Spine全体のタイムスケールを設定します。

setTimeScale(<value>)

[ ピクチャ5番のSpineのタイムスケールを0.3に設定する場合 ] 　$gameScreen.spine(5).setTimeScale(0.3);

トラックごとのアルファ値を設定します。

setAlpha(<track>, <value>)
setAlpha(<track>, <value>, <overwrite>)

[ ピクチャ5番のSpineのトラック1番のアルファ値を0.3に設定する場合 ] 　$gameScreen.spine(5).setAlpha(1, 0.3); [ ピクチャ5番のSpineのトラック2番のアルファ値を0.5に設定する場合（上書き） ] 　$gameScreen.spine(5).setAlpha(2, 0.5, true);

アニメーション間のミックス値を設定します。

setMix(<duration>)
setMix(<animation1>, <animation2>, <duration>)

[ ピクチャ5番のSpineのミックス値を0.3秒に設定する場合 ] 　$gameScreen.spine(5).setMix(0.3); [ ピクチャ5番のSpineの'idle'->'walk'に切り替わるときのミックス値を0.5秒に設定する場合 ] 　$gameScreen.spine(5).setMix('idle', 'walk', 0.5);

パーツごと、またはパーツ全体の色の割合を設定します。

setColor(<red>, <green>, <blue>, <alpha>)
setColor(<image>, <red>, <green>, <blue>, <alpha>)

[ ピクチャ5番のSpine全体の色を赤に設定する場合 ] 　$gameScreen.spine(5).setColor(1, 0, 0, 1); [ ピクチャ5番のSpineの'hand'の色を青で半透明に設定する場合 ] 　$gameScreen.spine(5).setColor('gun', 0, 0, 1, 0.5);

パーツごと、またはパーツ全体にモザイクを設定します。

setMosaic(<size>)
setMosaic(<image>, <size>)

[ ピクチャ5番のSpine全体に10pxサイズのモザイクを設定する場合 ] 　$gameScreen.spine(5).setMosaic(10); [ ピクチャ5番のSpineの'hand'というパーツに15pxサイズのモザイクを設定する場合 ] 　$gameScreen.spine(5).setMosaic('hand', 15);

ピクチャ座標を基点とした相対座標を設定します。

setOffset(<x>, <y>)

[ ピクチャ5番のSpine座標をピクチャのX座標+8pxに設定する場合 ] 　$gameScreen.spine(5).setOffset(8, 0); [ ピクチャ5番のSpine座標をピクチャのY座標-8pxに設定する場合 ] 　$gameScreen.spine(5).setOffset(0, -8);

拡大率を設定します。

setScale(<x>, <y>)

[ ピクチャ5番のSpineを横方向に2.5倍に拡大する場合 ] 　$gameScreen.spine(5).setScale(2.5, 0); [ ピクチャ5番のSpineを縦方向に反転する場合 ] 　$gameScreen.spine(5).setScale(0, -1.0);

表示／非表示を設定します。

setVisible(<visible>)

[ ピクチャ5番のSpineを表示する場合 ] 　$gameScreen.spine(5).setVisible(true); [ ピクチャ5番のSpineを非表示にする場合 ] 　$gameScreen.spine(5).setVisible(false);

ボーンを設定します。

setBone(<boneName>, <x>, <y>, <rotation>[, <duration>, <screen>])


[ ピクチャ5番のSpineの'neck'というボーンの座標を(10,20)、角度を90°に設定する場合 ] 　$gameScreen.spine(5).setBone('neck', 10, 20, 1.57);
　※90° ≒ 90 / 180 * 3.14 ≒ 1.57ラジアン [ ボーンを60フレームかけて徐々に変動させる場合 ] 　$gameScreen.spine(5).setBone('neck', 10, 20, 1.57, 60); [ ボーンの座標を、Spine座標基準とした相対座標で指定する場合 ] 　$gameScreen.spine(5).setBone('neck', 10, 20, 1.57, 1, false);

ボーンの情報を取得します。

getBoneData(<boneName>[, <screen>])


戻り値のデータ形式


[ ピクチャ5番のSpineの'neck'というボーンの情報を取得する場合 ] 　let data = $gameScreen.spine(5).getBoneData('neck');
[ ボーンの情報を、座標をSpine座標基準とした相対座標で取得する場合 ] 　let data = $gameScreen.spine(5).getBoneData('neck', false);

スロットに紐づくアタッチメントの情報を取得します。

getAttachmentData(<slotName>[, <screen>])



[ ピクチャ5番のSpineの'neck'というスロットに紐づくアタッチメントの情報を取得する場合 ] 　let data = $gameScreen.spine(5).getAttachmentData('neck');
[ ボーンの情報を、座標をSpine座標基準とした相対座標で取得する場合 ] 　let data = $gameScreen.spine(5).getAttachmentData('neck', false);

指定座標の境界ボックス情報のリストを取得します。

hitTest(<x>, <y>[, <screen>])


[ ピクチャ5番のSpineの座標(10,20)の境界ボックス情報を取得する場合 ] 　let hits = $gameScreen.spine(5).hitTest(10, 20); [ 指定座標をSpine座標を基準とした相対座標として境界ボックス情報を取得する場合 ] 　let hits = $gameScreen.spine(5).hitTest(10, 20, false);

Spineにイベントを設定して音を鳴らしたりスイッチをONにしたりできます。
Spineイベントの詳細については [ Spineユーザーガイド ] をご参照ください。
　（Spineユーザーガイド > イベント）

MpiShowSpine.js（以下、旧プラグイン）から本プラグインに乗り換える場合、
下記の拡張プラグインを導入することで旧プラグインのプラグインコマンドや
旧プラグインを使用中にセーブされたデータをそのまま使用することができます。 　[ PictureSpineExtension_UpperCompatible.js ]

本プラグインを通じてSpineを運用したい方は下記コードを参考にしてください。

let spine = new Game_Spine();
let sprite = new Sprite_Spine(spine);
this.addChild(sprite);
spine.setSkeleton('spineboy').setAnimation(0, 'walk');