pixi.js/examples/example 10 - Text/index.html at v2.x

Fork: 0
mark / pixi.js
Find file
Newer
Older
pixi.js / examples / example 10 - Text / index.html
Alvin on 2 Dec 2014 3 KB Cleaned and tidied up the examples
Raw Blame History
<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 10 Text</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>

    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>
    // Load them google fonts before starting...!
    WebFontConfig = {
      google: {
        families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
      },

      active: function() {
        // do something
        init();
      }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

    function init()
    {
        var assetsToLoader = ["desyrel.xml"];

        // create a new loader
        var loader = new PIXI.AssetLoader(assetsToLoader);

        // use callback
        loader.onComplete = onAssetsLoaded;

        // create an new instance of a pixi stage
        var stage = new PIXI.Stage(0x66FF99);

        // begin load
        loader.load();

        function onAssetsLoaded()
        {
            var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", { font: "35px Desyrel", align: "right" });
            bitmapFontText.position.x = 620 - bitmapFontText.textWidth - 20;
            bitmapFontText.position.y = 20;

            stage.addChild(bitmapFontText);
        }

        // add a shiny background...
        var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
        stage.addChild(background);

        // create a renderer instance
        var renderer = PIXI.autoDetectRenderer(620, 400);
        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);

        // create some white text using the Snippet webfont
        var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", { font: "35px Snippet", fill: "white", align: "left" });
        textSample.position.x = 20;
        textSample.position.y = 20;

        // create a text object with a nice stroke
        var spinningText = new PIXI.Text("I'm fun!", { font: "bold 60px Arial", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 20 });

        // setting the anchor point to 0.5 will center align the text... great for spinning!
        spinningText.anchor.x = spinningText.anchor.y = 0.5;
        spinningText.position.x = 620 / 2;
        spinningText.position.y = 400 / 2;

        // create a text object that will be updated..
        var countingText = new PIXI.Text("COUNT 4EVAR: 0", { font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7 });
        countingText.position.x = 620 / 2;
        countingText.position.y = 320;
        countingText.anchor.x = 0.5;

        stage.addChild(textSample);
        stage.addChild(spinningText);
        stage.addChild(countingText);

        var count = 0;
        var score = 0;
        var remaining = 10;


        function animate() {
            requestAnimFrame(animate);
            renderer.render(stage);

            count+=0.1;
            countingText.setText("COUNT 4EVAR: " + (count | 0));
        }

        requestAnimFrame(animate);
    }

    </script>

    </body>
</html>