Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-18 06:58:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed some errors in Rectangle and more Pixi hooks added, now creating the Stage properly and rendering sprites.

Browse source
This commit is contained in:
Richard Davey 2013-08-29 19:20:04 +01:00
parent 19483bafed
commit 6bf7bab917
8 changed files with 137 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/js.php
View file

@ -45,6 +45,7 @@
<script src="../src/core/StateManager.js"></script> <script src="../src/core/StateManager.js"></script>
<script src="../src/core/State.js"></script> <script src="../src/core/State.js"></script>
<script src="../src/system/RequestAnimationFrame.js"></script> <script src="../src/system/RequestAnimationFrame.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/Device.js"></script> <script src="../src/system/Device.js"></script>
<script src="../src/core/SignalBinding.js"></script> <script src="../src/core/SignalBinding.js"></script>
<script src="../src/core/Signal.js"></script> <script src="../src/core/Signal.js"></script>
@ -54,6 +55,7 @@
<script src="../src/math/Math.js"></script> <script src="../src/math/Math.js"></script>
<script src="../src/geom/Point.js"></script> <script src="../src/geom/Point.js"></script>
<script src="../src/geom/Circle.js"></script> <script src="../src/geom/Circle.js"></script>
<script src="../src/geom/Rectangle.js"></script>
<script src="../src/net/Net.js"></script> <script src="../src/net/Net.js"></script>
<script src="../src/tween/TweenManager.js"></script> <script src="../src/tween/TweenManager.js"></script>
<script src="../src/tween/Tween.js"></script> <script src="../src/tween/Tween.js"></script>

22
examples/rect1.php Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>phaser.js - a new beginning</title>
<?php
require('js.php');
?>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game();
var r = new Phaser.Rectangle(0,0,100,100);
console.log(r);
</script>
</body>
</html>

37
examples/stage 1.php
View file

