Next2D | Framework API Documentation

Quick Start

Create Next2D apps with no build configuration.

npx create-next2d-app app-name
cd app-name
npm start

Directory Configuration

project
├── src
│   ├── index.js
│   ├── App.js
│   ├── Packages.js // It will be generated automatically.
│   │
│   ├── component
│   │   └── default empty
│   │
│   ├── config
│   │   ├── config.json  // Configuration files for each environment.
│   │   ├── routing.json // Request settings before loading the view.
│   │   ├── stage.json   // Display(Stage) area setting. 
│   │   └── Config.js    // It will be generated automatically.
│   │
│   ├── content // Symbolic access to JSON created with NoCode Tool
│   │   ├── TopContent.js
│   │   └── HomeContent.js
│   │
│   ├── image
│   │   └── default empty
│   │
│   ├── model // business logic
│   │   ├── api
│   │   │   └── HomeText.js
│   │   └── callback
│   │       └── Background.js
│   │
│   └── view // Per-page View, ViewModel files.
│       ├── top
│       │   ├── TopView.js
│       │   └── TopViewModel.js
│       └── home
│           ├── HomeView.js
│           └── HomeViewModel.js
│
└── __tests__ // Unit Test directory
    └── model
        └── default empty

Flowchart

Commands

Starts the development server.

npm start

Generate the necessary View and ViewModel classes from the routing JSON file.

npm run generate

Write out the production app for the specified environment variables.

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

Starts the test runner.

npm test

Configuration JSON

stage.json

name	type	default	description
`width`	number	240	This is the setting for the width of the display area.
`height`	number	240	This is the setting for the height of the display area.
`fps`	number	12	The number of times to draw per second.

Option settings

name	type	default	description
`base`	string	empty	When acquiring JSON by relative path, the URL set here will be applied as the root. For absolute paths, the URL set here will not be applied.
`fullScreen`	boolean	false	It will be drawn on the entire screen beyond the width and height set in the Stage class.
`tagId`	string	null	When an ID is specified, drawing will be performed within the element with the specified ID.
`bgColor`	array	null	The [R,G,B,A] array of background colors can be specified from 0 to 255. false is colorless and transparent.

config.json

| Different variable values can be set for each environment. Values set with `all` are available in all environments.

name	type	default	description
`spa`	boolean	true	As a Single Page Application, the scene can be controlled by URL.
`loading`.`callback`	string	Loading	Sets whether or not to display the loading screen until the preparation for screen transition is complete. Call the start and end functions of the class set as callback.
`gotoView`.`callback`	string or array	["callback.Background"]	You can specify the class to call back after the `gotoView` function finishes.

routing.json

The top properties that can be set for routing are alphanumeric characters, slashes, hyphens, and underscores. Access the View class in CamelCase using the slash, hyphen, and underscore as keys.

Example

In the case of the sample below, access is enabled at `https://example.com/quest/list` and the context is set to `QuestListView.js`.

{
  "quest/list": {
    "requests": []
  }
}

Second level property settings

name	type	default	description
`private`	boolean	false	This is used to control direct access in SPA mode; if set to true and accessed directly, the View set in redirect will be loaded.
`redirect`	string	empty	When private is true, the page set here will be loaded. If it is not set, TopView will be loaded.
`requests`	array	null	Send a request to the specified location before accessing the View. The information received will be set in next2d.fw.response with name as the key.

Properties that can be set in the requests property.

name	type	default	description
`type`	string	`content`	The following fixed values are available for this property. `json`, `content`, `image` and `custom`
`path`	string	empty	Get the value of the string enclosed in {{***}} from config.json. e.g. {{ api.endPoint }}path/to/api
`name`	string	empty	When the name is set, the data retrieved with the name as the key will be set in the Response Map.
`cache`	boolean	false	Caches the retrieved data using the value set in name as a key.
`callback`	string or array	null	You can specify the class to call back after the request is completed. The value will be set to the first argument of the contractor of the specified class and will be taken over.
`class`	string	empty	You can specify the class that will execute the request. (it will only be invoked when type is custom)
`access`	string	`public`	Allows you to specify access to the function that will perform the request. You can specify `public` or `static`. (Only invoked when type is custom)
`method`	string	empty	You can specify a function to execute the request. (only fired when type is custom)