wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-08-13 12:30:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added FullScreen API support and fixed numerous StageScaleMode issues.

Browse Source
This commit is contained in:
Richard Davey
2013-05-14 03:37:38 +01:00
parent 8fc31ed83b
commit ce7bfd1fc2
37 changed files with 11227 additions and 2853 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tests/Tests.csproj
+17 -3
View File
@@ -87,9 +87,7 @@
<TypeScriptCompile Include="sprites\velocity.ts" />
<TypeScriptCompile Include="tilemap\basic tilemap.ts" />
</ItemGroup>
<ItemGroup>
<Folder Include="mobile\" />
</ItemGroup>
<ItemGroup />
<ItemGroup>
<TypeScriptCompile Include="sprites\dynamic texture 1.ts" />
</ItemGroup>
@@ -117,9 +115,25 @@
<Content Include="camera fx\shake.js">
<DependentUpon>shake.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="input\multitouch.ts" />
<Content Include="input\multitouch.js">
<DependentUpon>multitouch.ts</DependentUpon>
</Content>
<Content Include="misc\bootscreen.js">
<DependentUpon>bootscreen.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="mobile\sprite test 1.ts" />
<TypeScriptCompile Include="mobile\bunny mobile.ts" />
<TypeScriptCompile Include="misc\time.ts" />
<Content Include="misc\time.js">
<DependentUpon>time.ts</DependentUpon>
</Content>
<Content Include="mobile\bunny mobile.js">
<DependentUpon>bunny mobile.ts</DependentUpon>
</Content>
<Content Include="mobile\sprite test 1.js">
<DependentUpon>sprite test 1.ts</DependentUpon>
</Content>
<Content Include="scrollzones\ballscroller.js">
<DependentUpon>ballscroller.ts</DependentUpon>
</Content>
Tests/cameras/flash fx.js
-45
View File
@@ -1,45 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('background', 'assets/pics/large-color-wheel.png');
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
myGame.loader.load();
}
var car;
function create() {
myGame.createSprite(0, 0, 'background');
car = myGame.createSprite(400, 300, 'car');
}
function update() {
car.renderDebugInfo(32, 32);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
car.angularVelocity = -200;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
car.angularVelocity = 200;
}
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
var motion = myGame.motion.velocityFromAngle(car.angle, 300);
car.velocity.copyFrom(motion);
}
// Flash when the car hits the edges, a different colour per edge
if(car.x < 0) {
myGame.camera.flash(0xffffff, 1);
car.x = 0;
} else if(car.x > myGame.world.width) {
myGame.camera.flash(0xff0000, 2);
car.x = myGame.world.width - car.width;
}
if(car.y < 0) {
myGame.camera.flash(0xffff00, 2);
car.y = 0;
} else if(car.y > myGame.world.height) {
myGame.camera.flash(0xff00ff, 3);
car.y = myGame.world.height - car.height;
}
}
})();
Tests/cameras/shake fx.js
-45
View File
@@ -1,45 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('background', 'assets/pics/remember-me.jpg');
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
myGame.loader.load();
}
var car;
function create() {
myGame.createSprite(0, 0, 'background');
car = myGame.createSprite(400, 300, 'car');
}
function update() {
myGame.camera.renderDebugInfo(32, 32);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
car.angularVelocity = -200;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
car.angularVelocity = 200;
}
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
var motion = myGame.motion.velocityFromAngle(car.angle, 300);
car.velocity.copyFrom(motion);
}
// Shake the camera when the car hits the edges, a different intensity per edge
if(car.x < 0) {
myGame.camera.shake();
car.x = 0;
} else if(car.x > myGame.world.width) {
myGame.camera.shake(0.02);
car.x = myGame.world.width - car.width;
}
if(car.y < 0) {
myGame.camera.shake(0.07, 1);
car.y = 0;
} else if(car.y > myGame.world.height) {
myGame.camera.shake(0.1);
car.y = myGame.world.height - car.height;
}
}
})();
Tests/index.php
+39 -3
View File
@@ -33,6 +33,13 @@ if (isset($_GET['f']))
$state = substr($_GET['f'], 0, -3);
}
$mobile = false;
if (isset($_GET['m']))
{
$mobile = true;
}
?>
<!DOCTYPE html>
@@ -41,7 +48,20 @@ if (isset($_GET['f']))
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
<title>Phaser Test Runner: <?php echo $state?></title>
<?php
if ($mobile)
{
?>
<link rel="stylesheet" href="phaser-mobile.css" type="text/css" />
<?php
}
else
{
?>
<link rel="stylesheet" href="phaser.css" type="text/css" />
<?php
}
?>
<script src="phaser.js"></script>
<script src="phaser-fx.js"></script>
<?php
@@ -56,8 +76,16 @@ if (isset($_GET['f']))
<body>
<?php
if ($mobile)
{
?>
if ($state)
<div id="game"></div>
<?php
}
if ($state && $mobile == false)
{
?>
@@ -84,13 +112,21 @@ function printJSLinks($dir, $files) {
foreach ($files as $key => $value) {
$value2 = substr($value, 0, -3);
echo "<a href=\"index.php?f=$value&amp;d=$dir\" class=\"button\">$value2</a>";
if ($dir == 'mobile')
{
echo "<a href=\"index.php?f=$value&amp;d=$dir&amp;m=1\" class=\"button\">$value2</a>";
}
else
{
echo "<a href=\"index.php?f=$value&amp;d=$dir\" class=\"button\">$value2</a>";
}
}
}
if ($state == false)
if ($state == false && $mobile == false)
{
?>
Tests/input/mouse scale.js
+2 -2
View File
@@ -4,8 +4,8 @@
var myGame = new Phaser.Game(this, 'game', 320, 240, init, create, update);
function init() {
// This sets a limit on the up-scale
myGame.stage.maxScaleX = 640;
myGame.stage.maxScaleY = 480;
myGame.stage.scale.maxWidth = 640;
myGame.stage.scale.maxHeight = 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 = Phaser.StageScaleMode.SHOW_ALL;
myGame.loader.addImageFile('melon', 'assets/sprites/melon.png');
Tests/input/mouse scale.ts
+3 -2
View File
@@ -8,8 +8,9 @@
function init() {
// This sets a limit on the up-scale
myGame.stage.maxScaleX = 640;
myGame.stage.maxScaleY = 480;
myGame.stage.scale.maxWidth = 640;
myGame.stage.scale.maxHeight = 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 = Phaser.StageScaleMode.SHOW_ALL;
Tests/input/multitouch.js
+16
View File
@@ -0,0 +1,16 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
// Here we create a quite tiny game (320x240 in size)
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
// Tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
}
function create() {
myGame.onRenderCallback = render;
}
function update() {
}
function render() {
}
})();
Tests/input/multitouch.ts
+31
View File
@@ -0,0 +1,31 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
// Here we create a quite tiny game (320x240 in size)
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
// Tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
}
function create() {
myGame.onRenderCallback = render;
}
function update() {
}
function render() {
}
})();
Tests/cameras/fade fx.js → Tests/misc/time.js
+9 -18
View File
@@ -2,17 +2,17 @@
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('background', 'assets/pics/large-color-wheel.png');
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
myGame.loader.addImageFile('car', 'assets/sprites/asteroids_ship.png');
myGame.loader.load();
}
var car;
function create() {
myGame.createSprite(0, 0, 'background');
car = myGame.createSprite(400, 300, 'car');
car = myGame.createSprite(200, 300, 'car');
myGame.onRenderCallback = render;
myGame.stage.context.font = '16px Arial';
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
}
function update() {
car.renderDebugInfo(32, 32);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
@@ -23,20 +23,11 @@
car.angularVelocity = 200;
}
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
var motion = myGame.motion.velocityFromAngle(car.angle, 300);
var motion = myGame.motion.velocityFromAngle(car.angle, 200);
car.velocity.copyFrom(motion);
}
// Fade when the car hits the edges, a different colour per edge
if(car.x < 0) {
myGame.camera.fade(0x330066, 3);
car.x = 0;
} else if(car.x > myGame.world.width) {
myGame.camera.fade(0x000066, 3);
car.x = myGame.world.width - car.width;
}
if(car.y > myGame.world.height) {
myGame.camera.fade(0x000000, 3);
car.y = myGame.world.height - car.height;
}
}
function render() {
myGame.stage.context.fillText(myGame.time.time.toString(), 32, 32);
}
})();
Tests/misc/time.ts
+58
View File
@@ -0,0 +1,58 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('car', 'assets/sprites/asteroids_ship.png');
myGame.loader.load();
}
var car: Phaser.Sprite;
function create() {
car = myGame.createSprite(200, 300, 'car');
myGame.onRenderCallback = render;
myGame.stage.context.font = '16px Arial';
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
}
function update() {
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
car.angularVelocity = -200;
}
else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
car.angularVelocity = 200;
}
if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
{
var motion:Phaser.Point = myGame.motion.velocityFromAngle(car.angle, 200);
car.velocity.copyFrom(motion);
}
}
function render() {
myGame.stage.context.fillText(myGame.time.time.toString(), 32, 32);
}
})();
Tests/mobile/bunny mobile.js
+59
View File
@@ -0,0 +1,59 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 320, 460, init, create, update);
function init() {
myGame.loader.addImageFile('bunny', 'assets/sprites/wabbit.png');
myGame.loader.load();
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
}
var maxX;
var maxY;
var minX;
var minY;
function create() {
minX = 0;
minY = 0;
maxX = myGame.stage.width - 26;
maxY = myGame.stage.height - 37;
myGame.input.touch.touchDown.add(addBunnies, this);
// This will really help on slow Android phones
myGame.framerate = 30;
// Make sure the camera doesn't clip anything
myGame.camera.disableClipping = true;
myGame.onRenderCallback = render;
myGame.stage.context.fillStyle = 'rgb(255,0,0)';
myGame.stage.context.font = '20px Arial';
addBunnies();
}
function addBunnies() {
for(var i = 0; i < 10; i++) {
var tempSprite = myGame.createSprite(myGame.stage.randomX, 0, 'bunny');
tempSprite.velocity.x = -200 + (Math.random() * 400);
tempSprite.velocity.y = 100 + Math.random() * 200;
}
}
function update() {
myGame.world.group.forEach(checkWalls);
}
function render() {
// Note: Displaying canvas text causes a big performance hit on mobile
myGame.stage.context.fillText("fps: " + myGame.time.fps.toString(), 0, 32);
}
function checkWalls(bunny) {
if(bunny.x > maxX) {
bunny.velocity.x *= -1;
bunny.x = maxX;
} else if(bunny.x < minX) {
bunny.velocity.x *= -1;
bunny.x = minX;
}
if(bunny.y > maxY) {
bunny.velocity.y *= -0.8;
bunny.y = maxY;
} else if(bunny.y < minY) {
bunny.velocity.x = -200 + (Math.random() * 400);
bunny.velocity.y = 100 + Math.random() * 200;
bunny.y = minY;
}
}
})();
Tests/mobile/bunny mobile.ts
+95
View File
@@ -0,0 +1,95 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 320, 460, init, create, update);
function init() {
myGame.loader.addImageFile('bunny', 'assets/sprites/wabbit.png');
myGame.loader.load();
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
}
var maxX: number;
var maxY: number;
var minX: number;
var minY: number;
function create() {
minX = 0;
minY = 0;
maxX = myGame.stage.width - 26;
maxY = myGame.stage.height - 37;
myGame.input.touch.touchDown.add(addBunnies, this);
// This will really help on slow Android phones
myGame.framerate = 30;
// Make sure the camera doesn't clip anything
myGame.camera.disableClipping = true;
myGame.onRenderCallback = render;
myGame.stage.context.fillStyle = 'rgb(255,0,0)';
myGame.stage.context.font = '20px Arial';
addBunnies();
}
function addBunnies() {
for (var i = 0; i < 10; i++)
{
var tempSprite = myGame.createSprite(myGame.stage.randomX, 0, 'bunny');
tempSprite.velocity.x = -200 + (Math.random() * 400);
tempSprite.velocity.y = 100 + Math.random() * 200;
}
}
function update() {
myGame.world.group.forEach(checkWalls);
}
function render() {
// Note: Displaying canvas text causes a big performance hit on mobile
myGame.stage.context.fillText("fps: " + myGame.time.fps.toString(), 0, 32);
}
function checkWalls(bunny:Phaser.Sprite) {
if (bunny.x > maxX)
{
bunny.velocity.x *= -1;
bunny.x = maxX;
}
else if (bunny.x < minX)
{
bunny.velocity.x *= -1;
bunny.x = minX;
}
if (bunny.y > maxY)
{
bunny.velocity.y *= -0.8;
bunny.y = maxY;
}
else if (bunny.y < minY)
{
bunny.velocity.x = -200 + (Math.random() * 400);
bunny.velocity.y = 100 + Math.random() * 200;
bunny.y = minY;
}
}
})();
Tests/mobile/sprite test 1.js
+46
View File
@@ -0,0 +1,46 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 320, 400, init, create);
var emitter;
function init() {
myGame.loader.addImageFile('backdrop1', 'assets/pics/atari_fujilogo.png');
myGame.loader.addImageFile('backdrop2', 'assets/pics/acryl_bladerunner.png');
myGame.loader.addImageFile('jet', 'assets/sprites/carrot.png');
myGame.loader.load();
// This can help a lot on crappy old Android phones :)
//myGame.framerate = 30;
myGame.stage.backgroundColor = 'rgb(50,50,50)';
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
//myGame.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT;
//myGame.stage.scaleMode = Phaser.StageScaleMode.NO_SCALE;
}
var pic1;
var pic2;
function create() {
pic1 = myGame.createSprite(0, 0, 'backdrop1');
pic2 = myGame.createSprite(0, 0, 'backdrop2');
// Creates a basic emitter, bursting out 50 default sprites (i.e. 16x16 white boxes)
emitter = myGame.createEmitter(myGame.stage.centerX, myGame.stage.centerY);
emitter.makeParticles('jet', 50, 0, false, 0);
emitter.setRotation(0, 0);
emitter.start(false, 10, 0.1);
// Make sure the camera doesn't clip anything
myGame.camera.disableClipping = true;
myGame.stage.scale.enterLandscape.add(goneLandscape, this);
myGame.stage.scale.enterPortrait.add(gonePortrait, this);
myGame.onRenderCallback = render;
}
function goneLandscape() {
pic1.visible = true;
pic2.visible = false;
}
function gonePortrait() {
pic1.visible = false;
pic2.visible = true;
}
function render() {
myGame.stage.context.fillStyle = 'rgb(255,0,0)';
myGame.stage.context.font = '20px Arial';
//myGame.stage.context.fillText("ttc: " + myGame._raf.timeToCall.toString(), 0, 64);
}
})();
Tests/mobile/sprite test 1.ts
+73
View File
@@ -0,0 +1,73 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 320, 400, init, create);
var emitter: Phaser.Emitter;
function init() {
myGame.loader.addImageFile('backdrop1', 'assets/pics/atari_fujilogo.png');
myGame.loader.addImageFile('backdrop2', 'assets/pics/acryl_bladerunner.png');
myGame.loader.addImageFile('jet', 'assets/sprites/carrot.png');
myGame.loader.load();
// This can help a lot on crappy old Android phones :)
//myGame.framerate = 30;
myGame.stage.backgroundColor = 'rgb(50,50,50)';
myGame.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
//myGame.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT;
//myGame.stage.scaleMode = Phaser.StageScaleMode.NO_SCALE;
}
var pic1;
var pic2;
function create() {
pic1 = myGame.createSprite(0, 0, 'backdrop1');
pic2 = myGame.createSprite(0, 0, 'backdrop2');
// Creates a basic emitter, bursting out 50 default sprites (i.e. 16x16 white boxes)
emitter = myGame.createEmitter(myGame.stage.centerX, myGame.stage.centerY);
emitter.makeParticles('jet', 50, 0, false, 0);
emitter.setRotation(0, 0);
emitter.start(false, 10, 0.1);
// Make sure the camera doesn't clip anything
myGame.camera.disableClipping = true;
myGame.stage.scale.enterLandscape.add(goneLandscape, this);
myGame.stage.scale.enterPortrait.add(gonePortrait, this);
myGame.onRenderCallback = render;
}
function goneLandscape() {
pic1.visible = true;
pic2.visible = false;
}
function gonePortrait() {
pic1.visible = false;
pic2.visible = true;
}
function render() {
myGame.stage.context.fillStyle = 'rgb(255,0,0)';
myGame.stage.context.font = '20px Arial';
//myGame.stage.context.fillText("ttc: " + myGame._raf.timeToCall.toString(), 0, 64);
}
})();
Tests/phaser-fx.js
+4 -6
View File
@@ -137,8 +137,8 @@ var Phaser;
/**
* Phaser - FX - Camera - Mirror
*
* A Template FX file you can use to create your own Camera FX.
* If you don't use any of the methods below (i.e. preUpdate, render, etc) then DELETE THEM to avoid un-necessary calls by the FXManager.
* Creates a mirror effect for a camera.
* Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
*/
(function (Camera) {
var Mirror = (function () {
@@ -159,7 +159,7 @@ var Phaser;
* It is rendered to the Stage at Mirror.x/y (note the use of Stage coordinates, not World coordinates)
*/
function (x, y, region, fillColor) {
if (typeof fillColor === "undefined") { fillColor = 'rgba(0,0,100,0.5)'; }
if (typeof fillColor === "undefined") { fillColor = 'rgba(0, 0, 100, 0.5)'; }
this.x = x;
this.y = y;
this._mirrorX = region.x;
@@ -199,7 +199,6 @@ var Phaser;
if(this._mirrorColor) {
this._context.fillRect(0, 0, this._mirrorWidth, this._mirrorHeight);
}
//this._game.stage.context.save();
if(this.flipX && this.flipY) {
this._game.stage.context.transform(-1, 0, 0, -1, this._mirrorWidth, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, -this.x, -this.y);
@@ -210,8 +209,7 @@ var Phaser;
this._game.stage.context.transform(1, 0, 0, -1, 0, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, this.x, -this.y);
}
//this._game.stage.context.restore();
};
};
return Mirror;
})();
Camera.Mirror = Mirror;
Tests/phaser-mobile.css
+22
View File
@@ -0,0 +1,22 @@
body
{
background: #000000;
color: white;
font: 1em/2em Arial, Helvetica;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0;
}
* {
user-select: none;
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Tests/phaser.css
+5
View File
@@ -25,6 +25,11 @@
padding: 16px;
}
:-webkit-full-screen {
width: 100%;
height: 100%;
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 30pt;
Tests/phaser.js
+3195 -968
View File
File diff suppressed because it is too large Load Diff
Tests/scrollzones/blasteroids.js
+4
View File
@@ -34,6 +34,10 @@
ship = myGame.createSprite(myGame.stage.centerX, myGame.stage.centerY, 'nashwan');
// We do this because the ship was drawn facing up, but 0 degrees is pointing to the right
ship.rotationOffset = 90;
myGame.input.onDown.add(test, this);
}
function test(event) {
myGame.stage.scale.startFullScreen();
}
function update() {
ship.angularVelocity = 0;
Tests/scrollzones/blasteroids.ts
+8
View File
@@ -51,6 +51,14 @@
// We do this because the ship was drawn facing up, but 0 degrees is pointing to the right
ship.rotationOffset = 90;
myGame.input.onDown.add(test, this);
}
function test(event) {
myGame.stage.scale.startFullScreen();
}
function update() {