Files
CINC/scenes/testScenes/CharacterAnimationTestScene.js
T

331 lines
8.7 KiB
JavaScript

// 角色动画测试场景
// 使用Player0和Player1图片作为移动帧
// 导入系统和UI组件
import { InputSystem } from '../../systems/InputSystem.js';
import { SelectionSystem } from '../../systems/SelectionSystem.js';
import { CommandSystem } from '../../systems/CommandSystem.js';
// 导入Unit类
import Unit from '../../objects/Unit.js';
export default class CharacterAnimationTestScene extends Phaser.Scene {
constructor() {
super({ key: 'CharacterAnimationTestScene' });
this.tileSize = 16; // 瓦片大小
this.player = null; // 玩家角色
this.inputSystem = null; // 输入系统
this.selectionSystem = null; // 选择系统
this.commandSystem = null; // 命令系统
this.keys = null; // 键盘按键
}
preload() {
// 加载玩家瓦片图片
console.log('加载玩家瓦片图片...');
// 加载Player0的动画帧(假设tile_0000.png到tile_0007.png是Player0的帧)
for (let i = 0; i < 8; i++) {
this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
}
// 加载Player1的动画帧(假设tile_0008.png到tile_0015.png是Player1的帧)
for (let i = 8; i < 16; i++) {
this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
}
console.log('玩家瓦片图片加载完成');
}
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('#222222');
// 创建地面网格
this.createGrid();
// 创建角色动画
this.createCharacterAnimations();
// 初始化系统 - 开启鼠标移动和选择
this.inputSystem = new InputSystem(this, {
keyboard: true,
mouse: true,
selection: true
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建玩家角色
this.createPlayer();
// 设置输入控制
this.setupInput();
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 显示提示信息
this.showInstructions();
}
/**
* 创建地面网格
*/
createGrid() {
// 创建网格线
const gridGraphics = this.add.graphics();
gridGraphics.lineStyle(1, 0x444444, 0.5);
// 绘制垂直线
for (let x = 0; x <= 2000; x += this.tileSize) {
gridGraphics.moveTo(x, 0);
gridGraphics.lineTo(x, 2000);
}
// 绘制水平线
for (let y = 0; y <= 2000; y += this.tileSize) {
gridGraphics.moveTo(0, y);
gridGraphics.lineTo(2000, y);
}
}
/**
* 创建角色动画
*/
createCharacterAnimations() {
console.log('创建角色动画...');
// 创建Player0的移动动画
this.anims.create({
key: 'player0-move',
frames: [
{ key: 'player0-1' },
{ key: 'player0-2' }
],
frameRate: 10,
repeat: -1
});
// 创建Player1的移动动画
this.anims.create({
key: 'player1-move',
frames: [
{ key: 'player1-1' },
{ key: 'player1-2' }
],
frameRate: 10,
repeat: -1
});
console.log('角色动画创建完成');
}
/**
* 创建玩家角色
*/
createPlayer() {
console.log('创建玩家角色...');
// 创建玩家角色使用Unit类
this.player = new Unit(this, 0, 0, 'player0-0');
this.player.setScale(2); // 放大角色
this.player.setBounce(0.2); // 反弹效果
// 自动选中玩家
this.events.emit('select-unit', this.player);
// 将玩家添加到单位组
this.unitGroup.add(this.player);
console.log('玩家角色创建完成');
}
/**
* 设置输入控制
*/
setupInput() {
// 只保留必要的按键监听,键盘移动由InputSystem处理
this.cursors = this.input.keyboard.createCursorKeys();
// 切换角色按钮
this.createButton(this.sys.game.config.width - 200, 100, '切换角色', () => {
this.switchCharacter();
});
// 返回启动场景按钮
this.createButton(this.sys.game.config.width - 200, 150, '返回启动场景', () => {
this.scene.start('BootScene');
});
}
/**
* 创建按钮
*/
createButton(x, y, text, callback) {
// 按钮背景
const button = this.add.rectangle(x, y, 180, 40, 0x333333);
button.setOrigin(0.5, 0.5);
button.setScrollFactor(0, 0);
button.setDepth(10);
button.setInteractive({ useHandCursor: true });
// 按钮文本
const buttonText = this.add.text(x - 70, y - 15, text, {
fontSize: '14px',
fill: '#ffffff',
fontFamily: 'Arial'
});
buttonText.setScrollFactor(0, 0);
buttonText.setDepth(11);
// 按钮事件
button.on('pointerdown', callback);
button.on('pointerover', () => {
button.setFillStyle(0x555555);
});
button.on('pointerout', () => {
button.setFillStyle(0x333333);
});
}
/**
* 切换角色
*/
switchCharacter() {
// 检查单位是否在移动
const isMoving = Math.abs(this.player.body.velocity.x) > 10 || Math.abs(this.player.body.velocity.y) > 10;
// 切换角色
if (this.currentCharacterText.text === '当前角色: Player0') {
// 切换到Player1
this.currentCharacterText.setText('当前角色: Player1');
if (isMoving) {
this.player.play('player1-move');
} else {
this.player.anims.stop();
this.player.setTexture('player1-0');
}
console.log('切换到Player1');
} else {
// 切换到Player0
this.currentCharacterText.setText('当前角色: Player0');
if (isMoving) {
this.player.play('player0-move');
} else {
this.player.anims.stop();
this.player.setTexture('player0-0');
}
console.log('切换到Player0');
}
}
/**
* 显示提示信息
*/
showInstructions() {
// 标题
this.add.text(20, 20, '角色动画测试场景', {
fontSize: '20px',
fill: '#ffffff',
fontFamily: 'Arial',
fontWeight: 'bold'
}).setScrollFactor(0, 0).setDepth(11);
// 操作提示
const instructions = [
'WASD或方向键移动角色',
'角色移动时播放动画',
'点击"切换角色"按钮切换Player0和Player1',
'角色动画使用Player0和Player1的图片作为移动帧',
'按空格键返回启动场景'
];
for (let i = 0; i < instructions.length; i++) {
this.add.text(20, 50 + i * 25, instructions[i], {
fontSize: '14px',
fill: '#ffffff',
fontFamily: 'Arial'
}).setScrollFactor(0, 0).setDepth(11);
}
// 显示当前角色
this.currentCharacterText = this.add.text(20, 200, '当前角色: Player0', {
fontSize: '16px',
fill: '#00ff00',
fontFamily: 'Arial',
fontWeight: 'bold'
}).setScrollFactor(0, 0).setDepth(11);
}
update() {
// 更新输入系统
this.inputSystem.update();
// 更新所有单位
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
// 处理角色动画
this.updateCharacterAnimation(unit);
});
// 按空格键返回启动场景
if (this.cursors.space.isDown) {
this.scene.start('BootScene');
}
}
/**
* 更新角色动画
* @param {Object} unit - 单位对象
*/
updateCharacterAnimation(unit) {
// 检查单位是否在移动
const isMoving = Math.abs(unit.body.velocity.x) > 10 || Math.abs(unit.body.velocity.y) > 10;
if (isMoving) {
// 处理角色朝向
if (unit.body.velocity.x < -10) {
unit.setFlipX(true); // 向左翻转
} else if (unit.body.velocity.x > 10) {
unit.setFlipX(false); // 向右不翻转
}
// 播放移动动画
if (!unit.anims.isPlaying || !unit.anims.currentAnim.key.includes('move')) {
if (this.currentCharacterText.text === '当前角色: Player0') {
unit.play('player0-move');
} else {
unit.play('player1-move');
}
}
} else {
// 静止状态,显示图片0
unit.anims.stop();
if (this.currentCharacterText.text === '当前角色: Player0') {
unit.setTexture('player0-0');
} else {
unit.setTexture('player1-0');
}
}
}
}