Adding text to a PixiJS application

/ #PixiJS


In this part I'm going to show you how to add text to the PixiJS application and style it.

Let's start with the HTML file

Create a new HTML file somewhere on your computer and add this code:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        
        <title>PixiJS Text and Styling</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // The application
            var app = new PIXI.Application();

            // Add application to the DOM
            document.body.appendChild(app.view);
        </script>
    </body>
</html>

If you open up the HTML file in your browser, you should see a big black square. That means that the PixiJS application is working.

Adding text

Now that the application is up and running, it's time to add some text. We'll start off easy by just showing "Hello PixiJS!" as a white text.

Below the line where you add the application to the DOM, add this code:

var hello = new PIXI.Text("Hello PixiJS!");
hello.x = 250;
hello.y = 200;
hello.style.fill = "white";
app.stage.addChild(hello);

If you go back to your browser and refresh, you should see a white text inside the black square saying "Hello PixiJS!".

On the first line of this code, we create a new variable called "hello". This uses "PIXI.Text" to say that we want a text with the value "Hello PixiJS!". Line 2 and 3 takes care of the positioning in the screen. 250px from the left and 200px from the top. The default color of the text is black, so we needed to add some styling to make it white. On the last line, we just append the "hello" text to the stage.

Styling the text

The text we added above is white and generic. With PixiJS there is a ton a things you can do to make it pop. First, remove this line (hello.style.fill = "white";).

Above the line where you create the "hello" variable, add this code:

var style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 50,
    fill: 'blue'
});

And there is one more thing you need to do before PixiJS what to apply this style to;

// Change this line:
var hello = new PIXI.Text("Hello PixiJS!");

// To this (notice that we added ", style")
var hello = new PIXI.Text("Hello PixiJS!", style);

Now you can refresh the browser again, and a big blue text should be there instead of the white.

Let's add some crazy styling to the text. Remove the whole "style" variable we just added and add this instead:

var style = new PIXI.TextStyle({
    fontFamily: 'Verdana',
    fontSize: 36,
    fontStyle: 'italic',
    fill: ['#ff0000', '#0000ff'], // gradient
    stroke: '#00ff00',
    strokeThickness: 10,
    dropShadow: true,
    dropShadowColor: '#ff0000',
    dropShadowBlur: 10,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 20
});

If you go back to you browser now, you should see a red and blue text, with a green stroke and a red drop shadow. Feel free to play around with these parameters so you get a better understanding of how they work. Most of the options is self explaining, but it's fun to play with them anyway.

If you want to see all of the possible options, you can read more about them here: http://pixijs.download/release/docs/PIXI.TextStyle.html


Comments

No comments yet...

Add comment

Subscribe to my newsletter