Next2Dで始めるゲーム開発 - Game Development Starting with Next2D

Next2Dで始めるゲーム開発
CEDEC 2022
@Next2D

⾃⼰紹介
• Toshiyuki Ienaga
• Webの制作会社でプログラ
マー/マネージャーしてます。
インフラ > バックエンド > フロントエンド > アプリ
@ienagatoshiyuki
@ienaga

アジェンダ
Next2Dとは？
プロジェクトを始める(Hello, World.)
機能解説
フローチャート解説
NoCode Toolとの連携

Next2D
Next2D（ネクストツーディー）は、JavaScriptで書かれた
2Dレンダリングエンジン「Next2D Player」、Model-
View-ViewModel（MVVM）アーキテクチャを採⽤した
「Next2D Framework」、Webブラウザ上で動作する
オーサリングツール「Next2D NoCode Tool」など、開発
者の⽣産性を上げることを⽬的としたツール・ライブラリ
です。
Next2D Player
Next2D Framework
Next2D NoCode Tool

Next2D Player
FlashPlayeをJavaScriptでエミュレートす
る「swf2js」から派⽣したプロジェクトで、
2D最速エンジンを提供することを⽬的とし
ています。 WebGL 、 WebGL2を完全にサ
ポートしており、開発者は、ブラウザやデ
バイスの互換性対処を気にすることなく
リッチでインタラクティブなWebコンテン
ツ、およびゲームを作成することができま
す。

Next2D Framework
従来のCanvas/WebGLアプリケー
ションでは困難だったURLによる
Single Page Application（SPA）で
の画⾯遷移を可能にし、開発パター
ンを固定化することで可読性・共有
性をシンプルにし、効率的な開発を
⾏えるNext2D専⽤フレームワーク
です。

Next2D NoCode Tool
ノーコード開発を主体としたWebブ
ラウザ上で動作するオーサリング
ツール。イメージしたアニメーショ
ンを直感的に作成することができ、
書き出したデータはWebにアップ
ロードすることで簡単に公開するこ
とができます。
https://tool.next2d.app

プロジェクトを始める

プロジェクトを開始する(Hello, World.)
npx create-next2d-app sample-app

Quick Start
この画⾯になったら準備完了です。

プロジェクトを起動する
cd sample-app
npm start

TOP画⾯
Click Me.をクリックもしくは
タップすると、次のシーン
(ページ)に移動します。

HOME画⾯
①SPA(Single Page Application)に対
応しており、URLでの直接的なアク
セスを可能にしてます。
②キャラクターをマウス・タップで
移動させる
フル画⾯モードがOnになっているの
で、画⾯のどこへでも移動が可能で
す。
③Hello, World.のテキストをタップ
して⽂字を変更する

機能解説
①SPAの特徴
②設定ファイル
③リクエスト後のcallback
④リクエストのカスタマイズ
⑤cacheの特性
⑥画⾯遷移
⑦表⽰画⾯の構築(View/ViewModel)
⑧gotoView後のcallback

SPA(Single Page Application)
ゲームをしていて、こんな経験はないでしょうか？

再度ローディングから
ゲーム途中で誤って「戻る」や「更新」を押下してオープニングなどから開始になる

SPA対応だと
画⾯毎にルーティング設定を⾏うこと
ができ、画⾯毎にコンテンツを再構成
する事ができるので、URLで対象の画
⾯に直接アクセスする事が可能です。
また、通常のWebと同じく「戻る」や
「進む」にも対応できるので、ゲーム
へのストレスが軽減できると思ってい
ます。

設定ファイルは3つ存在ます
stage.json
表⽰領域(Stage)の設定ファイル
config.json
環境変数を管理する設定ファイル
routing.json
URLの発⾏、事前読み込みを管理する設定ファイル

