How to install Pixi.js

Created Mar 5, 2021 at 13:37

Pixi.js is an extremely fast 2D sprite rendering engine. What does that mean? It means that it helps you to display, animate and manage interactive graphics so that it's easy for you to make games and applications using JavaScript and other HTML5 technologies. It has a sensible, uncluttered API and includes many useful features, like supporting texture atlases and providing a streamlined system for animating sprites (interactive images). It also gives you a complete scene graph so that you can create hierarchies of nested sprites (sprites inside sprites), as well as letting you attach mouse and touch events directly to sprites.

Pixi’s API is actually a refinement of a well-worn and battle-tested API pioneered by Macromedia/Adobe Flash. Old-skool Flash developers will feel right at home. Other current sprite rendering frameworks use a similar API: CreateJS, Starling, Sparrow and Apple’s SpriteKit. The strength of Pixi’s API is that it’s general-purpose: it’s not a game engine. That’s good because it gives you total expressive freedom to make anything you like, and wrap your own custom game engine around it.

You can download the latest version of Pixi.js from the GitHub releases or use a Pixi.js CDN.

You can clone a repository from GitHub.com to your local computer.

Cloning with HTTPS URLs

git clone https://github.com/pixijs/pixi.js.git

Cloning with SSH URLs

git clone [email protected]:pixijs/pixi.js.git

Cloning with GitHub CLI

gh repo clone pixijs/pixi.js

Run the following command to locally install the package and its dependencies with NPM.

Downloading and installing packages locally

npm i pixi.js

npm install pixi.js

yarn add pixi.js

Downloading and installing packages globally

npm i -g pixi.js

yarn global add pixi.js

Install Specific Version of a Package

npm install [email protected]

yarn add [email protected]

Bower

bower install pixi.js

Example

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):

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
  <script src="pixi/pixi.min.js"></script>
<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>