diff --git a/README.md b/README.md index 7ad7ace2..5723cf80 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ By Richard Davey, [Photon Storm](http://www.photonstorm.com) View the [Official Website](http://phaser.io)
Follow on [Twitter](https://twitter.com/photonstorm)
Join the [Forum](http://www.html5gamedevs.com/forum/14-phaser/)
-Try out 160+ [Phaser Examples](http://gametest.mobi/phaser/examples/) +Try out 170+ [Phaser Examples](http://gametest.mobi/phaser/examples/) [Subscribe to our new Phaser Newsletter](https://confirmsubscription.com/h/r/369DE48E3E86AF1E). We'll email you when new versions are released as well as send you our regular Phaser game making magazine. @@ -47,10 +47,9 @@ Version 1.1.4 - "Kandor" - In development New features: * Added a stage.fullScreenScaleMode property to determine scaling when fullscreen (thanks oysterCrusher) -* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe) * Added support for margin and spacing around a frame in Loader.spritesheet. * Added Device.vibration to check if the Vibration API is available or not. -* Added Device.trident and Device.tridentVersion for testing IE11 and forced IE11 to Canvas renderer until pixi updates to support it. +* Added Device.trident and Device.tridentVersion for testing IE11. New Examples: @@ -59,6 +58,8 @@ New Examples: * Physics - Bounce accelerator (use the keyboard) by Patrick OReilly. * Physics - Bounce knock (use the keyboard) by Patrick OReilly. * Physics - Snake (use the keyboard to control the snake like creature) by Patrick OReilly and Richard Davey. +* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe) +* Games - Matching Pairs by Patrick OReilly. Updates: @@ -72,6 +73,10 @@ Updates: * separateY updated to re-implement the 'riding platforms' special condition (thanks cocoademon) * SoundManager.onSoundDecode now dispatches the key followed by the sound object, also now dispatched by the Cache when doing an auto-decode on load. * Switch method of using trimmed sprites to support scaling and rotation (thanks cocoademon) +* Most of the GameObjectFactory functions now have a group parameter, so you can do: game.add.sprite(x, y, frame, frameName, group) rather than defaulting to the World group. +* Group.countLiving and countDead used to return -1 if the Group was empty, but now return 0. +* Text can now be fixedToCamera, updated world/fixed to camera example to show this. + Bug Fixes: @@ -203,11 +208,13 @@ Version 1.1.4 ("Kandor") Versions 1.2 ("Saldaea") -* Integration with an advanced physics system. We've been experimenting with p2.js but have yet to conclude our research. +* Integration with the p2.js physics system. + +Beyond version 1.2 + +* Dedicated CocoonJS packaging features (screencanvas, etc) +* The ability to pass in a configuration option on Game boot, containing more advanced configuration features. * A more advanced Particle system, one that can render to a single canvas (rather than spawn hundreds of Sprites), more advanced effects, etc. - -Version 1.2+ - * Massively enhance the audio side of Phaser. Although it does what it does well, it could do with taking more advantage of Web Audio - echo effects, positional sound, etc. * Comprehensive testing across Firefox OS devices, CocoonJS and Ejecta. * Integration with third party services like Google Play Game Services and Amazon JS SDK. @@ -225,7 +232,7 @@ Version 1.2+ Learn By Example ---------------- -Phaser comes with an ever growing suite of Examples. Personally I feel that we learn better by looking at small refined code examples, so we created over 150 of them and create new ones to test every new feature added. Inside the `examples` folder you'll find the current set. If you write a particularly good example then please send it to us. +Phaser comes with an ever growing suite of Examples. Personally I feel that we learn better by looking at small refined code examples, so we created over 170 of them and create new ones to test every new feature added. Inside the `examples` folder you'll find the current set. If you write a particularly good example then please send it to us. The examples need to be run through a local web server (in order to avoid file access permission errors from your browser). You can use your own web server, or start the included web server using grunt. diff --git a/examples/games/matching pairs.js b/examples/games/matching pairs.js new file mode 100644 index 00000000..701280e3 --- /dev/null +++ b/examples/games/matching pairs.js @@ -0,0 +1,223 @@ +// mods by Patrick OReilly +// Twitter: @pato_reilly Web: http://patricko.byethost9.com + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.tilemap('matching', 'assets/maps/phaser_tiles.json', null, Phaser.Tilemap.TILED_JSON); + game.load.tileset('tiles', 'assets/tiles/phaser_tiles.png', 100, 100, -1, 1, 1); + +} + +var timeCheck = 0; +var flipFlag = false; + +var startList = new Array(); +var squareList = new Array(); + +var masterCounter = 0; +var squareCounter = 0; +var square1Num; +var square2Num; +var savedSquareX1; +var savedSquareY1; +var savedSquareX2; +var savedSquareY2; + +var map; +var tileset; +var layer; + +var marker; +var currentTile; +var currentTilePosition; + +var tileBack = 25; +var timesUp = '+'; +var youWin = '+'; + +function create() { + + map = game.add.tilemap('matching'); + + tileset = game.add.tileset('tiles'); + + layer = game.add.tilemapLayer(0, 0, 600, 600, tileset, map, 0); + + marker = game.add.graphics(); + marker.lineStyle(2, 0x00FF00, 1); + marker.drawRect(0, 0, 100, 100); + + randomizeTiles(); + +} + +function update() { + + countDownTimer(); + + if (layer.getTileX(game.input.activePointer.worldX) <= 5) // to prevent the marker from going out of bounds + { + marker.x = layer.getTileX(game.input.activePointer.worldX) * 100; + marker.y = layer.getTileY(game.input.activePointer.worldY) * 100; + } + + if (flipFlag == true) + { + if (game.time.now - timeCheck > 1000) + { + flipBack(); + } + } + else + { + processClick(); + } + +} + +function countDownTimer() { + + var timeLimit = 120; + + myTime = game.time.now; + mySeconds = parseInt(myTime / 1000); + myCountdownSeconds = timeLimit - mySeconds; + + if (myCountdownSeconds <= 0) + { + // time is up + timesUp = 'Time is up!'; + } + +} + +function processClick() { + + currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)); + currentTilePosition = ((layer.getTileY(game.input.activePointer.worldY) + 1) * 6) - (6 - (layer.getTileX(game.input.activePointer.worldX) + 1)); + + if (game.input.mousePointer.isDown) + { + // check to make sure the tile is not already flipped + if (currentTile == tileBack) + { + // get the corresponding item out of squareList + currentNum = squareList[currentTilePosition - 1]; + flipOver(); + squareCounter++; + + // is the second tile of pair flipped? + if (squareCounter == 2) + { + // reset squareCounter + squareCounter = 0; + square2Num = currentNum; + + // check for match + if (square1Num == square2Num) + { + masterCounter++; + + if (masterCounter == 18) + { + // go "win" + youWin = 'Got them all!'; + } + } + else + { + savedSquareX2 = layer.getTileX(marker.x); + savedSquareY2 = layer.getTileY(marker.y); + flipFlag = true; + timeCheck = game.time.now; + } + } + else + { + savedSquareX1 = layer.getTileX(marker.x); + savedSquareY1 = layer.getTileY(marker.y); + square1Num = currentNum; + } + } + } +} + +function flipOver() { + + map.putTile(currentNum, layer.getTileX(marker.x), layer.getTileY(marker.y)); +} + +function flipBack() { + + flipFlag = false; + + map.putTile(tileBack, savedSquareX1, savedSquareY1); + map.putTile(tileBack, savedSquareX2, savedSquareY2); + +} + +function randomizeTiles() { + + for (num = 1; num <= 18; num++) + { + startList.push(num); + } + + for (num = 1; num <= 18; num++) + { + startList.push(num); + } + + // for debugging + myString1 = startList.toString(); + + // randomize squareList + for (i = 1; i <= 36; i++) + { + randomPosition = game.rnd.integerInRange(0, startList.length); + + thisNumber = startList[randomPosition]; + + squareList.push(thisNumber); + + a = startList.indexOf(thisNumber); + + startList.splice(a, 1); + } + + // for debugging + myString2 = squareList.toString(); + + for (col = 0; col < 6; col++) + { + for (row = 0; row < 6; row++) + { + map.putTile(tileBack, col, row); + } + } +} + +function getHiddenTile() { + + thisTile = squareList[currentTilePosition - 1]; + return thisTile; +} + +function render() { + + game.debug.renderText(timesUp, 620, 208, 'rgb(0,255,0)'); + game.debug.renderText(youWin, 620, 240, 'rgb(0,255,0)'); + + game.debug.renderText('Time: ' + myCountdownSeconds, 620, 15, 'rgb(0,255,0)'); + game.debug.renderText('Matched Pairs: ' + masterCounter, 620, 304, 'rgb(0,0,255)'); + game.debug.renderText('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 620, 48, 'rgb(255,0,0)'); + + game.debug.renderText('LayerX: ' + layer.getTileX(marker.x), 620, 80, 'rgb(255,0,0)'); + game.debug.renderText('LayerY: ' + layer.getTileY(marker.y), 620, 112, 'rgb(255,0,0)'); + + game.debug.renderText('Tile Position: ' + currentTilePosition, 620, 144, 'rgb(255,0,0)'); + game.debug.renderText('Hidden Tile: ' + getHiddenTile(), 620, 176, 'rgb(255,0,0)'); + +} diff --git a/examples/wip/pivot.js b/examples/wip/pivot.js index 3bc4b2ed..d0e27548 100644 --- a/examples/wip/pivot.js +++ b/examples/wip/pivot.js @@ -4,25 +4,22 @@ function preload() { game.load.image('atari', 'assets/sprites/atari130xe.png'); game.load.image('mushroom', 'assets/sprites/mushroom2.png'); + game.load.image('ball', 'assets/sprites/pangball.png'); } var sprite1; -var sprite2; +// var sprite2; function create() { game.stage.backgroundColor = '#2d2d2d'; - // This will check Sprite vs. Sprite collision + sprite1 = game.add.sprite(300, 300, 'ball'); - sprite1 = game.add.sprite(300, 300, 'atari'); - sprite1.name = 'atari'; - sprite1.body.immovable = true; - - sprite1.anchor.setTo(0.5, 0.5); - sprite1.pivot.x = 250; - sprite1.pivot.y = 300; + sprite1.anchor.setTo(0, 1); + sprite1.pivot.x = 100; + sprite1.pivot.y = 100; // sprite2 = game.add.sprite(0, 0, 'mushroom'); // sprite2.name = 'mushroom'; @@ -32,8 +29,8 @@ function create() { function update() { sprite1.angle += 1; - sprite1.pivot.x = game.input.x; - sprite1.pivot.y = game.input.y; + // sprite1.pivot.x = game.input.x; + // sprite1.pivot.y = game.input.y; } @@ -42,7 +39,7 @@ function render() { game.debug.renderPixel(sprite1.pivot.x, sprite1.pivot.y); // game.debug.renderSpriteInfo(sprite1, 100, 400); - game.debug.renderSpriteBounds(sprite1); + // game.debug.renderSpriteBounds(sprite1); // game.debug.renderSpriteInfo(sprite2, 100, 100); // game.debug.renderSpriteBounds(sprite2); } diff --git a/examples/world/fixed to camera.js b/examples/world/fixed to camera.js index 54ee0372..744bdd15 100644 --- a/examples/world/fixed to camera.js +++ b/examples/world/fixed to camera.js @@ -18,20 +18,29 @@ var logo2; function create() { // Modify the world and camera bounds - game.world.setBounds(-1000, -1000, 1000, 1000); + game.world.setBounds(-1000, -1000, 2000, 2000); for (var i = 0; i < 200; i++) { game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom'); } - logo1 = game.add.sprite(100, 100, 'phaser'); + game.add.text(0, 0, "this text scrolls\nwith the background", { font: "32px Arial", fill: "#f26c4f", align: "center" }); + + logo1 = game.add.sprite(0, 0, 'phaser'); logo1.fixedToCamera = true; + logo1.cameraOffset.setTo(100, 100); - logo2 = game.add.sprite(500, 100, 'phaser'); + logo2 = game.add.sprite(0, 0, 'phaser'); logo2.fixedToCamera = true; + logo2.cameraOffset.setTo(500, 100); - game.add.tween(logo2).to( { y: 400 }, 2000, Phaser.Easing.Back.InOut, true, 0, 2000, true); + + var t = game.add.text(0, 0, "this text is fixed to the camera", { font: "32px Arial", fill: "#ffffff", align: "center" }); + t.fixedToCamera = true; + t.cameraOffset.setTo(200, 500); + + game.add.tween(logo2.cameraOffset).to( { y: 400 }, 2000, Phaser.Easing.Back.InOut, true, 0, 2000, true); cursors = game.input.keyboard.createCursorKeys(); diff --git a/src/core/Game.js b/src/core/Game.js index e5c98507..0f9f3618 100644 --- a/src/core/Game.js +++ b/src/core/Game.js @@ -30,8 +30,8 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant parent = parent || ''; state = state || null; - if (typeof transparent == 'undefined') { transparent = false; } - if (typeof antialias == 'undefined') { antialias = true; } + if (typeof transparent === 'undefined') { transparent = false; } + if (typeof antialias === 'undefined') { antialias = true; } /** * @property {number} id - Phaser Game ID (for when Pixi supports multiple instances). @@ -43,8 +43,6 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant */ this.parent = parent; - // Do some more intelligent size parsing here, so they can set "100%" for example, maybe pass the scale mode in here too? - /** * @property {number} width - The Game width (in pixels). */ @@ -372,11 +370,13 @@ Phaser.Game.prototype = { */ setUpRenderer: function () { + /* if (this.device.trident) { - // Until Pixi works with IE11 + // Pixi WebGL renderer on IE11 doesn't work correctly with masks, if you need them you may want to comment this block out this.renderType = Phaser.CANVAS; } + */ if (this.renderType === Phaser.HEADLESS || this.renderType === Phaser.CANVAS || (this.renderType === Phaser.AUTO && this.device.webGL === false)) { diff --git a/src/core/Group.js b/src/core/Group.js index 6e23200f..76c062c1 100644 --- a/src/core/Group.js +++ b/src/core/Group.js @@ -1044,12 +1044,13 @@ Phaser.Group.prototype = { * @param {number} returnType - How to return the data from this method. Either Phaser.Group.RETURN_NONE, Phaser.Group.RETURN_TOTAL or Phaser.Group.RETURN_CHILD. * @param {function} [callback=null] - Optional function that will be called on each matching child. Each child of the Group will be passed to it as its first parameter. * @param {Object} [callbackContext] - The context in which the function should be called (usually 'this'). + * @return {any} Returns either a numeric total (if RETURN_TOTAL was specified) or the child object. */ iterate: function (key, value, returnType, callback, callbackContext, args) { if (returnType === Phaser.Group.RETURN_TOTAL && this._container.children.length === 0) { - return -1; + return 0; } if (typeof callback === 'undefined') @@ -1145,7 +1146,7 @@ Phaser.Group.prototype = { * Call this function to find out how many members of the group are alive. * * @method Phaser.Group#countLiving - * @return {number} The number of children flagged as alive. Returns -1 if Group is empty. + * @return {number} The number of children flagged as alive. */ countLiving: function () { @@ -1157,7 +1158,7 @@ Phaser.Group.prototype = { * Call this function to find out how many members of the group are dead. * * @method Phaser.Group#countDead - * @return {number} The number of children flagged as dead. Returns -1 if Group is empty. + * @return {number} The number of children flagged as dead. */ countDead: function () { diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 4996b334..f3cf7925 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -47,15 +47,19 @@ Phaser.GameObjectFactory.prototype = { * @param {number} y - Y position of the new sprite. * @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture. * @param {string|number} [frame] - If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @returns {Phaser.Sprite} the newly created sprite object. */ - sprite: function (x, y, key, frame) { + sprite: function (x, y, key, frame, group) { - return this.world.create(x, y, key, frame); + if (typeof group === 'undefined') { group = this.world; } + + return group.create(x, y, key, frame); }, /** + * DEPRECATED - will be removed in Phaser 1.2 * Create a new Sprite with specific position and sprite sheet key that will automatically be added as a child of the given parent. * * @method Phaser.GameObjectFactory#child @@ -125,11 +129,14 @@ Phaser.GameObjectFactory.prototype = { * @param {number} height - the height of the tilesprite. * @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture. * @param {string|number} frame - If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.TileSprite} The newly created tileSprite object. */ - tileSprite: function (x, y, width, height, key, frame) { + tileSprite: function (x, y, width, height, key, frame, group) { - return this.world.add(new Phaser.TileSprite(this.game, x, y, width, height, key, frame)); + if (typeof group === 'undefined') { group = this.world; } + + return group.add(new Phaser.TileSprite(this.game, x, y, width, height, key, frame)); }, @@ -141,11 +148,14 @@ Phaser.GameObjectFactory.prototype = { * @param {number} y - Y position of the new text object. * @param {string} text - The actual text that will be written. * @param {object} style - The style object containing style attributes like font, font size , etc. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.Text} The newly created text object. */ - text: function (x, y, text, style) { + text: function (x, y, text, style, group) { - return this.world.add(new Phaser.Text(this.game, x, y, text, style)); + if (typeof group === 'undefined') { group = this.world; } + + return group.add(new Phaser.Text(this.game, x, y, text, style)); }, @@ -161,11 +171,14 @@ Phaser.GameObjectFactory.prototype = { * @param {string|number} [overFrame] This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name. * @param {string|number} [outFrame] This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name. * @param {string|number} [downFrame] This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.Button} The newly created button object. */ - button: function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) { + button: function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, group) { - return this.world.add(new Phaser.Button(this.game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame)); + if (typeof group === 'undefined') { group = this.world; } + + return group.add(new Phaser.Button(this.game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame)); }, @@ -175,11 +188,14 @@ Phaser.GameObjectFactory.prototype = { * @method Phaser.GameObjectFactory#graphics * @param {number} x - X position of the new graphics object. * @param {number} y - Y position of the new graphics object. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.Graphics} The newly created graphics object. */ - graphics: function (x, y) { + graphics: function (x, y, group) { - return this.world.add(new Phaser.Graphics(this.game, x, y)); + if (typeof group === 'undefined') { group = this.world; } + + return group.add(new Phaser.Graphics(this.game, x, y)); }, @@ -208,9 +224,12 @@ Phaser.GameObjectFactory.prototype = { * @param {number} y - Y position of the new bitmapText object. * @param {string} text - The actual text that will be written. * @param {object} style - The style object containing style attributes like font, font size , etc. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.BitmapText} The newly created bitmapText object. */ - bitmapText: function (x, y, text, style) { + bitmapText: function (x, y, text, style, group) { + + if (typeof group === 'undefined') { group = this.world; } return this.world.add(new Phaser.BitmapText(this.game, x, y, text, style)); @@ -250,11 +269,14 @@ Phaser.GameObjectFactory.prototype = { * @param {number} y - Y position of the new tilemapLayer. * @param {number} width - the width of the tilemapLayer. * @param {number} height - the height of the tilemapLayer. + * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @return {Phaser.TilemapLayer} The newly created tilemaplayer object. */ - tilemapLayer: function (x, y, width, height, tileset, tilemap, layer) { + tilemapLayer: function (x, y, width, height, tileset, tilemap, layer, group) { - return this.world.add(new Phaser.TilemapLayer(this.game, x, y, width, height, tileset, tilemap, layer)); + if (typeof group === 'undefined') { group = this.world; } + + return group.add(new Phaser.TilemapLayer(this.game, x, y, width, height, tileset, tilemap, layer)); }, diff --git a/src/gameobjects/Text.js b/src/gameobjects/Text.js index aa20c490..f85a7006 100644 --- a/src/gameobjects/Text.js +++ b/src/gameobjects/Text.js @@ -90,6 +90,18 @@ Phaser.Text = function (game, x, y, text, style) { */ this.scale = new Phaser.Point(1, 1); + /** + * An object that is fixed to the camera ignores the position of any ancestors in the display list and uses its x/y coordinates as offsets from the top left of the camera. + * @property {boolean} fixedToCamera - Fixes this object to the Camera. + * @default + */ + this.fixedToCamera = false; + + /** + * @property {Phaser.Point} cameraOffset - If this Sprite is fixed to the camera then use this Point to specify how far away from the Camera x/y it's rendered. + */ + this.cameraOffset = new Phaser.Point(); + /** * @property {object} _cache - A mini cache for storing all of the calculated values. * @private @@ -141,6 +153,12 @@ Phaser.Text.prototype.update = function() { return; } + if (this.fixedToCamera) + { + this.x = this.game.camera.view.x + this.cameraOffset.x; + this.y = this.game.camera.view.y + this.cameraOffset.y; + } + this._cache.dirty = false; this._cache.x = this.x;