当前位置：首页 > news >正文

那除了ui组件像角色大小这种不用随着分辨率改还是啥

news 2025/10/27 17:42:41

对的！游戏角色、僵尸、场景物体这些应该保持固定大小，不要随分辨率改变！

核心原则：🎯
UI元素：自适应分辨率（血条、按钮、任务提示）
游戏实体：固定大小（角色、僵尸、道具、建筑）

为什么游戏实体要固定大小？ 🤔
TYPESCRIPT
@ccclass(‘GameEntitySettings’)
export class GameEntitySettings extends Component {

onLoad() {
// 角色和游戏实体应该保持设计时的大小
this.setupFixedSizeEntities();
}

private setupFixedSizeEntities() {
// 这些节点的scale保持(1,1,1)或设计时的大小
const fixedSizeNodes = [
this.playerNode, // 角色
this.zombieNodes, // 僵尸
this.propNodes, // 道具
this.buildingsNodes // 建筑
];
```
 fixedSizeNodes.forEach(node => {// 保持原始设计大小，不要加Widget组件！node.scale = new Vec3(1, 1, 1);});
```
}
}
实现方式：两个Camera系统 📷
TYPESCRIPT
@ccclass(‘DualCameraSystem’)
export class DualCameraSystem extends Component {

@property(Camera)
gameCamera: Camera = null!; // 游戏相机 - 固定

@property(Camera)
uiCamera: Camera = null!; // UI相机 - 自适应

onLoad() {
this.setupGameCamera();
this.setupUICamera();
}

private setupGameCamera() {
// 游戏相机：固定Ortho Height，实体大小不变
this.gameCamera.orthoHeight = 5; // 游戏单位，不是像素
```
 // 游戏实体都放在这个相机下// 它们的size是游戏单位，不是屏幕像素
```
}

private setupUICamera() {
// UI相机：自适应分辨率
this.uiCamera.orthoHeight = 360; // 针对720p设计
```
 // UI元素都放在这个相机下，加Widget组件
```
}
}
节点结构建议 🏗️
TEXT
Scene
├── GameCamera (固定 Ortho Height)
│ ├── Player (固定大小)
│ ├── Zombies (固定大小)
│ ├── Props (固定大小)
│ └── Environment (固定大小)
│
└── UICamera (自适应 Ortho Height)
├── HealthBar (加Widget)
├── SurfboardQuest (加Widget)
├── MountDisplay (加Widget)
└── Buttons (加Widget)
在不同分辨率下的表现 📱
720p手机：
TEXT
游戏画面：角色正常大小，视野合适
UI界面：血条、任务栏正常显示
1080p手机：
TEXT
游戏画面：角色大小不变，能看到更多视野
UI界面：血条、任务栏自动调整位置
超宽屏手机：
TEXT
游戏画面：角色大小不变，两侧看到更多场景
UI界面：血条靠左，任务栏靠右，自动避让
具体代码实现 🚀
TYPESCRIPT
@ccclass(‘EntitySizeManager’)
export class EntitySizeManager extends Component {

// 这些预设的大小是游戏单位，不是像素！
private entitySizes = {
PLAYER: { width: 1, height: 1.5 }, // 游戏单位
ZOMBIE: { width: 0.8, height: 1.3 }, // 游戏单位
SUNSCREEN: { width: 0.3, height: 0.3 } // 游戏单位
};

setupPlayerSize() {
// 玩家角色固定大小
this.playerNode.scale = new Vec3(1, 1, 1);
```
 // 如果用Sprite，设置合适的Pixels Per Unitconst sprite = this.playerNode.getComponent(Sprite);if (sprite) {// 假设角色图片是64x96像素，我们希望显示为1x1.5游戏单位// 那么Pixels Per Unit应该设置为64}
```
}

// 确保游戏实体不受屏幕分辨率影响
update(deltaTime: number) {
// 游戏实体的更新逻辑，不涉及屏幕适配
this.updateGameEntities();
}
}
配置示例：角色和UI的不同处理 🎮
角色配置（固定）：
TYPESCRIPT
// Player.ts - 不加Widget，固定scale
@ccclass(‘Player’)
export class Player extends Component {
onLoad() {
this.node.scale = new Vec3(1, 1, 1); // 固定大小
// 不要加Widget组件！
}
}
UI配置（自适应）：
TYPESCRIPT
// HealthBar.ts - 加Widget，自适应
@ccclass(‘HealthBar’)
export class HealthBar extends Component {
onLoad() {
let widget = this.node.getComponent(Widget);
if (!widget) {
widget = this.node.addComponent(Widget);
}
widget.isAlignTop = true;
widget.isAlignLeft = true;
widget.top = 20;
widget.left = 20;
}
}
测试建议 🔍
在编辑器中测试时：