なでしこ3でSpineのアニメを動かすことはできるか？ チャレンジ！
別分野のちゃんぽんなので、まず状況を説明。
・メインとなるプログラムは「なでしこ3」
・素材はSpineで作られたファイル(png,atlas,jsonまたはskel)
・素材をロードするためにpixi.jsとpixi-spine.jsをネットから入手
・pixiでSpineのアニメを動かすコードを参考になでしこ3のコードを書く
素材はローカルにダウンロードした「スパインボーイ」を使用する。
かるい解説
「なでしこ3」「Spine」「pixi.js」を全部知っている人、いなさそうなので軽く紹介する
なでしこ3とは何か
何かの間違いで検索で来た人向け。
このブログでは主になでしこ1かなでしこ3のプログラムについて書いている。
なでしこ1は、コードを日本語で書けるプログラム言語。主にwindows上で動く。
なでしこ3は、コードを日本語で書けるプログラム言語。主にブラウザ上で動く。
なでしこ3webkit版はwindows上でブラウザが入っているウィンドウが開く(イメージ)
今回はなでしこ3webkit版(デスクトップアプリ配布パッケージ )を使っていきます。
Spineとは何か
かんたんに言うと「動く素材作成ツール」
ブラウザゲームのキャラをうごかすのに使われている。
チュートリアルにでてくるのが「スパインボーイ」くん
Spineでキャラを作り、出来上がったら3つの素材を出力する。
・pngファイル (絵)
・atlasファイル（絵をパーツ分けする）
・jsonファイルまたはskelファイル （パーツの配置、動き）
一般的にはこれをunityとかpixiとかでロードして、ブラウザ上にゲームのキャラとして表示します。
今回はなでしこ3webkit版のウィンドウに描画させます。
pixi.jsとpixi-spine.jsとは何か
pixi.jsはブラウザゲームを作るときに便利なやつ。
javascriptでできていてなんか……便利なやつらしい。
pixiでは「ステージ」に「スプライト」や「コンテナ」を子要素追加することでブラウザに描画することができる……らしい。
詳しいことは知らない。
「ステージ」にSpineの素材を子要素追加するために必要なプラグインが「pixi-spine.js」
PIXIでスパインボーイを描画するサンプルはこちら
なでしこ3webkit版でスパインボーイを描画する
ここから本編。
なでしこ3のwebkit版をダウンロードして解凍。
webappフォルダの中に移動して……
"pixi.js"と"pixi-spine.js"を配置。
assetsフォルダを作って中に"spineboy.atlas","spineboy.json","spineboy.png"を入れます。
[入手場所]
・pixi.js
https://pixijs.com/
https://pixijs.download/v4.8.8/pixi.js
・pixi-spine.js
https://github.com/pixijs/spine/tree/pixi4-spine3.8/dist
・assetsフォルダの素材
Spine公式ランタイム
http://ja.esotericsoftware.com/spine-runtimes
https://github.com/EsotericSoftware/spine-runtimes/
spine3.8ランタイムのサンプル素材
https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/examples/spineboy/export
assets/spineboy.atlas
assets/spineboy.png
assets/spineboy.json (spineboy-ess.jsonをリネームしたもの)
※ バージョンに注意（全部ちょっと古い）
pixi.js → pixi4
pixi-spine.js → pixi4-spine3.8
spineの素材 → Spine3.8
プログラム
webapp/index.htmlをいじります。
なでしこ3のロードの前にpixi.jsとpixi-spine.jsをロード
～ 上略 ～ </div><!-- #main --> <!-- ここにpixi.jsとpixi-spine.jsを追加 --> <script src="pixi.js"></script> <script src="pixi-spine.js"></script> <!-- なでしこ3の読み込みコード --> <script src="./nadesiko3/wnako3.js"></script> ～以下略～
次にwebapp/main.nako3 のプログラムを書き換えします。
pixijsのSPINEサンプルページを再掲
ここにサンプルコードが30行くらいあるので、コピー。
なでしこ3のmain.nako3にどーんと貼り付けして、『』をJS実行…
あ、素材のパスだけ変更します。
//なでしこ3スクリプト
『//ここにコピーしたコードを貼る
const app = new PIXI.Application();
document.body.appendChild(app.view);
// load spine data
app.loader
.add('spineboy', 'assets/spineboy.json')//変更
.load(onAssetsLoaded);
//以下略
』をJS実行
なでしこ3からjavascriptをJS実行するだけ (流石にズルいとは思う)
まだ動くかどうかの実験段階だからお許し頂きたい。
nadesiko3.exeを実行して……
間違いなくなでしこ3でスパインボーイが表示できている！（実際は動きます）
『なでしこ3でSpineのアニメを動かすことができる』
ことがわかった。
ローカルファイルの素材をロードできている点が偉い。
改良してなでしこ3から素材を操作できるようにしていきたい。
完成品(5.6MB)
http://bugloderunner.g1.xrea.com/junk/nako3spine.zip
