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.
147 lines
3.3 KiB
HTML
147 lines
3.3 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/PixieSpineData.json", "data/Pixie.json", "data/iP4_BGtile.jpg", "data/iP4_ground.png"];
|
|
|
|
// 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(1024, 640);
|
|
|
|
// set the canvas width and height to fill the screen
|
|
renderer.view.style.display = "block";
|
|
renderer.view.style.width = "100%"
|
|
renderer.view.style.height = "100%"
|
|
|
|
// add render view to DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
var postition = 0;
|
|
var background;
|
|
var background2;
|
|
|
|
function onAssetsLoaded()
|
|
{
|
|
background = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
|
|
background2 = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
|
|
stage.addChild(background);
|
|
stage.addChild(background2);
|
|
|
|
foreground = PIXI.Sprite.fromImage("data/iP4_ground.png");
|
|
foreground2 = PIXI.Sprite.fromImage("data/iP4_ground.png");
|
|
stage.addChild(foreground);
|
|
stage.addChild(foreground2);
|
|
foreground.position.y = foreground2.position.y = 640 - foreground2.height;
|
|
|
|
var pixie = new PIXI.Spine("data/PixieSpineData.json");
|
|
|
|
var scale = 0.3;//window.innerHeight / 700;
|
|
|
|
pixie.position.x = 1024/3;
|
|
pixie.position.y = 500
|
|
|
|
pixie.scale.x = pixie.scale.y = scale
|
|
|
|
|
|
//dragon.state.setAnimationByName("running", true);
|
|
|
|
stage.addChild(pixie);
|
|
|
|
pixie.stateData.setMixByName("running", "jump", 0.2);
|
|
pixie.stateData.setMixByName("jump", "running", 0.4);
|
|
|
|
pixie.state.setAnimationByName("running", true);
|
|
|
|
|
|
|
|
stage.mousedown = stage.touchstart = function()
|
|
{
|
|
pixie.state.setAnimationByName("jump", false);
|
|
pixie.state.addAnimationByName("running", true);
|
|
}
|
|
|
|
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
|
stage.addChild(logo);
|
|
|
|
|
|
logo.anchor.x = 1;
|
|
logo.position.x = 1024
|
|
logo.scale.x = logo.scale.y = 0.5;
|
|
logo.position.y = 640 - 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() {
|
|
|
|
postition += 10;
|
|
|
|
background.position.x = -(postition * 0.6);
|
|
background.position.x %= 1286 * 2;
|
|
if(background.position.x<0)background.position.x += 1286 * 2;
|
|
background.position.x -= 1286;
|
|
|
|
background2.position.x = -(postition * 0.6) + 1286;
|
|
background2.position.x %= 1286 * 2;
|
|
if(background2.position.x<0)background2.position.x += 1286 * 2;
|
|
background2.position.x -= 1286;
|
|
|
|
foreground.position.x = -postition;
|
|
foreground.position.x %= 1286 * 2;
|
|
if(foreground.position.x<0)foreground.position.x += 1286 * 2;
|
|
foreground.position.x -= 1286;
|
|
|
|
foreground2.position.x = -postition + 1286;
|
|
foreground2.position.x %= 1286 * 2;
|
|
if(foreground2.position.x<0)foreground2.position.x += 1286 * 2;
|
|
foreground2.position.x -= 1286;
|
|
|
|
requestAnimFrame( animate );
|
|
|
|
|
|
renderer.render(stage);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|