How to change the size of a PixiJS application

/ #Pixi.js


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

Newsletter

Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.