Jump to content

Proper way to initialize/resize PIXI.Application for a simple 2D game


Recommended Posts


Let's say we want to make a simple 2D game, e.g. Ping-Pong or Asteroids.

I have seen that sometimes people use window.innerwidth/height to initialize a PIXI.Application and sometimes they use document.body.clientWidth/clientHeight.

app = new PIXI.Application({
        width: Math.max(1, window.innerWidth),
        height: Math.max(1, window.innerHeight),
        resolution: devicePixelRatio,
        autoDensity: true,

Similar for resize events:

window.addEventListener('resize', onResize);
function onResize(): void {
    app.renderer.resize(window.innerWidth, window.innerHeight);

This is used for a very simple setup, having an index.html:

<!DOCTYPE html>
<html lang="en">

        <meta charset="UTF-8" />
        <title>Simple PIXI App</title>
        <link rel="stylesheet" type="text/css" href="main.css" />

        <script src="./main.ts">


So, my question is: what is the best practice to initialize/resize application's width and height? Should I use window, or document.body, or create a <div name="#frame"> and specify its size? I would prefer that the initial application takes full screen and in the code I would resize according to the needs. However, it is confusing which data to use as a reference for the screen size. Ideally, that simple app, call it ping-pong, should work on any device/browser.

Link to comment
Share on other sites

what is the best practice to initialize/resize application's width and height?

nobody gave complete answer on that for all years of pixijs.

Here is the most basic setup: https://github.com/ivanpopelyshev/pixi-starfighter just do 720 x 1280 and CSS resize. Yes, it does not make 1:1 pixel, expect some soap.

There are many problems with balancing pixels, because you cant use 1:1 in HTML5, many devices have very big screens and slow video.

Edited by ivan.popelyshev
Link to comment
Share on other sites

My current resize solution is to have canvas resize to certain size (determined so that no asset gets upscaled, downscaling is ok) and if the screen is larger than that size, then render at the aspect ratio of the screen with the maximum supported size and upscale the canvas with css to fill rest of the screen. Also swapping out the method how css upscale happens based on game content. For example if it's pixel art then image-rendering:crisp-edges will mitigate some of the css scaling issues.

And for how the objects are positioned & scaled inside pixi stage, that is a long problem with very many solutions. I have done one post about this some time ago. Will edit the post after finding it.

About how to read the screen size: If you have full control over your html file and it doesn't get embedded by some other site without iframe then using window.innerWidth & window.innerHeight as your size targets is good. Just remember to have margin & padding set to 0 on body & other elements that are above your canvas.

On the other hand if you are embedding to some site then they might have their own resolution requirements, in those cases the resolution is usually just fixed or they provide an object / hook / something that provides the data.

[Edit] Found the link to older post, this wasn't so complete as what I remembered https://www.html5gamedevs.com/topic/37686-responsive-pixijs/?tab=comments#comment-215138


Edited by Exca
Added link
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...