Resolution on mobile

[barren jackal]

Hello, i am a new developer that has been working on a web based game. Recently i realised that my game does not scale good on mobile so i have tried for countless hours with ai and other stuff but it still wont look good. If anyone proffesional could give some tips on an easy way of doing or how to properly do it. Do i need to move around the UI depending on what scale it is?, please help

[wild perch]

Please choose one place to post your question

[barren jackal]

Sorry, didnt quite understand where to post it.

Resolution on mobile

[tardy lance]

What kind of UI does the game have? Does it use HTML elements or is everything drawn on a canvas? If it uses HTML elements, regular responsive design principles might be sufficient.

If you are using a canvas, you must avoid the beginner's temptation to set the coordinate system to match CSS pixel width and height. Choose your own width and height for the canvas virtual coordinate system, and do not change it regardless of the viewport dimensions. The only change you might want to have is a different aspect ratio in response to the orientation of the display.

To clarify, there is a difference between canvas.width and canvas.style.width. There is also a difference between canvas.height and canvas.style.height. The ones that mention "style" do not need to be equal to the ones that don't have "style". The only requirement is that the aspect ratios of both unit systems must match. It is common for beginners, after discovering that explicit height and width are necessary, to set those two systems equal, and that ruins responsiveness, unless you do a lot of extra math.

Also, do not attempt to match the aspect ratio of the viewport. Choose your own aspect ratio ahead of time. The main point is you must know the exact width and height of the virtual coordinate system when you are writing your code, unless you want to do a lot of extra math to compensate. If you know the dimensions of the coordinate system, you can place objects correctly. If you let the viewport dimensions choose width, height, or aspect ratio, you no longer know where to put things unless you do a lot of extra math.

[barren jackal]

The entire game is built in a canvas using pixie, recently i tried media queries but it didnt turn out good so ai suggested that i use a function to scale the canvas. I have set a fixed size like this const BASE_WIDTH = 1280;
const BASE_HEIGHT = 720; , The function made it zoom in to a corner and didnt work at all so now i am completly lost. Thank you for you tips, ask if something doesnt make sense I try to explain the best i can 🙂

[tardy lance]

Media queries are not useful for canvas games. The only use for that would be to determine orientation. Do not attempt to use break points or any of the responsiveness techniques used for normal websites. None of that works because the items on the canvas do not work they way that HTML elements do.

How are you using BASE_WIDTH and BASE_HEIGHT? You must explicitly set canvas.width and canvas.height to your virtual coordinate system. If those numbers are for your virtual coordinate system, then you must do something like:

canvas.height = BASE_HEIGHT;
canvas.width = BASE_WIDTH;

This is assuming that "canvas" is already defined and refers to the canvas element.

If things are zoomed and in the corner, that means you are not properly using the coordinate system.

[barren jackal]

Sorry i have a hard time understanding how i am using the height and width, here is the first 43 lines with initialization and the base and width, // Initialize game variables globally for accessibility
let balanceText, freeSpinsText, betText, autoplayText, historyText, reels, winText,
reelsContainer, spinButton, betUp, betDown, muteButton, buyBonusButton, winbar, autoplaybutton;

// Cleanup previous application if exists
if (window.__slotMachineApp) {
window.__slotMachineApp.destroy(true);
document.querySelector('canvas')?.remove();
}

// Define fixed virtual resolution (16:9 aspect ratio)
const BASE_WIDTH = 1280;
const BASE_HEIGHT = 720;

// Initialize PIXI Application with fixed virtual dimensions
const app = new PIXI.Application({
width: BASE_WIDTH,
height: BASE_HEIGHT,
backgroundColor: 0x0a0a1a,
antialias: true,
resolution: window.devicePixelRatio || 1,
autoDensity: true
});
window.__slotMachineApp = app;
document.body.appendChild(app.view);

// Function to scale the game content to fill the canvas display size
function scaleGame() {
const canvas = app.view;
const canvasWidth = canvas.clientWidth;
const canvasHeight = canvas.clientHeight;

// Calculate scale to fill the display size, may crop content
const scaleX = canvasWidth / BASE_WIDTH;
const scaleY = canvasHeight / BASE_HEIGHT;
const scale = Math.max(scaleX, scaleY); // Use maximum to fill the screen, cropping if needed
app.stage.scale.set(scale, scale);

// Center the stage within the canvas, adjusting for potential cropping
const offsetX = (canvasWidth - BASE_WIDTH * scale) / 2;
const offsetY = (canvasHeight - BASE_HEIGHT * scale) / 2;
app.stage.position.set(offsetX, offsetY);

} , also here is how it currently looks on pc and mobile,

[tardy lance]

 const canvasWidth = canvas.clientWidth;
 const canvasHeight = canvas.clientHeight;

This is using the viewport dimensions, which is exactly what I just explained you should not be doing.

It doesn't directly access window's height and width, but it is accessing values very likely to be dependent on it.

How you position things should be completely unrelated to the actual size of the canvas, except for the matter of aspect ratio. The browser does the scaling for you. Completely ignore the actual dimensions. Make your own and stick to that in all your sizing and positioning.

[tardy lance]

https://codepen.io/chooking/pen/azzeLgO
Here is a demonstration of the underlying principle. The grey box stays in the center of the canvas regardless of the viewport size. You can try resizing it to verify this. Notice that there is no code that checks the dimensions of anything at all. It relies on the dimensions that I decided, and it does not depend in any way on the viewport size. The CSS causes the canvas physical size to also change based on viewport size, but there is no JS code that checks the canvas physical size either.

[barren jackal]

Thank you very much, i appricate you helping me, im just trying to understand everything it takes a little time but i am getting there:)

[barren jackal]

Does this look right,
const BASE_WIDTH = 1600
const BASE_HEIGHT = 900
const app = new PIXI.Application({
width: BASE_WIDTH,
height: BASE_HEIGHT,
backgroundColor: 0x0a0a1a,
resolution: window.devicePixelRatio || 1,
autoDensity: true
});

document.body.appendChild(app.view);

function resizeRendererToWindow() {
app.renderer.resize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resizeRendererToWindow);
resizeRendererToWindow();

and here is part of my index.html , <style>
:root {
color-scheme: dark;
}

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background: #0a0a1a;
    }

    canvas {
display: block;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
width: 100vw;
height: 100vh;
object-fit: contain;
background: #0a0a1a;

}