How to size game and background images?

[eguneys]

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

<style>
  #app {
    position: relative;
    width: 100vw;
    height: 0;
    padding-bottom: 65.5%;
    margin: auto;
  }
</style>
<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.

[ivan.popelyshev]

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.

[ivan.popelyshev]

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"