mirror of
https://github.com/photonstorm/phaser
synced 2024-11-30 16:39:34 +00:00
141 lines
No EOL
5 KiB
HTML
141 lines
No EOL
5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>phaser.js - a(nother) new beginning</title>
|
|
<script src="../src/Phaser.js"></script>
|
|
|
|
<script src="../src/pixi/Pixi.js"></script>
|
|
<script src="../src/pixi/InteractionManager.js"></script>
|
|
<script src="../src/pixi/core/Circle.js"></script>
|
|
<script src="../src/pixi/core/Ellipse.js"></script>
|
|
<script src="../src/pixi/core/Matrix.js"></script>
|
|
<script src="../src/pixi/core/Point.js"></script>
|
|
<script src="../src/pixi/core/Polygon.js"></script>
|
|
<script src="../src/pixi/core/Rectangle.js"></script>
|
|
<script src="../src/pixi/display/DisplayObject.js"></script>
|
|
<script src="../src/pixi/display/DisplayObjectContainer.js"></script>
|
|
<script src="../src/pixi/display/Sprite.js"></script>
|
|
<script src="../src/pixi/display/MovieClip.js"></script>
|
|
<script src="../src/pixi/display/Stage.js"></script>
|
|
<script src="../src/pixi/extras/CustomRenderable.js"></script>
|
|
<script src="../src/pixi/extras/Strip.js"></script>
|
|
<script src="../src/pixi/extras/Rope.js"></script>
|
|
<script src="../src/pixi/extras/Spine.js"></script>
|
|
<script src="../src/pixi/extras/TilingSprite.js"></script>
|
|
<script src="../src/pixi/filters/FilterBlock.js"></script>
|
|
<script src="../src/pixi/filters/MaskFilter.js"></script>
|
|
<script src="../src/pixi/primitives/Graphics.js"></script>
|
|
<script src="../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
|
|
<script src="../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
|
|
<script src="../src/pixi/renderers/webgl/WebGLBatch.js"></script>
|
|
<script src="../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
|
|
<script src="../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
|
|
<script src="../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
|
|
<script src="../src/pixi/renderers/webgl/WebGLShaders.js"></script>
|
|
<script src="../src/pixi/text/BitmapText.js"></script>
|
|
<script src="../src/pixi/text/Text.js"></script>
|
|
<script src="../src/pixi/textures/BaseTexture.js"></script>
|
|
<script src="../src/pixi/textures/Texture.js"></script>
|
|
<script src="../src/pixi/textures/RenderTexture.js"></script>
|
|
<script src="../src/pixi/utils/Detector.js"></script>
|
|
<script src="../src/pixi/utils/EventTarget.js"></script>
|
|
<script src="../src/pixi/utils/Polyk.js"></script>
|
|
<script src="../src/pixi/utils/Utils.js"></script>
|
|
|
|
<script src="../src/system/RequestAnimationFrame.js"></script>
|
|
<script src="../src/system/Device.js"></script>
|
|
<script src="../src/core/SignalBinding.js"></script>
|
|
<script src="../src/core/Signal.js"></script>
|
|
<script src="../src/core/PluginManager.js"></script>
|
|
<script src="../src/core/Plugin.js"></script>
|
|
<script src="../src/math/RandomDataGenerator.js"></script>
|
|
<script src="../src/math/Math.js"></script>
|
|
<script src="../src/geom/Point.js"></script>
|
|
<script src="../src/geom/Circle.js"></script>
|
|
<script src="../src/net/Net.js"></script>
|
|
<script src="../src/tween/TweenManager.js"></script>
|
|
<script src="../src/tween/Tween.js"></script>
|
|
<script src="../src/tween/Easing.js"></script>
|
|
<script src="../src/time/Time.js"></script>
|
|
<script src="../src/animation/Animation.js"></script>
|
|
<script src="../src/animation/Frame.js"></script>
|
|
<script src="../src/animation/FrameData.js"></script>
|
|
<script src="../src/animation/Parser.js"></script>
|
|
<script src="../src/loader/Cache.js"></script>
|
|
<script src="../src/loader/Loader.js"></script>
|
|
<script src="../src/Game.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var game = new Phaser.Game(this, '', 800, 600);
|
|
|
|
// PIXI it
|
|
var stage = new PIXI.Stage(0x000044);
|
|
var renderer = PIXI.autoDetectRenderer(800, 600);
|
|
document.body.appendChild(renderer.view);
|
|
|
|
game.load.image('cockpit', 'assets/pics/cockpit.png');
|
|
game.load.image('rememberMe', 'assets/pics/remember-me.jpg');
|
|
game.load.image('overdose', 'assets/pics/lance-overdose-loader_eye.png');
|
|
|
|
game.load.onLoadStart.add(loadStarted, this);
|
|
game.load.onFileComplete.add(fileLoaded, this);
|
|
game.load.onLoadComplete.add(loadCompleted, this);
|
|
|
|
game.load.start();
|
|
|
|
function loadStarted(size) {
|
|
console.log('Loader started, queue size:', size);
|
|
}
|
|
|
|
// this.progress, previousKey, success, this.queueSize - this._keys.length, this.queueSize
|
|
function fileLoaded(progress, key, success, remaining, total) {
|
|
console.log('File Loaded:', key);
|
|
console.log('Progress: ' + progress + '%');
|
|
console.log('File: ' + remaining + ' out of ' + total);
|
|
}
|
|
|
|
var bunny;
|
|
|
|
function loadCompleted() {
|
|
|
|
console.log('Loader finished, creating base textures');
|
|
|
|
// Create a basetexture
|
|
var base = new PIXI.BaseTexture(game.cache.getImage('overdose'));
|
|
var texture = new PIXI.Texture(base);
|
|
bunny = new PIXI.Sprite(texture);
|
|
|
|
// center the sprites anchor point
|
|
bunny.anchor.x = 0.5;
|
|
bunny.anchor.y = 0.5;
|
|
|
|
// move the sprite t the center of the screen
|
|
bunny.position.x = 200;
|
|
bunny.position.y = 150;
|
|
|
|
stage.addChild(bunny);
|
|
|
|
requestAnimFrame(animate);
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame( animate );
|
|
|
|
// just for fun, lets rotate mr rabbit a little
|
|
bunny.rotation += 0.1;
|
|
bunny.scale.x += 0.01;
|
|
bunny.scale.y += 0.01;
|
|
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |