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.
94 lines
1.8 KiB
HTML
94 lines
1.8 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 = ["../../logo_small.png", "data/dragonBones.json", "data/dragonBonesData.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 dragon = new PIXI.Spine("data/dragonBonesData.json");
|
|
|
|
var scale = 1;//window.innerHeight / 700;
|
|
|
|
dragon.position.x = window.innerWidth/2;
|
|
dragon.position.y = window.innerHeight/2 + (450 * scale);
|
|
|
|
dragon.scale.x = dragon.scale.y = scale
|
|
|
|
|
|
dragon.state.setAnimationByName("flying", true);
|
|
|
|
stage.addChild(dragon);
|
|
|
|
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>
|