mirror of
https://github.com/wassname/phaser.git
synced 2026-07-21 12:40:56 +08:00
Samuel Batista
@@ -39,7 +39,17 @@ Change Log
|
||||
|
||||
Version 1.1.3 - in build
|
||||
|
||||
*
|
||||
* New: Sprite.animations.getAnimation will return an animation instance which was added by name.
|
||||
* New: Added Mouse.button which is set to the button that was pressed: Phaser.Mouse.LEFT_BUTTON, MIDDLE_BUTTON or RIGHT_BUTTON (thanks wKLV)
|
||||
* New: Added Mouse.pointerLock signal which you can listen to whenever the browser enters or leaves pointer lock mode.
|
||||
* New: StageScaleMode.forceOrientation allows you to lock your game to one orientation and display a Sprite (i.e. a "please rotate" screen) when incorrect.
|
||||
* New: World.visible boolean added, toggles rendering of the world on/off entirely.
|
||||
* Fixed: Mouse.stop now uses the true useCapture, which means the event listeners stop listening correctly (thanks beeglebug)
|
||||
* Updated: RequestAnimationFrame now retains the callbackID which is passed to cancelRequestAnimationFrame.
|
||||
* Updated: Button now goes back to over state when setFrames used in action (thanks beeglebug)
|
||||
* Updated: plugins now have a postUpdate callback (thanks cocoademon)
|
||||
|
||||
|
||||
|
||||
Version 1.1.2 - November 1st 2013
|
||||
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('atari', 'assets/sprites/atari130xe.png');
|
||||
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
|
||||
|
||||
}
|
||||
|
||||
var sprite1;
|
||||
var sprite2;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#2d2d2d';
|
||||
|
||||
// This will check Sprite vs. Sprite collision
|
||||
|
||||
sprite1 = game.add.sprite(300, 300, 'atari');
|
||||
sprite1.name = 'atari';
|
||||
sprite1.body.immovable = true;
|
||||
|
||||
sprite1.anchor.setTo(0.5, 0.5);
|
||||
sprite1.pivot.x = 250;
|
||||
sprite1.pivot.y = 300;
|
||||
|
||||
// sprite2 = game.add.sprite(0, 0, 'mushroom');
|
||||
// sprite2.name = 'mushroom';
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
sprite1.angle += 1;
|
||||
sprite1.pivot.x = game.input.x;
|
||||
sprite1.pivot.y = game.input.y;
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderPixel(sprite1.pivot.x, sprite1.pivot.y);
|
||||
|
||||
// game.debug.renderSpriteInfo(sprite1, 100, 400);
|
||||
game.debug.renderSpriteBounds(sprite1);
|
||||
// game.debug.renderSpriteInfo(sprite2, 100, 100);
|
||||
// game.debug.renderSpriteBounds(sprite2);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -261,6 +261,27 @@ Phaser.AnimationManager.prototype = {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns an animation that was previously added by name.
|
||||
*
|
||||
* @method Phaser.AnimationManager#getAnimation
|
||||
* @param {string} name - The name of the animation to be returned, e.g. "fire".
|
||||
* @return {Phaser.Animation|boolean} The Animation instance, if found, otherwise false.
|
||||
*/
|
||||
getAnimation: function (name) {
|
||||
|
||||
if (typeof name == 'string')
|
||||
{
|
||||
if (this._anims[name])
|
||||
{
|
||||
return this._anims[name];
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Refreshes the current frame data back to the parent Sprite and also resets the texture data.
|
||||
*
|
||||
|
||||
+6
-1
@@ -422,7 +422,11 @@ Phaser.Game.prototype = {
|
||||
|
||||
this.time.update(time);
|
||||
|
||||
if (!this._paused)
|
||||
if (this._paused)
|
||||
{
|
||||
this.renderer.render(this.stage._stage);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.plugins.preUpdate();
|
||||
this.physics.preUpdate();
|
||||
@@ -437,6 +441,7 @@ Phaser.Game.prototype = {
|
||||
this.plugins.update();
|
||||
|
||||
this.world.postUpdate();
|
||||
this.plugins.postUpdate();
|
||||
|
||||
this.renderer.render(this.stage._stage);
|
||||
this.plugins.render();
|
||||
|
||||
@@ -50,6 +50,12 @@ Phaser.Plugin = function (game, parent) {
|
||||
* @default
|
||||
*/
|
||||
this.hasUpdate = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} hasPostUpdate - A flag to indicate if this plugin has a postUpdate method.
|
||||
* @default
|
||||
*/
|
||||
this.hasPostUpdate = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} hasRender - A flag to indicate if this plugin has a render method.
|
||||
|
||||
@@ -77,6 +77,12 @@ Phaser.PluginManager.prototype = {
|
||||
result = true;
|
||||
}
|
||||
|
||||
if (typeof plugin['postUpdate'] === 'function')
|
||||
{
|
||||
plugin.hasPostUpdate = true;
|
||||
result = true;
|
||||
}
|
||||
|
||||
if (typeof plugin['render'] === 'function')
|
||||
{
|
||||
plugin.hasRender = true;
|
||||
@@ -176,6 +182,30 @@ Phaser.PluginManager.prototype = {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* PostUpdate is the last thing to be called before the world render.
|
||||
* In particular, it is called after the world postUpdate, which means the camera has been adjusted.
|
||||
* It only calls plugins who have active=true.
|
||||
*
|
||||
* @method Phaser.PluginManager#postUpdate
|
||||
*/
|
||||
postUpdate: function () {
|
||||
|
||||
if (this._pluginsLength == 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
for (this._p = 0; this._p < this._pluginsLength; this._p++)
|
||||
{
|
||||
if (this.plugins[this._p].active && this.plugins[this._p].hasPostUpdate)
|
||||
{
|
||||
this.plugins[this._p].postUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Render is called right after the Game Renderer completes, but before the State.render.
|
||||
* It only calls plugins who have visible=true.
|
||||
|
||||
@@ -258,3 +258,19 @@ Object.defineProperty(Phaser.World.prototype, "randomY", {
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.World#visible
|
||||
* @property {boolean} visible - Gets or sets the visible state of the World.
|
||||
*/
|
||||
Object.defineProperty(Phaser.World.prototype, "visible", {
|
||||
|
||||
get: function () {
|
||||
return this._container.visible;
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
this._container.visible = value;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -169,6 +169,13 @@ Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame,
|
||||
*/
|
||||
this.freezeFrames = false;
|
||||
|
||||
/**
|
||||
* When the Button is clicked you can optionally force the state to "out".
|
||||
* @property {boolean} forceOut
|
||||
* @default
|
||||
*/
|
||||
this.forceOut = true;
|
||||
|
||||
this.setFrames(overFrame, outFrame, downFrame);
|
||||
|
||||
if (callback !== null)
|
||||
@@ -253,7 +260,7 @@ Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
|
||||
{
|
||||
this._onDownFrameName = downFrame;
|
||||
|
||||
if (this.input.pointerOver())
|
||||
if (this.input.pointerDown())
|
||||
{
|
||||
this.frameName = downFrame;
|
||||
}
|
||||
@@ -262,7 +269,7 @@ Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
|
||||
{
|
||||
this._onDownFrameID = downFrame;
|
||||
|
||||
if (this.input.pointerOver())
|
||||
if (this.input.pointerDown())
|
||||
{
|
||||
this.frame = downFrame;
|
||||
}
|
||||
@@ -513,8 +520,21 @@ Phaser.Button.prototype.onInputUpHandler = function (pointer) {
|
||||
this.onUpSound.play(this.onUpSoundMarker);
|
||||
}
|
||||
|
||||
if (this.forceOut && this.freezeFrames == false)
|
||||
{
|
||||
if (this._onOutFrameName != null)
|
||||
{
|
||||
this.frameName = this._onOutFrameName;
|
||||
}
|
||||
else if (this._onOutFrameID != null)
|
||||
{
|
||||
this.frame = this._onOutFrameID;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.onInputUp)
|
||||
{
|
||||
this.onInputUp.dispatch(this, pointer);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@@ -405,28 +405,60 @@ Phaser.InputHandler.prototype = {
|
||||
/**
|
||||
* Is the Pointer over this Sprite?
|
||||
* @method Phaser.InputHandler#pointerOver
|
||||
* @param {Pointer} pointer
|
||||
* @return {bool
|
||||
* @param {number} [index] - The ID number of a Pointer to check. If you don't provide a number it will check all Pointers.
|
||||
* @return {boolean} True if the given pointer (if a index was given, or any pointer if not) is over this object.
|
||||
*/
|
||||
pointerOver: function (pointer) {
|
||||
pointerOver: function (index) {
|
||||
|
||||
pointer = pointer || 0;
|
||||
if (this.enabled)
|
||||
{
|
||||
if (typeof index === 'undefined')
|
||||
{
|
||||
for (var i = 0; i < 10; i++)
|
||||
{
|
||||
if (this._pointerData[i].isOver)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
return this._pointerData[index].isOver;
|
||||
}
|
||||
}
|
||||
|
||||
return this._pointerData[pointer].isOver;
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the Pointer outside of this Sprite?
|
||||
* @method Phaser.InputHandler#pointerOut
|
||||
* @param {Pointer} pointer
|
||||
* @return {boolean}
|
||||
* @param {number} [index] - The ID number of a Pointer to check. If you don't provide a number it will check all Pointers.
|
||||
* @return {boolean} True if the given pointer (if a index was given, or any pointer if not) is out of this object.
|
||||
*/
|
||||
pointerOut: function (pointer) {
|
||||
|
||||
pointer = pointer || 0;
|
||||
if (this.enabled)
|
||||
{
|
||||
if (typeof index === 'undefined')
|
||||
{
|
||||
for (var i = 0; i < 10; i++)
|
||||
{
|
||||
if (this._pointerData[i].isOut)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
return this._pointerData[index].isOut;
|
||||
}
|
||||
}
|
||||
|
||||
return this._pointerData[pointer].isOut;
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
|
||||
+56
-19
@@ -25,23 +25,29 @@ Phaser.Mouse = function (game) {
|
||||
this.callbackContext = this.game;
|
||||
|
||||
/**
|
||||
* @property {Description} mouseDownCallback - Description.
|
||||
* @property {function} mouseDownCallback - Description.
|
||||
* @default
|
||||
*/
|
||||
this.mouseDownCallback = null;
|
||||
|
||||
/**
|
||||
* @property {Description} mouseMoveCallback - Description.
|
||||
* @property {function} mouseMoveCallback - Description.
|
||||
* @default
|
||||
*/
|
||||
this.mouseMoveCallback = null;
|
||||
|
||||
/**
|
||||
* @property {Description} mouseUpCallback - Description.
|
||||
* @property {function} mouseUpCallback - Description.
|
||||
* @default
|
||||
*/
|
||||
this.mouseUpCallback = null;
|
||||
|
||||
/**
|
||||
* @property {number} button- The type of click, either: Phaser.Mouse.NO_BUTTON, Phaser.Mouse.LEFT_BUTTON, Phaser.Mouse.MIDDLE_BUTTON or Phaser.Mouse.RIGHT_BUTTON.
|
||||
* @default
|
||||
*/
|
||||
this.button = -1;
|
||||
|
||||
/**
|
||||
* You can disable all Input by setting disabled = true. While set all new input related events will be ignored.
|
||||
* @property {boolean} disabled
|
||||
@@ -56,8 +62,20 @@ Phaser.Mouse = function (game) {
|
||||
*/
|
||||
this.locked = false;
|
||||
|
||||
/**
|
||||
* This event is dispatched when the browser enters or leaves pointer lock state.
|
||||
* @property {Phaser.Signal} pointerLock
|
||||
* @default
|
||||
*/
|
||||
this.pointerLock = new Phaser.Signal;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @constant
|
||||
* @type {number}
|
||||
*/
|
||||
Phaser.Mouse.NO_BUTTON = -1;
|
||||
/**
|
||||
* @constant
|
||||
* @type {number}
|
||||
@@ -111,7 +129,7 @@ Phaser.Mouse.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Description.
|
||||
* The internal method that handles the mouse down event from the browser.
|
||||
* @method Phaser.Mouse#onMouseDown
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
@@ -119,6 +137,19 @@ Phaser.Mouse.prototype = {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (event.which === 1)
|
||||
{
|
||||
this.button = Phaser.Mouse.LEFT_BUTTON;
|
||||
}
|
||||
else if (event.which === 2)
|
||||
{
|
||||
this.button = Phaser.Mouse.MIDDLE_BUTTON;
|
||||
}
|
||||
else if (event.which === 3)
|
||||
{
|
||||
this.button = Phaser.Mouse.RIGHT_BUTTON;
|
||||
}
|
||||
|
||||
if (this.mouseDownCallback)
|
||||
{
|
||||
this.mouseDownCallback.call(this.callbackContext, event);
|
||||
@@ -136,7 +167,7 @@ Phaser.Mouse.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Description
|
||||
* The internal method that handles the mouse move event from the browser.
|
||||
* @method Phaser.Mouse#onMouseMove
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
@@ -161,7 +192,7 @@ Phaser.Mouse.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Description.
|
||||
* The internal method that handles the mouse up event from the browser.
|
||||
* @method Phaser.Mouse#onMouseUp
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
@@ -169,6 +200,8 @@ Phaser.Mouse.prototype = {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
this.button = Phaser.Mouse.NO_BUTTON;
|
||||
|
||||
if (this.mouseUpCallback)
|
||||
{
|
||||
this.mouseUpCallback.call(this.callbackContext, event);
|
||||
@@ -186,7 +219,9 @@ Phaser.Mouse.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Description.
|
||||
* If the browser supports it you can request that the pointer be locked to the browser window.
|
||||
* This is classically known as 'FPS controls', where the pointer can't leave the browser until the user presses an exit key.
|
||||
* If the browser successfully enters a locked state the event Phaser.Mouse.pointerLock will be dispatched and the first parameter will be 'true'.
|
||||
* @method Phaser.Mouse#requestPointerLock
|
||||
*/
|
||||
requestPointerLock: function () {
|
||||
@@ -205,15 +240,15 @@ Phaser.Mouse.prototype = {
|
||||
return _this.pointerLockChange(event);
|
||||
};
|
||||
|
||||
document.addEventListener('pointerlockchange', this._pointerLockChange, false);
|
||||
document.addEventListener('mozpointerlockchange', this._pointerLockChange, false);
|
||||
document.addEventListener('webkitpointerlockchange', this._pointerLockChange, false);
|
||||
document.addEventListener('pointerlockchange', this._pointerLockChange, true);
|
||||
document.addEventListener('mozpointerlockchange', this._pointerLockChange, true);
|
||||
document.addEventListener('webkitpointerlockchange', this._pointerLockChange, true);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Description.
|
||||
* Internal pointerLockChange handler.
|
||||
* @method Phaser.Mouse#pointerLockChange
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
@@ -225,17 +260,19 @@ Phaser.Mouse.prototype = {
|
||||
{
|
||||
// Pointer was successfully locked
|
||||
this.locked = true;
|
||||
this.pointerLock.dispatch(true);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Pointer was unlocked
|
||||
this.locked = false;
|
||||
this.pointerLock.dispatch(false);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Description.
|
||||
* Internal release pointer lock handler.
|
||||
* @method Phaser.Mouse#releasePointerLock
|
||||
*/
|
||||
releasePointerLock: function () {
|
||||
@@ -244,9 +281,9 @@ Phaser.Mouse.prototype = {
|
||||
|
||||
document.exitPointerLock();
|
||||
|
||||
document.removeEventListener('pointerlockchange', this._pointerLockChange);
|
||||
document.removeEventListener('mozpointerlockchange', this._pointerLockChange);
|
||||
document.removeEventListener('webkitpointerlockchange', this._pointerLockChange);
|
||||
document.removeEventListener('pointerlockchange', this._pointerLockChange, true);
|
||||
document.removeEventListener('mozpointerlockchange', this._pointerLockChange, true);
|
||||
document.removeEventListener('webkitpointerlockchange', this._pointerLockChange, true);
|
||||
|
||||
},
|
||||
|
||||
@@ -256,10 +293,10 @@ Phaser.Mouse.prototype = {
|
||||
*/
|
||||
stop: function () {
|
||||
|
||||
this.game.stage.canvas.removeEventListener('mousedown', this._onMouseDown);
|
||||
this.game.stage.canvas.removeEventListener('mousemove', this._onMouseMove);
|
||||
this.game.stage.canvas.removeEventListener('mouseup', this._onMouseUp);
|
||||
this.game.stage.canvas.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
this.game.stage.canvas.removeEventListener('mousemove', this._onMouseMove, true);
|
||||
this.game.stage.canvas.removeEventListener('mouseup', this._onMouseUp, true);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
@@ -397,7 +397,6 @@ Phaser.Pointer.prototype = {
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
// Work out which object is on the top
|
||||
|
||||
@@ -50,6 +50,13 @@ Phaser.RequestAnimationFrame = function(game) {
|
||||
*/
|
||||
this._onLoop = null;
|
||||
|
||||
/**
|
||||
* The callback ID used when calling cancel
|
||||
* @property _timeOutID
|
||||
* @private
|
||||
*/
|
||||
this._timeOutID = null;
|
||||
|
||||
};
|
||||
|
||||
Phaser.RequestAnimationFrame.prototype = {
|
||||
@@ -83,7 +90,7 @@ Phaser.RequestAnimationFrame.prototype = {
|
||||
return _this.updateRAF(time);
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(this._onLoop);
|
||||
this._timeOutID = window.requestAnimationFrame(this._onLoop);
|
||||
}
|
||||
|
||||
},
|
||||
@@ -97,7 +104,7 @@ Phaser.RequestAnimationFrame.prototype = {
|
||||
|
||||
this.game.update(time);
|
||||
|
||||
window.requestAnimationFrame(this._onLoop);
|
||||
this._timeOutID = window.requestAnimationFrame(this._onLoop);
|
||||
|
||||
},
|
||||
|
||||
@@ -125,7 +132,7 @@ Phaser.RequestAnimationFrame.prototype = {
|
||||
}
|
||||
else
|
||||
{
|
||||
window.cancelAnimationFrame;
|
||||
window.cancelAnimationFrame(this._timeOutID);
|
||||
}
|
||||
|
||||
this.isRunning = false;
|
||||
|
||||
+118
-44
@@ -17,45 +17,19 @@
|
||||
Phaser.StageScaleMode = function (game, width, height) {
|
||||
|
||||
/**
|
||||
* @property {number} _startHeight - Stage height when starting the game.
|
||||
* @default
|
||||
* @private
|
||||
* @property {Phaser.Game} game - A reference to the currently running game.
|
||||
*/
|
||||
this._startHeight = 0;
|
||||
this.game = game;
|
||||
|
||||
/**
|
||||
* @property {boolean} forceLandscape - If the game should be forced to use Landscape mode, this is set to true by Game.Stage
|
||||
* @default
|
||||
* @property {number} width - Width of the stage after calculation.
|
||||
*/
|
||||
this.forceLandscape = false;
|
||||
this.width = width;
|
||||
|
||||
/**
|
||||
* @property {boolean} forcePortrait - If the game should be forced to use Portrait mode, this is set to true by Game.Stage
|
||||
* @default
|
||||
* @property {number} height - Height of the stage after calculation.
|
||||
*/
|
||||
this.forcePortrait = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} incorrectOrientation - If the game should be forced to use a specific orientation and the device currently isn't in that orientation this is set to true.
|
||||
* @default
|
||||
*/
|
||||
this.incorrectOrientation = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} pageAlignHorizontally - If you wish to align your game in the middle of the page then you can set this value to true.
|
||||
<ul><li>It will place a re-calculated margin-left pixel value onto the canvas element which is updated on orientation/resizing.</li>
|
||||
<li>It doesn't care about any other DOM element that may be on the page, it literally just sets the margin.</li></ul>
|
||||
* @default
|
||||
*/
|
||||
this.pageAlignHorizontally = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} pageAlignVertically - If you wish to align your game in the middle of the page then you can set this value to true.
|
||||
<ul><li>It will place a re-calculated margin-left pixel value onto the canvas element which is updated on orientation/resizing.
|
||||
<li>It doesn't care about any other DOM element that may be on the page, it literally just sets the margin.</li></ul>
|
||||
* @default
|
||||
*/
|
||||
this.pageAlignVertically = false;
|
||||
this.height = height;
|
||||
|
||||
/**
|
||||
* @property {number} minWidth - Minimum width the canvas should be scaled to (in pixels).
|
||||
@@ -84,14 +58,45 @@ Phaser.StageScaleMode = function (game, width, height) {
|
||||
this.maxHeight = null;
|
||||
|
||||
/**
|
||||
* @property {number} width - Width of the stage after calculation.
|
||||
* @property {number} _startHeight - Stage height when starting the game.
|
||||
* @default
|
||||
* @private
|
||||
*/
|
||||
this.width = width;
|
||||
this._startHeight = 0;
|
||||
|
||||
/**
|
||||
* @property {number} height - Height of the stage after calculation.
|
||||
* @property {boolean} forceLandscape - If the game should be forced to use Landscape mode, this is set to true by Game.Stage
|
||||
* @default
|
||||
*/
|
||||
this.height = height;
|
||||
this.forceLandscape = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} forcePortrait - If the game should be forced to use Portrait mode, this is set to true by Game.Stage
|
||||
* @default
|
||||
*/
|
||||
this.forcePortrait = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} incorrectOrientation - If the game should be forced to use a specific orientation and the device currently isn't in that orientation this is set to true.
|
||||
* @default
|
||||
*/
|
||||
this.incorrectOrientation = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} pageAlignHorizontally - If you wish to align your game in the middle of the page then you can set this value to true.
|
||||
* It will place a re-calculated margin-left pixel value onto the canvas element which is updated on orientation/resizing.
|
||||
* It doesn't care about any other DOM element that may be on the page, it literally just sets the margin.
|
||||
* @default
|
||||
*/
|
||||
this.pageAlignHorizontally = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} pageAlignVertically - If you wish to align your game in the middle of the page then you can set this value to true.
|
||||
* It will place a re-calculated margin-left pixel value onto the canvas element which is updated on orientation/resizing.
|
||||
* It doesn't care about any other DOM element that may be on the page, it literally just sets the margin.
|
||||
* @default
|
||||
*/
|
||||
this.pageAlignVertically = false;
|
||||
|
||||
/**
|
||||
* @property {number} _width - Cached stage width for full screen mode.
|
||||
@@ -113,18 +118,20 @@ Phaser.StageScaleMode = function (game, width, height) {
|
||||
*/
|
||||
this.maxIterations = 5;
|
||||
|
||||
/**
|
||||
* @property {Phaser.Game} game - A reference to the currently running game.
|
||||
*/
|
||||
this.game = game;
|
||||
|
||||
/**
|
||||
* @property {Description} enterLandscape - Description.
|
||||
* @property {PIXI.Sprite} orientationSprite - The Sprite that is optionally displayed if the browser enters an unsupported orientation.
|
||||
* @default
|
||||
*/
|
||||
this.orientationSprite = null;
|
||||
|
||||
/**
|
||||
* @property {Phaser.Signal} enterLandscape - The event that is dispatched when the browser enters landscape orientation.
|
||||
*/
|
||||
this.enterLandscape = new Phaser.Signal();
|
||||
|
||||
/**
|
||||
* @property {Description} enterPortrait - Description.
|
||||
* @property {Phaser.Signal} enterPortrait - The event that is dispatched when the browser enters horizontal orientation.
|
||||
*/
|
||||
this.enterPortrait = new Phaser.Signal();
|
||||
|
||||
@@ -145,7 +152,7 @@ Phaser.StageScaleMode = function (game, width, height) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @property {Description} scaleFactor - Description.
|
||||
* @property {Phaser.Point} scaleFactor - The scale factor based on the game dimensions vs. the scaled dimensions.
|
||||
*/
|
||||
this.scaleFactor = new Phaser.Point(1, 1);
|
||||
|
||||
@@ -298,6 +305,54 @@ Phaser.StageScaleMode.prototype = {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* If you need your game to run in only one orientation you can force that to happen.
|
||||
* The optional orientationImage is displayed when the game is in the incorrect orientation.
|
||||
* @method Phaser.StageScaleMode#forceOrientation
|
||||
* @param {boolean} forceLandscape - true if the game should run in landscape mode only.
|
||||
* @param {boolean} forcePortrait - true if the game should run in portrait mode only.
|
||||
* @param {string} [forcePortrait=''] - The string of an image in the Phaser.Cache to display when this game is in the incorrect orientation.
|
||||
*/
|
||||
forceOrientation: function (forceLandscape, forcePortrait, orientationImage) {
|
||||
|
||||
this.forceLandscape = forceLandscape;
|
||||
|
||||
if (typeof forcePortrait === 'undefined')
|
||||
{
|
||||
this.forcePortrait = false;
|
||||
}
|
||||
|
||||
if (typeof orientationImage !== 'undefined')
|
||||
{
|
||||
if (orientationImage == null || this.game.cache.checkImageKey(orientationImage) == false)
|
||||
{
|
||||
orientationImage = '__default';
|
||||
}
|
||||
|
||||
this.orientationSprite = new PIXI.Sprite(PIXI.TextureCache[orientationImage]);
|
||||
this.orientationSprite.anchor.x = 0.5;
|
||||
this.orientationSprite.anchor.y = 0.5;
|
||||
this.orientationSprite.position.x = this.game.width / 2;
|
||||
this.orientationSprite.position.y = this.game.height / 2;
|
||||
|
||||
this.checkOrientationState();
|
||||
|
||||
if (this.incorrectOrientation)
|
||||
{
|
||||
this.orientationSprite.visible = true;
|
||||
this.game.world.visible = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.orientationSprite.visible = false;
|
||||
this.game.world.visible = true;
|
||||
}
|
||||
|
||||
this.game.stage._stage.addChild(this.orientationSprite);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Checks if the browser is in the correct orientation for your game (if forceLandscape or forcePortrait have been set)
|
||||
* @method Phaser.StageScaleMode#checkOrientationState
|
||||
@@ -312,6 +367,13 @@ Phaser.StageScaleMode.prototype = {
|
||||
// Back to normal
|
||||
this.game.paused = false;
|
||||
this.incorrectOrientation = false;
|
||||
|
||||
if (this.orientationSprite)
|
||||
{
|
||||
this.orientationSprite.visible = false;
|
||||
this.game.world.visible = true;
|
||||
}
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
@@ -322,6 +384,13 @@ Phaser.StageScaleMode.prototype = {
|
||||
// Show orientation screen
|
||||
this.game.paused = true;
|
||||
this.incorrectOrientation = true;
|
||||
|
||||
if (this.orientationSprite && this.orientationSprite.visible == false)
|
||||
{
|
||||
this.orientationSprite.visible = true;
|
||||
this.game.world.visible = false;
|
||||
}
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
@@ -381,6 +450,9 @@ Phaser.StageScaleMode.prototype = {
|
||||
{
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
this.checkOrientationState();
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -420,7 +492,7 @@ Phaser.StageScaleMode.prototype = {
|
||||
|
||||
/**
|
||||
* Set screen size automatically based on the scaleMode.
|
||||
* @param {Description} force - If force is true it will try to resize the game regardless of the document dimensions.
|
||||
* @param {boolean} force - If force is true it will try to resize the game regardless of the document dimensions.
|
||||
*/
|
||||
setScreenSize: function (force) {
|
||||
|
||||
@@ -533,6 +605,8 @@ Phaser.StageScaleMode.prototype = {
|
||||
this.scaleFactor.x = this.game.width / this.width;
|
||||
this.scaleFactor.y = this.game.height / this.height;
|
||||
|
||||
this.checkOrientationState();
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Phaser Tutorial 01 - Getting Started</title>
|
||||
<script src="build/phaser.js" type="text/javascript"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Getting started with Phaser</h1>
|
||||
|
||||
<h2>Part 1 - Setting up your development environment</h2>
|
||||
|
||||
<p>In this tutorial we're going to cover setting-up a development enviornment with which you can build your Phaser games. This will include running a local web server, picking an IDE, getting the latest version of Phaser and checking it all works together properly.</p>
|
||||
|
||||
<p>"But why do I need a local web server anyway? Can't I just drag the html files onto my browser?"</p>
|
||||
|
||||
<p>Not these days, no. I appreciate that it's a bit confusing, even contradictory at times, but it all boils down to browser security in the end. If you're making a static html web site, with a few images in it, then you can happily drag this into your browser and see the end results. You can also "Save As" entire web pages locally and re-open them, with all the contents mostly intact. So why can't you drag an HTML5 game into a browser and have it work?</p>
|
||||
|
||||
<p>It's to do with the protocol used to access the files. When you request anything over the web you're using http - and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically file://) and that is a massively restricted one, for obvious reasons. Under file:// there's no concept of domains, no server level security - just a raw file system. Ask yourself this: do you really want JavaScript to have the ability to load files from your local file system? The immediate answer should of course be "no way!". If JavaScript had free reign while operating under file:// there would be nothing stopping it loading up any system file it fancied and sending it off over the net to anywhere it liked.</p>
|
||||
|
||||
<p>Because this is so dangerous browsers lock themselves down tighter than Alcatraz when running under file://. Every single page becomes treated as a unique local domain. That is why "Save Web page" work, to a degree. They still are under the same cross-site restrictions as if they were on a live server. (to a degree, they still can't save anything or send data out or load data like a game), but also why "Save Web page" cannot make a cross site request, i.e. it can't load or send local data elsewhere. There's a quite detailed post here about it: http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html
|
||||
|
||||
|
||||
|
||||
Due to the way that web browser sandbox security works you will need a local web server running. This is so that your games can load in external assets like images and music. By default web browsers are unable to load local files, as if you think about it for a moment you should be grateful for that fact! Although there are ways to modify your browsers start-up settings to bypass the sandbox security we really don't recommend it, and as you're building games for <em>the web</em> it's only sensible that you run a local environment that as closely emulates the web on which your game will be running anyway.</p>
|
||||
|
||||
|
||||
<h2>Download the latest version of Phaser</h2>
|
||||
|
||||
|
||||
<p>In this tutorial we're going to build a game that will introduce some of the core features of Phaser to you. Before we begin there are a few things you'll need to have set-up if you haven't already:</p>
|
||||
|
||||
<h2>Download the latest version of Phaser</h2>
|
||||
|
||||
<p>The latest version of Phaser is available to download from github. At the time of writing that is version 1.1.2. If you aren't familiar with using git then github offer a handy "Download as zip" option which will download the whole repository in a single zip file. You can then unzip this locally and get to all the files. If you are happy using git then pull down the latest version of the repositiory before starting.</p>
|
||||
|
||||
<h2>Set-up your development environment</h2>
|
||||
|
||||
<h3>Method 1: Run a local web server</h3>
|
||||
|
||||
http://cesanta.com/downloads.html
|
||||
|
||||
<p>On Windows there are lots of "single install" bundles available. These are easy-to-install files that package together popular web technologies like Apache, PHP and MySQL and install them all for you at once, often with a handy system-tray icon to manage them too. We would recommend either <a href="http://www.wampserver.com/en/">WAMP Server</a> or <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>. Instead of an 'all in one' bundle you could also download just the web server on its own. Microsoft provide IIS and Apache can be downloaded for Windows as well.</p>
|
||||
|
||||
<p><strong>Note:</strong> Skype likes to steal port 80 by default. This is the traditional port for a web server to run over and it might interfer with WAMP or similar being able to start. To disable this within Skype go to "Tools - Options - Connection" and uncheck the "Use port 80 and 443 as alternatives for incoming connections" checkbox.</p>
|
||||
|
||||
<p>On OS X you could download <a href="http://www.mamp.info/en/index.html">MAMP</a> which comes in two versions (one free, one paid for). Or there are guides for setting up a local web server manually, such as <a href="https://discussions.apple.com/docs/DOC-3083">this guide written for Mountain Lion</a>.
|
||||
|
||||
<h3>Method 2: grunt connect</h3>
|
||||
|
||||
<p><a href="http://gruntjs.com/">Grunt</a> is an extremely powerful tool to have installed, regardless if you use it as a web server or not. At its essence it's a JavaScript based task runner and allows you to automate tedious time consuming tasks. But it can also be configured with Connect for serving local files and <a href="https://github.com/gruntjs/grunt-contrib-connect">here's a guide on doing just that</a>.
|
||||
|
||||
<h3>Method 3: Simple HTTP Server with Python</h3>
|
||||
|
||||
<p>If you need a quick web server running and you don't want to mess around with setting up apache or something similar, then Python can help. Python comes with a simple built in HTTP server. With the help of this little HTTP server you can turn any directory in your system into your web server directory. The only thing you need to have installed is Python. <a href="http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python">Read the full guide here</a>.
|
||||
|
||||
<h3>Method 4: http-server for node.js</h3>
|
||||
|
||||
<p>http-server is a simple, zero-configuration command-line http server for <a href="http://nodejs.org/">node.js</a>. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. Or as the web site says "Serving up static files like they were turtles strapped to rockets". Get the npm and instructions from the <a href="https://npmjs.org/package/http-server">http-server web site</a>.</p>
|
||||
|
||||
<h3>Method 5: php 5 built-in web server</h3>
|
||||
|
||||
<p>As of PHP 5.4.0, the CLI SAPI provides a built-in web server. It's only really suitable for development purposes and servers all files sequentially, but it's easily powerful enough for testing HTML5 games. It's invoked from a single command-line call and you can find details on how to do this in <a href="http://php.net/manual/en/features.commandline.webserver.php">the PHP Manual</a></p>.
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Method 2: Run in the cloud</h3>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user