Next2D NoCode ToolでJavaScriptを使う[上級編]

タイムラインで埋め込むJavaScriptはクロージャのローカル変数なので、別のフレームで埋め込んだJavaScriptでは変数にアクセスができません。
そこで、全てのDisplayObjectからアクセス可能な変数管理機能と、DisplayObject単体に格納できる変数管理機能を実装しています。
今日は変数管理を紹介します。

ローカル変数

固定のDisplayObjectにだけ変数を格納したい場合に利用します。
利用シーンとしては、個別のキャラクターのパラメーター管理などに利用してます。

getLocalVariable

ローカル空間から変数の値を取得します。
keyは型で判定します。例えばkeyをNumberの0で取得した場合と、Stringの"0"で取得した場合では戻り値が異なります。

const value = this.getLocalVariable(key);

setLocalVariable

ローカル空間へ値を保存します。

this.setLocalVariable(key, value);

hasLocalVariable

ローカル空間にある変数を指定のキーでヒットするかを判断します。

const result = this.hasLocalVariable(key);

deleteLocalVariable

ローカル空間にある変数を削除します。

this.deleteLocalVariable(key, value);

グローバル変数

グローバル空間から変数の値を取得します。
どのDisplayObjectからもアクセスが可能です。削除した場合は全てのDisplayObjectからアクセスできなくなります。
利用シーンとしては、経過時間や共有表示項目などで利用します。

getGlobalVariable

グローバル空間から変数の値を取得します。
keyは型で判定します。例えばkeyをNumberの0で取得した場合と、Stringの"0"で取得した場合では戻り値が異なります。

const value = this.getGlobalVariable(key);

setGlobalVariable

グローバル空間へ値を保存します。

this.setGlobalVariable(key, value);

hasGlobalVariable

グローバル空間にある変数を指定のキーでヒットするかを判断します。

const result = this.hasGlobalVariable(key);

deleteGlobalVariable

グローバル空間にある変数を削除します。

this.deleteGlobalVariable(key, value);

サンプルコード

MovieClipを2個作成して、それぞれに名前を付与します。
一つは加算用のMovieClipなのでplusと名付けます。
もう一つは減算用のMovieClipなのでminusと名付けます。

1フレームでsetIntervalで10もしくは-20になった時点で止まる加算と減算の処理を実行します。
そのままフレームを進めて10フレーム目でstop関数でフレームを止めます。

1フレーム目

プラス関数は10になったら終了して、マイナス関数は-20になったら終了。
進行状況をテキストで出力します。

// 終了判定の値をグローバルにセット
this.setGlobalVariable("plusEnd", 10);
this.setGlobalVariable("minusEnd", -20);

const plusTimerId = setInterval((plus) => 
{
    // 初回は変数がないので、0をセット
    if (!plus.hasLocalVariable("plusNumber")) {
        plus.setLocalVariable("plusNumber", 0);
    }

    // 値を加算
    let value = plus.getLocalVariable("plusNumber");
    plus.setLocalVariable("plusNumber", ++value);

    // テキストエリアに現在の数値を表示
    plus.display.text = `${value}`;

    // 10になったら終了
    if (plus.getLocalVariable("plusNumber") === plus.getGlobalVariable("plusEnd")) {
        clearInterval(plus.getLocalVariable("timerId"));
    }

}, 1000, this.plus);

// タイマー終了に必要なIDをローカル変数に格納
this.plus.setLocalVariable("timerId", plusTimerId);

const minusTimerId = setInterval((minus) => 
{
    // 初回は変数がないので、0をセット
    if (!minus.hasLocalVariable("minusNumber")) {
        minus.setLocalVariable("minusNumber", 0);
    }

    // 値を減算
    let value = minus.getLocalVariable("minusNumber");
    minus.setLocalVariable("minusNumber", --value);

    // テキストエリアに現在の数値を表示
    minus.display.text = `${value}`;

    // -20になったら終了
    if (minus.getLocalVariable("minusNumber") === minus.getGlobalVariable("minusEnd")) {
        clearInterval(minus.getLocalVariable("timerId"));
    }

}, 1000, this.minus);

// タイマー終了に必要なIDをローカル変数に格納
this.minus.setLocalVariable("timerId", minusTimerId);

10フレーム目

this.stop();

動作サンプル動画

※ 1フレームのコードは上記のコードをそのままコピーして利用してます。

もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
NoCode Tool

また、その他の関数に関しては、Next2D PlayerのAPI Docsから閲覧できます。

如何だったでしょうか？
これまで、NoCode Toolの使い方を紹介してきましたが、明日からはPlayerの使い方を紹介できればと思っています。