Window Focus

Focus control

In this tutorial step we will create a simple logic to guarantee that the render process stop when the page get the focus lost. This is important because we are working with the web browser and if we keep our application working, this can impact in the system performance. This tutorial is so easy.

Here we will use two events: blur and onclick. The blur event is triggered when the element gets the focus lost. This event will be use to put the application in stand by. The onclick event will be triggered when the user clicks in this element. This event will be used to turn on the application again.

The first thing we will do is create a variable that will reference the interval we defined in main() function. This is necessary because we will need to start / stop this interval. After define it, we will set this variable with the interval we created.

// Main loop
let mainLoop = null;

// ...

/**
 * Main loop
 */
function main() {
    mainLoop = setInterval(function() {
        clearScreen();
        movePlayer();
        rayCasting();
    }, data.render.dalay);
}

Now, we will create the two events we checked before. The first is the blur event. We will set this event in the window element for when the user gets out the browser page, the event gets called and stops the render method. In this step we will have to:

• Clear the main loop interval
• Set the main loop to null
• Render an overlap with some message for the user (optional)

/**
 * Window focus lost event
 */
window.addEventListener('blur', function(event) {
    if(mainLoop != null) {
        clearInterval(mainLoop);
        mainLoop = null;
        renderFocusLost();
    }
});

Note: The renderFocusLost() function will be created just to render some feedback for the user about the focus lost. If you dont want to do that, it is not so important.

The second event is onclick. We will define this event for the screen element. The screen element is our canvas so, we will define that the user will need to click in the screen to turn on the application again. Remember we need to check if the mainLoop is null, otherwise we will conflict the interval render logic if the user clicks in the screen with the window focused.

/**
 * Window focus
 */
screen.onclick = function() {
    if(!mainLoop) {
        main();
    }
}

The last thing to do is to render the overlap with some feedback to the user. In this step we will fill a transparent black rect in the full screen, and we will show some message to the user. In this example, I used the 'Lucida Console' font but you can use other if you want.

/**
 * Render focus lost
 */
function renderFocusLost() {
    screenContext.fillStyle = 'rgba(0,0,0,0.5)';
    screenContext.fillRect(0, 0, data.projection.width, data.projection.height);
    screenContext.fillStyle = 'white';
    screenContext.font = '10px Lucida Console';
    screenContext.fillText('CLICK TO FOCUS', 37, data.projection.halfHeight);
}

Note: I used 37 value to position the text in the middle of the screen but it depends the size of the text and the letter amount it will have. You can use constant values for align.

Well, we are done! This is an example of the window if no focus:

The next tutorial is near. Lets go!

• Next: Intermediary Result Code
• Previous: Intermediary Collision Detection