CINC/scenes/storeScenes/PrimordialDevide.js

/**
 * PrimordialDevide 场景类
 * 
 * 初始引导场景，显示空白背景并在用户交互或自动延迟后
 * 执行过渡动画切换到下一个场景
 */
export default class PrimordialDevide extends Phaser.Scene {
    /**
     * 构造函数
     * 初始化场景并设置场景键名为 'PrimordialDevide'
     */
    constructor() {
        super('PrimordialDevide')
        this.nextScene = 'BreatheLife'
    }

    /**
     * 创建场景
     * 设置背景颜色，添加用户交互监听和自动切换计时器
     */
    create() {
        // 设置场景背景颜色为深灰色
        this.cameras.main.setBackgroundColor('#333333')

        // 设置动画播放状态为 false，避免多次触发
        this.animationPlaying = false
        
        // 监听鼠标点击事件，点击后执行场景过渡动画
        this.input.on('pointerdown', () => {
            // 获取点击位置的坐标
            const { x, y } = this.input.activePointer
            this.transitionToScene(x, y)
        })
        
        // 监听键盘按键事件，按键后执行场景过渡动画
        this.input.keyboard.on('keydown', () => {
            this.transitionToScene()
        })
        
        // 设置1秒后自动执行场景过渡动画
        this.time.delayedCall(1000, () => {
            this.transitionToScene()
        })
    }

    /**
     * 执行到下一个场景的过渡动画
     * 
     * 动画流程：
     * 1. 从屏幕中心向两侧延伸一条白色直线（横向扩展）
     * 2. 横向扩展完成后，直线向上下扩展铺满整个屏幕（纵向扩展）
     * 3. 纵向扩展完成后，切换到MenuScene场景
     */
    transitionToScene(startX,startY) {
        // 如果动画正在播放，直接返回
        if (this.animationPlaying) {
            return
        }
        // 设置动画播放状态为 true
        this.animationPlaying = true

        const graphics = this.add.graphics()  // 创建图形对象，用于绘制过渡动画

        const centerX = startX || this.cameras.main.centerX  // 获取屏幕中心点的X坐标
        const centerY = startY || this.cameras.main.centerY  // 获取屏幕中心点的Y坐标

        const lineHeight = 2  // 初始线条高度（2像素）
        
        const maxWidth = this.cameras.main.width  // 屏幕最大宽度，用于横向扩展的目标值

        graphics.fillStyle(0xffffff, 1)  // 设置初始填充颜色为白色，透明度为1
        
        // 创建线条对象，用于控制横向扩展动画的属性
        const line = {
            width: 0,      // 初始宽度为0（仅中心点）
            x: centerX     // 初始X坐标为屏幕中心
        }

        // 创建横向扩展动画
        this.tweens.add({
            targets: line,           // 动画目标对象
            width: maxWidth,         // 目标宽度为屏幕宽度
            x: 0,                    // 目标X坐标为屏幕左侧
            duration: 300,           // 动画持续时间（300毫秒）
            ease: 'Power2.easeOut',  // 动画缓动函数
            onUpdate: function() {   // 动画更新回调函数
                graphics.clear()                      // 清除之前的绘制
                graphics.fillStyle(0x999999, 1)       // 设置填充颜色
                // 绘制当前状态的线条
                graphics.fillRect(line.x, centerY - lineHeight / 2, line.width, lineHeight)
            },
            onComplete: function() { // 动画完成回调函数
                // 横向动画完成后，调用纵向扩展动画方法
                this.expandVerticalAnimation(graphics, centerY, lineHeight, maxWidth)
            },
            callbackScope: this      // 回调函数的作用域（指向当前场景实例）
        })
    }

    /**
     * 执行纵向扩展动画
     * 
     * @param {Phaser.GameObjects.Graphics} graphics - 图形对象，用于绘制动画
     * @param {number} centerY - 屏幕中心点的Y坐标
     * @param {number} lineHeight - 初始线条高度
     * @param {number} maxWidth - 屏幕宽度，用于绘制横向铺满的矩形
     */
    expandVerticalAnimation(graphics, centerY, lineHeight, maxWidth) {
        // 创建纵向线条对象，用于控制纵向扩展动画的属性
        const verticalLine = {
            height: lineHeight,                 // 初始高度为线条高度
            y: centerY - lineHeight / 2         // 初始Y坐标为屏幕中心减去线条高度的一半
        }
        
        // 屏幕最大高度，用于纵向扩展的目标值
        const maxHeight = this.cameras.main.height

        // 创建纵向扩展动画
        this.tweens.add({
            targets: verticalLine,      // 动画目标对象
            height: maxHeight,          // 目标高度为屏幕高度
            y: 0,                       // 目标Y坐标为屏幕顶部
            duration: 300,             // 动画持续时间
            ease: 'Power2.easeOut',     // 动画缓动函数
            onUpdate: function() {      // 动画更新回调函数
                graphics.clear()                      // 清除之前的绘制
                graphics.fillStyle(0x999999, 1)       // 设置填充颜色
                // 绘制当前状态的矩形（已横向铺满，正在纵向扩展）
                graphics.fillRect(0, verticalLine.y, maxWidth, verticalLine.height)
            },
            onComplete: function() {    // 动画完成回调函数
                // 纵向动画完成后，切换到指定场景
                // 加上内置过渡动画
                this.cameras.main.fadeOut(300, 0, 0, 0);
                this.cameras.main.once('camerafadeoutcomplete', () => {
                    // 切换到游戏场景
                    this.scene.start(this.nextScene);
                });
            },
            callbackScope: this         // 回调函数的作用域（指向当前场景实例）
        })
    }
}