Skip to content

Commit

Permalink
RequestAnimationFrame done and optimised massively. PluginManager add…
Browse files Browse the repository at this point in the history
…ed (but needs testing). Game now fleshed out with all the state changing and core loop, also optimised heavily. Also Pixi integration started and the basics are working well :)
  • Loading branch information
photonstorm committed Aug 29, 2013
1 parent b8d3a61 commit 3c8cd20
Show file tree
Hide file tree
Showing 9 changed files with 1,076 additions and 44 deletions.
14 changes: 10 additions & 4 deletions examples/math sincos.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@
<head>
<title>phaser.js - a(nother) new beginning</title>
<script src="../src/Phaser.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/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>
Expand All @@ -25,14 +30,15 @@

var game = new Phaser.Game(this, '', 800, 600);

var data = Phaser.Math.sinCosGenerator(10);
var data = game.math.sinCosGenerator(10);

console.log('Sin', data.sin);
console.log('Cos', data.cos);

console.log('Shift value 1', Phaser.Math.shift(data.sin));
console.log('Shift value 2', Phaser.Math.shift(data.sin));
console.log('Shift value 3', Phaser.Math.shift(data.sin));
console.log('Shift value 1', game.math.shift(data.sin));
console.log('Shift value 2', game.math.shift(data.sin));
console.log('Shift value 3', game.math.shift(data.sin));
console.log('Shift value 4', game.math.shift(data.sin));

console.log('Sin', data.sin);

Expand Down
139 changes: 139 additions & 0 deletions examples/pixi 1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!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/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>
45 changes: 45 additions & 0 deletions examples/raf.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE HTML>
<html>
<head>
<title>phaser.js - a(nother) new beginning</title>
<script src="../src/Phaser.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/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>

<pre id="raf">?</pre>
<pre id="time">Game Time: </pre>

<script type="text/javascript">

var game = new Phaser.Game(this, '', 800, 600, null, null, update);

document.getElementById('raf').innerHTML = 'Browser using requestAnimationFrame: ' + game.raf.isRAF();

function update() {
document.getElementById('time').innerHTML = 'Game Time: ' + game.time.now;
}

</script>

</body>
</html>
107 changes: 101 additions & 6 deletions examples/wip1.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,51 @@
<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>
Expand All @@ -29,17 +71,70 @@

var game = new Phaser.Game(this, '', 800, 600);

var test = { x: 0 };
// 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');

var tween = game.tweens.create(test);
// 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);

tween.onComplete.add(onComplete, this);
tween.to({x: 100}, 1000, Phaser.Easing.Linear.None, true);
requestAnimFrame(animate);
}

function animate() {

function onComplete() {
console.log('tween finished, new data: ', test);
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>
Expand Down
Loading

0 comments on commit 3c8cd20

Please sign in to comment.