diff --git a/README.md b/README.md index 074802b4..6661da9d 100644 --- a/README.md +++ b/README.md @@ -169,6 +169,12 @@ We also provide a Grunt script that will build Phaser from source along with all Run `grunt` in the phaser folder for a list of command-line options. +Koding +------ + +You can [![clone the Phaser repo in Koding](http://learn.koding.com/btn/clone_d.png)][koding] and then start editing and previewing code right away using their web based VM development system. + + Bower ----- @@ -295,33 +301,37 @@ Although Phaser 1.0 is a brand new release it is born from years of experience b Road Map -------- -The 1.1 release was a massive under-taking, but we're really happy with how Phaser is progressing. It's becoming more solid and versatile with each iteration. Here is what's on our road map for future versions: +The 1.1 release was a massive under-taking, but we're really happy with how Phaser is progressing. It's becoming more solid and versatile with each iteration. Here is what's on our road map: Version 1.2 ("Saldaea") -* Update to Pixi 1.5 - currently still in dev branch only, but lots of nice internal changes and new features we want to take advantage of. -* Start integration with the p2.js physics system. +* Update to Pixi 1.4 - this newly released build has lots of internal changes and new features we want to take advantage of. -Beyond version 1.2 +Version 1.3 ("Shienar") * Enhance the State Management, so you can perform non-destructive State swaps and persistence. * Dedicated CocoonJS packaging features (screencanvas, etc) * A more advanced Particle system, one that can render to a single canvas (rather than spawn hundreds of Sprites), more advanced effects, etc. -* 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. * Ability to control DOM elements from the core game and layer them into the game. * Touch Gestures. -* Virtual d-pad support and also support for the Joypad API. -* Test out packaging with Node-webkit. -* Flash CC HTML5 export integration. -* Game parameters stored in Google Docs. -* Add a d-pad example (http://www.html5gamedevs.com/topic/1574-gameinputondown-question/) -* Create more touch input examples (http://www.html5gamedevs.com/topic/1556-mobile-touch-event/) -* Look at HiDPI Canvas settings. * Support for parallel asset loading. * Fixed width bitmap font support, plus enhanced Bitmap font rendering. +Version 2.0 ("Aes Sedai") + +* Integrate p2.js physics system completely. +* Comprehensive testing across Firefox OS devices, CocoonJS and Ejecta. +* Integration with third party services like Google Play Game Services and Amazon JS SDK. +* Flash CC HTML5 export integration. +* 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. + +Beyond version 2.0 + +* Test out packaging with Node-webkit. +* Game parameters stored in Google Docs. +* Look at HiDPI Canvas settings. +* Multiple Camera support. + Contributing ------------ @@ -354,5 +364,6 @@ Phaser is released under the [MIT License](http://opensource.org/licenses/MIT). [1]: https://github.com/photonstorm/phaser/issues [phaser]: https://github.com/photonstorm/phaser +[koding]: https://koding.com/Teamwork?import=https://github.com/photonstorm/phaser/archive/master.zip&c=git1 [![Analytics](https://ga-beacon.appspot.com/UA-44006568-2/phaser/index)](https://github.com/igrigorik/ga-beacon) diff --git a/examples/wip/circlebox.js b/examples/wip/circlebox.js new file mode 100644 index 00000000..ef87624e --- /dev/null +++ b/examples/wip/circlebox.js @@ -0,0 +1,75 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('wizball', 'assets/sprites/wizball.png'); + game.load.image('platform', 'assets/sprites/interference_tunnel.png'); + +} + +var ball; +var circle; +var platform; + +function create() { + + // Our ball sprite + ball = game.add.sprite(420, 100, 'wizball'); + ball.anchor.setTo(0.5, 0.5); + + ball.body.customSeparateX = true; + ball.body.customSeparateY = true; + + ball.body.velocity.y = 150; + ball.body.bounce.y = 0.9; + + // Our collision circle + circle = new Phaser.Circle(200, 100, 188); + + // Our platform + platform = game.add.sprite(200, 450, 'platform'); + platform.body.immovable = true; + +} + +function update() { + + // ball.x = game.input.x; + // ball.y = game.input.y; + + circle.x = ball.x; + circle.y = ball.y; + + // This is a rect vs. rect collision. The callback will check the circle. + game.physics.overlap(ball, platform, null, processCallback, this); + +} + +function processCallback(a, b) { + + // console.log('p', a.y, b.y); + + if (Phaser.Circle.intersectsRectangle(circle, platform.body)) + { + console.log('boom', ball.body.overlapX, ball.body.overlapY); + // ball.body.x = ball.body.x - ball.body.overlapX; + // ball.body.velocity.x = platform.body.velocity.x - ball.body.velocity.x * ball.body.bounce.x; + + ball.body.y -= 10; + ball.body.velocity.y *= -1 * ball.body.bounce.y; + } + + return true; + +} + +function render() { + + game.debug.renderText(Phaser.Circle.intersectsRectangle(circle, platform.body), 32, 32); + game.debug.renderText(ball.body.velocity.y, 32, 64); + // game.debug.renderText(ball.body.overlapY, 64, 64); + game.debug.renderCircle(circle); + game.debug.renderRectangle(platform.body); + +} diff --git a/resources/Project Templates/Full Screen Mobile/apple-touch-icon.png b/resources/Project Templates/Full Screen Mobile/apple-touch-icon.png new file mode 100644 index 00000000..515a3f39 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/apple-touch-icon.png differ diff --git a/resources/Project Templates/Full Screen Mobile/css/stylesheet.css b/resources/Project Templates/Full Screen Mobile/css/stylesheet.css new file mode 100644 index 00000000..8f2bba97 --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/css/stylesheet.css @@ -0,0 +1,19 @@ +body { + margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */ + background: #000; +} + +#orientation { + margin: 0 auto; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url(../images/orientation.jpg); + background-repeat: no-repeat; + background-position: center; + background-color: rgb(0, 0, 0); + z-index: 999; + display: none; +} diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_1024x1024.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_1024x1024.png new file mode 100644 index 00000000..5d3970c0 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_1024x1024.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_114x114.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_114x114.png new file mode 100644 index 00000000..55135823 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_114x114.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_120x120.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_120x120.png new file mode 100644 index 00000000..a792451d Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_120x120.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_144x144.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_144x144.png new file mode 100644 index 00000000..515a3f39 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_144x144.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_152x152.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_152x152.png new file mode 100644 index 00000000..accf1a85 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_152x152.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_256x256.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_256x256.png new file mode 100644 index 00000000..f3483adb Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_256x256.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_512x512.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_512x512.png new file mode 100644 index 00000000..6a262257 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_512x512.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_57x57.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_57x57.png new file mode 100644 index 00000000..3ede8f9a Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_57x57.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_60x60.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_60x60.png new file mode 100644 index 00000000..b91c98e7 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_60x60.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_72x72.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_72x72.png new file mode 100644 index 00000000..88135b25 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_72x72.png differ diff --git a/resources/Project Templates/Full Screen Mobile/icons/app_icon_76x76.png b/resources/Project Templates/Full Screen Mobile/icons/app_icon_76x76.png new file mode 100644 index 00000000..18b6092b Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/icons/app_icon_76x76.png differ diff --git a/resources/Project Templates/Full Screen Mobile/images/orientation.jpg b/resources/Project Templates/Full Screen Mobile/images/orientation.jpg new file mode 100644 index 00000000..e29185a2 Binary files /dev/null and b/resources/Project Templates/Full Screen Mobile/images/orientation.jpg differ diff --git a/resources/Project Templates/Full Screen Mobile/index.html b/resources/Project Templates/Full Screen Mobile/index.html new file mode 100644 index 00000000..52377721 --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/index.html @@ -0,0 +1,65 @@ + + + + Phaser Full Screen Mobile Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/resources/Project Templates/Full Screen Mobile/src/Boot.js b/resources/Project Templates/Full Screen Mobile/src/Boot.js new file mode 100644 index 00000000..80f96731 --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/src/Boot.js @@ -0,0 +1,86 @@ +BasicGame = { + + /* Here we've just got some global level vars that persist regardless of State swaps */ + score: 0, + + /* If the music in your game needs to play through-out a few State swaps, then you could reference it here */ + music: null, + + /* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */ + orientated: false + +}; + +BasicGame.Boot = function (game) { +}; + +BasicGame.Boot.prototype = { + + preload: function () { + + // Here we load the assets required for our preloader (in this case a background and a loading bar) + this.load.image('preloaderBackground', 'images/preloader_background.jpg'); + this.load.image('preloaderBar', 'images/preloadr_bar.png'); + + }, + + create: function () { + + this.game.input.maxPointers = 1; + this.game.stage.disableVisibilityChange = true; + + if (this.game.device.desktop) + { + this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; + this.game.stage.scale.minWidth = 480; + this.game.stage.scale.minHeight = 260; + this.game.stage.scale.maxWidth = 1024; + this.game.stage.scale.maxHeight = 768; + this.game.stage.scale.pageAlignHorizontally = true; + this.game.stage.scale.pageAlignVertically = true; + this.game.stage.scale.setScreenSize(true); + } + else + { + this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; + this.game.stage.scale.minWidth = 480; + this.game.stage.scale.minHeight = 260; + this.game.stage.scale.maxWidth = 1024; + this.game.stage.scale.maxHeight = 768; + this.game.stage.scale.pageAlignHorizontally = true; + this.game.stage.scale.pageAlignVertically = true; + this.game.stage.scale.forceOrientation(true, false); + this.game.stage.scale.hasResized.add(this.gameResized, this); + this.game.stage.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); + this.game.stage.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); + this.game.stage.scale.setScreenSize(true); + } + + this.game.state.start('Preloader'); + + }, + + gameResized: function (width, height) { + + // This could be handy if you need to do any extra processing if the game resizes. + // A resize could happen if for example swapping orientation on a device. + + }, + + enterIncorrectOrientation: function () { + + BasicGame.orientated = false; + + document.getElementById('orientation').style.display = 'block'; + + }, + + leaveIncorrectOrientation: function () { + + BasicGame.orientated = true; + + document.getElementById('orientation').style.display = 'none'; + + } + +}; \ No newline at end of file diff --git a/resources/Project Templates/Full Screen Mobile/src/Game.js b/resources/Project Templates/Full Screen Mobile/src/Game.js new file mode 100644 index 00000000..6190533d --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/src/Game.js @@ -0,0 +1,51 @@ + +BasicGame.Game = function (game) { + + // When a State is added to Phaser it automatically has the following properties set on it, even if they already exist: + + this.game; // a reference to the currently running game + this.add; // used to add sprites, text, groups, etc + this.camera; // a reference to the game camera + this.cache; // the game cache + this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it) + this.load; // for preloading assets + this.math; // lots of useful common math operations + this.sound; // the sound manager - add a sound, play one, set-up markers, etc + this.stage; // the game stage + this.time; // the clock + this.tweens; // the tween manager + this.world; // the game world + this.particles; // the particle manager + this.physics; // the physics manager + this.rnd; // the repeatable random number generator + + // You can use any of these from any function within this State. + // But do consider them as being 'reserved words', i.e. don't create a property for your own game called "world" or you'll over-write the world reference. + +}; + +BasicGame.Game.prototype = { + + create: function () { + + // Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out! + + }, + + update: function () { + + // Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out! + + }, + + quitGame: function (pointer) { + + // Here you should destroy anything you no longer need. + // Stop music, delete sprites, purge caches, free resources, all that good stuff. + + // Then let's go back to the main menu. + this.game.state.start('MainMenu'); + + } + +}; diff --git a/resources/Project Templates/Full Screen Mobile/src/MainMenu.js b/resources/Project Templates/Full Screen Mobile/src/MainMenu.js new file mode 100644 index 00000000..fe2a1ae1 --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/src/MainMenu.js @@ -0,0 +1,42 @@ + +BasicGame.MainMenu = function (game) { + + this.music = null; + this.playButton = null; + +}; + +BasicGame.MainMenu.prototype = { + + create: function () { + + // We've already preloaded our assets, so let's kick right into the Main Menu itself. + // Here all we're doing is playing some music and adding a picture and button + // Naturally I expect you to do something significantly better :) + + this.music = this.add.audio('titleMusic'); + this.music.play(); + + this.add.sprite(0, 0, 'titlepage'); + + this.playButton = this.add.button(400, 600, 'playButton', this.startGame, this, 'buttonOver', 'buttonOut', 'buttonOver'); + + }, + + update: function () { + + // Do some nice funky main menu effect here + + }, + + startGame: function (pointer) { + + // Ok, the Play Button has been clicked or touched, so let's stop the music (otherwise it'll carry on playing) + this.music.stop(); + + // And start the actual game + this.game.state.start('Game'); + + } + +}; diff --git a/resources/Project Templates/Full Screen Mobile/src/Preloader.js b/resources/Project Templates/Full Screen Mobile/src/Preloader.js new file mode 100644 index 00000000..434061bb --- /dev/null +++ b/resources/Project Templates/Full Screen Mobile/src/Preloader.js @@ -0,0 +1,61 @@ + +BasicGame.Preloader = function (game) { + + this.background = null; + this.preloadBar = null; + + this.ready = false; + +}; + +BasicGame.Preloader.prototype = { + + preload: function () { + + // These are the assets we loaded in Boot.js + // A nice sparkly background and a loading progress bar + this.background = this.add.sprite(0, 0, 'preloaderBackground'); + this.preloadBar = this.add.sprite(300, 400, 'preloaderBar'); + + // This sets the preloadBar sprite as a loader sprite. + // What that does is automatically crop the sprite from 0 to full-width + // as the files below are loaded in. + this.load.setPreloadSprite(this.preloadBar); + + // Here we load the rest of the assets our game needs. + // As this is just a Project Template I've not provided these assets, the lines below won't work as the files themselves will 404, they are just an example of use. + this.load.image('titlepage', 'images/title.jpg'); + this.load.atlas('playButton', 'images/play_button.png', 'images/play_button.json'); + this.load.audio('titleMusic', ['audio/main_menu.mp3']); + this.load.bitmapFont('caslon', 'fonts/caslon.png', 'fonts/caslon.xml'); + // + lots of other required assets here + + }, + + create: function () { + + // Once the load has finished we disable the crop because we're going to sit in the update loop for a short while as the music decodes + this.preloadBar.cropEnabled = false; + + }, + + update: function () { + + // You don't actually need to do this, but I find it gives a much smoother game experience. + // Basically it will wait for our audio file to be decoded before proceeding to the MainMenu. + // You can jump right into the menu if you want and still play the music, but you'll have a few + // seconds of delay while the mp3 decodes - so if you need your music to be in-sync with your menu + // it's best to wait for it to decode here first, then carry on. + + // If you don't have any music in your game then put the game.state.start line into the create function and delete + // the update function completely. + + if (this.cache.isSoundDecoded('titleMusic') && this.ready == false) + { + this.ready = true; + this.game.state.start('MainMenu'); + } + + } + +};