javascript – Invisible sprites with requestAnimationFrame

The purpose of a perform handed to requestAnimationFrame which then passes itself again to requestAnimationFrame at its finish is to not be a setup-function. It is a drawing-function which will get known as over and over by the browser’s rendering engine.

I believe what it’s purported to do in your code instance is to arrange the canvas for first rendering and schedule the animations for all of the objects by calling their animateObjectImage features which then all create an interval. That is one thing you solely have to do as soon as, not over and over. And also you need not name it by way of requestAnimationFrame. So each situations of the road window.requestAnimationFrame(setup) make no sense. Simply name the setup technique as soon as while you begin the sport.

Then there’s the issue that you’ve your calls to context.drawImage not throughout the requestAnimationFrame perform however as a part of the setInterval perform. That is not how you might be purported to do it! All drawing ought to occur throughout requestAnimationFrame, so the online browser can correctly combine the rendering into its personal rendering loop. Capabilities scheduled by way of setInterval get executed at any time when, so that they shouldn’t comprise any canvas drawing.

Now you may marvel: “However I do not know the way usually the browser calls requestAnimationFrame. How am I purported to correctly time my animations with that perform?”

The reply is to separate logic from drawing! A precept that ought to be obeyed in any well-designed sport structure.

• Have the setInterval perform set which body is the presently displayed body for that object.
• Have the requestAnimationFrame draw no matter is the presently displayed body for the thing.

You are able to do that by breaking the animateObjectImage technique of your genericObject perform pseudo-class into two separate strategies setup and draw. The setup technique does initialization and schedules the logic (however not the drawing!) and the draw technique attracts no matter state the logic has set.

perform genericObject(objectSpriteSheet, xPosition, yPosition){
    this.objectImage = (perform (){
        let newImageObject = new Picture()
        newImageObject.src = objectSpriteSheet
        return (newImageObject)
    })()
    // setup perform
    this.setup = perform(objectImage, frameRate){
        let setIntervalTime = 1000 / frameRate;
        let currentFrame = 1;
        let totalSprites = 8;
        let spriteHeight = objectImage.peak;
        let spriteWidth = objectImage.width / totalSprites;
        setInterval(perform(){
            currentFrame = (currentFrame + 1) % totalSprites;
            currentFrame++;
        }, setIntervalTime)
    }
    // draw perform
    this.draw = perform() {
            let screenX = currentFrame * spriteWidth;
            context.drawImage(objectImage, screenX, 0, spriteWidth, spriteHeight, xPosition, yPosition, spriteWidth, spriteHeight);
    }
}

Then in the primary program, you’ve got each a setup technique and a draw technique. The setup technique begins the animation loop of the draw technique:

perform setup() {
    objectsArray.forEach((factor) => {
        factor.setup(factor.objectImage, 9)
    })
    window.requestAnimationFrame(draw)
}

perform draw() {
    context.clearRect(0, 0, canvas.width, canvas.peak)
    objectsArray.forEach((factor) => {
        factor.draw()
    })
    window.requestAnimationFrame(draw)
}

And you then initialize your sport by calling the setup technique when the web page has loaded:

window.onload = perform(){  
    /* ...all the opposite initializations... */
    setup();
}  

By the best way, there’s one other downside right here that you do not wait with drawing till all of the sprites have loaded. However that is one other downside for one more query.