ddb24d7fe0
- updating Gruntfile and package.json to include grunt-concat-sourcemap and grunt-contrib-watch for easier development. - use "grunt build-debug" to build a source-mapped file to pixi.dev.js -- or use "grunt watch" during development of examples to auto build-debug any JS changes to PIXI source or the example files.
104 lines
2.5 KiB
HTML
104 lines
2.5 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/goblins.json", "data/goblinsSpineData.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()
|
|
{
|
|
var goblin = new PIXI.Spine("data/goblinsSpineData.json");
|
|
|
|
// set current skin
|
|
goblin.skeleton.setSkinByName('goblin');
|
|
goblin.skeleton.setSlotsToSetupPose();
|
|
|
|
// set the position
|
|
goblin.position.x = window.innerWidth/2;
|
|
goblin.position.y = window.innerHeight;
|
|
|
|
goblin.scale.x = goblin.scale.y = window.innerHeight / 400;
|
|
|
|
// play animation
|
|
goblin.state.setAnimationByName("walk", true);
|
|
|
|
|
|
stage.addChild(goblin);
|
|
|
|
stage.click = function()
|
|
{
|
|
// change current skin
|
|
var currentSkinName = goblin.skeleton.skin.name;
|
|
var newSkinName = (currentSkinName == 'goblin' ? 'goblingirl' : 'goblin');
|
|
goblin.skeleton.setSkinByName(newSkinName);
|
|
goblin.skeleton.setSlotsToSetupPose();
|
|
};
|
|
|
|
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>
|