next2d-development-mcp 1.4.0 → 1.5.0

package/dist/references/player-overview.md

@@ -0,0 +1,210 @@
+# Next2D Player - 概要・アーキテクチャ
+
+## 目次
+
+1. [概要](#next2d-player)
+2. [レンダリングパイプライン](#レンダリングパイプライン)
+3. [DisplayListアーキテクチャ](#displaylistアーキテクチャ)
+4. [基本的な使い方](#基本的な使い方)
+
+---
+
+# Next2D Player
+
+Next2D Playerは、WebGL/WebGPUを用いた高速2Dレンダリングエンジンです。Flash Playerのような機能をWeb上で実現し、ベクター描画、Tweenアニメーション、テキスト、音声、動画など、さまざまな要素をサポートしています。
+
+## 主な特徴
+
+- **高速レンダリング**: WebGL/WebGPUを活用した高速2D描画
+- **マルチプラットフォーム**: デスクトップからモバイルまで対応
+- **豊富なフィルター**: Blur、DropShadow、Glow、Bevelなど多数のフィルターをサポート
+
+## レンダリングパイプライン
+
+Next2D Playerの高速レンダリングを実現するパイプラインの全体像です。
+
+```mermaid
+flowchart TB
+    %% Main Drawing Flow Chart
+    subgraph MainFlow["描画フローチャート - メインレンダリングパイプライン"]
+        direction TB
+
+        subgraph Inputs["表示オブジェクト"]
+            Shape["Shape<br/>(Bitmap/Vector)"]
+            TextField["TextField<br/>(canvas2d)"]
+            Video["Video Element"]
+        end
+
+        Shape --> MaskCheck
+        TextField --> MaskCheck
+        Video --> MaskCheck
+
+        MaskCheck{"マスク<br/>レンダリング?"}
+
+        MaskCheck -->|YES| DirectRender["直接レンダリング"]
+        DirectRender -->|drawArrays| FinalRender
+
+        MaskCheck -->|NO| CacheCheck1{"キャッシュ<br/>あり?"}
+
+        CacheCheck1 -->|NO| TextureAtlas["テクスチャアトラス<br/>(二分木パッキング)"]
+        TextureAtlas --> Coordinates
+
+        CacheCheck1 -->|YES| Coordinates["座標データベース<br/>(x, y, w, h)"]
+
+        Coordinates --> FilterBlendCheck{"フィルター or<br/>ブレンド?"}
+
+        FilterBlendCheck -->|NO| MainArrays
+        FilterBlendCheck -->|YES| NeedCache{"キャッシュ<br/>あり?"}
+
+        NeedCache -->|NO| CacheRender["キャッシュにレンダリング"]
+        CacheRender --> TextureCache
+        NeedCache -->|YES| TextureCache["テクスチャキャッシュ"]
+
+        TextureCache -->|drawArrays| FinalRender
+
+        MainArrays["インスタンス配列<br/>━━━━━━━━━━━━━━━<br/>matrix<br/>colorTransform<br/>Coordinates<br/>━━━━━━━━━━━━━━━<br/><b>バッチレンダリング</b>"]
+
+        MainArrays -->|drawArraysInstanced<br/><b>複数オブジェクトを1回で描画</b>| FinalRender["最終レンダリング"]
+
+        FinalRender -->|60fps| MainFramebuffer["メインフレームバッファ<br/>(ディスプレイ)"]
+    end
+
+    %% Branch Flow for Filter/Blend/Mask
+    subgraph BranchFlow["フィルター/ブレンド/マスク - 分岐処理"]
+        direction TB
+
+        subgraph FilterInputs["表示オブジェクト"]
+            Shape2["Shape<br/>(Bitmap/Vector)"]
+            TextField2["TextField<br/>(canvas2d)"]
+            Video2["Video Element"]
+        end
+
+        Shape2 --> CacheCheck2
+        TextField2 --> CacheCheck2
+        Video2 --> CacheCheck2
+
+        CacheCheck2{"キャッシュ<br/>あり?"}
+
+        CacheCheck2 -->|NO| EffectRender["エフェクトレンダリング"]
+        CacheCheck2 -->|YES| BranchArrays
+        EffectRender --> BranchArrays
+
+        BranchArrays["インスタンス配列<br/>━━━━━━━━━━━━━━━<br/>matrix<br/>colorTransform<br/>Coordinates<br/>━━━━━━━━━━━━━━━<br/><b>バッチレンダリング</b>"]
+
+        BranchArrays -->|drawArraysInstanced<br/><b>複数オブジェクトを1回で描画</b>| BranchRender["エフェクト結果"]
+
+        BranchRender -->|filter/blend| TextureCache
+    end
+
+    %% Connections between flows
+    FilterBlendCheck -.->|"分岐フローを<br/>トリガー"| BranchFlow
+    BranchArrays -.->|"レンダリング情報<br/>(座標)"| MainArrays
+```
+
+### パイプラインの特徴
+
+- **バッチレンダリング**: 複数のオブジェクトを1回のGPUコールで描画
+- **テクスチャキャッシュ**: フィルターやブレンド効果を効率的に処理
+- **二分木パッキング**: テクスチャアトラスで最適なメモリ使用
+- **60fps描画**: 高フレームレートでのスムーズなアニメーション
+
+## DisplayListアーキテクチャ
+
+Next2D Playerは、Flash Playerと同様のDisplayListアーキテクチャを採用しています。
+
+### 主要クラス階層
+
+```
+DisplayObject (基底クラス)
+├── InteractiveObject
+│   ├── DisplayObjectContainer
+│   │   ├── Sprite
+│   │   ├── MovieClip
+│   │   └── Stage
+│   └── TextField
+├── Shape
+├── Video
+└── Bitmap
+```
+
+### DisplayObjectContainer
+
+子オブジェクトを持つことができるコンテナクラス：
+
+- `addChild(child)`: 子要素を最前面に追加
+- `addChildAt(child, index)`: 指定インデックスに子要素を追加
+- `removeChild(child)`: 子要素を削除
+- `getChildAt(index)`: インデックスから子要素を取得
+- `getChildByName(name)`: 名前から子要素を取得
+
+### MovieClip
+
+タイムラインアニメーションを持つDisplayObject：
+
+- `play()`: タイムラインを再生
+- `stop()`: タイムラインを停止
+- `gotoAndPlay(frame)`: 指定フレームに移動して再生
+- `gotoAndStop(frame)`: 指定フレームに移動して停止
+- `currentFrame`: 現在のフレーム番号
+- `totalFrames`: 総フレーム数
+
+## 基本的な使い方
+
+```typescript
+const { MovieClip } = next2d.display;
+const { DropShadowFilter } = next2d.filters;
+
+// ルートMovieClipを作成
+const root = await next2d.createRootMovieClip(800, 600, 60, {
+    tagId: "container",
+    bgColor: "#ffffff"
+});
+
+// MovieClipの作成
+const mc = new MovieClip();
+root.addChild(mc);
+
+// 位置とサイズの設定
+mc.x = 100;
+mc.y = 100;
+mc.scaleX = 2;
+mc.scaleY = 2;
+mc.rotation = 45;
+
+// フィルターの適用
+mc.filters = [
+    new DropShadowFilter(4, 45, 0x000000, 0.5)
+];
+```
+
+## JSONデータの読み込み
+
+Open Animation Toolで作成したJSONファイルを読み込んで描画：
+
+```typescript
+const { Loader } = next2d.display;
+const { URLRequest } = next2d.net;
+
+const loader = new Loader();
+await loader.load(new URLRequest("animation.json"));
+
+// 読み込み完了後、直接contentにアクセス
+const mc = loader.content;
+stage.addChild(mc);
+```
+
+## 関連ドキュメント
+
+### 表示オブジェクト
+- [DisplayObject](/ja/reference/player/display-object) - 全ての表示オブジェクトの基底クラス
+- [MovieClip](/ja/reference/player/movie-clip) - タイムラインアニメーション
+- [Sprite](/ja/reference/player/sprite) - グラフィックス描画とインタラクション
+- [Shape](/ja/reference/player/shape) - 軽量なベクター描画
+- [TextField](/ja/reference/player/text-field) - テキスト表示と入力
+- [Video](/ja/reference/player/video) - 動画再生
+
+### システム
+- [イベントシステム](/ja/reference/player/events) - マウス、キーボード、タッチイベント
+- [フィルター](/ja/reference/player/filters) - Blur、DropShadow、Glowなど
+- [サウンド](/ja/reference/player/sound) - 音声再生とサウンドエフェクト
+- [Tweenアニメーション](/ja/reference/player/tween) - プログラムによるアニメーション

package/dist/references/player-tween.md

@@ -0,0 +1,278 @@
+# Next2D Player - Tweenアニメーション
+
+Next2D Playerでは、`@next2d/ui`パッケージのTweenシステムを使用して、プログラムによるアニメーションを実装できます。位置、サイズ、透明度などのプロパティを滑らかに変化させることができます。
+
+---
+
+# Tweenの基本概念
+
+```mermaid
+flowchart LR
+    Start["開始値"] -->|イージング関数| Progress["進行度 0→1"]
+    Progress --> End["終了値"]
+
+    subgraph Easing["イージング"]
+        Linear["linear"]
+        InQuad["inQuad"]
+        OutQuad["outQuad"]
+        InOutQuad["inOutQuad"]
+    end
+```
+
+---
+
+# Tween.add()
+
+`Tween.add()`メソッドでアニメーション用の`Job`インスタンスを作成します。
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+const job = Tween.add(
+    target,    // アニメーション対象オブジェクト
+    from,      // 開始プロパティ値
+    to,        // 終了プロパティ値
+    delay,     // 遅延時間（秒、デフォルト: 0）
+    duration,  // アニメーション時間（秒、デフォルト: 1）
+    ease       // イージング関数（デフォルト: linear）
+);
+
+// アニメーションを開始
+job.start();
+```
+
+## パラメータ
+
+| パラメータ | 型 | デフォルト | 説明 |
+|-----------|------|----------|------|
+| `target` | any | - | アニメーション対象オブジェクト |
+| `from` | object | - | 開始プロパティ値 |
+| `to` | object | - | 終了プロパティ値 |
+| `delay` | number | 0 | アニメーション開始前の遅延（秒） |
+| `duration` | number | 1 | アニメーション継続時間（秒） |
+| `ease` | Function \| null | null | イージング関数（デフォルトはlinear） |
+
+---
+
+# Job クラス
+
+Jobクラスは個別のアニメーションジョブを管理します。EventDispatcherを継承しています。
+
+## メソッド
+
+| メソッド | 戻り値 | 説明 |
+|---------|--------|------|
+| `start()` | void | アニメーションを開始します |
+| `stop()` | void | アニメーションを停止します |
+| `chain(nextJob: Job \| null)` | Job \| null | このジョブの完了後に別のジョブを連結します |
+
+## プロパティ
+
+| プロパティ | 型 | 説明 |
+|-----------|------|------|
+| `target` | any | 対象オブジェクト |
+| `from` | object | 開始値 |
+| `to` | object | 終了値 |
+| `delay` | number | 遅延時間 |
+| `duration` | number | 継続時間 |
+| `ease` | Function | イージング関数 |
+| `currentTime` | number | 現在のアニメーション時間 |
+| `nextJob` | Job \| null | 次の連結ジョブ |
+
+## イベント
+
+| イベント | 説明 |
+|----------|------|
+| `enterFrame` | 各アニメーションフレームで発行 |
+| `complete` | アニメーション完了時に発行 |
+
+---
+
+# イージング関数
+
+`Easing`クラスは、11種類のイージングタイプでIn、Out、InOutのバリエーションを含む32種類のイージング関数を提供します。
+
+| カテゴリ | 関数 |
+|---------|------|
+| Linear | `Easing.linear` |
+| Quadratic | `Easing.inQuad` / `outQuad` / `inOutQuad` |
+| Cubic | `Easing.inCubic` / `outCubic` / `inOutCubic` |
+| Quartic | `Easing.inQuart` / `outQuart` / `inOutQuart` |
+| Quintic | `Easing.inQuint` / `outQuint` / `inOutQuint` |
+| Sinusoidal | `Easing.inSine` / `outSine` / `inOutSine` |
+| Exponential | `Easing.inExpo` / `outExpo` / `inOutExpo` |
+| Circular | `Easing.inCirc` / `outCirc` / `inOutCirc` |
+| Elastic | `Easing.inElastic` / `outElastic` / `inOutElastic` |
+| Back | `Easing.inBack` / `outBack` / `inOutBack` |
+| Bounce | `Easing.inBounce` / `outBounce` / `inOutBounce` |
+
+---
+
+# 使用例
+
+## 基本的な移動アニメーション
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+const job = Tween.add(
+    sprite,
+    { x: 0, y: 100 },
+    { x: 400, y: 100 },
+    0, 1,
+    Easing.outQuad
+);
+
+job.start();
+```
+
+## 複数プロパティの同時アニメーション
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+// 移動 + 拡大 + フェードイン
+const job = Tween.add(
+    sprite,
+    { x: 0, y: 0, scaleX: 1, scaleY: 1, alpha: 0 },
+    { x: 200, y: 150, scaleX: 2, scaleY: 2, alpha: 1 },
+    0, 0.5,
+    Easing.outCubic
+);
+
+job.start();
+```
+
+## アニメーションの連結 (chain)
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+const job1 = Tween.add(sprite, { x: 0 }, { x: 100 }, 0, 1, Easing.outQuad);
+const job2 = Tween.add(sprite, { x: 100 }, { x: 200 }, 0, 1, Easing.inQuad);
+
+job1.chain(job2);
+job1.start();
+```
+
+## 遅延付きアニメーション
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+// 0.5秒遅延後に1秒かけてフェードアウト
+const job = Tween.add(sprite, { alpha: 1 }, { alpha: 0 }, 0.5, 1, Easing.inQuad);
+job.start();
+```
+
+## イベントの活用
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+const job = Tween.add(sprite, { x: 0 }, { x: 300 }, 0, 2, Easing.inOutQuad);
+
+job.addEventListener("enterFrame", (event) => {
+    console.log("進行中:", job.currentTime);
+});
+
+job.addEventListener("complete", (event) => {
+    console.log("アニメーション完了!");
+});
+
+job.start();
+```
+
+## キャラクタージャンプ
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+function jump(character) {
+    const startY = character.y;
+    const jumpHeight = 100;
+
+    const upJob = Tween.add(
+        character,
+        { y: startY },
+        { y: startY - jumpHeight },
+        0, 0.3,
+        Easing.outQuad
+    );
+
+    const downJob = Tween.add(
+        character,
+        { y: startY - jumpHeight },
+        { y: startY },
+        0, 0.3,
+        Easing.inQuad
+    );
+
+    upJob.chain(downJob);
+    upJob.start();
+}
+```
+
+## UI表示アニメーション
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+function showPopup(popup) {
+    popup.scaleX = 0;
+    popup.scaleY = 0;
+    popup.alpha = 0;
+
+    const job = Tween.add(
+        popup,
+        { scaleX: 0, scaleY: 0, alpha: 0 },
+        { scaleX: 1, scaleY: 1, alpha: 1 },
+        0, 0.4,
+        Easing.outBack
+    );
+
+    job.start();
+}
+
+function hidePopup(popup) {
+    const job = Tween.add(
+        popup,
+        { scaleX: 1, scaleY: 1, alpha: 1 },
+        { scaleX: 0, scaleY: 0, alpha: 0 },
+        0, 0.2,
+        Easing.inQuad
+    );
+
+    job.addEventListener("complete", () => {
+        popup.visible = false;
+    });
+
+    job.start();
+}
+```
+
+## コイン取得エフェクト
+
+```typescript
+const { Tween, Easing } = next2d.ui;
+
+function coinCollectEffect(coin) {
+    const job = Tween.add(
+        coin,
+        { y: coin.y, alpha: 1, scaleX: 1, scaleY: 1 },
+        { y: coin.y - 50, alpha: 0, scaleX: 0.5, scaleY: 0.5 },
+        0, 0.5,
+        Easing.outQuad
+    );
+
+    job.addEventListener("enterFrame", () => {
+        coin.rotation += 15;
+    });
+
+    job.addEventListener("complete", () => {
+        coin.parent?.removeChild(coin);
+    });
+
+    job.start();
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next2d-development-mcp",
   "displayName": "Next2D Development MCP",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "MCP server for Next2D application development assistance",
   "type": "module",
   "author": "Toshiyuki Ienaga <ienaga@next2d.app>",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^25.9.3",
-    "@types/vscode": "^1.120.0",
+    "@types/vscode": "^1.115.0",
     "@typescript-eslint/eslint-plugin": "^8.61.0",
     "@typescript-eslint/parser": "^8.61.0",
     "@vscode/vsce": "^3.9.2",