javascript – Invisible sprites with requestAnimationFrame and

The purpose of a operate 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 referred to as again and again by the browser’s rendering engine.

I feel what it’s speculated 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 capabilities which then all create an interval. That is one thing you solely must do as soon as, not again and again. And also you needn’t name it by way of requestAnimationFrame. So each cases of the road window.requestAnimationFrame(setup) make no sense. Simply name the setup methodology as soon as while you begin the sport.

Then there may be the issue that you’ve your calls to context.drawImage not through the requestAnimationFrame operate however as a part of the setInterval operate. That is not how you’re speculated 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 every time, in order that they mustn’t comprise any canvas drawing.

Now you would possibly surprise: “However I do not understand how usually the browser calls requestAnimationFrame. How am I speculated to correctly time my animations with that operate?”

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

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

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

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

Then in the principle program, you could have each a setup methodology and a draw methodology. The setup methodology begins the animation loop of the draw methodology:

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

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

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

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

By the way in which, there may be one other drawback right here that you do not wait with drawing till all of the sprites have loaded. However that is one other drawback for one more query.