@next2d/core 2.13.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,11 +1,273 @@
|
|
|
1
1
|
@next2d/core
|
|
2
2
|
=============
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
The core package for Next2D Player. It provides central functionality for Next2D including player management, Canvas initialization, event processing, and rendering worker communication.
|
|
5
5
|
|
|
6
|
+
Next2Dプレイヤーのコアパッケージです。プレイヤー管理、Canvas初期化、イベント処理、レンダリングワーカー通信など、Next2Dの中核機能を提供します。
|
|
7
|
+
|
|
8
|
+
**Important**: `@next2d/core` must not be referenced from other packages. This package is the top-level entry point and depends on other packages, but other packages must not depend on it to avoid circular dependencies.
|
|
9
|
+
|
|
10
|
+
**重要**: `@next2d/core` は他の packages からの参照を禁止しています。このパッケージはトップレベルのエントリーポイントであり、他のパッケージに依存しますが、循環依存を避けるため、他のパッケージからの依存は禁止されています。
|
|
11
|
+
|
|
12
|
+
## Overview / 概要
|
|
13
|
+
|
|
14
|
+
`@next2d/core` serves as the main entry point for the Next2D Player, providing the following features:
|
|
15
|
+
|
|
16
|
+
`@next2d/core`は、Next2Dプレイヤーのメインエントリーポイントとして以下の機能を提供します：
|
|
17
|
+
|
|
18
|
+
- **Next2D**: Application bootstrap, JSON file loading, root MovieClip creation / アプリケーションのブートストラップ、JSONファイルのロード、ルートMovieClipの作成
|
|
19
|
+
- **Player**: Play/stop control, resize handling, event management, render loop control / 再生/停止制御、リサイズ処理、イベント管理、描画ループ制御
|
|
20
|
+
- **Canvas**: Canvas element initialization, pointer/keyboard event processing, OffscreenCanvas support / Canvas要素の初期化、ポインター/キーボードイベント処理、OffscreenCanvas対応
|
|
21
|
+
- **RendererWorker**: Parallelized rendering using WebWorker / WebWorkerを使用した描画処理の並列化
|
|
22
|
+
- **Package Facades**: Unified access to Display, Events, Filters, Geom, Media, Net, Text, UI packages / Display、Events、Filters、Geom、Media、Net、Text、UIパッケージへの統一アクセス
|
|
23
|
+
|
|
24
|
+
## Directory Structure / ディレクトリ構造
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
src/
|
|
28
|
+
├── index.ts # Export definitions / エクスポート定義
|
|
29
|
+
├── CoreUtil.ts # Core utility functions / コアユーティリティ関数
|
|
30
|
+
├── RendererWorker.ts # Rendering worker initialization / レンダリングワーカー初期化
|
|
31
|
+
│
|
|
32
|
+
├── Next2D.ts # Next2D main class / Next2Dメインクラス
|
|
33
|
+
├── Next2D/
|
|
34
|
+
│ ├── service/
|
|
35
|
+
│ │ └── VideoSyncService.ts # Video sync service / ビデオ同期サービス
|
|
36
|
+
│ └── usecase/
|
|
37
|
+
│ ├── LoadUseCase.ts # JSON file loading / JSONファイルロード
|
|
38
|
+
│ ├── CreateRootMovieClipUseCase.ts # Root MovieClip creation / ルートMovieClip作成
|
|
39
|
+
│ └── CaptureToCanvasUseCase.ts # Canvas capture / Canvas キャプチャ
|
|
40
|
+
│
|
|
41
|
+
├── Player.ts # Player main class / Playerメインクラス
|
|
42
|
+
├── Player/
|
|
43
|
+
│ ├── service/
|
|
44
|
+
│ │ ├── PlayerAppendElementService.ts # Canvas element append / Canvas要素追加
|
|
45
|
+
│ │ ├── PlayerApplyContainerElementStyleService.ts # Style application / スタイル適用
|
|
46
|
+
│ │ ├── PlayerCreateContainerElementService.ts # Container element creation / コンテナ要素作成
|
|
47
|
+
│ │ ├── PlayerDoubleClickEventService.ts # Double click event / ダブルクリックイベント
|
|
48
|
+
│ │ ├── PlayerKeyDownEventService.ts # Key down event / キー押下イベント
|
|
49
|
+
│ │ ├── PlayerKeyUpEventService.ts # Key up event / キー離しイベント
|
|
50
|
+
│ │ ├── PlayerLoadingAnimationService.ts # Loading animation / ローディングアニメーション
|
|
51
|
+
│ │ ├── PlayerPointerDownEventService.ts # Pointer down event / ポインター押下イベント
|
|
52
|
+
│ │ ├── PlayerPointerMoveEventService.ts # Pointer move event / ポインター移動イベント
|
|
53
|
+
│ │ ├── PlayerPointerUpEventService.ts # Pointer up event / ポインター離しイベント
|
|
54
|
+
│ │ ├── PlayerRemoveCachePostMessageService.ts # Cache removal message / キャッシュ削除メッセージ
|
|
55
|
+
│ │ ├── PlayerRemoveLoadingElementService.ts # Loading element removal / ローディング要素削除
|
|
56
|
+
│ │ ├── PlayerRenderingPostMessageService.ts # Rendering message / レンダリングメッセージ
|
|
57
|
+
│ │ ├── PlayerResizePostMessageService.ts # Resize message / リサイズメッセージ
|
|
58
|
+
│ │ ├── PlayerSetCurrentMousePointService.ts # Mouse coordinate setting / マウス座標設定
|
|
59
|
+
│ │ ├── PlayerStopService.ts # Stop processing / 停止処理
|
|
60
|
+
│ │ └── PlayerTransferCanvasPostMessageService.ts # Canvas transfer message / Canvas転送メッセージ
|
|
61
|
+
│ └── usecase/
|
|
62
|
+
│ ├── PlayerBootUseCase.ts # Player boot / Player初期起動
|
|
63
|
+
│ ├── PlayerHitTestUseCase.ts # Hit test / ヒットテスト
|
|
64
|
+
│ ├── PlayerPlayUseCase.ts # Play start / 再生開始
|
|
65
|
+
│ ├── PlayerReadyCompleteUseCase.ts # Ready complete / 準備完了処理
|
|
66
|
+
│ ├── PlayerRegisterEventUseCase.ts # Event registration / イベント登録
|
|
67
|
+
│ ├── PlayerResizeEventUseCase.ts # Resize event / リサイズイベント
|
|
68
|
+
│ ├── PlayerResizeRegisterUseCase.ts # Resize registration / リサイズ登録
|
|
69
|
+
│ └── PlayerTickerUseCase.ts # Frame ticker / フレームティッカー
|
|
70
|
+
│
|
|
71
|
+
├── Canvas.ts # Canvas main module / Canvasメインモジュール
|
|
72
|
+
├── Canvas/
|
|
73
|
+
│ ├── service/
|
|
74
|
+
│ │ ├── CanvasBootOffscreenCanvasService.ts # OffscreenCanvas boot / OffscreenCanvas起動
|
|
75
|
+
│ │ ├── CanvasInitializeService.ts # Canvas initialization / Canvas初期化
|
|
76
|
+
│ │ └── CanvasSetPositionService.ts # Canvas position setting / Canvas位置設定
|
|
77
|
+
│ └── usecase/
|
|
78
|
+
│ ├── CanvasPointerDownEventUseCase.ts # Pointer down processing / ポインター押下処理
|
|
79
|
+
│ ├── CanvasPointerLeaveEventUseCase.ts # Pointer leave processing / ポインター離脱処理
|
|
80
|
+
│ ├── CanvasPointerMoveEventUseCase.ts # Pointer move processing / ポインター移動処理
|
|
81
|
+
│ ├── CanvasPointerUpEventUseCase.ts # Pointer up processing / ポインター離し処理
|
|
82
|
+
│ ├── CanvasRegisterEventUseCase.ts # Event registration / イベント登録
|
|
83
|
+
│ └── CanvasWheelEventUseCase.ts # Wheel event processing / ホイールイベント処理
|
|
84
|
+
│
|
|
85
|
+
├── Display.ts # Display package facade / Display パッケージファサード
|
|
86
|
+
├── Events.ts # Events package facade / Events パッケージファサード
|
|
87
|
+
├── Filters.ts # Filters package facade / Filters パッケージファサード
|
|
88
|
+
├── Geom.ts # Geom package facade / Geom パッケージファサード
|
|
89
|
+
├── Media.ts # Media package facade / Media パッケージファサード
|
|
90
|
+
├── Net.ts # Net package facade / Net パッケージファサード
|
|
91
|
+
├── Text.ts # Text package facade / Text パッケージファサード
|
|
92
|
+
├── UI.ts # UI package facade / UI パッケージファサード
|
|
93
|
+
│
|
|
94
|
+
└── interface/ # Type definitions / 型定義
|
|
95
|
+
├── ICaptureMessage.ts
|
|
96
|
+
├── ICaptureOptions.ts
|
|
97
|
+
├── IDisplay.ts
|
|
98
|
+
├── IDisplayObject.ts
|
|
99
|
+
├── IEvents.ts
|
|
100
|
+
├── IFilters.ts
|
|
101
|
+
├── IGeom.ts
|
|
102
|
+
├── IMedia.ts
|
|
103
|
+
├── INet.ts
|
|
104
|
+
├── IPlayerHitObject.ts
|
|
105
|
+
├── IPlayerOptions.ts
|
|
106
|
+
├── IRemoveCacheMessage.ts
|
|
107
|
+
├── IRenderMessage.ts
|
|
108
|
+
├── IResizeMessage.ts
|
|
109
|
+
├── IStageData.ts
|
|
110
|
+
├── IText.ts
|
|
111
|
+
└── IUI.ts
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Boot Flow / 起動フロー
|
|
115
|
+
|
|
116
|
+
```mermaid
|
|
117
|
+
sequenceDiagram
|
|
118
|
+
participant User
|
|
119
|
+
participant Next2D
|
|
120
|
+
participant Player
|
|
121
|
+
participant Canvas
|
|
122
|
+
participant Worker as RendererWorker
|
|
123
|
+
participant Loader
|
|
124
|
+
participant Stage
|
|
125
|
+
|
|
126
|
+
User->>Next2D: load(url, options)
|
|
127
|
+
Next2D->>Player: PlayerBootUseCase
|
|
128
|
+
Player->>Player: createContainer
|
|
129
|
+
Player->>Player: applyStyle
|
|
130
|
+
Player->>Player: showLoading
|
|
131
|
+
Player->>Canvas: initialize
|
|
132
|
+
Canvas->>Canvas: setupPointerEvents
|
|
133
|
+
Canvas->>Worker: bootOffscreenCanvas
|
|
134
|
+
Worker-->>Canvas: transferControlToOffscreen
|
|
135
|
+
Next2D->>Loader: load JSON file
|
|
136
|
+
Loader->>Loader: parse data
|
|
137
|
+
Loader-->>Stage: set stageWidth/stageHeight/frameRate
|
|
138
|
+
Stage->>Stage: addChild(root)
|
|
139
|
+
Player->>Player: resize
|
|
140
|
+
Player->>Player: removeLoading
|
|
141
|
+
Player->>Canvas: append to DOM
|
|
142
|
+
Player->>Player: readyComplete
|
|
143
|
+
Player-->>User: Stage ready
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Render Loop / レンダーループ
|
|
147
|
+
|
|
148
|
+
```mermaid
|
|
149
|
+
flowchart TD
|
|
150
|
+
A[User calls Player.play] --> B[PlayerPlayUseCase]
|
|
151
|
+
B --> C[Set stopFlag = false]
|
|
152
|
+
C --> D[Calculate FPS interval]
|
|
153
|
+
D --> E[requestAnimationFrame]
|
|
154
|
+
|
|
155
|
+
E --> F[PlayerTickerUseCase]
|
|
156
|
+
F --> G{stopFlag?}
|
|
157
|
+
G -->|true| Z[End]
|
|
158
|
+
G -->|false| H{time > fps?}
|
|
159
|
+
|
|
160
|
+
H -->|No| E
|
|
161
|
+
H -->|Yes| I[stage.$ticker]
|
|
162
|
+
I --> J[Dispatch ENTER_FRAME event]
|
|
163
|
+
J --> K{stage.changed?}
|
|
164
|
+
|
|
165
|
+
K -->|Yes| L[PlayerRenderingPostMessageService]
|
|
166
|
+
L --> M[Generate render data]
|
|
167
|
+
M --> N[Worker.postMessage]
|
|
168
|
+
N --> O[RendererWorker renders]
|
|
169
|
+
|
|
170
|
+
K -->|No| P{Cache cleanup needed?}
|
|
171
|
+
O --> P
|
|
172
|
+
|
|
173
|
+
P -->|Yes| Q[removeTimerScheduledCache]
|
|
174
|
+
P -->|No| R[PlayerRemoveCachePostMessageService]
|
|
175
|
+
Q --> R
|
|
176
|
+
|
|
177
|
+
R --> E
|
|
178
|
+
|
|
179
|
+
S[User calls Player.stop] --> T[PlayerStopService]
|
|
180
|
+
T --> U[Set stopFlag = true]
|
|
181
|
+
U --> V[cancelAnimationFrame]
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## Key Components / 主要コンポーネント
|
|
185
|
+
|
|
186
|
+
### Next2D Class
|
|
187
|
+
|
|
188
|
+
The main entry point for the application. Provides access to all packages and manages initialization.
|
|
189
|
+
|
|
190
|
+
アプリケーションのメインエントリーポイント。すべてのパッケージへのアクセスを提供し、初期化を管理します。
|
|
191
|
+
|
|
192
|
+
**Key Methods / 主要メソッド:**
|
|
193
|
+
- `load(url, options)`: Load JSON file and initialize player / JSONファイルを読み込み、プレイヤーを初期化
|
|
194
|
+
- `createRootMovieClip(width, height, fps, options)`: Programmatically create root MovieClip / プログラマティックにルートMovieClipを作成
|
|
195
|
+
- `captureToCanvas(displayObject, options)`: Capture DisplayObject to Canvas / DisplayObjectをCanvasにキャプチャ
|
|
196
|
+
|
|
197
|
+
### Player Class
|
|
198
|
+
|
|
199
|
+
Manages rendering, events, settings, and controls.
|
|
200
|
+
|
|
201
|
+
描画、イベント、設定、コントロールを管理します。
|
|
202
|
+
|
|
203
|
+
**Key Methods / 主要メソッド:**
|
|
204
|
+
- `play()`: Start render loop / 描画ループを開始
|
|
205
|
+
- `stop()`: Stop render loop / 描画ループを停止
|
|
206
|
+
- `cacheClear()`: Clear all render caches / すべての描画キャッシュをクリア
|
|
207
|
+
- `setOptions(options)`: Set player options / プレイヤーオプションを設定
|
|
208
|
+
|
|
209
|
+
**Key Properties / 主要プロパティ:**
|
|
210
|
+
- `rendererWidth/rendererHeight`: Render area size including devicePixelRatio / devicePixelRatioを含む描画領域サイズ
|
|
211
|
+
- `screenWidth/screenHeight`: Screen display size / 画面表示サイズ
|
|
212
|
+
- `fps`: Frame rate interval (milliseconds) / フレームレート間隔（ミリ秒）
|
|
213
|
+
- `fullScreen`: Full screen mode setting / フルスクリーンモード設定
|
|
214
|
+
|
|
215
|
+
### Canvas Module
|
|
216
|
+
|
|
217
|
+
Manages Canvas element initialization and event processing.
|
|
218
|
+
|
|
219
|
+
Canvas要素の初期化とイベント処理を管理します。
|
|
220
|
+
|
|
221
|
+
**Features / 機能:**
|
|
222
|
+
- Initialization with devicePixelRatio support / devicePixelRatio対応の初期化
|
|
223
|
+
- Pointer event handling (down/move/up/leave) / ポインターイベント（down/move/up/leave）のハンドリング
|
|
224
|
+
- Wheel event processing / ホイールイベント処理
|
|
225
|
+
- OffscreenCanvas support (for WebWorker) / OffscreenCanvas対応（WebWorker用）
|
|
226
|
+
|
|
227
|
+
### RendererWorker
|
|
228
|
+
|
|
229
|
+
Parallelizes rendering using WebWorker to improve main thread performance.
|
|
230
|
+
|
|
231
|
+
WebWorkerを使用して描画処理を並列化し、メインスレッドのパフォーマンスを向上させます。
|
|
232
|
+
|
|
233
|
+
**Communication Contents / 通信内容:**
|
|
234
|
+
- Rendering message (render data) / レンダリングメッセージ（render data）
|
|
235
|
+
- Resize message (canvas size) / リサイズメッセージ（canvas size）
|
|
236
|
+
- Cache removal message (cache IDs) / キャッシュ削除メッセージ（cache IDs）
|
|
237
|
+
- Canvas transfer message (OffscreenCanvas) / Canvas転送メッセージ（OffscreenCanvas）
|
|
238
|
+
|
|
239
|
+
## Usage Example / 使用例
|
|
240
|
+
|
|
241
|
+
```typescript
|
|
242
|
+
import { Next2D } from "@next2d/core";
|
|
243
|
+
|
|
244
|
+
const next2d = new Next2D();
|
|
245
|
+
|
|
246
|
+
// Load from JSON file / JSONファイルからロード
|
|
247
|
+
await next2d.load("/path/to/content.json", {
|
|
248
|
+
width: 800,
|
|
249
|
+
height: 600,
|
|
250
|
+
tagId: "app",
|
|
251
|
+
bgColor: "#ffffff"
|
|
252
|
+
});
|
|
253
|
+
|
|
254
|
+
// Create programmatically / プログラマティックに作成
|
|
255
|
+
const root = await next2d.createRootMovieClip(800, 600, 60);
|
|
256
|
+
root.addChild(myDisplayObject);
|
|
257
|
+
|
|
258
|
+
// Access Display package / Displayパッケージへのアクセス
|
|
259
|
+
const sprite = new next2d.display.Sprite();
|
|
260
|
+
const shape = new next2d.display.Shape();
|
|
6
261
|
```
|
|
262
|
+
|
|
263
|
+
## Installation / インストール
|
|
264
|
+
|
|
265
|
+
```bash
|
|
7
266
|
npm install @next2d/core
|
|
8
267
|
```
|
|
9
268
|
|
|
10
|
-
## License
|
|
269
|
+
## License / ライセンス
|
|
270
|
+
|
|
11
271
|
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
|
|
272
|
+
|
|
273
|
+
このプロジェクトは[MITライセンス](https://opensource.org/licenses/MIT)の下でライセンスされています。詳細は[LICENSE](LICENSE)ファイルを参照してください。
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@next2d/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Next2D Core Package",
|
|
5
5
|
"author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -24,15 +24,15 @@
|
|
|
24
24
|
"url": "git+https://github.com/Next2D/Player.git"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@next2d/core": "
|
|
28
|
-
"@next2d/display": "
|
|
29
|
-
"@next2d/events": "
|
|
30
|
-
"@next2d/filters": "
|
|
31
|
-
"@next2d/geom": "
|
|
32
|
-
"@next2d/media": "
|
|
33
|
-
"@next2d/net": "
|
|
34
|
-
"@next2d/text": "
|
|
35
|
-
"@next2d/ui": "
|
|
36
|
-
"@next2d/render-queue": "
|
|
27
|
+
"@next2d/core": "3.0.0",
|
|
28
|
+
"@next2d/display": "3.0.0",
|
|
29
|
+
"@next2d/events": "3.0.0",
|
|
30
|
+
"@next2d/filters": "3.0.0",
|
|
31
|
+
"@next2d/geom": "3.0.0",
|
|
32
|
+
"@next2d/media": "3.0.0",
|
|
33
|
+
"@next2d/net": "3.0.0",
|
|
34
|
+
"@next2d/text": "3.0.0",
|
|
35
|
+
"@next2d/ui": "3.0.0",
|
|
36
|
+
"@next2d/render-queue": "3.0.0"
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -14,6 +14,9 @@ export const execute = (canvas, ratio = 1) => {
|
|
|
14
14
|
style += "-webkit-tap-highlight-color: rgba(0,0,0,0);";
|
|
15
15
|
style += "backface-visibility: hidden;";
|
|
16
16
|
style += "touch-action: none;";
|
|
17
|
+
style += "user-select: none;";
|
|
18
|
+
style += "-webkit-user-select: none;";
|
|
19
|
+
style += "-webkit-touch-callout: none;";
|
|
17
20
|
if (ratio > 1) {
|
|
18
21
|
style += `transform: scale(${1 / ratio});`;
|
|
19
22
|
}
|
|
@@ -4,6 +4,12 @@ import { Event } from "@next2d/events";
|
|
|
4
4
|
import { $cacheStore } from "@next2d/cache";
|
|
5
5
|
import { execute as playerRenderingPostMessageService } from "../service/PlayerRenderingPostMessageService";
|
|
6
6
|
import { execute as playerRemoveCachePostMessageService } from "../service/PlayerRemoveCachePostMessageService";
|
|
7
|
+
/**
|
|
8
|
+
* @private
|
|
9
|
+
* @constant
|
|
10
|
+
* @type {Event}
|
|
11
|
+
*/
|
|
12
|
+
const enterFrameEvent = new Event(Event.ENTER_FRAME);
|
|
7
13
|
/**
|
|
8
14
|
* @description Playerの定期処理
|
|
9
15
|
* Regular processing of Player
|
|
@@ -28,7 +34,7 @@ export const execute = (timestamp) => {
|
|
|
28
34
|
stage.$ticker();
|
|
29
35
|
// enter frame event
|
|
30
36
|
if (stage.hasEventListener(Event.ENTER_FRAME)) {
|
|
31
|
-
stage.dispatchEvent(
|
|
37
|
+
stage.dispatchEvent(enterFrameEvent);
|
|
32
38
|
}
|
|
33
39
|
// 描画情報を生成してworkerに送る
|
|
34
40
|
if (stage.changed) {
|