src/config/stage.json設定
{
"width": 240,
"height": 240,
"fps": 12,
"options": {
"base": ".",
"fullScreen": true
}
}
名前型初期値詳細
width number 240 表⽰領域(Stage)の幅を設定します
height number 240 表⽰領域(Stage)の⾼さを設定します
fps number 12 1秒間に何回描画するかを指定します
base string .
相対パスの場合、ここで設定したURLがroot
として適⽤されます。絶対パスの場合はここ
で設定したURLは適⽤されません
fullScreen boolean false
Stageクラスで設定した幅と⾼さを超えて画
⾯全体に描画されます
tagId string null
IDを指定すると、指定したIDのエレメント内
で描画を⾏います
bgColor array null
背景⾊の[R,G,B,A]の配列は0〜255で指定で
きます。falseは無⾊透明です
optionsの設定

src/config/config.json設定
{
"local": {
"api": {
"endPoint": "/local/endpoint"
},
"content": {
"endPoint": "/local/static"
}
},
"prd": {
"api": {
"endPoint": "/prd/endPoint"
},
"content": {
"endPoint": "/prd/static"
}
},
"all": {
"spa": true,
"loading": {
"callback": "Loading"
},
"gotoView": {
"callback": ["callback.Background"]
}
}
}
spa boolean true
Single Page Applicationとして、URLで
シーンを制御することができます
loading.callback string Loading
画⾯遷移の準備が完了するまでの間、ロー
ディング画⾯を表⽰するかどうかを設定し
ます。コールバックとして設定されたクラ
スのstart関数とend関数を呼び出します
gotoView.callback string|array ["callback.Background"]
gotoView関数が終了した後にコールバック
するクラスを指定できます
初期はlocal、dev、stg、prd、allと、区切られています。
これらの区切りは任意の環境名なので、利⽤環境に合わせて変更、もしくは追加が可能です。
複数のプラットフォームでゲームをリリースする際の
個別環境変数として、管理・書き出しが可能です。
但し、allに設定した変数はどの環境でも使える共通変数となります。
allの固定設定

書き出しのコマンド
npm run build -- --env=prd
--env=***に、書き出したい環境の値を設定する

src/config/routing.json設定
ルーティング名で設定できる値は
英⼩⽂字と数字([a-z0-9])、スラッシュ(/)、ハイフン(-)、アンダースコア(_)です。
スラッシュ、ハイフン、アンダースコアをキーに分割しCamelCaseに変換してViewクラスにアクセスします。
例) 下記のサンプルの場合
URLは、https://example.com/quest/listで
関数ではthis.gotoView(“quest/list”)でアクセスが可能になります。
{
"quest/list": {
"private" : false,
"requests": []
}
}

routing.jsonの2階層のプロパティ設定
private boolean false
SPAモードで、直接のアクセスを制御をし
たい時に利⽤します。trueに設定し直接ア
クセスすると、redirectで設定したViewが
読み込まれます
redirect string empty
privateがtrueの時、ここで設定したページ
を読み込みます。設定がない場合は
TopViewが読み込まれます。
requests
(次のページへ)
array null
Viewにアクセスする前に、指定したURLに
リクエストを送信します。受け取った情報
は、nameをキーにnext2d.fw.responseに格
納されます

