next2d-development-mcp 1.4.0 → 1.5.0

package/dist/references/player-events.md

@@ -0,0 +1,308 @@
+# Next2D Player - イベントシステム
+
+Next2D Playerは、W3C DOMイベントモデルと同様の3フェーズイベントフロー機構を採用しています。
+
+---
+
+# EventDispatcher
+
+すべてのイベント発行可能なオブジェクトの基底クラスです。
+
+## addEventListener(type, listener, useCapture, priority)
+
+イベントリスナーを登録します。
+
+```typescript
+const { PointerEvent } = next2d.events;
+
+displayObject.addEventListener(PointerEvent.POINTER_DOWN, (event) => {
+    console.log("ポインターが押されました");
+});
+
+// キャプチャフェーズで受け取る
+displayObject.addEventListener(PointerEvent.POINTER_DOWN, handler, true);
+
+// 優先度を指定
+displayObject.addEventListener(PointerEvent.POINTER_DOWN, handler, false, 10);
+```
+
+## removeEventListener(type, listener, useCapture)
+
+```typescript
+displayObject.removeEventListener(PointerEvent.POINTER_DOWN, handler);
+```
+
+## removeAllEventListener(type, useCapture)
+
+```typescript
+displayObject.removeAllEventListener(PointerEvent.POINTER_DOWN);
+```
+
+## hasEventListener(type) / willTrigger(type)
+
+```typescript
+if (displayObject.hasEventListener(PointerEvent.POINTER_DOWN)) { /* ... */ }
+if (displayObject.willTrigger(PointerEvent.POINTER_DOWN)) { /* ... */ }
+```
+
+## dispatchEvent(event)
+
+```typescript
+const { Event } = next2d.events;
+const event = new Event("customEvent");
+displayObject.dispatchEvent(event);
+```
+
+---
+
+# Event クラス
+
+## プロパティ
+
+| プロパティ | 型 | 説明 |
+|-----------|------|------|
+| `type` | String | イベントタイプ |
+| `target` | Object | イベント発行元 |
+| `currentTarget` | Object | 現在のリスナー登録先 |
+| `eventPhase` | Number | イベントフェーズ |
+| `bubbles` | Boolean | バブリングするか |
+
+## メソッド
+
+| メソッド | 説明 |
+|----------|------|
+| `stopPropagation()` | 伝播を停止 |
+| `stopImmediatePropagation()` | 伝播を即座に停止 |
+
+---
+
+# イベント定数の使用
+
+イベントを `addEventListener` で登録する際は、文字列リテラルではなく必ず定数を使用する。
+
+```typescript
+// NG: 文字列リテラル
+sprite.addEventListener("pointerup", handler);
+
+// OK: 定数を使用
+sprite.addEventListener(PointerEvent.POINTER_UP, handler);
+```
+
+**理由:** 定数を使用することで、タイプミスの防止、IDEによる補完・型チェック、リファクタリング時の安全性が得られる。
+
+## 全イベント定数一覧
+
+| クラス | 定数 | 文字列値 | 説明 |
+|--------|------|----------|------|
+| `PointerEvent` | `POINTER_DOWN` | `"pointerdown"` | ポインター押下 |
+| `PointerEvent` | `POINTER_UP` | `"pointerup"` | ポインター解放 |
+| `PointerEvent` | `POINTER_MOVE` | `"pointermove"` | ポインター移動 |
+| `PointerEvent` | `POINTER_OVER` | `"pointerover"` | ポインター進入 |
+| `PointerEvent` | `POINTER_OUT` | `"pointerout"` | ポインター退出 |
+| `PointerEvent` | `POINTER_LEAVE` | `"pointerleave"` | ポインター離脱 |
+| `PointerEvent` | `POINTER_CANCEL` | `"pointercancel"` | ポインターキャンセル |
+| `PointerEvent` | `DOUBLE_CLICK` | `"dblclick"` | ダブルクリック |
+| `KeyboardEvent` | `KEY_DOWN` | `"keydown"` | キー押下 |
+| `KeyboardEvent` | `KEY_UP` | `"keyup"` | キー解放 |
+| `FocusEvent` | `FOCUS_IN` | `"focusin"` | フォーカス取得 |
+| `FocusEvent` | `FOCUS_OUT` | `"focusout"` | フォーカス喪失 |
+| `WheelEvent` | `WHEEL` | `"wheel"` | ホイール操作 |
+| `VideoEvent` | `PLAY` | `"play"` | 再生リクエスト |
+| `VideoEvent` | `PLAYING` | `"playing"` | 再生開始 |
+| `VideoEvent` | `PAUSE` | `"pause"` | 一時停止 |
+| `VideoEvent` | `SEEK` | `"seek"` | シーク操作 |
+| `JobEvent` | `UPDATE` | `"update"` | プロパティ更新 |
+| `JobEvent` | `STOP` | `"stop"` | ジョブ停止 |
+| `Event` | `COMPLETE` | `"complete"` | 処理完了（Tween/Loader） |
+| `Event` | `ENTER_FRAME` | `"enterframe"` | 毎フレーム |
+| `Event` | `ADDED` | `"added"` | コンテナに追加 |
+| `Event` | `ADDED_TO_STAGE` | `"addedtostage"` | Stageに追加 |
+| `Event` | `REMOVED` | `"removed"` | コンテナから削除 |
+| `Event` | `REMOVED_FROM_STAGE` | `"removedfromstage"` | Stageから削除 |
+| `Event` | `IO_ERROR` | `"ioerror"` | IOエラー |
+| `Event` | `HTTP_STATUS` | `"httpstatus"` | HTTPステータス受信 |
+
+## 使用例
+
+```typescript
+import { PointerEvent, KeyboardEvent, Event } from "@next2d/events";
+
+// ポインターイベント
+button.addEventListener(PointerEvent.POINTER_DOWN, onPointerDown);
+button.addEventListener(PointerEvent.POINTER_UP,   onPointerUp);
+
+// キーボードイベント
+stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
+
+// タイムラインイベント
+movieClip.addEventListener(Event.ENTER_FRAME, onEnterFrame);
+```
+
+## 定数がないイベント
+
+一部のイベント（表示リスト、タイムライン、ロード関連など）は `Event` クラスの文字列リテラルを使用する。
+
+```typescript
+import { Event } from "@next2d/events";
+
+sprite.addEventListener(Event.ADDED_TO_STAGE, onAdded);
+movieClip.addEventListener(Event.ENTER_FRAME, onFrame);
+```
+
+---
+
+# 標準イベントタイプ
+
+## 表示リスト関連
+
+| イベント | 説明 |
+|----------|------|
+| `added` | DisplayObjectContainerに追加された |
+| `addedToStage` | Stageに追加された |
+| `removed` | DisplayObjectContainerから削除された |
+| `removedFromStage` | Stageから削除された |
+
+## タイムライン関連
+
+| イベント | 説明 |
+|----------|------|
+| `enterFrame` | 各フレームで発生 |
+| `frameConstructed` | フレーム構築完了 |
+| `exitFrame` | フレーム離脱時 |
+
+## ロード関連
+
+| イベント | 説明 |
+|----------|------|
+| `complete` | ロード完了 |
+| `progress` | ロード進捗 |
+| `ioError` | IOエラー |
+| `httpStatus` | HTTPステータス受信 |
+
+---
+
+# ポインターイベント
+
+PointerEventはマウス、ペン、タッチなどのポインターデバイスの操作を統一的に処理します。
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `pointerDown` | `PointerEvent.POINTER_DOWN` | ボタンの押下開始 |
+| `pointerUp` | `PointerEvent.POINTER_UP` | ボタンの解放 |
+| `pointerMove` | `PointerEvent.POINTER_MOVE` | ポインター座標の変化 |
+| `pointerOver` | `PointerEvent.POINTER_OVER` | ポインターがヒットテスト境界に入った |
+| `pointerOut` | `PointerEvent.POINTER_OUT` | ポインターがヒットテスト境界を出た |
+| `pointerLeave` | `PointerEvent.POINTER_LEAVE` | ポインターが要素領域を離れた |
+| `pointerCancel` | `PointerEvent.POINTER_CANCEL` | ポインター操作がキャンセルされた |
+| `doubleClick` | `PointerEvent.DOUBLE_CLICK` | ダブルクリック/タップが発生 |
+
+```typescript
+const { PointerEvent } = next2d.events;
+
+sprite.addEventListener(PointerEvent.POINTER_DOWN, (event) => {
+    console.log("ポインターダウン:", event.localX, event.localY);
+});
+
+sprite.addEventListener(PointerEvent.POINTER_MOVE, (event) => {
+    console.log("ポインター移動:", event.stageX, event.stageY);
+});
+```
+
+---
+
+# キーボードイベント
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `keyDown` | `KeyboardEvent.KEY_DOWN` | キー押下 |
+| `keyUp` | `KeyboardEvent.KEY_UP` | キー解放 |
+
+```typescript
+const { KeyboardEvent } = next2d.events;
+
+stage.addEventListener(KeyboardEvent.KEY_DOWN, (event) => {
+    console.log("キーコード:", event.keyCode);
+    switch (event.keyCode) {
+        case 37: player.x -= 10; break;  // 左矢印
+        case 39: player.x += 10; break;  // 右矢印
+    }
+});
+```
+
+---
+
+# フォーカスイベント
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `focusIn` | `FocusEvent.FOCUS_IN` | フォーカスを受け取った |
+| `focusOut` | `FocusEvent.FOCUS_OUT` | フォーカスを失った |
+
+---
+
+# ホイールイベント
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `wheel` | `WheelEvent.WHEEL` | マウスホイールが回転した |
+
+---
+
+# ビデオイベント
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `play` | `VideoEvent.PLAY` | 再生がリクエストされた |
+| `playing` | `VideoEvent.PLAYING` | 再生が開始された |
+| `pause` | `VideoEvent.PAUSE` | 一時停止された |
+| `seek` | `VideoEvent.SEEK` | シーク操作 |
+
+---
+
+# ジョブイベント
+
+Tweenアニメーション用のイベントです。
+
+| イベント | 定数 | 説明 |
+|----------|------|------|
+| `update` | `JobEvent.UPDATE` | プロパティが更新された |
+| `stop` | `JobEvent.STOP` | ジョブが停止した |
+
+---
+
+# カスタムイベント
+
+```typescript
+const { Event } = next2d.events;
+
+// カスタムイベントの定義
+const customEvent = new Event("gameOver", true, true);
+
+// イベントの発行
+gameManager.dispatchEvent(customEvent);
+
+// イベントのリッスン
+gameManager.addEventListener("gameOver", (event) => {
+    showGameOverScreen();
+});
+```
+
+---
+
+# イベントの伝播
+
+イベントは3つのフェーズで伝播します：
+
+1. **キャプチャフェーズ**: rootからtargetへ（eventPhase = 1）
+2. **ターゲットフェーズ**: targetで処理（eventPhase = 2）
+3. **バブリングフェーズ**: targetからrootへ（eventPhase = 3）
+
+```typescript
+const { PointerEvent } = next2d.events;
+
+// キャプチャフェーズで処理
+parent.addEventListener(PointerEvent.POINTER_DOWN, handler, true);
+
+// バブリングフェーズで処理（デフォルト）
+child.addEventListener(PointerEvent.POINTER_DOWN, handler, false);
+```

