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.
92 lines
1.8 KiB
HTML
Executable file
92 lines
1.8 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>pixi.js example 3 using a movieclip</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 = [ "SpriteSheet.json"];
|
|
|
|
// create a new loader
|
|
loader = new PIXI.AssetLoader(assetsToLoader);
|
|
|
|
// use callback
|
|
loader.onComplete = onAssetsLoaded
|
|
|
|
//begin load
|
|
loader.load();
|
|
|
|
|
|
// holder to store aliens
|
|
var explosions = [];
|
|
|
|
var count = 0;
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0xFFFFFF);;
|
|
|
|
// create a renderer instance.
|
|
renderer = PIXI.autoDetectRenderer(800, 600);
|
|
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
function onAssetsLoaded()
|
|
{
|
|
// create an array to store the textures
|
|
var explosionTextures = [];
|
|
|
|
for (var i=0; i < 26; i++)
|
|
{
|
|
var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
|
|
explosionTextures.push(texture);
|
|
};
|
|
|
|
// create a texture from an image path
|
|
// add a bunch of aliens
|
|
for (var i = 0; i < 50; i++)
|
|
{
|
|
// create an explosion MovieClip
|
|
var explosion = new PIXI.MovieClip(explosionTextures);
|
|
|
|
|
|
explosion.position.x = Math.random() * 800;
|
|
explosion.position.y = Math.random() * 600;
|
|
explosion.anchor.x = 0.5;
|
|
explosion.anchor.y = 0.5;
|
|
|
|
explosion.rotation = Math.random() * Math.PI;
|
|
explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5
|
|
|
|
explosion.gotoAndPlay(Math.random() * 27);
|
|
|
|
stage.addChild(explosion);
|
|
}
|
|
|
|
// start animating
|
|
requestAnimFrame( animate );
|
|
|
|
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame( animate );
|
|
|
|
renderer.render(stage);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|