Next2D Framework [config設定]

初期構築が終わると、src/config配下に下記のstage.json、config.json、routing.jsonが書き出されます。今日はstage.json、config.jsonの解説を書きたいと思います。

stage.json

stage.jsonの設定値はNext2D Player入門で記載した設定項目と同一のものとなります。

stage.json

{
  "width": 240,
  "height": 240,
  "fps": 12,
  "options": {
    "base": ".",
    "fullScreen": true
  }
}

名前	型	デフォルト値	説明
width	number	240	表示領域(Stage)の幅を設定します。
height	number	240	表示領域(Stage)の高さを設定します。
fps	number	12	1秒間に何回描画するかを指定します。

Optionの設定値

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

config.json

config.json

{
  "local": {
    "api": {
      "endPoint": "/"
    },
    "content": {
      "endPoint": "/"
    }
  },
  "dev": {
    "api": {
      "endPoint": "/"
    },
    "content": {
      "endPoint": "/"
    }
  },
  "stg": {
    "api": {
      "endPoint": "/"
    },
    "content": {
      "endPoint": "/"
    }
  },
  "prd": {
    "api": {
      "endPoint": "/"
    },
    "content": {
      "endPoint": "/"
    }
  },
  "all": {
    "spa": true,
    "loading": {
      "callback": "Loading"
    },
    "gotoView": {
      "callback": ["callback.Background"]
    }
  }
}

初期はlocal、dev、stg、prd、allと、区切られており、local、dev、stg、prdは任意の環境名なので、環境に合わせて変更、もしくは追加が可能です。
例えば、国内のメジャーなプラットフォームであればgreeやmobageなどがありますが、複数のプラットフォームでゲームをリリースする事もあるかと思います。その時は、下記のような追加も可能です。

config.json

{
  "local": {
    "api": {
      "endPoint": "/"
    },
    "content": {
      "endPoint": "/"
    }
  },
  ...省略
  "gree_dev": {
    "api": {
      "endPoint": "https://greeのサンドボックスのapiのエンドポイント"
    },
    "content": {
      "endPoint": "https://gree開発用のCDN環境"
    }
  },
  "mobage_dev": {
    "api": {
      "endPoint": "https://mobageのサンドボックスのapiのエンドポイント"
    },
    "content": {
      "endPoint": "https://mobage開発用のCDN環境"
    }
  },
  ... 省略
  "all": {
    "spa": true,
    "loading": {
      "callback": "Loading"
    },
    "gotoView": {
      "callback": ["callback.Background"]
    }
  }

このように複数のプラットフォームに対応した変数管理も可能です。

all

allはその名の通り、どの環境でも書き出される共通変数となります。
allで機能に影響のある設定項目は以下の項目となります。

名前	型	デフォルト値	説明
spa	boolean	true	Single Page Applicationとして、URLでシーンを制御することができます。
loading.callback	string	Loading	画面遷移の準備が完了するまでの間、ローディング画面を表示するかどうかを設定します。コールバックとして設定されたクラスのstart関数とend関数を呼び出します。
gotoView.callback	string or array	["callback.Background"]	gotoView関数が終了した後にコールバックするクラスを指定できます。

書き出し

書き出しコマンドのenvに環境の値を入れると対象の環境変数とallの値を結合してConfig.jsを生成します。

npm run build -- --env="prd"

最後の設定項目、routing.jsonの解説は少し長くなりそうなので、明日引き続き記載したいと思います。