@luna-editor/engine 0.4.5 → 0.5.1

package/dist/Player.js

@@ -49,7 +49,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         return (Object.assign(Object.assign({}, scenarioProp), { blocks: (_a = scenarioProp.blocks) !== null && _a !== void 0 ? _a : [] }));
     }, [scenarioProp]);
     // デフォルト値とマージ
-    const mergedSettings = Object.assign({ textSpeed: 80, autoPlaySpeed: 3, bgmVolume: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0, inactiveCharacterBrightness: 0.8 }, settings);
+    const mergedSettings = Object.assign({ textSpeed: 80, autoPlaySpeed: 3, bgmVolume: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0, inactiveCharacterBrightness: 0.8, characterSpacing: 0.2 }, settings);
     // プラグインからの設定更新ハンドラ
     const handleSettingsUpdate = useCallback((updatedSettings) => {
         var _a, _b;
@@ -645,6 +645,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         scenario.id,
         scenario.name,
     ]);
+    // プラグインからシナリオを中断するためのコールバック
+    const cancelScenario = useCallback(() => {
+        if (hasStarted && !state.isEnded) {
+            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
+            pluginManager.callHook("onScenarioEnd", {
+                scenarioId: scenario.id,
+                scenarioName: scenario.name || "scenario",
+            });
+        }
+    }, [hasStarted, state.isEnded, onScenarioCancelled, pluginManager, scenario.id, scenario.name]);
     const { handleNext: handleNextInternal, handlePrevious: handlePreviousInternal, togglePlay: _togglePlay, restart: _restartInternal, displayedCharacters, } = usePlayerLogic({
         state: Object.assign(Object.assign({}, state), { currentBlockIndex: actualBlockIndex }),
         setState: (newState) => {
@@ -918,18 +928,25 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                             touchAction: "none",
                             userSelect: "none",
                             WebkitUserSelect: "none",
-                        }, children: _jsx("div", { ref: aspectRatioContainerRef, className: "relative bg-white flex flex-col overflow-hidden", style: {
-                                aspectRatio: getAspectRatio(),
-                                width: `min(100vw, calc(100vh * ${getAspectRatioValue()}))`,
-                                height: `min(100vh, calc(100vw / ${getAspectRatioValue()}))`,
-                            }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, onEmotionEffectUpdate: handleEmotionEffectUpdate, children: _jsx(AudioProvider, { settings: {
+                        }, children: _jsx("div", { ref: aspectRatioContainerRef, className: "relative bg-white flex flex-col overflow-hidden", style: screenSizeProp
+                                ? {
+                                    // プレビューモード: 親コンテナ（固定論理サイズ）を100%で埋める
+                                    width: "100%",
+                                    height: "100%",
+                                }
+                                : {
+                                    // 通常再生: ビューポートに合わせてアスペクト比を維持
+                                    aspectRatio: getAspectRatio(),
+                                    width: `min(100vw, calc(100vh * ${getAspectRatioValue()}))`,
+                                    height: `min(100vh, calc(100vw / ${getAspectRatioValue()}))`,
+                                }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, onEmotionEffectUpdate: handleEmotionEffectUpdate, onCancelScenario: cancelScenario, children: _jsx(AudioProvider, { settings: {
                                         bgmVolume: mergedSettings.bgmVolume,
                                         seVolume: mergedSettings.seVolume,
                                         voiceVolume: mergedSettings.voiceVolume,
                                         effectVolume: mergedSettings.effectVolume,
                                         textSoundVolume: mergedSettings.textSoundVolume,
                                         muteAudio: (_b = mergedSettings.muteAudio) !== null && _b !== void 0 ? _b : false,
-                                    }, children: _jsxs(PlaybackTextProvider, { displayText: displayTextElement, isTyping: isTyping, children: [_jsxs("div", { className: "h-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.Background, pluginManager: pluginManager, fallback: BackgroundLayer }, "background"), _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, previousBlock: previousBlock, displayedCharacters: displayedCharacters }, "game-screen")] }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManager, fallback: DialogueBox }, "dialogue-box"), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "conversation_branch" && (_jsx(PluginComponentProvider, { type: ComponentType.ConversationBranch, pluginManager: pluginManager, fallback: ConversationBranchBox }, "conversation-branch")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "fullscreen_text" && (_jsx(FullscreenTextBox, { onComplete: () => handleNext("click") }, "fullscreen-text")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "click_wait" && (_jsx(ClickWaitIndicator, {}, "click-wait")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait" && (_jsx(TimeWaitIndicator, { duration: (_d = (_c = currentBlock.options) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 1, onComplete: () => handleNext("time_wait") }, "time-wait")), pluginManager
+                                    }, children: _jsxs(PlaybackTextProvider, { displayText: displayTextElement, isTyping: isTyping, children: [_jsxs("div", { className: "h-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.Background, pluginManager: pluginManager, fallback: BackgroundLayer }, "background"), _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, previousBlock: previousBlock, displayedCharacters: displayedCharacters, inactiveCharacterBrightness: mergedSettings.inactiveCharacterBrightness, characterSpacing: mergedSettings.characterSpacing }, "game-screen")] }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManager, fallback: DialogueBox }, "dialogue-box"), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "conversation_branch" && (_jsx(PluginComponentProvider, { type: ComponentType.ConversationBranch, pluginManager: pluginManager, fallback: ConversationBranchBox }, "conversation-branch")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "fullscreen_text" && (_jsx(FullscreenTextBox, { onComplete: () => handleNext("click") }, "fullscreen-text")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "click_wait" && (_jsx(ClickWaitIndicator, {}, "click-wait")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait" && (_jsx(TimeWaitIndicator, { duration: (_d = (_c = currentBlock.options) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 1, onComplete: () => handleNext("time_wait") }, "time-wait")), pluginManager
                                                             .getRegisteredComponents()
                                                             .filter((type) => type !== ComponentType.DialogueBox &&
                                                             type !== ComponentType.ConversationBranch)

package/dist/components/GameScreen.js

@@ -5,7 +5,7 @@ import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "re
  * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
  * これにより displayText の更新による不要な再描画を防止
  */
-export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.1, }) {
+export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.2, }) {
     var _a;
     // キャラクターごとのフェード状態を管理
     const [fadeStates, setFadeStates] = useState(new Map());
@@ -13,6 +13,142 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
     const fadeStartTimeRef = useRef(new Map());
     // 完了したフェードを追跡（同じpendingFadeで再度フェードしないため）
     const completedFadesRef = useRef(new Set());
+    // 登場・退場フェード管理
+    const ENTRANCE_FADE_DURATION = 300; // ms
+    const [entranceFades, setEntranceFades] = useState(new Map()); // objectId -> opacity (0-1)
+    const [exitingCharacters, setExitingCharacters] = useState([]);
+    const prevDisplayedCharIdsRef = useRef(new Set());
+    const entranceFadeStartRef = useRef(new Map());
+    const entranceAnimFrameRef = useRef(null);
+    const prevDisplayedCharsRef = useRef([]);
+    const pendingEntranceRef = useRef([]);
+    // 退場キャラの最終位置を保存（auto-layout再計算に依存しないため）
+    const exitPositionsRef = useRef(new Map());
+    // 登場・退場の検出
+    useEffect(() => {
+        var _a, _b;
+        const currentIds = new Set(displayedCharacters.map((c) => c.objectId));
+        const prevIds = prevDisplayedCharIdsRef.current;
+        const prevChars = prevDisplayedCharsRef.current;
+        // 初回レンダリング（前回データなし）はスキップ
+        if (prevIds.size === 0 && prevChars.length === 0) {
+            prevDisplayedCharIdsRef.current = currentIds;
+            prevDisplayedCharsRef.current = displayedCharacters;
+            return;
+        }
+        // キャラ構成が変わったか判定（IDセットまたはentityStateIdの変化）
+        const hasChange = currentIds.size !== prevIds.size ||
+            [...currentIds].some((id) => !prevIds.has(id)) ||
+            [...prevIds].some((id) => !currentIds.has(id));
+        if (!hasChange) {
+            prevDisplayedCharsRef.current = displayedCharacters;
+            return;
+        }
+        // キャラ構成が変わった場合: 前回の全キャラを退場、現在の全キャラを登場
+        // これにより同じキャラが含まれていても必ずフェードイン/アウトが発生
+        const allExitChars = [...prevChars];
+        const allEnterIds = [...currentIds];
+        // 退場フェードアウト開始
+        if (allExitChars.length > 0) {
+            const now = performance.now();
+            // 退場キャラの現在の位置を保存
+            for (const char of allExitChars) {
+                if (char.positionX !== null && char.positionY !== null) {
+                    exitPositionsRef.current.set(char.objectId, {
+                        x: (_a = char.positionX) !== null && _a !== void 0 ? _a : 0,
+                        y: (_b = char.positionY) !== null && _b !== void 0 ? _b : 0,
+                    });
+                }
+                else {
+                    const autoPositions = calculateAutoLayout(prevChars, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.2);
+                    const pos = autoPositions.get(char.objectId);
+                    if (pos) {
+                        exitPositionsRef.current.set(char.objectId, pos);
+                    }
+                }
+            }
+            setExitingCharacters((prev) => [...prev, ...allExitChars]);
+            const newFades = new Map(entranceFades);
+            for (const char of allExitChars) {
+                newFades.set(char.objectId, 1);
+                entranceFadeStartRef.current.set(char.objectId, now);
+            }
+            setEntranceFades(newFades);
+        }
+        // 登場フェードイン開始（退場完了を待ってから）
+        if (allEnterIds.length > 0) {
+            const delay = allExitChars.length > 0 ? ENTRANCE_FADE_DURATION + 300 : 0;
+            pendingEntranceRef.current = allEnterIds;
+            setTimeout(() => {
+                const ids = pendingEntranceRef.current;
+                if (ids.length === 0)
+                    return;
+                pendingEntranceRef.current = [];
+                const now = performance.now();
+                setEntranceFades((prev) => {
+                    const newFades = new Map(prev);
+                    for (const id of ids) {
+                        newFades.set(id, 0);
+                        entranceFadeStartRef.current.set(id, now);
+                    }
+                    return newFades;
+                });
+            }, delay);
+        }
+        prevDisplayedCharIdsRef.current = currentIds;
+        prevDisplayedCharsRef.current = displayedCharacters;
+    }, [displayedCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
+    // 登場・退場フェードのアニメーションループ
+    useEffect(() => {
+        if (entranceFades.size === 0)
+            return;
+        const exitingIds = new Set(exitingCharacters.map((c) => c.objectId));
+        const animate = () => {
+            const now = performance.now();
+            let hasActive = false;
+            const newFades = new Map();
+            const completedExitIds = [];
+            for (const [objectId] of entranceFades) {
+                const startTime = entranceFadeStartRef.current.get(objectId);
+                if (!startTime)
+                    continue;
+                const elapsed = now - startTime;
+                const progress = Math.min(elapsed / ENTRANCE_FADE_DURATION, 1);
+                const isExiting = exitingIds.has(objectId);
+                // 退場: 1→0, 登場: 0→1
+                const opacity = isExiting ? 1 - progress : progress;
+                newFades.set(objectId, opacity);
+                if (progress < 1) {
+                    hasActive = true;
+                }
+                else if (isExiting) {
+                    completedExitIds.push(objectId);
+                }
+            }
+            setEntranceFades(newFades);
+            // 退場フェード完了したキャラを削除
+            if (completedExitIds.length > 0) {
+                setExitingCharacters((prev) => prev.filter((c) => !completedExitIds.includes(c.objectId)));
+                // 保存位置もクリーンアップ
+                for (const id of completedExitIds) {
+                    exitPositionsRef.current.delete(id);
+                }
+            }
+            if (hasActive) {
+                entranceAnimFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                setEntranceFades(new Map());
+                entranceFadeStartRef.current.clear();
+            }
+        };
+        entranceAnimFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (entranceAnimFrameRef.current) {
+                cancelAnimationFrame(entranceAnimFrameRef.current);
+            }
+        };
+    }, [entranceFades.size > 0, exitingCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
     // コンテナサイズを取得（ResizeObserverで確実に取得）
     const containerRef = useRef(null);
     const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -59,7 +195,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             // character_entranceブロックのキャラクター画像（レイヤー情報含む）
             if (block.characters) {
                 block.characters.forEach((char) => {
-                    var _a, _b, _c, _d, _e, _f;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                     if (char.entityState.imageUrl || ((_a = char.baseBodyState) === null || _a === void 0 ? void 0 : _a.imageUrl)) {
                         const key = `${char.objectId}-${char.entityStateId}`;
                         images.set(key, {
@@ -75,6 +211,10 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                             baseBodyTranslateX: (_e = char.baseBodyState) === null || _e === void 0 ? void 0 : _e.translateX,
                             baseBodyTranslateY: (_f = char.baseBodyState) === null || _f === void 0 ? void 0 : _f.translateY,
                             layers: char.entityState.layers,
+                            // EntityStateのcrop値を優先、なければScenarioBlockCharacterのcrop値
+                            cropLeft: (_g = char.entityState.cropLeft) !== null && _g !== void 0 ? _g : char.cropLeft,
+                            cropRight: (_h = char.entityState.cropRight) !== null && _h !== void 0 ? _h : char.cropRight,
+                            cropFade: (_j = char.entityState.cropFade) !== null && _j !== void 0 ? _j : char.cropFade,
                         });
                     }
                 });
@@ -251,7 +391,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
     };
     // キャラクター描画用のヘルパー関数
     const renderCharacter = (image, displayedChar, isCurrentSpeaker, keyPrefix) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         // フェード状態を確認
         const fadeState = fadeStates.get(image.objectId);
         const isFadingIn = fadeState && fadeState.previousEntityStateId !== image.entityStateId;
@@ -266,8 +406,14 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             (pendingFade === null || pendingFade === void 0 ? void 0 : pendingFade.objectId) === image.objectId &&
             pendingFade.previousEntityStateId === image.entityStateId &&
             !completedFadesRef.current.has(pendingFade.fadeKey);
+        // 退場中のキャラクターか判定
+        const isExitingChar = exitingCharacters.some((c) => c.objectId === image.objectId);
         // 表示すべきかどうか
-        const shouldDisplay = displayedChar || isCurrentSpeaker || isFadingOut || isPendingFadeOut;
+        const shouldDisplay = displayedChar ||
+            isCurrentSpeaker ||
+            isFadingOut ||
+            isPendingFadeOut ||
+            isExitingChar;
         // opacityを決定
         let opacity = 1;
         if (isFadingIn || isPendingFadeIn) {
@@ -278,6 +424,15 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             // フェードアウト中
             opacity = fadeState ? 1 - fadeState.fadeProgress : 1;
         }
+        // 登場・退場フェード（character_entrance/exit時）
+        const entranceFadeOpacity = entranceFades.get(image.objectId);
+        if (entranceFadeOpacity !== undefined) {
+            opacity = entranceFadeOpacity;
+        }
+        // 登場待ち（退場フェード完了待ち）のキャラは非表示
+        if (pendingEntranceRef.current.includes(image.objectId)) {
+            opacity = 0;
+        }
         // 明るさを決定
         let brightness = 1;
         if (displayedCharacters.length > 0 && displayedChar) {
@@ -298,19 +453,31 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
         // 位置を決定（カスタム位置またはデフォルト位置）
         // 新座標系: x: -1=左見切れ, 0=中央, 1=右見切れ / y: -1=上見切れ, 0=中央, 1=下見切れ
         let finalPosition = { x: 0, y: 0 };
-        if (displayedChar) {
+        // 退場中のキャラは保存された位置情報を使用（移動しない）
+        const exitingChar = isExitingChar
+            ? exitingCharacters.find((c) => c.objectId === image.objectId)
+            : null;
+        const positionSource = displayedChar !== null && displayedChar !== void 0 ? displayedChar : exitingChar;
+        if (isExitingChar) {
+            // 退場中のキャラ: 保存された位置を使用（絶対に移動しない）
+            const savedPos = exitPositionsRef.current.get(image.objectId);
+            if (savedPos) {
+                finalPosition = savedPos;
+            }
+        }
+        else if (positionSource) {
             // カスタム位置が設定されている場合（詳細モード）
-            if (displayedChar.positionX !== null &&
-                displayedChar.positionY !== null) {
+            if (positionSource.positionX !== null &&
+                positionSource.positionY !== null) {
                 finalPosition = {
-                    x: (_e = displayedChar.positionX) !== null && _e !== void 0 ? _e : 0,
-                    y: (_f = displayedChar.positionY) !== null && _f !== void 0 ? _f : 0,
+                    x: (_e = positionSource.positionX) !== null && _e !== void 0 ? _e : 0,
+                    y: (_f = positionSource.positionY) !== null && _f !== void 0 ? _f : 0,
                 };
             }
             else {
                 // 簡易モード: 自動配置
-                const autoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.25);
-                const autoPos = autoPositions.get(displayedChar.objectId);
+                const autoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.2);
+                const autoPos = autoPositions.get(positionSource.objectId);
                 if (autoPos) {
                     finalPosition = autoPos;
                 }
@@ -346,19 +513,24 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
         // 位置をピクセルで計算（CharacterEditDialogと同じ）
         const leftPx = (leftPercent / 100) * containerSize.width;
         const topPx = (topPercent / 100) * containerSize.height;
-        return (_jsx("div", { style: {
-                position: "absolute",
-                visibility: shouldDisplay ? "visible" : "hidden",
-                opacity: opacity,
-                filter: `brightness(${brightness})`,
-                zIndex: zIndex,
+        // トリミング用のCSS mask計算
+        // displayedCharacterのcrop値を優先（キャラクター登場ブロックで設定）
+        const cLeft = (_k = (_j = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropLeft) !== null && _j !== void 0 ? _j : image.cropLeft) !== null && _k !== void 0 ? _k : 0;
+        const cRight = (_m = (_l = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropRight) !== null && _l !== void 0 ? _l : image.cropRight) !== null && _m !== void 0 ? _m : 0;
+        const cFade = (_p = (_o = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropFade) !== null && _o !== void 0 ? _o : image.cropFade) !== null && _p !== void 0 ? _p : 0;
+        const hasCrop = cLeft > 0 || cRight > 0;
+        // フェード量をpx基準値からコンテナ高さ比でスケーリング
+        const fadePx = hasCrop && cFade > 0 ? (cFade / 1080) * containerSize.height : 0;
+        const cropMaskStyle = hasCrop
+            ? {
+                WebkitMaskImage: `linear-gradient(to right, transparent ${cLeft * 100}%, black ${cLeft * 100 + (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, black ${(1 - cRight) * 100 - (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, transparent ${(1 - cRight) * 100}%)`,
+                maskImage: `linear-gradient(to right, transparent ${cLeft * 100}%, black ${cLeft * 100 + (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, black ${(1 - cRight) * 100 - (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, transparent ${(1 - cRight) * 100}%)`,
+            }
+            : {};
+        return (_jsx("div", { style: Object.assign({ position: "absolute", visibility: shouldDisplay ? "visible" : "hidden", opacity: opacity, filter: `brightness(${brightness})`, zIndex: zIndex, 
                 // CharacterEditDialogと完全に同じ: left/topを0にしてtransformで位置制御
                 // translate(%)は画像サイズに対する割合
-                left: 0,
-                top: 0,
-                transform: `translate(${leftPx}px, ${topPx}px) translate(${translateXPercent}%, ${translateYPercent}%)`,
-                transition: fadeState ? "none" : undefined,
-            }, "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", style: {
+                left: 0, top: 0, transform: `translate(${leftPx}px, ${topPx}px) translate(${translateXPercent}%, ${translateYPercent}%)`, transition: fadeState ? "none" : undefined }, cropMaskStyle), "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", style: {
                             height: `${baseHeight}px`,
                             width: "auto",
                             objectFit: "contain",
@@ -407,6 +579,27 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                         return renderCharacter(fallbackImage, char, false, "char");
                     }
                     return renderCharacter(image, char, false, "char");
+                }), exitingCharacters.map((char) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    const imageKey = `${char.objectId}-${char.entityStateId}`;
+                    const image = imageDataMap.get(imageKey);
+                    if (!image) {
+                        const fallbackImage = {
+                            url: (_b = (_a = char.entityState) === null || _a === void 0 ? void 0 : _a.imageUrl) !== null && _b !== void 0 ? _b : "",
+                            objectId: char.objectId,
+                            entityStateId: char.entityStateId,
+                            scale: (_c = char.entityState) === null || _c === void 0 ? void 0 : _c.scale,
+                            translateX: (_d = char.entityState) === null || _d === void 0 ? void 0 : _d.translateX,
+                            translateY: (_e = char.entityState) === null || _e === void 0 ? void 0 : _e.translateY,
+                            baseBodyUrl: (_f = char.baseBodyState) === null || _f === void 0 ? void 0 : _f.imageUrl,
+                            baseBodyScale: (_g = char.baseBodyState) === null || _g === void 0 ? void 0 : _g.scale,
+                            baseBodyTranslateX: (_h = char.baseBodyState) === null || _h === void 0 ? void 0 : _h.translateX,
+                            baseBodyTranslateY: (_j = char.baseBodyState) === null || _j === void 0 ? void 0 : _j.translateY,
+                            layers: (_k = char.entityState) === null || _k === void 0 ? void 0 : _k.layers,
+                        };
+                        return renderCharacter(fallbackImage, char, false, "exit");
+                    }
+                    return renderCharacter(image, char, false, "exit");
                 }), displayedCharacters.length === 0 &&
                     currentBlock.speakerId &&
                     currentBlock.speakerStateId && (_jsxs(_Fragment, { children: [(() => {

package/dist/contexts/DataContext.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import type { DataAPI, DataContext, EmotionEffectState, PlayerSettingsData } from "../sdk";
 type SettingsUpdater = (settings: Partial<PlayerSettingsData>) => void;
 type EmotionEffectUpdater = (state: EmotionEffectState | null) => void;
+type ScenarioCanceller = () => void;
 /**
  * データプロバイダー
  * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
@@ -19,6 +20,7 @@ export declare const DataProvider: React.FC<{
     data: DataContext;
     onSettingsUpdate?: SettingsUpdater;
     onEmotionEffectUpdate?: EmotionEffectUpdater;
+    onCancelScenario?: ScenarioCanceller;
     children: ReactNode;
 }>;
 /**

package/dist/contexts/DataContext.js

@@ -6,6 +6,7 @@ const DataRefContext = createContext(null);
 const SubscribersContext = createContext(null);
 const SettingsUpdaterContext = createContext(null);
 const EmotionEffectUpdaterContext = createContext(null);
+const ScenarioCancellerContext = createContext(null);
 /**
  * データプロバイダー
  * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
@@ -19,7 +20,7 @@ const EmotionEffectUpdaterContext = createContext(null);
  * </DataProvider>
  * ```
  */
-export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, children }) => {
+export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, onCancelScenario, children }) => {
     const subscribers = useMemo(() => new Map(), []);
     const previousDataRef = useRef(data);
     // 安定したデータ参照ホルダー（Context valueとして提供）
@@ -61,7 +62,7 @@ export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, ch
         }
         previousDataRef.current = data;
     }, [data, subscribers]);
-    return (_jsx(SubscribersContext.Provider, { value: subscribers, children: _jsx(SettingsUpdaterContext.Provider, { value: onSettingsUpdate !== null && onSettingsUpdate !== void 0 ? onSettingsUpdate : null, children: _jsx(EmotionEffectUpdaterContext.Provider, { value: onEmotionEffectUpdate !== null && onEmotionEffectUpdate !== void 0 ? onEmotionEffectUpdate : null, children: _jsx(DataRefContext.Provider, { value: dataRefHolder, children: _jsx(DataContextInstance.Provider, { value: data, children: children }) }) }) }) }));
+    return (_jsx(SubscribersContext.Provider, { value: subscribers, children: _jsx(SettingsUpdaterContext.Provider, { value: onSettingsUpdate !== null && onSettingsUpdate !== void 0 ? onSettingsUpdate : null, children: _jsx(EmotionEffectUpdaterContext.Provider, { value: onEmotionEffectUpdate !== null && onEmotionEffectUpdate !== void 0 ? onEmotionEffectUpdate : null, children: _jsx(ScenarioCancellerContext.Provider, { value: onCancelScenario !== null && onCancelScenario !== void 0 ? onCancelScenario : null, children: _jsx(DataRefContext.Provider, { value: dataRefHolder, children: _jsx(DataContextInstance.Provider, { value: data, children: children }) }) }) }) }) }));
 };
 /**
  * DataAPI実装を提供するフック
@@ -75,6 +76,7 @@ export function useDataAPI() {
     const subscribers = useContext(SubscribersContext);
     const settingsUpdater = useContext(SettingsUpdaterContext);
     const emotionEffectUpdater = useContext(EmotionEffectUpdaterContext);
+    const scenarioCanceller = useContext(ScenarioCancellerContext);
     // 注意: usePlaybackTextOptional()をここで呼ぶと、PlaybackTextContextの更新で
     // useDataAPIを使う全コンポーネントが再レンダリングされてしまう
     // 代わりに、displayTextが必要なコンポーネントはusePlaybackText()を直接使う
@@ -173,6 +175,14 @@ export function useDataAPI() {
             console.warn("updateEmotionEffect called but no emotion effect updater provided");
         }
     }, [emotionEffectUpdater]);
+    const cancelScenario = useCallback(() => {
+        if (scenarioCanceller) {
+            scenarioCanceller();
+        }
+        else {
+            console.warn("cancelScenario called but no scenario canceller provided");
+        }
+    }, [scenarioCanceller]);
     return useMemo(() => ({
         get,
         subscribe,
@@ -184,6 +194,7 @@ export function useDataAPI() {
         setVolumes,
         getBlockOption,
         updateEmotionEffect,
+        cancelScenario,
     }), [
         get,
         subscribe,
@@ -195,5 +206,6 @@ export function useDataAPI() {
         setVolumes,
         getBlockOption,
         updateEmotionEffect,
+        cancelScenario,
     ]);
 }

package/dist/data-api-types.d.ts

@@ -248,4 +248,10 @@ export interface DataAPI {
      * @param state - 更新する感情エフェクトの状態
      */
     updateEmotionEffect(state: EmotionEffectState | null): void;
+    /**
+     * シナリオを中断する
+     * プラグインのGameMenuなどから呼び出し、シナリオ再生を中断する。
+     * Player の onScenarioCancelled コールバックが発火される。
+     */
+    cancelScenario(): void;
 }

package/dist/hooks/usePlayerLogic.js

@@ -20,6 +20,9 @@ const calculateDisplayedCharacters = (blocks, currentIndex) => {
                                 positionY: char.positionY,
                                 zIndex: char.zIndex,
                                 scale: char.scale,
+                                cropLeft: char.cropLeft,
+                                cropRight: char.cropRight,
+                                cropFade: char.cropFade,
                                 object: char.object,
                                 entityState: char.entityState,
                                 // レイヤー機能用

package/dist/hooks/useSoundPlayer.js

@@ -40,13 +40,36 @@ export const useSoundPlayer = ({ soundBlocks, isFirstRenderComplete, muteAudio =
         isBGM,
         isVoice,
     ]);
-    // BGMを停止
+    const bgmFadeIntervalRef = useRef(null);
+    // BGMをフェードアウトして停止
     const stopBGM = useCallback(() => {
-        if (bgmRef.current) {
-            bgmRef.current.audio.pause();
-            bgmRef.current.audio.currentTime = 0;
-            bgmRef.current = null;
+        if (!bgmRef.current)
+            return;
+        // 既にフェード中なら前回のをクリア
+        if (bgmFadeIntervalRef.current) {
+            clearInterval(bgmFadeIntervalRef.current);
         }
+        const audio = bgmRef.current.audio;
+        const fadeDuration = 1000; // 1秒フェードアウト
+        const fadeSteps = 20;
+        const stepTime = fadeDuration / fadeSteps;
+        const volumeStep = audio.volume / fadeSteps;
+        let stepsRemaining = fadeSteps;
+        bgmFadeIntervalRef.current = setInterval(() => {
+            stepsRemaining--;
+            if (stepsRemaining <= 0) {
+                if (bgmFadeIntervalRef.current) {
+                    clearInterval(bgmFadeIntervalRef.current);
+                    bgmFadeIntervalRef.current = null;
+                }
+                audio.pause();
+                audio.currentTime = 0;
+                bgmRef.current = null;
+            }
+            else {
+                audio.volume = Math.max(0, volumeStep * stepsRemaining);
+            }
+        }, stepTime);
     }, []);
     // 特定のSEを停止
     const stopSE = useCallback((soundId) => {
@@ -185,6 +208,11 @@ export const useSoundPlayer = ({ soundBlocks, isFirstRenderComplete, muteAudio =
     // クリーンアップ（直接refにアクセスして依存配列の問題を回避）
     useEffect(() => {
         return () => {
+            // フェードintervalをクリア
+            if (bgmFadeIntervalRef.current) {
+                clearInterval(bgmFadeIntervalRef.current);
+                bgmFadeIntervalRef.current = null;
+            }
             // BGMを停止
             if (bgmRef.current) {
                 bgmRef.current.audio.pause();

package/dist/plugin/PluginManager.js

@@ -870,6 +870,9 @@ export class PluginManager {
                         console.warn("updateEmotionEffect callback is not registered. Make sure to call setEmotionEffectUpdaterCallback.");
                     }
                 },
+                cancelScenario: () => {
+                    throw new Error("DataAPI.cancelScenario() can only be called from within DataProvider context");
+                },
             },
         };
     }

package/dist/types.d.ts

@@ -101,6 +101,9 @@ export interface ScenarioBlockCharacter {
     positionY?: number | null;
     zIndex?: number | null;
     scale?: number | null;
+    cropLeft?: number | null;
+    cropRight?: number | null;
+    cropFade?: number | null;
     object: {
         id: string;
         name: string;
@@ -114,6 +117,9 @@ export interface ScenarioBlockCharacter {
         scale?: number;
         translateY?: number;
         translateX?: number;
+        cropLeft?: number | null;
+        cropRight?: number | null;
+        cropFade?: number | null;
         isDefault?: boolean;
         layers?: EntityStateLayer[];
     };
@@ -201,6 +207,9 @@ export interface DisplayedCharacter {
     positionY?: number | null;
     zIndex?: number | null;
     scale?: number | null;
+    cropLeft?: number | null;
+    cropRight?: number | null;
+    cropFade?: number | null;
     object: {
         id: string;
         name: string;
@@ -214,6 +223,9 @@ export interface DisplayedCharacter {
         scale?: number;
         translateY?: number;
         translateX?: number;
+        cropLeft?: number | null;
+        cropRight?: number | null;
+        cropFade?: number | null;
         isDefault?: boolean;
         layers?: EntityStateLayer[];
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luna-editor/engine",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "description": "Luna Editor scenario playback engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/hooks/useImagePreloader.d.ts

@@ -1,5 +0,0 @@
-import type { DisplayedCharacter } from "../types";
-export declare const useImagePreloader: (
-  displayedCharacters: DisplayedCharacter[],
-  singleImageUrl?: string
-) => boolean;

package/dist/hooks/useImagePreloader.js

@@ -1,53 +0,0 @@
-import { useEffect, useState } from "react";
-export var useImagePreloader = function (displayedCharacters, singleImageUrl) {
-  var _a = useState(true),
-    isLoading = _a[0],
-    setIsLoading = _a[1];
-  useEffect(
-    function () {
-      var imageUrls = [];
-      // 複数キャラクター表示の場合
-      if (displayedCharacters.length > 0) {
-        displayedCharacters.forEach(function (char) {
-          if (char.entityState.imageUrl) {
-            imageUrls.push(char.entityState.imageUrl);
-          }
-        });
-      } else if (singleImageUrl) {
-        // 単一キャラクター表示の場合
-        imageUrls.push(singleImageUrl);
-      }
-      // 画像がない場合は即座に完了
-      if (imageUrls.length === 0) {
-        setIsLoading(false);
-        return;
-      }
-      setIsLoading(true);
-      // すべての画像を並列でプリロード
-      var loadPromises = imageUrls.map(function (url) {
-        return new Promise(function (resolve, reject) {
-          var img = new Image();
-          img.onload = function () {
-            return resolve();
-          };
-          img.onerror = function () {
-            return reject(new Error("Failed to load image: ".concat(url)));
-          };
-          img.src = url;
-        });
-      });
-      // すべての画像の読み込みを待つ
-      Promise.all(loadPromises)
-        .then(function () {
-          setIsLoading(false);
-        })
-        .catch(function (error) {
-          console.error("Image preload error:", error);
-          // エラーが発生しても続行
-          setIsLoading(false);
-        });
-    },
-    [displayedCharacters, singleImageUrl]
-  );
-  return isLoading;
-};

package/dist/plugin/luna-react.d.ts

@@ -1,41 +0,0 @@
-/**
- * プラグインAPIからReactインスタンスを設定
- */
-export declare function setReactRuntime(react: any): void;
-/**
- * JSX Transform用のjsx関数
- */
-export declare function jsx(type: any, props: any, key?: any): any;
-/**
- * JSX Transform用のjsxs関数（複数子要素用）
- */
-export declare function jsxs(type: any, props: any, key?: any): any;
-/**
- * Fragment用
- */
-export declare function Fragment(props: {
-    children?: any;
-}): any;
-/**
- * Reactフックと関数のプロキシ
- */
-export declare const useState: (...args: any[]) => any;
-export declare const useEffect: (...args: any[]) => any;
-export declare const useCallback: (...args: any[]) => any;
-export declare const useMemo: (...args: any[]) => any;
-export declare const useRef: (...args: any[]) => any;
-export declare const useContext: (...args: any[]) => any;
-export declare const useReducer: (...args: any[]) => any;
-export declare const createElement: (...args: any[]) => any;
-declare const _default: {
-    createElement: (...args: any[]) => any;
-    Fragment: typeof Fragment;
-    useState: (...args: any[]) => any;
-    useEffect: (...args: any[]) => any;
-    useCallback: (...args: any[]) => any;
-    useMemo: (...args: any[]) => any;
-    useRef: (...args: any[]) => any;
-    useContext: (...args: any[]) => any;
-    useReducer: (...args: any[]) => any;
-};
-export default _default;

package/dist/plugin/luna-react.js

@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable import/no-anonymous-default-export */
-let runtimeReact = null;
-/**
- * プラグインAPIからReactインスタンスを設定
- */
-export function setReactRuntime(react) {
-    runtimeReact = react;
-}
-/**
- * JSX Transform用のjsx関数
- */
-export function jsx(type, props, key) {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
-}
-/**
- * JSX Transform用のjsxs関数（複数子要素用）
- */
-export function jsxs(type, props, key) {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
-}
-/**
- * Fragment用
- */
-export function Fragment(props) {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.createElement(runtimeReact.Fragment, null, props.children);
-}
-/**
- * Reactフックと関数のプロキシ
- */
-export const useState = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useState(...args);
-};
-export const useEffect = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useEffect(...args);
-};
-export const useCallback = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useCallback(...args);
-};
-export const useMemo = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useMemo(...args);
-};
-export const useRef = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useRef(...args);
-};
-export const useContext = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useContext(...args);
-};
-export const useReducer = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.useReducer(...args);
-};
-export const createElement = (...args) => {
-    if (!runtimeReact) {
-        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
-    }
-    return runtimeReact.createElement(...args);
-};
-// デフォルトエクスポート（互換性用）
-export default {
-    createElement,
-    Fragment,
-    useState,
-    useEffect,
-    useCallback,
-    useMemo,
-    useRef,
-    useContext,
-    useReducer,
-};