Next2D Framework入門

MVVM（Model-View-ViewModel）パターンを利用し、規模を問わず効率的な開発が行える事を目的としたNext2D専用のフレームワークです。

プロジェクトを開始する

プロジェクトを開始するのはとても簡単です。
下記のコマンドで自動的に必要な環境を構築します。

npx create-next2d-app app-name

※1 app-nameは任意部分なので、プロジェクト名などを入れてください。
※2 Node >= 14.0.0 及び npm >= 5.6 の環境が必要です。

ディレクトリ構造

コマンドが終了すると、下記のディレクトリ構造が出来上がっています。

app-name
├── src
│   ├── index.js
│   ├── App.js
│   ├── Packages.js // このファイルは自動的に生成されます。
│   │
│   ├── component
│   │   └── default empty
│   │
│   ├── config
│   │   ├── config.json  // 環境変数などを管理するJSON
│   │   ├── routing.json // ページのルーティングを管理するJSON
│   │   ├── stage.json   // 表示エリア(Stage)の設定を管理する JSON
│   │   └── Config.js    // このファイルは上記のJSONを読み込んで、自動的に生成されます。
│   │
│   ├── content // NoCode Toolと連携したコンテンツディレクトリ
│   │   ├── TopContent.js
│   │   └── HomeContent.js
│   │
│   ├── image
│   │   └── default empty
│   │
│   ├── model // ロジックはこのディレクトリにまとめます。
│   │   ├── callbask
│   │   │   └── Background.js
│   │   ├── api
│   │   │   └── HomeText.js
│   │   └── default empty
│   │
│   └── view // シーン(ページ)毎にViewとViewModelを準備します。
│       ├── top
│       │   ├── TopView.js
│       │   └── TopViewModel.js
│       └── home
│           ├── HomeView.js
│           └── HomeViewModel.js
│
└── __tests__ // ロジックテストは大切ですw
    └── model
        └── default empty

Hello, World.

プロジェクトのディレクトリに移動して、サンプルを起動します。

cd app-name
npm start

TOPページ

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

HOMEページ

Click Me.をクリックもしくはタップすると、このHomeシーン(ページ)が描画されます。
Next2D FrameworkはSPA(Single Page Application)に対応しており、意外とゲームでは実現されなかったURLでの直接的なアクセスを可能にしてます。

URLでの直接アクセス、ブラウザの戻る機能でのシーン遷移にも対応してます。
ゲームをしていて、戻る機能を誤って押してしまいオープニングページから始まる。。。なんて事を体験された方は多いのではないでしょうか？もしくは、行きたい画面に早く遷移したいけどオープニングページからマイページに移動して友達を検索して移動。。。など手順が多く億劫な経験をされた方もいると思います。
Next2D Frameworkは上記のようなストレスを減らし、快適にゲームが行えるよう工夫してます。また、ローディング画面もデフォルトで実装しているなど、開発する方の手間も削減する工夫もしてます。

フローチャート

Next2D Frameworkは下記の図の順で画面の準備を行います。

今日は是非、「Hello, World.」を表示する体験をしてみてください。
明日からはNext2D Frameworkの機能を紹介できればと思います。