mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-30 05:31:29 +08:00
495 lines
15 KiB
JavaScript
495 lines
15 KiB
JavaScript
// 资源包测试场景
|
|
|
|
export default class ResourceTestScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'ResourceTestScene' });
|
|
this.resourceCategories = ['PNG/Enemies', 'PNG/Interface', 'PNG/Players', 'PNG/Tiles', 'PNG/Weapons', 'Sounds'];
|
|
this.currentCategory = 0;
|
|
this.assetsLoaded = false;
|
|
this.loadedAssets = {
|
|
images: [],
|
|
sounds: []
|
|
};
|
|
}
|
|
|
|
preload() {
|
|
// 加载资源
|
|
this.loadAssets();
|
|
|
|
// 显示加载进度
|
|
this.createLoadingUI();
|
|
}
|
|
|
|
create() {
|
|
// 物理世界和相机边界
|
|
const worldSize = 2000;
|
|
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
|
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
|
this.cameras.main.centerOn(0, 0);
|
|
|
|
// 设置背景色
|
|
this.cameras.main.setBackgroundColor('#000000');
|
|
|
|
// 创建主UI
|
|
this.createMainUI();
|
|
|
|
// 设置输入处理
|
|
this.setupInput();
|
|
|
|
// 如果资源已经加载完成，初始化资源显示
|
|
if (this.assetsLoaded) {
|
|
this.updateResourceDisplay();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 加载所有资源
|
|
*/
|
|
loadAssets() {
|
|
// 加载PNG资源
|
|
this.load.image('enemies-tilemap', 'assets/PNG/Enemies/Tilemap/tilemap.png');
|
|
this.load.image('enemies-tilemap-packed', 'assets/PNG/Enemies/Tilemap/tilemap_packed.png');
|
|
|
|
this.load.image('interface-tilemap', 'assets/PNG/Interface/Tilemap/tilemap.png');
|
|
this.load.image('interface-tilemap-packed', 'assets/PNG/Interface/Tilemap/tilemap_packed.png');
|
|
|
|
this.load.image('players-tilemap', 'assets/PNG/Players/Tilemap/tilemap.png');
|
|
this.load.image('players-tilemap-packed', 'assets/PNG/Players/Tilemap/tilemap_packed.png');
|
|
|
|
this.load.image('tiles-tilemap', 'assets/PNG/Tiles/Tilemap/tilemap.png');
|
|
this.load.image('tiles-tilemap-packed', 'assets/PNG/Tiles/Tilemap/tilemap_packed.png');
|
|
|
|
this.load.image('weapons-tilemap', 'assets/PNG/Weapons/Tilemap/tilemap.png');
|
|
this.load.image('weapons-tilemap-packed', 'assets/PNG/Weapons/Tilemap/tilemap_packed.png');
|
|
|
|
// 加载前几个敌人瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
this.load.image(`enemy-tile-${i}`, `assets/PNG/Enemies/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载前几个界面瓦片
|
|
for (let i = 0; i < 16; i++) {
|
|
this.load.image(`interface-tile-${i}`, `assets/PNG/Interface/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载前几个玩家瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
this.load.image(`player-tile-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载前几个地形瓦片
|
|
for (let i = 0; i < 16; i++) {
|
|
this.load.image(`tile-${i}`, `assets/PNG/Tiles/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载前几个武器瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
this.load.image(`weapon-tile-${i}`, `assets/PNG/Weapons/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载音效资源
|
|
this.load.audio('coin-a', 'assets/Sounds/coin-a.ogg');
|
|
this.load.audio('coin-b', 'assets/Sounds/coin-b.ogg');
|
|
this.load.audio('jump-a', 'assets/Sounds/jump-a.ogg');
|
|
this.load.audio('shoot-a', 'assets/Sounds/shoot-a.ogg');
|
|
this.load.audio('explosion-a', 'assets/Sounds/explosion-a.ogg');
|
|
this.load.audio('hurt-a', 'assets/Sounds/hurt-a.ogg');
|
|
|
|
// 加载完成回调
|
|
this.load.on('complete', () => {
|
|
this.assetsLoaded = true;
|
|
this.loadingText.setText('资源加载完成！');
|
|
// 只有在resourceDisplay初始化后才调用updateResourceDisplay
|
|
if (this.resourceDisplay) {
|
|
this.updateResourceDisplay();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 创建加载UI
|
|
*/
|
|
createLoadingUI() {
|
|
// 加载文本
|
|
this.loadingText = this.add.text(10, 10, '加载资源...', {
|
|
fontSize: '16px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.loadingText.setScrollFactor(0, 0);
|
|
this.loadingText.setDepth(100);
|
|
|
|
// 加载进度条
|
|
this.progressBar = this.add.rectangle(10, 40, 300, 20, 0x555555);
|
|
this.progressBar.setOrigin(0, 0);
|
|
this.progressBar.setScrollFactor(0, 0);
|
|
this.progressBar.setDepth(100);
|
|
|
|
this.progressFill = this.add.rectangle(10, 40, 0, 20, 0x00ff00);
|
|
this.progressFill.setOrigin(0, 0);
|
|
this.progressFill.setScrollFactor(0, 0);
|
|
this.progressFill.setDepth(100);
|
|
|
|
// 更新进度
|
|
this.load.on('progress', (progress) => {
|
|
this.progressFill.width = progress * 300;
|
|
this.loadingText.setText(`加载资源... ${Math.round(progress * 100)}%`);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 创建主UI
|
|
*/
|
|
createMainUI() {
|
|
// 标题
|
|
this.titleText = this.add.text(this.sys.game.config.width / 2, 50, '资源包测试场景', {
|
|
fontSize: '32px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial',
|
|
fontWeight: 'bold'
|
|
});
|
|
this.titleText.setOrigin(0.5, 0.5);
|
|
this.titleText.setScrollFactor(0, 0);
|
|
this.titleText.setDepth(10);
|
|
|
|
// 分类选择
|
|
this.categoryText = this.add.text(10, 70, `资源分类: ${this.resourceCategories[this.currentCategory]}`, {
|
|
fontSize: '18px',
|
|
fill: '#00ff00',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.categoryText.setScrollFactor(0, 0);
|
|
this.categoryText.setDepth(10);
|
|
|
|
// 导航按钮
|
|
this.createNavigationButtons();
|
|
|
|
// 资源显示区域
|
|
this.resourceDisplay = this.add.container(0, 0);
|
|
this.resourceDisplay.setDepth(5);
|
|
|
|
// 操作提示
|
|
this.instructionText = this.add.text(10, this.sys.game.config.height - 100,
|
|
'← → 键：切换资源分类 | 空格键：返回启动场景 | 点击音效图标播放音效', {
|
|
fontSize: '16px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.instructionText.setScrollFactor(0, 0);
|
|
this.instructionText.setDepth(10);
|
|
}
|
|
|
|
/**
|
|
* 创建导航按钮
|
|
*/
|
|
createNavigationButtons() {
|
|
// 上一页按钮
|
|
this.prevButton = this.add.rectangle(10, 100, 120, 40, 0x333333);
|
|
this.prevButton.setOrigin(0, 0);
|
|
this.prevButton.setScrollFactor(0, 0);
|
|
this.prevButton.setDepth(10);
|
|
this.prevButton.setInteractive({ useHandCursor: true });
|
|
|
|
this.prevButtonText = this.add.text(20, 110, '上一页', {
|
|
fontSize: '16px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.prevButtonText.setScrollFactor(0, 0);
|
|
this.prevButtonText.setDepth(11);
|
|
|
|
// 下一页按钮
|
|
this.nextButton = this.add.rectangle(140, 100, 120, 40, 0x333333);
|
|
this.nextButton.setOrigin(0, 0);
|
|
this.nextButton.setScrollFactor(0, 0);
|
|
this.nextButton.setDepth(10);
|
|
this.nextButton.setInteractive({ useHandCursor: true });
|
|
|
|
this.nextButtonText = this.add.text(150, 110, '下一页', {
|
|
fontSize: '16px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.nextButtonText.setScrollFactor(0, 0);
|
|
this.nextButtonText.setDepth(11);
|
|
|
|
// 返回菜单按钮
|
|
this.returnButton = this.add.rectangle(270, 100, 120, 40, 0x333333);
|
|
this.returnButton.setOrigin(0, 0);
|
|
this.returnButton.setScrollFactor(0, 0);
|
|
this.returnButton.setDepth(10);
|
|
this.returnButton.setInteractive({ useHandCursor: true });
|
|
|
|
this.returnButtonText = this.add.text(280, 110, '返回菜单', {
|
|
fontSize: '16px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
});
|
|
this.returnButtonText.setScrollFactor(0, 0);
|
|
this.returnButtonText.setDepth(11);
|
|
|
|
// 按钮事件
|
|
this.prevButton.on('pointerdown', () => {
|
|
this.currentCategory = (this.currentCategory - 1 + this.resourceCategories.length) % this.resourceCategories.length;
|
|
this.updateCategoryDisplay();
|
|
});
|
|
|
|
this.nextButton.on('pointerdown', () => {
|
|
this.currentCategory = (this.currentCategory + 1) % this.resourceCategories.length;
|
|
this.updateCategoryDisplay();
|
|
});
|
|
|
|
this.returnButton.on('pointerdown', () => {
|
|
this.scene.start('BootScene');
|
|
});
|
|
|
|
// 悬停效果
|
|
this.prevButton.on('pointerover', () => this.prevButton.setFillStyle(0x555555));
|
|
this.prevButton.on('pointerout', () => this.prevButton.setFillStyle(0x333333));
|
|
this.nextButton.on('pointerover', () => this.nextButton.setFillStyle(0x555555));
|
|
this.nextButton.on('pointerout', () => this.nextButton.setFillStyle(0x333333));
|
|
this.returnButton.on('pointerover', () => this.returnButton.setFillStyle(0x555555));
|
|
this.returnButton.on('pointerout', () => this.returnButton.setFillStyle(0x333333));
|
|
}
|
|
|
|
/**
|
|
* 更新分类显示
|
|
*/
|
|
updateCategoryDisplay() {
|
|
this.categoryText.setText(`资源分类: ${this.resourceCategories[this.currentCategory]}`);
|
|
this.updateResourceDisplay();
|
|
}
|
|
|
|
/**
|
|
* 更新资源显示
|
|
*/
|
|
updateResourceDisplay() {
|
|
if (!this.assetsLoaded) return;
|
|
|
|
// 清空当前显示的资源（如果resourceDisplay已经初始化）
|
|
if (this.resourceDisplay) {
|
|
this.resourceDisplay.removeAll(true);
|
|
}
|
|
|
|
// 根据当前分类显示资源
|
|
switch (this.currentCategory) {
|
|
case 0: // PNG/Enemies
|
|
this.displayEnemyAssets();
|
|
break;
|
|
case 1: // PNG/Interface
|
|
this.displayInterfaceAssets();
|
|
break;
|
|
case 2: // PNG/Players
|
|
this.displayPlayerAssets();
|
|
break;
|
|
case 3: // PNG/Tiles
|
|
this.displayTileAssets();
|
|
break;
|
|
case 4: // PNG/Weapons
|
|
this.displayWeaponAssets();
|
|
break;
|
|
case 5: // Sounds
|
|
this.displaySoundAssets();
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示敌人资源
|
|
*/
|
|
displayEnemyAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
|
|
// 显示瓦片地图
|
|
this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'enemies-tilemap').setScale(0.5));
|
|
this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'enemies-tilemap-packed').setScale(0.5));
|
|
|
|
// 显示瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
const x = centerX - 200 + (i % 4) * 100;
|
|
const y = centerY + 100 + Math.floor(i / 4) * 100;
|
|
const tile = this.add.image(x, y, `enemy-tile-${i}`).setScale(2);
|
|
this.resourceDisplay.add(tile);
|
|
|
|
// 添加瓦片编号
|
|
this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Tile ${i}`, {
|
|
fontSize: '12px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示界面资源
|
|
*/
|
|
displayInterfaceAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
|
|
// 显示瓦片地图
|
|
this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'interface-tilemap').setScale(0.5));
|
|
this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'interface-tilemap-packed').setScale(0.5));
|
|
|
|
// 显示瓦片
|
|
for (let i = 0; i < 16; i++) {
|
|
const x = centerX - 300 + (i % 8) * 75;
|
|
const y = centerY + 100 + Math.floor(i / 8) * 75;
|
|
const tile = this.add.image(x, y, `interface-tile-${i}`).setScale(1.5);
|
|
this.resourceDisplay.add(tile);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示玩家资源
|
|
*/
|
|
displayPlayerAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
|
|
// 显示瓦片地图
|
|
this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'players-tilemap').setScale(0.5));
|
|
this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'players-tilemap-packed').setScale(0.5));
|
|
|
|
// 显示瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
const x = centerX - 200 + (i % 4) * 100;
|
|
const y = centerY + 100 + Math.floor(i / 4) * 100;
|
|
const tile = this.add.image(x, y, `player-tile-${i}`).setScale(2);
|
|
this.resourceDisplay.add(tile);
|
|
|
|
// 添加瓦片编号
|
|
this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Player ${i}`, {
|
|
fontSize: '12px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示地形瓦片资源
|
|
*/
|
|
displayTileAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
|
|
// 显示瓦片地图
|
|
this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'tiles-tilemap').setScale(0.5));
|
|
this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'tiles-tilemap-packed').setScale(0.5));
|
|
|
|
// 显示瓦片
|
|
for (let i = 0; i < 16; i++) {
|
|
const x = centerX - 300 + (i % 8) * 75;
|
|
const y = centerY + 100 + Math.floor(i / 8) * 75;
|
|
const tile = this.add.image(x, y, `tile-${i}`).setScale(1.5);
|
|
this.resourceDisplay.add(tile);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示武器资源
|
|
*/
|
|
displayWeaponAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
|
|
// 显示瓦片地图
|
|
this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'weapons-tilemap').setScale(0.5));
|
|
this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'weapons-tilemap-packed').setScale(0.5));
|
|
|
|
// 显示瓦片
|
|
for (let i = 0; i < 8; i++) {
|
|
const x = centerX - 200 + (i % 4) * 100;
|
|
const y = centerY + 100 + Math.floor(i / 4) * 100;
|
|
const tile = this.add.image(x, y, `weapon-tile-${i}`).setScale(2);
|
|
this.resourceDisplay.add(tile);
|
|
|
|
// 添加瓦片编号
|
|
this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Weapon ${i}`, {
|
|
fontSize: '12px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示音效资源
|
|
*/
|
|
displaySoundAssets() {
|
|
const centerX = 0;
|
|
const centerY = 0;
|
|
const soundNames = ['coin-a', 'coin-b', 'jump-a', 'shoot-a', 'explosion-a', 'hurt-a'];
|
|
const soundLabels = ['硬币A', '硬币B', '跳跃', '射击', '爆炸', '受伤'];
|
|
|
|
for (let i = 0; i < soundNames.length; i++) {
|
|
const x = centerX - 200 + (i % 3) * 200;
|
|
const y = centerY + Math.floor(i / 3) * 150;
|
|
|
|
// 创建音效按钮
|
|
const button = this.add.rectangle(x, y, 150, 80, 0x444444);
|
|
button.setInteractive({ useHandCursor: true });
|
|
button.soundKey = soundNames[i];
|
|
this.resourceDisplay.add(button);
|
|
|
|
// 添加标签
|
|
this.resourceDisplay.add(this.add.text(x - 60, y - 20, soundLabels[i], {
|
|
fontSize: '14px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
|
|
this.resourceDisplay.add(this.add.text(x - 60, y, soundNames[i], {
|
|
fontSize: '12px',
|
|
fill: '#cccccc',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
|
|
// 添加播放提示
|
|
this.resourceDisplay.add(this.add.text(x - 40, y + 20, '点击播放', {
|
|
fontSize: '12px',
|
|
fill: '#00ff00',
|
|
fontFamily: 'Arial'
|
|
}));
|
|
|
|
// 按钮事件
|
|
button.on('pointerdown', () => {
|
|
this.sound.play(button.soundKey);
|
|
});
|
|
|
|
button.on('pointerover', () => {
|
|
button.setFillStyle(0x666666);
|
|
});
|
|
|
|
button.on('pointerout', () => {
|
|
button.setFillStyle(0x444444);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 设置输入处理
|
|
*/
|
|
setupInput() {
|
|
// 键盘输入
|
|
this.input.keyboard.on('keydown-LEFT', () => {
|
|
this.currentCategory = (this.currentCategory - 1 + this.resourceCategories.length) % this.resourceCategories.length;
|
|
this.updateCategoryDisplay();
|
|
});
|
|
|
|
this.input.keyboard.on('keydown-RIGHT', () => {
|
|
this.currentCategory = (this.currentCategory + 1) % this.resourceCategories.length;
|
|
this.updateCategoryDisplay();
|
|
});
|
|
|
|
this.input.keyboard.on('keydown-SPACE', () => {
|
|
this.scene.start('BootScene');
|
|
});
|
|
}
|
|
|
|
update() {
|
|
// 每帧更新
|
|
}
|
|
} |