Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 07:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Final version of the Getting Started guide.

Browse source
This commit is contained in:
photonstorm 2013-11-29 18:28:55 +00:00
parent f9b82b66db
commit d9ffd6afd4
16 changed files with 263 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
README.md
View file

@ -5,22 +5,19 @@ Phaser 1.1
Phaser is a fast, free and fun open source game framework for making desktop and mobile browser HTML5 games. It uses [Pixi.js](https://github.com/GoodBoyDigital/pixi.js/) internally for fast 2D Canvas and WebGL rendering.
Version: 1.1.3 - Released: November 29th 2013
Version: 1.1.3 "Arafel" - Released: November 29th 2013
By Richard Davey, [Photon Storm](http://www.photonstorm.com)
View the [Official Website](http://phaser.io)<br />
Follow on [Twitter](https://twitter.com/photonstorm)<br />
Read the [Development Blog](http://www.photonstorm.com)<br />
Join the [Forum](http://www.html5gamedevs.com/forum/14-phaser/)<br />
Try out 150+ [Phaser Examples](http://gametest.mobi/phaser/examples/)
Try out 160+ [Phaser Examples](http://gametest.mobi/phaser/examples/)
[Un-official Getting Started with Phaser](http://www.antonoffplus.com/coding-an-html5-game-for-30-minutes-or-an-introduction-to-the-phaser-framework)
[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.
"Being negative is not how we make progress" - Larry Page, Google
Welcome to Phaser
-----------------
@ -36,10 +33,15 @@ Phaser is everything we ever wanted from an HTML5 game framework. It powers all
![MiniCybernoid](http://www.photonstorm.com/wp-content/uploads/2013/10/phaser-cybernoid-640x480.png)
Getting Started Guide
---------------------
We have a new [Getting Started Guide](http://phaser.io/getting-started-js.php) which covers all you need to begin developing games with Phaser. From setting up a web server to picking an IDE. If you're new to HTML5 game development (or are coming from another language like AS3) then we recommend starting there.
Change Log
----------
Version 1.1.3 - November 29th 2013
Version 1.1.3 - "Arafel" - November 29th 2013
* New: Added a .jshintrc so contributions can be run through JSHint to help retain formatting across the library (thanks kevinthompson)
* New: The entire Phaser library has been updated to match the new JSHint configuration.
@ -200,9 +202,18 @@ 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:
Version 1.1.4 ("Kandor")
* Enhance the State Management, so you can perform non-destructive State swaps and persistence.
* More advanced tile map features. Better support for advanced Tiled features. Proper support for DAME tilemaps.
Versions 1.2 ("Saldaea")
* Integration with an advanced physics system. We've been experimenting with p2.js but have yet to conclude our research.
* 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.
@ -212,7 +223,6 @@ The 1.1 release was a massive under-taking, but we're really happy with how Phas
* Test out packaging with Node-webkit.
* Flash CC HTML5 export integration.
* Game parameters stored in Google Docs.
* More advanced tile map features. Better support for advanced Tiled features and also I want to add full support for DAME tilemaps.
* 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.
@ -252,6 +262,8 @@ Please add them to the [Issue Tracker][1] with as much info as possible, especia
![Phaser Tilemap](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_tilemap_collision.png)
"Being negative is not how we make progress" - Larry Page, Google
License
-------

201
build/phaser.js
View file

@ -18,7 +18,7 @@
*
* Phaser - http://www.phaser.io
*
* v1.1.3 - Built at: Thu Nov 28 2013 14:52:32
* v1.1.3 - Built at: Fri Nov 29 2013 18:20:59
*
* By Richard Davey http://www.photonstorm.com @photonstorm
*
@ -9617,13 +9617,13 @@ Phaser.LinkedList.prototype = {
Phaser.Signal = function () {
/**
* @property {Array.<Phaser.SignalBinding>} _bindings - Description.
* @property {Array.<Phaser.SignalBinding>} _bindings - Internal variable.
* @private
*/
this._bindings = [];
/**
* @property {Description} _prevParams - Description.
* @property {any} _prevParams - Internal variable.
* @private
*/
this._prevParams = null;
@ -9632,7 +9632,7 @@ Phaser.Signal = function () {
var self = this;
/**
* @property {Description} dispatch - Description.
* @property {function} dispatch - The dispatch function is what sends the Signal out.
*/
this.dispatch = function(){
Phaser.Signal.prototype.dispatch.apply(self, arguments);
@ -9667,7 +9667,7 @@ Phaser.Signal.prototype = {
/**
* @method Phaser.Signal#validateListener
* @param {function} listener - Signal handler function.
* @param {Description} fnName - Description.
* @param {string} fnName - Function name.
* @private
*/
validateListener: function (listener, fnName) {
@ -9826,7 +9826,7 @@ Phaser.Signal.prototype = {
/**
* Stop propagation of the event, blocking the dispatch to next listeners on the queue.
* <p><strong>IMPORTANT:</strong> should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.</p>
* IMPORTANT: should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.
* @see Signal.prototype.disable
*
* @method Phaser.Signal#halt
@ -9839,7 +9839,7 @@ Phaser.Signal.prototype = {
* Dispatch/Broadcast Signal to all listeners added to the queue.
*
* @method Phaser.Signal#dispatch
* @param {...} [params] - Parameters that should be passed to each handler.
* @param {any} [params] - Parameters that should be passed to each handler.
*/
dispatch: function () {
@ -9884,7 +9884,7 @@ Phaser.Signal.prototype = {
/**
* Remove all bindings from signal and destroy any reference to external objects (destroy Signal object).
* <p><strong>IMPORTANT:</strong> calling any method on the signal instance after calling dispose will throw errors.</p>
* IMPORTANT: calling any method on the signal instance after calling dispose will throw errors.
*
* @method Phaser.Signal#dispose
*/
@ -9915,15 +9915,15 @@ Phaser.Signal.prototype = {
* Phaser.SignalBinding
*
* Object that represents a binding between a Signal and a listener function.
* <br />- <strong>This is an internal constructor and shouldn't be called by regular users.</strong>
* <br />- inspired by Joa Ebert AS3 SignalBinding and Robert Penner's Slot classes.
* This is an internal constructor and shouldn't be called by regular users.
* Inspired by Joa Ebert AS3 SignalBinding and Robert Penner's Slot classes.
*
* @class Phaser.SignalBinding
* @name SignalBinding
* @author Miller Medeiros http://millermedeiros.github.com/js-signals/
* @constructor
* @inner
* @param {Signal} signal - Reference to Signal object that listener is currently bound to.
* @param {Phaser.Signal} signal - Reference to Signal object that listener is currently bound to.
* @param {function} listener - Handler function bound to the signal.
* @param {boolean} isOnce - If binding should be executed just once.
* @param {object} [listenerContext] - Context on which listener will be executed (object that should represent the `this` variable inside listener function).
@ -9950,7 +9950,7 @@ Phaser.SignalBinding = function (signal, listener, isOnce, listenerContext, prio
this.context = listenerContext;
/**
* @property {Signal} _signal - Reference to Signal object that listener is currently bound to.
* @property {Phaser.Signal} _signal - Reference to Signal object that listener is currently bound to.
* @private
*/
this._signal = signal;
@ -9981,10 +9981,10 @@ Phaser.SignalBinding.prototype = {
/**
* Call listener passing arbitrary parameters.
* <p>If binding was added using `Signal.addOnce()` it will be automatically removed from signal dispatch queue, this method is used internally for the signal dispatch.</p>
* If binding was added using `Signal.addOnce()` it will be automatically removed from signal dispatch queue, this method is used internally for the signal dispatch.
* @method Phaser.SignalBinding#execute
* @param {array} [paramsArr] - Array of parameters that should be passed to the listener.
* @return {Description} Value returned by the listener.
* @return {any} Value returned by the listener.
*/
execute: function (paramsArr) {
@ -10007,7 +10007,7 @@ Phaser.SignalBinding.prototype = {
/**
* Detach binding from signal.
* <p>alias to: @see mySignal.remove(myBinding.getListener());
* alias to: @see mySignal.remove(myBinding.getListener());
* @method Phaser.SignalBinding#detach
* @return {function|null} Handler function bound to the signal or `null` if binding was previously detached.
*/
@ -10122,9 +10122,9 @@ Phaser.Filter = function (game, uniforms, fragmentSrc) {
*/
this.uniforms = {
resolution: { type: '3f', value: { x: 256, y: 256, z: 0 }},
time: { type: '1f', value: 0 },
mouse: { type: '4f', value: { x: 0, y: 0, z: 0, w: 0 }}
resolution: { type: '2f', value: { x: 256, y: 256 }},
mouse: { type: '2f', value: { x: 0.0, y: 0.0 }}
};
@ -10140,7 +10140,6 @@ Phaser.Filter.prototype = {
/**
* Should be over-ridden.
* @method Phaser.Filter#init
* @param {...}
*/
init: function () {
// This should be over-ridden. Will receive a variable number of arguments.
@ -10168,8 +10167,15 @@ Phaser.Filter.prototype = {
if (typeof pointer !== 'undefined')
{
this.uniforms.mouse.x = pointer.x;
this.uniforms.mouse.y = pointer.y;
if (pointer.x > 0)
{
this.uniforms.mouse.x = pointer.x.toFixed(2);
}
if (pointer.y > 0)
{
this.uniforms.mouse.y = pointer.y.toFixed(2);
}
}
this.uniforms.time.value = this.game.time.totalElapsedSeconds();
@ -17321,9 +17327,18 @@ Phaser.InputHandler.prototype = {
*/
/**
* The Events component is a collection of events fired by the parent game object and its components.
*
* @class Phaser.Events
*
* @classdesc The Events component is a collection of events fired by the parent game object.
*
* For example to tell when a Sprite has been added to a new group:
*
* ```sprite.events.onAddedToGroup.add(yourFunction, this);```
*
* Where `yourFunction` is the function you want called when this event occurs.
*
* Note that the Input related events only exist if the Sprite has had `inputEnabled` set to `true`.
*
* @constructor
*
* @param {Phaser.Sprite} sprite - A reference to Description.
@ -17678,8 +17693,8 @@ Phaser.GameObjectFactory.prototype = {
* A WebGL shader/filter that can be applied to Sprites.
*
* @method Phaser.GameObjectFactory#filter
* @param {string} filter - The name of the filter you wish to create, for example "HueRotate" or "SineWave"
* @param {...} - Whatever parameters are needed to be passed to the filter init function.
* @param {string} filter - The name of the filter you wish to create, for example HueRotate or SineWave.
* @param {any} - Whatever parameters are needed to be passed to the filter init function.
* @return {Phaser.Filter} The newly created Phaser.Filter object.
*/
filter: function (filter) {
@ -17702,9 +17717,16 @@ Phaser.GameObjectFactory.prototype = {
*/
/**
* Creates a new `BitmapData` object.
* Creates a new BitmapData object.
*
* @class Phaser.BitmapData
*
* @classdesc Note: This object is still experimental and likely to change.
*
* A BitmapData object can be thought of as a blank canvas onto which you can perform graphics operations as you would on a normal canvas,
* such as drawing lines, circles, arcs, fills and copying and setting blocks of pixel data. A single BitmapData can be used as the texture
* for multiple Sprites. So if you need to dynamically create a Sprite texture then they are a good choice. It supports the EaselJS Tiny API.
*
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {number} [width=256] - The width of the BitmapData in pixels.
@ -17796,7 +17818,7 @@ Phaser.BitmapData.prototype = {
/**
* Updates the given Sprite so that it uses this BitmapData as its texture.
* @method Phaser.BitmapData.add
* @method Phaser.BitmapData#add
* @param {Phaser.Sprite} sprite - The sprite to apply this texture to.
*/
add: function (sprite) {
@ -17807,7 +17829,7 @@ Phaser.BitmapData.prototype = {
/**
* Given an array of Sprites it will update each of them so that their Textures reference this BitmapData.
* @method Phaser.BitmapData.addTo
* @method Phaser.BitmapData#addTo
* @param {Phaser.Sprite[]} sprites - An array of Sprites to apply this texture to.
*/
addTo: function (sprites) {
@ -17824,7 +17846,7 @@ Phaser.BitmapData.prototype = {
/**
* Clears the BitmapData.
* @method Phaser.BitmapData.clear
* @method Phaser.BitmapData#clear
*/
clear: function () {
@ -17846,7 +17868,7 @@ Phaser.BitmapData.prototype = {
/**
* Sets the color of the given pixel to the specified red, green, blue and alpha values.
* @method Phaser.BitmapData.setPixel32
* @method Phaser.BitmapData#setPixel32
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value, between 0 and 0xFF (255).
@ -17882,7 +17904,7 @@ Phaser.BitmapData.prototype = {
/**
* Sets the color of the given pixel to the specified red, green and blue values.
* @method Phaser.BitmapData.setPixel
* @method Phaser.BitmapData#setPixel
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value (between 0 and 255)
@ -17939,7 +17961,7 @@ Phaser.BitmapData.prototype = {
/**
* Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle
* going in the given direction by anticlockwise (defaulting to clockwise).
* @method Phaser.BitmapData.arc
* @method Phaser.BitmapData#arc
* @param {number} x - The x axis of the coordinate for the arc's center
* @param {number} y - The y axis of the coordinate for the arc's center
* @param {number} radius - The arc's radius
@ -17960,7 +17982,7 @@ Phaser.BitmapData.prototype = {
/**
* Adds an arc with the given control points and radius, connected to the previous point by a straight line.
* @method Phaser.BitmapData.arcTo
* @method Phaser.BitmapData#arcTo
* @param {number} x1
* @param {number} y1
* @param {number} x2
@ -17978,7 +18000,7 @@ Phaser.BitmapData.prototype = {
/**
* Begins a fill with the specified color. This ends the current sub-path.
* @method Phaser.BitmapData.beginFill
* @method Phaser.BitmapData#beginFill
* @param {string} color - A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -17996,7 +18018,7 @@ Phaser.BitmapData.prototype = {
*
* ```myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);```
*
* @method Phaser.BitmapData.beginLinearGradientFill
* @method Phaser.BitmapData#beginLinearGradientFill
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
@ -18027,7 +18049,7 @@ Phaser.BitmapData.prototype = {
*
* ```myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);```
*
* @method Phaser.BitmapData.beginLinearGradientStroke
* @method Phaser.BitmapData#beginLinearGradientStroke
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size.
@ -18059,7 +18081,7 @@ Phaser.BitmapData.prototype = {
* .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
* .drawRect(50, 90, 150, 110);
*
* @method Phaser.BitmapData.beginRadialGradientStroke
* @method Phaser.BitmapData#beginRadialGradientStroke
* @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
* @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
* @param {number} x0 - Center position of the inner circle that defines the gradient.
@ -18087,7 +18109,7 @@ Phaser.BitmapData.prototype = {
/**
* Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path.
* @method Phaser.BitmapData.beginPath
* @method Phaser.BitmapData#beginPath
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
beginPath: function () {
@ -18099,7 +18121,7 @@ Phaser.BitmapData.prototype = {
/**
* Begins a stroke with the specified color. This ends the current sub-path.
* @method Phaser.BitmapData.beginStroke
* @method Phaser.BitmapData#beginStroke
* @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18112,7 +18134,7 @@ Phaser.BitmapData.prototype = {
/**
* Adds a bezier curve from the current context point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y).
* @method Phaser.BitmapData.bezierCurveTo
* @method Phaser.BitmapData#bezierCurveTo
* @param {number} cp1x - The x axis of control point 1.
* @param {number} cp1y - The y axis of control point 1.
* @param {number} cp2x - The x axis of control point 2.
@ -18131,7 +18153,7 @@ Phaser.BitmapData.prototype = {
/**
* Draws a circle with the specified radius at (x, y).
* @method Phaser.BitmapData.circle
* @method Phaser.BitmapData#circle
* @param {number} x - x coordinate center point of circle.
* @param {number} y - y coordinate center point of circle.
* @param {number} radius - Radius of circle in radians.
@ -18146,7 +18168,7 @@ Phaser.BitmapData.prototype = {
/**
* Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black.
* @method Phaser.BitmapData.clearRect
* @method Phaser.BitmapData#clearRect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
@ -18163,7 +18185,7 @@ Phaser.BitmapData.prototype = {
/**
* Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.
* @method Phaser.BitmapData.clip
* @method Phaser.BitmapData#clip
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
clip: function () {
@ -18176,7 +18198,7 @@ Phaser.BitmapData.prototype = {
/**
* Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
* @method Phaser.BitmapData.closePath
* @method Phaser.BitmapData#closePath
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
closePath: function () {
@ -18190,7 +18212,7 @@ Phaser.BitmapData.prototype = {
/**
* Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient.
* Once the gradient is created colors can be inserted using the addColorStop method.
* @method Phaser.BitmapData.createLinearGradient
* @method Phaser.BitmapData#createLinearGradient
* @param {number} x - The x axis of the coordinate for the gradients starting point.
* @param {number} y - The y axis of the coordinate for the gradients starting point.
* @param {number} width - The width of the gradient.
@ -18207,7 +18229,7 @@ Phaser.BitmapData.prototype = {
/**
* Creates a radial gradient.
* @method Phaser.BitmapData.createRadialGradient
* @method Phaser.BitmapData#createRadialGradient
* @param {number} x0
* @param {number} y0
* @param {number} r0
@ -18227,7 +18249,7 @@ Phaser.BitmapData.prototype = {
/**
* Draws an ellipse (oval) with a specified width (w) and height (h).
* @method Phaser.BitmapData.ellipse
* @method Phaser.BitmapData#ellipse
* @param {number} x - x coordinate center point of ellipse.
* @param {number} y - y coordinate center point of ellipse.
* @param {number} w - height (horizontal diameter) of ellipse. The horizontal radius will be half of this number.
@ -18256,7 +18278,7 @@ Phaser.BitmapData.prototype = {
/**
* Fills the subpaths with the current fill style.
* @method Phaser.BitmapData.fill
* @method Phaser.BitmapData#fill
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
fill: function () {
@ -18269,7 +18291,7 @@ Phaser.BitmapData.prototype = {
/**
* Draws a filled rectangle at (x, y) position whose size is determined by width and height.
* @method Phaser.BitmapData.fillRect
* @method Phaser.BitmapData#fillRect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
@ -18286,7 +18308,7 @@ Phaser.BitmapData.prototype = {
/**
* Sets the fill style.
* @method Phaser.BitmapData.fillStyle
* @method Phaser.BitmapData#fillStyle
* @param {string} color - The fill color value in CSS format: #RRGGBB or rgba(r,g,b,a)
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18301,7 +18323,7 @@ Phaser.BitmapData.prototype = {
/**
* Sets the font.
* @method Phaser.BitmapData.font
* @method Phaser.BitmapData#font
* @param {DOMString} font - The font to be used for any text rendering. Default value 10px sans-serif.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18314,7 +18336,7 @@ Phaser.BitmapData.prototype = {
/**
* Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
* @method Phaser.BitmapData.globalAlpha
* @method Phaser.BitmapData#globalAlpha
* @param {number} alpha - Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18328,7 +18350,7 @@ Phaser.BitmapData.prototype = {
/**
* With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: source-atop, source-in, source-out,
* source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, darker, copy and xor.
* @method Phaser.BitmapData.globalCompositeOperation
* @method Phaser.BitmapData#globalCompositeOperation
* @param {DOMString} operation - The composite operation to apply.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18341,7 +18363,7 @@ Phaser.BitmapData.prototype = {
/**
* Type of endings on the end of lines. Possible values: butt (default), round, square.
* @method Phaser.BitmapData.lineCap
* @method Phaser.BitmapData#lineCap
* @param {DOMString} style - Possible values: butt (default), round, square
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18354,7 +18376,7 @@ Phaser.BitmapData.prototype = {
/**
* Specifies where to start a dasharray on a line.
* @method Phaser.BitmapData.lineDashOffset
* @method Phaser.BitmapData#lineDashOffset
* @param {number} offset - Specifies where to start a dasharray on a line.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18367,7 +18389,7 @@ Phaser.BitmapData.prototype = {
/**
* Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)
* @method Phaser.BitmapData.lineJoin
* @method Phaser.BitmapData#lineJoin
* @param {DOMString} join - Possible values: round, bevel, miter (default)
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18380,7 +18402,7 @@ Phaser.BitmapData.prototype = {
/**
* Width of lines. Default 1.0
* @method Phaser.BitmapData.lineWidth
* @method Phaser.BitmapData#lineWidth
* @param {number} width - Width of lines. Default 1.0
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18393,7 +18415,7 @@ Phaser.BitmapData.prototype = {
/**
* Default 10.
* @method Phaser.BitmapData.miterLimit
* @method Phaser.BitmapData#miterLimit
* @param {number} limit - Default 10.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18411,7 +18433,7 @@ Phaser.BitmapData.prototype = {
/**
* Connects the last point in the subpath to the x, y coordinates with a straight line.
* @method Phaser.BitmapData.lineTo
* @method Phaser.BitmapData#lineTo
* @param {number} x - The x axis of the coordinate for the end of the line.
* @param {number} y - The y axis of the coordinate for the end of the line.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
@ -18428,7 +18450,7 @@ Phaser.BitmapData.prototype = {
/**
* Moves the starting point of a new subpath to the (x, y) coordinates.
* @method Phaser.BitmapData.moveTo
* @method Phaser.BitmapData#moveTo
* @param {number} x - The x axis of the point.
* @param {number} y - The y axis of the point.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
@ -18444,7 +18466,7 @@ Phaser.BitmapData.prototype = {
/**
* Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).
* @method Phaser.BitmapData.quadraticCurveTo
* @method Phaser.BitmapData#quadraticCurveTo
* @param {Number} cpx - The x axis of the control point.
* @param {Number} cpy - The y axis of the control point.
* @param {Number} x - The x axis of the ending point.
@ -18461,7 +18483,7 @@ Phaser.BitmapData.prototype = {
/**
* Draws a rectangle at (x, y) position whose size is determined by width and height.
* @method Phaser.BitmapData.rect
* @method Phaser.BitmapData#rect
* @param {number} x - The x axis of the coordinate for the rectangle starting point.
* @param {number} y - The y axis of the coordinate for the rectangle starting point.
* @param {number} width - The rectangles width.
@ -18478,7 +18500,7 @@ Phaser.BitmapData.prototype = {
/**
* Restores the drawing style state to the last element on the 'state stack' saved by save().
* @method Phaser.BitmapData.restore
* @method Phaser.BitmapData#restore
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
restore: function () {
@ -18491,7 +18513,7 @@ Phaser.BitmapData.prototype = {
/**
* Rotates the drawing context values by r radians.
* @method Phaser.BitmapData.rotate
* @method Phaser.BitmapData#rotate
* @param {number} angle - The angle of rotation given in radians.
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18509,7 +18531,7 @@ Phaser.BitmapData.prototype = {
*
* ```myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");```
*
* @method Phaser.BitmapData.setStrokeStyle
* @method Phaser.BitmapData#setStrokeStyle
* @param {number} thickness - The width of the stroke.
* @param {string|number} [caps=0] - Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API.
* @param {string|number} [joints=0] Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.
@ -18538,7 +18560,7 @@ Phaser.BitmapData.prototype = {
/**
* Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
* @method Phaser.BitmapData.save
* @method Phaser.BitmapData#save
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
save: function () {
@ -18551,7 +18573,7 @@ Phaser.BitmapData.prototype = {
/**
* Scales the current drawing context.
* @method Phaser.BitmapData.scale
* @method Phaser.BitmapData#scale
* @param {number} x
* @param {number} y
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
@ -18566,7 +18588,7 @@ Phaser.BitmapData.prototype = {
/**
*
* @method Phaser.BitmapData.scrollPathIntoView
* @method Phaser.BitmapData#scrollPathIntoView
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
scrollPathIntoView: function () {
@ -18582,7 +18604,7 @@ Phaser.BitmapData.prototype = {
/**
* Strokes the subpaths with the current stroke style.
* @method Phaser.BitmapData.stroke
* @method Phaser.BitmapData#stroke
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
stroke: function () {
@ -18595,7 +18617,7 @@ Phaser.BitmapData.prototype = {
/**
* Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
* @method Phaser.BitmapData.strokeRect
* @method Phaser.BitmapData#strokeRect
* @param {number} x - The x axis for the starting point of the rectangle.
* @param {number} y - The y axis for the starting point of the rectangle.
* @param {number} width - The rectangles width.
@ -18612,7 +18634,7 @@ Phaser.BitmapData.prototype = {
/**
* Color or style to use for the lines around shapes. Default #000 (black).
* @method Phaser.BitmapData.strokeStyle
* @method Phaser.BitmapData#strokeStyle
* @param {string} style - Color or style to use for the lines around shapes. Default #000 (black).
* @return {Phaser.BitmapData} The BitmapData instance this method was called on.
*/
@ -18630,7 +18652,7 @@ Phaser.BitmapData.prototype = {
/**
* If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
* This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.
* @method Phaser.BitmapData.render
* @method Phaser.BitmapData#render
*/
render: function () {
@ -18814,12 +18836,14 @@ Phaser.BitmapData.prototype.de = Phaser.BitmapData.prototype.ellipse;
*/
/**
* Create a new `Sprite` object. Sprites are the lifeblood of your game, used for nearly everything visual.
* @class Phaser.Sprite
*
* @classdesc Create a new `Sprite` object. Sprites are the lifeblood of your game, used for nearly everything visual.
*
* At its most basic a Sprite consists of a set of coordinates and a texture that is rendered to the canvas.
* They also contain additional properties allowing for physics motion (via Sprite.body), input handling (via Sprite.input),
* events (via Sprite.events), animation (via Sprite.animations), camera culling and more. Please see the Examples for use cases.
*
* @class Phaser.Sprite
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {number} x - The x coordinate (in world space) to position the Sprite at.
@ -20279,11 +20303,16 @@ Object.defineProperty(Phaser.Text.prototype, 'font', {
*/
/**
* Creates a new `BitmapText` object. BitmapText work by taking a texture file and an XML file that describes the font layout.
* On Windows you can use the free app BMFont: http://www.angelcode.com/products/bmfont/
* On OS X we recommend Glyph Designer: http://www.71squared.com/en/glyphdesigner
* Creates a new BitmapText object.
*
* @class Phaser.BitmapText
*
* @classdesc BitmapText objects work by taking a texture file and an XML file that describes the font layout.
*
* On Windows you can use the free app BMFont: http://www.angelcode.com/products/bmfont/
*
* On OS X we recommend Glyph Designer: http://www.71squared.com/en/glyphdesigner
*
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {number} x - X position of the new bitmapText object.
@ -20513,14 +20542,17 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'y', {
*/
/**
* Create a new `Button` object. A Button is a special type of Sprite that is set-up to handle Pointer events automatically. The four states a Button responds to are:
* 'Over' - when the Pointer moves over the Button. This is also commonly known as 'hover'.
* 'Out' - when the Pointer that was previously over the Button moves out of it.
* 'Down' - when the Pointer is pressed down on the Button. I.e. touched on a touch enabled device or clicked with the mouse.
* 'Up' - when the Pointer that was pressed down on the Button is released again.
* @class Phaser.Button
*
* @classdesc Create a new `Button` object. A Button is a special type of Sprite that is set-up to handle Pointer events automatically. The four states a Button responds to are:
*
* * 'Over' - when the Pointer moves over the Button. This is also commonly known as 'hover'.
* * 'Out' - when the Pointer that was previously over the Button moves out of it.
* * 'Down' - when the Pointer is pressed down on the Button. I.e. touched on a touch enabled device or clicked with the mouse.
* * 'Up' - when the Pointer that was pressed down on the Button is released again.
*
* You can set a unique texture frame and Sound for any of these states.
*
* @class Phaser.Button
* @constructor
*
* @param {Phaser.Game} game Current game instance.
@ -30984,7 +31016,7 @@ Phaser.Loader = function (game) {
/**
* You can optionally link a sprite to the preloader.
* If you do so the Sprite's width or height will be cropped based on the percentage loaded.
* @property {Description} preloadSprite
* @property {Phaser.Sprite} preloadSprite
* @default
*/
this.preloadSprite = null;
@ -31975,7 +32007,7 @@ Phaser.Loader.prototype = {
file.data = document.createElement('script');
file.data.language = 'javascript';
file.data.type = 'text/javascript';
file.data.defer = true;
file.data.defer = false;
file.data.text = this._xhr.responseText;
document.head.appendChild(file.data);
break;
@ -37766,7 +37798,6 @@ Object.defineProperty(Phaser.Particles.Arcade.Emitter.prototype, "bottom", {
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
* @module Phaser.Tile
*/
/**

4
build/phaser.min.js vendored
View file

File diff suppressed because one or more lines are too long

21
examples/games/invaders.js
View file

@ -226,12 +226,25 @@ function enemyFires () {
// Grab the first bullet we can from the pool
enemyBullet = enemyBullets.getFirstExists(false);
if (enemyBullet)
var livingEnemies=[];
aliens.forEachAlive(function(alien){
// put every living enemy in an array
livingEnemies.push(alien);
});
if (enemyBullet && livingEnemies.length > 0)
{
var shooter=aliens.getRandom();
// And fire it
var random=game.rnd.integerInRange(0,livingEnemies.length);
// randomly select one of them
var shooter=livingEnemies[random];
// And fire the bullet from this enemy
enemyBullet.reset(shooter.body.x, shooter.body.y);
// enemyBullet.body.velocity.y = 400;
game.physics.moveToObject(enemyBullet,player,120);
firingTimer = game.time.now + 2000;
}

BIN
tutorials/01 Getting Started/hellophaser.zip Normal file
View file

Binary file not shown.

34
tutorials/01 Getting Started/hellophaser/index.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>hello phaser!</title>
<script src="phaser.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload () {
game.load.image('logo', 'phaser.png');
}
function create () {
var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
logo.anchor.setTo(0.5, 0.5);
}
};
</script>
</body>
</html>

12
tutorials/01 Getting Started/hellophaser/phaser.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
tutorials/01 Getting Started/hellophaser/phaser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
tutorials/01 Getting Started/images/cloneFrom.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
tutorials/01 Getting Started/images/dashboard.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
tutorials/01 Getting Started/images/editor.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
tutorials/01 Getting Started/images/start.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

30
tutorials/01 Getting Started/part3.html
View file

@ -17,7 +17,35 @@
<h2>Part 3 - Run in the Cloud</h2>
<p></p>
<p>If you're not comfortable with github cloning, and setting up a web server, or if you don't want to bother with all that, you can run phaser in the Cloud.</p>
<p>More than a marketing buzzword, the Cloud is often used by developers as tool which allows you to create, edit and share your content without having to install anything, or make the people you share your content with do so.</p>
<p>There are several JavaScript online collaboration tools such as JSBin, codepen and JSFiddle just to name a few of them.</p>
<p>There is another tool that we recommend which is called Cloud9 IDE that allows you get up and running very quickly.</p>
<img src="https://c9.io/site/wp-content/themes/cloud9/img/logo_cloud9.png"/>
<p>First, sign up to the website using GitHub, and once this is completed, you will be redirected to your dashboard.</p>
<img src="images/dashboard.jpg"/>
<p>From this dashboard, you can create private or shared project, or, the feature that interests us in this case, you can create a project from a GitHub repository.</p>
<p>Click the "create workspace" button and select the "clone from URL" option from the drop-down menu.</p>
<img src="images/cloneFrom.jpg"/>
<p>Once the repository is integrated into c9.io, you'll see this window:</p>
<img src="images/start.jpg"/>
<p>When you click on the "start editing" button you'll be redirected here:</p>
<img src="images/editor.jpg"/>
<p>You have now a copy of the Phaser repository.</p>
<p><a href="part4.html">Part 4: Choosing an Editor</a></p>

10
tutorials/01 Getting Started/part6.html
View file

@ -21,15 +21,7 @@
<p>You need to discover where your 'web root' is on your machine. This is the folder in which the server looks for files. If you are using WAMP on Windows you can locate it by clicking the WAMP icon in your system-tray and select "www directory" from the pop-up menu. Other servers will have other methods of determining the location, but from this point on we'll refer to it as the 'webroot'.</p>
<p>1. Within the webroot create a folder called 'hellophaser'. Download <a href="">this zip file</a> and extract the contents to the 'hellophaser' folder.</p>
<p>2. Using your text editor create a file called index.html within the 'hellophaser' folder and paste the following code into it:</p>
<code>
</code>
<p>3. Save the file and on Windows the final folder should look something like this:</p>
<p>Download <a href="hellophaser.zip">this zip file</a>. It contains a folder called 'hellophaser' inside which you'll find a JavaScript file, an index.html and a PNG. Copy the 'hellophaser' folder to your webroot.</p>
<h3>Testing, testing ...</h3>

12
tutorials/01 Getting Started/part7.html
View file

@ -17,9 +17,17 @@
<h2>Part 7 - The Phaser Examples</h2>
<p>Phaser comes with a comprehensive suite of examples. At the current count over 160 of them. Whenever we add a new feature into Phaser we create an example to demonstrate how to use it. They are short self-contained snippets of code that focus on just a couple of elements and nothing more, and as such they're really useful to learn from!</p>
<p>Phaser comes with a comprehensive suite of examples. At the current count over 160 of them. They are short self-contained snippets of code that focus on just a couple of elements and nothing more, and as such they're really useful to learn from! Whenever we add a new feature into Phaser we create an example to demonstrate how to use it, so there are all kinds of examples from simple things like loading audio to sprite animation and input handling.</p>
<p>Although we've uploaded the Examples to our site, we still recommend that you copy the whole phaser folder (the entire repository) to your webroot, so you can easily run the Example browser locally.
<p>Although we've uploaded the Examples to our site we still recommend that you copy the whole phaser folder (the entire repository) to your webroot, so you can easily run the Examples locally. If you've copied the phaser folder into your webroot then you can access the examples at:</p>
<code>http://localhost/phaser/examples</code>
<p>Note: The URL above will differ based on your server set-up.</p>
<h3>Side by side</h3>
<p>There are two ways to explore the examples. The default view is a big long list and each new example opens in a new page. There is also a 'Side View', a link to which you'll find at the top of the page. This puts all of the examples in a list down the left and the content and code loads into a frame on the right. Each one has its advantages, so play around and explore!</p>
<p><a href="part8.html">Part 8: Next Steps</a></p>

24
tutorials/01 Getting Started/part8.html
View file

@ -17,7 +17,29 @@
<h2>Part 8 - Next Steps</h2>
<p></p>
<p>Your game development experience with Phaser begins here! Although we've only touched upon the basics you still have a fully working development environment, access to the API docs and hundreds of examples. Even so it's always best to code as part of a community - and for that we cannot recommend our forum enough. It has gone from strength to strength over the past few months, and you're sure to find help and support when you need it most.</p>
<p>Bounce ideas of others, hang-out in the chat room, browse the games showcase and just be involved!</p>
<p><a href="http://www.html5gamedevs.com/forum/14-phaser/">Join the Forum</a></p>
<h3>Phaser Newsletter</h3>
<p>We publish a monthly Phaser newsletter. As well as details about new releases it also contains short tutorials and features. Sign-up for free to have it hit your inbox during the first week of the month.</p>
<p><a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Subscribe to the Newsletter</a></p>
<h3>Contribute</h3>
<p>You can help shape the way in which Phaser grows. If you find a bug, please report it. It won't take you long, and to date we have fixed over 91% of all reported issues (and we're still working on the other 9%). You can also issue Pull Requests against the development branch, or release your own plugins or filters.</p>
<p><a href="https://github.com/photonstorm/phaser/issues/new">Report Issues on GitHub</a></p>
<h3>Show us your games!</h3>
<p>We spend many tireless hours working on Phaser because we want it to be the best HTML5 game development framework it can possibly be. We understand it won't be perfect for everyone, and we're cool with that. But if you use it and make something, no matter how small you think that is, please do let us know. You won't believe with a real motivational boost it is when devs show us the games they've been working on! Reach out to us either on the forum, via twitter (<a href="https://twitter.com/photonstorm">@photonstorm</a>) or by <a href="mailto:rdavey@gmail.com">email</a>.</p>
<p>Most of all though, we truly hope you have fun making your game.</p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>