How to change the size of a PixiJS application

/ #PixiJS


A PixiJS application has a default size. But what if you want to size to match the window or you just want a completely different size?

The code

Create a new HTML file and add this code to it:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        
        <title>PixiJS Size</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
        <style>* { margin: 0; padding: 0; }</style>
    </head>
    <body>
        <script type="text/javascript">
            // The application
            var app = new PIXI.Application();

            // Add application to the DOM
            document.body.appendChild(app.view);
        </script>
    </body>
</html>

If you open up this file in your browser, you should see a big black square. That's perfect, because then we know that PixiJS has loaded correctly.

Setting a custom size

Above the line where we create the variable "app", add these two lines:

var width = 400;
var height = 200;

But we also need to tell the application that we want to use these two variables. Change the "app" variable so it looks like this:

var application = new PIXI.Application({
    width: width,
    height: height
});

If you go back to the browser again and refresh, the black square will be 400px wide and 200px tall.

A full screen application

Sometimes you want the size to match the screen size, that's fairly easy to do. Just change the two width and height variables to look like this:

var width = window.innerWidth;
var height = window.innerHeight;

If you go back to the browser again and refresh, the window will now fill up the entire screen.


Comments

No comments yet...

Add comment

Subscribe to my newsletter