我的HTML 5帆布游戏总是在帧间闪烁怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (77)

我最近开始制作HTML 5 RPG帆布游戏,并决定制作一个“文本框”之类的东西,但当我对它进行编程时,它开始在蓝色和文本框之间闪烁,每隔一帧。是什么导致了这一切?

代码:

  function update() {
        if (realm == 'overworld') {
            cc.fillStyle='blue';
            cc.fillRect(0,0,c.width,c.height);
            cc.drawImage(bob, x, y);

            // Player Walk Animations 

            if (direction == 'up' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveUP1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleUP.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveUP2.png"
                }
            }
            else if (direction == 'right' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveRIGHT1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleRIGHT.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveRIGHT2.png"
                }
            }
            else if (direction == 'left' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveLEFT1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleLEFT.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveLEFT2.png"
                }
            }
            else if (direction == 'down' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveDOWN1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleDOWN.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveDOWN2.png"
                }
            }        
            if (idleframe == 8) {
                if (direction == 'down') {
                    document.getElementById("source").src = "IdleDOWN.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'up') {
                    document.getElementById("source").src = "IdleUP.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'right') {
                    document.getElementById("source").src = "IdleRIGHT.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'left') {
                    document.getElementById("source").src = "IdleLEFT.png"
                    idleframe = 0;
                    idleness = true;
                }
                if (talking == true) {
                    if (wordcount != textBoxTest.length) {
                        cc.drawImage(textBox, 0, 400);
                        cc.fillStyle = "white";
                        console.log("this is working")
                        cc.fillText(counted, 0, 100);
                        counted += textBoxTest[wordcount]
                        wordcount++;
                    }
                    else if (EnterToggle == true) {
                        EnterToggle = false;
                        talking = false;
                    }
提问于
用户回答回答于

HTML从一开始就完全错误,标签在错误的位置和过时的元素。

你在改变src属性的IMG标记,你不应该这样做。对每个文件使用不同的Image对象,并使代码选择要绘制的图像。这确保了所有的图像在游戏开始前被加载一次,而不是每次你改变它的时候。加载可以异步进行,并在尝试绘制映像时尚未准备好绘制时导致错误。

你还拥有以下代码:

window.onload= function() {
    c=document.getElementById('gc');
    document.addEventListener("keydown",keyPush)
    cc=c.getContext('2d');
    setInterval(update,1000/30);
};

因为你运行了UPDATEsetInterval,你以每秒33次的速度更新和绘制游戏。你应该有一个独立的函数来处理绘图,该函数被调用为requestAnimationFrame(draw)。这将确保浏览器只在可能的情况下绘制框架,在计算机无法跟上时跳过绘图。

扫码关注云+社区

领取腾讯云代金券