mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-30 06:31:29 +08:00
757 lines
25 KiB
JavaScript
757 lines
25 KiB
JavaScript
/**
|
||
* TestObjectsScene - 测试场景，展示Phaser中的各种对象类型
|
||
*/
|
||
export default class TestObjectsScene extends Phaser.Scene {
|
||
constructor() {
|
||
super('TestObjectsScene');
|
||
}
|
||
|
||
preload() {
|
||
// 注意：实际项目中需要先加载纹理
|
||
// 本示例使用内置图形，不需要加载外部资源
|
||
}
|
||
|
||
create() {
|
||
// 设置背景色
|
||
this.cameras.main.setBackgroundColor('#222222');
|
||
|
||
// 获取屏幕宽度，用于响应式布局
|
||
const screenWidth = this.cameras.main.width;
|
||
const screenHeight = this.cameras.main.height;
|
||
const centerX = screenWidth / 2;
|
||
|
||
// 设置世界边界，允许滚动
|
||
this.cameras.main.setBounds(0, 0, screenWidth, 3000);
|
||
|
||
// 滚动相关变量
|
||
this.scrollVelocity = 0;
|
||
this.scrollAcceleration = 0.98;
|
||
|
||
// 启用鼠标/触摸滚动
|
||
this.input.on('pointermove', (pointer) => {
|
||
if (pointer.isDown) {
|
||
// 调整滚动速度和方向：向上拖动时内容向上滚动，速度更快
|
||
this.scrollVelocity = -pointer.velocity.y * 0.15;
|
||
this.cameras.main.scrollY += this.scrollVelocity;
|
||
// 限制滚动范围
|
||
this.cameras.main.scrollY = Phaser.Math.Clamp(this.cameras.main.scrollY, 0, 2400);
|
||
}
|
||
});
|
||
|
||
// 停止触摸时应用惯性滚动
|
||
this.input.on('pointerup', () => {
|
||
// 创建惯性滚动
|
||
this.tweens.add({
|
||
targets: this,
|
||
scrollVelocity: 0,
|
||
duration: 500,
|
||
ease: 'Power2',
|
||
onUpdate: (tween) => {
|
||
this.cameras.main.scrollY += this.scrollVelocity;
|
||
// 限制滚动范围
|
||
this.cameras.main.scrollY = Phaser.Math.Clamp(this.cameras.main.scrollY, 0, 2400);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 1. 文本对象
|
||
this.createTextObjects(centerX);
|
||
|
||
// 2. 图像和精灵
|
||
this.createImageObjects(centerX);
|
||
|
||
// 3. 图形对象
|
||
this.createGraphicsObjects(centerX);
|
||
|
||
// 4. 容器对象
|
||
this.createContainerObjects(centerX);
|
||
|
||
// 5. 粒子系统
|
||
this.createParticles(centerX);
|
||
|
||
// 6. 物理对象（简单示例）
|
||
this.createPhysicsObjects(centerX);
|
||
|
||
// 7. 精灵对象
|
||
this.createSpriteObjects(centerX);
|
||
|
||
// 8. 瓦片地图
|
||
this.createTilemapObjects(centerX);
|
||
|
||
// 9. 点阵文字
|
||
this.createBitmapTextObjects(centerX);
|
||
|
||
// 10. 渲染纹理
|
||
this.createRenderTextureObjects(centerX);
|
||
|
||
// 11. 形状对象
|
||
this.createShapeObjects(centerX);
|
||
|
||
// 12. 多相机系统
|
||
this.createCameraObjects(centerX);
|
||
|
||
// 13. 灯光系统
|
||
this.createLightObjects(centerX);
|
||
|
||
// 14. 路径系统
|
||
this.createPathObjects(centerX);
|
||
|
||
// 15. 网格系统
|
||
this.createGridObjects(centerX);
|
||
|
||
// 16. 时间线
|
||
this.createTimelineObjects(centerX);
|
||
|
||
// 添加滚动指示器
|
||
this.add.text(centerX, 2850, '↓ 向下滚动查看更多 ↓', {
|
||
fontSize: '14px',
|
||
fill: '#aaaaaa',
|
||
backgroundColor: '#333333',
|
||
padding: { x: 15, y: 8 }
|
||
})
|
||
.setOrigin(0.5)
|
||
.setScrollFactor(0); // 固定在屏幕底部
|
||
|
||
// 添加顶部指示器
|
||
this.add.text(centerX, 10, '↑ 向上滚动返回顶部 ↑', {
|
||
fontSize: '14px',
|
||
fill: '#aaaaaa',
|
||
backgroundColor: '#333333',
|
||
padding: { x: 15, y: 8 }
|
||
})
|
||
.setOrigin(0.5)
|
||
.setScrollFactor(0); // 固定在屏幕顶部
|
||
|
||
// 添加返回按钮
|
||
this.add.text(20, 20, '按 ESC 返回', { fontSize: '16px', fill: '#ffffff' })
|
||
.setInteractive()
|
||
.on('pointerdown', () => {
|
||
this.scene.start('TmpScene');
|
||
});
|
||
}
|
||
|
||
// 创建文本对象
|
||
createTextObjects(centerX) {
|
||
// 基本文本
|
||
this.add.text(centerX, 50, '1. 文本对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 带样式的文本
|
||
this.add.text(centerX, 90, '普通文本', {
|
||
fontSize: '16px',
|
||
fill: '#cccccc'
|
||
}).setOrigin(0.5);
|
||
|
||
// 彩色文本
|
||
this.add.text(centerX, 120, '彩色文本', {
|
||
fontSize: '16px',
|
||
fill: '#ff0000'
|
||
}).setOrigin(0.5);
|
||
|
||
// 带背景的文本
|
||
this.add.text(centerX, 150, '带背景的文本', {
|
||
fontSize: '16px',
|
||
fill: '#ffffff',
|
||
backgroundColor: '#444444',
|
||
padding: { x: 10, y: 5 }
|
||
}).setOrigin(0.5);
|
||
}
|
||
|
||
// 创建图像和精灵
|
||
createImageObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 200, '2. 图像和精灵示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 使用图形替代图像
|
||
const logo = this.add.graphics()
|
||
.fillStyle(0x3498db, 1)
|
||
.fillRect(0, 0, 100, 50)
|
||
.setPosition(centerX - 50, 255)
|
||
.setInteractive(new Phaser.Geom.Rectangle(0, 0, 100, 50), Phaser.Geom.Rectangle.Contains)
|
||
.on('pointerdown', function() {
|
||
this.scaleX *= 1.1;
|
||
this.scaleY *= 1.1;
|
||
});
|
||
|
||
// 添加文本标签
|
||
this.add.text(centerX, 270, 'Phaser Logo', {
|
||
fontSize: '12px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
|
||
// 精灵（使用圆形替代纹理）
|
||
const redDot = this.add.circle(centerX, 320, 10, 0xff0000, 1)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
this.angle += 45;
|
||
});
|
||
}
|
||
|
||
// 创建图形对象
|
||
createGraphicsObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 350, '3. 图形对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 矩形
|
||
this.add.rectangle(centerX - 80, 420, 100, 60, 0xff0000, 0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
this.fillColor = Phaser.Math.Between(0x000000, 0xffffff);
|
||
});
|
||
|
||
// 圆形
|
||
this.add.circle(centerX, 420, 30, 0x00ff00, 0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
this.radius = Phaser.Math.Between(20, 40);
|
||
});
|
||
|
||
// 线段
|
||
this.add.line(centerX + 80, 420, 0, -30, 0, 30, 0xffff00, 1)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
this.angle += 15;
|
||
});
|
||
}
|
||
|
||
// 创建容器对象
|
||
createContainerObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 480, '4. 容器对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建容器
|
||
const container = this.add.container(centerX, 550);
|
||
|
||
// 容器背景
|
||
const bg = this.add.rectangle(0, 0, 200, 100, 0x444444, 0.8);
|
||
container.add(bg);
|
||
|
||
// 容器内的文本
|
||
const text = this.add.text(0, 0, '容器示例', {
|
||
fontSize: '16px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
container.add(text);
|
||
|
||
// 容器内的圆形
|
||
const circle = this.add.circle(0, 30, 10, 0x00ffff, 1);
|
||
container.add(circle);
|
||
|
||
// 使容器可交互
|
||
container.setInteractive(new Phaser.Geom.Rectangle(-100, -50, 200, 100), Phaser.Geom.Rectangle.Contains)
|
||
.on('pointerdown', () => {
|
||
container.angle += 10;
|
||
});
|
||
}
|
||
|
||
// 创建粒子系统
|
||
createParticles(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 650, '5. 粒子系统示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：粒子系统需要纹理，实际项目中需要先加载
|
||
// 本示例使用图形替代粒子效果
|
||
const particles = this.add.graphics()
|
||
.fillStyle(0x3498db, 1)
|
||
.fillCircle(0, 0, 5)
|
||
.setPosition(centerX, 720)
|
||
.setVisible(false);
|
||
|
||
// 添加交互，点击时显示粒子效果
|
||
this.add.text(centerX, 750, '点击显示粒子效果', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff',
|
||
backgroundColor: '#444444',
|
||
padding: { x: 10, y: 5 }
|
||
})
|
||
.setOrigin(0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', () => {
|
||
// 创建多个圆形模拟粒子效果
|
||
for (let i = 0; i < 20; i++) {
|
||
const particle = this.add.circle(centerX, 720, 3, 0x3498db, 1);
|
||
this.tweens.add({
|
||
targets: particle,
|
||
x: centerX + Phaser.Math.Between(-100, 100),
|
||
y: 720 + Phaser.Math.Between(-100, -50),
|
||
alpha: 0,
|
||
scale: 0,
|
||
duration: 1000,
|
||
onComplete: function() {
|
||
particle.destroy();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 创建物理对象（简单示例）
|
||
createPhysicsObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 800, '6. 物理对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：物理系统需要在游戏配置中启用
|
||
// 本示例使用图形替代物理对象
|
||
const ground = this.add.rectangle(centerX, 880, 300, 20, 0x666666, 1);
|
||
|
||
// 创建圆形图形
|
||
const ball = this.add.circle(centerX, 820, 10, 0xe74c3c, 1)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
// 模拟物理效果
|
||
this.setY(this.y - 50);
|
||
this.scene.tweens.add({
|
||
targets: this,
|
||
y: 820,
|
||
duration: 500,
|
||
ease: 'Bounce.easeOut'
|
||
});
|
||
});
|
||
|
||
// 添加交互，点击时给球一个向上的力
|
||
this.add.text(centerX, 880, '点击小球', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
})
|
||
.setOrigin(0.5);
|
||
}
|
||
|
||
update() {
|
||
// 可以在这里添加对象的更新逻辑
|
||
}
|
||
|
||
// 7. 精灵对象
|
||
createSpriteObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 950, '7. 精灵对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：精灵需要纹理，实际项目中需要先加载
|
||
// 本示例使用图形替代精灵
|
||
const sprite = this.add.graphics()
|
||
.fillStyle(0x9b59b6, 1)
|
||
.fillCircle(0, 0, 20)
|
||
.setPosition(centerX, 1020)
|
||
.setInteractive(new Phaser.Geom.Circle(0, 0, 20), Phaser.Geom.Circle.Contains)
|
||
.on('pointerdown', function() {
|
||
this.angle += 30;
|
||
});
|
||
|
||
// 添加文本标签
|
||
this.add.text(centerX, 1060, '精灵示例', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
}
|
||
|
||
// 8. 瓦片地图
|
||
createTilemapObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 1100, '8. 瓦片地图示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：瓦片地图需要纹理，实际项目中需要先加载
|
||
// 本示例使用图形替代瓦片地图
|
||
const tilemap = this.add.graphics()
|
||
.fillStyle(0x27ae60, 0.8)
|
||
.fillRect(0, 0, 200, 100)
|
||
.setPosition(centerX - 100, 1140);
|
||
|
||
// 添加模拟瓦片
|
||
for (let i = 0; i < 5; i++) {
|
||
for (let j = 0; j < 10; j++) {
|
||
this.add.rectangle(
|
||
centerX - 90 + j * 20,
|
||
1150 + i * 20,
|
||
18,
|
||
18,
|
||
0x2ecc71,
|
||
0.6
|
||
);
|
||
}
|
||
}
|
||
|
||
// 添加文本标签
|
||
this.add.text(centerX, 1260, '瓦片地图示例', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
}
|
||
|
||
// 9. 点阵文字
|
||
createBitmapTextObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 1300, '9. 点阵文字示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：点阵文字需要字体纹理，实际项目中需要先加载
|
||
// 本示例使用普通文本替代
|
||
this.add.text(centerX, 1340, '点阵文字示例', {
|
||
fontSize: '16px',
|
||
fill: '#f1c40f',
|
||
fontFamily: 'monospace'
|
||
}).setOrigin(0.5);
|
||
|
||
// 添加文本标签
|
||
this.add.text(centerX, 1380, '（使用普通文本模拟）', {
|
||
fontSize: '12px',
|
||
fill: '#cccccc'
|
||
}).setOrigin(0.5);
|
||
}
|
||
|
||
// 10. 渲染纹理
|
||
createRenderTextureObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 1420, '10. 渲染纹理示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建渲染纹理
|
||
const rt = this.add.renderTexture(centerX - 100, 1460, 200, 100);
|
||
|
||
// 绘制一些内容到渲染纹理
|
||
const graphics = this.add.graphics().setVisible(false);
|
||
graphics.fillStyle(0xe74c3c, 1);
|
||
graphics.fillCircle(100, 50, 30);
|
||
graphics.lineStyle(2, 0xffffff, 1);
|
||
graphics.lineBetween(50, 50, 150, 50);
|
||
|
||
// 将图形绘制到渲染纹理
|
||
rt.draw(graphics, 0, 0);
|
||
|
||
// 添加交互，点击时清除并重新绘制
|
||
rt.setInteractive(new Phaser.Geom.Rectangle(0, 0, 200, 100), Phaser.Geom.Rectangle.Contains)
|
||
.on('pointerdown', function() {
|
||
this.clear();
|
||
this.draw(graphics, Phaser.Math.Between(0, 100), Phaser.Math.Between(0, 50));
|
||
});
|
||
}
|
||
|
||
// 11. 形状对象
|
||
createShapeObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 1550, '11. 形状对象示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建三角形（使用graphics）
|
||
const triangle = this.add.graphics()
|
||
.fillStyle(0x3498db, 0.8)
|
||
.beginPath()
|
||
.moveTo(0, -40)
|
||
.lineTo(-30, 40)
|
||
.lineTo(30, 40)
|
||
.closePath()
|
||
.fillPath()
|
||
.setPosition(centerX - 40, 1620)
|
||
.setInteractive(new Phaser.Geom.Triangle(-30, 40, 30, 40, 0, -40), Phaser.Geom.Triangle.Contains)
|
||
.on('pointerdown', function() {
|
||
this.angle += 30;
|
||
});
|
||
|
||
// 创建圆角矩形
|
||
this.add.rectangle(centerX + 40, 1620, 80, 60, 0xe74c3c, 0.8)
|
||
.setInteractive()
|
||
.on('pointerdown', function() {
|
||
this.setScale(this.scaleX * 1.1);
|
||
});
|
||
}
|
||
|
||
// 12. 多相机系统
|
||
createCameraObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 1750, '12. 多相机系统示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 添加说明文本
|
||
this.add.text(centerX, 1790, '多相机系统可以同时显示不同视角的内容', {
|
||
fontSize: '14px',
|
||
fill: '#aaaaaa'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建第二个相机（左侧）
|
||
const camera2 = this.cameras.add(centerX - 110, 1830, 180, 120);
|
||
camera2.setBackgroundColor(0x2c3e50);
|
||
|
||
// 创建第三个相机（右侧）
|
||
const camera3 = this.cameras.add(centerX + 10, 1830, 180, 120);
|
||
camera3.setBackgroundColor(0x34495e);
|
||
|
||
// 在第二个相机中创建对象
|
||
const leftText = this.add.text(camera2.x + camera2.width / 2, camera2.y + camera2.height / 2 - 20, '左侧相机', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
|
||
const leftCircle = this.add.circle(camera2.x + camera2.width / 2, camera2.y + camera2.height / 2 + 20, 15, 0x3498db, 1);
|
||
|
||
// 在第三个相机中创建对象
|
||
const rightText = this.add.text(camera3.x + camera3.width / 2, camera3.y + camera3.height / 2 - 20, '右侧相机', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
|
||
const rightSquare = this.add.rectangle(camera3.x + camera3.width / 2, camera3.y + camera3.height / 2 + 20, 30, 30, 0xe74c3c, 1);
|
||
|
||
// 添加交互，点击时控制相机
|
||
this.add.text(centerX, 1970, '点击切换相机视角', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff',
|
||
backgroundColor: '#444444',
|
||
padding: { x: 15, y: 8 }
|
||
})
|
||
.setOrigin(0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', () => {
|
||
// 移动左侧相机中的圆形
|
||
this.tweens.add({
|
||
targets: leftCircle,
|
||
x: leftCircle.x + 50,
|
||
duration: 800,
|
||
yoyo: true,
|
||
repeat: 1
|
||
});
|
||
|
||
// 旋转右侧相机中的正方形
|
||
this.tweens.add({
|
||
targets: rightSquare,
|
||
angle: 360,
|
||
duration: 1600,
|
||
ease: 'Linear'
|
||
});
|
||
|
||
// 改变相机背景色
|
||
camera2.setBackgroundColor(Phaser.Display.Color.RandomRGB(50, 100).color);
|
||
camera3.setBackgroundColor(Phaser.Display.Color.RandomRGB(50, 100).color);
|
||
});
|
||
|
||
// 添加相机功能说明
|
||
this.add.text(centerX, 2010, '相机1: 主视角 | 相机2: 左侧视角 | 相机3: 右侧视角', {
|
||
fontSize: '12px',
|
||
fill: '#aaaaaa'
|
||
}).setOrigin(0.5);
|
||
}
|
||
|
||
// 13. 灯光系统
|
||
createLightObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 2050, '13. 灯光系统示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 注意：实际灯光系统需要特殊配置
|
||
// 本示例使用图形模拟灯光效果
|
||
|
||
// 创建灯光图形
|
||
const light = this.add.graphics()
|
||
.fillStyle(0xffffff, 0.3)
|
||
.fillCircle(0, 0, 100)
|
||
.setPosition(centerX, 2130);
|
||
|
||
// 创建一些对象来展示灯光效果
|
||
this.add.rectangle(centerX - 50, 2110, 30, 30, 0x666666, 1);
|
||
this.add.rectangle(centerX + 50, 2110, 30, 30, 0x666666, 1);
|
||
this.add.rectangle(centerX, 2150, 30, 30, 0x666666, 1);
|
||
|
||
// 添加交互，点击时移动灯光
|
||
this.add.text(centerX, 2200, '点击移动灯光', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
})
|
||
.setOrigin(0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', () => {
|
||
const x = centerX + Phaser.Math.Between(-50, 50);
|
||
const y = 2100 + Phaser.Math.Between(-30, 30);
|
||
light.setPosition(x, y);
|
||
});
|
||
}
|
||
|
||
// 14. 路径系统
|
||
createPathObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 2250, '14. 路径系统示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 绘制路径
|
||
const graphics = this.add.graphics();
|
||
graphics.lineStyle(2, 0xffffff, 0.5);
|
||
graphics.strokeRect(centerX - 100, 2300, 200, 100);
|
||
|
||
// 创建一个对象沿着路径移动
|
||
const follower = this.add.circle(centerX - 100, 2300, 10, 0xff0000, 1);
|
||
|
||
// 创建路径动画
|
||
this.tweens.add({
|
||
targets: { pos: 0 },
|
||
pos: 1,
|
||
duration: 4000,
|
||
repeat: -1,
|
||
ease: 'Linear',
|
||
onUpdate: (tween) => {
|
||
const progress = tween.targets[0].pos;
|
||
|
||
// 矩形路径：右 -> 下 -> 左 -> 上
|
||
if (progress < 0.25) {
|
||
// 右
|
||
follower.x = centerX - 100 + (progress * 4) * 200;
|
||
follower.y = 2300;
|
||
} else if (progress < 0.5) {
|
||
// 下
|
||
follower.x = centerX + 100;
|
||
follower.y = 2300 + ((progress - 0.25) * 4) * 100;
|
||
} else if (progress < 0.75) {
|
||
// 左
|
||
follower.x = centerX + 100 - ((progress - 0.5) * 4) * 200;
|
||
follower.y = 2400;
|
||
} else {
|
||
// 上
|
||
follower.x = centerX - 100;
|
||
follower.y = 2400 - ((progress - 0.75) * 4) * 100;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 15. 网格系统
|
||
createGridObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 2450, '15. 网格系统示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建网格
|
||
const grid = this.add.grid(centerX, 2520, 200, 100, 20, 20, 0x444444, 0, 0x666666, 0.3);
|
||
|
||
// 在网格上添加一些对象
|
||
for (let i = 0; i < 5; i++) {
|
||
const x = centerX - 90 + i * 40;
|
||
for (let j = 0; j < 2; j++) {
|
||
const y = 2490 + j * 40;
|
||
this.add.circle(x, y, 5, 0x2ecc71, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 16. 时间线
|
||
createTimelineObjects(centerX) {
|
||
// 标题
|
||
this.add.text(centerX, 2600, '16. 时间线示例', {
|
||
fontSize: '20px',
|
||
fill: '#ffffff',
|
||
fontWeight: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
// 创建对象
|
||
const obj1 = this.add.rectangle(centerX - 40, 2670, 40, 40, 0x3498db, 1);
|
||
const obj2 = this.add.circle(centerX, 2670, 20, 0xe74c3c, 1);
|
||
const obj3 = this.add.graphics()
|
||
.fillStyle(0xf1c40f, 1)
|
||
.beginPath()
|
||
.moveTo(0, -20)
|
||
.lineTo(-20, 20)
|
||
.lineTo(20, 20)
|
||
.closePath()
|
||
.fillPath()
|
||
.setPosition(centerX + 40, 2670);
|
||
|
||
// 添加交互，点击时播放动画序列
|
||
this.add.text(centerX, 2750, '点击播放动画', {
|
||
fontSize: '14px',
|
||
fill: '#ffffff'
|
||
})
|
||
.setOrigin(0.5)
|
||
.setInteractive()
|
||
.on('pointerdown', () => {
|
||
// 动画序列
|
||
this.tweens.add({
|
||
targets: obj1,
|
||
y: 2620,
|
||
duration: 500,
|
||
ease: 'Power2',
|
||
onComplete: () => {
|
||
this.tweens.add({
|
||
targets: obj2,
|
||
scale: 1.5,
|
||
duration: 500,
|
||
ease: 'Power2',
|
||
onComplete: () => {
|
||
this.tweens.add({
|
||
targets: obj3,
|
||
angle: 360,
|
||
duration: 1000,
|
||
ease: 'Linear',
|
||
onComplete: () => {
|
||
this.tweens.add({
|
||
targets: obj1,
|
||
y: 950,
|
||
duration: 500,
|
||
ease: 'Power2'
|
||
});
|
||
this.tweens.add({
|
||
targets: obj2,
|
||
scale: 1,
|
||
duration: 500,
|
||
ease: 'Power2'
|
||
});
|
||
this.tweens.add({
|
||
targets: obj3,
|
||
angle: 0,
|
||
duration: 500,
|
||
ease: 'Power2'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
} |