背景
游戏角色生成器是游戏开发中的一个重要工具，它允许设计师和开发者快速创建和管理游戏中的角色。本文将详细介绍一个2D游戏角色生成器的构建过程，包括痛点分析、调研过程、系统架构、核心功能实现、技术难点、扩展与未来展望。
1. 痛点分析
在构建游戏角色生成器之前，首先需要识别并理解当前存在的痛点：
- 复杂的角色设计流程：许多现有工具界面复杂，操作繁琐，使得角色设计过程不够直观和高效。
- 缺乏灵活的图层管理：现有工具对于角色部位的管理不够灵活，不能充分支持复杂的图层操作和实时预览。
- 资源管理困难：文件上传和管理过程不够便捷，尤其是在处理大量资源文件时，且已有的角色资源管理混乱，搜索困难。
- 沟通成本高：出现跨部门沟通成本，尤其是角色调整时需要反复沟通确认。
2. 调研
在开发游戏角色生成器之前，进行充分的市场调研和技术调研是至关重要的。随着AIGC的普及，市场上角色生成器有很多，但大多是应用于动漫影视类的，根据描述直接输出几张图，还不能直接应用到游戏上。
目前2d角色生成器，有两个著名的角色生成器，它们分别是LPC Character Generator 和 Universal LPC Spritesheet Character Generator。
1）LPC Character Generator基于桌面应用的一款角色生成器
下载地址：pflat.itch.io/lpc-charact…
2）Universal LPC Spritesheet Character Generator是一款多端的角色生成器
网页版：sanderfrenken.github.io/Universal-L…
桌面版：pflat.itch.io/lpc-charact…
2.1 功能对比
| 功能 | LPC Character Generator | Universal LPC Spritesheet Character Generator |
|---|---|---|
| 资源库丰富度 | 高 | 高 |
| 实时预览 | 是 | 是 |
| 精灵表生成 | 否 | 是 |
| 界面易用性 | 高 | 中 |
| 高级编辑功能 | 低 | 低 |
| 生成角色方向 | 正向 | 正、反、左、右四个方向 |
| 开源社区支持 | 是 | 是 |
| 扩展性 | 中 | 中 |
| 跨平台兼容性 | 低 | 高 |
| 性能 | 优 | 一般 |
根据我们的痛点，设定以下目标：
- 提升用户体验：提供直观、易用的界面，简化角色设计流程，统一角色设计规范。
- 增强图层管理：支持复杂的图层操作和实时预览，允许用户灵活地编辑角色部位，支持足够的灵活角色编辑方向。
- 优化资源管理：提高角色的复用性，提供便捷的资源上传和管理功能，支持多种文件格式，降低维护成本。
- 降低沟通成本：降低跨部门的沟通成本，输出直接能被使用，不需要经过二次处理，提高研发效率。
3. 系统架构
游戏角色生成器的系统架构可以分为以下几个主要层次：
- 客户展示层：负责用户交互和界面展示，图层处理层使用
zrender技术处理角色图层和绘制操作。 - 网络层：提供认证授权和多态路由。
- 核心服务层：处理服务管理、日志监控、配置、业务逻辑，主要提供四个核心模块，分别为角色编辑模块、图层合成模块、资源管理模块、序列帧切割模块。
- 数据访问层：提供 RESTful API，处理角色及其资源的存储、更新和管理。
4. 核心功能实现
核心功能模块包括上传管理、角色编辑、角色部位管理等，其流程图如下：
功能模块
4.1 上传管理
功能描述： 上传管理模块负责用户上传角色部位资源，例如头发、身体、服装等图片文件。它需要处理文件的校验、预览和上传，并将这些资源存储在服务器上。
转换：需要对上传的图片数据进行切割、转换，最终上传到服务端的是一组序列帧数据。
主要功能：
- 文件选择和预览：用户可以选择本地文件并预览效果。
- 文件格式和大小校验：确保上传的文件符合要求。
- 文件上传：将文件上传到服务器，并返回文件的 URL 供后续使用。
4.2 角色编辑页面
功能描述： 角色编辑页面是整个系统的核心部分，允许用户通过可视化界面编辑角色。使用 zrender 可以将多个图层叠加，用户可以对各个部位进行拖拽、缩放、旋转等操作。
实现原理：本质上就是利用不同序列帧的数据，利用不同几技术和算法，将不同身体部位的图层重新组合叠加在一起，最终生成一个角色，它本质上就是一组新的序列帧数据。
主要功能：
- 图层管理：显示和管理角色的不同部位，每个部位作为一个独立的图层。
- 可视化编辑：通过拖拽、缩放、旋转等操作调整角色部位的位置和大小。
- 实时预览：实时预览编辑后的角色效果。
4.3 角色部位管理
功能描述： 角色部位管理模块用于管理角色的各个组成部分，例如头发、身体、服装等。用户可以添加、删除和编辑这些部位，每个部位都有自己的属性，用户上传资源时，前置条件便是先创建角色部位。
一个角色身体部位有多个资源，而每个资源只有一个角色部位。同时，多个资源可以合成一个新的资源。
主要功能：
- 添加部位：允许用户添加新的角色部位。
- 删除部位：移除不需要的角色部位。
- 编辑部位：调整部位的属性，如名称、图层顺序等。
4.4 角色部位资源管理
功能描述： 角色部位资源管理模块负责管理上传的资源文件。这些资源文件将用于构建角色的各个部位。每个资源只属于一个身体部位，多个资源可以重新合成一个新的资源。
主要功能：
- 资源列表：显示已上传的资源文件列表。
- 资源预览：预览资源文件的内容。
- 资源分类：按类别管理资源文件，如头发、服装等。
- 资源合成：不同的子资源，根据不同的图层顺序，重新合并成一个新的资源。
4.5 后端服务
功能描述： 后端服务提供 RESTful API，用于处理角色及其资源的存储、更新和管理。它是前端和数据存储之间的桥梁，确保数据的持久化和一致性。
主要功能：
- 文件存储：处理上传的文件并存储在服务器上。
- 数据管理：存储和管理角色及其部位的相关数据。
- API 接口：提供接口供前端访问和操作数据，如获取角色列表、保存角色信息等。
5. 技术难点
5.1. 图层的复杂交互
挑战：在处理多个图层时，需要确保图层的正确叠加和排序。用户在编辑角色时，如何处理不同图层的叠加关系，以及如何在多个图层之间进行有效的交互，是一个技术挑战。
解决方案：使用 zrender 处理图片的图层
zrender 是一个基于 HTML5 Canvas 的矢量图形渲染引擎，适合用于游戏角色编辑器的图层处理，同时也是echarts的底层渲染引擎。它提供了丰富的图形操作接口，支持处理多个格式的图层如Canvas、SVG和VML，可以轻松实现图层的添加、删除、调整和渲染。
主要特点：
- 图层叠加：支持多图层叠加显示，每个图层可以单独控制。
- 图形操作：提供丰富的图形操作接口，如拖拽、缩放、旋转等。
- 高效渲染：基于 Canvas 的高效渲染，确保编辑操作的流畅性。
应用场景： 在角色编辑页面中，使用 zrender 可以将角色的各个部位作为独立的图层进行管理，用户可以对每个部位进行精细调整，从而实现对角色形象的个性化定制。
5.2. 实时渲染性能
挑战： 实时渲染多个图层时的性能瓶颈，特别是在处理复杂操作时。
解决方案：
-
性能优化： 进行性能优化，包括减少不必要的重绘，使用虚拟化技术提升渲染效率。
-
多图层独立：
zrender的图层管理功能允许将角色的各个部位作为独立的图层进行管理。这种方式不仅提高了编辑的灵活性，还使得图层之间的操作互不干扰。切割图层小图，按需加载资源，资源独立渲染，减少重叠渲染。 -
实时更新：图层的实时更新使用户在编辑过程中能够即时看到修改效果，提高了编辑的效率和准确性。
5.3. 资源管理的复杂性
- 文件格式兼容性：支持多种文件格式（如 PNG、SVG、JPEG 等）和处理这些文件的兼容性是一项挑战。系统必须能够正确解析和渲染各种格式的文件。
- 文件上传和存储：处理文件的上传、存储和版本控制，特别是大文件和高并发情况下的文件管理，是资源管理中的一个复杂问题。
5.4 后端服务的扩展性
- 数据一致性：处理并发请求时，如何确保数据的一致性和完整性，尤其是在多用户同时操作角色时，需要设计合理的数据管理策略。
- 安全性问题：保证用户数据的安全性和隐私，防止数据泄露或篡改，需要实现严格的访问控制和数据加密机制。
6. 扩展与未来展望
6.1. 增强的图层功能
目前支持的图层相对比较简单，后期需要引入更多的图层操作功能，如图层组、图层混合模式、图层效果（如阴影、光晕）等，以丰富角色编辑的表现力。
6.2. 资源管理的智能化
目前的资源管理还相对简单，随着角色资源越来越多，单靠索引和角色名称搜索后面会越难以支撑服务，需要引入更智能的资源管理。
- 自动化分类和标记：引入智能分类和标记功能，自动分析和组织上传的资源，提高资源管理的效率。
- 资源推荐：基于用户的编辑历史和偏好，推荐相关的资源文件，提升用户体验。
6.3. 改进的用户体验
- 增强的可视化编辑：引入更多的可视化工具和效果，如实时动画预览、3D 视图支持等，为用户提供更丰富的编辑体验。
- 个性化设置：允许用户自定义界面布局、快捷键等，以适应不同的操作习惯和需求。
- 丰富插件服务：增强平台的服务扩展性，后期需要加入插件服务，允许用户自定义更多的服务，提升用户体验和扩展功能。
6.4. 后端服务的优化和扩展
- 分布式架构：引入分布式架构和微服务，将系统的负载分散，提高系统的可伸缩性和容错性。
- 数据分析和报告：集成数据分析功能，提供角色使用情况、资源使用情况等报告，帮助开发者和设计师更好地了解系统的使用情况。
