javascriptmathcanvasgame-developmentgame-physics

2D smooth movement from scratch (javascript, pixelart)

My interest in game development led me to the idea of implementing the logic from scratch, without an engine.

Finally, I came to the point of optimizing the movement sequences of the background in an RPG 2D game. Basically, the implementation was not particularly complex due to the numerous help functions, but I am not completely satisfied.

I've only worked with canvas to a limited extent so far, which is why the code I've provided here can certainly be optimized. What interests me, however, is how the 8-direction system can be optimized.

Ultimately, it is not the user who is moved, but the background. This results in massive jerks due to the speed of movement and the specified number of pixels that have to be overcome.

Basically, I have a logic that allows me to normalize vectors, but the optimization guides I have noticed are not very helpful.

To make it clearer, I minimized the movement speed. I already played around with some delta values or tried to round some values but this ended very badly in some blurry pixel art.

Any idea in how to optimize this demo?

const game = document.querySelector('#game');
const context = game.getContext('2d');

const background = new Image();
background.src = 'https://i.imgur.com/82hX6qh.png';

const player = new Image();
player.src = 'https://i.imgur.com/LrL69By.png';

const backgroundHeight = 480;
const backgroundWidth = 840;
const playerHeight = 16;
const playerWidth = 12;

const initialGameWidth = 240;
const initialGameHeight = playerWidth * 10;

const cameraSpeed = 0.1;
const step = 1 / 60;

let x = backgroundWidth / 2; // Player Starting X
let y = backgroundHeight / 2; // Player Starting Y
let speed = 1;
let keymap = [];
let previousMs;
let cameraX = x;
let cameraY = y;

game.width = initialGameWidth;
game.height = initialGameHeight;

const handleScreens = () => {
    const scale = window.innerHeight / initialGameHeight;
    game.style.scale = scale;

    const gameHeight = Math.round(window.innerHeight / scale);
    const gameWidth = Math.round(window.innerWidth / scale);

    game.height = gameHeight % 2 ? gameHeight + 1 : gameHeight;
    game.width = gameWidth % 2 ? gameWidth + 1 : gameWidth;
};

handleScreens();
window.addEventListener('resize', () => handleScreens());

window.addEventListener('keydown', event => {
    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }

    keymap.push(event.key);
});

window.addEventListener('keyup', event => {
    let index = keymap.indexOf(event.key);

    if (index > -1) {
        keymap.splice(index, 1);
    }
});

const handleCamera = (currentValue, destinationValue) => {
    return currentValue * (1 - cameraSpeed) + destinationValue * cameraSpeed;
};

const handleWork = () => {
    let tempChange = { x: 0, y: 0 };

    [...keymap].forEach(direction => {
        switch (direction) {
            case 'ArrowRight':
                tempChange.x = 1;
                break;
            case 'ArrowLeft':
                tempChange.x = -1;
                break;
            case 'ArrowUp':
                tempChange.y = -1;
                break;
            case 'ArrowDown':
                tempChange.y = 1;
                break;
        }
    });

    let angle = Math.atan2(tempChange.y, tempChange.x);

    if (tempChange.x !== 0) {
        x += Math.cos(angle) * speed;
    }

    if (tempChange.y !== 0) {
        y += Math.sin(angle) * speed;
    }

    cameraX = handleCamera(cameraX, x);
    cameraY = handleCamera(cameraY, y);

    //context.imageSmoothingEnabled = false;
    context.clearRect(0, 0, game.width, game.height);
    context.save();
    context.translate(-cameraX + (game.width / 2) - (playerWidth / 2), -cameraY + (game.height / 2) - (playerHeight / 2));
    context.drawImage(background, 0, 0, backgroundWidth, backgroundHeight);
    context.drawImage(player, 0, 0, playerWidth, playerHeight, x, y, playerWidth, playerHeight);
    context.restore();
};

const main = (timestampMs) => {
    if (previousMs == undefined) {
        previousMs = timestampMs;
    }

    let delta = (timestampMs - previousMs) / 1000;

    while (delta >= step) {
        handleWork();
        delta -= step;
    }

    previousMs = timestampMs - delta * 1000;

    requestAnimationFrame(main);
};

requestAnimationFrame(main);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#game {
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
<canvas id="game"></canvas>

Solution

  • The canvas can only interpret integers, which is why it interpolates with decimal numbers. This interpolation ensures that the pixels are blurred, as an attempt is made to display an intermediate status of the two pixels.

    One of the reasons for this is the scaling by CSS, which only scales up the element. The original pixels are still there, they are just perceived as larger.

    However, as soon as you start scaling directly via canvas, not only are the pixels perceived as larger, but the interpolation is also improved, as it now has access to the intermediate pixels. This allows intermediate states to be displayed clearly.

    This can be implemented as follows via canvas:

    context.imageSmoothingEnabled = false;
const scale = window.innerHeight / initialGameHeight;
context.scale(scale, scale);