airpg-front/assets/scripts/StoryPannelCtr.ts

import { _decorator, AudioClip, AudioSource, Component, Label, Node } from "cc"
import { processCtr } from "./socket/processCtr"
const { ccclass, property } = _decorator

@ccclass("StoryPannelCtr")
export class StoryPannelCtr extends Component {
    @property({ type: processCtr })
    public processCtr: processCtr | null = null

    @property
    typeSpeed: number = 0.2 // 每个字符出现的间隔时间

    @property
    maxLines: number = 18 // 最大行数

    @property(AudioClip)
    public typingClip: AudioClip = null!

    public audioSource: AudioSource = null!

    private fullText: string = ""

    private currentText: string = ""
    private allLines: string[] = []
    public label: Label | null = null
    private currentLine: string = ""
    private processedCharsCount: number = 0

    public isOnProcess: boolean = false

    public finishInit: boolean = false

    public storyContent: string =
        "《隐形守护者》巧妙的结合了影视剧专业的演技造诣和电子游戏独有的交互体验，用电子游戏独有的表现手法，让玩家对当时那段充满色彩的历史有了新的认识。剧本没有模仿传统谍战剧，整个故事设定都非常符合当时那个年代，游戏中的每个人物都信手拈来展现出难以想象的独创性。游戏提供了传统游戏所不具备的沉浸式的互动体验、真正意义上的多样选择所导致的不同结局。更强调简化的互动性和操作性，以完全影视剧的镜头和剧本来叙事。游戏采用高成本但效果好的真人实拍的方式。对剧本细节的打磨和对当时人物环境的考究。通过演员精湛的演技给玩家营造出真实的体验。这款游戏用一种特殊的方式，为玩家讲述了一个精彩的抗战背景下的谍战故事。《隐形守护者》是一部国内首款创新性互动影像作品。全程采用真人拍摄，以定格图像辅之以影视化剪辑的手法。游戏还利用真人互动影像的优势为用户进行了一场行之有效的爱国主义教育。人实景拍摄，所有场景均为实拍影像，包括为了增加历史真实感而添加的影像史料。加上精良的影音演绎的方式大大的增加了代入感，选角上，演员颜值、演技双在线，除了主角肖途展现出贯穿全剧的人性弧光外，女性角色都演绎得各有特点。而极为考究的场景、道具和服装，也都彰显出制作组的用心和细致。而全程语音加持，以及根据剧情推进或激燃或紧张的配乐，让人有亲临谍战大片的错觉。看似是一个拥有四大结局，多达12个小时的故事情节，但从整个故事来看，它的主旋律其实很简单。"

    initStory(str: string) {
        console.log("初始化故事！！！！！！！！！！！！！")
        this.label.string = str
    }

    updateStory(str: string) {
        console.log("开始更新故事！！！！！！！！！！！！！")

        //this.fullText = str.replace(/[\r\n]+/g, ' ').trim();
        this.fullText = str
            .replace(/[\r\n]+/g, " ")
            .replace(/\s+/g, " ")
            .trim()
        if (!this.node) {
            console.warn("RichText component is not assigned!")
            return
        }

        //初始化中间值
        this.processedCharsCount = 0
        this.currentLine = ""
        this.allLines = []
        this.audioSource.pause()

        this.currentText = ""
        this.label.string = this.currentText
        console.log(this.typeSpeed)

        this.typeWrite()
        this.audioSource.play()
    }

    typeWrite() {
        if (this.processedCharsCount < this.fullText.length) {
            const nextChar = this.fullText[this.processedCharsCount]
            this.currentLine += nextChar
            this.processedCharsCount++

            // 检查当前行的长度，决定是否开始新的一行
            if ((this.currentLine.length === 24 && nextChar !== " ") || this.currentLine.length === 25) {
                this.allLines.push(this.currentLine)
                this.currentLine = ""
            }

            // 检查所有行的总数，删除早期的行以维持 maxLines 的限制
            while (this.allLines.length > this.maxLines - 1) {
                // -1 是因为还有 currentLine
                this.allLines.shift()
            }

            if (this.label) {
                this.label.string = [...this.allLines, this.currentLine].join("\n")
            }

            this.scheduleOnce(() => {
                this.typeWrite()
            }, this.typeSpeed)
        } else {
            //初始化中间值
            this.processedCharsCount = 0
            this.currentLine = ""
            this.allLines = []
            this.audioSource.pause()
            if (this.isOnProcess) {
                console.log("展示剧情处理完成，处理下一个")
                this.processCtr.doneProcessing()
            }
        }
    }

    start() {
        this.label = this.getComponent(Label)
        this.audioSource = this.node.getComponent(AudioSource)
        let typeSpeed = new URLSearchParams(location.search).get("speed")
        if (typeSpeed !== null) {
            this.typeSpeed = Number(typeSpeed)
            console.log("get speed from URL:" + typeSpeed)
        } else {
            console.log("use defult roomId")
        }
    }

    update(deltaTime: number) {}
}