Skip to content

Commit d42f396

Browse files
photonstormphotonstorm
committed
Lots of tweaks and fixes to the orientation and fullscreen classes
1 parent 82d4ba4 commit d42f396

21 files changed

Lines changed: 1659 additions & 315 deletions

‎Docs/box-01.png‎

1.86 KB
Loading

‎Docs/box-02.png‎

1.61 KB
Loading

‎Phaser/Phaser.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,10 @@
170170
<Content Include="renderers\CanvasRenderer.js">
171171
<DependentUpon>CanvasRenderer.ts</DependentUpon>
172172
</Content>
173+
<TypeScriptCompile Include="system\screens\OrientationScreen.ts" />
174+
<Content Include="system\screens\OrientationScreen.js">
175+
<DependentUpon>OrientationScreen.ts</DependentUpon>
176+
</Content>
173177
<Content Include="utils\CircleUtils.js">
174178
<DependentUpon>CircleUtils.ts</DependentUpon>
175179
</Content>

‎Phaser/Stage.ts‎

Lines changed: 75 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
/// <reference path="system/StageScaleMode.ts" />
44
/// <reference path="system/screens/BootScreen.ts" />
55
/// <reference path="system/screens/PauseScreen.ts" />
6+
/// <reference path="system/screens/OrientationScreen.ts" />
67

78
/**
89
* Phaser - Stage
@@ -32,7 +33,7 @@ module Phaser {
3233
this.canvas.width = width;
3334
this.canvas.height = height;
3435

35-
if (document.getElementById(parent))
36+
if ((parent !== '' || parent !== null) && document.getElementById(parent))
3637
{
3738
document.getElementById(parent).appendChild(this.canvas);
3839
document.getElementById(parent).style.overflow = 'hidden';
@@ -51,12 +52,13 @@ module Phaser {
5152

5253
this.context = this.canvas.getContext('2d');
5354

54-
this.offset = this.getOffset(this.canvas);
55-
this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height);
56-
this.aspectRatio = width / height;
5755
this.scaleMode = StageScaleMode.NO_SCALE;
5856
this.scale = new StageScaleMode(this._game);
5957

58+
this.getOffset(this.canvas);
59+
this.bounds = new Rectangle(this.offset.x, this.offset.y, width, height);
60+
this.aspectRatio = width / height;
61+
6062
document.addEventListener('visibilitychange', (event) => this.visibilityChange(event), false);
6163
document.addEventListener('webkitvisibilitychange', (event) => this.visibilityChange(event), false);
6264
window.onblur = (event) => this.visibilityChange(event);
@@ -70,22 +72,28 @@ module Phaser {
7072
private _game: Game;
7173

7274
/**
73-
* Background color of the stage (defaults to black)
75+
* Background color of the stage (defaults to black). Set via the public backgroundColor property.
7476
* @type {string}
7577
*/
76-
private _bgColor: string = 'rgb(0,0,0)';
78+
private _backgroundColor: string = 'rgb(0,0,0)';
7779

7880
/**
7981
* This will be displayed when Phaser is started without any default functions or State
8082
* @type {BootScreen}
8183
*/
82-
private _bootScreen;
84+
public bootScreen;
8385

8486
/**
8587
* This will be displayed whenever the game loses focus or the player switches to another browser tab.
8688
* @type {PauseScreen}
8789
*/
88-
private _pauseScreen;
90+
public pauseScreen;
91+
92+
/**
93+
* This will be displayed whenever the device is turned to an unsupported orientation.
94+
* @type {OrientationScreen}
95+
*/
96+
public orientationScreen;
8997

9098
/**
9199
* Bound of this stage.
@@ -155,8 +163,9 @@ module Phaser {
155163
*/
156164
public boot() {
157165

158-
this._bootScreen = new BootScreen(this._game);
159-
this._pauseScreen = new PauseScreen(this._game, this.width, this.height);
166+
this.bootScreen = new BootScreen(this._game);
167+
this.pauseScreen = new PauseScreen(this._game, this.width, this.height);
168+
this.orientationScreen = new OrientationScreen(this._game);
160169

161170
}
162171

@@ -174,16 +183,23 @@ module Phaser {
174183
this.context.clearRect(0, 0, this.width, this.height);
175184
}
176185

186+
if (this._game.paused && this.scale.incorrectOrientation)
187+
{
188+
this.orientationScreen.update();
189+
this.orientationScreen.render();
190+
return;
191+
}
192+
177193
if (this._game.isRunning == false && this.disableBootScreen == false)
178194
{
179-
this._bootScreen.update();
180-
this._bootScreen.render();
195+
this.bootScreen.update();
196+
this.bootScreen.render();
181197
}
182198

183-
if (this._game.paused == true && this.disablePauseScreen == false)
199+
if (this._game.paused && this.disablePauseScreen == false)
184200
{
185-
this._pauseScreen.update();
186-
this._pauseScreen.render();
201+
this.pauseScreen.update();
202+
this.pauseScreen.render();
187203
}
188204

