Jump to content

How to size game and background images?


Recommended Posts

I want my game to resize to the 100% window width and keep an aspect ratio. I have this css solution:

  #app {
    position: relative;
    width: 100vw;
    height: 0;
    padding-bottom: 65.5%;
    margin: auto;
<div id="app"></div>
let element = document.getElementById('app');

let displayWidth = element.clientWidth,
    displayHeight = element.clientHeight;

const app = new PIXI.Application({
  width: displayWidth,
  height: displayHeight

Now I want to add a background image, with a size 800x600. This image covers whole display area fine, but if the window size is greater than 800, the edges go black.

I am not sure how to size my application, and what to do if it exceeds the image size. Should I stretch the image, or set maximum height of game to be image size.

Link to comment
Share on other sites

That's a problem for everyone, and every game developer must face it for their maturity, that's why PixiJS doesnt have built-in solution for it. If you learn how resize works, and how stage transforms (scale) work, if you know how CSS works - you can find a solution for your case.

A few options:

1. fixed canvas size (that you pass into application), only css resize, browser handles how canvas is displayed. you dont need any scales on pixi side, but quality can suffer a bit.

2. resized canvas to fit/enlarge/whatever, set stage scale too. you dont need to change pixi elements coords, but you have to correctly handle mouse events, you cant just take global mouse coords and use them in world, toLocal(stage) will help you.

3. canvas always same size as screen, and you change layout of your game accordingly. Old pixel games should do it. Pain for UI and game design, but in many cases its better than 1 or 2.

In cases 1 and 2 its your choice whether to stretch, fit or enlarge it. 

Summary: its easy to do if you decide what you want, and its great exercise for people. There's no best solutions on that, and we dont want people to just assume everything is easy in html5 gamedev. You have to go through it.

Link to comment
Share on other sites

Architectural advice - if you follow my guide about creating application https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop  , you can make a component inside your app that works on responsiveness. I usually name it "easel", because that's the class that handled that problem in Mozilla Shumway. So if you need info about your layour from other components or places , use "app.easel" :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...