@ -12,12 +12,14 @@
(function () { (function () {
// In this approach we're simply using functions in the current scope to do what we need // var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var game = new Phaser.Game(800, 600, Phaser.RENDERER_AUTO, '', { preload: preload, create: create }); var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
var bunny;
function preload() { function preload() {
console.log('*** preload called'); console.log('***> preload called');
game.load.image('cockpit', 'assets/pics/cockpit.png'); game.load.image('cockpit', 'assets/pics/cockpit.png');
game.load.image('overdose', 'assets/pics/lance-overdose-loader_eye.png'); game.load.image('overdose', 'assets/pics/lance-overdose-loader_eye.png');
@ -25,8 +27,33 @@
function create() { function create() {
console.log('*** create called'); console.log('***> create called');
document.body.appendChild(game.cache.getImage('cockpit'));
// 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;
game.stage._s.addChild(bunny);
}
function update() {
if (game.paused == false)
{
bunny.rotation += 0.1;
bunny.scale.x += 0.01;
bunny.scale.y += 0.01;
}
} }

22
src/Game.js
View file

@ -28,7 +28,7 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
if (typeof width === "undefined") { width = 800; } if (typeof width === "undefined") { width = 800; }
if (typeof height === "undefined") { height = 600; } if (typeof height === "undefined") { height = 600; }
if (typeof renderer === "undefined") { renderer = Phaser.RENDERER_AUTO; } if (typeof renderer === "undefined") { renderer = Phaser.AUTO; }
if (typeof parent === "undefined") { parent = ''; } if (typeof parent === "undefined") { parent = ''; }
if (typeof state === "undefined") { state = null; } if (typeof state === "undefined") { state = null; }
if (typeof transparent === "undefined") { transparent = false; } if (typeof transparent === "undefined") { transparent = false; }
@ -43,9 +43,6 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
this.transparent = transparent; this.transparent = transparent;
this.antialias = antialias; this.antialias = antialias;
this.renderType = renderer; this.renderType = renderer;
// this.renderer = renderer;
console.log('Phaser.Game', width, height, renderer, parent, transparent, antialias);
this.state = new Phaser.StateManager(this, state); this.state = new Phaser.StateManager(this, state);
@ -246,8 +243,6 @@ Phaser.Game.prototype = {
return; return;
} }
console.log('Phaser.Game boot');
if (!document.body) { if (!document.body) {
window.setTimeout(this._onBoot, 20); window.setTimeout(this._onBoot, 20);
} }
@ -287,13 +282,13 @@ Phaser.Game.prototype = {
this.stage.boot(); this.stage.boot();
// this.input.boot(); // this.input.boot();
if (this.renderType == Phaser.RENDERER_CANVAS) if (this.renderType == Phaser.CANVAS)
{ {
console.log('Phaser', Phaser.VERSION, 'initialized. Rendering to Canvas'); console.log('%cPhaser ' + Phaser.VERSION + ' initialized. Rendering to Canvas', 'color: #ffff33; background: #000000');
} }
else else
{ {
console.log('Phaser', Phaser.VERSION, 'initialized. Rendering to WebGL'); console.log('%cPhaser ' + Phaser.VERSION + ' initialized. Rendering to WebGL', 'color: #ffff33; background: #000000');
} }
this.isRunning = true; this.isRunning = true;
@ -308,11 +303,11 @@ Phaser.Game.prototype = {
setUpRenderer: function () { setUpRenderer: function () {
if (this.renderType == Phaser.RENDERER_CANVAS || (this.renderer == Phaser.RENDERER_AUTO && this.device.webGL == false)) if (this.renderType == Phaser.CANVAS || (this.renderer == Phaser.AUTO && this.device.webGL == false))
{ {
if (this.device.canvas) if (this.device.canvas)
{ {
this.renderType = Phaser.RENDERER_CANVAS; this.renderType = Phaser.CANVAS;
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, this.transparent); this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, this.transparent);
Phaser.Canvas.setSmoothingEnabled(this.renderer.view, this.antialias); Phaser.Canvas.setSmoothingEnabled(this.renderer.view, this.antialias);
} }
@ -373,7 +368,8 @@ Phaser.Game.prototype = {
this.state.preRender(); this.state.preRender();
// this.renderer.render(); this.renderer.render(this.stage._s);
this.plugins.render(); this.plugins.render();
this.state.render(); this.state.render();
@ -389,7 +385,7 @@ Phaser.Game.prototype = {
this.plugins.postUpdate(); this.plugins.postUpdate();
this.plugins.preRender(); this.plugins.preRender();
// this.renderer.render(); this.renderer.render(this.stage._s);
this.plugins.render(); this.plugins.render();
this.state.loadRender(); this.state.loadRender();
this.plugins.postRender(); this.plugins.postRender();

6
src/Phaser.js
View file

@ -27,8 +27,8 @@ var Phaser = Phaser || {
VERSION: '1.0.0', VERSION: '1.0.0',
GAMES: [], GAMES: [],
RENDERER_AUTO: 0, AUTO: 0,
RENDERER_CANVAS: 1, CANVAS: 1,
RENDERER_WEBGL: 2 WEBGL: 2
}; };

10
src/Stage.js
View file

@ -13,9 +13,6 @@ Phaser.Stage = function (game) {
this.game = game; this.game = game;
this.bounds = new Phaser.Rectangle;
this.offset = new Phaser.Point;
}; };
Phaser.Stage.prototype = { Phaser.Stage.prototype = {
@ -29,8 +26,9 @@ Phaser.Stage.prototype = {
boot: function () { boot: function () {
// Get the offset values (for input and other things) // Get the offset values (for input and other things)
this.offset = new Phaser.Point;
Phaser.Canvas.getOffset(this.game.renderer.view, this.offset); Phaser.Canvas.getOffset(this.game.renderer.view, this.offset);
this.bounds.setTo(this.offset.x, this.offset.y, this.game.width, this.game.height); this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
this._s = new PIXI.Stage(0x000000); this._s = new PIXI.Stage(0x000000);
@ -62,12 +60,12 @@ Phaser.Stage.prototype = {
if (event.type == 'pagehide' || event.type == 'blur' || document['hidden'] == true || document['webkitHidden'] == true) if (event.type == 'pagehide' || event.type == 'blur' || document['hidden'] == true || document['webkitHidden'] == true)
{ {
console.log('visibilityChange - hidden', event); // console.log('visibilityChange - hidden', event);
this.game.paused = true; this.game.paused = true;
} }
else else
{ {
console.log('visibilityChange - shown', event); // console.log('visibilityChange - shown', event);
this.game.paused = false; this.game.paused = false;
} }

3
src/core/StateManager.js
View file

@ -6,7 +6,6 @@ Phaser.StateManager = function (game, pendingState) {
if (pendingState !== null) if (pendingState !== null)
{ {
console.log('StartManager constructor', pendingState);
this._pendingState = pendingState; this._pendingState = pendingState;
} }
@ -99,7 +98,7 @@ Phaser.StateManager.prototype = {
boot: function () { boot: function () {
console.log('Phaser.StateManager.boot'); // console.log('Phaser.StateManager.boot');
if (this._pendingState !== null) if (this._pendingState !== null)
{ {

82
src/geom/Rectangle.js
View file

@ -11,38 +11,71 @@
**/ **/
Phaser.Rectangle = function (x, y, width, height) { Phaser.Rectangle = function (x, y, width, height) {
if (typeof x === "undefined") { x = 0; }
if (typeof y === "undefined") { y = 0; }
if (typeof width === "undefined") { width = 0; }
if (typeof height === "undefined") { height = 0; }
/** /**
* @property x * @property x
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.x = x || 0; this.x = x;
/** /**
* @property y * @property y
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.y = y || 0; this.y = y;
/** /**
* @property width * @property width
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.width = width || 0; this.width = width;
/** /**
* @property height * @property height
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.height = height || 0; this.height = height;
}; };
Phaser.Rectangle.prototype = { Phaser.Rectangle.prototype = {
/**
* @property x
* @type Number
* @default 0
*/
x: 0,
/**
* @property y
* @type Number
* @default 0
*/
y: 0,
/**
* @property width
* @type Number
* @default 0
*/
width: 0,
/**
* @property height
* @type Number
* @default 0
*/
height: 0,
/** /**
* Adjusts the location of the Rectangle object, as determined by its top-left corner, by the specified amounts. * Adjusts the location of the Rectangle object, as determined by its top-left corner, by the specified amounts.
* @method offset * @method offset
@ -146,7 +179,7 @@ Phaser.Rectangle.prototype = {
*/ */
size: function (output) { size: function (output) {
return Phaser.Rectangle.size(this, output); return Phaser.Rectangle.size(this, output);
}; },
/** /**
* Returns a new Rectangle object with the same values for the x, y, width, and height properties as the original Rectangle object. * Returns a new Rectangle object with the same values for the x, y, width, and height properties as the original Rectangle object.
@ -502,7 +535,7 @@ Object.defineProperty(Phaser.Rectangle.prototype, "empty", {
* @param {Number} dy The amount to be added to the bottom side of the Rectangle. * @param {Number} dy The amount to be added to the bottom side of the Rectangle.
* @return {Phaser.Rectangle} This Rectangle object. * @return {Phaser.Rectangle} This Rectangle object.
*/ */
Phaser.Rectangle.inflate = function inflate(a, dx, dy) { Phaser.Rectangle.inflate = function (a, dx, dy) {
a.x -= dx; a.x -= dx;
a.width += 2 * dx; a.width += 2 * dx;
a.y -= dy; a.y -= dy;
@ -517,7 +550,7 @@ Phaser.Rectangle.inflate = function inflate(a, dx, dy) {
* @param {Phaser.Point} point The x property of this Point object is used to increase the horizontal dimension of the Rectangle object. The y property is used to increase the vertical dimension of the Rectangle object. * @param {Phaser.Point} point The x property of this Point object is used to increase the horizontal dimension of the Rectangle object. The y property is used to increase the vertical dimension of the Rectangle object.
* @return {Phaser.Rectangle} The Rectangle object. * @return {Phaser.Rectangle} The Rectangle object.
*/ */
Phaser.Rectangle.inflatePoint = function inflatePoint(a, point) { Phaser.Rectangle.inflatePoint = function (a, point) {
return Phaser.Phaser.Rectangle.inflate(a, point.x, point.y); return Phaser.Phaser.Rectangle.inflate(a, point.x, point.y);
}; };
@ -528,7 +561,7 @@ Phaser.Rectangle.inflatePoint = function inflatePoint(a, point) {
* @param {Phaser.Point} output Optional Point object. If given the values will be set into the object, otherwise a brand new Point object will be created and returned. * @param {Phaser.Point} output Optional Point object. If given the values will be set into the object, otherwise a brand new Point object will be created and returned.
* @return {Phaser.Point} The size of the Rectangle object * @return {Phaser.Point} The size of the Rectangle object
*/ */
Phaser.Rectangle.size = function size(a, output) { Phaser.Rectangle.size = function (a, output) {
if (typeof output === "undefined") { output = new Phaser.Point(); } if (typeof output === "undefined") { output = new Phaser.Point(); }
return output.setTo(a.width, a.height); return output.setTo(a.width, a.height);
}; };
@ -540,7 +573,7 @@ Phaser.Rectangle.size = function size(a, output) {
* @param {Phaser.Rectangle} output Optional Rectangle object. If given the values will be set into the object, otherwise a brand new Rectangle object will be created and returned. * @param {Phaser.Rectangle} output Optional Rectangle object. If given the values will be set into the object, otherwise a brand new Rectangle object will be created and returned.
* @return {Phaser.Rectangle} * @return {Phaser.Rectangle}
*/ */
Phaser.Rectangle.clone = function clone(a, output) { Phaser.Rectangle.clone = function (a, output) {
if (typeof output === "undefined") { output = new Phaser.Rectangle(); } if (typeof output === "undefined") { output = new Phaser.Rectangle(); }
return output.setTo(a.x, a.y, a.width, a.height); return output.setTo(a.x, a.y, a.width, a.height);
}; };
@ -553,7 +586,7 @@ Phaser.Rectangle.clone = function clone(a, output) {
* @param {Number} y The y coordinate of the point to test. * @param {Number} y The y coordinate of the point to test.
* @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false. * @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false.
*/ */
Phaser.Rectangle.contains = function contains(a, x, y) { Phaser.Rectangle.contains = function (a, x, y) {
return (x >= a.x && x <= a.right && y >= a.y && y <= a.bottom); return (x >= a.x && x <= a.right && y >= a.y && y <= a.bottom);
}; };
@ -564,7 +597,7 @@ Phaser.Rectangle.contains = function contains(a, x, y) {
* @param {Phaser.Point} point The point object being checked. Can be Point or any object with .x and .y values. * @param {Phaser.Point} point The point object being checked. Can be Point or any object with .x and .y values.
* @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false. * @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false.
*/ */
Phaser.Rectangle.containsPoint = function containsPoint(a, point) { Phaser.Rectangle.containsPoint = function (a, point) {
return Phaser.Phaser.Rectangle.contains(a, point.x, point.y); return Phaser.Phaser.Rectangle.contains(a, point.x, point.y);
}; };
@ -576,7 +609,7 @@ Phaser.Rectangle.containsPoint = function containsPoint(a, point) {
* @param {Phaser.Rectangle} b The second Rectangle object. * @param {Phaser.Rectangle} b The second Rectangle object.
* @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false. * @return {bool} A value of true if the Rectangle object contains the specified point; otherwise false.
*/ */
Phaser.Rectangle.containsRect = function containsRect(a, b) { Phaser.Rectangle.containsRect = function (a, b) {
// If the given rect has a larger volume than this one then it can never contain it // If the given rect has a larger volume than this one then it can never contain it
if(a.volume > b.volume) { if(a.volume > b.volume) {
return false; return false;
@ -592,7 +625,7 @@ Phaser.Rectangle.containsRect = function containsRect(a, b) {
* @param {Phaser.Rectangle} b The second Rectangle object. * @param {Phaser.Rectangle} b The second Rectangle object.
* @return {bool} A value of true if the two Rectangles have exactly the same values for the x, y, width and height properties; otherwise false. * @return {bool} A value of true if the two Rectangles have exactly the same values for the x, y, width and height properties; otherwise false.
*/ */
Phaser.Rectangle.equals = function equals(a, b) { Phaser.Rectangle.equals = function (a, b) {
return (a.x == b.x && a.y == b.y && a.width == b.width && a.height == b.height); return (a.x == b.x && a.y == b.y && a.width == b.width && a.height == b.height);
}; };
@ -604,15 +637,19 @@ Phaser.Rectangle.equals = function equals(a, b) {
* @param {Phaser.Rectangle} output Optional Rectangle object. If given the intersection values will be set into this object, otherwise a brand new Rectangle object will be created and returned. * @param {Phaser.Rectangle} output Optional Rectangle object. If given the intersection values will be set into this object, otherwise a brand new Rectangle object will be created and returned.
* @return {Phaser.Rectangle} A Rectangle object that equals the area of intersection. If the Rectangles do not intersect, this method returns an empty Rectangle object; that is, a Rectangle with its x, y, width, and height properties set to 0. * @return {Phaser.Rectangle} A Rectangle object that equals the area of intersection. If the Rectangles do not intersect, this method returns an empty Rectangle object; that is, a Rectangle with its x, y, width, and height properties set to 0.
*/ */
Phaser.Rectangle.intersection = function intersection(a, b, out) { Phaser.Rectangle.intersection = function (a, b, out) {
if (typeof out === "undefined") { out = new Phaser.Rectangle(); } if (typeof out === "undefined") { out = new Phaser.Rectangle(); }
if(Phaser.Phaser.Rectangle.intersects(a, b)) {
if (Phaser.Rectangle.intersects(a, b)) {
out.x = Math.max(a.x, b.x); out.x = Math.max(a.x, b.x);
out.y = Math.max(a.y, b.y); out.y = Math.max(a.y, b.y);
out.width = Math.min(a.right, b.right) - out.x; out.width = Math.min(a.right, b.right) - out.x;
out.height = Math.min(a.bottom, b.bottom) - out.y; out.height = Math.min(a.bottom, b.bottom) - out.y;
} }
return out; return out;
}; };
/** /**
@ -624,9 +661,12 @@ Phaser.Rectangle.intersection = function intersection(a, b, out) {
* @param {Number} tolerance A tolerance value to allow for an intersection test with padding, default to 0 * @param {Number} tolerance A tolerance value to allow for an intersection test with padding, default to 0
* @return {bool} A value of true if the specified object intersects with this Rectangle object; otherwise false. * @return {bool} A value of true if the specified object intersects with this Rectangle object; otherwise false.
*/ */
Phaser.Rectangle.intersects = function intersects(a, b, tolerance) { Phaser.Rectangle.intersects = function (a, b, tolerance) {
if (typeof tolerance === "undefined") { tolerance = 0; } if (typeof tolerance === "undefined") { tolerance = 0; }
return !(a.left > b.right + tolerance || a.right < b.left - tolerance || a.top > b.bottom + tolerance || a.bottom < b.top - tolerance); return !(a.left > b.right + tolerance || a.right < b.left - tolerance || a.top > b.bottom + tolerance || a.bottom < b.top - tolerance);
}; };
/** /**
@ -639,9 +679,12 @@ Phaser.Rectangle.intersects = function intersects(a, b, tolerance) {
* @param {Number} tolerance A tolerance value to allow for an intersection test with padding, default to 0 * @param {Number} tolerance A tolerance value to allow for an intersection test with padding, default to 0
* @return {bool} A value of true if the specified object intersects with the Rectangle; otherwise false. * @return {bool} A value of true if the specified object intersects with the Rectangle; otherwise false.
*/ */
Phaser.Rectangle.intersectsRaw = function intersectsRaw(a, left, right, top, bottom, tolerance) { Phaser.Rectangle.intersectsRaw = function (a, left, right, top, bottom, tolerance) {
if (typeof tolerance === "undefined") { tolerance = 0; } if (typeof tolerance === "undefined") { tolerance = 0; }
return !(left > a.right + tolerance || right < a.left - tolerance || top > a.bottom + tolerance || bottom < a.top - tolerance); return !(left > a.right + tolerance || right < a.left - tolerance || top > a.bottom + tolerance || bottom < a.top - tolerance);
}; };
/** /**
@ -652,7 +695,10 @@ Phaser.Rectangle.intersectsRaw = function intersectsRaw(a, left, right, top, bot
* @param {Phaser.Rectangle} output Optional Rectangle object. If given the new values will be set into this object, otherwise a brand new Rectangle object will be created and returned. * @param {Phaser.Rectangle} output Optional Rectangle object. If given the new values will be set into this object, otherwise a brand new Rectangle object will be created and returned.
* @return {Phaser.Rectangle} A Rectangle object that is the union of the two Rectangles. * @return {Phaser.Rectangle} A Rectangle object that is the union of the two Rectangles.
*/ */
Phaser.Rectangle.union = function union(a, b, out) { Phaser.Rectangle.union = function (a, b, out) {
if (typeof out === "undefined") { out = new Phaser.Rectangle(); } if (typeof out === "undefined") { out = new Phaser.Rectangle(); }
return out.setTo(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.max(a.right, b.right), Math.max(a.bottom, b.bottom)); return out.setTo(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.max(a.right, b.right), Math.max(a.bottom, b.bottom));
}; };