mirror of
https://github.com/photonstorm/phaser
synced 2024-11-29 16:10:56 +00:00
Fixed some errors in Rectangle and more Pixi hooks added, now creating the Stage properly and rendering sprites.
This commit is contained in:
Richard Davey
parent
19483bafed
commit
6bf7bab917
8 changed files with 137 additions and 47 deletions
|
|
@ -45,6 +45,7 @@
|
|||
<script src="../src/core/StateManager.js"></script>
|
||||
<script src="../src/core/State.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/core/SignalBinding.js"></script>
|
||||
<script src="../src/core/Signal.js"></script>
|
||||
|
|
@ -54,6 +55,7 @@
|
|||
<script src="../src/math/Math.js"></script>
|
||||
<script src="../src/geom/Point.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/tween/TweenManager.js"></script>
|
||||
<script src="../src/tween/Tween.js"></script>
|
||||
|
|
|
|||
22
examples/rect1.php
Normal file
22
examples/rect1.php
Normal 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>
|
||||
|
|
@ -12,12 +12,14 @@
|
|||
|
||||
(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.RENDERER_AUTO, '', { preload: preload, create: create });
|
||||
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
|
||||
|
||||
var bunny;
|
||||
|
||||
function preload() {
|
||||
|
||||
console.log('*** preload called');
|
||||
console.log('***> preload called');
|
||||
game.load.image('cockpit', 'assets/pics/cockpit.png');
|
||||
game.load.image('overdose', 'assets/pics/lance-overdose-loader_eye.png');
|
||||
|
||||
|
|
@ -25,8 +27,33 @@
|
|||
|
||||
function create() {
|
||||
|
||||
console.log('*** create called');
|
||||
document.body.appendChild(game.cache.getImage('cockpit'));
|
||||
console.log('***> create called');
|
||||
|
||||
// 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
22
src/Game.js
|
|
@ -28,7 +28,7 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
|
|||
|
||||
if (typeof width === "undefined") { width = 800; }
|
||||
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 state === "undefined") { state = null; }
|
||||
if (typeof transparent === "undefined") { transparent = false; }
|
||||
|
|
@ -43,9 +43,6 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
|
|||
this.transparent = transparent;
|
||||
this.antialias = antialias;
|
||||
this.renderType = renderer;
|
||||
// this.renderer = renderer;
|
||||
|
||||
console.log('Phaser.Game', width, height, renderer, parent, transparent, antialias);
|
||||
|
||||
this.state = new Phaser.StateManager(this, state);
|
||||
|
||||
|
|
@ -246,8 +243,6 @@ Phaser.Game.prototype = {
|
|||
return;
|
||||
}
|
||||
|
||||
console.log('Phaser.Game boot');
|
||||
|
||||
if (!document.body) {
|
||||
window.setTimeout(this._onBoot, 20);
|
||||
}
|
||||
|
|
@ -287,13 +282,13 @@ Phaser.Game.prototype = {
|
|||
this.stage.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
|
||||
{
|
||||
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;
|
||||
|
|
@ -308,11 +303,11 @@ Phaser.Game.prototype = {
|
|||
|
||||
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)
|
||||
{
|
||||
this.renderType = Phaser.RENDERER_CANVAS;
|
||||
this.renderType = Phaser.CANVAS;
|
||||
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, this.transparent);
|
||||
Phaser.Canvas.setSmoothingEnabled(this.renderer.view, this.antialias);
|
||||
}
|
||||
|
|
@ -373,7 +368,8 @@ Phaser.Game.prototype = {
|
|||
|
||||
this.state.preRender();
|
||||
|
||||
// this.renderer.render();
|
||||
this.renderer.render(this.stage._s);
|
||||
|
||||
this.plugins.render();
|
||||
|
||||
this.state.render();
|
||||
|
|
@ -389,7 +385,7 @@ Phaser.Game.prototype = {
|
|||
this.plugins.postUpdate();
|
||||
|
||||
this.plugins.preRender();
|
||||
// this.renderer.render();
|
||||
this.renderer.render(this.stage._s);
|
||||
this.plugins.render();
|
||||
this.state.loadRender();
|
||||
this.plugins.postRender();
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ var Phaser = Phaser || {
|
|||
|
||||
VERSION: '1.0.0',
|
||||
GAMES: [],
|
||||
RENDERER_AUTO: 0,
|
||||
RENDERER_CANVAS: 1,
|
||||
RENDERER_WEBGL: 2
|
||||
AUTO: 0,
|
||||
CANVAS: 1,
|
||||
WEBGL: 2
|
||||
|
||||
};
|
||||
|
|
|
|||
10
src/Stage.js
10
src/Stage.js
|
|
@ -13,9 +13,6 @@ Phaser.Stage = function (game) {
|
|||
|
||||
this.game = game;
|
||||
|
||||
this.bounds = new Phaser.Rectangle;
|
||||
this.offset = new Phaser.Point;
|
||||
|
||||
};
|
||||
|
||||
Phaser.Stage.prototype = {
|
||||
|
|
@ -29,8 +26,9 @@ Phaser.Stage.prototype = {
|
|||
boot: function () {
|
||||
|
||||
// Get the offset values (for input and other things)
|
||||
this.offset = new Phaser.Point;
|
||||
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);
|
||||
|
||||
|
|
@ -62,12 +60,12 @@ Phaser.Stage.prototype = {
|
|||
|
||||
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;
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log('visibilityChange - shown', event);
|
||||
// console.log('visibilityChange - shown', event);
|
||||
this.game.paused = false;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ Phaser.StateManager = function (game, pendingState) {
|
|||
|
||||
if (pendingState !== null)
|
||||
{
|
||||
console.log('StartManager constructor', pendingState);
|
||||
this._pendingState = pendingState;
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +98,7 @@ Phaser.StateManager.prototype = {
|
|||
|
||||
boot: function () {
|
||||
|
||||
console.log('Phaser.StateManager.boot');
|
||||
// console.log('Phaser.StateManager.boot');
|
||||
|
||||
if (this._pendingState !== null)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -11,38 +11,71 @@
|
|||
**/
|
||||
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
|
||||
* @type Number
|
||||
* @default 0
|
||||
*/
|
||||
this.x = x || 0;
|
||||
this.x = x;
|
||||
|
||||
/**
|
||||
* @property y
|
||||
* @type Number
|
||||
* @default 0
|
||||
*/
|
||||
this.y = y || 0;
|
||||
this.y = y;
|
||||
|
||||
/**
|
||||
* @property width
|
||||
* @type Number
|
||||
* @default 0
|
||||
*/
|
||||
this.width = width || 0;
|
||||
this.width = width;
|
||||
|
||||
/**
|
||||
* @property height
|
||||
* @type Number
|
||||
* @default 0
|
||||
*/
|
||||
this.height = height || 0;
|
||||
this.height = height;
|
||||
|
||||
};
|
||||
|
||||
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.
|
||||
* @method offset
|
||||
|
|
@ -146,7 +179,7 @@ Phaser.Rectangle.prototype = {
|
|||
*/
|
||||
size: function (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.
|
||||
|
|
@ -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.
|
||||
* @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.width += 2 * dx;
|
||||
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.
|
||||
* @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);
|
||||
};
|
||||
|
||||
|
|
@ -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.
|
||||
* @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(); }
|
||||
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.
|
||||
* @return {Phaser.Rectangle}
|
||||
*/
|
||||
Phaser.Rectangle.clone = function clone(a, output) {
|
||||
Phaser.Rectangle.clone = function (a, output) {
|
||||
if (typeof output === "undefined") { output = new Phaser.Rectangle(); }
|
||||
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.
|
||||
* @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);
|
||||
};
|
||||
|
||||
|
|
@ -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.
|
||||
* @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);
|
||||
};
|
||||
|
||||
|
|
@ -576,7 +609,7 @@ Phaser.Rectangle.containsPoint = function containsPoint(a, point) {
|
|||
* @param {Phaser.Rectangle} b The second Rectangle object.
|
||||
* @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(a.volume > b.volume) {
|
||||
return false;
|
||||
|
|
@ -592,7 +625,7 @@ Phaser.Rectangle.containsRect = function containsRect(a, b) {
|
|||
* @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.
|
||||
*/
|
||||
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);
|
||||
};
|
||||
|
||||
|
|
@ -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.
|
||||
* @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(Phaser.Phaser.Rectangle.intersects(a, b)) {
|
||||
|
||||
if (Phaser.Rectangle.intersects(a, b)) {
|
||||
out.x = Math.max(a.x, b.x);
|
||||
out.y = Math.max(a.y, b.y);
|
||||
out.width = Math.min(a.right, b.right) - out.x;
|
||||
out.height = Math.min(a.bottom, b.bottom) - out.y;
|
||||
}
|
||||
|
||||
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
|
||||
* @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; }
|
||||
|
||||
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
|
||||
* @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; }
|
||||
|
||||
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.
|
||||
* @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(); }
|
||||
|
||||
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));
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue