Getting started with PixiJS

/ #PixiJS


In the first part of this PixiJS tutorial I talked about what PixiJS is, a couple of example and what we are going to learn. In this part I'm going to show you how to set up PixiJS and we are also going to show a scene in your browser.

In the introduction to this tutorial series I talked about what we are going to learn througout this series. If you haven't read it yet, I suggest that you do that first.

Creating the project

To make it as easy as possible, we are just going to use a CDN for the pre built version of PixiJS. Since we are learning the basics of the syntax, there is no need to also start learning about how to install it using npm or yarn yet.

Since we are just going to use the CDN, the only thing you need to do is to create a new HTML file somewhere on your computer, and write the following content:

<!DOCTYPE html>

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

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    </head>

   <body>
        <script type="text/javascript">
        </script>
    </body>
</html>

Since this tutorial assumes that you already know HTML, CSS and JavaScript, everything here should be familiar. PixiJS 5.1.3 is the current version of the library. A newer version might be used with this tutorial, but that has not been tested.

If you go to your browser and open the HTML file you just created, you should see nothing more than a blank screen.

Before we wrap up this part of the tutorial, I'm going to show you how to add a Pixi.JS scene to the browser window.

The PixiJS application

Every PixiJS game and app out there has an "Application" as the base element. This is where everything is connected. Inside the <script> tag you added in the HTML file, add this JavaScript.

// The application
const app = new PIXI.Application();

// Add application to the DOM
document.body.appendChild(app.view);

If you go back to the browser and refresh the window, you should see a big black square at the top left corner of the window. This is a PixiJS application with the default size and options.

If you want to append it into a div-element or similar, that's no problem either. You would just get the element by using getElementById and then append it to that element instead of the body. Like this:

<!DOCTYPE html>

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

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    </head>

   <body>
        <div id="pixi">
        </div>
        <script type="text/javascript">
            // The application
            const app = new PIXI.Application();

            // Add application to the DOM
            const element = document.getElementById('pixi');
            element.appendChild(app.view);
        </script>
    </body>
</html>

What's next?

In the next part, we will start adding sprites to the application.

If you have any questions about the content here, feel free to leave a comment below or reach out to me on twitter.


Comments

No comments yet...

Add comment

Subscribe to my newsletter