pixi.js/examples/example 12 - Spine/index.html at ed4152b837c83d4b24e5466c893ae8c019f000bc

Fork: 0

mark / pixi.js

Find file

Newer

Older

pixi.js / examples / example 12 - Spine / index.html

PixxxeL on 5 Oct 2014 2 KB Replace `tabs` char on 4 `spaces` chars in examples

Raw Blame History

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 12 Spine</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>

    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>


    // create an array of assets to load

    var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"];

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

    // use callback
    loader.onComplete = onAssetsLoaded

    //begin load
    loader.load();


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

    // create a renderer instance
    var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // set the canvas width and height to fill the screen
    renderer.view.style.display = "block";

    // add render view to DOM
    document.body.appendChild(renderer.view);

    function onAssetsLoaded()
    {
        // create a spine boy
        var spineBoy = new PIXI.Spine("data/spineboySpineData.json");

        // set the position
        spineBoy.position.x = window.innerWidth/2;
        spineBoy.position.y = window.innerHeight;

        spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400;

        // set up the mixes!
        spineBoy.stateData.setMixByName("walk", "jump", 0.2);
        spineBoy.stateData.setMixByName("jump", "walk", 0.4);

        // play animation
        spineBoy.state.setAnimationByName("walk", true);


        stage.addChild(spineBoy);

        stage.click = function()
        {
            spineBoy.state.setAnimationByName("jump", false);
            spineBoy.state.addAnimationByName("walk", true);

        }

        var logo = PIXI.Sprite.fromImage("../../logo_small.png")
        stage.addChild(logo);


        logo.anchor.x = 1;
        logo.position.x = window.innerWidth
        logo.scale.x = logo.scale.y = 0.5;
        logo.position.y = window.innerHeight - 70;
        logo.setInteractive(true);
        logo.buttonMode = true;
        logo.click = logo.tap = function()
        {
            window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
        }
    }



    requestAnimFrame(animate);

    function animate() {

        requestAnimFrame( animate );
        renderer.render(stage);
    }

    </script>

    </body>
</html>