Setting up

Before you start writing any code, create a folder for your project, and launch a webserver in the project’s root directory. If you aren’t running a webserver, Pixi won’t work.

Next, you need to install Pixi.

Installing Pixi

The version used for this introduction is v4.5.5 and you can find the pixi.min.js file either in this repository’s pixi folder or on Pixi’s release page for v4.5.5. Or, you can get the latest version from Pixi’s main release page.

This one file is all you need to use Pixi. You can ignore all the other files in the repository: you don’t need them.

Next, create a basic HTML page, and use a <script> tag to link the pixi.min.js file that you’ve just downloaded. The <script> tag’s src should be relative to your root directory where your webserver is running. Your <script> tag might look something like this:

  1. <script src="pixi.min.js"></script>

Here’s a basic HTML page that you could use to link Pixi and test that it’s working. (This assumes that the pixi.min.js is in a subfolder called pixi):

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Hello World</title>
  6. </head>
  7.   <script src="pixi/pixi.min.js"></script>
  8. <body>
  9.   <script type="text/javascript">
  10.     let type = "WebGL"
  11.     if(!PIXI.utils.isWebGLSupported()){
  12.       type = "canvas"
  13.     }
  15.     PIXI.utils.sayHello(type)
  16.   </script>
  17. </body>
  18. </html>

If Pixi is linking correctly, something like this will be displayed in your web browser’s JavaScript console by default:

  1.       PixiJS 4.4.5 - * canvas * http://www.pixijs.com/  ♥♥♥