requests配列のObject設定
type string content json、content、image、customの固定値が利⽤可能です
path string empty
{{***}}で囲むと、config.jsonの変数を取得できます。
例）{{ api.endPoint }}path/to/api
name string empty
nameを設定すると、設定した値をキーとして取得したデータを
next2d.fw.responseに格納します。
cache boolean false nameで設定した値をキーにして、取得したデータをキャッシュします。
callback string|array null
リクエスト完了後にコールバックするクラスを指定することができます。指定
したクラスのコントラクターの第⼀引数に取得した値が設定されます。model
ディレクトリ直下のクラスが対象となります。
class string empty
リクエストを実⾏するクラスを指定することができます。modelディレクトリ直
下のクラスが対象となり、DirName.ClassNameで設定できます
(typeがcustomのときのみ呼び出されます。）
access string empty
リクエストを実⾏する関数へのアクセスを指定できます。publicあるいはstatic
を指定することができます。
(typeがcustomのときのみ呼び出されます）
method string empty
リクエストを実⾏する関数を指定することができます。
(typeがcustomのときのみ起動します）

requests配列の役割
画⾯遷移前のリクエスト処理
レスポンス格納
画⾯表⽰前に外部APIやコンテンツを取得し、ResponceMapに格納します。
⑨のbind関数で利⽤する事を想定しています。

request後のcallback
リクエスト後のcallback処理
リクエスト終了毎にcallbackの値がセットされていれば
受け取ったレスポンスデータをconstructorで受け渡し
execute関数をコールします。

routing.jsonの設定例
{
"home": {
"requests": [
{
"type": "json",
"class": "{{ api.endPoint }}api/top.json",
"name": "TopText",
"callback": ["callback.Sample"]
}
]
}
}
src/model/callbackにSample.jsっというクラスを作成した場合
下記のようにアクセスが可能です。

Classの記述例
export class Sample extends next2d.fw.Model
{
constructor (response) {
this.response = response;
}
execute () {
/** 処理をかく**/
}
}

リクエストのカスタマイズ

カスタム設定の解説
カスタム機能を利⽤する事で、Auth認証や外部APIとの複雑な連携を⾏う事ができます。
type string content json、content、image、customの固定値が利⽤可能です
class string empty
リクエストを実⾏するクラスを指定することができます。
modelディレクトリ直下のクラスが対象となり、
DirName.ClassNameで設定できます
(typeがcustomのときのみ呼び出されます。）
access string empty
リクエストを実⾏する関数へのアクセスを指定できます。
publicあるいはstaticを指定することができます。
(typeがcustomのときのみ呼び出されます）
method string empty
リクエストを実⾏する関数を指定することができます。
(typeがcustomのときのみ起動します）

routing.json設定例
{
"home": {
"requests": [
{
"type": "custom",
"class": "api.HomeText",
"access": "static",
"method": "get"
}
]
}
}

classの設定例
export class HomeText extends next2d.fw.Model
{
static get () {
return fetch(`${next2d.fw.config.api.endPoint}api/home.json`)
.then((responce) => { return responce.json() })
.catch((error) => { console.error(error) });
}
}
src/model/apiにHomeText.jsを作成します。
src/modelに設置したクラスはmodelディレクトリ階層以下は分解され.で連結されて
next2d.fw.packagesに登録されます。
src/model/api/HomeText.jsにアクセスするにはapi.HomeTextとする事でアクセス可能です。

request後のcallback
多重リクエストが不要なものはcacheが可能。
重複リクエストを避けてもよいリクエストはcacheをtrueにする事で
2回⽬以降は内部cacheからデータを取得する事ができます。

SPAの落とし⽳
どの画⾯へも移動が可能という事は、想定される画⾯遷移が不明確になります。
コンテンツ情報やユーザー情報など、どの画⾯でも必要となるような情報はrouting設定で都
度取得が必要となると思います。
重複リクエストを避けてもよいリクエストはcacheをtrueにする事で、2回⽬以降は内部cache
からデータを取得する事ができます。
cacheに格納された値は値参照の為、情報を書き換えた場合、cache内のobjectも更新されま
す。

画⾯遷移
画⾯遷移はApplicationクラスで実装されてるgotoView関数を利⽤します。
各クラスの親クラスにappというgetterを実装しており、this.gotoViewでアクセスが可能です。
SPAモードを有効にした場合は、URLでの画⾯遷移も可能です。下記の画⾯遷移は同義となります。
[URLでの遷移]
https://example.com/quest/list
[関数での遷移]
this.app.gotoView("quest/list");

QueryString
Next2D FrameworkではQueryStringが利⽤できます。
QueryStringの値はnext2d.fw.queryに格納され、親クラスを継承している場合はthis.queryから取得可能です。
[URLでの遷移]
https://example.com/quest/list?questId=10&areaName=sample
[関数での遷移]
this.app.gotoView("quest/list?questId=10&areaName=sample");
Queryの取得
性質上、全ての値をStringとして格納するので、numberなどはキャストして利⽤するのがお勧めです。
例) const questId = this.query.get("questId") | 0;

表⽰画⾯の構築
(View/ViewModel)

ViewとViewModelの役割
1画⾯に1View、1ViewModelが基本スタイルです。
ディレクトリ構成はキャメルケースの最初のブロックで作成するのを推奨しています。
Home画⾯の例)
src/view/home/HomeView.js
src/view/home/HomeViewModel.js

generator
複数のViewクラス/ViewModelクラスを⽣成する際は
以下のコマンドで⾃動⽣成する事をお勧めします。
npm run generate
このコマンドはrouting.jsonのトッププロパティの値を分解し、viewディレクトリ直下に対象の
ディレクトリがなければディレクトリを作成し、ViewとViewModelが存在しない場合のみ新
規でクラスを⽣成します。

View
メインコンテキストにアタッチされるコンテナの
役割を担うのがViewクラスです。
その為、記述は⾄ってシンプルで、routingで設定
した値のキャメルケースでファイルを作成し、
next2d.fw.Viewを継承するのが基本のスタイルで
す。
特殊な要件がない限り、Viewでロジックを組む事
はありません
export class TopView extends next2d.fw.View
{
constructor () {
super();
}
}

ViewModel
表⽰の開始時に、bind関数がコールされ、画⾯遷
移する前にunbind関数がコールされます。
Viewに任意のDisplayObjectをbindするのが、
ViewModelの役割です。
今回のサンプルアプリは、ドメインロジックなど
はsrc/modelで管理し、UIはsrc/componentで管
理するサンプルとなります。
export class TopViewModel extends next2d.fw.ViewModel
{
constructor (view) {
super(view);
}
unbind (view) {
}
bind (view) {
this
.factory()
.then(() => {
/** 処理をかく **/
});
}
}

gotoView後のcallback
サンプルアプリでは、表⽰画⾯の構築後にグラデーション背景を追加しています。

callbackでグラデーション背景を追加

config.json設定例
{
"all": {
"gotoView": {
"callback": ["callback.Background"]
}
}
}

Classの記述例
export class Background extends next2d.fw.Model
{
constructor () {
}
execute () {
}
}
gotoViewのcallbackは、constructorへは何もあ値を渡しません。

フローチャート
⼤きく2つのフロー機能があり
⼀つは、左側の画⾯遷移とリクエストのフロー
もう⼀つは、右側のView-ViewModelの表⽰構築フロー
それぞれ、完了時にcallbackがコールされます。
View-ViewModel
画⾯遷移前のリクエスト処理

アニメータとの役割分担
NoCode Toolは、全てのDisplayObjectに任意のシンボル名を設定
でき、設定したシンボル名を利⽤してFrameworkから動的にアク
セスが可能です。
つまり、シンボル名を決めておけばエンジニアはnewで呼び出すだ
けで、アニメーションコンテンツを⽣成する事ができます。

NoCode Toolの設定
①Controller AreaのLibraryタブを開き、新し
いMovieClipを追加します。
②追加した、MovieClipのSymbol部分をダブ
ルクリックして任意の⽂字列を設定します。
① ②

routing.jsonの設定例
{
"top": {
"requests": [
{
"type": "content",
"class": "{{ content.endPoint }}content/sample.json",
"name": "MainContente",
"cache": true
}
]
}
}
typeにcontentを設定する事で、呼び出すことができます。
静的なファイルなので、他の画⾯でも利⽤するのであれば、cacheをtrueにする事で重複取得を防げます。

classの設定例
export class TopContent extends next2d.fw.Content
{
get contentName () {
return "MainContent";
}
get namespace () {
return "TopContent";
}
}
contentNameにroutingのnameに設定した値をセットします。
NamespcaseにNoCode Toolで設定したシンボル名をセットします。
1シンボルに1クラスが必要となります。

テスト実装
__tests__/model/配下に追加する

まとめ
• ViewとViewModelがあれば画⾯の構築ができる
• 設定ファイルで変数管理や、簡易的なAPIやコンテンツは動的に取得可能
• ドメインロジックはsrc/model配下で管理
• UIはsrc/component配下で管理
• NoCode Toolと連動するとエンジニアとアニメーターで役割分担が可能
• 単体テストは__tests__/model/配下に追加する

Next2Dで始めるゲーム開発 - Game Development Starting with Next2D

More Related Content

Similar to Next2Dで始めるゲーム開発 - Game Development Starting with Next2D (20)

Next2Dで始めるゲーム開発 - Game Development Starting with Next2D