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:
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
// 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:
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.