diff --git a/packages-user/client-modules/src/client.ts b/packages-user/client-modules/src/client.ts index 2ce49ef..ce377da 100644 --- a/packages-user/client-modules/src/client.ts +++ b/packages-user/client-modules/src/client.ts @@ -35,19 +35,10 @@ import { } from '@user/client-base'; import { ExcitationDivider, - ExcitationVariator, IExcitation, IExcitationDivider, RafExcitation } from '@motajs/animate'; -import { - DEBUG_DIVIDER, - DEBUG_VARIATOR, - DIVIDER_DEBUG_DIVIDER, - MAIN_HEIGHT, - MAIN_WIDTH, - VARIATOR_DEBUG_SPEED -} from './shared'; import { IRendererUsing, RendererUsing } from '@motajs/render-vue'; import { IUIController, UIController } from '@motajs/system'; import { createApp } from './render'; @@ -71,7 +62,7 @@ export class ClientCore extends CoreState implements IClientCore { readonly sceneController: IUIController; readonly mainUIController: IUIController; - // Layer 5 渲染顶层 + // Layer 5 渲染顶层 - 目前没东西 /** 已注册的渲染端插件 */ private readonly clientPlugins: Map< @@ -85,10 +76,7 @@ export class ClientCore extends CoreState implements IClientCore { constructor(config: IClientCoreConfig) { super(config); - //#region Layer 4 - this.save = new SaveSystem(); - this.save.init(''); this.audioContext = new MotaAudioContext(); this.soundPlayer = new SoundPlayer(this.audioContext); this.bgmPlayer = new BGMPlayer(this.audioContext); @@ -98,30 +86,15 @@ export class ClientCore extends CoreState implements IClientCore { config.tilesetUnit ); - const rafExcitation = new RafExcitation(); - const excitationDivider = new ExcitationDivider(); - this.rafExcitation = rafExcitation; - this.excitationDivider = excitationDivider; - - 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); - } + this.rafExcitation = new RafExcitation(); + this.excitationDivider = new ExcitationDivider(); this.renderer = new MotaRenderer({ canvas: '#render-main', - width: MAIN_WIDTH, - height: MAIN_HEIGHT, + width: config.renderWidth, + height: config.renderHeight, // 使用分频器，用户可以在设置中调整，如果设备性能较差调高分频有助于提高性能表现 - excitaion: excitationDivider + excitaion: this.excitationDivider }); this.using = new RendererUsing(this.renderer); this.mainMapRenderer = new MapRenderer(this.materials); @@ -133,8 +106,6 @@ export class ClientCore extends CoreState implements IClientCore { this.sceneController.setPropsBaseCreator(pbCreator); this.mainUIController.setPropsBaseCreator(pbCreator); - //#endregion - this.loader.addCoreConfig('client', config.clientURL); // 渲染端插件注册表 diff --git a/packages-user/client-modules/src/shared.ts b/packages-user/client-modules/src/shared.ts index 735aeb1..2e80c8a 100644 --- a/packages-user/client-modules/src/shared.ts +++ b/packages-user/client-modules/src/shared.ts @@ -2,25 +2,6 @@ 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 地图 /** 每个格子的默认宽度，现阶段用处不大 */ diff --git a/packages-user/client-modules/src/types.ts b/packages-user/client-modules/src/types.ts index fd54cd0..96f7117 100644 --- a/packages-user/client-modules/src/types.ts +++ b/packages-user/client-modules/src/types.ts @@ -60,6 +60,10 @@ export interface IClientCoreConfig extends ICoreStateConfig { readonly tilesetUnit: number; /** 渲染器挂载至的画布元素 */ readonly rendererCanvas: string; + /** 渲染器的渲染宽度 */ + readonly renderWidth: number; + /** 渲染器的渲染高度 */ + readonly renderHeight: number; /** 渲染端插件列表 */ readonly clientPlugins: IClientPluginDefine[]; } diff --git a/packages/common/src/logger.json b/packages/common/src/logger.json index e7398d7..e866825 100644 --- a/packages/common/src/logger.json +++ b/packages/common/src/logger.json @@ -78,7 +78,7 @@ "76": "Plugin dependency cycle detected: $1. Cyclic plugins will not be initialized.", "77": "Plugin $1 depends on a non-existent plugin: $2. Related plugins will not be initialized.", "78": "Duplicate plugin id: $1. The duplicate will not be registered.", - "79": "Hero attribute initialize failed since no core config loaded.", + "79": "$1 side initialize failed since no core config loaded.", "2001": "Replay($1): Replay parameter count mismatch: expected $2, got $3.", "2002": "Replay($1): Replay parameter type mismatch: index $2, expected $3, got $4.", "2003": "Replay(move): Expected hero to be stopped before execute moving step.", diff --git a/src/client/entry.ts b/src/client/entry.ts index b633692..275d789 100644 --- a/src/client/entry.ts +++ b/src/client/entry.ts @@ -4,8 +4,17 @@ import { IClientCore, IClientCoreConfig } from '@user/client-modules'; -import { CLIENT_CORE_URL, TILESET_RESERVE, TILESET_UNIT } from '../constant'; +import { + CLIENT_CORE_URL, + RENDER_CANVAS, + RENDER_HEIGHT, + RENDER_WIDTH, + TILESET_RESERVE, + TILESET_UNIT +} from '../constant'; import { createCoreStateConfig } from '../data/entry'; +import { MainClientPlugin } from './initialize'; +import { clientPlugins } from './plugin'; /** * 创建渲染端配置对象 @@ -18,6 +27,10 @@ export function createClientCoreConfig( clientURL: CLIENT_CORE_URL, tilesetReserve: TILESET_RESERVE, tilesetUnit: TILESET_UNIT, + rendererCanvas: RENDER_CANVAS, + renderWidth: RENDER_WIDTH, + renderHeight: RENDER_HEIGHT, + clientPlugins: [new MainClientPlugin(), ...clientPlugins], ...createCoreStateConfig(starter) }; @@ -25,7 +38,7 @@ export function createClientCoreConfig( } /** - * 创建渲染端主对象，返回经过初始化的主对象实例 + * 创建渲染端主对象，返回未经过异步初始化的主对象实例，需要手动调用 `state.load` 初始化 * @param starter 加载启动器 */ export async function createClientCore( @@ -33,6 +46,5 @@ export async function createClientCore( ): Promise { const config = createClientCoreConfig(starter); const state = new ClientCore(config); - await state.load(); return state; } diff --git a/src/client/initialize.ts b/src/client/initialize.ts new file mode 100644 index 0000000..6632a7d --- /dev/null +++ b/src/client/initialize.ts @@ -0,0 +1,54 @@ +import { logger } from '@motajs/common'; +import { + excitationDivider, + IClientCore, + IClientCoreConfig, + IClientPluginDefine +} from '@user/client-modules'; +import { ICoreStateCoreConfig } from '@user/data-state'; +import { + DEBUG_DIVIDER, + DEBUG_VARIATOR, + DIVIDER_DEBUG_DIVIDER, + VARIATOR_DEBUG_SPEED +} from '../constant'; +import { ExcitationVariator } from '@motajs/animate'; + +export class MainClientPlugin implements IClientPluginDefine { + id: string = 'main-client-plugin'; + dependencies: readonly string[] = []; + + awake(state: IClientCore): void { + // 渲染调试配置 + if (DEBUG_VARIATOR) { + const variator = new ExcitationVariator(); + variator.bindExcitation(state.rafExcitation); + variator.setSpeed(VARIATOR_DEBUG_SPEED); + excitationDivider.bindExcitation(variator); + } else { + excitationDivider.bindExcitation(state.rafExcitation); + } + + if (DEBUG_DIVIDER) { + excitationDivider.setDivider(DIVIDER_DEBUG_DIVIDER); + } + } + + async initialize(): Promise {} + + async afterLoad(state: IClientCore): Promise { + const core = state.loader.getConfig('core'); + const client = state.loader.getConfig('client'); + if (!core) { + logger.error(79, 'Data'); + return; + } + if (!client) { + logger.error(79, 'Client'); + return; + } + + // 存档初始化 + state.save.init(`@game/${core.name}`); + } +} diff --git a/src/client/plugin/index.ts b/src/client/plugin/index.ts new file mode 100644 index 0000000..7182513 --- /dev/null +++ b/src/client/plugin/index.ts @@ -0,0 +1 @@ +export * from './list'; diff --git a/src/client/plugin/list.ts b/src/client/plugin/list.ts new file mode 100644 index 0000000..a8291fb --- /dev/null +++ b/src/client/plugin/list.ts @@ -0,0 +1,4 @@ +import { IClientPluginDefine } from '@user/client-modules'; + +/** 渲染端插件列表 */ +export const clientPlugins: IClientPluginDefine[] = []; diff --git a/src/constant.ts b/src/constant.ts index 60b1b0b..4acf010 100644 --- a/src/constant.ts +++ b/src/constant.ts @@ -13,6 +13,8 @@ export const HERO_FACE = FaceGroup.Dir8; //#region 渲染端配置 +/** 渲染端的渲染画布，不懂的话就不要动 */ +export const RENDER_CANVAS = '#render-main'; /** 渲染端核心配置对象，不懂的话就不要动 */ export const CLIENT_CORE_URL = 'content/client.jsonc'; /** Tileset 预留数量，用于控制最大允许注册多少个普通图块，例如填写 10000 表示最大 10000 个普通图块，不懂的话不要动 */ @@ -20,4 +22,30 @@ export const TILESET_RESERVE = 100000; /** 一个 Tileset 的图块数量单位，例如 10000 时表示一个 Tileset 会占用 10000 或 10000 的倍数个图块，不懂的话不要动 */ export const TILESET_UNIT = 10000; +// 关于渲染的其他配置可在 ./client/ui/config.ts 中修改， +// 关于高级渲染设置，请参考样板使用文档，那里会进行更详细的讲解。 +/** 渲染器的渲染宽度，默认为地图宽度 416 + 左侧状态栏宽度 180 */ +export const RENDER_WIDTH = 416 + 180; +/** 渲染器的渲染高度，默认为地图高度 416 */ +export const RENDER_HEIGHT = 416; + +//#endregion + +//#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 diff --git a/src/data/entry.ts b/src/data/entry.ts index 73b8e47..44b455c 100644 --- a/src/data/entry.ts +++ b/src/data/entry.ts @@ -22,7 +22,7 @@ export function createCoreStateConfig( } /** - * 创建数据端主对象，返回未经过初始化的主对象实例，需要手动调用 `state.load` 初始化 + * 创建数据端主对象，返回未经过异步初始化的主对象实例，需要手动调用 `state.load` 初始化 * @param starter 加载启动器 */ export function createCoreState(starter: ILoadTaskStarter): ICoreState { diff --git a/src/data/initialize.ts b/src/data/initialize.ts index 3639944..8aef795 100644 --- a/src/data/initialize.ts +++ b/src/data/initialize.ts @@ -63,7 +63,7 @@ export class MainDataPlugin implements IDataPluginDefine { // 进行勇士的加载后初始化 const coreConfig = state.loader.getConfig('core'); if (!coreConfig) { - logger.error(79); + logger.error(79, 'Data'); return; } const dir = state.faceManager.get(this.heroFace); diff --git a/src/styles.less b/src/styles.less index ae3357c..eea1881 100644 --- a/src/styles.less +++ b/src/styles.less @@ -1,131 +1,7 @@ -// 部分全局css特效 - -#root { - position: fixed; - display: block; - width: 0; - height: 0; - z-index: 1000; - overflow: visible; - font-size: 16px; - user-select: none; -} - -.antdv-message { - font-family: 'normal'; - font-size: 1.6em; -} - -// 文字按钮 -.button-text { - cursor: pointer; - transition: color 0.2s linear; -} - -.button-text[active='true'], -.button-text:hover { - color: aqua; -} - -.button-text:active { - color: aquamarine; -} - -.button-text[danger='true'][danger-display='true'] { - color: rgb(255, 47, 47); -} - -.button-text[danger='true']:hover, -.button-text[danger='true'][active='true'] { - color: rgb(255, 120, 120); -} - -.button-text[danger='true']:active { - color: rgb(255, 182, 182); -} - -.selectable { - border: #0000 0.5px solid; - padding: 1% 3% 1% 3%; +#game-draw { width: 100%; -} - -.selectable[selected='true'] { - animation: selected alternate 5s infinite ease-in-out; -} - -@keyframes selected { - 0% { - border: #0ff7 0.5px solid; - background-color: rgba(39, 251, 209, 0.143); - } - 50% { - border: #0ffa 0.5px solid; - background-color: rgba(39, 251, 209, 0.284); - } - 100% { - border: #0ff7 0.5px solid; - background-color: rgba(39, 251, 209, 0.143); - } -} - -// 拖拽类 -.draginable { - transition: background-color 0.2s linear; -} - -.draginable[draged='true'][access='true']:hover { - background-color: rgba(0, 255, 187, 0.31); -} - -.draginable[draged='true'][access='false']:hover { - background-color: rgba(255, 0, 0, 0.319); - cursor: not-allowed; -} - -#non-ui { - position: absolute; - z-index: 999; - user-select: none; -} - -.changable { - border-radius: 4px; - padding: 2px 4px; -} - -.changable[change='true'] { - animation: changable-animate 1s linear alternate 1; -} - -@keyframes changable-animate { - 0% { - background-color: #7cc9; - } - 100% { - background-color: #0000; - } -} - -div.toolbar-editor-item { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.danmaku { - margin-left: 10px; + height: 100%; display: flex; + justify-content: center; align-items: center; } - -.motajs-input-element { - left: 0; - top: 0; - position: fixed; - border: none; - z-index: 1000; - background-color: transparent; -}