package/dist/references/player-filters.md

@@ -0,0 +1,338 @@
+# Next2D Player - フィルター
+
+Next2D Playerは、DisplayObjectに適用できる様々なビジュアルフィルターを提供しています。
+
+## フィルターの適用方法
+
+```typescript
+const { Sprite } = next2d.display;
+const { BlurFilter, DropShadowFilter, GlowFilter } = next2d.filters;
+
+const sprite = new Sprite();
+
+// 単一のフィルター
+sprite.filters = [new BlurFilter(4, 4)];
+
+// 複数のフィルター
+sprite.filters = [
+    new DropShadowFilter(4, 45, 0x000000, 0.5),
+    new GlowFilter(0xff0000, 1, 8, 8)
+];
+
+// フィルターの削除
+sprite.filters = null;
+```
+
+## 利用可能なフィルター一覧
+
+| フィルター | 説明 |
+|-----------|------|
+| BlurFilter | ぼかし効果 |
+| DropShadowFilter | ドロップシャドウ効果 |
+| GlowFilter | グロー効果 |
+| BevelFilter | ベベル効果 |
+| ColorMatrixFilter | カラーマトリックス変換 |
+| ConvolutionFilter | 畳み込み効果 |
+| DisplacementMapFilter | 変位マップ効果 |
+| GradientBevelFilter | グラデーションベベル効果 |
+| GradientGlowFilter | グラデーショングロー効果 |
+
+---
+
+# BlurFilter
+
+ぼかし効果を適用します。
+
+```typescript
+new BlurFilter(blurX, blurY, quality);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+
+---
+
+# DropShadowFilter
+
+ドロップシャドウ効果を適用します。内側シャドウ、外側シャドウ、ノックアウトモードなどのスタイルオプションがあります。
+
+```typescript
+new DropShadowFilter(
+    distance, angle, color, alpha,
+    blurX, blurY, strength, quality,
+    inner, knockout, hideObject
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alpha | number | 1 | シャドウのアルファ透明度（0〜1） |
+| angle | number | 45 | シャドウの角度（-360〜360度） |
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| color | number | 0 | シャドウの色（0x000000〜0xFFFFFF） |
+| distance | number | 4 | シャドウのオフセット距離（-255〜255ピクセル） |
+| hideObject | boolean | false | オブジェクトを非表示にするかどうか |
+| inner | boolean | false | 内側シャドウにするかどうか |
+| knockout | boolean | false | ノックアウト効果を適用するかどうか |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+| strength | number | 1 | インプリントの強さ（0〜255） |
+
+---
+
+# GlowFilter
+
+グロー効果を適用します。
+
+```typescript
+new GlowFilter(
+    color, alpha, blurX, blurY,
+    strength, quality, inner, knockout
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alpha | number | 1 | グローのアルファ透明度（0〜1） |
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| color | number | 0 | グローの色（0x000000〜0xFFFFFF） |
+| inner | boolean | false | 内側グローにするかどうか |
+| knockout | boolean | false | ノックアウト効果を適用するかどうか |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+| strength | number | 1 | インプリントの強さ（0〜255） |
+
+---
+
+# BevelFilter
+
+ベベル効果を適用します。オブジェクトを3次元的に表現できます。
+
+```typescript
+new BevelFilter(
+    distance, angle, highlightColor, highlightAlpha,
+    shadowColor, shadowAlpha, blurX, blurY,
+    strength, quality, type, knockout
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| angle | number | 45 | ベベルの角度（-360〜360度） |
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| distance | number | 4 | ベベルのオフセット距離（-255〜255ピクセル） |
+| highlightAlpha | number | 1 | ハイライトのアルファ透明度（0〜1） |
+| highlightColor | number | 0xFFFFFF | ハイライトの色 |
+| knockout | boolean | false | ノックアウト効果を適用するかどうか |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+| shadowAlpha | number | 1 | シャドウのアルファ透明度（0〜1） |
+| shadowColor | number | 0 | シャドウの色 |
+| strength | number | 1 | インプリントの強さ（0〜255） |
+| type | string | "inner" | ベベルの配置（"inner"、"outer"、"full"） |
+
+---
+
+# ColorMatrixFilter
+
+4x5カラーマトリックス変換を適用します。明度、コントラスト、彩度、色相などを調整できます。
+
+```typescript
+new ColorMatrixFilter(matrix);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| matrix | number[] | 単位行列 | 4x5カラー変換用の20個の要素を持つ配列 |
+
+デフォルト値（単位行列）:
+```typescript
+[
+    1, 0, 0, 0, 0,
+    0, 1, 0, 0, 0,
+    0, 0, 1, 0, 0,
+    0, 0, 0, 1, 0
+]
+```
+
+---
+
+# ConvolutionFilter
+
+マトリックス畳み込みフィルター効果を適用します。ぼかし、エッジ検出、シャープ、エンボス、ベベルなどの効果を実現できます。
+
+```typescript
+new ConvolutionFilter(
+    matrixX, matrixY, matrix, divisor, bias,
+    preserveAlpha, clamp, color, alpha
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alpha | number | 0 | 範囲外ピクセルのアルファ透明度（0〜1） |
+| bias | number | 0 | マトリックス変換結果に加算するバイアス量 |
+| clamp | boolean | true | イメージをクランプするかどうか |
+| color | number | 0 | 範囲外ピクセルの置換色 |
+| divisor | number | 1 | マトリックス変換中の除数 |
+| matrix | number[] \| null | null | マトリックス変換に使用する値の配列 |
+| matrixX | number | 0 | マトリックスのX次元（列数、0〜15） |
+| matrixY | number | 0 | マトリックスのY次元（行数、0〜15） |
+| preserveAlpha | boolean | true | アルファチャンネルを維持するかどうか |
+
+---
+
+# DisplacementMapFilter
+
+BitmapDataオブジェクトのピクセル値を使用して、オブジェクトの変位を実行します。
+
+```typescript
+new DisplacementMapFilter(
+    bitmapBuffer, bitmapWidth, bitmapHeight,
+    mapPointX, mapPointY, componentX, componentY,
+    scaleX, scaleY, mode, color, alpha
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alpha | number | 0 | 範囲外変位のアルファ透明度（0〜1） |
+| bitmapBuffer | Uint8Array \| null | null | 変位マップデータを含むバッファ |
+| bitmapHeight | number | 0 | 変位マップデータの高さ |
+| bitmapWidth | number | 0 | 変位マップデータの幅 |
+| color | number | 0 | 範囲外変位に使用する色 |
+| componentX | number | 0 | X変位に使用するカラーチャンネル |
+| componentY | number | 0 | Y変位に使用するカラーチャンネル |
+| mapPointX | number | 0 | マップポイントのXオフセット |
+| mapPointY | number | 0 | マップポイントのYオフセット |
+| mode | string | "wrap" | フィルターモード（"wrap"、"clamp"、"ignore"、"color"） |
+| scaleX | number | 0 | X変位結果の乗数（-65535〜65535） |
+| scaleY | number | 0 | Y変位結果の乗数（-65535〜65535） |
+
+---
+
+# GradientBevelFilter
+
+グラデーションベベル効果を適用します。
+
+```typescript
+new GradientBevelFilter(
+    distance, angle, colors, alphas, ratios,
+    blurX, blurY, strength, quality, type, knockout
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alphas | number[] \| null | null | 各色に対応するアルファ値の配列（各値0〜1） |
+| angle | number | 45 | ベベルの角度（-360〜360度） |
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| colors | number[] \| null | null | グラデーションで使用するRGB 16進数カラー値の配列 |
+| distance | number | 4 | ベベルのオフセット距離（-255〜255ピクセル） |
+| knockout | boolean | false | ノックアウト効果を適用するかどうか |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+| ratios | number[] \| null | null | 色分布比率の配列（各値0〜255） |
+| strength | number | 1 | インプリントの強さ（0〜255） |
+| type | string | "inner" | ベベルの配置（"inner"、"outer"、"full"） |
+
+---
+
+# GradientGlowFilter
+
+グラデーショングロー効果を適用します。
+
+```typescript
+new GradientGlowFilter(
+    distance, angle, colors, alphas, ratios,
+    blurX, blurY, strength, quality, type, knockout
+);
+```
+
+| プロパティ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| alphas | number[] \| null | null | 各色に対応するアルファ値の配列（各値0〜1） |
+| angle | number | 45 | グローの角度（-360〜360度） |
+| blurX | number | 4 | 水平方向のぼかし量（0〜255） |
+| blurY | number | 4 | 垂直方向のぼかし量（0〜255） |
+| colors | number[] \| null | null | グラデーションで使用するRGB 16進数カラー値の配列 |
+| distance | number | 4 | グローのオフセット距離（-255〜255ピクセル） |
+| knockout | boolean | false | ノックアウト効果を適用するかどうか |
+| quality | number | 1 | ぼかしの実行回数（0〜15） |
+| ratios | number[] \| null | null | 色分布比率の配列（各値0〜255） |
+| strength | number | 1 | インプリントの強さ（0〜255） |
+| type | string | "outer" | グローの配置（"inner"、"outer"、"full"） |
+
+---
+
+# 使用例
+
+## ボタンのホバー効果
+
+```typescript
+const { GlowFilter } = next2d.filters;
+
+button.addEventListener("rollOver", () => {
+    button.filters = [new GlowFilter(0x00ff00, 0.8, 10, 10)];
+});
+
+button.addEventListener("rollOut", () => {
+    button.filters = null;
+});
+```
+
+## 影付きテキスト
+
+```typescript
+const { DropShadowFilter } = next2d.filters;
+
+textField.filters = [
+    new DropShadowFilter(2, 45, 0x000000, 0.5, 2, 2)
+];
+```
+
+## 複合フィルター
+
+```typescript
+const { GlowFilter, DropShadowFilter, BlurFilter } = next2d.filters;
+
+sprite.filters = [
+    new GlowFilter(0x0088ff, 0.8, 15, 15, 2, 1, false),
+    new DropShadowFilter(4, 45, 0x000000, 0.6, 4, 4),
+    new BlurFilter(1, 1, 1)
+];
+```
+
+## カラーマトリックスによるグレースケール
+
+```typescript
+const { ColorMatrixFilter } = next2d.filters;
+
+const grayscaleMatrix = [
+    0.299, 0.587, 0.114, 0, 0,
+    0.299, 0.587, 0.114, 0, 0,
+    0.299, 0.587, 0.114, 0, 0,
+    0,     0,     0,     1, 0
+];
+
+sprite.filters = [new ColorMatrixFilter(grayscaleMatrix)];
+```
+
+## グラデーショングロー効果
+
+```typescript
+const { GradientGlowFilter } = next2d.filters;
+
+sprite.filters = [
+    new GradientGlowFilter(
+        4, 45,
+        [0xff0000, 0x00ff00, 0x0000ff],
+        [1, 1, 1],
+        [0, 128, 255],
+        10, 10, 2, 1, "outer", false
+    )
+];
+```