refactor: 渲染系统的部分目录结构

public/libs/control.js

@@ -2853,11 +2853,7 @@ control.prototype.getMappedName = function (name) {
 ////// 更改天气效果 //////
 control.prototype.setWeather = function (type, level) {
     // Deprecated. Use WeatherController API instead.
-    Mota.r(() => {
-        const controller = Mota.require('module', 'Weather').controller;
-        controller.clearWeather();
-        if (type !== null && type !== void 0) controller.activate(type, level);
-    });
+    // Fallback see src/module/fallback/weather.ts
 };
 
 ////// 注册一个天气 //////

src/core/index.ts

@@ -75,7 +75,6 @@ import './render/index';
 import * as RenderUtils from './render/utils';
 import '@/module';
 import { MotaOffscreenCanvas2D } from './fx/canvas2d';
-import { TextboxStore } from './render/index';
 
 // ----- 类注册
 Mota.register('class', 'CustomToolbar', CustomToolbar);
@@ -157,8 +156,7 @@ Mota.register('module', 'Render', {
     LayerGroupFloorBinder,
     Camera,
     MotaOffscreenCanvas2D,
-    Utils: RenderUtils,
-    TextboxStore
+    Utils: RenderUtils
 });
 Mota.register('module', 'Action', {
     HeroKeyMover

src/core/render/index.ts

@@ -0,0 +1,14 @@
+export * from './preset';
+export * from './renderer';
+export * from './adapter';
+export * from './cache';
+export * from './camera';
+export * from './container';
+export * from './frame';
+export * from './gl2';
+export * from './item';
+export * from './render';
+export * from './shader';
+export * from './sprite';
+export * from './transform';
+export * from './utils';

src/core/render/item.ts

@@ -388,7 +388,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /**
      * 渲染函数
      * @param canvas 渲染至的画布
-     * @param transform 当前变换矩阵的，渲染时已经进行变换处理，不需要对画布再次进行变换处理
+     * @param transform 当前变换矩阵的，渲染时已经进行变换处理，不需要对画布再次进行变换处理。
      *                  此参数可用于自己对元素进行变换处理，也会用于对子元素的处理。
      *                  例如对于`absolute`类型的元素，同时有对视角改变的需求，就可以通过此参数进行变换。
      *                  样板内置的`Layer`及`Damage`元素就是通过此方式实现的

src/game/system.ts

@@ -38,7 +38,6 @@ import type * as Animation from 'mutate-animate';
 import type * as RenderUtils from '@/core/render/utils';
 import type { WeatherController } from '@/module/weather/weather';
 import type { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
-import type { TextboxStore } from '@/core/render';
 
 interface ClassInterface {
     // 渲染进程与游戏进程通用
@@ -115,7 +114,6 @@ interface ModuleInterface {
         Camera: typeof Camera;
         MotaOffscreenCanvas2D: typeof MotaOffscreenCanvas2D;
         Utils: typeof RenderUtils;
-        TextboxStore: typeof TextboxStore;
     };
     State: {
         ItemState: typeof ItemState;

src/module/fallback/index.ts

@@ -1,9 +1,10 @@
 import { Patch } from '@/common/patch';
 import { patchAudio } from './audio';
-
-patchAudio();
+import { patchWeather } from './weather';
 
 export function patchAll() {
+    patchAudio();
+    patchWeather();
     const loading = Mota.require('var', 'loading');
     loading.once('coreInit', () => {
         Patch.patchAll();

src/module/fallback/weather.ts

@@ -0,0 +1,21 @@
+import { Patch, PatchClass } from '@/common/patch';
+import { WeatherController } from '../weather';
+import { isNil } from 'lodash-es';
+
+export function patchWeather() {
+    const patch = new Patch(PatchClass.Control);
+    let nowWeather: string = '';
+    let nowLevel: number = 0;
+
+    patch.add('setWeather', (type, level) => {
+        const weather = WeatherController.get('main');
+        if (!weather) return;
+        if (type === nowWeather && level === nowLevel) return;
+        weather.clearWeather();
+        if (!isNil(type)) {
+            weather.activate(type, level);
+            nowWeather = type;
+            nowLevel = level ?? 5;
+        }
+    });
+}

src/module/index.ts

@@ -1,19 +1,21 @@
 import { soundPlayer } from './audio';
 import { patchAll } from './fallback';
-import { controller } from './weather';
+import { create } from './render';
 import { RainWeather } from './weather/rain';
 import { WeatherController } from './weather/weather';
 
 patchAll();
 Mota.register('module', 'Weather', {
-    controller,
     WeatherController,
     RainWeather
 });
-Mota.register('module', 'Audio', { soundPlayer });
+Mota.register('module', 'Audio', {
+    soundPlayer
+});
+Mota.require('var', 'loading').once('coreInit', create);
 
 export * from './weather';
 export * from './audio';
 export * from './loader';
 export * from './fallback';
-export * from './ui';
+export * from './render';

src/module/render/index.tsx

@@ -1,26 +1,25 @@
 import { FloorItemDetail } from '@/plugin/fx/itemDetail';
-import { FloorDamageExtends } from './preset/damage';
-import { LayerDoorAnimate } from './preset/floor';
-import { HeroRenderer } from './preset/hero';
-import { MotaRenderer } from './render';
-import { LayerShadowExtends } from '../fx/shadow';
+import { FloorDamageExtends, LayerGroup } from '@/core/render';
+import { LayerDoorAnimate } from '@/core/render';
+import { HeroRenderer } from '@/core/render';
+import { MotaRenderer } from '@/core/render';
+import { LayerShadowExtends } from '@/core/fx/shadow';
 import { LayerGroupFilter } from '@/plugin/fx/gameCanvas';
-import { LayerGroupAnimate } from './preset/animate';
+import { LayerGroupAnimate } from '@/core/render';
 import { LayerGroupPortal } from '@/plugin/fx/portal';
 import { LayerGroupHalo } from '@/plugin/fx/halo';
-import { FloorViewport } from './preset/viewport';
+import { FloorViewport } from '@/core/render';
 import { PopText } from '@/plugin/fx/pop';
 import { FloorChange } from '@/plugin/fallback';
-import { createApp } from './renderer';
-import { defineComponent } from 'vue';
-import { Textbox } from '../../module/ui/components';
-import { ILayerGroupRenderExtends, ILayerRenderExtends } from './preset';
-import { Props } from './utils';
+import { createApp } from '@/core/render';
+import { defineComponent, onMounted, ref } from 'vue';
+import { Textbox } from './components';
+import { ILayerGroupRenderExtends, ILayerRenderExtends } from '@/core/render';
+import { Props } from '@/core/render';
+import { WeatherController } from '../weather';
 
-let main: MotaRenderer;
-
-Mota.require('var', 'loading').once('coreInit', () => {
-    main = new MotaRenderer();
+export function create() {
+    const main = new MotaRenderer();
 
     const App = defineComponent(_props => {
         const layerGroupExtends: ILayerGroupRenderExtends[] = [
@@ -57,9 +56,16 @@ Mota.require('var', 'loading').once('coreInit', () => {
             lineHeight: 6
         };
 
+        const map = ref<LayerGroup>();
+        const weather = new WeatherController('main');
+
+        onMounted(() => {
+            weather.bind(map.value);
+        });
+
         return () => (
             <container id="map-draw" {...mapDrawProps}>
-                <layer-group id="layer-main" ex={layerGroupExtends}>
+                <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>
                     <layer layer="event" zIndex={30} ex={eventExtends}></layer>
@@ -75,28 +81,16 @@ Mota.require('var', 'loading').once('coreInit', () => {
 
     main.hide();
     createApp(App).mount(main);
-    // render(<Com></Com>, main);
+
+    Mota.require('var', 'hook').on('reset', () => {
+        main.show();
+    });
+
+    Mota.require('var', 'hook').on('restart', () => {
+        main.hide();
+    });
 
     console.log(main);
-});
+}
 
-Mota.require('var', 'hook').on('reset', () => {
-    main.show();
-});
-
-Mota.require('var', 'hook').on('restart', () => {
-    main.hide();
-});
-
-export * from './preset';
-export * from './renderer';
-export * from './adapter';
-export * from './cache';
-export * from './camera';
-export * from './container';
-export * from './gl2';
-export * from './item';
-export * from './render';
-export * from './shader';
-export * from './sprite';
-export * from './transform';
+export * from './components';

src/module/ui/index.ts

@@ -1 +0,0 @@
-export * from './components';

src/module/weather/index.ts

@@ -1,3 +1,11 @@
+import { RainWeather } from './rain';
+import { SnowWeather } from './snow';
+import { SunWeather } from './sun';
 import { WeatherController } from './weather';
 
-export const controller = new WeatherController();
+WeatherController.register('rain', RainWeather);
+WeatherController.register('sun', SunWeather);
+WeatherController.register('snow', SnowWeather);
+
+export * from './weather';
+export * from './rain';

src/module/weather/rain.ts

@@ -1,5 +1,5 @@
 import { Shader, ShaderProgram } from '@/core/render/shader';
-import { IWeather, WeatherController } from './weather';
+import { IWeather } from './weather';
 import { MotaRenderer } from '@/core/render/render';
 import { Container } from '@/core/render/container';
 import { IShaderUniform, UniformType } from '@/core/render/gl2';
@@ -78,67 +78,66 @@ void main() {
 /** 雨滴顶点坐标 */
 const vertex = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
 
-Mota.require('var', 'loading').once('coreInit', () => {
-    const shader = new RainShader();
-    const gl = shader.gl;
-    shader.size(480, 480);
-    shader.setHD(true);
-    shader.setZIndex(100);
-    RainWeather.shader = shader;
-    const program = shader.createProgram(ShaderProgram);
-    program.fs(rainFs);
-    program.vs(rainVs);
-    program.requestCompile();
-    const pos = program.defineAttribArray('a_rainVertex');
-    program.defineAttribArray('a_offset');
-    program.defineAttribArray('a_data');
-    program.defineUniform('u_progress', shader.UNIFORM_1f);
-    program.defineUniform('u_color', shader.UNIFORM_4f);
-    program.mode(shader.DRAW_ARRAYS_INSTANCED);
-    RainShader.rainProgram = program;
-    shader.useProgram(program);
-
-    if (pos) {
-        pos.buffer(vertex, gl.STATIC_DRAW);
-        pos.pointer(2, gl.FLOAT, false, 0, 0);
-        pos.enable();
-    }
-});
-
 export class RainWeather implements IWeather {
-    static id: string = 'rain';
-
-    static shader: RainShader;
+    readonly shader: RainShader;
+    readonly program: ShaderProgram;
 
     private progress: IShaderUniform<UniformType.Uniform1f> | null = null;
 
-    constructor(readonly level: number = 5) {}
+    constructor(readonly level: number = 5) {
+        const shader = new RainShader();
+        const gl = shader.gl;
+        shader.size(480, 480);
+        shader.setHD(true);
+        shader.setZIndex(100);
+        const program = shader.createProgram(ShaderProgram);
+        program.fs(rainFs);
+        program.vs(rainVs);
+        program.requestCompile();
+        const pos = program.defineAttribArray('a_rainVertex');
+        program.defineAttribArray('a_offset');
+        program.defineAttribArray('a_data');
+        program.defineUniform('u_progress', shader.UNIFORM_1f);
+        program.defineUniform('u_color', shader.UNIFORM_4f);
+        program.mode(shader.DRAW_ARRAYS_INSTANCED);
+        shader.useProgram(program);
+
+        if (pos) {
+            pos.buffer(vertex, gl.STATIC_DRAW);
+            pos.pointer(2, gl.FLOAT, false, 0, 0);
+            pos.enable();
+        }
+        this.shader = shader;
+        this.program = program;
+    }
 
     activate(): void {
         const render = MotaRenderer.get('render-main');
         const draw = render?.getElementById('map-draw') as Container;
         if (!draw) return;
-        const shader = RainWeather.shader;
+        const shader = this.shader;
         shader.append(draw);
 
         const gl = shader.gl;
-        const program = RainShader.rainProgram;
+        const program = this.program;
         program.paramArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, 100 * this.level);
 
         this.progress = program.getUniform<UniformType.Uniform1f>('u_progress');
+        shader.useProgram(program);
         shader.generateRainPath(
             this.level * 100,
             (((Math.random() - 0.5) * Math.PI) / 30) * this.level,
-            (Math.PI / 180) * (12 - this.level)
+            (Math.PI / 180) * (12 - this.level),
+            program
         );
     }
 
     frame(): void {
-        RainWeather.shader.update(RainWeather.shader);
+        this.shader.update(this.shader);
         const time = 5000 - 400 * this.level;
         const progress = (Date.now() % time) / time;
 
-        RainWeather.shader.useProgram(RainShader.rainProgram);
+        this.shader.useProgram(this.program);
         this.progress?.set(progress);
     }
 
@@ -147,25 +146,23 @@ export class RainWeather implements IWeather {
         const draw = render?.getElementById('map-draw') as Container;
         const layer = draw.children;
         if (!layer || !draw) return;
-        const shader = RainWeather.shader;
+        const shader = this.shader;
         draw.appendChild(...layer);
         shader.remove();
     }
 }
 
-WeatherController.register(RainWeather);
-
 class RainShader extends Shader {
-    static rainProgram: ShaderProgram;
-    static backProgram: ShaderProgram;
-
     /**
      * 生成雨滴
      * @param num 雨滴数量
      */
-    generateRainPath(num: number, angle: number, deviation: number) {
-        const program = RainShader.rainProgram;
-        RainWeather.shader.useProgram(program);
+    generateRainPath(
+        num: number,
+        angle: number,
+        deviation: number,
+        program: ShaderProgram
+    ) {
         const aOffset = program.getAttribArray('a_offset');
         const aData = program.getAttribArray('a_data');
         const color = program.getUniform<UniformType.Uniform4f>('u_color');

src/module/weather/snow.ts

@@ -1,5 +1,5 @@
 import { Shader, ShaderProgram } from '@/core/render/shader';
-import { IWeather, WeatherController } from './weather';
+import { IWeather } from './weather';
 import { MotaRenderer } from '@/core/render/render';
 import { Container } from '@/core/render/container';
 import { GL2Program, IShaderUniform, UniformType } from '@/core/render/gl2';
@@ -174,8 +174,6 @@ export class SnowWeather implements IWeather {
     }
 }
 
-WeatherController.register(SnowWeather);
-
 class SnowShader extends Shader {
     static snowProgram: ShaderProgram;
     static backProgram: ShaderProgram;

src/module/weather/sun.ts

@@ -1,4 +1,4 @@
-import { IWeather, WeatherController } from './weather';
+import { IWeather } from './weather';
 
 export class SunWeather implements IWeather {
     static id: string = 'sun';
@@ -9,5 +9,3 @@ export class SunWeather implements IWeather {
 
     deactivate(): void {}
 }
-
-WeatherController.register(SunWeather);

src/module/weather/weather.ts

@@ -1,11 +1,12 @@
 import { logger } from '@/core/common/logger';
+import { RenderItem } from '@/core/render';
 import { Ticker } from 'mutate-animate';
 
 export interface IWeather {
     /**
      * 初始化天气，当天气被添加时会被立刻调用
      */
-    activate(): void;
+    activate(item: RenderItem): void;
 
     /**
      * 每帧执行的函数
@@ -15,21 +16,25 @@ export interface IWeather {
     /**
      * 摧毁这个天气，当天气被删除时会执行
      */
-    deactivate(): void;
+    deactivate(item: RenderItem): void;
 }
 
-interface Weather<T extends IWeather = IWeather> {
-    id: string;
-    new (level?: number): T;
-}
+type Weather = new (level?: number) => IWeather;
 
 export class WeatherController {
     static list: Map<string, Weather> = new Map();
+    static map: Map<string, WeatherController> = new Map();
 
     /** 当前的所有天气 */
     active: Set<IWeather> = new Set();
     ticker: Ticker = new Ticker();
 
+    private binded?: RenderItem;
+
+    constructor(public readonly id: string) {
+        WeatherController.map.set(id, this);
+    }
+
     private tick = () => {
         this.active.forEach(v => {
             v.frame();
@@ -40,9 +45,11 @@ export class WeatherController {
      * 清空所有天气
      */
     clearWeather() {
-        this.active.forEach(v => {
-            v.deactivate();
-        });
+        if (this.binded) {
+            this.active.forEach(v => {
+                v.deactivate(this.binded!);
+            });
+        }
         this.active.clear();
     }
 
@@ -50,7 +57,7 @@ export class WeatherController {
      * 获取一个天气
      * @param weather 要获取的天气
      */
-    getWeather<T extends IWeather>(weather: Weather<T>): T | null {
+    getWeather<T extends IWeather = IWeather>(weather: Weather): T | null {
         return ([...this.active].find(v => v instanceof weather) as T) ?? null;
     }
 
@@ -68,7 +75,9 @@ export class WeatherController {
         }
         const weather = new Weather(level);
         this.active.add(weather);
-        weather.activate();
+        if (this.binded) {
+            weather.activate(this.binded);
+        }
         if (!this.ticker.funcs.has(this.tick)) {
             this.ticker.add(this.tick);
         }
@@ -84,10 +93,37 @@ export class WeatherController {
         if (this.active.size === 0) {
             this.ticker.remove(this.tick);
         }
-        weather.deactivate();
+        if (this.binded) {
+            weather.deactivate(this.binded);
+        }
     }
 
-    static register(weather: Weather) {
-        this.list.set(weather.id, weather);
+    /**
+     * 将这个天气控制器绑定至一个渲染元素上
+     * @param item 要绑定的元素，不填表示取消绑定
+     */
+    bind(item?: RenderItem) {
+        if (this.binded) {
+            this.active.forEach(v => v.deactivate(this.binded!));
+        }
+        this.binded = item;
+        if (item) {
+            this.active.forEach(v => v.activate(item));
+        }
+    }
+
+    /**
+     * 摧毁这个天气控制器
+     */
+    destroy() {
+        WeatherController.map.delete(this.id);
+    }
+
+    static get(id: string) {
+        return this.map.get(id);
+    }
+
+    static register(id: string, weather: Weather) {
+        this.list.set(id, weather);
     }
 }

src/plugin/boss/towerBoss.ts

@@ -20,8 +20,8 @@ import {
 } from './towerBossProjectile';
 import { IStateDamageable } from '@/game/state/interface';
 import { HeroRenderer } from '@/core/render/preset/hero';
-import { controller } from '@/module/weather';
 import { Pop } from '../fx/pop';
+import { WeatherController } from '@/module';
 
 Mota.require('var', 'loading').once('coreInit', () => {
     const shader = new Shader();
@@ -401,7 +401,8 @@ export class TowerBoss extends BarrageBoss {
         this.skill4Time = 5;
         this.skill5Time = 3;
         core.playBgm('towerBoss2.opus');
-        controller.activate('rain', 6);
+        const weather = WeatherController.get('main');
+        weather?.activate('rain', 6);
     }
 
     releaseSkill4() {