189205
}
@@ -215,17 +231,47 @@ module Phaser {
215231

216232
}
217233

234+
public enableOrientationCheck(forceLandscape: bool, forcePortrait: bool, imageKey?: string = '') {
235+
236+
this.scale.forceLandscape = forceLandscape;
237+
this.scale.forcePortrait = forcePortrait;
238+
this.orientationScreen.enable(forceLandscape, forcePortrait, imageKey);
239+
240+
if (forceLandscape || forcePortrait)
241+
{
242+
if ((this.scale.isLandscape && forcePortrait) || (this.scale.isPortrait && forceLandscape))
243+
{
244+
// They are in the wrong orientation right now
245+
this._game.paused = true;
246+
this.scale.incorrectOrientation = true;
247+
}
248+
else
249+
{
250+
this.scale.incorrectOrientation = false;
251+
}
252+
}
253+
254+
}
255+
218256
public pauseGame() {
219257

220-
this._pauseScreen.onPaused();
258+
if (this.disablePauseScreen == false)
259+
{
260+
this.pauseScreen.onPaused();
261+
}
262+
221263
this.saveCanvasValues();
222264
this._game.paused = true;
223265

224266
}
225267

226268
public resumeGame() {
227269

228-
this._pauseScreen.onResume();
270+
if (this.disablePauseScreen == false)
271+
{
272+
this.pauseScreen.onResume();
273+
}
274+
229275
this.restoreCanvasValues();
230276
this._game.paused = false;
231277

@@ -234,7 +280,7 @@ module Phaser {
234280
/**
235281
* Get the DOM offset values of the given element
236282
*/
237-
private getOffset(element): Point {
283+
public getOffset(element, populateOffset: bool = true): Point {
238284

239285
var box = element.getBoundingClientRect();
240286

@@ -243,7 +289,15 @@ module Phaser {
243289
var scrollTop = window.pageYOffset || element.scrollTop || document.body.scrollTop;
244290
var scrollLeft = window.pageXOffset || element.scrollLeft || document.body.scrollLeft;
245291

246-
return new Point(box.left + scrollLeft - clientLeft, box.top + scrollTop - clientTop);
292+
if (populateOffset)
293+
{
294+
this.offset = new Point(box.left + scrollLeft - clientLeft, box.top + scrollTop - clientTop);
295+
return this.offset;
296+
}
297+
else
298+
{
299+
return new Point(box.left + scrollLeft - clientLeft, box.top + scrollTop - clientTop);
300+
}
247301

248302
}
249303

@@ -289,10 +343,11 @@ module Phaser {
289343

290344
public set backgroundColor(color: string) {
291345
this.canvas.style.backgroundColor = color;
346+
this._backgroundColor = color;
292347
}
293348

294349
public get backgroundColor(): string {
295-
return this._bgColor;
350+
return this._backgroundColor;
296351
}
297352

298353
public get x(): number {

‎Phaser/components/animation/Frame.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ module Phaser {
2222
*/
2323
constructor(x: number, y: number, width: number, height: number, name: string) {
2424

25-
console.log('Creating Frame', name, 'x', x, 'y', y, 'width', width, 'height', height);
25+
//console.log('Creating Frame', name, 'x', x, 'y', y, 'width', width, 'height', height);
2626

2727
this.x = x;
2828
this.y = y;

‎Phaser/components/sprite/Input.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ module Phaser.Components {
258258
}
259259
else
260260
{
261-
return RectangleUtils.contains(this._sprite.frameBounds, pointer.x, pointer.y);
261+
return RectangleUtils.contains(this._sprite.frameBounds, pointer.scaledX, pointer.scaledY);
262262
}
263263

264264
}
@@ -279,10 +279,10 @@ module Phaser.Components {
279279
}
280280
else if (this._pointerData[pointer.id].isOver == true)
281281
{
282-
if (RectangleUtils.contains(this._sprite.frameBounds, pointer.x, pointer.y))
282+
if (RectangleUtils.contains(this._sprite.frameBounds, pointer.scaledX, pointer.scaledY))
283283
{
284-
this._pointerData[pointer.id].x = pointer.x - this._sprite.x;
285-
this._pointerData[pointer.id].y = pointer.y - this._sprite.y;
284+
this._pointerData[pointer.id].x = pointer.scaledX - this._sprite.x;
285+
this._pointerData[pointer.id].y = pointer.scaledY - this._sprite.y;
286286
return true;
287287
}
288288
else
@@ -335,9 +335,11 @@ module Phaser.Components {
335335

336336
public _touchedHandler(pointer: Pointer): bool {
337337

338+
console.log('touched handler', this._pointerData[pointer.id]);
339+
338340
if (this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true)
339341
{
340-
console.log('touchDown on', this._sprite.texture.cacheKey,this._sprite.frameName, this._sprite.frameBounds.width,this._sprite.frameBounds.height);
342+
//console.log('touchDown on', this._sprite.texture.cacheKey,this._sprite.frameName, this._sprite.frameBounds.width,this._sprite.frameBounds.height);
341343
this._pointerData[pointer.id].isDown = true;
342344
this._pointerData[pointer.id].isUp = false;
343345
this._pointerData[pointer.id].timeDown = this.game.time.now;
@@ -360,6 +362,8 @@ module Phaser.Components {
360362

361363
public _releasedHandler(pointer: Pointer) {
362364

365+
console.log('release handler');
366+
363367
// If was previously touched by this Pointer, check if still is
364368
if (this._pointerData[pointer.id].isDown && pointer.isUp)
365369
{
@@ -674,13 +678,13 @@ module Phaser.Components {
674678
*/
675679
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
676680

677-
this._sprite.texture.context.font = '14px Courier';
681+
this._sprite.texture.context.font = '16px Courier';
678682
this._sprite.texture.context.fillStyle = color;
679683
this._sprite.texture.context.fillText('Sprite Input: (' + this._sprite.frameBounds.width + ' x ' + this._sprite.frameBounds.height + ')', x, y);
680-
this._sprite.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
681-
this._sprite.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
682-
this._sprite.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
683-
this._sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
684+
this._sprite.texture.context.fillText('x: ' + this.pointerX(1).toFixed(1) + ' y: ' + this.pointerY(1).toFixed(1), x, y + 14);
685+
this._sprite.texture.context.fillText('over: ' + this.pointerOver(1) + ' duration: ' + this.overDuration(1).toFixed(0), x, y + 28);
686+
this._sprite.texture.context.fillText('down: ' + this.pointerDown(1) + ' duration: ' + this.downDuration(1).toFixed(0), x, y + 42);
687+
this._sprite.texture.context.fillText('just over: ' + this.justOver(1) + ' just out: ' + this.justOut(1), x, y + 56);
684688

685689
}
686690

‎Phaser/input/Input.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -513,17 +513,9 @@ module Phaser {
513513
if (this.pointer10) { this.pointer10.reset(); }
514514

515515
this.currentPointers = 0;
516-
517-
for (var i = 0; i < this.totalTrackedObjects; i++)
518-
{
519-
this.inputObjects[i].input.reset();
520-
}
521-
516+
522517
this._game.stage.canvas.style.cursor = "default";
523518

524-
this.inputObjects.length = 0;
525-
this.totalTrackedObjects = 0;
526-
527519
if (hard == true)
528520
{
529521
this.onDown.dispose();
@@ -535,6 +527,14 @@ module Phaser {
535527
this.onUp = new Phaser.Signal();
536528
this.onTap = new Phaser.Signal();
537529
this.onHold = new Phaser.Signal();
530+
531+
for (var i = 0; i < this.totalTrackedObjects; i++)
532+
{
533+
this.inputObjects[i].input.reset();
534+
}
535+
536+
this.inputObjects.length = 0;
537+
this.totalTrackedObjects = 0;
538538
}
539539

540540
}
@@ -904,7 +904,7 @@ module Phaser {
904904
*/
905905
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
906906

907-
this._game.stage.context.font = '14px Courier';
907+
this._game.stage.context.font = '24px Courier';
908908
this._game.stage.context.fillStyle = color;
909909
this._game.stage.context.fillText('Input', x, y);
910910
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);

‎Phaser/input/Mouse.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ module Phaser {
1313
constructor(game: Game) {
1414

1515
this._game = game;
16+
this.callbackContext = this._game;
1617

1718
}
1819

@@ -34,6 +35,15 @@ module Phaser {
3435
*/
3536
public disabled: bool = false;
3637

38+
/**
39+
* Custom callback useful for hooking into a 3rd party library. Will be passed the mouse event as the only parameter.
40+
* Callbacks are fired even if this component is disabled and before the event propagation is disabled.
41+
*/
42+
public callbackContext;
43+
public mouseDownCallback = null;
44+
public mouseMoveCallback = null;
45+
public mouseUpCallback = null;
46+
3747
/**
3848
* Starts the event listeners running
3949
* @method start
@@ -51,6 +61,11 @@ module Phaser {
5161
*/
5262
public onMouseDown(event: MouseEvent) {
5363

64+
if (this.mouseDownCallback)
65+
{
66+
this.mouseDownCallback.call(this.callbackContext, event);
67+
}
68+
5469
if (this._game.input.disabled || this.disabled)
5570
{
5671
return;
@@ -67,6 +82,11 @@ module Phaser {
6782
*/
6883
public onMouseMove(event: MouseEvent) {
6984

85+
if (this.mouseMoveCallback)
86+
{
87+
this.mouseMoveCallback.call(this.callbackContext, event);
88+
}
89+
7090
if (this._game.input.disabled || this.disabled)
7191
{
7292
return;
@@ -83,6 +103,11 @@ module Phaser {
83103
*/
84104
public onMouseUp(event: MouseEvent) {
85105

106+
if (this.mouseUpCallback)
107+
{
108+
this.mouseUpCallback.call(this.callbackContext, event);
109+
}
110+
86111
if (this._game.input.disabled || this.disabled)
87112
{
88113
return;

0 commit comments

Comments
 (0)