Pixi.js is a library / engine for creating and manipulating graphics in the browser. Its reputation lies in its ultra-fast WebGL renderer, which gives it superior performance. Pixi.js is an excellent alternative to create interactions, games and advanced visualizations. It is possible to consult the official documentation here.
In this series of articles we will explore the basic concepts to start using Pixi.js in our projects.
Installation
There are three main options:
CDN
The easiest way is to start with a version ready to use in the browser, inserting it directly from a CDN, copying and pasting in the HTML code a line like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
For development on a local machine it is recommended not to use a minimized version, but the full version, because it is easier to debug any possible errors in our own code.
Download source code
It can also be used by downloading the files from its GitHub repository.
NPM
In a project managed by npm, installation is done using the following command:
npm install pixi.js
and then import it like this:
import * as PIXI from 'pixi.js'
The simplest application
There are several ways to create an application based on Pixi.js and in all of them the same result can be achieved, more or less. The simplest way is to use the facilities offered by the [PIXI.Application] class (https://pixijs.download/release/docs/PIXI.Application.html), which allows you to create the essential elements of a standard Pixi.js application in a few steps. These elements are:
- El renderer
- El ticker
- El contenedor raíz
Later we will develop an application with a more granular control of these elements but for now we will do it in the simplest way. We are going to prepare an empty HTML file, simple-app.html, which only includes the Pixi.js library and a JavaScript file with our own code, which should preferably be inserted inside the body of the document, just before the closing tag </body>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01. Introduction - loading and verifying pixi.js</title>
</head>
<body>
<script src="js/pixi.js"></script>
<script src="js/my_simple_app.js"></script>
</body>
</html>
For now, that's all the necessary HTML code.
In the file my_simple_app.js, we will put the necessary code to test Pixi.js.
An instance of the application must be created, with the indispensable parameters: width, height and background color that the canvas element will have when inserted into the HTML document. We will use a light gray to be able to distinguish the element, in contrast to the background of the HTML document.
let app = new PIXI.Application({
width: 480,
height: 240,
backgroundColor: 0xCCCCCC
});
Now that the application is created, it must be added to the body of the document using the view member of the created instance:
document.body.appendChild(app.view);
Note that on the line above, the expression document.body refers to the body element within the HTML document and that the appendChild function is plain JavaScript, not a Pixi.js function (which also exists). Now the file with the complete application script should look like this:
// create the PIXI application
let app = new PIXI.Application({
width: 480,
height: 240,
backgroundColor: 0xCCCCCC
});
// append the canvas into the document
document.body.appendChild(app.view);
That's it. As a result, opening the HTML file simple-app.html in the browser window should show an empty, slightly gray box:
Also, if all goes well, when opening the console within the browser development tools (usually with the F12 key), you should read a greeting from the library similar to this:
In the next post we will show how to add basic elements (primitives, text and sprites) to the stage, using Pixi.js
Top comments (0)