# xyol-prov3

**Repository Path**: lidongdong2253/xyol-prov3

## Basic Information

- **Project Name**: xyol-prov3
- **Description**: 话3手游cocos v3客户端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-25
- **Last Updated**: 2024-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xyonline
Hello world new project template.

## 热更新流程说明

1. 先进行项目构建
2. 修改package.json文件中的版本号
3. 项目->构建资源
<!-- 4. 手动上传文件 -->
5. 执行zx ./deploy.mjs发布命令

## 如何修改为中文名称

- v2版本
> 进入 `\build\jsb-default\frameworks\runtime-src\proj.android-studio\res\values` 修改 `string.xml` 文件中appname 字段

- v3版本
> 进入 `/Users/fengkaiqiang/xyol-ccv3/build/android/proj/res/values/strings.xml` 修改 `string.xml` 文件中appname 字段
/Users/fengkaiqiang/xyol-ccv3/native/engine/android/res/values/strings.xml

## 如何修改图标

- v2版本
> 进入 `\build\jsb-default\frameworks\runtime-src\proj.android-studio\res\*`

- v3版本
> 进入 `/native/engine/android/res*`

## 编译后APK在哪

- v2版本
> `/build/jsb-default/frameworks/runtime-src/proj.android-studio/instantapp/build/outputs/apk/release`

- v3版本
> `/build/android/publish`


## 如何修改自带EditBox 组件
> 用下载`Cocos2dxEditBox.java`文件，替换掉`/Users/fengkaiqiang/xyol-project/build/jsb-default/frameworks/cocos2d-x/cocos/platform/android/java/src/org/cocos2dx/lib` 目录下的同名文件

## 3.8+版本透明点击使用
```typescript
// 透明点击
node.on(Node.EventType.TOUCH_START, (e: EventTouch) => {
  const pos = e.getLocation();
  const isHit = node.getComponent(UITransform).hitTest(pos, e.windowId);
  if (isHit) {
    // 点击到了
  }
})
```


## Scripts 目录说明
  configs: 配置文件
  libs: 通用库
  map: 地图功能
  modules: 第三方模块（不支持install安装的包）
  plugin: 插件
   - BatchItems.ts 优化组件，用途：背包/仓库/商店等大列表优化
   - LayoutResize.ts 优化组件，用途：背景根据内容自适应布局
   - MovieClipAtlas.ts 优化组件，用途：精灵动画
   - RichText.ts 优化组件，用途：富文本，支持动画表情，支持预制体
   - RichTextPrefab.ts 优化组件，用途：富文本预制体，配合RichText使用
   - ScrollViewVirtual.ts 优化组件，用途：虚拟滚动列表
   - SpriteButton.ts 优化组件，用途：按钮组件
   - SpriteRadio.ts 优化组件，用途：单选按钮组件
  types: 类型定义
  utils: 工具类
  views: 业务视图脚本组件
  api.ts: 接口
  before.js: 游戏启动前执行
  enum.ts: 枚举


## 根据网站xxx.pem获取安卓websocket所需的根证书的方法

1. 第一步，打开window操作系统 (mac下面不知道怎么导出证书)
2. 第二部, 将网站证书xxxx.pem更名为xxx.cer
3. 第三部, 双击xxx.cer
  * 选择[证书路径]选项卡
  * 鼠标点击下方证书树的根节点
  * 鼠标点击下方查看证书按钮
  * 点击[证书详情]选项卡
  * 点击[导出证书]
  * 选择 base64模式
导出的文件就是 安卓Websocket第三个参数所需的文件

## 项目优化笔记

- label 尽可能使用 BITMAP/CHAR 模式
- 同类型同页面碎图合成整图使用
- 对于部分npm 包源码用到了import 语法，会报错，将编译后的index 和 .d.ts 引入使用
- 部分crypto 中的函数在原生环境可能报错。自己补齐实现
- zIndex比siblingIndex生效优先级高，所以少用甚至不用 zIndex，而优先使用 setSiblingIndex 函数。
- Widget 组件改变的坐标值在当前帧不刷新, 强制刷新：widget.updateAlignment();
- 原生环境不支持 new URL 对象
- 大列表dc优化，使用自己实现的虚拟滚动组件和滚动优化组件
- 原生环境不支持Socket.io ,自己封装websocket实现了socket.io 常用功能。比如: 断线重连，断线消息缓冲等
- 自己封装richtext来支持动画表情、以及减少dc数。
- 自定义实现动画组件，来实现帧同步！
- 使用AI工具无损减少图片大小
- 热更新速度提升解决方案：合并图片。开启zip。服务器开启gzip。
- 使用forEach进行`NodePool.put(node)`时，不可以使用原数组。可以使用[...array].forEach后操作，防止BUG
- 地图最大宽度是1048px
- 尽可能减少编辑器Node节点，多了编辑器会卡
- %数据类型一定要使用千分位/10，不要使用小数点

### v3版本

- new Node() 需要修改node.layer属性, 否则不会渲染
- 相机拍摄出来的图片是反的，需要翻转Y轴


## 难点一: 点击icon空白忽略点击事件
> `花费时间：3天`
#### 解决方案(v2.x)
> 核心: 通过重写node['_hitTest']方法，来判断是否点击到了icon
- 1. 普通方案：通过Canvas 能力还判断，缺点原生不支持。
- 2. 优化方案：通过多边形碰撞检测组件实现。
- 3. 进阶方案：通过添加临时相机，将icon渲染到临时相机上，然后通过临时相机的渲染结果的二进制数据来判断是否点击到了icon。核心方法 cc.RenderTexture.readPixels
- 4. 终极方案：获取纹理指定坐标的像素Buffer，然后判断是否透明。

## 难点二: 不支持socket.io
> `花费时间：7天`
#### 解决方案
> 核心: 自己利用websocket实现socket.io(支持房间模式,集群模式)
- 1. 优化方案：优先使用arrayBuffer类型发送数据
- 2. 优化方案：如果客户端不支持ArrayBuffer类型，自动降级为JSON格式发送。
- 3. 优点：兼容性较好。外部模块依赖低。代码高度可控。Typescript编写可阅读行高。

## 难点三: 解决游戏物品大量删除和创建操作问题（后端）
> 核心: 通过increment 和 decrement控制物品数量，0表示删除，设置unsigned: true 来防止负数&溢出
> 优点: 通过数据库的原子性操作，无需加锁，性能高，代码简单，可读性高，可维护性高，可扩展性高
- 1. 查询时候，通过where条件过滤掉数量为0的物品

## 怪异模型计算公式(右下): 
1. 真实y = (真实高度) - 差值(图height - 图y)
2. 真实x = 差值(图width - 图x)
3. 真实width = 真实x * 2


## 怪异模型计算公式(左上): 
1. 真实width = x * 2
2. 真实height = y * 2
1. 真实x = x * 2 - 当前width

## 优化需求
2. 战斗速度感觉太慢了

## 玩家问题
5. 组队对话任务统一进度问题。
8. 男巫回血数据不对。


## 断点续传

1. Accept-Ranges头: bytes