102 lines
2.1 KiB
HTML
102 lines
2.1 KiB
HTML
<!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>
|