Files
CINC/scenes/BootScene.js
T

207 lines
6.7 KiB
JavaScript

// 启动场景:用于选择进入不同的测试场景
import GameScene from './GameScene.js';
export default class BootScene extends Phaser.Scene {
constructor() {
super({ key: 'BootScene' });
}
create() {
// 设置背景色
this.cameras.main.setBackgroundColor('#000000');
// 添加标题文本
const title = this.add.text(this.sys.game.config.width / 2, 50, '测试场景菜单', {
fontSize: '32px',
fill: '#ffffff',
fontFamily: 'Arial'
}).setOrigin(0.5, 0.5);
title.setScrollFactor(0); // 固定标题,不随滚动移动
// 测试场景列表
const testScenes = [
{ key: 'SkillTestScene', name: '测试场景15:技能移动效果测试' },
{ key: 'FarmingTestScene', name: '测试场景14:种田功能测试' },
{ key: 'CharacterAnimationTestScene', name: '测试场景13:角色动画测试' },
{ key: 'MapEditTestScene', name: '测试场景12:地图编辑测试' },
{ key: 'MapEditSinglePicTestScene', name: '测试场景11:地图编辑单瓦片图资源测试' },
{ key: 'ResourceTestScene', name: '测试场景10:资源包测试' },
{ key: 'ItemListTestScene', name: '测试场景9:物品列表菜单测试' },
{ key: 'InventoryTestScene', name: '测试场景8:背包系统测试' },
{ key: 'ItemTestScene', name: '测试场景7:物品系统测试' },
{ key: 'MiniMapTestScene', name: '测试场景6:小地图测试' },
{ key: 'AutoMovementTestScene', name: '测试场景5:移动更新逻辑' },
{ key: 'JoystickMovementTestScene', name: '测试场景4:虚拟摇杆控制' },
{ key: 'SelectionAndMovementTestScene', name: '测试场景3:单位选择与移动命令' },
{ key: 'TargetMovementTestScene', name: '测试场景2:目标点移动' },
{ key: 'KeyboardMovementTestScene', name: '测试场景1:相对移动(键盘控制)' },
{ key: 'GameScene', name: '返回主游戏场景' }
];
// 滚动容器配置
const containerWidth = this.sys.game.config.width - 40;
const containerHeight = this.sys.game.config.height - 150;
const containerX = 20;
const containerY = 100;
// 创建滚动容器背景
const scrollBackground = this.add.rectangle(
this.sys.game.config.width / 2,
containerY + containerHeight / 2,
containerWidth,
containerHeight,
0x111111,
0.5
);
scrollBackground.setOrigin(0.5, 0.5);
scrollBackground.setScrollFactor(0); // 固定背景,不随滚动移动
// 创建滚动容器
this.scrollContainer = this.add.container(containerX, containerY);
// 按钮配置
const columns = 2; // 2列布局
const buttonWidth = (containerWidth - 30) / columns; // 两列按钮,留出间距
const buttonHeight = 50;
const buttonSpacing = 20; // 按钮间距
const columnSpacing = 10; // 列间距
// 创建按钮
testScenes.forEach((scene, index) => {
// 计算按钮位置(2列布局)
const col = index % columns;
const row = Math.floor(index / columns);
const x = col * (buttonWidth + columnSpacing);
const y = row * (buttonHeight + buttonSpacing);
// 创建按钮背景
const button = this.add.rectangle(
x + buttonWidth / 2,
y + buttonHeight / 2,
buttonWidth,
buttonHeight,
0x333333
).setOrigin(0.5, 0.5);
// 添加按钮文本
const text = this.add.text(
x + buttonWidth / 2,
y + buttonHeight / 2,
scene.name,
{
fontSize: '16px',
fill: '#ffffff',
fontFamily: 'Arial'
}
).setOrigin(0.5, 0.5);
text.setWordWrapWidth(buttonWidth - 20); // 文本自动换行
// 使按钮可交互
button.setInteractive({
useHandCursor: true
});
// 添加点击事件
button.on('pointerdown', () => {
this.scene.start(scene.key);
});
// 添加悬停效果
button.on('pointerover', () => {
button.setFillStyle(0x555555);
});
button.on('pointerout', () => {
button.setFillStyle(0x333333);
});
// 将按钮和文本添加到滚动容器
this.scrollContainer.add(button);
this.scrollContainer.add(text);
});
// 计算滚动容器的实际高度
const rows = Math.ceil(testScenes.length / columns);
const contentHeight = rows * (buttonHeight + buttonSpacing);
// 添加滚动功能
this.setupScrolling(contentHeight, containerHeight);
// 添加滚动提示
const scrollHint = this.add.text(
this.sys.game.config.width / 2,
this.sys.game.config.height - 30,
'鼠标滚轮或触摸滑动滚动',
{
fontSize: '14px',
fill: '#aaaaaa',
fontFamily: 'Arial'
}
).setOrigin(0.5, 0.5);
scrollHint.setScrollFactor(0); // 固定提示,不随滚动移动
}
/**
* 设置滚动功能
* @param {number} contentHeight - 内容高度
* @param {number} containerHeight - 容器高度
*/
setupScrolling(contentHeight, containerHeight) {
// 只有当内容高度大于容器高度时才添加滚动
if (contentHeight <= containerHeight) {
return;
}
// 滚动位置
this.scrollY = 0;
// 最大滚动位置
this.maxScrollY = contentHeight - containerHeight;
// 添加鼠标滚轮事件
this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => {
// 计算新的滚动位置
this.scrollY += deltaY * 0.5; // 调整滚动速度
// 限制滚动范围
this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY));
// 应用滚动
this.scrollContainer.setPosition(this.scrollContainer.x, this.scrollContainer.y - this.scrollContainer.list[0].y + this.scrollY);
});
// 添加触摸滚动支持
let isDragging = false;
let lastY = 0;
this.input.on('pointerdown', (pointer) => {
isDragging = true;
lastY = pointer.y;
});
this.input.on('pointermove', (pointer) => {
if (isDragging) {
const deltaY = pointer.y - lastY;
// 计算新的滚动位置
this.scrollY -= deltaY * 0.5; // 调整滚动速度
// 限制滚动范围
this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY));
// 应用滚动
this.scrollContainer.setPosition(this.scrollContainer.x, this.scrollContainer.y - this.scrollContainer.list[0].y + this.scrollY);
lastY = pointer.y;
}
});
this.input.on('pointerup', () => {
isDragging = false;
});
this.input.on('pointerout', () => {
isDragging = false;
});
}
}