refactor: 渲染系统

packages-user/client-modules/src/render/components/choices.tsx

@@ -139,11 +139,11 @@ export const ConfirmBox = defineComponent<
         height.value = textHeight + pad.value * 4;
     };
 
-    const setYes = (_: string, width: number, height: number) => {
+    const setYes = (width: number, height: number) => {
         yesSize.value = [width, height];
     };
 
-    const setNo = (_: string, width: number, height: number) => {
+    const setNo = (width: number, height: number) => {
         noSize.value = [width, height];
     };
 
@@ -190,7 +190,7 @@ export const ConfirmBox = defineComponent<
                 zIndex={15}
                 onClick={() => emit('yes')}
                 onEnter={() => (selected.value = true)}
-                onSetText={setYes}
+                onResize={setYes}
             />
             <text
                 loc={noLoc.value}
@@ -201,7 +201,7 @@ export const ConfirmBox = defineComponent<
                 zIndex={15}
                 onClick={() => emit('no')}
                 onEnter={() => (selected.value = false)}
-                onSetText={setNo}
+                onResize={setNo}
             />
         </container>
     );
@@ -459,7 +459,7 @@ export const Choices = defineComponent<
         contentHeight.value = height;
     };
 
-    const updateTitleHeight = (_0: string, _1: number, height: number) => {
+    const updateTitleHeight = (_: number, height: number) => {
         titleHeight.value = height;
     };
 
@@ -519,7 +519,7 @@ export const Choices = defineComponent<
                 font={props.titleFont ?? new Font(void 0, 18)}
                 fillStyle={props.titleFill ?? 'gold'}
                 zIndex={5}
-                onSetText={updateTitleHeight}
+                onResize={updateTitleHeight}
             />
             <TextContent
                 {...attrs}
@@ -556,7 +556,7 @@ export const Choices = defineComponent<
                                 zIndex={5}
                                 fillStyle={props.selFill}
                                 onClick={() => emit('choose', v[0])}
-                                onSetText={(_, width, height) =>
+                                onResize={(width, height) =>
                                     updateChoiceSize(i, width, height)
                                 }
                                 onEnter={() => (selected.value = i)}

packages-user/client-modules/src/render/components/floorSelect.tsx

@@ -219,7 +219,7 @@ export const FloorSelector = defineComponent<
                     lineWidth={1}
                     strokeStyle="#aaa"
                 />
-                <sprite
+                <custom
                     zIndex={20}
                     loc={[0, 0, 144, SCROLL_HEIGHT]}
                     nocache

packages-user/client-modules/src/render/components/input.tsx

@@ -5,10 +5,11 @@ import {
     Container,
     ElementLocator,
     MotaRenderer,
-    RenderItem,
     Transform,
     Font,
-    RectRCircleParams
+    RectRCircleParams,
+    IRenderItem,
+    IRenderTreeRoot
 } from '@motajs/render';
 import { transitionedColor, useKey } from '../use';
 import { linear } from 'mutate-animate';
@@ -161,9 +162,9 @@ export const Input = defineComponent<InputProps, InputEmits, keyof InputEmits>(
             if (!ele) return;
             // 计算当前绝对位置
 
-            const chain: RenderItem[] = [];
-            let now: RenderItem | undefined = root.value;
-            let renderer: MotaRenderer | undefined;
+            const chain: IRenderItem[] = [];
+            let now: IRenderItem | null = root.value ?? null;
+            let renderer: IRenderTreeRoot | null = null;
             if (!now) return;
             while (now) {
                 chain.unshift(now);
@@ -441,11 +442,11 @@ export const InputBox = defineComponent<
         emit('input', value);
     };
 
-    const setYes = (_: string, width: number, height: number) => {
+    const setYes = (width: number, height: number) => {
         yesSize.value = [width, height];
     };
 
-    const setNo = (_: string, width: number, height: number) => {
+    const setNo = (width: number, height: number) => {
         noSize.value = [width, height];
     };
 
@@ -500,7 +501,7 @@ export const InputBox = defineComponent<
                 zIndex={15}
                 onClick={confirm}
                 onEnter={() => (selected.value = true)}
-                onSetText={setYes}
+                onResize={setYes}
             />
             <text
                 loc={noLoc.value}
@@ -511,7 +512,7 @@ export const InputBox = defineComponent<
                 zIndex={15}
                 onClick={cancel}
                 onEnter={() => (selected.value = false)}
-                onSetText={setNo}
+                onResize={setNo}
             />
         </container>
     );

packages-user/client-modules/src/render/components/misc.tsx

@@ -1,13 +1,18 @@
-import { ElementLocator, Sprite, MotaOffscreenCanvas2D } from '@motajs/render';
-import { DefaultProps, PathProps, onTick } from '@motajs/render-vue';
+import {
+    ElementLocator,
+    CustomRenderItem,
+    MotaOffscreenCanvas2D
+} from '@motajs/render';
+import { DefaultProps, PathProps } from '@motajs/render-vue';
 import { computed, defineComponent, ref, SetupContext, watch } from 'vue';
 import { TextContent, TextContentProps } from './textbox';
 import { Scroll, ScrollExpose, ScrollProps } from './scroll';
 import { transitioned } from '../use';
-import { hyper } from 'mutate-animate';
 import { logger } from '@motajs/common';
 import { GameUI, IUIMountable, SetupComponentOptions } from '@motajs/system';
 import { clamp } from 'lodash-es';
+import { using } from '../renderer';
+import { cosh, CurveMode } from '@motajs/animate';
 
 interface ProgressProps extends DefaultProps {
     /** 进度条的位置 */
@@ -37,7 +42,7 @@ const progressProps = {
  * ```
  */
 export const Progress = defineComponent<ProgressProps>(props => {
-    const element = ref<Sprite>();
+    const element = ref<CustomRenderItem>();
 
     const render = (canvas: MotaOffscreenCanvas2D) => {
         const { ctx } = canvas;
@@ -67,7 +72,7 @@ export const Progress = defineComponent<ProgressProps>(props => {
     });
 
     return () => {
-        return <sprite ref={element} loc={props.loc} render={render}></sprite>;
+        return <custom ref={element} loc={props.loc} render={render}></custom>;
     };
 }, progressProps);
 
@@ -217,7 +222,7 @@ export const ScrollText = defineComponent<
     let paused = false;
     let nowScroll = 0;
 
-    onTick(() => {
+    using.onExcitedFunc(() => {
         if (paused || !scroll.value) return;
         const now = Date.now();
         const dt = now - lastFixedTime;
@@ -296,7 +301,11 @@ const selectionProps = {
 export const Selection = defineComponent<SelectionProps>(props => {
     const minAlpha = computed(() => props.alphaRange?.[0] ?? 0.25);
     const maxAlpha = computed(() => props.alphaRange?.[1] ?? 0.55);
-    const alpha = transitioned(minAlpha.value, 2000, hyper('sin', 'in-out'))!;
+    const alpha = transitioned(
+        minAlpha.value,
+        2000,
+        cosh(2, CurveMode.EaseInOut)
+    )!;
 
     const isWinskin = computed(() => !!props.winskin);
     const winskinImage = computed(() =>
@@ -326,7 +335,7 @@ export const Selection = defineComponent<SelectionProps>(props => {
         ctx.drawImage(image, 158, 66, 2, 28, width - 2, 2, 2, height - 4);
     };
 
-    onTick(() => {
+    using.onExcitedFunc(() => {
         if (alpha.value === maxAlpha.value) {
             alpha.set(minAlpha.value);
         }
@@ -337,7 +346,7 @@ export const Selection = defineComponent<SelectionProps>(props => {
 
     return () =>
         isWinskin.value ? (
-            <sprite
+            <custom
                 loc={props.loc}
                 render={renderWinskin}
                 alpha={alpha.ref.value}
@@ -386,7 +395,7 @@ export const Background = defineComponent<BackgroundProps>(props => {
 
     return () =>
         isWinskin.value ? (
-            <winskin image={props.winskin!} loc={props.loc} noanti />
+            <winskin imageName={props.winskin!} loc={props.loc} noanti />
         ) : (
             <g-rectr
                 loc={fixedLoc.value}
@@ -401,8 +410,7 @@ export const Background = defineComponent<BackgroundProps>(props => {
 }, backgroundProps);
 
 export interface WaitBoxProps<T>
-    extends Partial<BackgroundProps>,
-        Partial<TextContentProps> {
+    extends Partial<BackgroundProps>, Partial<TextContentProps> {
     loc: ElementLocator;
     width: number;
     promise?: Promise<T>;

packages-user/client-modules/src/render/components/scroll.tsx

@@ -13,8 +13,7 @@ import {
 import {
     Container,
     ElementLocator,
-    RenderItem,
-    Sprite,
+    CustomRenderItem,
     Transform,
     MotaOffscreenCanvas2D,
     IActionEvent,
@@ -22,9 +21,10 @@ import {
     MouseType,
     EventProgress,
     ActionEventMap,
-    ContainerCustom,
     ActionType,
-    CustomContainerPropagateOrigin
+    CustomContainerPropagateOrigin,
+    IRenderItem,
+    ICustomContainer
 } from '@motajs/render';
 import { hyper, linear, Transition } from 'mutate-animate';
 import { clamp } from 'lodash-es';
@@ -110,10 +110,10 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
         /** 滚动条的定位 */
         const sp = ref<ElementLocator>([0, 0, 1, 1]);
 
-        const listenedChild: Set<RenderItem> = new Set();
-        const areaMap: Map<RenderItem, [number, number]> = new Map();
+        const listenedChild: Set<IRenderItem> = new Set();
+        const areaMap: Map<IRenderItem, [number, number]> = new Map();
         const content = ref<Container>();
-        const scroll = ref<Sprite>();
+        const scroll = ref<CustomRenderItem>();
 
         const scrollAlpha = transitioned(0.5, 100, linear())!;
 
@@ -187,7 +187,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
         /**
          * 计算一个元素会在画面上显示的区域
          */
-        const getArea = (item: RenderItem, rect: DOMRectReadOnly) => {
+        const getArea = (item: IRenderItem, rect: DOMRectReadOnly) => {
             if (direction.value === ScrollDirection.Horizontal) {
                 areaMap.set(item, [rect.left - width.value, rect.right]);
             } else {
@@ -198,7 +198,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
         /**
          * 检查一个元素是否需要显示，不需要则隐藏
          */
-        const checkItem = (item: RenderItem) => {
+        const checkItem = (item: IRenderItem) => {
             const area = areaMap.get(item);
             if (!area) {
                 item.show();
@@ -222,7 +222,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
         /**
          * 当一个元素的矩阵发生变换时执行，检查其显示区域
          */
-        const onTransform = (item: RenderItem) => {
+        const onTransform = (item: IRenderItem) => {
             const rect = item.getBoundingRect();
             const pad = props.padEnd ?? 0;
             if (item.parent === content.value) {
@@ -340,7 +340,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
 
         const renderContent = (
             canvas: MotaOffscreenCanvas2D,
-            children: RenderItem[],
+            children: IRenderItem[],
             transform: Transform
         ) => {
             const ctx = canvas.ctx;
@@ -367,7 +367,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
             type: T,
             progress: EventProgress,
             event: ActionEventMap[T],
-            _: ContainerCustom,
+            _: ICustomContainer,
             origin: CustomContainerPropagateOrigin
         ) => {
             if (progress === EventProgress.Capture) {
@@ -562,7 +562,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
                     >
                         {slots.default?.()}
                     </container-custom>
-                    <sprite
+                    <custom
                         nocache
                         hidden={props.noscroll}
                         loc={sp.value}
@@ -573,7 +573,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
                         zIndex={10}
                         onEnter={enter}
                         onLeave={leave}
-                    ></sprite>
+                    ></custom>
                 </container>
             );
         };

packages-user/client-modules/src/render/components/textbox.tsx

@@ -1,7 +1,7 @@
 import {
     ElementLocator,
     Font,
-    Sprite,
+    CustomRenderItem,
     Text,
     MotaOffscreenCanvas2D
 } from '@motajs/render';
@@ -171,7 +171,7 @@ export const TextContent = defineComponent<
 
     expose<TextContentExpose>({ retype, showAll, getHeight });
 
-    const spriteElement = shallowRef<Sprite>();
+    const spriteElement = shallowRef<CustomRenderItem>();
     const renderContent = (canvas: MotaOffscreenCanvas2D) => {
         const ctx = canvas.ctx;
         ctx.textBaseline = 'top';
@@ -225,11 +225,11 @@ export const TextContent = defineComponent<
 
     return () => {
         return (
-            <sprite
+            <custom
                 loc={loc.value}
                 ref={spriteElement}
                 render={renderContent}
-            ></sprite>
+            ></custom>
         );
     };
 }, textContentOptions);
@@ -493,7 +493,7 @@ export const Textbox = defineComponent<
                         slots.title(data)
                     ) : props.winskin ? (
                         <winskin
-                            image={props.winskin}
+                            imageName={props.winskin}
                             loc={[0, 0, tw.value, th.value]}
                         ></winskin>
                     ) : (
@@ -514,7 +514,7 @@ export const Textbox = defineComponent<
                 slots.default(data)
             ) : props.winskin ? (
                 <winskin
-                    image={props.winskin}
+                    imageName={props.winskin}
                     loc={[0, contentY.value, data.width!, backHeight.value]}
                 ></winskin>
             ) : (

packages-user/client-modules/src/render/components/textboxTyper.ts

@@ -3,7 +3,7 @@ import { Font, MotaOffscreenCanvas2D } from '@motajs/render';
 import EventEmitter from 'eventemitter3';
 import { isNil } from 'lodash-es';
 import { RenderableData, AutotileRenderable, texture } from '../elements';
-import { onTick } from '@motajs/render-vue';
+import { using } from '../renderer';
 
 /** 文字的安全填充，会填充在文字的上侧和下侧，防止削顶和削底 */
 const SAFE_PAD = 1;
@@ -151,8 +151,7 @@ interface ISizedTextContentBlock {
 }
 
 export interface ITextContentTextBlock
-    extends ITextContentBlockBase,
-        ISizedTextContentBlock {
+    extends ITextContentBlockBase, ISizedTextContentBlock {
     readonly type: TextContentType.Text;
     /** 文本 block 的文字内容 */
     readonly text: string;
@@ -165,8 +164,7 @@ export interface ITextContentTextBlock
 }
 
 export interface ITextContentIconBlock
-    extends ITextContentBlockBase,
-        ISizedTextContentBlock {
+    extends ITextContentBlockBase, ISizedTextContentBlock {
     readonly type: TextContentType.Icon;
     /** 图标 block 显示的图标 */
     readonly icon: AllNumbers;
@@ -200,8 +198,7 @@ export interface ITyperRenderableBase {
 }
 
 export interface ITyperTextRenderable
-    extends ITextContentTextBlock,
-        ITyperRenderableBase {
+    extends ITextContentTextBlock, ITyperRenderableBase {
     /** 文本左上角的横坐标 */
     readonly x: number;
     /** 文本左上角的纵坐标 */
@@ -211,8 +208,7 @@ export interface ITyperTextRenderable
 }
 
 export interface ITyperIconRenderable
-    extends ITextContentIconBlock,
-        ITyperRenderableBase {
+    extends ITextContentIconBlock, ITyperRenderableBase {
     /** 图标左上角的横坐标 */
     readonly x: number;
     /** 图标左上角的纵坐标 */
@@ -220,8 +216,7 @@ export interface ITyperIconRenderable
 }
 
 export interface ITyperWaitRenderable
-    extends ITextContentWaitBlock,
-        ITyperRenderableBase {
+    extends ITextContentWaitBlock, ITyperRenderableBase {
     /** 当然是否已经等待了多少个字符 */
     waited: number;
 }
@@ -314,7 +309,7 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
             this.config
         );
 
-        onTick(() => this.tick());
+        using.onExcitedFunc(() => this.tick());
     }
 
     /**

packages-user/client-modules/src/render/components/thumbnail.tsx

@@ -1,9 +1,13 @@
-import { ElementLocator, MotaOffscreenCanvas2D, Sprite } from '@motajs/render';
-import { SpriteProps } from '@motajs/render-vue';
+import {
+    ElementLocator,
+    MotaOffscreenCanvas2D,
+    CustomRenderItem
+} from '@motajs/render';
+import { CustomProps } from '@motajs/render-vue';
 import { defineComponent, ref, watch } from 'vue';
 import { SetupComponentOptions } from '@motajs/system';
 
-export interface ThumbnailProps extends SpriteProps {
+export interface ThumbnailProps extends CustomProps {
     /** 缩略图的位置 */
     loc: ElementLocator;
     /** 楼层 ID */
@@ -37,7 +41,7 @@ const thumbnailProps = {
 } satisfies SetupComponentOptions<ThumbnailProps>;
 
 export const Thumbnail = defineComponent<ThumbnailProps>(props => {
-    const spriteRef = ref<Sprite>();
+    const spriteRef = ref<CustomRenderItem>();
 
     const update = () => {
         spriteRef.value?.update();
@@ -75,6 +79,6 @@ export const Thumbnail = defineComponent<ThumbnailProps>(props => {
     watch(props, update);
 
     return () => (
-        <sprite noanti ref={spriteRef} loc={props.loc} render={drawThumbnail} />
+        <custom noanti ref={spriteRef} loc={props.loc} render={drawThumbnail} />
     );
 }, thumbnailProps);

packages-user/client-modules/src/render/components/tip.tsx

@@ -106,7 +106,7 @@ export const Tip = defineComponent<TipProps>((props, { expose }) => {
         hide();
     };
 
-    const onSetText = (_: string, width: number) => {
+    const onSetText = (width: number) => {
         textWidth.value = width;
     };
 
@@ -137,7 +137,7 @@ export const Tip = defineComponent<TipProps>((props, { expose }) => {
             <text
                 loc={textLoc.value}
                 text={text.value}
-                onSetText={onSetText}
+                onResize={onSetText}
                 font={font}
             />
         </container>

packages-user/client-modules/src/render/elements/animate.ts

@@ -1,278 +0,0 @@
-import {
-    RenderAdapter,
-    transformCanvas,
-    ERenderItemEvent,
-    RenderItem,
-    Transform,
-    MotaOffscreenCanvas2D
-} from '@motajs/render';
-import { HeroRenderer } from './hero';
-import { ILayerGroupRenderExtends, LayerGroup } from './layer';
-
-export class LayerGroupAnimate implements ILayerGroupRenderExtends {
-    static animateList: Set<LayerGroupAnimate> = new Set();
-    id: string = 'animate';
-
-    group!: LayerGroup;
-    hero?: HeroRenderer;
-    animate!: Animate;
-
-    private animation: Set<AnimateData> = new Set();
-
-    /**
-     * 绘制一个跟随勇士的动画
-     * @param name 动画id
-     */
-    async drawHeroAnimate(name: AnimationIds) {
-        const animate = this.animate.animate(name, 0, 0);
-        this.updatePosition(animate);
-        await this.animate.draw(animate);
-        this.animation.delete(animate);
-    }
-
-    private updatePosition(animate: AnimateData) {
-        if (!this.checkHero()) return;
-        if (!this.hero?.renderable) return;
-        const { x, y } = this.hero.renderable;
-        const cell = this.group.cellSize;
-        const half = cell / 2;
-        animate.centerX = x * cell + half;
-        animate.centerY = y * cell + half;
-    }
-
-    private onMoveTick = (x: number, y: number) => {
-        const cell = this.group.cellSize;
-        const half = cell / 2;
-        const ax = x * cell + half;
-        const ay = y * cell + half;
-        this.animation.forEach(v => {
-            v.centerX = ax;
-            v.centerY = ay;
-        });
-    };
-
-    private listen() {
-        if (this.checkHero()) {
-            this.hero!.on('moveTick', this.onMoveTick);
-        }
-    }
-
-    private checkHero() {
-        if (this.hero) return true;
-        const ex = this.group.getLayer('event')?.getExtends('floor-hero');
-        if (ex instanceof HeroRenderer) {
-            this.hero = ex;
-            return true;
-        }
-        return false;
-    }
-
-    awake(group: LayerGroup): void {
-        this.group = group;
-        this.animate = new Animate();
-        this.animate.size(group.width, group.height);
-        this.animate.setHD(true);
-        this.animate.setZIndex(100);
-        group.appendChild(this.animate);
-        LayerGroupAnimate.animateList.add(this);
-        this.listen();
-    }
-
-    onDestroy(_group: LayerGroup): void {
-        if (this.checkHero()) {
-            this.hero!.off('moveTick', this.onMoveTick);
-            LayerGroupAnimate.animateList.delete(this);
-        }
-    }
-}
-
-interface AnimateData {
-    obj: globalThis.Animate;
-    /** 第一帧是全局第几帧 */
-    readonly start: number;
-    /** 当前是第几帧 */
-    index: number;
-    /** 是否需要播放音频 */
-    sound: boolean;
-    centerX: number;
-    centerY: number;
-    onEnd?: () => void;
-    readonly absolute: boolean;
-}
-
-export interface EAnimateEvent extends ERenderItemEvent {}
-
-export class Animate extends RenderItem<EAnimateEvent> {
-    /** 绝对位置的动画 */
-    private absoluteAnimates: Set<AnimateData> = new Set();
-    /** 静态位置的动画 */
-    private staticAnimates: Set<AnimateData> = new Set();
-
-    private delegation: number;
-    private frame: number = 0;
-    private lastTime: number = 0;
-
-    constructor() {
-        super('absolute', false, true);
-
-        this.delegation = this.delegateTicker(time => {
-            if (time - this.lastTime < 50) return;
-            this.lastTime = time;
-            this.frame++;
-            if (
-                this.absoluteAnimates.size > 0 ||
-                this.staticAnimates.size > 0
-            ) {
-                this.update(this);
-            }
-        });
-
-        adapter.add(this);
-    }
-
-    protected render(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void {
-        if (
-            this.absoluteAnimates.size === 0 &&
-            this.staticAnimates.size === 0
-        ) {
-            return;
-        }
-        this.drawAnimates(this.absoluteAnimates, canvas);
-        transformCanvas(canvas, transform);
-        this.drawAnimates(this.staticAnimates, canvas);
-    }
-
-    private drawAnimates(
-        data: Set<AnimateData>,
-        canvas: MotaOffscreenCanvas2D
-    ) {
-        if (data.size === 0) return;
-        const { ctx } = canvas;
-        const toDelete = new Set<AnimateData>();
-        data.forEach(v => {
-            const obj = v.obj;
-            const index = v.index;
-            const frame = obj.frames[index];
-            const ratio = obj.ratio;
-            if (!v.sound) {
-                const se = (index % obj.frame) + 1;
-                core.playSound(v.obj.se[se], v.obj.pitch[se]);
-                v.sound = true;
-            }
-            const centerX = v.centerX;
-            const centerY = v.centerY;
-
-            frame.forEach(v => {
-                const img = obj.images[v.index];
-                if (!img) return;
-
-                const realWidth = (img.width * ratio * v.zoom) / 100;
-                const realHeight = (img.height * ratio * v.zoom) / 100;
-                ctx.globalAlpha = v.opacity / 255;
-
-                const cx = centerX + v.x;
-                const cy = centerY + v.y;
-
-                const ix = -realWidth / 2;
-                const iy = -realHeight / 2;
-                const angle = v.angle ? (-v.angle * Math.PI) / 180 : 0;
-
-                ctx.save();
-                ctx.translate(cx, cy);
-                if (v.mirror) {
-                    ctx.scale(-1, 1);
-                }
-                ctx.rotate(angle);
-                ctx.drawImage(img, ix, iy, realWidth, realHeight);
-                ctx.restore();
-            });
-            const now = this.frame - v.start;
-            if (now !== v.index) v.sound = true;
-            v.index = now;
-            if (v.index === v.obj.frame) {
-                toDelete.add(v);
-            }
-        });
-        toDelete.forEach(v => {
-            data.delete(v);
-            v.onEnd?.();
-        });
-    }
-
-    /**
-     * 创建一个可以被执行的动画
-     * @param name 动画名称
-     * @param absolute 是否是绝对定位，绝对定位不会受到transform的影响
-     */
-    animate(
-        name: AnimationIds,
-        x: number,
-        y: number,
-        absolute: boolean = false
-    ) {
-        const animate = core.material.animates[name];
-        const data: AnimateData = {
-            index: 0,
-            start: this.frame,
-            obj: animate,
-            centerX: x,
-            centerY: y,
-            absolute,
-            sound: false
-        };
-        return data;
-    }
-
-    /**
-     * 绘制动画，动画结束时兑现返回的Promise
-     * @param animate 动画信息
-     * @returns
-     */
-    draw(animate: AnimateData): Promise<void> {
-        return new Promise(res => {
-            if (animate.absolute) {
-                this.absoluteAnimates.add(animate);
-            } else {
-                this.staticAnimates.add(animate);
-            }
-            animate.onEnd = () => {
-                res();
-            };
-        });
-    }
-
-    /**
-     * 根据动画名称、坐标、定位绘制动画
-     * @param name 动画名称
-     * @param absolute 是否是绝对定位
-     */
-    drawAnimate(
-        name: AnimationIds,
-        x: number,
-        y: number,
-        absolute: boolean = false
-    ) {
-        return this.draw(this.animate(name, x, y, absolute));
-    }
-
-    destroy(): void {
-        super.destroy();
-        this.removeTicker(this.delegation);
-        adapter.remove(this);
-    }
-}
-
-const adapter = new RenderAdapter<Animate>('animate');
-adapter.receive('drawAnimate', (item, name, x, y, absolute) => {
-    return item.drawAnimate(name, x, y, absolute);
-});
-adapter.receiveGlobal('drawHeroAnimate', name => {
-    const execute: Promise<void>[] = [];
-    LayerGroupAnimate.animateList.forEach(v => {
-        execute.push(v.drawHeroAnimate(name));
-    });
-    return Promise.all(execute);
-});

packages-user/client-modules/src/render/elements/block.ts

@@ -1,319 +0,0 @@
-import { EventEmitter } from 'eventemitter3';
-import { logger } from '@motajs/common';
-import { MotaOffscreenCanvas2D, RenderItem } from '@motajs/render';
-
-interface BlockCacherEvent {
-    split: [];
-    beforeClear: [index: number];
-}
-
-interface BlockData {
-    /** 横向宽度，包括rest的那一个块 */
-    width: number;
-    /** 纵向宽度，包括rest的那一个块 */
-    height: number;
-    /** 横向最后一个块的宽度 */
-    restWidth: number;
-    /** 纵向最后一个块的高度 */
-    restHeight: number;
-}
-
-export interface IBlockCacheable {
-    /**
-     * 摧毁这个缓存元素
-     */
-    destroy(): void;
-}
-
-/**
- * 简单分块缓存类，内容包含元素与分块两种，其中元素是最小单元，分块是缓存单元。
- * 拿楼层举例，假如我将楼层按照13x13划分缓存，那么元素就是每个图块，而分块就是这13x13的缓存分块。
- * 为方便区分，在相关函数的注释最后，都会有`xx -> yy`的说明，
- * 其中xx说明传入的数据是元素还是分块的数据，而yy表示其返回值或转换为的值
- */
-export class BlockCacher<
-    T extends IBlockCacheable
-> extends EventEmitter<BlockCacherEvent> {
-    /** 区域宽度 */
-    width: number;
-    /** 区域高度 */
-    height: number;
-    /** 区域面积 */
-    area: number = 0;
-    /** 分块大小 */
-    blockSize: number;
-    /** 分块信息 */
-    blockData: BlockData = {
-        width: 0,
-        height: 0,
-        restWidth: 0,
-        restHeight: 0
-    };
-    /** 缓存深度，例如填4的时候表示每格包含4个缓存 */
-    cacheDepth: number = 1;
-
-    /** 缓存内容，计算公式为 (x + y * width) * depth + deep */
-    cache: Map<number, T> = new Map();
-
-    constructor(
-        width: number,
-        height: number,
-        size: number,
-        depth: number = 1
-    ) {
-        super();
-        this.width = width;
-        this.height = height;
-        this.blockSize = size;
-        this.cacheDepth = depth;
-        this.split();
-    }
-
-    /**
-     * 设置区域大小
-     * @param width 区域宽度
-     * @param height 区域高度
-     */
-    size(width: number, height: number) {
-        this.width = width;
-        this.height = height;
-        this.split();
-    }
-
-    /**
-     * 设置分块大小
-     */
-    setBlockSize(size: number) {
-        this.blockSize = size;
-        this.split();
-    }
-
-    /**
-     * 设置缓存深度，设置后会自动将旧缓存移植到新缓存中，最大值为31
-     * @param depth 缓存深度
-     */
-    setCacheDepth(depth: number) {
-        if (depth > 31) {
-            logger.error(11);
-            return;
-        }
-        const old = this.cache;
-        const before = this.cacheDepth;
-        this.cache = new Map();
-        old.forEach((v, k) => {
-            const index = Math.floor(k / before);
-            const deep = k % before;
-            this.cache.set(index * depth + deep, v);
-        });
-        old.clear();
-        this.cacheDepth = depth;
-    }
-
-    /**
-     * 执行分块
-     */
-    split() {
-        this.blockData = {
-            width: Math.ceil(this.width / this.blockSize),
-            height: Math.ceil(this.height / this.blockSize),
-            restWidth: this.width % this.blockSize,
-            restHeight: this.height % this.blockSize
-        };
-        this.area = this.blockData.width * this.blockData.height;
-        this.emit('split');
-    }
-
-    /**
-     * 清除指定块的索引（分块->void）
-     * @param index 要清除的缓存索引
-     * @param deep 清除哪些深度的缓存，至多31位二进制数，例如填0b111就是清除前三层的索引
-     */
-    clearCache(index: number, deep: number) {
-        const depth = this.cacheDepth;
-        for (let i = 0; i < depth; i++) {
-            if (deep & (1 << i)) {
-                const nowIndex = index * this.cacheDepth + i;
-                const item = this.cache.get(nowIndex);
-                item?.destroy();
-                this.cache.delete(nowIndex);
-            }
-        }
-    }
-
-    /**
-     * 清空指定索引的缓存，与 {@link clearCache} 不同的是，这里会直接清空对应索引的缓存，而不是指定分块的缓存（元素->void）
-     */
-    clearCacheByIndex(index: number) {
-        const item = this.cache.get(index);
-        item?.destroy();
-        this.cache.delete(index);
-    }
-
-    /**
-     * 清空所有缓存
-     */
-    clearAllCache() {
-        this.cache.forEach(v => v.destroy());
-        this.cache.clear();
-    }
-
-    /**
-     * 根据分块的横纵坐标获取其索引（分块->分块）
-     */
-    getIndex(x: number, y: number) {
-        return x + y * this.blockData.width;
-    }
-
-    /**
-     * 根据元素位置获取分块索引（注意是单个元素的位置，而不是分块的位置）（元素->分块）
-     */
-    getIndexByLoc(x: number, y: number) {
-        return this.getIndex(
-            Math.floor(x / this.blockSize),
-            Math.floor(y / this.blockSize)
-        );
-    }
-
-    /**
-     * 根据块的索引获取其位置（分块->分块）
-     */
-    getBlockXYByIndex(index: number): LocArr {
-        const width = this.blockData.width;
-        return [index % width, Math.floor(index / width)];
-    }
-
-    /**
-     * 获取一个元素位置所在的分块位置（即使它不在任何分块内）（元素->分块）
-     */
-    getBlockXY(x: number, y: number): LocArr {
-        return [Math.floor(x / this.blockSize), Math.floor(y / this.blockSize)];
-    }
-
-    /**
-     * 根据分块坐标与deep获取一个分块的精确索引（分块->分块）
-     */
-    getPreciseIndex(x: number, y: number, deep: number) {
-        return (x + y * this.blockSize) * this.cacheDepth + deep;
-    }
-
-    /**
-     * 根据元素坐标及deep获取元素所在块的精确索引（元素->分块）
-     */
-    getPreciseIndexByLoc(x: number, y: number, deep: number) {
-        return this.getPreciseIndex(...this.getBlockXY(x, y), deep);
-    }
-
-    /**
-     * 更新指定元素区域内的缓存（注意坐标是元素坐标，而非分块坐标）（元素->分块）
-     * @param deep 缓存清除深度，默认全部清空
-     * @returns 更新区域内的所有有关分块索引
-     */
-    updateElementArea(
-        x: number,
-        y: number,
-        width: number,
-        height: number,
-        deep: number = 2 ** 31 - 1
-    ) {
-        const [bx, by] = this.getBlockXY(x, y);
-        const [ex, ey] = this.getBlockXY(x + width - 1, y + height - 1);
-
-        return this.updateArea(bx, by, ex - bx, ey - by, deep);
-    }
-
-    /**
-     * 更新指定分块区域内的缓存（注意坐标是分块坐标，而非元素坐标）（分块->分块）
-     * @param deep 缓存清除深度，默认全部清空
-     * @returns 更新区域内的所有分块索引
-     */
-    updateArea(
-        x: number,
-        y: number,
-        width: number,
-        height: number,
-        deep: number = 2 ** 31 - 1
-    ) {
-        const blocks = this.getIndexOf(x, y, width, height);
-
-        blocks.forEach(v => {
-            this.clearCache(v, deep);
-        });
-        return blocks;
-    }
-
-    /**
-     * 传入分块坐标与范围，获取该区域内包含的所有分块索引（分块->分块）
-     */
-    getIndexOf(x: number, y: number, width: number, height: number) {
-        const res = new Set<number>();
-        const sx = Math.max(x, 0);
-        const sy = Math.max(y, 0);
-        const ex = Math.min(x + width, this.blockData.width);
-        const ey = Math.min(y + height, this.blockData.height);
-
-        for (let nx = sx; nx <= ex; nx++) {
-            for (let ny = sy; ny <= ey; ny++) {
-                const index = this.getIndex(nx, ny);
-                res.add(index);
-            }
-        }
-
-        return res;
-    }
-
-    /**
-     * 传入元素坐标与范围，获取该区域内包含的所有分块索引（元素->分块）
-     */
-    getIndexOfElement(x: number, y: number, width: number, height: number) {
-        const [bx, by] = this.getBlockXY(x, y);
-        const [ex, ey] = this.getBlockXY(x + width, y + height);
-        return this.getIndexOf(bx, by, ex - bx, ey - by);
-    }
-
-    /**
-     * 根据分块索引，获取这个分块所在区域的元素矩形范围（左上角横纵坐标及右下角横纵坐标）（分块->元素）
-     * @param block 分块索引
-     */
-    getRectOfIndex(block: number) {
-        const [x, y] = this.getBlockXYByIndex(block);
-        return this.getRectOfBlockXY(x, y);
-    }
-
-    /**
-     * 根据分块坐标，获取这个分块所在区域的元素矩形范围（左上角横纵坐标及右下角横纵坐标）（分块->元素）
-     * @param x 分块横坐标
-     * @param y 分块纵坐标
-     */
-    getRectOfBlockXY(x: number, y: number) {
-        return [
-            x * this.blockSize,
-            y * this.blockSize,
-            (x + 1) * this.blockSize,
-            (y + 1) * this.blockSize
-        ];
-    }
-
-    /**
-     * 摧毁这个块缓存
-     */
-    destroy() {
-        this.clearAllCache();
-    }
-}
-
-export interface ICanvasCacheItem extends IBlockCacheable {
-    readonly canvas: MotaOffscreenCanvas2D;
-    symbol: number;
-}
-
-export class CanvasCacheItem implements ICanvasCacheItem {
-    constructor(
-        public readonly canvas: MotaOffscreenCanvas2D,
-        public readonly symbol: number,
-        public readonly element: RenderItem<any>
-    ) {}
-
-    destroy(): void {
-        this.element.deleteCanvas(this.canvas);
-    }
-}

packages-user/client-modules/src/render/elements/camera.ts

@@ -1,624 +0,0 @@
-import { Animation, TimingFn, Transition } from 'mutate-animate';
-import { RenderItem, Transform } from '@motajs/render';
-import { logger } from '@motajs/common';
-import EventEmitter from 'eventemitter3';
-
-export interface ICameraTranslate {
-    readonly type: 'translate';
-    readonly from: Camera;
-    x: number;
-    y: number;
-}
-
-export interface ICameraRotate {
-    readonly type: 'rotate';
-    readonly from: Camera;
-    /** 旋转角，单位弧度 */
-    angle: number;
-}
-
-export interface ICameraScale {
-    readonly type: 'scale';
-    readonly from: Camera;
-    x: number;
-    y: number;
-}
-
-type CameraOperation = ICameraTranslate | ICameraScale | ICameraRotate;
-
-interface CameraEvent {
-    destroy: [];
-}
-
-export class Camera extends EventEmitter<CameraEvent> {
-    /** 当前绑定的渲染元素 */
-    readonly binded: RenderItem;
-    /** 目标变换矩阵，默认与 `this.binded.transform` 同引用 */
-    transform: Transform;
-
-    /** 委托ticker的id */
-    private delegation: number;
-    /** 所有的动画id */
-    private animationIds: Set<number> = new Set();
-
-    /** 是否需要更新视角 */
-    private needUpdate: boolean = false;
-    /** 是否启用摄像机 */
-    private enabled: boolean = true;
-
-    /** 变换操作列表，因为矩阵乘法跟顺序有关，因此需要把各个操作拆分成列表进行 */
-    protected operation: CameraOperation[] = [];
-
-    /** 渲染元素到摄像机的映射 */
-    private static cameraMap: Map<RenderItem, Camera> = new Map();
-
-    /**
-     * 获取一个渲染元素的摄像机，如果不存在则为它创建一个并返回。注意使用`new Camera`创建的摄像机不在此列
-     * @param item 渲染元素
-     */
-    static for(item: RenderItem) {
-        const camera = this.cameraMap.get(item);
-        if (!camera) {
-            const ca = new Camera(item);
-            this.cameraMap.set(item, ca);
-            return ca;
-        } else {
-            return camera;
-        }
-    }
-
-    constructor(item: RenderItem) {
-        super();
-
-        this.binded = item;
-
-        this.delegation = item.delegateTicker(() => this.tick());
-        this.transform = item.transform;
-
-        item.on('destroy', () => {
-            this.destroy();
-        });
-
-        const ca = Camera.cameraMap.get(item);
-        if (ca && ca.enabled) {
-            logger.warn(22);
-        }
-    }
-
-    private tick = () => {
-        if (!this.needUpdate || !this.enabled) return;
-        const trans = this.transform;
-        trans.reset();
-        for (const o of this.operation) {
-            if (o.type === 'translate') {
-                trans.translate(-o.x, -o.y);
-            } else if (o.type === 'rotate') {
-                trans.rotate(o.angle);
-            } else {
-                trans.scale(o.x, o.y);
-            }
-        }
-        this.binded.update(this.binded);
-        this.needUpdate = false;
-    };
-
-    /**
-     * 禁用这个摄像机
-     */
-    disable() {
-        this.enabled = false;
-    }
-
-    /**
-     * 启用这个摄像机
-     */
-    enable() {
-        this.enabled = true;
-    }
-
-    /**
-     * 在下一帧进行强制更新
-     */
-    requestUpdate() {
-        this.needUpdate = true;
-    }
-
-    /**
-     * 移除一个变换操作
-     * @param operation 要移除的操作
-     */
-    removeOperation(operation: CameraOperation) {
-        const index = this.operation.indexOf(operation);
-        if (index === -1) return;
-        this.operation.splice(index, 1);
-    }
-
-    /**
-     * 清空变换操作列表
-     */
-    clearOperation() {
-        this.operation.splice(0);
-    }
-
-    /**
-     * 添加一个平移操作
-     * @returns 添加的平移变换操作
-     */
-    addTranslate(): ICameraTranslate {
-        const item: ICameraTranslate = {
-            type: 'translate',
-            x: 0,
-            y: 0,
-            from: this
-        };
-        this.operation.push(item);
-        return item;
-    }
-
-    /**
-     * 添加一个旋转操作
-     * @returns 添加的旋转变换操作
-     */
-    addRotate(): ICameraRotate {
-        const item: ICameraRotate = {
-            type: 'rotate',
-            angle: 0,
-            from: this
-        };
-        this.operation.push(item);
-        return item;
-    }
-
-    /**
-     * 添加一个放缩操作
-     * @returns 添加的放缩变换操作
-     */
-    addScale(): ICameraScale {
-        const item: ICameraScale = {
-            type: 'scale',
-            x: 1,
-            y: 1,
-            from: this
-        };
-        this.operation.push(item);
-        return item;
-    }
-
-    /**
-     * 施加动画
-     * @param time 动画时长
-     * @param update 每帧的更新函数
-     */
-    applyAnimation(time: number, update: () => void) {
-        const delegation = this.binded.delegateTicker(
-            () => {
-                update();
-                this.needUpdate = true;
-            },
-            time,
-            () => {
-                update();
-                this.needUpdate = true;
-                this.animationIds.delete(delegation);
-            }
-        );
-        this.animationIds.add(delegation);
-    }
-
-    /**
-     * 为一个平移操作实施动画
-     * @param operation 平移操作
-     * @param animate 动画实例
-     * @param time 动画时长
-     */
-    applyTranslateAnimation(
-        operation: ICameraTranslate,
-        animate: Animation,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(20);
-            return;
-        }
-
-        const update = () => {
-            operation.x = animate.x;
-            operation.y = animate.y;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 为一个旋转操作实施动画
-     * @param operation 旋转操作
-     * @param animate 动画实例
-     * @param time 动画时长
-     */
-    applyRotateAnimation(
-        operation: ICameraRotate,
-        animate: Animation,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(20);
-            return;
-        }
-
-        const update = () => {
-            operation.angle = animate.angle;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 为一个缩放操作实施动画
-     * @param operation 缩放操作
-     * @param animate 动画实例
-     * @param time 动画时长
-     */
-    applyScaleAnimation(
-        operation: ICameraScale,
-        animate: Animation,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(20);
-            return;
-        }
-
-        const update = () => {
-            operation.x = animate.size;
-            operation.y = animate.size;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 为一个平移操作实施渐变，使用渐变的 x,y 值，即`transition.value.x`与`transition.value.y`
-     * @param operation 平移操作
-     * @param animate 渐变实例
-     * @param time 渐变时长
-     */
-    applyTranslateTransition(
-        operation: ICameraTranslate,
-        animate: Transition,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(21);
-            return;
-        }
-
-        const update = () => {
-            operation.x = animate.value.x;
-            operation.y = animate.value.y;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 为一个旋转操作实施渐变，使用渐变的 angle 值，即`transition.value.angle`
-     * @param operation 旋转操作
-     * @param animate 渐变实例
-     * @param time 渐变时长
-     */
-    applyRotateTransition(
-        operation: ICameraRotate,
-        animate: Transition,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(21);
-            return;
-        }
-
-        const update = () => {
-            operation.angle = animate.value.angle;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 为一个缩放操作实施渐变，使用渐变的 size 值，即`transition.value.size`
-     * @param operation 缩放操作
-     * @param animate 渐变实例
-     * @param time 渐变时长
-     */
-    applyScaleTransition(
-        operation: ICameraScale,
-        animate: Transition,
-        time: number
-    ) {
-        if (operation.from !== this) {
-            logger.warn(21);
-            return;
-        }
-
-        const update = () => {
-            operation.x = animate.value.size;
-            operation.y = animate.value.size;
-        };
-
-        this.applyAnimation(time, update);
-    }
-
-    /**
-     * 停止所有动画
-     */
-    stopAllAnimates() {
-        this.animationIds.forEach(v => this.binded.removeTicker(v));
-    }
-
-    /**
-     * 摧毁这个摄像机，当绑定元素被摧毁之后摄像机会一并摧毁，如果这个摄像机不使用了，一定要将它摧毁
-     */
-    destroy() {
-        this.binded.removeTicker(this.delegation);
-        this.animationIds.forEach(v => this.binded.removeTicker(v));
-        Camera.cameraMap.delete(this.binded);
-        this.emit('destroy');
-    }
-}
-
-interface CameraAnimationBase {
-    type: string;
-    time: number;
-    start: number;
-}
-
-export interface TranslateAnimation extends CameraAnimationBase {
-    type: 'translate';
-    timing: TimingFn;
-    x: number;
-    y: number;
-}
-
-export interface TranslateAsAnimation extends CameraAnimationBase {
-    type: 'translateAs';
-    timing: TimingFn<2>;
-    time: number;
-}
-
-export interface RotateAnimation extends CameraAnimationBase {
-    type: 'rotate';
-    timing: TimingFn;
-    angle: number;
-    time: number;
-}
-
-export interface ScaleAnimation extends CameraAnimationBase {
-    type: 'scale';
-    timing: TimingFn;
-    scale: number;
-    time: number;
-}
-
-export type CameraAnimationData =
-    | TranslateAnimation
-    | TranslateAsAnimation
-    | RotateAnimation
-    | ScaleAnimation;
-
-export interface CameraAnimationExecution {
-    data: CameraAnimationData[];
-    animation: Animation;
-}
-
-interface CameraAnimationEvent {
-    animate: [
-        operation: CameraOperation,
-        execution: CameraAnimationExecution,
-        item: CameraAnimationData
-    ];
-}
-
-export class CameraAnimation extends EventEmitter<CameraAnimationEvent> {
-    camera: Camera;
-
-    /** 动画开始时刻 */
-    private startTime: number = 0;
-    /** 动画结束时刻 */
-    private endTime: number = 0;
-    /** 委托ticker的id */
-    private delegation: number;
-    /** 动画是否开始 */
-    private started: boolean = false;
-
-    /** 每个摄像机操作的动画映射 */
-    private animateMap: Map<CameraOperation, CameraAnimationExecution> =
-        new Map();
-
-    constructor(camera: Camera) {
-        super();
-
-        this.camera = camera;
-        this.delegation = camera.binded.delegateTicker(this.tick);
-    }
-
-    private tick = () => {
-        if (!this.started) return;
-        const now = Date.now();
-        const time = now - this.startTime;
-        if (now - this.startTime > this.endTime + 50) {
-            this.destroy();
-            return;
-        }
-        this.animateMap.forEach((exe, ope) => {
-            const data = exe.data;
-            if (data.length === 0) return;
-            const item = data[0];
-            if (item.start < time) {
-                this.executeAnimate(exe, item);
-                data.shift();
-                this.emit('animate', ope, exe, item);
-            }
-        });
-        this.camera.requestUpdate();
-    };
-
-    private executeAnimate(
-        execution: CameraAnimationExecution,
-        animate: CameraAnimationData
-    ) {
-        if (animate.type === 'translateAs') {
-            const ani = this.ensureAnimate(execution);
-            ani.time(animate.time).moveAs(animate.timing);
-        } else if (animate.type === 'translate') {
-            const ani = this.ensureAnimate(execution);
-            const { x, y, time, timing } = animate;
-            ani.mode(timing).time(time).move(x, y);
-        } else if (animate.type === 'rotate') {
-            const ani = this.ensureAnimate(execution);
-            const { angle, time, timing } = animate;
-            ani.mode(timing).time(time).rotate(angle);
-        } else {
-            const ani = this.ensureAnimate(execution);
-            const { scale, time, timing } = animate;
-            ani.mode(timing).time(time).scale(scale);
-        }
-    }
-
-    private ensureAnimate(execution: CameraAnimationExecution) {
-        if (execution.animation) return execution.animation;
-        const ani = new Animation();
-        execution.animation = ani;
-        return ani;
-    }
-
-    private ensureOperation(operation: CameraOperation) {
-        if (!this.animateMap.has(operation)) {
-            const data: CameraAnimationExecution = {
-                data: [],
-                animation: new Animation()
-            };
-            this.animateMap.set(operation, data);
-            return data;
-        } else {
-            return this.animateMap.get(operation)!;
-        }
-    }
-
-    /**
-     * 添加一个平移动画
-     * @param operation 摄像机操作对象
-     * @param x 目标横坐标
-     * @param y 目标纵坐标
-     * @param time 动画时长
-     * @param start 动画开始时间
-     * @param timing 动画的缓动函数
-     */
-    translate(
-        operation: ICameraTranslate,
-        x: number,
-        y: number,
-        time: number,
-        start: number,
-        timing: TimingFn
-    ) {
-        const exe = this.ensureOperation(operation);
-        const data: TranslateAnimation = {
-            type: 'translate',
-            timing,
-            x: x * 32,
-            y: y * 32,
-            time,
-            start
-        };
-        exe.data.push(data);
-    }
-
-    /**
-     * 添加一个旋转动画
-     * @param operation 摄像机操作
-     * @param angle 目标旋转弧度，单位弧度
-     * @param time 动画时长
-     * @param start 动画开始时间
-     * @param timing 动画的缓动函数
-     */
-    rotate(
-        operation: ICameraRotate,
-        angle: number,
-        time: number,
-        start: number,
-        timing: TimingFn
-    ) {
-        const exe = this.ensureOperation(operation);
-        const data: RotateAnimation = {
-            type: 'rotate',
-            timing,
-            angle,
-            time,
-            start
-        };
-        exe.data.push(data);
-    }
-
-    /**
-     * 添加一个缩放动画
-     * @param operation 摄像机操作
-     * @param scale 目标缩放倍率
-     * @param time 动画时长
-     * @param start 动画开始时间
-     * @param timing 动画的缓动函数
-     */
-    scale(
-        operation: ICameraScale,
-        scale: number,
-        time: number,
-        start: number,
-        timing: TimingFn
-    ) {
-        const exe = this.ensureOperation(operation);
-        const data: ScaleAnimation = {
-            type: 'scale',
-            timing,
-            scale,
-            time,
-            start
-        };
-        exe.data.push(data);
-    }
-
-    /**
-     * 开始执行这个动画
-     */
-    start() {
-        if (this.started) return;
-        this.startTime = Date.now();
-        this.started = true;
-        let endTime = 0;
-        this.animateMap.forEach((exe, ope) => {
-            const data = exe.data;
-            data.sort((a, b) => a.start - b.start);
-            const end = data.at(-1);
-            if (!end) return;
-            const t = end.start + end.time;
-            if (t > endTime) endTime = t;
-            const cam = this.camera;
-
-            if (ope.type === 'translate') {
-                cam.applyTranslateAnimation(ope, exe.animation, t + 100);
-            } else if (ope.type === 'rotate') {
-                cam.applyRotateAnimation(ope, exe.animation, t + 100);
-            } else {
-                cam.applyScaleAnimation(ope, exe.animation, t + 100);
-            }
-        });
-        this.endTime = endTime + this.startTime;
-        this.tick();
-    }
-
-    destroy() {
-        this.camera.binded.removeTicker(this.delegation);
-        this.camera.stopAllAnimates();
-        this.animateMap.forEach(v => {
-            v.animation.ticker.destroy();
-        });
-        this.animateMap.clear();
-    }
-}

packages-user/client-modules/src/render/elements/damage.ts

@@ -1,543 +0,0 @@
-import {
-    ERenderItemEvent,
-    RenderItem,
-    MotaOffscreenCanvas2D,
-    Transform,
-    transformCanvas
-} from '@motajs/render';
-import { logger } from '@motajs/common';
-import EventEmitter from 'eventemitter3';
-import { isNil } from 'lodash-es';
-import { IDamageEnemy, IEnemyCollection, MapDamage } from '@motajs/types';
-import { BlockCacher, ICanvasCacheItem, CanvasCacheItem } from './block';
-import {
-    ILayerGroupRenderExtends,
-    LayerGroupFloorBinder,
-    LayerGroup,
-    Layer,
-    calNeedRenderOf
-} from './layer';
-import { MAP_BLOCK_WIDTH, MAP_HEIGHT, MAP_WIDTH } from '../shared';
-
-/**
- * 根据伤害大小获取颜色
- * @param damage 伤害大小
- */
-export function getDamageColor(damage: number): string {
-    if (typeof damage !== 'number') return '#f00';
-    if (damage === 0) return '#2f2';
-    if (damage < 0) return '#7f7';
-    if (damage < core.status.hero.hp / 3) return '#fff';
-    if (damage < (core.status.hero.hp * 2) / 3) return '#ff4';
-    if (damage < core.status.hero.hp) return '#f93';
-    return '#f22';
-}
-
-interface EFloorDamageEvent {
-    update: [floor: FloorIds];
-}
-
-export class FloorDamageExtends
-    extends EventEmitter<EFloorDamageEvent>
-    implements ILayerGroupRenderExtends
-{
-    id: string = 'floor-damage';
-
-    floorBinder!: LayerGroupFloorBinder;
-    group!: LayerGroup;
-    sprite!: Damage;
-
-    /**
-     * 立刻刷新伤害渲染
-     */
-    update(floor: FloorIds) {
-        if (!this.sprite || !floor) return;
-        const map = core.status.maps[floor];
-        this.sprite.setMapSize(map.width, map.height);
-        const { ensureFloorDamage } = Mota.require('@user/data-state');
-        ensureFloorDamage(floor);
-        const enemy = core.status.maps[floor].enemy;
-
-        this.sprite.updateCollection(enemy);
-        this.emit('update', floor);
-    }
-
-    /**
-     * 创建显伤层
-     */
-    private create() {
-        if (this.sprite) return;
-        const sprite = new Damage();
-        sprite.setZIndex(80);
-        this.group.appendChild(sprite);
-        this.sprite = sprite;
-    }
-
-    private onUpdate = (floor: FloorIds) => {
-        if (!this.floorBinder.bindThisFloor) {
-            const { ensureFloorDamage } = Mota.require('@user/data-state');
-            ensureFloorDamage(floor);
-            core.status.maps[floor].enemy.calRealAttribute();
-        }
-        this.update(floor);
-    };
-
-    // private onSetBlock = (x: number, y: number, floor: FloorIds) => {
-    //     this.sprite.enemy?.once('extract', () => {
-    //         if (floor !== this.sprite.enemy?.floorId) return;
-    //         this.sprite.updateBlocks();
-    //     });
-    //     if (!this.floorBinder.bindThisFloor) {
-    //         this.sprite.enemy?.extract();
-    //     }
-    // };
-
-    /**
-     * 进行楼层更新监听
-     */
-    private listen() {
-        this.floorBinder.on('update', this.onUpdate);
-        // this.floorBinder.on('setBlock', this.onSetBlock);
-    }
-
-    awake(group: LayerGroup): void {
-        const ex = group.getExtends('floor-binder');
-        if (ex instanceof LayerGroupFloorBinder) {
-            this.floorBinder = ex;
-            this.group = group;
-            this.create();
-            this.listen();
-        } else {
-            logger.warn(17);
-            group.removeExtends('floor-damage');
-        }
-    }
-
-    onDestroy(_group: LayerGroup): void {
-        this.floorBinder.off('update', this.onUpdate);
-        // this.floorBinder.off('setBlock', this.onSetBlock);
-    }
-}
-
-export interface DamageRenderable {
-    x: number;
-    y: number;
-    align: CanvasTextAlign;
-    baseline: CanvasTextBaseline;
-    text: string;
-    color: CanvasStyle;
-    font?: string;
-    stroke?: CanvasStyle;
-    strokeWidth?: number;
-}
-
-export interface EDamageEvent extends ERenderItemEvent {
-    setMapSize: [width: number, height: number];
-    beforeDamageRender: [need: Set<number>, transform: Transform];
-    updateBlocks: [blocks: Set<number>];
-    dirtyUpdate: [block: number];
-}
-
-export class Damage extends RenderItem<EDamageEvent> {
-    mapWidth: number = 0;
-    mapHeight: number = 0;
-
-    block: BlockCacher<ICanvasCacheItem>;
-    /** 键表示分块索引，值表示在这个分块上的渲染信息（当然实际渲染位置可以不在这个分块上） */
-    renderable: Map<number, Set<DamageRenderable>> = new Map();
-
-    /** 当前渲染怪物列表 */
-    enemy?: IEnemyCollection;
-    /** 每个分块中包含的怪物集合 */
-    blockData: Map<number, Map<number, IDamageEnemy>> = new Map();
-    /** 单元格大小 */
-    cellSize: number = 32;
-
-    /** 默认伤害字体 */
-    font: string = '300 9px Verdana';
-    /** 默认描边样式，当伤害文字不存在描边属性时会使用此属性 */
-    strokeStyle: CanvasStyle = '#000';
-    /** 默认描边宽度 */
-    strokeWidth: number = 2;
-
-    /** 要懒更新的所有分块 */
-    private dirtyBlocks: Set<number> = new Set();
-
-    constructor() {
-        super('absolute', false, true);
-
-        this.block = new BlockCacher(0, 0, MAP_BLOCK_WIDTH, 1);
-        this.type = 'absolute';
-        this.size(MAP_WIDTH, MAP_HEIGHT);
-        this.setHD(true);
-        this.setAntiAliasing(true);
-    }
-
-    protected render(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void {
-        this.renderDamage(canvas, transform);
-    }
-
-    private onExtract = () => {
-        if (this.enemy) this.updateCollection(this.enemy);
-    };
-
-    /**
-     * 设置地图大小，后面应紧跟更新怪物列表
-     */
-    setMapSize(width: number, height: number) {
-        this.mapWidth = width;
-        this.mapHeight = height;
-        this.enemy = void 0;
-        this.blockData.clear();
-        this.renderable.clear();
-        this.block.size(width, height);
-
-        // 预留blockData
-        const w = this.block.blockData.width;
-        const h = this.block.blockData.height;
-        const num = w * h;
-        for (let i = 0; i < num; i++) {
-            this.blockData.set(i, new Map());
-            this.renderable.set(i, new Set());
-            this.dirtyBlocks.add(i);
-        }
-
-        this.emit('setMapSize', width, height);
-    }
-
-    /**
-     * 设置每个图块的大小
-     */
-    setCellSize(size: number) {
-        this.cellSize = size;
-        this.update();
-    }
-
-    /**
-     * 更新怪物列表。更新后，{@link Damage.enemy} 会丢失原来的怪物列表引用，换为传入的列表引用
-     * @param enemy 怪物列表
-     */
-    updateCollection(enemy: IEnemyCollection) {
-        if (this.enemy !== enemy) {
-            this.enemy?.off('calculated', this.onExtract);
-            enemy.on('calculated', this.onExtract);
-        }
-        this.enemy = enemy;
-        this.blockData.forEach(v => v.clear());
-        this.renderable.forEach(v => v.clear());
-        this.block.clearAllCache();
-        const w = this.block.blockData.width;
-        const h = this.block.blockData.height;
-        const num = w * h;
-        for (let i = 0; i < num; i++) {
-            this.dirtyBlocks.add(i);
-        }
-
-        enemy.list.forEach(v => {
-            if (isNil(v.x) || isNil(v.y)) return;
-            const index = this.block.getIndexByLoc(v.x, v.y);
-            this.blockData.get(index)?.set(v.y * this.mapWidth + v.x, v);
-        });
-        // this.updateBlocks();
-
-        this.update(this);
-    }
-
-    /**
-     * 更新指定矩形区域内的渲染信息
-     * @param x 左上角横坐标
-     * @param y 左上角纵坐标
-     * @param width 宽度
-     * @param height 高度
-     */
-    updateRenderable(x: number, y: number, width: number, height: number) {
-        this.updateBlocks(this.block.updateElementArea(x, y, width, height));
-    }
-
-    /**
-     * 更新指定分块
-     * @param blocks 要更新的分块集合
-     * @param map 是否更新地图伤害
-     */
-    updateBlocks(blocks?: Set<number>) {
-        if (blocks) {
-            blocks.forEach(v => this.dirtyBlocks.add(v));
-            this.emit('updateBlocks', blocks);
-        } else {
-            this.blockData.forEach((_v, i) => {
-                this.dirtyBlocks.add(i);
-            });
-            this.emit('updateBlocks', new Set(this.blockData.keys()));
-        }
-        this.update(this);
-    }
-
-    /**
-     * 更新指定位置的怪物信息
-     */
-    updateEnemyOn(x: number, y: number) {
-        const enemy = this.enemy?.get(x, y);
-        const block = this.block.getIndexByLoc(x, y);
-        const data = this.blockData.get(block);
-        const index = x + y * this.mapWidth;
-        if (!data) return;
-        if (!enemy) {
-            data.delete(index);
-        } else {
-            data.set(index, enemy);
-        }
-
-        this.update(this);
-
-        // 渲染懒更新，优化性能表现
-        this.dirtyBlocks.add(block);
-    }
-
-    /**
-     * 更新单个分块
-     * @param block 更新的分块
-     * @param map 是否更新地图伤害
-     */
-    private updateBlock(block: number, map: boolean = true) {
-        const data = this.blockData.get(block);
-        if (!data) return;
-
-        this.block.clearCache(block, 1);
-        const renderable = this.renderable.get(block)!;
-
-        renderable.clear();
-        data.forEach(v => this.extract(v, renderable));
-        if (map) this.extractMapDamage(block, renderable);
-    }
-
-    /**
-     * 将怪物解析为renderable的伤害
-     * @param enemy 怪物
-     * @param block 怪物所属分块
-     */
-    private extract(enemy: IDamageEnemy, block: Set<DamageRenderable>) {
-        if (enemy.progress !== 4) return;
-        const x = enemy.x!;
-        const y = enemy.y!;
-        const { damage } = enemy.calDamage();
-        const cri = enemy.calCritical(1)[0]?.atkDelta ?? Infinity;
-
-        const dam1: DamageRenderable = {
-            align: 'left',
-            baseline: 'alphabetic',
-            text: isFinite(damage) ? core.formatBigNumber(damage, true) : '???',
-            color: getDamageColor(damage),
-            x: x * this.cellSize + 1,
-            y: y * this.cellSize + this.cellSize - 1
-        };
-        const dam2: DamageRenderable = {
-            align: 'left',
-            baseline: 'alphabetic',
-            text: isFinite(cri) ? core.formatBigNumber(cri, true) : '?',
-            color: '#fff',
-            x: x * this.cellSize + 1,
-            y: y * this.cellSize + this.cellSize - 11
-        };
-        block.add(dam1).add(dam2);
-    }
-
-    /**
-     * 解析指定分块的地图伤害
-     * @param block 分块索引
-     */
-    private extractMapDamage(block: number, renderable: Set<DamageRenderable>) {
-        if (!this.enemy) return;
-        const damage = this.enemy.mapDamage;
-        const [sx, sy, ex, ey] = this.block.getRectOfIndex(block);
-        for (let x = sx; x < ex; x++) {
-            for (let y = sy; y < ey; y++) {
-                const loc = `${x},${y}`;
-                const dam = damage[loc];
-                if (!dam) continue;
-                this.pushMapDamage(x, y, renderable, dam);
-            }
-        }
-    }
-
-    /**
-     * 解析所有地图伤害
-     */
-    private extractAllMapDamage() {
-        // todo: 测试性能，这样真的会更快吗？或许能更好的优化？或者是根本不需要这个函数？
-        if (!this.enemy) return;
-        for (const [loc, enemy] of Object.entries(this.enemy.mapDamage)) {
-            const [sx, sy] = loc.split(',');
-            const x = Number(sx);
-            const y = Number(sy);
-            const block = this.renderable.get(this.block.getIndexByLoc(x, y))!;
-            this.pushMapDamage(x, y, block, enemy);
-        }
-    }
-
-    private pushMapDamage(
-        x: number,
-        y: number,
-        block: Set<DamageRenderable>,
-        dam: MapDamage
-    ) {
-        // todo: 这个应当可以自定义，通过地图伤害注册实现
-        let text = '';
-        const color = '#fa3';
-        const font = '300 9px Verdana';
-        if (dam.damage > 0) {
-            text = core.formatBigNumber(dam.damage, true);
-        } else if (dam.ambush) {
-            text = `!`;
-        } else if (dam.repulse) {
-            text = '阻';
-        }
-
-        const mapDam: DamageRenderable = {
-            align: 'center',
-            baseline: 'middle',
-            text,
-            color,
-            font,
-            x: x * this.cellSize + this.cellSize / 2,
-            y: y * this.cellSize + this.cellSize / 2
-        };
-        block.add(mapDam);
-    }
-
-    /**
-     * 计算需要渲染哪些块
-     */
-    calNeedRender(transform: Transform) {
-        if (this.parent instanceof LayerGroup) {
-            // 如果处于地图组中，每个地图的渲染区域应该是一样的，因此可以缓存优化
-            return this.parent.cacheNeedRender(transform, this.block);
-        } else if (this.parent instanceof Layer) {
-            // 如果是地图的子元素，直接调用Layer的计算函数
-            return this.parent.calNeedRender(transform);
-        } else {
-            return calNeedRenderOf(transform, this.cellSize, this.block);
-        }
-    }
-
-    /**
-     * 渲染伤害层
-     * @param transform 变换矩阵
-     */
-    renderDamage(canvas: MotaOffscreenCanvas2D, transform: Transform) {
-        // console.time('damage');
-        const { ctx } = canvas;
-        ctx.save();
-        transformCanvas(canvas, transform);
-
-        const render = this.calNeedRender(transform);
-        const block = this.block;
-        const cell = this.cellSize;
-        const size = cell * block.blockSize;
-
-        this.emit('beforeDamageRender', render, transform);
-
-        render.forEach(v => {
-            const [x, y] = block.getBlockXYByIndex(v);
-            const bx = x * block.blockSize;
-            const by = y * block.blockSize;
-            const px = bx * cell;
-            const py = by * cell;
-
-            // todo: 是否真的需要缓存
-            // 检查有没有缓存
-            const cache = block.cache.get(v);
-            if (cache && cache.symbol === cache.canvas.symbol) {
-                ctx.drawImage(cache.canvas.canvas, px, py, size, size);
-                return;
-            }
-
-            if (this.dirtyBlocks.has(v)) {
-                this.updateBlock(v, true);
-            }
-            this.emit('dirtyUpdate', v);
-
-            // 否则依次渲染并写入缓存
-            const temp = block.cache.get(v)?.canvas ?? this.requireCanvas();
-            temp.clear();
-            temp.setHD(true);
-            temp.setAntiAliasing(true);
-            temp.size(size, size);
-            const { ctx: ct } = temp;
-
-            ct.translate(-px, -py);
-            ct.lineJoin = 'round';
-            ct.lineCap = 'round';
-
-            const render = this.renderable.get(v);
-
-            render?.forEach(v => {
-                if (!v) return;
-                ct.fillStyle = v.color;
-                ct.textAlign = v.align;
-                ct.textBaseline = v.baseline;
-                ct.font = v.font ?? this.font;
-                ct.strokeStyle = v.stroke ?? this.strokeStyle;
-                ct.lineWidth = v.strokeWidth ?? this.strokeWidth;
-
-                ct.strokeText(v.text, v.x, v.y);
-                ct.fillText(v.text, v.x, v.y);
-            });
-
-            ctx.drawImage(temp.canvas, px, py, size, size);
-            block.cache.set(v, new CanvasCacheItem(temp, temp.symbol, this));
-        });
-        ctx.restore();
-        // console.timeEnd('damage');
-    }
-
-    protected handleProps(
-        key: string,
-        _prevValue: any,
-        nextValue: any
-    ): boolean {
-        switch (key) {
-            case 'mapWidth':
-                if (!this.assertType(nextValue, 'number', key)) return false;
-                this.setMapSize(nextValue, this.mapHeight);
-                return true;
-            case 'mapHeight':
-                if (!this.assertType(nextValue, 'number', key)) return false;
-                this.setMapSize(this.mapWidth, nextValue);
-                return true;
-            case 'cellSize':
-                if (!this.assertType(nextValue, 'number', key)) return false;
-                this.setCellSize(nextValue);
-                return true;
-            case 'enemy':
-                if (!this.assertType(nextValue, 'object', key)) return false;
-                this.updateCollection(nextValue);
-                return true;
-            case 'font':
-                if (!this.assertType(nextValue, 'string', key)) return false;
-                this.font = nextValue;
-                this.update();
-                return true;
-            case 'strokeStyle':
-                this.strokeStyle = nextValue;
-                this.update();
-                return true;
-            case 'strokeWidth':
-                if (!this.assertType(nextValue, 'number', key)) return false;
-                this.strokeWidth = nextValue;
-                this.update();
-                return true;
-        }
-        return false;
-    }
-
-    destroy(): void {
-        super.destroy();
-        this.block.destroy();
-        this.enemy?.off('extract', this.onExtract);
-    }
-}
-
-// const adapter = new RenderAdapter<Damage>('damage');

packages-user/client-modules/src/render/elements/frame.ts

@@ -1,54 +0,0 @@
-import EventEmitter from 'eventemitter3';
-import { RenderItem } from '@motajs/render';
-
-export interface IAnimateFrame {
-    updateFrameAnimate(frame: number, time: number): void;
-}
-
-interface RenderEvent {
-    animateFrame: [frame: number, time: number];
-}
-
-class RenderEmits extends EventEmitter<RenderEvent> {
-    private framer: Set<IAnimateFrame> = new Set();
-
-    /**
-     * 添加一个可更新帧动画的对象
-     */
-    addFramer(framer: IAnimateFrame) {
-        this.framer.add(framer);
-    }
-
-    /**
-     * 移除一个可更新帧动画的对象
-     */
-    removeFramer(framer: IAnimateFrame) {
-        this.framer.delete(framer);
-    }
-
-    /**
-     * 更新所有帧动画
-     * @param frame 帧数
-     * @param time 帧动画时刻
-     */
-    emitAnimateFrame(frame: number, time: number) {
-        this.framer.forEach(v => v.updateFrameAnimate(frame, time));
-        this.emit('animateFrame', frame, time);
-    }
-}
-
-export const renderEmits = new RenderEmits();
-
-export function createFrame() {
-    Mota.require('@user/data-base').hook.once('reset', () => {
-        let lastTime = 0;
-        RenderItem.ticker.add(time => {
-            if (!core.isPlaying()) return;
-            if (time - lastTime > core.values.animateSpeed) {
-                RenderItem.animatedFrame++;
-                lastTime = time;
-                renderEmits.emitAnimateFrame(RenderItem.animatedFrame, time);
-            }
-        });
-    });
-}

packages-user/client-modules/src/render/elements/hero.ts

@@ -1,480 +0,0 @@
-import { SizedCanvasImageSource, RenderAdapter } from '@motajs/render';
-import { logger } from '@motajs/common';
-import { ILayerRenderExtends, Layer, LayerMovingRenderable } from './layer';
-import EventEmitter from 'eventemitter3';
-import { texture } from './cache';
-import { TimingFn } from 'mutate-animate';
-import { isNil } from 'lodash-es';
-
-// type HeroMovingStatus = 'stop' | 'moving' | 'moving-as';
-// export const enum HeroMovingStatus {}
-
-interface HeroRenderEvent {
-    stepEnd: [];
-    moveTick: [x: number, y: number];
-    append: [renderable: LayerMovingRenderable[]];
-}
-
-export class HeroRenderer
-    extends EventEmitter<HeroRenderEvent>
-    implements ILayerRenderExtends
-{
-    id: string = 'floor-hero';
-
-    /** 勇士的图片资源 */
-    image?: SizedCanvasImageSource;
-    cellWidth?: number;
-    cellHeight?: number;
-
-    /** 勇士的渲染信息 */
-    renderable?: LayerMovingRenderable;
-    layer!: Layer;
-
-    /** 当前移动帧数 */
-    movingFrame: number = 0;
-    /** 是否正在移动 */
-    moving: boolean = false;
-    /** 是否正在播放动画，与移动分开以实现原地踏步 */
-    animate: boolean = false;
-
-    /** 勇士移动速度 */
-    speed: number = 100;
-    /** 勇士移动的真正速度，经过录像修正 */
-    realSpeed: number = 100;
-
-    /** 当前的移动方向 */
-    moveDir: Dir2 = 'down';
-    /** 当前移动的勇士显示方向 */
-    showDir: Dir = 'down';
-    /** 帧动画是否反向播放，例如后退时就应该设为true */
-    animateReverse: boolean = false;
-
-    /** 勇士移动定时器id */
-    private moveId: number = -1;
-    /** 上一次帧数切换的时间 */
-    private lastFrameTime: number = 0;
-    /** 上一步走到格子上的时间 */
-    private lastStepTime: number = 0;
-    /** 执行当前步移动的Promise */
-    private moveDetached?: Promise<void>;
-    /** endMove的Promise */
-    private moveEnding?: Promise<void>;
-    /**
-     * 这一步的移动方向，与{@link moveDir}不同的是，在这一步走完之前，它都不会变，
-     * 当这一步走完之后，才会将其设置为{@link moveDir}的值
-     */
-    stepDir: Dir2 = 'down';
-    /** 每步的格子增量 */
-    private stepDelta: Loc = { x: 0, y: 1 };
-
-    /**
-     * 设置勇士所用的图片资源
-     * @param image 图片资源
-     */
-    setImage(image: SizedCanvasImageSource) {
-        this.image = image;
-        this.split();
-        this.resetRenderable(true);
-        this.layer.requestUpdateMoving();
-    }
-
-    /**
-     * 设置移动的移动速度
-     * @param speed 移动速度
-     */
-    setMoveSpeed(speed: number) {
-        this.speed = speed;
-        this.fixMoveSpeed();
-    }
-
-    /**
-     * 分割勇士图像，生成renderable信息
-     */
-    split() {
-        this.cellWidth = this.image!.width / 4;
-        this.cellHeight = this.image!.height / 4;
-        this.generateRenderable();
-    }
-
-    /**
-     * 生成渲染信息
-     */
-    generateRenderable() {
-        if (!this.image) return;
-        this.renderable = {
-            image: this.image,
-            frame: 4,
-            x: core.status.hero.loc.x,
-            y: core.status.hero.loc.y,
-            zIndex: core.status.hero.loc.y,
-            autotile: false,
-            bigImage: true,
-            render: this.getRenderFromDir(this.showDir),
-            animate: 0,
-            alpha: 1
-        };
-    }
-
-    /**
-     * 根据方向获取勇士的裁切信息
-     * @param dir 方向
-     */
-    getRenderFromDir(dir: Dir): [number, number, number, number][] {
-        if (!this.cellWidth || !this.cellHeight) return [];
-        const index = texture.characterDirection[dir];
-        const y = index * this.cellHeight;
-        const res: [number, number, number, number][] = [0, 1, 2, 3].map(v => {
-            return [v * this.cellWidth!, y, this.cellWidth!, this.cellHeight!];
-        });
-        if (this.animateReverse) return res.reverse();
-        else return res;
-    }
-
-    /**
-     * 开始勇士帧动画
-     */
-    startAnimate() {
-        this.animate = true;
-        this.lastFrameTime = Date.now();
-    }
-
-    /**
-     * 结束勇士帧动画
-     */
-    endAnimate() {
-        this.animate = false;
-        this.resetRenderable(false);
-    }
-
-    /**
-     * 设置帧动画是否反向播放
-     * @param reverse 帧动画是否反向播放
-     */
-    setAnimateReversed(reverse: boolean) {
-        this.animateReverse = reverse;
-        this.resetRenderable(true);
-    }
-
-    /**
-     * 设置勇士的动画显示朝向
-     * @param dir 显示朝向
-     */
-    setAnimateDir(dir: Dir) {
-        if (dir !== this.showDir) {
-            this.showDir = dir;
-            this.resetRenderable(true);
-        }
-    }
-
-    /**
-     * 重置renderable状态，恢复至第一帧状态
-     * @param getInfo 是否重新获取渲染信息
-     */
-    resetRenderable(getInfo: boolean) {
-        this.movingFrame = 0;
-
-        if (this.renderable) {
-            this.renderable.animate = 0;
-            if (getInfo) {
-                this.renderable.render = this.getRenderFromDir(this.showDir);
-            }
-        }
-        this.layer.update(this.layer);
-    }
-
-    /**
-     * 勇士帧动画定时器
-     */
-    private animateTick(time: number) {
-        if (!this.animate) return;
-        if (time - this.lastFrameTime > this.speed) {
-            this.lastFrameTime = time;
-            this.movingFrame++;
-            this.movingFrame %= 4;
-            if (this.renderable) this.renderable.animate = this.movingFrame;
-        }
-        this.layer.update(this.layer);
-    }
-
-    /**
-     * 勇士移动定时器
-     */
-    private moveTick(time: number) {
-        if (!this.renderable) return;
-
-        if (this.moving) {
-            const progress = (time - this.lastStepTime) / this.realSpeed;
-
-            const { x: dx, y: dy } = this.stepDelta;
-            const { x, y } = core.status.hero.loc;
-            if (progress >= 1) {
-                this.renderable.x = x + dx;
-                this.renderable.y = y + dy;
-                this.fixMoveSpeed();
-                this.emit('stepEnd');
-            } else {
-                const rx = dx * progress + x;
-                const ry = dy * progress + y;
-                this.renderable.x = rx;
-                this.renderable.y = ry;
-            }
-            this.layer.update(this.layer);
-        }
-        this.emit('moveTick', this.renderable.x, this.renderable.y);
-    }
-
-    /**
-     * 进行下一步的移动准备，设置移动信息
-     */
-    private step() {
-        this.stepDir = this.moveDir;
-        this.lastStepTime = Date.now();
-        this.stepDelta = core.utils.scan2[this.stepDir];
-        this.turn(this.stepDir);
-    }
-
-    private fixMoveSpeed() {
-        if (!core.isReplaying()) {
-            this.realSpeed = this.speed;
-        } else {
-            const replay = core.status.replay.speed;
-            this.realSpeed = replay === 24 ? 1 : this.speed / replay;
-        }
-    }
-
-    /**
-     * 准备开始移动
-     */
-    readyMove() {
-        this.moving = true;
-        this.fixMoveSpeed();
-    }
-
-    /**
-     * 移动勇士
-     */
-    move(dir: Dir2): Promise<void> {
-        if (!this.moving) {
-            logger.error(12);
-            return Promise.reject(
-                'Cannot moving hero while hero not in moving!'
-            );
-        }
-
-        this.moveDir = dir;
-        if (this.moveDetached) {
-            return this.moveDetached;
-        } else {
-            this.step();
-            this.moveDetached = new Promise(res => {
-                this.once('stepEnd', () => {
-                    this.moveDetached = void 0;
-                    res();
-                });
-            });
-            return this.moveDetached;
-        }
-    }
-
-    /**
-     * 结束勇士的移动过程
-     */
-    endMove(): Promise<void> {
-        if (!this.moving) return Promise.resolve();
-        if (this.moveEnding) return this.moveEnding;
-        else {
-            const promise = new Promise<void>(resolve => {
-                this.once('stepEnd', () => {
-                    this.moveEnding = void 0;
-                    this.moving = false;
-                    const { x, y } = core.status.hero.loc;
-                    this.setHeroLoc(x, y);
-                    this.render();
-                    resolve();
-                });
-            });
-            return (this.moveEnding = promise);
-        }
-    }
-
-    /**
-     * 勇士转向，不填表示顺时针转一个方向
-     * @param dir 移动方向
-     */
-    turn(dir?: Dir2): void {
-        if (!dir) {
-            const index = texture.characterTurn2.indexOf(this.stepDir);
-            if (index === -1) {
-                const length = texture.characterTurn.length;
-                const index = texture.characterTurn.indexOf(
-                    this.stepDir as Dir
-                );
-                const next = texture.characterTurn[index % length];
-                return this.turn(next);
-            } else {
-                return this.turn(texture.characterTurn[index]);
-            }
-        }
-        this.moveDir = dir;
-        this.stepDir = dir;
-
-        if (!this.renderable) return;
-        this.renderable.render = this.getRenderFromDir(this.showDir);
-        this.layer.update(this.layer);
-    }
-
-    /**
-     * 设置勇士的坐标
-     * @param x 横坐标
-     * @param y 纵坐标
-     */
-    setHeroLoc(x?: number, y?: number) {
-        if (!this.renderable) return;
-        if (!isNil(x)) {
-            this.renderable.x = x;
-        }
-        if (!isNil(y)) {
-            this.renderable.y = y;
-        }
-        this.emit('moveTick', this.renderable.x, this.renderable.y);
-        this.layer.update(this.layer);
-    }
-
-    /**
-     * 按照指定函数移动勇士
-     * @param x 目标横坐标
-     * @param y 目标纵坐标
-     * @param time 移动时间
-     * @param fn 移动函数，传入一个完成度（范围0-1），返回一个三元素数组，表示横纵格子坐标，可以是小数。
-     *           第三个元素表示图块纵深，一般图块的纵深就是其纵坐标，当地图上有大怪物时，此举可以辅助渲染，
-     *           否则可能会导致移动过程中与大怪物的层级关系不正确，比如全在大怪物身后。注意不建议频繁改动这个值，
-     *           因为此举会导致层级的重新排序，降低渲染性能。
-     */
-    moveAs(x: number, y: number, time: number, fn: TimingFn<3>): Promise<void> {
-        if (!this.moving) return Promise.resolve();
-        if (!this.renderable) return Promise.resolve();
-        const nowZIndex = fn(0)[2];
-        const startTime = Date.now();
-        return new Promise(res => {
-            this.layer.delegateTicker(
-                () => {
-                    if (!this.renderable) return;
-                    const now = Date.now();
-                    const progress = (now - startTime) / time;
-                    const [nx, ny, nz] = fn(progress);
-                    this.renderable.x = nx;
-                    this.renderable.y = ny;
-                    this.renderable.zIndex = nz;
-                    if (nz !== nowZIndex) {
-                        this.layer.sortMovingRenderable();
-                    }
-                    this.emit('moveTick', this.renderable.x, this.renderable.y);
-                    this.layer.update(this.layer);
-                },
-                time,
-                () => {
-                    this.moving = false;
-                    if (!this.renderable) return res();
-                    this.renderable.x = x;
-                    this.renderable.y = y;
-                    this.emit('moveTick', this.renderable.x, this.renderable.y);
-                    this.layer.update(this.layer);
-                    res();
-                }
-            );
-        });
-    }
-
-    /**
-     * 渲染勇士
-     */
-    render() {
-        if (!this.renderable) return;
-        if (!this.animate) {
-            this.renderable.animate = 0;
-        } else {
-            this.renderable.animate = this.movingFrame;
-        }
-        this.layer.update(this.layer);
-    }
-
-    awake(layer: Layer): void {
-        this.layer = layer;
-        adapter.add(this);
-        this.moveId = layer.delegateTicker(() => {
-            const time = Date.now();
-            this.animateTick(time);
-            this.moveTick(time);
-        });
-        if (core.status.hero) {
-            const image = core.status.hero.image;
-            this.setImage(core.material.images.images[image]);
-        }
-    }
-
-    onDestroy(layer: Layer): void {
-        adapter.remove(this);
-        layer.removeTicker(this.moveId);
-    }
-
-    onMovingUpdate(_layer: Layer, renderable: LayerMovingRenderable[]): void {
-        if (this.renderable) {
-            renderable.push(this.renderable);
-            this.emit('append', renderable);
-        }
-    }
-}
-
-const adapter = new RenderAdapter<HeroRenderer>('hero-adapter');
-adapter.receive('readyMove', item => {
-    item.readyMove();
-    return Promise.resolve();
-});
-adapter.receive('move', (item, dir: Dir) => {
-    return item.move(dir);
-});
-adapter.receive('endMove', item => {
-    return item.endMove();
-});
-adapter.receive(
-    'moveAs',
-    (item, x: number, y: number, time: number, fn: TimingFn<3>) => {
-        return item.moveAs(x, y, time, fn);
-    }
-);
-adapter.receive('setHeroLoc', (item, x?: number, y?: number) => {
-    item.setHeroLoc(x, y);
-    return Promise.resolve();
-});
-adapter.receive('turn', (item, dir: Dir2) => {
-    item.turn(dir);
-    return Promise.resolve();
-});
-
-// 同步适配函数，这些函数用于同步设置信息等
-adapter.receiveSync('setImage', (item, image: SizedCanvasImageSource) => {
-    item.setImage(image);
-});
-adapter.receiveSync('setMoveSpeed', (item, speed: number) => {
-    item.setMoveSpeed(speed);
-});
-adapter.receiveSync('setAnimateReversed', (item, reverse: boolean) => {
-    item.setAnimateReversed(reverse);
-});
-adapter.receiveSync('startAnimate', item => {
-    item.startAnimate();
-});
-adapter.receiveSync('endAnimate', item => {
-    item.endAnimate();
-});
-adapter.receiveSync('setAnimateDir', (item, dir: Dir) => {
-    item.setAnimateDir(dir);
-});
-
-// 不分同步fallback，用于适配现在的样板，之后会删除
-adapter.receiveSync('setHeroLoc', (item, x?: number, y?: number) => {
-    item.setHeroLoc(x, y);
-});
-adapter.receiveSync('turn', (item, dir: Dir2) => {
-    item.turn(dir);
-});

packages-user/client-modules/src/render/elements/index.ts

@@ -1,115 +1,47 @@
-import { standardElementNoCache, tagMap } from '@motajs/render-vue';
-import { createCache } from './cache';
-import { createFrame } from './frame';
-import { createLayer, Layer, LayerGroup } from './layer';
-import { createViewport } from './viewport';
-import { Icon, Winskin } from './misc';
-import { Animate } from './animate';
-import { createItemDetail } from './itemDetail';
 import { logger } from '@motajs/common';
-import { MapExtensionManager, MapRender, MapRenderer } from '../map';
-import { state } from '@user/data-state';
-import { materials } from '@user/client-base';
+import { MapRenderItem } from '../map';
+import { mainRenderer, tagManager } from '../renderer';
+import { createCache } from './cache';
+import { Icon, Winskin } from './misc';
 
 export function createElements() {
     createCache();
-    createFrame();
-    createLayer();
-    createViewport();
-    createItemDetail();
 
     // ----- 注册标签
+    mainRenderer.registerElement('icon', Icon);
+    mainRenderer.registerElement('winskin', Winskin);
+    mainRenderer.registerElement('map-render', MapRenderItem);
 
-    tagMap.register('winskin', (_0, _1, props) => {
-        if (!props)
-            return new Winskin(core.material.images.images['winskin.png']);
-        else {
-            const {
-                image = core.material.images.images['winskin.png'],
-                type = 'static'
-            } = props;
-            return new Winskin(image, type);
-        }
-    });
-    tagMap.register('layer', (_0, _1, props) => {
-        if (!props) return new Layer();
-        else {
-            const { ex } = props;
-            const l = new Layer();
-
-            if (ex) {
-                (ex as any[]).forEach(v => {
-                    l.extends(v);
-                });
-            }
-
-            return l;
-        }
-    });
-    tagMap.register('layer-group', (_0, _1, props) => {
-        if (!props) return new LayerGroup();
-        else {
-            const { ex, layers } = props;
-            const l = new LayerGroup();
-
-            if (ex) {
-                (ex as any[]).forEach(v => {
-                    l.extends(v);
-                });
-            }
-            if (layers) {
-                (layers as any[]).forEach(v => {
-                    l.addLayer(v);
-                });
-            }
-
-            return l;
-        }
-    });
-    tagMap.register('animation', (_0, _1, _props) => {
-        return new Animate();
-    });
-    tagMap.register('icon', standardElementNoCache(Icon));
-    tagMap.register('map-render', (_0, _1, props) => {
+    tagManager.registerTag(
+        'icon',
+        tagManager.createStandardElement(false, Icon)
+    );
+    tagManager.registerTag(
+        'winskin',
+        tagManager.createStandardElement(false, Winskin)
+    );
+    tagManager.registerTag('map-render', props => {
         if (!props) {
-            logger.error(42, 'layerState, renderer, extenstion');
-            const renderer = new MapRenderer(materials, state.layer);
-            const manager = new MapExtensionManager(renderer);
-            return new MapRender(state.layer, renderer, manager);
+            logger.error(42, 'layerState');
+            throw new Error(`Lack of map-render property.`);
         }
         const { layerState, renderer, extension } = props;
         if (!layerState) {
             logger.error(42, 'layerState');
-            const renderer = new MapRenderer(materials, state.layer);
-            const manager = new MapExtensionManager(renderer);
-            return new MapRender(state.layer, renderer, manager);
+            throw new Error(`Lack of map-render property.`);
         }
         if (!renderer) {
             logger.error(42, 'renderer');
-            const renderer = new MapRenderer(materials, state.layer);
-            const manager = new MapExtensionManager(renderer);
-            return new MapRender(state.layer, renderer, manager);
+            throw new Error(`Lack of map-render property.`);
         }
         if (!extension) {
             logger.error(42, 'extension');
-            const renderer = new MapRenderer(materials, state.layer);
-            const manager = new MapExtensionManager(renderer);
-            return new MapRender(state.layer, renderer, manager);
+            throw new Error(`Lack of map-render property.`);
         }
-        return new MapRender(layerState, renderer, extension);
+        return new MapRenderItem(layerState, renderer, extension);
     });
 }
 
-export * from './animate';
-export * from './block';
 export * from './cache';
-export * from './camera';
-export * from './damage';
-export * from './frame';
-export * from './hero';
-export * from './itemDetail';
-export * from './layer';
 export * from './misc';
 export * from './props';
-export * from './utils';
-export * from './viewport';

packages-user/client-modules/src/render/elements/itemDetail.ts

@@ -1,270 +0,0 @@
-import { logger } from '@motajs/common';
-import { mainSetting } from '@motajs/legacy-ui';
-import { hook } from '@user/data-base';
-import { ItemState } from '@user/data-state';
-import { Damage, DamageRenderable, FloorDamageExtends } from './damage';
-import {
-    ILayerGroupRenderExtends,
-    LayerGroup,
-    LayerGroupFloorBinder
-} from './layer';
-
-interface ItemDetailData {
-    x: number;
-    y: number;
-    diff: Record<string | symbol, number | undefined>;
-}
-
-interface ItemData {
-    id: AllIdsOf<'items'>;
-    x: number;
-    y: number;
-}
-
-export function createItemDetail() {
-    hook.on('setBlock', (x, y, _floorId, block) => {
-        FloorItemDetail.listened.forEach(v => {
-            v.setBlock(block, x, y);
-        });
-    });
-}
-
-export class FloorItemDetail implements ILayerGroupRenderExtends {
-    id: string = 'item-detail';
-
-    group!: LayerGroup;
-    floorBinder!: LayerGroupFloorBinder;
-    damage!: FloorDamageExtends;
-    sprite!: Damage;
-
-    /** 每个分块中包含的物品信息 */
-    blockData: Map<number, Map<number, ItemData>> = new Map();
-
-    /** 需要更新的分块 */
-    private dirtyBlock: Set<number> = new Set();
-    /** 道具详细信息 */
-    private detailData: Map<number, Map<number, ItemDetailData>> = new Map();
-
-    static detailColor: Record<string, CanvasStyle> = {
-        atk: '#FF7A7A',
-        atkper: '#FF7A7A',
-        def: '#00E6F1',
-        defper: '#00E6F1',
-        mdef: '#6EFF83',
-        mdefper: '#6EFF83',
-        hp: '#A4FF00',
-        hpmax: '#F9FF00',
-        hpmaxper: '#F9FF00',
-        mana: '#c66',
-        manaper: '#c66'
-    };
-
-    static listened: Set<FloorItemDetail> = new Set();
-
-    private onBeforeDamageRender = (block: number) => {
-        if (!mainSetting.getValue('screen.itemDetail')) return;
-        if (this.dirtyBlock.has(block)) {
-            this.sprite.block.clearCache(block, 1);
-        }
-        this.render(block);
-    };
-
-    private onUpdateMapSize = (width: number, height: number) => {
-        this.updateMapSize(width, height);
-    };
-
-    private onUpdate = () => {
-        this.updateItems();
-    };
-
-    private onUpdateBlocks = (blocks: Set<number>) => {
-        blocks.forEach(v => {
-            this.dirtyBlock.add(v);
-        });
-    };
-
-    private listen() {
-        this.sprite.on('dirtyUpdate', this.onBeforeDamageRender);
-        this.sprite.on('setMapSize', this.onUpdateMapSize);
-        this.sprite.on('updateBlocks', this.onUpdateBlocks);
-        this.damage.on('update', this.onUpdate);
-    }
-
-    /**
-     * 更新地图大小
-     */
-    updateMapSize(width: number, height: number) {
-        this.blockData.clear();
-
-        // 预留blockData
-        this.sprite.block.size(width, height);
-        const data = this.sprite.block.blockData;
-        const num = data.width * data.height;
-        for (let i = 0; i <= num; i++) {
-            this.blockData.set(i, new Map());
-            this.detailData.set(i, new Map());
-            this.dirtyBlock.add(i);
-        }
-    }
-
-    /**
-     * 更新全地图的物品，并进行分块存储
-     */
-    updateItems() {
-        const floor = this.floorBinder.getFloor();
-        if (!floor) return;
-        core.extractBlocks(floor);
-
-        core.status.maps[floor].blocks.forEach(v => {
-            if (v.event.cls !== 'items' || v.disable) return;
-            const id = v.event.id as AllIdsOf<'items'>;
-            const item = core.material.items[id];
-            if (item.cls === 'constants' || item.cls === 'tools') return;
-            const x = v.x;
-            const y = v.y;
-            const block = this.sprite.block.getIndexByLoc(x, y);
-            const index = x + y * this.sprite.mapWidth;
-            const blockData = this.blockData.get(block);
-            blockData?.set(index, { x, y, id });
-        });
-    }
-
-    /**
-     * 设置图块
-     * @param block 图块数字
-     * @param x 横坐标
-     * @param y 纵坐标
-     */
-    setBlock(block: AllNumbers, x: number, y: number) {
-        const map = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
-        const index = this.sprite.block.getIndexByLoc(x, y);
-        const itemIndex = x + y * this.sprite.mapWidth;
-        const blockData = this.blockData.get(index);
-        this.dirtyBlock.add(index);
-        if (block === 0) {
-            blockData?.delete(itemIndex);
-            return;
-        }
-        const cls = map[block].cls;
-        if (cls !== 'items') {
-            blockData?.delete(itemIndex);
-            return;
-        }
-        const id = map[block].id;
-        blockData?.set(itemIndex, { x, y, id });
-    }
-
-    /**
-     * 计算指定分块中的物品信息
-     * @param block 要计算的分块
-     */
-    calAllItems(block: Set<number>) {
-        const enable = mainSetting.getValue('screen.itemDetail');
-        if (!core.status.thisMap || !enable) return;
-        if (this.dirtyBlock.size === 0 || block.size === 0) return;
-
-        let diff: Record<string | symbol, number | undefined> = {};
-        const before = core.status.hero;
-        const hero = structuredClone(core.status.hero);
-        const handler: ProxyHandler<any> = {
-            set(target, key, v) {
-                diff[key] = v - (target[key] || 0);
-                if (!diff[key]) diff[key] = void 0;
-                return true;
-            }
-        };
-        core.status.hero = new Proxy(hero, handler);
-
-        core.setFlag('__statistics__', true);
-        this.dirtyBlock.forEach(v => {
-            const data = this.blockData.get(v);
-            const detail = this.detailData.get(v);
-            detail?.clear();
-            if (!data) return;
-            data.forEach(v => {
-                const { id, x, y } = v;
-                const index = x + y * this.sprite.mapWidth;
-                diff = {};
-
-                const item = core.material.items[id];
-                if (item.cls === 'equips') {
-                    // 装备也显示
-                    const diff: Record<string, any> = {
-                        ...(item.equip.value ?? {})
-                    };
-                    const per = item.equip.percentage ?? {};
-                    for (const name of Object.keys(per)) {
-                        const n = name as SelectKey<HeroStatus, number>;
-                        diff[name + 'per'] = per[n].toString() + '%';
-                    }
-                    detail?.set(index, { x, y, diff });
-                    return;
-                }
-
-                ItemState.item(id)?.itemEffectFn?.();
-                detail?.set(index, { x, y, diff });
-            });
-        });
-        core.status.hero = before;
-        window.hero = before;
-        window.flags = before.flags;
-    }
-
-    /**
-     * 计算并渲染指定格子里面的物品
-     * @param block 需要渲染的格子
-     */
-    render(block: number) {
-        if (this.dirtyBlock.has(block)) {
-            this.calAllItems(new Set([block]));
-        }
-        const data = this.detailData;
-        this.dirtyBlock.delete(block);
-        const info = data.get(block);
-        if (!info) return;
-        info.forEach(({ x, y, diff }) => {
-            let n = 0;
-            for (const [key, value] of Object.entries(diff)) {
-                if (!value) continue;
-                const color = FloorItemDetail.detailColor[key] ?? '#fff';
-                const text = core.formatBigNumber(value, 4);
-                const renderable: DamageRenderable = {
-                    x: x * this.sprite.cellSize + 2,
-                    y: y * this.sprite.cellSize + 31 - n * 10,
-                    text,
-                    color,
-                    align: 'left',
-                    baseline: 'alphabetic'
-                };
-                this.sprite.renderable.get(block)?.add(renderable);
-                n++;
-            }
-        });
-    }
-
-    awake(group: LayerGroup): void {
-        this.group = group;
-
-        const binder = group.getExtends('floor-binder');
-        const damage = group.getExtends('floor-damage');
-        if (
-            binder instanceof LayerGroupFloorBinder &&
-            damage instanceof FloorDamageExtends
-        ) {
-            this.floorBinder = binder;
-            this.damage = damage;
-            this.sprite = damage.sprite;
-            this.listen();
-            FloorItemDetail.listened.add(this);
-        } else {
-            logger.warn(1001);
-            group.removeExtends('item-detail');
-        }
-    }
-
-    onDestroy(_group: LayerGroup): void {
-        this.sprite.off('beforeDamageRender', this.onBeforeDamageRender);
-        this.sprite.off('setMapSize', this.onUpdateMapSize);
-        FloorItemDetail.listened.delete(this);
-    }
-}

packages-user/client-modules/src/render/elements/misc.ts

@@ -1,36 +1,49 @@
 import { logger } from '@motajs/common';
 import {
-    ERenderItemEvent,
     RenderItem,
-    RenderItemPosition,
     MotaOffscreenCanvas2D,
     Transform,
     SizedCanvasImageSource
 } from '@motajs/render';
 import { isNil } from 'lodash-es';
 import { RenderableData, AutotileRenderable, texture } from './cache';
-import { IAnimateFrame, renderEmits } from './frame';
+import { IExcitable } from '@motajs/animate';
+import { IMotaIcon, IMotaWinskin } from './types';
 
-export interface EIconEvent extends ERenderItemEvent {}
-
-export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
+export class Icon extends RenderItem implements IMotaIcon, IExcitable<number> {
     /** 图标id */
     icon: AllNumbers = 0;
-    /** 帧数 */
+    /** 渲染动画的第几帧 */
     frame: number = 0;
     /** 是否启用动画 */
     animate: boolean = false;
+    /** 当前动画速度 */
+    frameSpeed: number = 300;
+    /** 当前帧率 */
+    nowFrame: number = 0;
+
     /** 图标的渲染信息 */
     private renderable?: RenderableData | AutotileRenderable;
 
     private pendingIcon?: AllNumbers;
 
-    constructor(type: RenderItemPosition, cache?: boolean, fall?: boolean) {
-        super(type, cache, fall);
+    /** 委托激励对象 id，用于图标的动画展示 */
+    private delegation: number = -1;
+
+    constructor(cache: boolean = false) {
+        super(cache);
         this.setAntiAliasing(false);
         this.setHD(false);
     }
 
+    excited(payload: number): void {
+        if (!this.renderable) return;
+        const frame = Math.floor(payload / 300);
+        if (frame === this.nowFrame) return;
+        this.nowFrame = frame;
+        this.update();
+    }
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         _transform: Transform
@@ -42,7 +55,7 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
         const cw = this.width;
         const ch = this.height;
         const frame = this.animate
-            ? RenderItem.animatedFrame % renderable.frame
+            ? this.nowFrame % renderable.frame
             : this.frame;
 
         if (!this.animate) {
@@ -87,6 +100,27 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
         }
     }
 
+    setFrameSpeed(speed: number): void {
+        this.frameSpeed = speed;
+        this.update();
+    }
+
+    setFrame(frame: number): void {
+        if (frame < 0) {
+            this.setAnimateStatus(true);
+            return;
+        }
+        this.frame = frame;
+        this.update();
+    }
+
+    setAnimateStatus(animate: boolean): void {
+        this.animate = animate;
+        if (!animate) this.removeExcitable(this.delegation);
+        else this.delegation = this.delegateExcitable(this);
+        this.update();
+    }
+
     private setIconRenderable(num: AllNumbers) {
         const renderable = texture.getRenderable(num);
 
@@ -101,15 +135,7 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
         this.update();
     }
 
-    /**
-     * 更新动画帧
-     */
-    updateFrameAnimate(): void {
-        if (this.animate) this.update(this);
-    }
-
     destroy(): void {
-        renderEmits.removeFramer(this);
         super.destroy();
     }
 
@@ -124,142 +150,50 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
                 return true;
             case 'animate':
                 if (!this.assertType(nextValue, 'boolean', key)) return false;
-                this.animate = nextValue;
-                if (nextValue) renderEmits.addFramer(this);
-                else renderEmits.removeFramer(this);
-                this.update();
+                this.setAnimateStatus(nextValue);
                 return true;
             case 'frame':
                 if (!this.assertType(nextValue, 'number', key)) return false;
-                this.frame = nextValue;
-                this.update();
+                this.setFrame(nextValue);
+                return true;
+            case 'speed':
+                if (!this.assertType(nextValue, 'number', key)) return false;
+                this.setFrameSpeed(nextValue);
                 return true;
         }
         return false;
     }
 }
 
-interface WinskinPatterns {
-    top: CanvasPattern;
-    left: CanvasPattern;
-    bottom: CanvasPattern;
-    right: CanvasPattern;
-}
-
-export interface EWinskinEvent extends ERenderItemEvent {}
-
-export class Winskin extends RenderItem<EWinskinEvent> {
-    image: SizedCanvasImageSource;
+export class Winskin extends RenderItem implements IMotaWinskin {
+    image: SizedCanvasImageSource | null = null;
     /** 边框宽度，32表示原始宽度 */
     borderSize: number = 32;
     /** 图片名称 */
-    imageName?: string;
+    imageName: string = '';
 
     private pendingImage?: ImageIds;
-    private patternCache?: WinskinPatterns;
-    private patternTransform: DOMMatrix;
 
-    // todo: 跨上下文可能是未定义行为，需要上下文无关化
-    private static patternMap: Map<string, WinskinPatterns> = new Map();
-
-    constructor(
-        image: SizedCanvasImageSource,
-        type: RenderItemPosition = 'static'
-    ) {
-        super(type, false, false);
-        this.image = image;
+    constructor(enableCache: boolean = false) {
+        super(enableCache);
         this.setAntiAliasing(false);
-
-        if (window.DOMMatrix) {
-            this.patternTransform = new DOMMatrix();
-        } else if (window.WebKitCSSMatrix) {
-            this.patternTransform = new WebKitCSSMatrix();
-        } else {
-            this.patternTransform = new SVGMatrix();
-        }
     }
 
-    private generatePattern() {
-        const pattern = this.requireCanvas(true, false);
-        pattern.setScale(1);
+    protected render(canvas: MotaOffscreenCanvas2D): void {
         const img = this.image;
-        pattern.size(32, 16);
-        pattern.setHD(false);
-        pattern.setAntiAliasing(false);
-        const ctx = pattern.ctx;
-        ctx.drawImage(img, 144, 0, 32, 16, 0, 0, 32, 16);
-        const topPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 32, 16);
-        ctx.drawImage(img, 144, 48, 32, 16, 0, 0, 32, 16);
-        const bottomPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 32, 16);
-        pattern.size(16, 32);
-        ctx.drawImage(img, 128, 16, 16, 32, 0, 0, 16, 32);
-        const leftPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 16, 32);
-        ctx.drawImage(img, 176, 16, 16, 32, 0, 0, 16, 32);
-        const rightPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        if (!topPattern || !bottomPattern || !leftPattern || !rightPattern) {
-            return null;
-        }
-        const winskinPattern: WinskinPatterns = {
-            top: topPattern,
-            bottom: bottomPattern,
-            left: leftPattern,
-            right: rightPattern
-        };
-        if (this.imageName) {
-            Winskin.patternMap.set(this.imageName, winskinPattern);
-        }
-        this.patternCache = winskinPattern;
-        this.deleteCanvas(pattern);
-        return winskinPattern;
-    }
-
-    private getPattern() {
-        if (!this.imageName) {
-            if (this.patternCache) return this.patternCache;
-            return this.generatePattern();
-        } else {
-            const pattern = Winskin.patternMap.get(this.imageName);
-            if (pattern) return pattern;
-            return this.generatePattern();
-        }
-    }
-
-    protected render(
-        canvas: MotaOffscreenCanvas2D,
-        _transform: Transform
-    ): void {
+        if (!img) return;
         const ctx = canvas.ctx;
-        const img = this.image;
         const w = this.width;
         const h = this.height;
         const pad = this.borderSize / 2;
         // 背景
         ctx.drawImage(img, 0, 0, 128, 128, 2, 2, w - 4, h - 4);
-        const pattern = this.getPattern();
-        if (!pattern) return;
-        const { top, left, right, bottom } = pattern;
-        top.setTransform(this.patternTransform);
-        left.setTransform(this.patternTransform);
-        right.setTransform(this.patternTransform);
-        bottom.setTransform(this.patternTransform);
         // 上下左右边框
         ctx.save();
-        ctx.fillStyle = top;
-        ctx.translate(pad, 0);
-        ctx.fillRect(0, 0, w - pad * 2, pad);
-        ctx.fillStyle = bottom;
-        ctx.translate(0, h - pad);
-        ctx.fillRect(0, 0, w - pad * 2, pad);
-        ctx.fillStyle = left;
-        ctx.translate(-pad, pad * 2 - h);
-        ctx.fillRect(0, 0, pad, h - pad * 2);
-        ctx.fillStyle = right;
-        ctx.translate(w - pad, 0);
-        ctx.fillRect(0, 0, pad, h - pad * 2);
-        ctx.restore();
+        ctx.drawImage(img, 144, 0, 32, 16, pad, 0, w - pad * 2, pad);
+        ctx.drawImage(img, 144, 48, 32, 16, pad, h - pad, w - pad * 2, pad);
+        ctx.drawImage(img, 128, 16, 16, 32, 0, pad, pad, h - pad * 2);
+        ctx.drawImage(img, 176, 16, 16, 32, w - pad, pad, pad, h - pad * 2);
         // 四个角的边框
         ctx.drawImage(img, 128, 0, 16, 16, 0, 0, pad, pad);
         ctx.drawImage(img, 176, 0, 16, 16, w - pad, 0, pad, pad);
@@ -273,7 +207,7 @@ export class Winskin extends RenderItem<EWinskinEvent> {
      */
     setImage(image: SizedCanvasImageSource) {
         this.image = image;
-        this.patternCache = void 0;
+        this.imageName = '';
         this.update();
     }
 
@@ -307,8 +241,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
      */
     setBorderSize(size: number) {
         this.borderSize = size;
-        this.patternTransform.a = size / 32;
-        this.patternTransform.d = size / 32;
         this.update();
     }
 
@@ -319,6 +251,9 @@ export class Winskin extends RenderItem<EWinskinEvent> {
     ): boolean {
         switch (key) {
             case 'image':
+                this.setImage(nextValue);
+                return true;
+            case 'imageName':
                 if (!this.assertType(nextValue, 'string', key)) return false;
                 this.setImageByName(nextValue);
                 return true;

packages-user/client-modules/src/render/elements/props.ts

@@ -1,29 +1,7 @@
 import { BaseProps, TagDefine } from '@motajs/render-vue';
-import { ERenderItemEvent, Transform, CanvasStyle } from '@motajs/render';
-import {
-    ILayerGroupRenderExtends,
-    FloorLayer,
-    ILayerRenderExtends,
-    ELayerEvent,
-    ELayerGroupEvent
-} from './layer';
-import { EAnimateEvent } from './animate';
-import { EIconEvent, EWinskinEvent } from './misc';
-import { IEnemyCollection } from '@motajs/types';
+import { ERenderItemEvent, SizedCanvasImageSource } from '@motajs/render';
 import { ILayerState } from '@user/data-state';
-import { IMapExtensionManager, IMapRenderer, IOnMapTextRenderer } from '../map';
-
-export interface AnimateProps extends BaseProps {}
-
-export interface DamageProps extends BaseProps {
-    mapWidth?: number;
-    mapHeight?: number;
-    cellSize?: number;
-    enemy?: IEnemyCollection;
-    font?: string;
-    strokeStyle?: CanvasStyle;
-    strokeWidth?: number;
-}
+import { IMapExtensionManager, IMapRenderer } from '../map';
 
 export interface IconProps extends BaseProps {
     /** 图标 id 或数字 */
@@ -32,50 +10,30 @@ export interface IconProps extends BaseProps {
     frame?: number;
     /** 是否开启动画，开启后 frame 参数无效 */
     animate?: boolean;
+    /** 动画速度 */
+    speed?: number;
 }
 
 export interface WinskinProps extends BaseProps {
-    /** winskin 的图片 id */
-    image: ImageIds;
+    /** 直接设置 winskin 图片 */
+    image?: SizedCanvasImageSource;
+    /** 根据图片名称设置 winskin 图片 */
+    imageName?: string;
     /** 边框大小 */
     borderSize?: number;
 }
 
-export interface LayerGroupProps extends BaseProps {
-    cellSize?: number;
-    blockSize?: number;
-    floorId?: FloorIds;
-    bindThisFloor?: boolean;
-    camera?: Transform;
-    ex?: readonly ILayerGroupRenderExtends[];
-    layers?: readonly FloorLayer[];
-}
-
-export interface LayerProps extends BaseProps {
-    layer?: FloorLayer;
-    mapWidth?: number;
-    mapHeight?: number;
-    cellSize?: number;
-    background?: AllNumbers;
-    floorImage?: FloorAnimate[];
-    ex?: readonly ILayerRenderExtends[];
-}
-
 export interface MapRenderProps extends BaseProps {
     layerState: ILayerState;
     renderer: IMapRenderer;
     extension: IMapExtensionManager;
-    textExtension?: IOnMapTextRenderer | null;
 }
 
 declare module 'vue/jsx-runtime' {
     namespace JSX {
         export interface IntrinsicElements {
-            layer: TagDefine<LayerProps, ELayerEvent>;
-            'layer-group': TagDefine<LayerGroupProps, ELayerGroupEvent>;
-            animation: TagDefine<AnimateProps, EAnimateEvent>;
-            icon: TagDefine<IconProps, EIconEvent>;
-            winskin: TagDefine<WinskinProps, EWinskinEvent>;
+            icon: TagDefine<IconProps, ERenderItemEvent>;
+            winskin: TagDefine<WinskinProps, ERenderItemEvent>;
             'map-render': TagDefine<MapRenderProps, ERenderItemEvent>;
         }
     }

packages-user/client-modules/src/render/elements/types.ts

@@ -0,0 +1,65 @@
+import { IRenderItem, SizedCanvasImageSource } from '@motajs/render';
+
+export interface IMotaIcon extends IRenderItem {
+    /** 图标id */
+    readonly icon: AllNumbers;
+    /** 渲染动画的第几帧 */
+    readonly frame: number;
+    /** 是否启用动画 */
+    readonly animate: boolean;
+    /** 当前动画帧数，如果没有启用动画则为 -1 */
+    readonly nowFrame: number;
+    /** 当前图标的动画速度，每多长时间切换至下一帧，单位毫秒 */
+    readonly frameSpeed: number;
+
+    /**
+     * 设置图标
+     * @param id 图标id
+     */
+    setIcon(id: AllIdsWithNone | AllNumbers): void;
+
+    /**
+     * 设置当前图标的帧动画速度，单位毫秒
+     * @param speed 帧动画速度
+     */
+    setFrameSpeed(speed: number): void;
+
+    /**
+     * 设置当前图标是否启用帧动画
+     * @param animate 是否启用帧动画
+     */
+    setAnimateStatus(animate: boolean): void;
+
+    /**
+     * 设置图标显示第几帧，如果传入负数视为启用帧动画
+     * @param frame 显示图标的第几帧
+     */
+    setFrame(frame: number): void;
+}
+
+export interface IMotaWinskin extends IRenderItem {
+    /** winskin 图片源 */
+    readonly image: SizedCanvasImageSource | null;
+    /** 边框尺寸 */
+    readonly borderSize: number;
+    /** winskin 图片名称，如果不是使用名称设置的图片的话，此值为空字符串 */
+    readonly imageName: string;
+
+    /**
+     * 设置winskin图片
+     * @param image winskin图片
+     */
+    setImage(image: SizedCanvasImageSource): void;
+
+    /**
+     * 通过图片名称设置winskin
+     * @param name 图片名称
+     */
+    setImageByName(name: ImageIds): void;
+
+    /**
+     * 设置边框大小
+     * @param size 边框大小
+     */
+    setBorderSize(size: number): void;
+}

packages-user/client-modules/src/render/elements/utils.ts

@@ -1,14 +0,0 @@
-import { RenderAdapter } from '@motajs/render';
-import { FloorViewport } from './viewport';
-
-export function disableViewport() {
-    const adapter = RenderAdapter.get<FloorViewport>('viewport');
-    if (!adapter) return;
-    adapter.sync('disable');
-}
-
-export function enableViewport() {
-    const adapter = RenderAdapter.get<FloorViewport>('viewport');
-    if (!adapter) return;
-    adapter.sync('enable');
-}

packages-user/client-modules/src/render/elements/viewport.ts

@@ -1,360 +0,0 @@
-import { RenderAdapter } from '@motajs/render';
-import { HeroRenderer } from './hero';
-import { ILayerGroupRenderExtends, LayerGroup } from './layer';
-import { LayerGroupFloorBinder } from './layer';
-import { hyper, TimingFn } from 'mutate-animate';
-import {
-    MAP_BLOCK_HEIGHT,
-    MAP_BLOCK_WIDTH,
-    MAP_HEIGHT,
-    MAP_WIDTH
-} from '../shared';
-
-export class FloorViewport implements ILayerGroupRenderExtends {
-    id: string = 'viewport';
-
-    group!: LayerGroup;
-    hero?: HeroRenderer;
-    binder?: LayerGroupFloorBinder;
-
-    /** 是否启用视角控制拓展 */
-    enabled: boolean = true;
-    /** 是否自动限定视角范围至地图范围 */
-    boundX: boolean = true;
-    boundY: boolean = true;
-
-    /** 渐变的速率曲线 */
-    transitionFn: TimingFn = hyper('sin', 'out');
-    /** 瞬移的速率曲线 */
-    mutateFn: TimingFn = hyper('sin', 'out');
-
-    /** 突变时的渐变时长 */
-    transitionTime: number = 600;
-
-    /** 当前视角位置 */
-    private nx: number = 0;
-    private ny: number = 0;
-    /** 移动时的偏移位置 */
-    private ox: number = 0;
-    private oy: number = 0;
-    /** 移动时的偏移最大值 */
-    private maxOffset: number = 1;
-
-    /** 委托ticker */
-    private delegation: number = -1;
-    /** 渐变委托ticker */
-    private transition: number = -1;
-    /** 移动委托ticker */
-    private moving: number = -1;
-    /** 是否在渐变过程中 */
-    private inTransition: boolean = false;
-    /** 是否在移动过程中 */
-    private inMoving: boolean = false;
-
-    /** 移动的监听函数 */
-    private movingFramer?: () => void;
-
-    /**
-     * 禁用自动视角控制
-     */
-    disable() {
-        this.enabled = false;
-    }
-
-    /**
-     * 启用自动视角控制
-     */
-    enable() {
-        this.enabled = true;
-        const { x, y } = core.status.hero.loc;
-        const { x: nx, y: ny } = this.group.camera;
-        const halfWidth = MAP_WIDTH / 2;
-        const halfHeight = MAP_HEIGHT / 2;
-        const cell = this.group.cellSize;
-        const half = cell / 2;
-        this.applyPosition(
-            -(nx - halfWidth + half) / this.group.cellSize,
-            -(ny - halfHeight + half) / this.group.cellSize
-        );
-        this.mutateTo(x, y);
-    }
-
-    /**
-     * 设置是否自动限定视角范围至地图范围
-     * @param boundX 是否自动限定水平视角范围
-     * @param boundY 是否自动限定竖直视角范围
-     */
-    setAutoBound(boundX: boolean = this.boundX, boundY: boolean = this.boundY) {
-        this.boundX = boundX;
-        this.boundY = boundY;
-        this.group.requestBeforeFrame(() => {
-            this.setPosition(this.nx, this.ny);
-        });
-    }
-
-    /**
-     * 传入视角的目标位置，将其限定在地图范围内后返回
-     * @param x 图格横坐标
-     * @param y 图格纵坐标
-     */
-    getBoundedPosition(x: number, y: number) {
-        if (!this.checkDependency()) return { x, y };
-        if (!this.boundX && !this.boundY) return { x, y };
-        const width = MAP_BLOCK_WIDTH;
-        const height = MAP_BLOCK_HEIGHT;
-        const minX = (width - 1) / 2;
-        const minY = (height - 1) / 2;
-        const floor = core.status.maps[this.binder!.getFloor()];
-        const maxX = floor.width - minX - 1;
-        const maxY = floor.height - minY - 1;
-
-        return {
-            x: this.boundX ? core.clamp(x, minX, maxX) : x,
-            y: this.boundY ? core.clamp(y, minY, maxY) : y
-        };
-    }
-
-    /**
-     * 设置视角位置
-     * @param x 目标图格横坐标
-     * @param y 目标图格纵坐标
-     */
-    setPosition(x: number, y: number) {
-        if (!this.enabled) return;
-        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
-        this.group.removeTicker(this.transition, false);
-        this.applyPosition(nx, ny);
-    }
-
-    /**
-     * 开始移动
-     */
-    startMove() {
-        if (this.inMoving) return;
-        this.inMoving = true;
-        this.createMoveTransition();
-    }
-
-    /**
-     * 结束移动
-     */
-    endMove() {
-        this.inMoving = false;
-    }
-
-    /**
-     * 当勇士通过移动改变至指定位置时移动视角
-     * @param x 目标图格横坐标
-     * @param y 目标图格纵坐标
-     */
-    moveTo(x: number, y: number, time: number = 200) {
-        if (!this.enabled) return;
-        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
-        if (this.inTransition) {
-            const distance = Math.hypot(this.nx - nx, this.ny - ny);
-            const t = core.clamp(distance * time, time, time * 3);
-            this.createTransition(nx, ny, t, this.transitionFn);
-        }
-    }
-
-    private createMoveTransition() {
-        if (!this.checkDependency()) return;
-        let xTarget: number = 0;
-        let yTarget: number = 0;
-        let xStart: number = this.ox;
-        let yStart: number = this.oy;
-        let xStartTime: number = Date.now();
-        let yStartTime: number = Date.now();
-        let ending: boolean = false;
-        // 这个数等于 sinh(2)，用这个数的话，可以正好在刚开始移动的时候达到1的斜率，效果会比较好
-        const transitionTime = this.hero!.speed * 3.626860407847019;
-
-        const setTargetX = (x: number, time: number) => {
-            if (x === xTarget) return;
-            xTarget = x;
-            xStartTime = time;
-            xStart = this.ox;
-        };
-        const setTargetY = (y: number, time: number) => {
-            if (y === yTarget) return;
-            yTarget = y;
-            yStart = this.oy;
-            yStartTime = time;
-        };
-
-        if (this.movingFramer) {
-            this.hero!.off('moveTick', this.movingFramer);
-        }
-        this.movingFramer = () => {
-            if (this.inTransition) return;
-            const now = Date.now();
-            if (!this.inMoving && !ending) {
-                setTargetX(0, now);
-                setTargetY(0, now);
-                ending = true;
-            }
-            if (!ending) {
-                const dir = this.hero!.stepDir;
-                const { x, y } = core.utils.scan2[dir];
-                setTargetX(-x * this.maxOffset, now);
-                setTargetY(-y * this.maxOffset, now);
-            }
-
-            if (!this.hero!.renderable) return;
-
-            const { x, y } = this.hero!.renderable;
-            const { x: nx, y: ny } = this.getBoundedPosition(x, y);
-            this.applyPosition(nx, ny);
-
-            if (ending) {
-                if (this.ox === xTarget && this.oy === yTarget) {
-                    this.hero!.off('moveTick', this.movingFramer);
-                    return;
-                }
-            }
-            // todo: 效果太差了，需要优化
-            return;
-            if (this.ox !== xTarget) {
-                const time = transitionTime * Math.abs(xStart - xTarget);
-                const progress = (now - xStartTime) / time;
-                if (progress > 1) {
-                    this.ox = xTarget;
-                } else {
-                    const p = this.transitionFn(progress);
-                    this.ox = (xTarget - xStart) * p + xStart;
-                }
-            }
-            if (this.oy !== yTarget) {
-                const time = transitionTime * Math.abs(yStart - yTarget);
-                const progress = (now - yStartTime) / time;
-                if (progress > 1) {
-                    this.oy = yTarget;
-                } else {
-                    const p = this.transitionFn(progress);
-                    this.oy = (yTarget - yStart) * p + yStart;
-                }
-            }
-        };
-        this.hero!.on('moveTick', this.movingFramer);
-    }
-
-    /**
-     * 当勇士位置突变至指定位置时移动视角
-     * @param x 目标图格横坐标
-     * @param y 目标图格纵坐标
-     */
-    mutateTo(x: number, y: number, time: number = this.transitionTime) {
-        if (!this.enabled) return;
-        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
-        this.createTransition(nx, ny, time, this.mutateFn);
-    }
-
-    private createTransition(x: number, y: number, time: number, fn: TimingFn) {
-        const start = Date.now();
-        const end = start + time;
-        const sx = this.nx;
-        const sy = this.ny;
-        const dx = x - sx;
-        const dy = y - sy;
-
-        this.inTransition = true;
-        this.group.removeTicker(this.transition, false);
-        this.transition = this.group.delegateTicker(
-            () => {
-                const now = Date.now();
-                if (now >= end) {
-                    this.group.removeTicker(this.transition, true);
-                    return;
-                }
-                const progress = fn((now - start) / time);
-                const tx = dx * progress;
-                const ty = dy * progress;
-                this.applyPosition(tx + sx, ty + sy);
-            },
-            time,
-            () => {
-                this.applyPosition(x, y);
-                this.inTransition = false;
-            }
-        );
-    }
-
-    private applyPosition(x: number, y: number) {
-        if (!this.enabled) return;
-        if (x === this.nx && y === this.ny) return;
-        const halfWidth = MAP_WIDTH / 2;
-        const halfHeight = MAP_HEIGHT / 2;
-        const cell = this.group.cellSize;
-        const half = cell / 2;
-        this.nx = x;
-        this.ny = y;
-        const { x: bx, y: by } = this.getBoundedPosition(x, y);
-        const rx = bx * cell - halfWidth + half;
-        const ry = by * cell - halfHeight + half;
-        core.bigmap.offsetX = rx;
-        core.bigmap.offsetY = ry;
-        this.group.camera.setTranslate(-rx, -ry);
-        this.group.update(this.group);
-    }
-
-    private checkDependency() {
-        if (this.hero && this.binder) return true;
-        const group = this.group;
-        const ex1 = group.getLayer('event')?.getExtends('floor-hero');
-        const ex2 = group.getExtends('floor-binder');
-        if (
-            ex1 instanceof HeroRenderer &&
-            ex2 instanceof LayerGroupFloorBinder
-        ) {
-            this.hero = ex1;
-            this.binder = ex2;
-            return true;
-        }
-        return false;
-    }
-
-    awake(group: LayerGroup): void {
-        this.group = group;
-        adapter.add(this);
-    }
-
-    onDestroy(group: LayerGroup): void {
-        group.removeTicker(this.delegation);
-        group.removeTicker(this.transition);
-        group.removeTicker(this.moving);
-        adapter.remove(this);
-    }
-}
-
-const adapter = new RenderAdapter<FloorViewport>('viewport');
-adapter.receive('mutateTo', (item, x, y, time) => {
-    item.mutateTo(x, y, time);
-    return Promise.resolve();
-});
-adapter.receive('moveTo', (item, x, y, time) => {
-    item.moveTo(x, y, time);
-    return Promise.resolve();
-});
-adapter.receive('setPosition', (item, x, y) => {
-    item.setPosition(x, y);
-    return Promise.resolve();
-});
-adapter.receiveSync('disable', item => {
-    item.disable();
-});
-adapter.receiveSync('enable', item => {
-    item.enable();
-});
-adapter.receiveSync('startMove', item => {
-    item.startMove();
-});
-adapter.receiveSync('endMove', item => {
-    item.endMove();
-});
-
-export function createViewport() {
-    const { hook } = Mota.require('@user/data-base');
-    hook.on('changingFloor', (_, loc) => {
-        adapter.all('setPosition', loc.x, loc.y);
-    });
-}

packages-user/client-modules/src/render/index.tsx

@@ -10,7 +10,7 @@ import { sceneController } from './scene';
 import { GameTitleUI } from './ui/title';
 import { createWeather } from './weather';
 import { createMainExtension } from './commonIns';
-import { createApp } from '@motajs/render-vue';
+import { createApp } from './renderer';
 
 export function createGameRenderer() {
     const App = defineComponent(_props => {

packages-user/client-modules/src/render/legacy/fallback.ts

@@ -1,114 +0,0 @@
-import {
-    MotaOffscreenCanvas2D,
-    RenderItem,
-    RenderItemPosition,
-    Transform
-} from '@motajs/render';
-import { wrapInstancedComponent } from '@motajs/render-vue';
-
-// 渲染端的向后兼容用，会充当两个版本间过渡的作用
-class Change extends RenderItem {
-    private tips: string[] = [];
-    /** 当前小贴士 */
-    private usingTip: string = '';
-    /** 透明度 */
-    private backAlpha: number = 0;
-    private title: string = '';
-
-    constructor(type: RenderItemPosition) {
-        super(type, false);
-    }
-
-    /**
-     * 设置楼传过程中的小贴士
-     */
-    setTips(tip: string[]) {
-        this.tips = tip;
-    }
-
-    /**
-     * 设置标题
-     */
-    setTitle(title: string) {
-        this.title = title;
-    }
-
-    /**
-     * 显示楼层切换的从透明变黑的动画
-     * @param time 动画时长
-     */
-    showChange(time: number) {
-        const length = this.tips.length;
-        const tip = this.tips[Math.floor(Math.random() * length)] ?? '';
-        this.usingTip = tip;
-
-        return new Promise<void>(res => {
-            const start = Date.now();
-            const id = this.delegateTicker(
-                () => {
-                    const dt = Date.now() - start;
-                    const progress = dt / time;
-                    if (progress > 1) {
-                        this.backAlpha = 1;
-                        this.removeTicker(id);
-                    } else {
-                        this.backAlpha = progress;
-                    }
-                    this.update();
-                },
-                10000,
-                res
-            );
-        });
-    }
-
-    /**
-     * 显示楼层切换从黑到透明的动画
-     * @param time 动画时长
-     */
-    async hideChange(time: number) {
-        return new Promise<void>(res => {
-            const start = Date.now();
-            const id = this.delegateTicker(
-                () => {
-                    const dt = Date.now() - start;
-                    const progress = dt / time;
-                    if (progress > 1) {
-                        this.removeTicker(id);
-                        this.backAlpha = 0;
-                    } else {
-                        this.backAlpha = 1 - progress;
-                    }
-                    this.update();
-                },
-                10000,
-                res
-            );
-        });
-    }
-
-    protected render(
-        canvas: MotaOffscreenCanvas2D,
-        _transform: Transform
-    ): void {
-        if (this.backAlpha === 0) return;
-        const ctx = canvas.ctx;
-        ctx.globalAlpha = this.backAlpha;
-        ctx.fillStyle = '#000';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.textAlign = 'center';
-        ctx.fillStyle = '#fff';
-        ctx.font = '32px "normal"';
-        ctx.fillText(this.title, canvas.width / 2, canvas.height * 0.4);
-        ctx.font = '16px "normal"';
-        if (this.usingTip.length > 0) {
-            ctx.fillText(
-                '小贴士:' + this.usingTip,
-                canvas.width / 2,
-                canvas.height * 0.75
-            );
-        }
-    }
-}
-
-export const FloorChange = wrapInstancedComponent(() => new Change('static'));

packages-user/client-modules/src/render/map/element.ts

@@ -5,7 +5,7 @@ import { ElementNamespace, ComponentInternalInstance } from 'vue';
 import { CELL_HEIGHT, CELL_WIDTH, MAP_HEIGHT, MAP_WIDTH } from '../shared';
 import { IMapExtensionManager } from './extension';
 
-export class MapRender extends RenderItem {
+export class MapRenderItem extends RenderItem {
     /**
      * @param layerState 地图状态对象
      * @param renderer 地图渲染器对象
@@ -15,13 +15,14 @@ export class MapRender extends RenderItem {
         readonly renderer: IMapRenderer,
         readonly exManager: IMapExtensionManager
     ) {
-        super('static', false, false);
+        super(false);
 
         renderer.setLayerState(layerState);
         renderer.setCellSize(CELL_WIDTH, CELL_HEIGHT);
         renderer.setRenderSize(MAP_WIDTH, MAP_HEIGHT);
 
-        this.delegateTicker(time => {
+        // 元素被销毁时会自动删除所有的激励对象，所以不需要担心会内存泄漏
+        this.delegateExcitable(time => {
             this.renderer.tick(time);
             if (this.renderer.needUpdate()) {
                 this.update();

packages-user/client-modules/src/render/map/types.ts

@@ -997,8 +997,7 @@ export interface IMapVertexStatus {
  * 脏标记表示顶点数组的长度是否发生变化
  */
 export interface IMapVertexGenerator
-    extends IDirtyTracker<boolean>,
-        IMapVertexStatus {
+    extends IDirtyTracker<boolean>, IMapVertexStatus {
     /** 地图渲染器 */
     readonly renderer: IMapRenderer;
     /** 地图分块 */

packages-user/client-modules/src/render/renderer.ts

@@ -1,8 +1,46 @@
 import { MotaRenderer } from '@motajs/render';
-import { MAIN_WIDTH, MAIN_HEIGHT } from './shared';
+import {
+    MAIN_WIDTH,
+    MAIN_HEIGHT,
+    DEBUG_VARIATOR,
+    VARIATOR_DEBUG_SPEED,
+    DEBUG_DIVIDER,
+    DIVIDER_DEBUG_DIVIDER
+} from './shared';
+import { createRendererFor, RendererUsing } from '@motajs/render-vue';
+import {
+    ExcitationDivider,
+    ExcitationVariator,
+    RafExcitation
+} from '@motajs/animate';
+
+/** 渲染激励源 */
+export const rafExcitation = new RafExcitation();
+/** 渲染分频器 */
+export const excitationDivider = new ExcitationDivider<number>();
+
+if (DEBUG_VARIATOR) {
+    const variator = new ExcitationVariator();
+    variator.bindExcitation(rafExcitation);
+    variator.setSpeed(VARIATOR_DEBUG_SPEED);
+    excitationDivider.bindExcitation(variator);
+} else {
+    excitationDivider.bindExcitation(rafExcitation);
+}
+
+if (DEBUG_DIVIDER) {
+    excitationDivider.setDivider(DIVIDER_DEBUG_DIVIDER);
+}
 
 export const mainRenderer = new MotaRenderer({
     canvas: '#render-main',
     width: MAIN_WIDTH,
-    height: MAIN_HEIGHT
+    height: MAIN_HEIGHT,
+    // 使用分频器，用户可以在设置中调整，如果设备性能较差调高分频有助于提高性能表现
+    excitaion: excitationDivider
 });
+
+export const using = new RendererUsing(mainRenderer);
+
+export const { createApp, render, tagManager } =
+    createRendererFor(mainRenderer);

packages-user/client-modules/src/render/shared.ts

@@ -2,6 +2,25 @@ import { ElementLocator, Font } from '@motajs/render';
 
 // 本文件为 UI 配置文件，你可以修改下面的每个常量来控制 UI 的显示参数，每个常量都有注释说明
 
+//#region 调试用参数
+
+/**
+ * 渲染器的激励源是否使用变速器，使用后可以通过 {@link VARIATOR_DEBUG_SPEED} 调整激励源速度，
+ * 从而调整动画等内容的执行速度，方便调试
+ */
+export const DEBUG_VARIATOR = false;
+/** 当使用变速器作为激励源调试时，变速器的速度 */
+export const VARIATOR_DEBUG_SPEED = 0.2;
+/**
+ * 是否使用分频器调试，使用后可以通过 {@link DIVIDER_DEBUG_DIVIDER} 调整分配比例，
+ * 降低画面刷新频率及每帧执行函数的执行频率，方便调试
+ */
+export const DEBUG_DIVIDER = false;
+/** 当使用分频器调试时，分配比例 */
+export const DIVIDER_DEBUG_DIVIDER = 60;
+
+//#endregion
+
 //#region 地图
 
 /** 每个格子的默认宽度，现阶段用处不大 */

packages-user/client-modules/src/render/ui/main.tsx

@@ -2,7 +2,7 @@ import {
     Font,
     IActionEvent,
     MotaOffscreenCanvas2D,
-    Sprite
+    CustomRenderItem
 } from '@motajs/render';
 // import { WeatherController } from '../weather';
 import { defineComponent, onUnmounted, reactive, ref } from 'vue';
@@ -27,11 +27,10 @@ import {
 import { ReplayingStatus } from './toolbar';
 import { getHeroStatusOn, state } from '@user/data-state';
 import { hook } from '@user/data-base';
-import { FloorChange } from '../legacy/fallback';
 import { mainUIController } from './controller';
 import { isNil } from 'lodash-es';
 import { mainMapExtension, mainMapRenderer } from '../commonIns';
-import { onTick } from '@motajs/render-vue';
+import { using } from '../renderer';
 
 const MainScene = defineComponent(() => {
     //#region 基本定义
@@ -147,7 +146,7 @@ const MainScene = defineComponent(() => {
     //#region sprite 渲染
 
     let lastLength = 0;
-    onTick(() => {
+    using.onExcitedFunc(() => {
         const len = core.status.stepPostfix?.length ?? 0;
         if (len !== lastLength) {
             mapMiscSprite.value?.update();
@@ -155,7 +154,7 @@ const MainScene = defineComponent(() => {
         }
     });
 
-    const mapMiscSprite = ref<Sprite>();
+    const mapMiscSprite = ref<CustomRenderItem>();
 
     const renderMapMisc = (canvas: MotaOffscreenCanvas2D) => {
         const step = core.status.stepPostfix;
@@ -245,7 +244,7 @@ const MainScene = defineComponent(() => {
                     loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
                 />
                 <Textbox id="main-textbox" {...mainTextboxProps}></Textbox>
-                <FloorChange id="floor-change" zIndex={50}></FloorChange>
+                {/* <FloorChange id="floor-change" zIndex={50}></FloorChange> */}
                 <Tip
                     id="main-tip"
                     zIndex={80}
@@ -253,7 +252,7 @@ const MainScene = defineComponent(() => {
                     pad={[12, 6]}
                     corner={16}
                 />
-                <sprite
+                <custom
                     noevent
                     loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
                     ref={mapMiscSprite}

packages-user/client-modules/src/render/ui/settings.tsx

@@ -27,8 +27,7 @@ import { CENTER_LOC, FULL_LOC, MAIN_HEIGHT, POP_BOX_WIDTH } from '../shared';
 import { useKey } from '../use';
 
 export interface MainSettingsProps
-    extends Partial<ChoicesProps>,
-        UIComponentProps {
+    extends Partial<ChoicesProps>, UIComponentProps {
     loc: ElementLocator;
 }
 

packages-user/client-modules/src/render/ui/title.tsx

@@ -27,12 +27,13 @@ import {
     transitionedColor,
     useKey
 } from '../use';
-import { hyper, linear, sleep } from 'mutate-animate';
 import { ExitFullscreen, Fullscreen, SoundVolume } from '../components';
 import { mainSetting, triggerFullscreen } from '@motajs/legacy-ui';
 import { saveLoad } from './save';
 import { MainSceneUI } from './main';
 import { adjustCover } from '../utils';
+import { cosh, CurveMode, linear } from '@motajs/animate';
+import { sleep } from '@motajs/common';
 
 const enum TitleButton {
     StartGame,
@@ -106,8 +107,12 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
             color: v.color,
             name: v.name,
             hard: '',
-            colorTrans: transitionedColor('#fff', 400, hyper('sin', 'out'))!,
-            scale: transitioned(1, 400, hyper('sin', 'out'))!
+            colorTrans: transitionedColor(
+                '#fff',
+                400,
+                cosh(2, CurveMode.EaseOut)
+            )!,
+            scale: transitioned(1, 400, cosh(2, CurveMode.EaseOut))!
         };
     });
 
@@ -118,8 +123,12 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
             color: core.arrayToRGBA(v.color!),
             name: v.title,
             hard: v.name,
-            colorTrans: transitionedColor('#fff', 400, hyper('sin', 'out'))!,
-            scale: transitioned(1, 400, hyper('sin', 'out'))!
+            colorTrans: transitionedColor(
+                '#fff',
+                400,
+                cosh(2, CurveMode.EaseOut)
+            )!,
+            scale: transitioned(1, 400, cosh(2, CurveMode.EaseOut))!
         };
     });
     // 返回按钮
@@ -128,11 +137,15 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
         color: '#aaa',
         name: '返回',
         hard: '',
-        colorTrans: transitionedColor('#fff', 400, hyper('sin', 'out'))!
+        colorTrans: transitionedColor('#fff', 400, cosh(2, CurveMode.EaseOut))!
     });
 
     /** 声音设置按钮的颜色 */
-    const soundColor = transitionedColor('#ddd', 400, hyper('sin', 'out'))!;
+    const soundColor = transitionedColor(
+        '#ddd',
+        400,
+        cosh(2, CurveMode.EaseOut)
+    )!;
 
     /** 开始界面按钮的不透明度，选择难度界面的不透明度使用 `1-buttonsAlpha` 计算 */
     const buttonsAlpha = transitioned(1, 300, linear())!;
@@ -152,7 +165,11 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
     /** 选择难度界面按钮的高度 */
     const hardHeight = (hard.length - 1) * 40 + 60;
     /** 按钮的背景框高度 */
-    const rectHeight = transitioned(buttonHeight, 600, hyper('sin', 'in-out'))!;
+    const rectHeight = transitioned(
+        buttonHeight,
+        600,
+        cosh(2, CurveMode.EaseOut)
+    )!;
 
     //#region 按钮功能
 

packages-user/client-modules/src/render/ui/viewmap.tsx

@@ -24,16 +24,8 @@ import {
     watch
 } from 'vue';
 import { FloorSelector } from '../components';
-import {
-    ILayerGroupRenderExtends,
-    FloorDamageExtends,
-    FloorItemDetail,
-    LayerGroupAnimate,
-    LayerGroup,
-    LayerGroupFloorBinder
-} from '../elements';
 import { clamp, mean } from 'lodash-es';
-import { calculateStatisticsOne, StatisticsDataOneFloor } from './statistics';
+import { StatisticsDataOneFloor } from './statistics';
 import { Tip, TipExpose } from '../components';
 import { useKey } from '../use';
 import {
@@ -61,11 +53,11 @@ const viewMapProps = {
 export const ViewMap = defineComponent<ViewMapProps>(props => {
     const nowFloorId = core.status.floorId;
 
-    const layerGroupExtends: ILayerGroupRenderExtends[] = [
-        new FloorDamageExtends(),
-        new FloorItemDetail(),
-        new LayerGroupAnimate()
-    ];
+    // const layerGroupExtends: ILayerGroupRenderExtends[] = [
+    //     new FloorDamageExtends(),
+    //     new FloorItemDetail(),
+    //     new LayerGroupAnimate()
+    // ];
 
     const restHeight = STATUS_BAR_HEIGHT - 292;
     const col = restHeight / 4;
@@ -84,7 +76,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         })
     );
 
-    const group = ref<LayerGroup>();
+    // const group = ref<LayerGroup>();
     const tip = ref<TipExpose>();
     const statistics = shallowRef<StatisticsDataOneFloor>();
 
@@ -107,7 +99,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         .realize('@viewMap_down_ten', () => changeFloor(-10))
         .realize('@viewMap_book', () => openBook())
         .realize('@viewMap_fly', () => fly())
-        .realize('@viewMap_reset', () => resetCamera())
+        // .realize('@viewMap_reset', () => resetCamera())
         .realize('confirm', () => close())
         .realize('exit', (_, code, assist) => {
             // 如果按键不能触发怪物手册，则关闭界面，因为怪物手册和退出默认使用同一个按键，需要特判
@@ -145,10 +137,10 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         else tip.value?.drawTip(`无法飞往${core.floors[id].title}`);
     };
 
-    const resetCamera = () => {
-        group.value?.camera.reset();
-        group.value?.update();
-    };
+    // const resetCamera = () => {
+    //     group.value?.camera.reset();
+    //     group.value?.update();
+    // };
 
     //#region 渐变渲染
 
@@ -195,33 +187,33 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
 
     //#region 地图渲染
 
-    const renderLayer = (floorId: FloorIds) => {
-        const binder = group.value?.getExtends(
-            'floor-binder'
-        ) as LayerGroupFloorBinder;
-        binder.bindFloor(floorId);
-        group.value?.camera.reset();
-        core.status.floorId = floorId;
-        core.status.thisMap = core.status.maps[floorId];
-        statistics.value = calculateStatisticsOne(floorId);
-    };
+    // const renderLayer = (floorId: FloorIds) => {
+    //     const binder = group.value?.getExtends(
+    //         'floor-binder'
+    //     ) as LayerGroupFloorBinder;
+    //     binder.bindFloor(floorId);
+    //     group.value?.camera.reset();
+    //     core.status.floorId = floorId;
+    //     core.status.thisMap = core.status.maps[floorId];
+    //     statistics.value = calculateStatisticsOne(floorId);
+    // };
 
-    const moveCamera = (dx: number, dy: number) => {
-        const camera = group.value?.camera;
-        if (!camera) return;
-        camera.translate(dx / camera.scaleX, dy / camera.scaleX);
-        group.value?.update();
-    };
+    // const moveCamera = (dx: number, dy: number) => {
+    //     const camera = group.value?.camera;
+    //     if (!camera) return;
+    //     camera.translate(dx / camera.scaleX, dy / camera.scaleX);
+    //     group.value?.update();
+    // };
 
-    const scaleCamera = (scale: number, x: number, y: number) => {
-        const camera = group.value?.camera;
-        if (!camera) return;
-        const [cx, cy] = camera.untransformed(x, y);
-        camera.translate(cx, cy);
-        camera.scale(scale);
-        camera.translate(-cx, -cy);
-        group.value?.update();
-    };
+    // const scaleCamera = (scale: number, x: number, y: number) => {
+    //     const camera = group.value?.camera;
+    //     if (!camera) return;
+    //     const [cx, cy] = camera.untransformed(x, y);
+    //     camera.translate(cx, cy);
+    //     camera.scale(scale);
+    //     camera.translate(-cx, -cy);
+    //     group.value?.update();
+    // };
 
     //#region 事件监听
 
@@ -230,7 +222,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
         if (ev.offsetX < col * 2) {
             changeFloor(1);
         } else {
-            resetCamera();
+            // resetCamera();
         }
     };
 
@@ -293,7 +285,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
             const dx = ev.offsetX - lastMoveX;
             const dy = ev.offsetY - lastMoveY;
             movement += Math.hypot(dx, dy);
-            moveCamera(dx, dy);
+            // moveCamera(dx, dy);
         }
         moved = true;
         lastMoveX = ev.offsetX;
@@ -322,7 +314,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                     return;
                 }
                 if (!isFinite(scale) || scale === 0) return;
-                scaleCamera(scale, cx, cy);
+                // scaleCamera(scale, cx, cy);
             }
         } else {
             if (mouseDown) {
@@ -341,8 +333,8 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
 
     const wheelMap = (ev: IWheelEvent) => {
         if (ev.altKey) {
-            const scale = ev.wheelY < 0 ? 1.1 : 0.9;
-            scaleCamera(scale, ev.offsetX, ev.offsetY);
+            // const scale = ev.wheelY < 0 ? 1.1 : 0.9;
+            // scaleCamera(scale, ev.offsetX, ev.offsetY);
         } else if (ev.ctrlKey) {
             changeFloor(-Math.sign(ev.wheelY) * 10);
         } else {
@@ -362,7 +354,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
     };
 
     onMounted(() => {
-        renderLayer(floorId.value);
+        // renderLayer(floorId.value);
     });
 
     onUnmounted(() => {
@@ -371,7 +363,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
     });
 
     watch(floorId, value => {
-        renderLayer(value);
+        // renderLayer(value);
     });
 
     //#region 组件树
@@ -394,7 +386,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 v-model:now={now.value}
                 onClose={close}
             />
-            <layer-group
+            {/* <layer-group
                 ref={group}
                 ex={layerGroupExtends}
                 loc={[STATUS_BAR_WIDTH, 0, MAP_WIDTH, MAP_HEIGHT]}
@@ -410,7 +402,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 <layer layer="event" zIndex={30}></layer>
                 <layer layer="fg" zIndex={40}></layer>
                 <layer layer="fg2" zIndex={50}></layer>
-            </layer-group>
+            </layer-group> */}
             <Tip
                 ref={tip}
                 zIndex={40}
@@ -418,7 +410,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 pad={[12, 6]}
                 corner={16}
             />
-            <sprite
+            <custom
                 loc={[STATUS_BAR_WIDTH, 0, MAP_WIDTH, 64]}
                 render={renderTop}
                 alpha={topAlpha.value}
@@ -428,7 +420,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                 onLeave={leaveTop}
                 onClick={clickTop}
             />
-            <sprite
+            <custom
                 loc={[STATUS_BAR_WIDTH, MAP_HEIGHT - 64, MAP_WIDTH, 64]}
                 render={renderBottom}
                 alpha={bottomAlpha.value}
@@ -554,7 +546,7 @@ export const ViewMap = defineComponent<ViewMapProps>(props => {
                     loc={loc3}
                     anc={[0.5, 0.5]}
                     cursor="pointer"
-                    onClick={resetCamera}
+                    // onClick={resetCamera}
                 />
             </container>
         </container>

packages-user/client-modules/src/render/use.ts

@@ -1,6 +1,15 @@
+import {
+    ExcitationCurve,
+    excited,
+    IAnimatable,
+    IExcitableController,
+    ITransition,
+    Transition
+} from '@motajs/animate';
+import { logger } from '@motajs/common';
+import { IRenderItem, IRenderTreeRoot } from '@motajs/render';
 import { Hotkey, gameKey } from '@motajs/system';
 import { loading } from '@user/data-base';
-import { TimingFn, Transition } from 'mutate-animate';
 import {
     ComponentInternalInstance,
     getCurrentInstance,
@@ -107,7 +116,7 @@ export interface ITransitionedController<T> {
      * 设置动画的速率曲线
      * @param timing 速率曲线
      */
-    mode(timing: TimingFn): void;
+    mode(timing: ExcitationCurve): void;
 
     /**
      * 设置动画的动画时长
@@ -117,37 +126,29 @@ export interface ITransitionedController<T> {
 }
 
 class RenderTransition implements ITransitionedController<number> {
-    private static key: number = 0;
-
-    private readonly key: string = `$${RenderTransition.key++}`;
-
     public readonly ref: Ref<number>;
 
     set value(v: number) {
-        this.transition.transition(this.key, v);
+        this.set(v);
     }
     get value() {
-        return this.transition.value[this.key];
+        return this.ref.value;
     }
 
     constructor(
         value: number,
-        public readonly transition: Transition,
+        public readonly transition: ITransition,
         public time: number,
-        public curve: TimingFn
+        public curve: ExcitationCurve
     ) {
         this.ref = ref(value);
-        transition.value[this.key] = value;
-        transition.ticker.add(() => {
-            this.ref.value = transition.value[this.key];
-        });
     }
 
     set(value: number, time: number = this.time): void {
-        this.transition.time(time).mode(this.curve).transition(this.key, value);
+        this.transition.curve(this.curve).transition(this.ref).to(value, time);
     }
 
-    mode(timing: TimingFn): void {
+    mode(timing: ExcitationCurve): void {
         this.curve = timing;
     }
 
@@ -166,6 +167,13 @@ class RenderColorTransition implements ITransitionedController<string> {
     private readonly keyB: string = `$colorB${RenderColorTransition.key++}`;
     private readonly keyA: string = `$colorA${RenderColorTransition.key++}`;
 
+    private readonly rValue: IAnimatable;
+    private readonly gValue: IAnimatable;
+    private readonly bValue: IAnimatable;
+    private readonly aValue: IAnimatable;
+
+    private readonly controller: IExcitableController<number> | null = null;
+
     public readonly ref: Ref<string>;
 
     set value(v: string) {
@@ -177,26 +185,32 @@ class RenderColorTransition implements ITransitionedController<string> {
 
     constructor(
         value: string,
-        public readonly transition: Transition,
+        public readonly transition: ITransition,
         public time: number,
-        public curve: TimingFn
+        public curve: ExcitationCurve
     ) {
         this.ref = ref(value);
         const [r, g, b, a] = this.decodeColor(value);
-        transition.value[this.keyR] = r;
-        transition.value[this.keyG] = g;
-        transition.value[this.keyB] = b;
-        transition.value[this.keyA] = a;
-        transition.ticker.add(() => {
-            this.ref.value = this.encodeColor();
-        });
+        this.rValue = { value: r };
+        this.gValue = { value: g };
+        this.bValue = { value: b };
+        this.aValue = { value: a };
+        if (!transition.excitation) {
+            logger.warn(94, 'transitionedColor');
+        } else {
+            this.controller = transition.excitation.add(
+                excited(() => {
+                    this.ref.value = this.encodeColor();
+                })
+            );
+        }
     }
 
     set(value: string, time: number = this.time): void {
         this.transitionColor(this.decodeColor(value), time);
     }
 
-    mode(timing: TimingFn): void {
+    mode(timing: ExcitationCurve): void {
         this.curve = timing;
     }
 
@@ -206,12 +220,15 @@ class RenderColorTransition implements ITransitionedController<string> {
 
     private transitionColor([r, g, b, a]: ColorRGBA, time: number) {
         this.transition
-            .mode(this.curve)
-            .time(time)
-            .transition(this.keyR, r)
-            .transition(this.keyG, g)
-            .transition(this.keyB, b)
-            .transition(this.keyA, a);
+            .curve(this.curve)
+            .transition(this.rValue)
+            .to(r, time)
+            .transition(this.gValue)
+            .to(g, time)
+            .transition(this.bValue)
+            .to(b, time)
+            .transition(this.aValue)
+            .to(a, time);
     }
 
     private decodeColor(color: string): ColorRGBA {
@@ -272,31 +289,37 @@ class RenderColorTransition implements ITransitionedController<string> {
     }
 
     private encodeColor() {
-        const r = this.transition.value[this.keyR];
-        const g = this.transition.value[this.keyG];
-        const b = this.transition.value[this.keyB];
-        const a = this.transition.value[this.keyA];
+        const r = this.rValue.value;
+        const g = this.gValue.value;
+        const b = this.bValue.value;
+        const a = this.aValue.value;
         return `rgba(${r},${g},${b},${a})`;
     }
 }
 
-const transitionMap = new Map<ComponentInternalInstance, Transition>();
+const transitionMap = new Map<ComponentInternalInstance, ITransition>();
 
 function checkTransition() {
     const instance = getCurrentInstance();
     if (!instance) return null;
+    const root = instance.root;
+    if (!root) return null;
+    const el = root.vnode.el as IRenderItem;
+    const renderer = el.parent as IRenderTreeRoot;
+    if (!renderer) return null;
     if (instance.isUnmounted) {
         const tran = transitionMap.get(instance);
-        tran?.ticker.destroy();
+        tran?.destroy();
         transitionMap.delete(instance);
         return null;
     }
     if (!transitionMap.has(instance)) {
         const tran = new Transition();
+        tran.bindExcitation(renderer.excitation);
         transitionMap.set(instance, tran);
         onUnmounted(() => {
             transitionMap.delete(instance);
-            tran.ticker.destroy();
+            tran.destroy();
         });
     }
     const tran = transitionMap.get(instance);
@@ -320,7 +343,7 @@ function checkTransition() {
 export function transitioned(
     value: number,
     time: number,
-    curve: TimingFn
+    curve: ExcitationCurve
 ): ITransitionedController<number> | null {
     const tran = checkTransition();
     if (!tran) return null;
@@ -344,7 +367,7 @@ export function transitioned(
 export function transitionedColor(
     color: string,
     time: number,
-    curve: TimingFn
+    curve: ExcitationCurve
 ): ITransitionedController<string> | null {
     const tran = checkTransition();
     if (!tran) return null;

packages-user/client-modules/src/render/utils/use.ts

@@ -1,8 +1,9 @@
 import { onUnmounted } from 'vue';
 import { WeatherController } from '../weather';
+import { IRenderTreeRoot } from '@motajs/render';
 
-export function useWeather(): [WeatherController] {
-    const weather = new WeatherController();
+export function useWeather(renderer: IRenderTreeRoot): [WeatherController] {
+    const weather = new WeatherController(renderer);
 
     onUnmounted(() => {
         weather.destroy();

packages-user/client-modules/src/render/weather/controller.ts

@@ -1,19 +1,21 @@
-import { RenderItem } from '@motajs/render';
+import { IRenderTreeRoot, RenderItem } from '@motajs/render';
 import { IWeather, IWeatherController, IWeatherInstance } from './types';
 import { logger } from '@motajs/common';
 import { isNil } from 'lodash-es';
-import { Ticker } from 'mutate-animate';
+import { IExcitable } from '@motajs/animate';
 
 type WeatherConstructor = new () => IWeather;
 
-export class WeatherController implements IWeatherController {
+// todo: refactor?
+
+export class WeatherController
+    implements IWeatherController, IExcitable<number>
+{
     /** 暴露到全局的控制器 */
     static extern: Map<string, IWeatherController> = new Map();
     /** 注册的天气 */
     static weathers: Map<string, WeatherConstructor> = new Map();
 
-    private static ticker: Ticker = new Ticker();
-
     /** 暴露至全局的 id */
     private externId?: string;
     /** 天气元素纵深 */
@@ -23,13 +25,13 @@ export class WeatherController implements IWeatherController {
 
     container: RenderItem | null = null;
 
-    constructor() {
-        WeatherController.ticker.add(this.tick);
+    constructor(readonly renderer: IRenderTreeRoot) {
+        renderer.delegateExcitable(this);
     }
 
-    private tick = (time: number) => {
-        this.active.forEach(v => v.weather.tick(time));
-    };
+    excited(payload: number): void {
+        this.active.forEach(v => v.weather.tick(payload));
+    }
 
     /**
      * 设置天气元素纵深，第一个天气会被设置为 `zIndex`，之后依次是 `zIndex+1` `zIndex+2` ...
@@ -111,7 +113,6 @@ export class WeatherController implements IWeatherController {
 
     destroy() {
         this.clearWeather();
-        WeatherController.ticker.remove(this.tick);
         if (!isNil(this.externId)) {
             WeatherController.extern.delete(this.externId);
         }
@@ -138,8 +139,7 @@ export class WeatherController implements IWeatherController {
 export class WeatherInstance<
     R extends RenderItem = RenderItem,
     T extends IWeather<R> = IWeather<R>
-> implements IWeatherInstance<R, T>
-{
+> implements IWeatherInstance<R, T> {
     constructor(
         readonly weather: T,
         readonly element: R

packages-user/client-modules/src/render/weather/presets/cloudLike.ts

@@ -1,11 +1,11 @@
 import {
     MotaOffscreenCanvas2D,
-    Sprite,
+    CustomRenderItem,
     SizedCanvasImageSource
 } from '@motajs/render';
 import { Weather } from '../weather';
 
-export abstract class CloudLike extends Weather<Sprite> {
+export abstract class CloudLike extends Weather<CustomRenderItem> {
     /** 不透明度 */
     private alpha: number = 0;
     /** 水平速度 */
@@ -78,8 +78,8 @@ export abstract class CloudLike extends Weather<Sprite> {
         this.cy %= this.image.height;
     }
 
-    createElement(level: number): Sprite {
-        const element = new Sprite('static', true);
+    createElement(level: number): CustomRenderItem {
+        const element = new CustomRenderItem(true);
         element.setRenderFn(canvas => this.drawImage(canvas));
         this.maxSpeed = Math.sqrt(level) * 100;
         this.vx = ((Math.random() - 0.5) * this.maxSpeed) / 2;

packages-user/client-modules/src/render/weather/presets/sun.ts

@@ -1,8 +1,8 @@
-import { MotaOffscreenCanvas2D, Sprite } from '@motajs/render';
+import { MotaOffscreenCanvas2D, CustomRenderItem } from '@motajs/render';
 import { Weather } from '../weather';
 import { clamp } from 'lodash-es';
 
-export class SunWeather extends Weather<Sprite> {
+export class SunWeather extends Weather<CustomRenderItem> {
     /** 阳光图片 */
     private image: HTMLImageElement | null = null;
     /** 阳光图片的不透明度 */
@@ -41,8 +41,8 @@ export class SunWeather extends Weather<Sprite> {
         }
     }
 
-    createElement(level: number): Sprite {
-        const element = new Sprite('static', true);
+    createElement(level: number): CustomRenderItem {
+        const element = new CustomRenderItem(true);
         element.setRenderFn(canvas => this.drawSun(canvas));
         this.maxAlpha = level / 10;
         this.minAlpha = level / 20;