Next2D Player入門

これまで、NoCode Toolの紹介をしてきましたが、今日からはNext2D Playerの紹介をさせてもらえたらと思います。
Next2Dプロジェクトの根幹のライブラリで、レンダリングエンジン・各クラス毎の機能が実装されています。
NoCode Toolはこれらの機能をプログラマーのようにコードを書かなくても直感的に操作できる事を目的としています。
プログラミングができる方であればNext2D Playerに直接コードを書く事で多彩な操作が可能になります。

NoCode Toolとの連携

NoCode Toolで作成したアニメーションをJSON形式で書き出しデータはPlayerで読み込みが可能です。

簡易的な読み込みサンプル

NoCode Toolで書き出したJSONをPlayerから読み込みます。

事前技術共有

第二引数はオプションを設定できます。

プロパティ名	型	デフォルト値	説明
base	string	empty	相対パスでJSONを取得する場合、ここで設定したURLがrootとして適用されます。絶対パスの場合はここで設定したURLは適用されません。
fullScreen	boolean	false	Stageクラスで設定した幅と高さを超えて画面全体に描画されます。
tagId	string	empty	IDを指定すると、指定したIDのエレメント内で描画を行います。
bgColor	array [R,G,B,A] or false	false	背景色の[R,G,B,A]の配列は0～255で指定できます。falseは無色透明です。

next2d.load("wave_a_hand.json", {
    "base": "https://next2d-demonstration.herokuapp.com/json/",
    "tagId": "container"
});

See the Pen [Next2D Player] Sample of reading a static JSON file by Next2D (@next2d) on CodePen.

動的な連携

const { Loader }     = next2d.display;
const { URLRequest } = next2d.net;
const { Event }      = next2d.events;

// RootのMovieClipを作成
const root = next2d.createRootMovieClip(240, 240, 12, {
    "base": "https://next2d-demonstration.herokuapp.com/json/",
    "tagId": "container"
});

const request = new URLRequest("wave_a_hand.json");

const loader = new Loader(request);
loader
    .contentLoaderInfo
    .addEventListener(Event.COMPLETE, (event) =>
    {
        root.addChild(event.currentTarget.content);
    });

loader.load(request);

See the Pen [Next2D Player] Sample of reading a dynamic JSON file by Next2D (@next2d) on CodePen.

どちらも呼び出すJSONは同じですが、動的なサンプルはイベントの設定やその後の拡張などが可能になります。
明日は、動的な読み込みを行うLoaderクラスの紹介ができればと思います。