Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-17 22:48:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Version 0.7 release. StageScaleMode support added and world input values exposed.

Browse source
This commit is contained in:
Richard Davey 2013-04-14 02:31:00 +01:00
parent 0541e93db4
commit ebf83609ae
18 changed files with 9289 additions and 271 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Phaser/Game.ts
View file

@ -17,7 +17,7 @@
/** /**
* Phaser * Phaser
* *
* v0.6 - April 13th 2013 * v0.7 - April 14th 2013
* *
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi. * A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
* *
@ -50,7 +50,7 @@ class Game {
} }
public static VERSION: string = 'Phaser version 0.6'; public static VERSION: string = 'Phaser version 0.7';
private _raf: RequestAnimationFrame; private _raf: RequestAnimationFrame;
private _maxAccumulation: number = 32; private _maxAccumulation: number = 32;

23
Phaser/Phaser.csproj
View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup> <PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration> <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@ -66,42 +66,37 @@
<TypeScriptCompile Include="Group.ts" /> <TypeScriptCompile Include="Group.ts" />
<TypeScriptCompile Include="Loader.ts" /> <TypeScriptCompile Include="Loader.ts" />
<TypeScriptCompile Include="Particle.ts" /> <TypeScriptCompile Include="Particle.ts" />
<TypeScriptCompile Include="geom\Circle.ts" />
<TypeScriptCompile Include="geom\Point.ts" /> <TypeScriptCompile Include="geom\Point.ts" />
<TypeScriptCompile Include="geom\Rectangle.ts" /> <TypeScriptCompile Include="geom\Rectangle.ts" />
<TypeScriptCompile Include="Sound.ts" /> <TypeScriptCompile Include="Sound.ts" />
<TypeScriptCompile Include="Sprite.ts" /> <TypeScriptCompile Include="Sprite.ts" />
<TypeScriptCompile Include="Stage.ts" /> <TypeScriptCompile Include="Stage.ts" />
<TypeScriptCompile Include="State.ts" /> <TypeScriptCompile Include="State.ts" />
<TypeScriptCompile Include="Signal.ts" />
<TypeScriptCompile Include="SignalBinding.ts" />
<TypeScriptCompile Include="system\animation\Animation.ts" /> <TypeScriptCompile Include="system\animation\Animation.ts" />
<TypeScriptCompile Include="system\animation\AnimationLoader.ts" /> <TypeScriptCompile Include="system\animation\AnimationLoader.ts" />
<TypeScriptCompile Include="system\animation\Frame.ts" /> <TypeScriptCompile Include="system\animation\Frame.ts" />
<TypeScriptCompile Include="system\animation\FrameData.ts" /> <TypeScriptCompile Include="system\animation\FrameData.ts" />
<TypeScriptCompile Include="system\Camera.ts" /> <TypeScriptCompile Include="system\Camera.ts" />
<TypeScriptCompile Include="system\Device.ts" />
<TypeScriptCompile Include="system\input\Finger.ts" />
<TypeScriptCompile Include="system\input\Input.ts" /> <TypeScriptCompile Include="system\input\Input.ts" />
<TypeScriptCompile Include="system\input\Keyboard.ts" /> <TypeScriptCompile Include="system\input\Keyboard.ts" />
<TypeScriptCompile Include="system\input\Mouse.ts" /> <TypeScriptCompile Include="system\input\Mouse.ts" />
<TypeScriptCompile Include="system\input\Touch.ts" />
<TypeScriptCompile Include="system\LinkedList.ts" /> <TypeScriptCompile Include="system\LinkedList.ts" />
<TypeScriptCompile Include="system\QuadTree.ts" /> <TypeScriptCompile Include="system\QuadTree.ts" />
<TypeScriptCompile Include="system\RandomDataGenerator.ts" />
<TypeScriptCompile Include="system\RequestAnimationFrame.ts" /> <TypeScriptCompile Include="system\RequestAnimationFrame.ts" />
<TypeScriptCompile Include="system\StageScaleMode.ts" />
<TypeScriptCompile Include="system\Tile.ts" /> <TypeScriptCompile Include="system\Tile.ts" />
<TypeScriptCompile Include="system\TilemapBuffer.ts" /> <TypeScriptCompile Include="system\TilemapBuffer.ts" />
<TypeScriptCompile Include="Tilemap.ts" /> <TypeScriptCompile Include="Tilemap.ts" />
<TypeScriptCompile Include="Time.ts" /> <TypeScriptCompile Include="Time.ts" />
<TypeScriptCompile Include="World.ts" /> <TypeScriptCompile Include="World.ts" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Content Include="geom\Circle.ts" />
<Content Include="Signal.ts" />
<Content Include="SignalBinding.ts" />
<Content Include="system\Device.ts" />
<Content Include="system\FullScreen.js">
<DependentUpon>FullScreen.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="system\FullScreen.ts" />
<Content Include="system\input\Finger.ts" />
<Content Include="system\input\Touch.ts" />
<Content Include="system\RandomDataGenerator.ts" />
</ItemGroup>
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" /> <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
<PropertyGroup> <PropertyGroup>
<PostBuildEvent>cd $(ProjectDir) <PostBuildEvent>cd $(ProjectDir)

20
Phaser/Stage.ts
View file

@ -1,7 +1,7 @@
/// <reference path="Game.ts" /> /// <reference path="Game.ts" />
/// <reference path="geom/Point.ts" /> /// <reference path="geom/Point.ts" />
/// <reference path="geom/Rectangle.ts" /> /// <reference path="geom/Rectangle.ts" />
/// <reference path="system/Fullscreen.ts" /> /// <reference path="system/StageScaleMode.ts" />
class Stage { class Stage {
@ -28,8 +28,8 @@ class Stage {
this.offset = this.getOffset(this.canvas); this.offset = this.getOffset(this.canvas);
this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height); this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height);
this.aspectRatio = width / height; this.aspectRatio = width / height;
this.scaleMode = Stage.SCALE_FIXED; this.scaleMode = StageScaleMode.NO_SCALE;
this.fullscreen = new FullScreen(this._game); this.scale = new StageScaleMode(this._game);
//document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false);
//document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false);
@ -41,9 +41,6 @@ class Stage {
private _game: Game; private _game: Game;
private _bgColor: string; private _bgColor: string;
public static SCALE_FIXED:number = 0;
public static SCALE_PROPORTIONAL:number = 1;
public static SCALE_FULL:number = 2;
public static ORIENTATION_LANDSCAPE:number = 0; public static ORIENTATION_LANDSCAPE:number = 0;
public static ORIENTATION_PORTRAIT:number = 1; public static ORIENTATION_PORTRAIT:number = 1;
@ -54,12 +51,17 @@ class Stage {
public canvas: HTMLCanvasElement; public canvas: HTMLCanvasElement;
public context: CanvasRenderingContext2D; public context: CanvasRenderingContext2D;
public offset: Point; public offset: Point;
public fullscreen: FullScreen; public scale: StageScaleMode;
public scaleMode: number; public scaleMode: number;
public minScaleX: number = null;
public maxScaleX: number = null;
public minScaleY: number = null;
public maxScaleY: number = null;
public update() { public update() {
this.fullscreen.update(); this.scale.update();
if (this.clear) if (this.clear)
{ {

7
Phaser/World.ts
View file

@ -61,11 +61,16 @@ class World {
// World methods // World methods
public setSize(width: number, height: number) { public setSize(width: number, height: number, updateCameraBounds: bool = true) {
this.bounds.width = width; this.bounds.width = width;
this.bounds.height = height; this.bounds.height = height;
if (updateCameraBounds == true)
{
this._game.camera.setBounds(0, 0, width, height);
}
} }
public get width(): number { public get width(): number {

160
Phaser/phaser.js
View file

@ -1634,6 +1634,9 @@ var Camera = (function () {
this.shadowOffset = new Point(4, 4); this.shadowOffset = new Point(4, 4);
this.visible = true; this.visible = true;
this.alpha = 1; this.alpha = 1;
// The x/y position of the current input event in world coordinates
this.inputX = 0;
this.inputY = 0;
this._game = game; this._game = game;
this.ID = id; this.ID = id;
this._stageX = x; this._stageX = x;
@ -1849,6 +1852,9 @@ var Camera = (function () {
} }
this.worldView.x = this.scroll.x; this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y; this.worldView.y = this.scroll.y;
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
// Update the Flash effect // Update the Flash effect
if(this._fxFlashAlpha > 0) { if(this._fxFlashAlpha > 0) {
this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration; this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration;
@ -4083,39 +4089,40 @@ var Sound = (function () {
* Licensed under the MIT License. * Licensed under the MIT License.
* https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt * https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt
*/ */
var FullScreen = (function () { var StageScaleMode = (function () {
function FullScreen(game) { function StageScaleMode(game) {
var _this = this; var _this = this;
this._startHeight = 0;
this.width = 0;
this.height = 0;
this._game = game; this._game = game;
this.orientation = window['orientation']; this.orientation = window['orientation'];
window.addEventListener('orientationchange', function (event) { window.addEventListener('orientationchange', function (event) {
return _this.checkOrientation(event); return _this.checkOrientation(event);
}, false); }, false);
this.width = window.innerWidth;
this.height = window.innerHeight;
} }
FullScreen.prototype.go = function () { StageScaleMode.EXACT_FIT = 0;
this.refresh(); StageScaleMode.NO_SCALE = 1;
}; StageScaleMode.SHOW_ALL = 2;
FullScreen.prototype.update = function () { StageScaleMode.prototype.update = function () {
if(this._game.stage.scaleMode !== Stage.SCALE_FIXED && (window.innerWidth !== this.width || window.innerHeight !== this.height)) { if(this._game.stage.scaleMode !== StageScaleMode.NO_SCALE && (window.innerWidth !== this.width || window.innerHeight !== this.height)) {
this.refresh(); this.refresh();
} }
}; };
Object.defineProperty(FullScreen.prototype, "isLandscape", { Object.defineProperty(StageScaleMode.prototype, "isLandscape", {
get: function () { get: function () {
return window['orientation'] === 90 || window['orientation'] === -90; return window['orientation'] === 90 || window['orientation'] === -90;
}, },
enumerable: true, enumerable: true,
configurable: true configurable: true
}); });
FullScreen.prototype.checkOrientation = function (event) { StageScaleMode.prototype.checkOrientation = function (event) {
if(window['orientation'] !== this.orientation) { if(window['orientation'] !== this.orientation) {
this.refresh(); this.refresh();
this.orientation = window['orientation']; this.orientation = window['orientation'];
} }
}; };
FullScreen.prototype.refresh = function () { StageScaleMode.prototype.refresh = function () {
var _this = this; var _this = this;
// We can't do anything about the status bars in iPads, web apps or desktops // We can't do anything about the status bars in iPads, web apps or desktops
if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) { if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) {
@ -4130,38 +4137,66 @@ var FullScreen = (function () {
if(this._check == null) { if(this._check == null) {
this._iterations = 40; this._iterations = 40;
this._check = window.setInterval(function () { this._check = window.setInterval(function () {
return _this.retryFullScreen(); return _this.setScreenSize();
}, 10); }, 10);
} }
}; };
FullScreen.prototype.retryFullScreen = function () { StageScaleMode.prototype.setScreenSize = function () {
if(this._game.device.android && this._game.device.chrome == false) { if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) {
window.scrollTo(0, 1); if(this._game.device.android && this._game.device.chrome == false) {
} else { window.scrollTo(0, 1);
window.scrollTo(0, 0); } else {
window.scrollTo(0, 0);
}
} }
this._iterations--; this._iterations--;
if(window.innerHeight > this._startHeight || this._iterations < 0) { if(window.innerHeight > this._startHeight || this._iterations < 0) {
// set minimum height of content to new window height // Set minimum height of content to new window height
document.documentElement.style.minHeight = window.innerHeight + 'px'; document.documentElement.style.minHeight = window.innerHeight + 'px';
this._game.stage.canvas.style.width = window.innerWidth + 'px'; if(this._game.stage.scaleMode == StageScaleMode.EXACT_FIT) {
this._game.stage.canvas.style.height = window.innerHeight + 'px'; if(this._game.stage.maxScaleX && window.innerWidth > this._game.stage.maxScaleX) {
this.width = window.innerWidth; this.width = this._game.stage.maxScaleX;
this.height = window.innerHeight; } else {
this.width = window.innerWidth;
}
if(this._game.stage.maxScaleY && window.innerHeight > this._game.stage.maxScaleY) {
this.height = this._game.stage.maxScaleY;
} else {
this.height = window.innerHeight;
}
} else if(this._game.stage.scaleMode == StageScaleMode.SHOW_ALL) {
var multiplier = Math.min((window.innerHeight / this._game.stage.height), (window.innerWidth / this._game.stage.width));
this.width = Math.round(this._game.stage.width * multiplier);
this.height = Math.round(this._game.stage.height * multiplier);
if(this._game.stage.maxScaleX && this.width > this._game.stage.maxScaleX) {
this.width = this._game.stage.maxScaleX;
}
if(this._game.stage.maxScaleY && this.height > this._game.stage.maxScaleY) {
this.height = this._game.stage.maxScaleY;
}
}
this._game.stage.canvas.style.width = this.width + 'px';
this._game.stage.canvas.style.height = this.height + 'px';
this._game.input.scaleX = this._game.stage.width / this.width;
this._game.input.scaleY = this._game.stage.height / this.height;
clearInterval(this._check); clearInterval(this._check);
this._check = null; this._check = null;
} }
}; };
return FullScreen; return StageScaleMode;
})(); })();
/// <reference path="Game.ts" /> /// <reference path="Game.ts" />
/// <reference path="geom/Point.ts" /> /// <reference path="geom/Point.ts" />
/// <reference path="geom/Rectangle.ts" /> /// <reference path="geom/Rectangle.ts" />
/// <reference path="system/Fullscreen.ts" /> /// <reference path="system/StageScaleMode.ts" />
var Stage = (function () { var Stage = (function () {
function Stage(game, parent, width, height) { function Stage(game, parent, width, height) {
var _this = this; var _this = this;
this.clear = true; this.clear = true;
this.minScaleX = null;
this.maxScaleX = null;
this.minScaleY = null;
this.maxScaleY = null;
this._logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpi/P//PwM6YGRkxBQEAqBaRnQxFmwa10d6MAjrMqMofHv5L1we2SBGmAtAktg0ogOQQYHLd8ANYYFpPtTmzUAMAFmwnsEDrAdkCAvMZlIAsiFMMAEYsKvaSrQhIMCELkGsV2AAbIC8gCQYgwKIUABiNYBf9yoYH7n7n6CzN274g2IYEyFbsNmKLIaSkHpP7WSwUfbA0ASzFQRslBlxp0RcAF0TRhggA3zhAJIDpUKU5A9KyshpHDkjFZu5g2nJMFcwXVJSgqIGnBKx5bKenh4w/XzVbgbPtlIUcVgSxuoCUgHIIIAAAwArtXwJBABO6QAAAABJRU5ErkJggg=="; this._logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpi/P//PwM6YGRkxBQEAqBaRnQxFmwa10d6MAjrMqMofHv5L1we2SBGmAtAktg0ogOQQYHLd8ANYYFpPtTmzUAMAFmwnsEDrAdkCAvMZlIAsiFMMAEYsKvaSrQhIMCELkGsV2AAbIC8gCQYgwKIUABiNYBf9yoYH7n7n6CzN274g2IYEyFbsNmKLIaSkHpP7WSwUfbA0ASzFQRslBlxp0RcAF0TRhggA3zhAJIDpUKU5A9KyshpHDkjFZu5g2nJMFcwXVJSgqIGnBKx5bKenh4w/XzVbgbPtlIUcVgSxuoCUgHIIIAAAwArtXwJBABO6QAAAABJRU5ErkJggg==";
this._game = game; this._game = game;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
@ -4177,8 +4212,8 @@ var Stage = (function () {
this.offset = this.getOffset(this.canvas); this.offset = this.getOffset(this.canvas);
this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height); this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height);
this.aspectRatio = width / height; this.aspectRatio = width / height;
this.scaleMode = Stage.SCALE_FIXED; this.scaleMode = StageScaleMode.NO_SCALE;
this.fullscreen = new FullScreen(this._game); this.scale = new StageScaleMode(this._game);
//document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false);
//document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false);
window.onblur = function (event) { window.onblur = function (event) {
@ -4188,13 +4223,10 @@ var Stage = (function () {
return _this.visibilityChange(event); return _this.visibilityChange(event);
}; };
} }
Stage.SCALE_FIXED = 0;
Stage.SCALE_PROPORTIONAL = 1;
Stage.SCALE_FULL = 2;
Stage.ORIENTATION_LANDSCAPE = 0; Stage.ORIENTATION_LANDSCAPE = 0;
Stage.ORIENTATION_PORTRAIT = 1; Stage.ORIENTATION_PORTRAIT = 1;
Stage.prototype.update = function () { Stage.prototype.update = function () {
this.fullscreen.update(); this.scale.update();
if(this.clear) { if(this.clear) {
// implement dirty rect? could take up more cpu time than it saves. needs benching. // implement dirty rect? could take up more cpu time than it saves. needs benching.
this.context.clearRect(0, 0, this.width, this.height); this.context.clearRect(0, 0, this.width, this.height);
@ -5177,9 +5209,13 @@ var World = (function () {
this._cameras.destroy(); this._cameras.destroy();
}; };
World.prototype.setSize = // World methods World.prototype.setSize = // World methods
function (width, height) { function (width, height, updateCameraBounds) {
if (typeof updateCameraBounds === "undefined") { updateCameraBounds = true; }
this.bounds.width = width; this.bounds.width = width;
this.bounds.height = height; this.bounds.height = height;
if(updateCameraBounds == true) {
this._game.camera.setBounds(0, 0, width, height);
}
}; };
Object.defineProperty(World.prototype, "width", { Object.defineProperty(World.prototype, "width", {
get: function () { get: function () {
@ -5536,13 +5572,15 @@ var Mouse = (function () {
this.button = event.button; this.button = event.button;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
this.timeDown = this._game.time.now; this.timeDown = this._game.time.now;
}; };
Mouse.prototype.update = function () { Mouse.prototype.update = function () {
this._game.input.x = this._x; //this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y; //this._game.input.y = this._y * this._game.input.scaleY;
if(this.isDown) { if(this.isDown) {
this.duration = this._game.time.now - this.timeDown; this.duration = this._game.time.now - this.timeDown;
} }
@ -5551,6 +5589,8 @@ var Mouse = (function () {
this.button = event.button; this.button = event.button;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
}; };
Mouse.prototype.onMouseUp = function (event) { Mouse.prototype.onMouseUp = function (event) {
this.button = event.button; this.button = event.button;
@ -5560,6 +5600,8 @@ var Mouse = (function () {
this.duration = this.timeUp - this.timeDown; this.duration = this.timeUp - this.timeDown;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
}; };
return Mouse; return Mouse;
})(); })();
@ -5582,6 +5624,7 @@ var Keyboard = (function () {
}, false); }, false);
}; };
Keyboard.prototype.onKeyDown = function (event) { Keyboard.prototype.onKeyDown = function (event) {
event.preventDefault();
if(!this._keys[event.keyCode]) { if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = { this._keys[event.keyCode] = {
isDown: true, isDown: true,
@ -5594,6 +5637,7 @@ var Keyboard = (function () {
} }
}; };
Keyboard.prototype.onKeyUp = function (event) { Keyboard.prototype.onKeyUp = function (event) {
event.preventDefault();
if(!this._keys[event.keyCode]) { if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = { this._keys[event.keyCode] = {
isDown: false, isDown: false,
@ -6730,6 +6774,18 @@ var Touch = (function () {
* @return {Touch} This object. * @return {Touch} This object.
*/ */
function Touch(game) { function Touch(game) {
/**
*
* @property x
* @type Number
**/
this.x = 0;
/**
*
* @property y
* @type Number
**/
this.y = 0;
/** /**
* *
* @property isDown * @property isDown
@ -6823,6 +6879,8 @@ var Touch = (function () {
this._fingers[f].start(event.changedTouches[i]); this._fingers[f].start(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
@ -6904,6 +6962,8 @@ var Touch = (function () {
this._fingers[f].move(event.changedTouches[i]); this._fingers[f].move(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
break; break;
} }
} }
@ -6925,6 +6985,8 @@ var Touch = (function () {
this._fingers[f].stop(event.changedTouches[i]); this._fingers[f].stop(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = false; this.isDown = false;
this.isUp = true; this.isUp = true;
@ -6962,8 +7024,6 @@ var Touch = (function () {
* @method update * @method update
*/ */
function () { function () {
this._game.input.x = this.x;
this._game.input.y = this.y;
}; };
Touch.prototype.stop = /** Touch.prototype.stop = /**
* *
@ -6993,12 +7053,22 @@ var Touch = (function () {
/// <reference path="Touch.ts" /> /// <reference path="Touch.ts" />
var Input = (function () { var Input = (function () {
function Input(game) { function Input(game) {
this.x = 0;
this.y = 0;
this.scaleX = 1;
this.scaleY = 1;
this.worldX = 0;
this.worldY = 0;
this._game = game; this._game = game;
this.mouse = new Mouse(this._game); this.mouse = new Mouse(this._game);
this.keyboard = new Keyboard(this._game); this.keyboard = new Keyboard(this._game);
this.touch = new Touch(this._game); this.touch = new Touch(this._game);
} }
Input.prototype.update = function () { Input.prototype.update = function () {
this.x = Math.round(this.x);
this.y = Math.round(this.y);
this.worldX = this._game.camera.worldView.x + this.x;
this.worldY = this._game.camera.worldView.y + this.y;
this.mouse.update(); this.mouse.update();
this.touch.update(); this.touch.update();
}; };
@ -7008,10 +7078,20 @@ var Input = (function () {
this.touch.reset(); this.touch.reset();
}; };
Input.prototype.getWorldX = function (camera) { Input.prototype.getWorldX = function (camera) {
return this.x; if (typeof camera === "undefined") { camera = this._game.camera; }
return camera.worldView.x + this.x;
}; };
Input.prototype.getWorldY = function (camera) { Input.prototype.getWorldY = function (camera) {
return this.y; if (typeof camera === "undefined") { camera = this._game.camera; }
return camera.worldView.y + this.y;
};
Input.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('Input', x, y);
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);
this._game.stage.context.fillText('World X: ' + this.worldX + ' World Y: ' + this.worldY, x, y + 28);
this._game.stage.context.fillText('Scale X: ' + this.scaleX.toFixed(1) + ' Scale Y: ' + this.scaleY.toFixed(1), x, y + 42);
}; };
return Input; return Input;
})(); })();
@ -7842,7 +7922,7 @@ var Device = (function () {
/** /**
* Phaser * Phaser
* *
* v0.6 - April 13th 2013 * v0.7 - April 14th 2013
* *
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi. * A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
* *
@ -7888,7 +7968,7 @@ var Game = (function () {
}, false); }, false);
} }
} }
Game.VERSION = 'Phaser version 0.6'; Game.VERSION = 'Phaser version 0.7';
Game.prototype.boot = function (parent, width, height) { Game.prototype.boot = function (parent, width, height) {
var _this = this; var _this = this;
if(!document.body) { if(!document.body) {

8
Phaser/system/Camera.ts
View file

@ -93,6 +93,10 @@ class Camera {
public visible: bool = true; public visible: bool = true;
public alpha: number = 1; public alpha: number = 1;
// The x/y position of the current input event in world coordinates
public inputX: number = 0;
public inputY: number = 0;
/** /**
* The camera is filled with this color and returns to normal at the given duration. * The camera is filled with this color and returns to normal at the given duration.
* *
@ -350,6 +354,10 @@ class Camera {
this.worldView.x = this.scroll.x; this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y; this.worldView.y = this.scroll.y;
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
// Update the Flash effect // Update the Flash effect
if (this._fxFlashAlpha > 0) if (this._fxFlashAlpha > 0)
{ {

125
Phaser/system/FullScreen.ts
View file

@ -1,125 +0,0 @@
/// <reference path="../Game.ts" />
/*
* Based on code from Viewporter v2.0
* http://github.com/zynga/viewporter
*
* Copyright 2011, Zynga Inc.
* Licensed under the MIT License.
* https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt
*/
class FullScreen {
constructor(game: Game) {
this._game = game;
this.orientation = window['orientation'];
window.addEventListener('orientationchange', (event) => this.checkOrientation(event), false);
this.width = window.innerWidth;
this.height = window.innerHeight;
}
private _game: Game;
private _startHeight: number;
private _iterations: number;
private _check;
public width: number;
public height: number;
public orientation;
public go() {
this.refresh();
}
public update() {
if (this._game.stage.scaleMode !== Stage.SCALE_FIXED && (window.innerWidth !== this.width || window.innerHeight !== this.height))
{
this.refresh();
}
}
public get isLandscape(): bool {
return window['orientation'] === 90 || window['orientation'] === -90;
}
private checkOrientation(event) {
if (window['orientation'] !== this.orientation)
{
this.refresh();
this.orientation = window['orientation'];
}
}
private refresh() {
// We can't do anything about the status bars in iPads, web apps or desktops
if (this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false)
{
document.documentElement.style.minHeight = '5000px';
this._startHeight = window.innerHeight;
if (this._game.device.android && this._game.device.chrome == false)
{
window.scrollTo(0, 1);
}
else
{
window.scrollTo(0, 0);
}
}
if (this._check == null)
{
this._iterations = 40;
this._check = window.setInterval(() => this.retryFullScreen(), 10);
}
}
private retryFullScreen() {
if (this._game.device.android && this._game.device.chrome == false)
{
window.scrollTo(0, 1);
}
else
{
window.scrollTo(0, 0);
}
this._iterations--;
if (window.innerHeight > this._startHeight || this._iterations < 0)
{
// set minimum height of content to new window height
document.documentElement.style.minHeight = window.innerHeight + 'px';
this._game.stage.canvas.style.width = window.innerWidth + 'px';
this._game.stage.canvas.style.height = window.innerHeight + 'px';
this.width = window.innerWidth;
this.height = window.innerHeight;
clearInterval(this._check);
this._check = null;
}
}
}

166
Phaser/system/StageScaleMode.ts Normal file
View file

@ -0,0 +1,166 @@
/// <reference path="../Game.ts" />
/*
* Based on code from Viewporter v2.0
* http://github.com/zynga/viewporter
*
* Copyright 2011, Zynga Inc.
* Licensed under the MIT License.
* https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt
*/
class StageScaleMode {
constructor(game: Game) {
this._game = game;
this.orientation = window['orientation'];
window.addEventListener('orientationchange', (event) => this.checkOrientation(event), false);
}
private _game: Game;
private _startHeight: number = 0;
private _iterations: number;
private _check;
// Specifies that the game be visible in the specified area without trying to preserve the original aspect ratio.
public static EXACT_FIT:number = 0;
// Specifies that the size of the game be fixed, so that it remains unchanged even if the size of the window changes.
public static NO_SCALE:number = 1;
// Specifies that the entire game be visible in the specified area without distortion while maintaining the original aspect ratio.
public static SHOW_ALL:number = 2;
public width: number = 0;
public height: number = 0;
public orientation;
public update() {
if (this._game.stage.scaleMode !== StageScaleMode.NO_SCALE && (window.innerWidth !== this.width || window.innerHeight !== this.height))
{
this.refresh();
}
}
public get isLandscape(): bool {
return window['orientation'] === 90 || window['orientation'] === -90;
}
private checkOrientation(event) {
if (window['orientation'] !== this.orientation)
{
this.refresh();
this.orientation = window['orientation'];
}
}
private refresh() {
// We can't do anything about the status bars in iPads, web apps or desktops
if (this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false)
{
document.documentElement.style.minHeight = '5000px';
this._startHeight = window.innerHeight;
if (this._game.device.android && this._game.device.chrome == false)
{
window.scrollTo(0, 1);
}
else
{
window.scrollTo(0, 0);
}
}
if (this._check == null)
{
this._iterations = 40;
this._check = window.setInterval(() => this.setScreenSize(), 10);
}
}
private setScreenSize() {
if (this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false)
{
if (this._game.device.android && this._game.device.chrome == false)
{
window.scrollTo(0, 1);
}
else
{
window.scrollTo(0, 0);
}
}
this._iterations--;
if (window.innerHeight > this._startHeight || this._iterations < 0)
{
// Set minimum height of content to new window height
document.documentElement.style.minHeight = window.innerHeight + 'px';
if (this._game.stage.scaleMode == StageScaleMode.EXACT_FIT)
{
if (this._game.stage.maxScaleX && window.innerWidth > this._game.stage.maxScaleX)
{
this.width = this._game.stage.maxScaleX;
}
else
{
this.width = window.innerWidth;
}
if (this._game.stage.maxScaleY && window.innerHeight > this._game.stage.maxScaleY)
{
this.height = this._game.stage.maxScaleY;
}
else
{
this.height = window.innerHeight;
}
}
else if (this._game.stage.scaleMode == StageScaleMode.SHOW_ALL)
{
var multiplier = Math.min((window.innerHeight / this._game.stage.height), (window.innerWidth / this._game.stage.width));
this.width = Math.round(this._game.stage.width * multiplier);
this.height = Math.round(this._game.stage.height * multiplier);
if (this._game.stage.maxScaleX && this.width > this._game.stage.maxScaleX)
{
this.width = this._game.stage.maxScaleX;
}
if (this._game.stage.maxScaleY && this.height > this._game.stage.maxScaleY)
{
this.height = this._game.stage.maxScaleY;
}
}
this._game.stage.canvas.style.width = this.width + 'px';
this._game.stage.canvas.style.height = this.height + 'px';
this._game.input.scaleX = this._game.stage.width / this.width;
this._game.input.scaleY = this._game.stage.height / this.height;
clearInterval(this._check);
this._check = null;
}
}
}

34
Phaser/system/input/Input.ts
View file

@ -21,11 +21,23 @@ class Input {
public keyboard: Keyboard; public keyboard: Keyboard;
public touch: Touch; public touch: Touch;
public x: number; public x: number = 0;
public y: number; public y: number = 0;
public scaleX: number = 1;
public scaleY: number = 1;
public worldX: number = 0;
public worldY: number = 0;
public update() { public update() {
this.x = Math.round(this.x);
this.y = Math.round(this.y);
this.worldX = this._game.camera.worldView.x + this.x;
this.worldY = this._game.camera.worldView.y + this.y;
this.mouse.update(); this.mouse.update();
this.touch.update(); this.touch.update();
@ -39,15 +51,25 @@ class Input {
} }
public getWorldX(camera: Camera): number { public getWorldX(camera?: Camera = this._game.camera) {
return this.x; return camera.worldView.x + this.x;
} }
public getWorldY(camera: Camera): number { public getWorldY(camera?: Camera = this._game.camera) {
return this.y; return camera.worldView.y + this.y;
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('Input', x, y);
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);
this._game.stage.context.fillText('World X: ' + this.worldX + ' World Y: ' + this.worldY, x, y + 28);
this._game.stage.context.fillText('Scale X: ' + this.scaleX.toFixed(1) + ' Scale Y: ' + this.scaleY.toFixed(1), x, y + 42);
} }

4
Phaser/system/input/Keyboard.ts
View file

@ -23,6 +23,8 @@ class Keyboard {
public onKeyDown(event: KeyboardEvent) { public onKeyDown(event: KeyboardEvent) {
event.preventDefault();
if (!this._keys[event.keyCode]) if (!this._keys[event.keyCode])
{ {
this._keys[event.keyCode] = { isDown: true, timeDown: this._game.time.now, timeUp: 0 }; this._keys[event.keyCode] = { isDown: true, timeDown: this._game.time.now, timeUp: 0 };
@ -37,6 +39,8 @@ class Keyboard {
public onKeyUp(event: KeyboardEvent) { public onKeyUp(event: KeyboardEvent) {
event.preventDefault();
if (!this._keys[event.keyCode]) if (!this._keys[event.keyCode])
{ {
this._keys[event.keyCode] = { isDown: false, timeDown: 0, timeUp: this._game.time.now }; this._keys[event.keyCode] = { isDown: false, timeDown: 0, timeUp: this._game.time.now };

13
Phaser/system/input/Mouse.ts
View file

@ -49,6 +49,9 @@ class Mouse {
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
this.timeDown = this._game.time.now; this.timeDown = this._game.time.now;
@ -57,8 +60,8 @@ class Mouse {
public update() { public update() {
this._game.input.x = this._x; //this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y; //this._game.input.y = this._y * this._game.input.scaleY;
if (this.isDown) if (this.isDown)
{ {
@ -74,6 +77,9 @@ class Mouse {
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
} }
public onMouseUp(event: MouseEvent) { public onMouseUp(event: MouseEvent) {
@ -87,6 +93,9 @@ class Mouse {
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
} }
} }

12
Phaser/system/input/Touch.ts
View file

@ -64,14 +64,14 @@ class Touch {
* @property x * @property x
* @type Number * @type Number
**/ **/
public x: number; public x: number = 0;
/** /**
* *
* @property y * @property y
* @type Number * @type Number
**/ **/
public y: number; public y: number = 0;
/** /**
* *
@ -227,6 +227,8 @@ class Touch {
this._fingers[f].start(event.changedTouches[i]); this._fingers[f].start(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
@ -338,6 +340,8 @@ class Touch {
this._fingers[f].move(event.changedTouches[i]); this._fingers[f].move(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
break; break;
} }
} }
@ -367,6 +371,8 @@ class Touch {
this._fingers[f].stop(event.changedTouches[i]); this._fingers[f].stop(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = false; this.isDown = false;
this.isUp = true; this.isUp = true;
@ -410,8 +416,6 @@ class Touch {
*/ */
public update() { public update() {
this._game.input.x = this.x;
this._game.input.y = this.y;
} }

22
README.md
View file

@ -1,9 +1,9 @@
Phaser Phaser
====== ======
Version 0.6 Version 0.7
13th April 2013 14th April 2013
By Richard Davey, [Photon Storm](http://www.photonstorm.com) By Richard Davey, [Photon Storm](http://www.photonstorm.com)
@ -18,6 +18,13 @@ For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.h
Change Log Change Log
---------- ----------
V0.7
Renamed FullScreen to StageScaleMode as it's much more fitting. Tested across Android and iOS with the various scale modes.
Added in world x/y coordinates to the input class, and the ability to get world x/y input coordinates from any Camera.
Added the RandomDataGenerator for seeded random number generation.
Setting the game world size now resizes the default camera (optional bool flag)
V0.6 V0.6
Added in Touch support for mobile devices (and desktops that enable it) and populated x/y coords in Input with common values from touch and mouse. Added in Touch support for mobile devices (and desktops that enable it) and populated x/y coords in Input with common values from touch and mouse.
@ -36,6 +43,8 @@ Games created with Phaser require a modern web browser that supports the canvas
For developing with Phaser you can use either a plain-vanilla JavaScript approach or [TypeScript](https://typescript.codeplex.com/). We made no assumptions about how you like to code your games, and were careful not to impose any form of class/inheritance/structure upon you. For developing with Phaser you can use either a plain-vanilla JavaScript approach or [TypeScript](https://typescript.codeplex.com/). We made no assumptions about how you like to code your games, and were careful not to impose any form of class/inheritance/structure upon you.
Phaser is 147KB minified and just 30KB gzipped (sizes accurate as of version 0.7)
Features Features
-------- --------
@ -79,7 +88,7 @@ Phaser fully or partially supports the following features. This list is growing
* Stage<br /> * Stage<br />
Easily change properties about your game via the stage, such as background color, position and size. Easily change properties about your game via the stage, such as background color, position, size and scale.
* World<br /> * World<br />
@ -103,6 +112,10 @@ Phaser fully or partially supports the following features. This list is growing
Support for CSV and Tiled JSON format tile maps is implemented but currently limited. Support for CSV and Tiled JSON format tile maps is implemented but currently limited.
* Game Scaling<br />
Game scaling under your control. Removes URL/status bar on mobile (iOS and Android) and allows proportional scaling, fixed size and orientation checks.
![Phaser Particles](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_particles.png) ![Phaser Particles](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_particles.png)
Work in Progress Work in Progress
@ -112,8 +125,7 @@ We've a number of features that we know Phaser is lacking, here is our current p
* Tilemap collision and layers * Tilemap collision and layers
* Better sound controls * Better sound controls
* Touch and MSPointer support * MSPointer support
* Game scaling on mobile
* Text Rendering * Text Rendering
* Buttons * Buttons

28
Tests/input/mouse scale.js
View file

@ -1,31 +1,37 @@
/// <reference path="../../Phaser/Game.ts" /> /// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/Sprite.ts" /> /// <reference path="../../Phaser/Sprite.ts" />
(function () { (function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update); // Here we create a quite tiny game (320x240 in size)
var myGame = new Game(this, 'game', 320, 240, init, create, update);
function init() { function init() {
// This sets a limit on the up-scale
myGame.stage.maxScaleX = 640;
myGame.stage.maxScaleY = 480;
// Then we tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
myGame.stage.scaleMode = StageScaleMode.SHOW_ALL;
myGame.loader.addImageFile('melon', 'assets/sprites/melon.png'); myGame.loader.addImageFile('melon', 'assets/sprites/melon.png');
myGame.loader.load(); myGame.loader.load();
} }
function create() { function create() {
myGame.world.width = 3000; myGame.world.setSize(2000, 2000);
myGame.world.height = 3000;
for(var i = 0; i < 1000; i++) { for(var i = 0; i < 1000; i++) {
myGame.createSprite(Math.random() * 3000, Math.random() * 3000, 'melon'); myGame.createSprite(myGame.world.randomX, myGame.world.randomY, 'melon');
} }
myGame.stage.clear = true; myGame.onRenderCallback = render;
} }
function update() { function update() {
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText('x: ' + myGame.input.x + ' y: ' + myGame.input.y, 10, 20);
if(myGame.input.keyboard.isDown(Keyboard.LEFT)) { if(myGame.input.keyboard.isDown(Keyboard.LEFT)) {
myGame.camera.x -= 4; myGame.camera.scroll.x -= 4;
} else if(myGame.input.keyboard.isDown(Keyboard.RIGHT)) { } else if(myGame.input.keyboard.isDown(Keyboard.RIGHT)) {
myGame.camera.x += 4; myGame.camera.scroll.x += 4;
} }
if(myGame.input.keyboard.isDown(Keyboard.UP)) { if(myGame.input.keyboard.isDown(Keyboard.UP)) {
myGame.camera.y -= 4; myGame.camera.scroll.y -= 4;
} else if(myGame.input.keyboard.isDown(Keyboard.DOWN)) { } else if(myGame.input.keyboard.isDown(Keyboard.DOWN)) {
myGame.camera.y += 4; myGame.camera.scroll.y += 4;
} }
} }
function render() {
myGame.input.renderDebugInfo(16, 16);
}
})(); })();

33
Tests/input/mouse scale.ts
View file

@ -3,10 +3,17 @@
(function () { (function () {
var myGame = new Game(this, 'game', 800, 600, init, create, update); // Here we create a quite tiny game (320x240 in size)
var myGame = new Game(this, 'game', 320, 240, init, create, update);
function init() { function init() {
// This sets a limit on the up-scale
myGame.stage.maxScaleX = 640;
myGame.stage.maxScaleY = 480;
// Then we tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
myGame.stage.scaleMode = StageScaleMode.SHOW_ALL;
myGame.loader.addImageFile('melon', 'assets/sprites/melon.png'); myGame.loader.addImageFile('melon', 'assets/sprites/melon.png');
myGame.loader.load(); myGame.loader.load();
@ -15,41 +22,43 @@
function create() { function create() {
myGame.world.width = 3000; myGame.world.setSize(2000, 2000);
myGame.world.height = 3000;
for (var i = 0; i < 1000; i++) for (var i = 0; i < 1000; i++)
{ {
myGame.createSprite(Math.random() * 3000, Math.random() * 3000, 'melon'); myGame.createSprite(myGame.world.randomX, myGame.world.randomY, 'melon');
} }
myGame.stage.clear = true; myGame.onRenderCallback = render;
} }
function update() { function update() {
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText('x: ' + myGame.input.x + ' y: ' + myGame.input.y, 10, 20);
if (myGame.input.keyboard.isDown(Keyboard.LEFT)) if (myGame.input.keyboard.isDown(Keyboard.LEFT))
{ {
myGame.camera.x -= 4; myGame.camera.scroll.x -= 4;
} }
else if (myGame.input.keyboard.isDown(Keyboard.RIGHT)) else if (myGame.input.keyboard.isDown(Keyboard.RIGHT))
{ {
myGame.camera.x += 4; myGame.camera.scroll.x += 4;
} }
if (myGame.input.keyboard.isDown(Keyboard.UP)) if (myGame.input.keyboard.isDown(Keyboard.UP))
{ {
myGame.camera.y -= 4; myGame.camera.scroll.y -= 4;
} }
else if (myGame.input.keyboard.isDown(Keyboard.DOWN)) else if (myGame.input.keyboard.isDown(Keyboard.DOWN))
{ {
myGame.camera.y += 4; myGame.camera.scroll.y += 4;
} }
} }
function render() {
myGame.input.renderDebugInfo(16, 16);
}
})(); })();

160
Tests/phaser.js
View file

@ -1634,6 +1634,9 @@ var Camera = (function () {
this.shadowOffset = new Point(4, 4); this.shadowOffset = new Point(4, 4);
this.visible = true; this.visible = true;
this.alpha = 1; this.alpha = 1;
// The x/y position of the current input event in world coordinates
this.inputX = 0;
this.inputY = 0;
this._game = game; this._game = game;
this.ID = id; this.ID = id;
this._stageX = x; this._stageX = x;
@ -1849,6 +1852,9 @@ var Camera = (function () {
} }
this.worldView.x = this.scroll.x; this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y; this.worldView.y = this.scroll.y;
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
// Update the Flash effect // Update the Flash effect
if(this._fxFlashAlpha > 0) { if(this._fxFlashAlpha > 0) {
this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration; this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration;
@ -4083,39 +4089,40 @@ var Sound = (function () {
* Licensed under the MIT License. * Licensed under the MIT License.
* https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt * https://raw.github.com/zynga/viewporter/master/MIT-LICENSE.txt
*/ */
var FullScreen = (function () { var StageScaleMode = (function () {
function FullScreen(game) { function StageScaleMode(game) {
var _this = this; var _this = this;
this._startHeight = 0;
this.width = 0;
this.height = 0;
this._game = game; this._game = game;
this.orientation = window['orientation']; this.orientation = window['orientation'];
window.addEventListener('orientationchange', function (event) { window.addEventListener('orientationchange', function (event) {
return _this.checkOrientation(event); return _this.checkOrientation(event);
}, false); }, false);
this.width = window.innerWidth;
this.height = window.innerHeight;
} }
FullScreen.prototype.go = function () { StageScaleMode.EXACT_FIT = 0;
this.refresh(); StageScaleMode.NO_SCALE = 1;
}; StageScaleMode.SHOW_ALL = 2;
FullScreen.prototype.update = function () { StageScaleMode.prototype.update = function () {
if(this._game.stage.scaleMode !== Stage.SCALE_FIXED && (window.innerWidth !== this.width || window.innerHeight !== this.height)) { if(this._game.stage.scaleMode !== StageScaleMode.NO_SCALE && (window.innerWidth !== this.width || window.innerHeight !== this.height)) {
this.refresh(); this.refresh();
} }
}; };
Object.defineProperty(FullScreen.prototype, "isLandscape", { Object.defineProperty(StageScaleMode.prototype, "isLandscape", {
get: function () { get: function () {
return window['orientation'] === 90 || window['orientation'] === -90; return window['orientation'] === 90 || window['orientation'] === -90;
}, },
enumerable: true, enumerable: true,
configurable: true configurable: true
}); });
FullScreen.prototype.checkOrientation = function (event) { StageScaleMode.prototype.checkOrientation = function (event) {
if(window['orientation'] !== this.orientation) { if(window['orientation'] !== this.orientation) {
this.refresh(); this.refresh();
this.orientation = window['orientation']; this.orientation = window['orientation'];
} }
}; };
FullScreen.prototype.refresh = function () { StageScaleMode.prototype.refresh = function () {
var _this = this; var _this = this;
// We can't do anything about the status bars in iPads, web apps or desktops // We can't do anything about the status bars in iPads, web apps or desktops
if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) { if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) {
@ -4130,38 +4137,66 @@ var FullScreen = (function () {
if(this._check == null) { if(this._check == null) {
this._iterations = 40; this._iterations = 40;
this._check = window.setInterval(function () { this._check = window.setInterval(function () {
return _this.retryFullScreen(); return _this.setScreenSize();
}, 10); }, 10);
} }
}; };
FullScreen.prototype.retryFullScreen = function () { StageScaleMode.prototype.setScreenSize = function () {
if(this._game.device.android && this._game.device.chrome == false) { if(this._game.device.iPad == false && this._game.device.webApp == false && this._game.device.desktop == false) {
window.scrollTo(0, 1); if(this._game.device.android && this._game.device.chrome == false) {
} else { window.scrollTo(0, 1);
window.scrollTo(0, 0); } else {
window.scrollTo(0, 0);
}
} }
this._iterations--; this._iterations--;
if(window.innerHeight > this._startHeight || this._iterations < 0) { if(window.innerHeight > this._startHeight || this._iterations < 0) {
// set minimum height of content to new window height // Set minimum height of content to new window height
document.documentElement.style.minHeight = window.innerHeight + 'px'; document.documentElement.style.minHeight = window.innerHeight + 'px';
this._game.stage.canvas.style.width = window.innerWidth + 'px'; if(this._game.stage.scaleMode == StageScaleMode.EXACT_FIT) {
this._game.stage.canvas.style.height = window.innerHeight + 'px'; if(this._game.stage.maxScaleX && window.innerWidth > this._game.stage.maxScaleX) {
this.width = window.innerWidth; this.width = this._game.stage.maxScaleX;
this.height = window.innerHeight; } else {
this.width = window.innerWidth;
}
if(this._game.stage.maxScaleY && window.innerHeight > this._game.stage.maxScaleY) {
this.height = this._game.stage.maxScaleY;
} else {
this.height = window.innerHeight;
}
} else if(this._game.stage.scaleMode == StageScaleMode.SHOW_ALL) {
var multiplier = Math.min((window.innerHeight / this._game.stage.height), (window.innerWidth / this._game.stage.width));
this.width = Math.round(this._game.stage.width * multiplier);
this.height = Math.round(this._game.stage.height * multiplier);
if(this._game.stage.maxScaleX && this.width > this._game.stage.maxScaleX) {
this.width = this._game.stage.maxScaleX;
}
if(this._game.stage.maxScaleY && this.height > this._game.stage.maxScaleY) {
this.height = this._game.stage.maxScaleY;
}
}
this._game.stage.canvas.style.width = this.width + 'px';
this._game.stage.canvas.style.height = this.height + 'px';
this._game.input.scaleX = this._game.stage.width / this.width;
this._game.input.scaleY = this._game.stage.height / this.height;
clearInterval(this._check); clearInterval(this._check);
this._check = null; this._check = null;
} }
}; };
return FullScreen; return StageScaleMode;
})(); })();
/// <reference path="Game.ts" /> /// <reference path="Game.ts" />
/// <reference path="geom/Point.ts" /> /// <reference path="geom/Point.ts" />
/// <reference path="geom/Rectangle.ts" /> /// <reference path="geom/Rectangle.ts" />
/// <reference path="system/Fullscreen.ts" /> /// <reference path="system/StageScaleMode.ts" />
var Stage = (function () { var Stage = (function () {
function Stage(game, parent, width, height) { function Stage(game, parent, width, height) {
var _this = this; var _this = this;
this.clear = true; this.clear = true;
this.minScaleX = null;
this.maxScaleX = null;
this.minScaleY = null;
this.maxScaleY = null;
this._logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpi/P//PwM6YGRkxBQEAqBaRnQxFmwa10d6MAjrMqMofHv5L1we2SBGmAtAktg0ogOQQYHLd8ANYYFpPtTmzUAMAFmwnsEDrAdkCAvMZlIAsiFMMAEYsKvaSrQhIMCELkGsV2AAbIC8gCQYgwKIUABiNYBf9yoYH7n7n6CzN274g2IYEyFbsNmKLIaSkHpP7WSwUfbA0ASzFQRslBlxp0RcAF0TRhggA3zhAJIDpUKU5A9KyshpHDkjFZu5g2nJMFcwXVJSgqIGnBKx5bKenh4w/XzVbgbPtlIUcVgSxuoCUgHIIIAAAwArtXwJBABO6QAAAABJRU5ErkJggg=="; this._logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpi/P//PwM6YGRkxBQEAqBaRnQxFmwa10d6MAjrMqMofHv5L1we2SBGmAtAktg0ogOQQYHLd8ANYYFpPtTmzUAMAFmwnsEDrAdkCAvMZlIAsiFMMAEYsKvaSrQhIMCELkGsV2AAbIC8gCQYgwKIUABiNYBf9yoYH7n7n6CzN274g2IYEyFbsNmKLIaSkHpP7WSwUfbA0ASzFQRslBlxp0RcAF0TRhggA3zhAJIDpUKU5A9KyshpHDkjFZu5g2nJMFcwXVJSgqIGnBKx5bKenh4w/XzVbgbPtlIUcVgSxuoCUgHIIIAAAwArtXwJBABO6QAAAABJRU5ErkJggg==";
this._game = game; this._game = game;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
@ -4177,8 +4212,8 @@ var Stage = (function () {
this.offset = this.getOffset(this.canvas); this.offset = this.getOffset(this.canvas);
this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height); this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height);
this.aspectRatio = width / height; this.aspectRatio = width / height;
this.scaleMode = Stage.SCALE_FIXED; this.scaleMode = StageScaleMode.NO_SCALE;
this.fullscreen = new FullScreen(this._game); this.scale = new StageScaleMode(this._game);
//document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false);
//document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false); //document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false);
window.onblur = function (event) { window.onblur = function (event) {
@ -4188,13 +4223,10 @@ var Stage = (function () {
return _this.visibilityChange(event); return _this.visibilityChange(event);
}; };
} }
Stage.SCALE_FIXED = 0;
Stage.SCALE_PROPORTIONAL = 1;
Stage.SCALE_FULL = 2;
Stage.ORIENTATION_LANDSCAPE = 0; Stage.ORIENTATION_LANDSCAPE = 0;
Stage.ORIENTATION_PORTRAIT = 1; Stage.ORIENTATION_PORTRAIT = 1;
Stage.prototype.update = function () { Stage.prototype.update = function () {
this.fullscreen.update(); this.scale.update();
if(this.clear) { if(this.clear) {
// implement dirty rect? could take up more cpu time than it saves. needs benching. // implement dirty rect? could take up more cpu time than it saves. needs benching.
this.context.clearRect(0, 0, this.width, this.height); this.context.clearRect(0, 0, this.width, this.height);
@ -5177,9 +5209,13 @@ var World = (function () {
this._cameras.destroy(); this._cameras.destroy();
}; };
World.prototype.setSize = // World methods World.prototype.setSize = // World methods
function (width, height) { function (width, height, updateCameraBounds) {
if (typeof updateCameraBounds === "undefined") { updateCameraBounds = true; }
this.bounds.width = width; this.bounds.width = width;
this.bounds.height = height; this.bounds.height = height;
if(updateCameraBounds == true) {
this._game.camera.setBounds(0, 0, width, height);
}
}; };
Object.defineProperty(World.prototype, "width", { Object.defineProperty(World.prototype, "width", {
get: function () { get: function () {
@ -5536,13 +5572,15 @@ var Mouse = (function () {
this.button = event.button; this.button = event.button;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
this.timeDown = this._game.time.now; this.timeDown = this._game.time.now;
}; };
Mouse.prototype.update = function () { Mouse.prototype.update = function () {
this._game.input.x = this._x; //this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y; //this._game.input.y = this._y * this._game.input.scaleY;
if(this.isDown) { if(this.isDown) {
this.duration = this._game.time.now - this.timeDown; this.duration = this._game.time.now - this.timeDown;
} }
@ -5551,6 +5589,8 @@ var Mouse = (function () {
this.button = event.button; this.button = event.button;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
}; };
Mouse.prototype.onMouseUp = function (event) { Mouse.prototype.onMouseUp = function (event) {
this.button = event.button; this.button = event.button;
@ -5560,6 +5600,8 @@ var Mouse = (function () {
this.duration = this.timeUp - this.timeDown; this.duration = this.timeUp - this.timeDown;
this._x = event.clientX - this._game.stage.x; this._x = event.clientX - this._game.stage.x;
this._y = event.clientY - this._game.stage.y; this._y = event.clientY - this._game.stage.y;
this._game.input.x = this._x * this._game.input.scaleX;
this._game.input.y = this._y * this._game.input.scaleY;
}; };
return Mouse; return Mouse;
})(); })();
@ -5582,6 +5624,7 @@ var Keyboard = (function () {
}, false); }, false);
}; };
Keyboard.prototype.onKeyDown = function (event) { Keyboard.prototype.onKeyDown = function (event) {
event.preventDefault();
if(!this._keys[event.keyCode]) { if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = { this._keys[event.keyCode] = {
isDown: true, isDown: true,
@ -5594,6 +5637,7 @@ var Keyboard = (function () {
} }
}; };
Keyboard.prototype.onKeyUp = function (event) { Keyboard.prototype.onKeyUp = function (event) {
event.preventDefault();
if(!this._keys[event.keyCode]) { if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = { this._keys[event.keyCode] = {
isDown: false, isDown: false,
@ -6730,6 +6774,18 @@ var Touch = (function () {
* @return {Touch} This object. * @return {Touch} This object.
*/ */
function Touch(game) { function Touch(game) {
/**
*
* @property x
* @type Number
**/
this.x = 0;
/**
*
* @property y
* @type Number
**/
this.y = 0;
/** /**
* *
* @property isDown * @property isDown
@ -6823,6 +6879,8 @@ var Touch = (function () {
this._fingers[f].start(event.changedTouches[i]); this._fingers[f].start(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = true; this.isDown = true;
this.isUp = false; this.isUp = false;
@ -6904,6 +6962,8 @@ var Touch = (function () {
this._fingers[f].move(event.changedTouches[i]); this._fingers[f].move(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
break; break;
} }
} }
@ -6925,6 +6985,8 @@ var Touch = (function () {
this._fingers[f].stop(event.changedTouches[i]); this._fingers[f].stop(event.changedTouches[i]);
this.x = this._fingers[f].x; this.x = this._fingers[f].x;
this.y = this._fingers[f].y; this.y = this._fingers[f].y;
this._game.input.x = this.x * this._game.input.scaleX;
this._game.input.y = this.y * this._game.input.scaleY;
this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration);
this.isDown = false; this.isDown = false;
this.isUp = true; this.isUp = true;
@ -6962,8 +7024,6 @@ var Touch = (function () {
* @method update * @method update
*/ */
function () { function () {
this._game.input.x = this.x;
this._game.input.y = this.y;
}; };
Touch.prototype.stop = /** Touch.prototype.stop = /**
* *
@ -6993,12 +7053,22 @@ var Touch = (function () {
/// <reference path="Touch.ts" /> /// <reference path="Touch.ts" />
var Input = (function () { var Input = (function () {
function Input(game) { function Input(game) {
this.x = 0;
this.y = 0;
this.scaleX = 1;
this.scaleY = 1;
this.worldX = 0;
this.worldY = 0;
this._game = game; this._game = game;
this.mouse = new Mouse(this._game); this.mouse = new Mouse(this._game);
this.keyboard = new Keyboard(this._game); this.keyboard = new Keyboard(this._game);
this.touch = new Touch(this._game); this.touch = new Touch(this._game);
} }
Input.prototype.update = function () { Input.prototype.update = function () {
this.x = Math.round(this.x);
this.y = Math.round(this.y);
this.worldX = this._game.camera.worldView.x + this.x;
this.worldY = this._game.camera.worldView.y + this.y;
this.mouse.update(); this.mouse.update();
this.touch.update(); this.touch.update();
}; };
@ -7008,10 +7078,20 @@ var Input = (function () {
this.touch.reset(); this.touch.reset();
}; };
Input.prototype.getWorldX = function (camera) { Input.prototype.getWorldX = function (camera) {
return this.x; if (typeof camera === "undefined") { camera = this._game.camera; }
return camera.worldView.x + this.x;
}; };
Input.prototype.getWorldY = function (camera) { Input.prototype.getWorldY = function (camera) {
return this.y; if (typeof camera === "undefined") { camera = this._game.camera; }
return camera.worldView.y + this.y;
};
Input.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('Input', x, y);
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);
this._game.stage.context.fillText('World X: ' + this.worldX + ' World Y: ' + this.worldY, x, y + 28);
this._game.stage.context.fillText('Scale X: ' + this.scaleX.toFixed(1) + ' Scale Y: ' + this.scaleY.toFixed(1), x, y + 42);
}; };
return Input; return Input;
})(); })();
@ -7842,7 +7922,7 @@ var Device = (function () {
/** /**
* Phaser * Phaser
* *
* v0.6 - April 13th 2013 * v0.7 - April 14th 2013
* *
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi. * A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
* *
@ -7888,7 +7968,7 @@ var Game = (function () {
}, false); }, false);
} }
} }
Game.VERSION = 'Phaser version 0.6'; Game.VERSION = 'Phaser version 0.7';
Game.prototype.boot = function (parent, width, height) { Game.prototype.boot = function (parent, width, height) {
var _this = this; var _this = this;
if(!document.body) { if(!document.body) {

8740
build/phaser-07.js Normal file
View file

File diff suppressed because it is too large Load diff

1
build/phaser-07.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long