Added phaser build and hellophaser sample
This commit is contained in:
296
src/system/Canvas.js
Normal file
296
src/system/Canvas.js
Normal file
@@ -0,0 +1,296 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* The Canvas class handles everything related to creating the `canvas` DOM tag that Phaser will use, including styles, offset and aspect ratio.
|
||||
*
|
||||
* @class Phaser.Canvas
|
||||
* @static
|
||||
*/
|
||||
Phaser.Canvas = {
|
||||
|
||||
/**
|
||||
* Creates a `canvas` DOM element. The element is not automatically added to the document.
|
||||
*
|
||||
* @method Phaser.Canvas.create
|
||||
* @param {number} [width=256] - The width of the canvas element.
|
||||
* @param {number} [height=256] - The height of the canvas element..
|
||||
* @param {string} [id=''] - If given this will be set as the ID of the canvas element, otherwise no ID will be set.
|
||||
* @param {boolean} [noCocoon=false] - CocoonJS only allows 1 screencanvas object, which should be your game. If you need to create another canvas (i.e. for a texture) set this to 'true'.
|
||||
* @return {HTMLCanvasElement} The newly created canvas element.
|
||||
*/
|
||||
create: function (width, height, id, noCocoon) {
|
||||
|
||||
if (typeof noCocoon === 'undefined') { noCocoon = false; }
|
||||
|
||||
width = width || 256;
|
||||
height = height || 256;
|
||||
|
||||
if (noCocoon)
|
||||
{
|
||||
var canvas = document.createElement('canvas');
|
||||
}
|
||||
else
|
||||
{
|
||||
var canvas = document.createElement(navigator.isCocoonJS ? 'screencanvas' : 'canvas');
|
||||
}
|
||||
|
||||
if (typeof id === 'string' && id !== '')
|
||||
{
|
||||
canvas.id = id;
|
||||
}
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
canvas.style.display = 'block';
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the DOM offset values of any given element
|
||||
* @method Phaser.Canvas.getOffset
|
||||
* @param {HTMLElement} element - The targeted element that we want to retrieve the offset.
|
||||
* @param {Phaser.Point} [point] - The point we want to take the x/y values of the offset.
|
||||
* @return {Phaser.Point} - A point objet with the offsetX and Y as its properties.
|
||||
*/
|
||||
getOffset: function (element, point) {
|
||||
|
||||
point = point || new Phaser.Point();
|
||||
|
||||
var box = element.getBoundingClientRect();
|
||||
var clientTop = element.clientTop || document.body.clientTop || 0;
|
||||
var clientLeft = element.clientLeft || document.body.clientLeft || 0;
|
||||
|
||||
// Without this check Chrome is now throwing console warnings about strict vs. quirks :(
|
||||
|
||||
var scrollTop = 0;
|
||||
var scrollLeft = 0;
|
||||
|
||||
if (document.compatMode === 'CSS1Compat')
|
||||
{
|
||||
scrollTop = window.pageYOffset || document.documentElement.scrollTop || element.scrollTop || 0;
|
||||
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || element.scrollLeft || 0;
|
||||
}
|
||||
else
|
||||
{
|
||||
scrollTop = window.pageYOffset || document.body.scrollTop || element.scrollTop || 0;
|
||||
scrollLeft = window.pageXOffset || document.body.scrollLeft || element.scrollLeft || 0;
|
||||
}
|
||||
|
||||
point.x = box.left + scrollLeft - clientLeft;
|
||||
point.y = box.top + scrollTop - clientTop;
|
||||
|
||||
return point;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the aspect ratio of the given canvas.
|
||||
*
|
||||
* @method Phaser.Canvas.getAspectRatio
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to get the aspect ratio from.
|
||||
* @return {number} The ratio between canvas' width and height.
|
||||
*/
|
||||
getAspectRatio: function (canvas) {
|
||||
return canvas.width / canvas.height;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the background color behind the canvas. This changes the canvas style property.
|
||||
*
|
||||
* @method Phaser.Canvas.setBackgroundColor
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to set the background color on.
|
||||
* @param {string} [color] - The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.
|
||||
* @return {HTMLCanvasElement} Returns the source canvas.
|
||||
*/
|
||||
setBackgroundColor: function (canvas, color) {
|
||||
|
||||
color = color || 'rgb(0,0,0)';
|
||||
|
||||
canvas.style.backgroundColor = color;
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the touch-action property on the canvas style. Can be used to disable default browser touch actions.
|
||||
*
|
||||
* @method Phaser.Canvas.setTouchAction
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to set the touch action on.
|
||||
* @param {String} [value] - The touch action to set. Defaults to 'none'.
|
||||
* @return {HTMLCanvasElement} The source canvas.
|
||||
*/
|
||||
setTouchAction: function (canvas, value) {
|
||||
|
||||
value = value || 'none';
|
||||
|
||||
canvas.style.msTouchAction = value;
|
||||
canvas.style['ms-touch-action'] = value;
|
||||
canvas.style['touch-action'] = value;
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the user-select property on the canvas style. Can be used to disable default browser selection actions.
|
||||
*
|
||||
* @method Phaser.Canvas.setUserSelect
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to set the touch action on.
|
||||
* @param {String} [value] - The touch action to set. Defaults to 'none'.
|
||||
* @return {HTMLCanvasElement} The source canvas.
|
||||
*/
|
||||
setUserSelect: function (canvas, value) {
|
||||
|
||||
value = value || 'none';
|
||||
|
||||
canvas.style['-webkit-touch-callout'] = value;
|
||||
canvas.style['-webkit-user-select'] = value;
|
||||
canvas.style['-khtml-user-select'] = value;
|
||||
canvas.style['-moz-user-select'] = value;
|
||||
canvas.style['-ms-user-select'] = value;
|
||||
canvas.style['user-select'] = value;
|
||||
canvas.style['-webkit-tap-highlight-color'] = 'rgba(0, 0, 0, 0)';
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds the given canvas element to the DOM. The canvas will be added as a child of the given parent.
|
||||
* If no parent is given it will be added as a child of the document.body.
|
||||
*
|
||||
* @method Phaser.Canvas.addToDOM
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to set the touch action on.
|
||||
* @param {string|HTMLElement} parent - The DOM element to add the canvas to.
|
||||
* @param {boolean} [overflowHidden=true] - If set to true it will add the overflow='hidden' style to the parent DOM element.
|
||||
* @return {HTMLCanvasElement} Returns the source canvas.
|
||||
*/
|
||||
addToDOM: function (canvas, parent, overflowHidden) {
|
||||
|
||||
var target;
|
||||
|
||||
if (typeof overflowHidden === 'undefined') { overflowHidden = true; }
|
||||
|
||||
if (parent)
|
||||
{
|
||||
if (typeof parent === 'string')
|
||||
{
|
||||
// hopefully an element ID
|
||||
target = document.getElementById(parent);
|
||||
}
|
||||
else if (typeof parent === 'object' && parent.nodeType === 1)
|
||||
{
|
||||
// quick test for a HTMLelement
|
||||
target = parent;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback, covers an invalid ID and a non HTMLelement object
|
||||
if (!target)
|
||||
{
|
||||
target = document.body;
|
||||
}
|
||||
|
||||
if (overflowHidden && target.style)
|
||||
{
|
||||
target.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
target.appendChild(canvas);
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the transform of the given canvas to the matrix values provided.
|
||||
*
|
||||
* @method Phaser.Canvas.setTransform
|
||||
* @param {CanvasRenderingContext2D} context - The context to set the transform on.
|
||||
* @param {number} translateX - The value to translate horizontally by.
|
||||
* @param {number} translateY - The value to translate vertically by.
|
||||
* @param {number} scaleX - The value to scale horizontally by.
|
||||
* @param {number} scaleY - The value to scale vertically by.
|
||||
* @param {number} skewX - The value to skew horizontaly by.
|
||||
* @param {number} skewY - The value to skew vertically by.
|
||||
* @return {CanvasRenderingContext2D} Returns the source context.
|
||||
*/
|
||||
setTransform: function (context, translateX, translateY, scaleX, scaleY, skewX, skewY) {
|
||||
|
||||
context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);
|
||||
|
||||
return context;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the Image Smoothing property on the given context. Set to false to disable image smoothing.
|
||||
* By default browsers have image smoothing enabled, which isn't always what you visually want, especially
|
||||
* when using pixel art in a game. Note that this sets the property on the context itself, so that any image
|
||||
* drawn to the context will be affected. This sets the property across all current browsers but support is
|
||||
* patchy on earlier browsers, especially on mobile.
|
||||
*
|
||||
* @method Phaser.Canvas.setSmoothingEnabled
|
||||
* @param {CanvasRenderingContext2D} context - The context to enable or disable the image smoothing on.
|
||||
* @param {boolean} value - If set to true it will enable image smoothing, false will disable it.
|
||||
* @return {CanvasRenderingContext2D} Returns the source context.
|
||||
*/
|
||||
setSmoothingEnabled: function (context, value) {
|
||||
|
||||
context['imageSmoothingEnabled'] = value;
|
||||
context['mozImageSmoothingEnabled'] = value;
|
||||
context['oImageSmoothingEnabled'] = value;
|
||||
context['webkitImageSmoothingEnabled'] = value;
|
||||
context['msImageSmoothingEnabled'] = value;
|
||||
|
||||
return context;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast on webkit').
|
||||
* Note that if this doesn't given the desired result then see the setSmoothingEnabled.
|
||||
*
|
||||
* @method Phaser.Canvas.setImageRenderingCrisp
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to set image-rendering crisp on.
|
||||
* @return {HTMLCanvasElement} Returns the source canvas.
|
||||
*/
|
||||
setImageRenderingCrisp: function (canvas) {
|
||||
|
||||
canvas.style['image-rendering'] = 'optimizeSpeed';
|
||||
canvas.style['image-rendering'] = 'crisp-edges';
|
||||
canvas.style['image-rendering'] = '-moz-crisp-edges';
|
||||
canvas.style['image-rendering'] = '-webkit-optimize-contrast';
|
||||
canvas.style['image-rendering'] = 'optimize-contrast';
|
||||
canvas.style.msInterpolationMode = 'nearest-neighbor';
|
||||
|
||||
return canvas;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto').
|
||||
* Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.
|
||||
*
|
||||
* @method Phaser.Canvas.setImageRenderingBicubic
|
||||
* @param {HTMLCanvasElement} canvas The canvas to set image-rendering bicubic on.
|
||||
* @return {HTMLCanvasElement} Returns the source canvas.
|
||||
*/
|
||||
setImageRenderingBicubic: function (canvas) {
|
||||
|
||||
canvas.style['image-rendering'] = 'auto';
|
||||
canvas.style.msInterpolationMode = 'bicubic';
|
||||
|
||||
return canvas;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
878
src/system/Device.js
Normal file
878
src/system/Device.js
Normal file
@@ -0,0 +1,878 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Detects device support capabilities. Using some elements from System.js by MrDoob and Modernizr
|
||||
*
|
||||
* @class Phaser.Device
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
Phaser.Device = function (game) {
|
||||
|
||||
/**
|
||||
* @property {Phaser.Game} game - A reference to the currently running game.
|
||||
*/
|
||||
this.game = game;
|
||||
|
||||
// Operating System
|
||||
|
||||
/**
|
||||
* @property {boolean} desktop - Is running desktop?
|
||||
* @default
|
||||
*/
|
||||
this.desktop = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} iOS - Is running on iOS?
|
||||
* @default
|
||||
*/
|
||||
this.iOS = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} cocoonJS - Is the game running under CocoonJS?
|
||||
* @default
|
||||
*/
|
||||
this.cocoonJS = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} ejecta - Is the game running under Ejecta?
|
||||
* @default
|
||||
*/
|
||||
this.ejecta = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} crosswalk - Is the game running under the Intel Crosswalk XDK?
|
||||
* @default
|
||||
*/
|
||||
this.crosswalk = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} android - Is running on android?
|
||||
* @default
|
||||
*/
|
||||
this.android = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} chromeOS - Is running on chromeOS?
|
||||
* @default
|
||||
*/
|
||||
this.chromeOS = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} linux - Is running on linux?
|
||||
* @default
|
||||
*/
|
||||
this.linux = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} macOS - Is running on macOS?
|
||||
* @default
|
||||
*/
|
||||
this.macOS = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} windows - Is running on windows?
|
||||
* @default
|
||||
*/
|
||||
this.windows = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} windowsPhone - Is running on a Windows Phone?
|
||||
* @default
|
||||
*/
|
||||
this.windowsPhone = false;
|
||||
|
||||
// Features
|
||||
|
||||
/**
|
||||
* @property {boolean} canvas - Is canvas available?
|
||||
* @default
|
||||
*/
|
||||
this.canvas = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} file - Is file available?
|
||||
* @default
|
||||
*/
|
||||
this.file = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} fileSystem - Is fileSystem available?
|
||||
* @default
|
||||
*/
|
||||
this.fileSystem = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} localStorage - Is localStorage available?
|
||||
* @default
|
||||
*/
|
||||
this.localStorage = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} webGL - Is webGL available?
|
||||
* @default
|
||||
*/
|
||||
this.webGL = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} worker - Is worker available?
|
||||
* @default
|
||||
*/
|
||||
this.worker = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} touch - Is touch available?
|
||||
* @default
|
||||
*/
|
||||
this.touch = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} mspointer - Is mspointer available?
|
||||
* @default
|
||||
*/
|
||||
this.mspointer = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} css3D - Is css3D available?
|
||||
* @default
|
||||
*/
|
||||
this.css3D = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} pointerLock - Is Pointer Lock available?
|
||||
* @default
|
||||
*/
|
||||
this.pointerLock = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} typedArray - Does the browser support TypedArrays?
|
||||
* @default
|
||||
*/
|
||||
this.typedArray = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} vibration - Does the device support the Vibration API?
|
||||
* @default
|
||||
*/
|
||||
this.vibration = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} getUserMedia - Does the device support the getUserMedia API?
|
||||
* @default
|
||||
*/
|
||||
this.getUserMedia = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} quirksMode - Is the browser running in strict mode (false) or quirks mode? (true)
|
||||
* @default
|
||||
*/
|
||||
this.quirksMode = false;
|
||||
|
||||
// Browser
|
||||
|
||||
/**
|
||||
* @property {boolean} arora - Set to true if running in Arora.
|
||||
* @default
|
||||
*/
|
||||
this.arora = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} chrome - Set to true if running in Chrome.
|
||||
* @default
|
||||
*/
|
||||
this.chrome = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} epiphany - Set to true if running in Epiphany.
|
||||
* @default
|
||||
*/
|
||||
this.epiphany = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} firefox - Set to true if running in Firefox.
|
||||
* @default
|
||||
*/
|
||||
this.firefox = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} ie - Set to true if running in Internet Explorer.
|
||||
* @default
|
||||
*/
|
||||
this.ie = false;
|
||||
|
||||
/**
|
||||
* @property {number} ieVersion - If running in Internet Explorer this will contain the major version number. Beyond IE10 you should use Device.trident and Device.tridentVersion.
|
||||
* @default
|
||||
*/
|
||||
this.ieVersion = 0;
|
||||
|
||||
/**
|
||||
* @property {boolean} trident - Set to true if running a Trident version of Internet Explorer (IE11+)
|
||||
* @default
|
||||
*/
|
||||
this.trident = false;
|
||||
|
||||
/**
|
||||
* @property {number} tridentVersion - If running in Internet Explorer 11 this will contain the major version number. See http://msdn.microsoft.com/en-us/library/ie/ms537503(v=vs.85).aspx
|
||||
* @default
|
||||
*/
|
||||
this.tridentVersion = 0;
|
||||
|
||||
/**
|
||||
* @property {boolean} mobileSafari - Set to true if running in Mobile Safari.
|
||||
* @default
|
||||
*/
|
||||
this.mobileSafari = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} midori - Set to true if running in Midori.
|
||||
* @default
|
||||
*/
|
||||
this.midori = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} opera - Set to true if running in Opera.
|
||||
* @default
|
||||
*/
|
||||
this.opera = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} safari - Set to true if running in Safari.
|
||||
* @default
|
||||
*/
|
||||
this.safari = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} webApp - Set to true if running as a WebApp, i.e. within a WebView
|
||||
* @default
|
||||
*/
|
||||
this.webApp = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} silk - Set to true if running in the Silk browser (as used on the Amazon Kindle)
|
||||
* @default
|
||||
*/
|
||||
this.silk = false;
|
||||
|
||||
// Audio
|
||||
|
||||
/**
|
||||
* @property {boolean} audioData - Are Audio tags available?
|
||||
* @default
|
||||
*/
|
||||
this.audioData = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} webAudio - Is the WebAudio API available?
|
||||
* @default
|
||||
*/
|
||||
this.webAudio = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} ogg - Can this device play ogg files?
|
||||
* @default
|
||||
*/
|
||||
this.ogg = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} opus - Can this device play opus files?
|
||||
* @default
|
||||
*/
|
||||
this.opus = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} mp3 - Can this device play mp3 files?
|
||||
* @default
|
||||
*/
|
||||
this.mp3 = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} wav - Can this device play wav files?
|
||||
* @default
|
||||
*/
|
||||
this.wav = false;
|
||||
|
||||
/**
|
||||
* Can this device play m4a files?
|
||||
* @property {boolean} m4a - True if this device can play m4a files.
|
||||
* @default
|
||||
*/
|
||||
this.m4a = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} webm - Can this device play webm files?
|
||||
* @default
|
||||
*/
|
||||
this.webm = false;
|
||||
|
||||
// Device
|
||||
|
||||
/**
|
||||
* @property {boolean} iPhone - Is running on iPhone?
|
||||
* @default
|
||||
*/
|
||||
this.iPhone = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} iPhone4 - Is running on iPhone4?
|
||||
* @default
|
||||
*/
|
||||
this.iPhone4 = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} iPad - Is running on iPad?
|
||||
* @default
|
||||
*/
|
||||
this.iPad = false;
|
||||
|
||||
/**
|
||||
* @property {number} pixelRatio - PixelRatio of the host device?
|
||||
* @default
|
||||
*/
|
||||
this.pixelRatio = 0;
|
||||
|
||||
/**
|
||||
* @property {boolean} littleEndian - Is the device big or little endian? (only detected if the browser supports TypedArrays)
|
||||
* @default
|
||||
*/
|
||||
this.littleEndian = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} support32bit - Does the device context support 32bit pixel manipulation using array buffer views?
|
||||
* @default
|
||||
*/
|
||||
this.support32bit = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} fullscreen - Does the browser support the Full Screen API?
|
||||
* @default
|
||||
*/
|
||||
this.fullscreen = false;
|
||||
|
||||
/**
|
||||
* @property {string} requestFullscreen - If the browser supports the Full Screen API this holds the call you need to use to activate it.
|
||||
* @default
|
||||
*/
|
||||
this.requestFullscreen = '';
|
||||
|
||||
/**
|
||||
* @property {string} cancelFullscreen - If the browser supports the Full Screen API this holds the call you need to use to cancel it.
|
||||
* @default
|
||||
*/
|
||||
this.cancelFullscreen = '';
|
||||
|
||||
/**
|
||||
* @property {boolean} fullscreenKeyboard - Does the browser support access to the Keyboard during Full Screen mode?
|
||||
* @default
|
||||
*/
|
||||
this.fullscreenKeyboard = false;
|
||||
|
||||
// Run the checks
|
||||
this._checkAudio();
|
||||
this._checkBrowser();
|
||||
this._checkCSS3D();
|
||||
this._checkDevice();
|
||||
this._checkFeatures();
|
||||
this._checkOS();
|
||||
|
||||
};
|
||||
|
||||
Phaser.Device.LITTLE_ENDIAN = false;
|
||||
|
||||
Phaser.Device.prototype = {
|
||||
|
||||
/**
|
||||
* Check which OS is game running on.
|
||||
* @method Phaser.Device#_checkOS
|
||||
* @private
|
||||
*/
|
||||
_checkOS: function () {
|
||||
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
if (/Android/.test(ua))
|
||||
{
|
||||
this.android = true;
|
||||
}
|
||||
else if (/CrOS/.test(ua))
|
||||
{
|
||||
this.chromeOS = true;
|
||||
}
|
||||
else if (/iP[ao]d|iPhone/i.test(ua))
|
||||
{
|
||||
this.iOS = true;
|
||||
}
|
||||
else if (/Linux/.test(ua))
|
||||
{
|
||||
this.linux = true;
|
||||
}
|
||||
else if (/Mac OS/.test(ua))
|
||||
{
|
||||
this.macOS = true;
|
||||
}
|
||||
else if (/Windows/.test(ua))
|
||||
{
|
||||
this.windows = true;
|
||||
|
||||
if (/Windows Phone/i.test(ua))
|
||||
{
|
||||
this.windowsPhone = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.windows || this.macOS || (this.linux && this.silk === false))
|
||||
{
|
||||
this.desktop = true;
|
||||
}
|
||||
|
||||
// Windows Phone / Table reset
|
||||
if (this.windowsPhone || ((/Windows NT/i.test(ua)) && (/Touch/i.test(ua))))
|
||||
{
|
||||
this.desktop = false;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check HTML5 features of the host environment.
|
||||
* @method Phaser.Device#_checkFeatures
|
||||
* @private
|
||||
*/
|
||||
_checkFeatures: function () {
|
||||
|
||||
this.canvas = !!window['CanvasRenderingContext2D'] || this.cocoonJS;
|
||||
|
||||
try {
|
||||
this.localStorage = !!localStorage.getItem;
|
||||
} catch (error) {
|
||||
this.localStorage = false;
|
||||
}
|
||||
|
||||
this.file = !!window['File'] && !!window['FileReader'] && !!window['FileList'] && !!window['Blob'];
|
||||
this.fileSystem = !!window['requestFileSystem'];
|
||||
this.webGL = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )();
|
||||
|
||||
if (this.webGL === null || this.webGL === false)
|
||||
{
|
||||
this.webGL = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.webGL = true;
|
||||
}
|
||||
|
||||
this.worker = !!window['Worker'];
|
||||
|
||||
if ('ontouchstart' in document.documentElement || (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 1))
|
||||
{
|
||||
this.touch = true;
|
||||
}
|
||||
|
||||
if (window.navigator.msPointerEnabled || window.navigator.pointerEnabled)
|
||||
{
|
||||
this.mspointer = true;
|
||||
}
|
||||
|
||||
this.pointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
|
||||
|
||||
this.quirksMode = (document.compatMode === 'CSS1Compat') ? false : true;
|
||||
|
||||
this.getUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Checks for support of the Full Screen API.
|
||||
*
|
||||
* @method Phaser.Device#checkFullScreenSupport
|
||||
*/
|
||||
checkFullScreenSupport: function () {
|
||||
|
||||
var fs = [
|
||||
'requestFullscreen',
|
||||
'requestFullScreen',
|
||||
'webkitRequestFullscreen',
|
||||
'webkitRequestFullScreen',
|
||||
'msRequestFullscreen',
|
||||
'msRequestFullScreen',
|
||||
'mozRequestFullScreen',
|
||||
'mozRequestFullscreen'
|
||||
];
|
||||
|
||||
for (var i = 0; i < fs.length; i++)
|
||||
{
|
||||
if (this.game.canvas[fs[i]])
|
||||
{
|
||||
this.fullscreen = true;
|
||||
this.requestFullscreen = fs[i];
|
||||
}
|
||||
}
|
||||
|
||||
var cfs = [
|
||||
'cancelFullScreen',
|
||||
'exitFullscreen',
|
||||
'webkitCancelFullScreen',
|
||||
'webkitExitFullscreen',
|
||||
'msCancelFullScreen',
|
||||
'msExitFullscreen',
|
||||
'mozCancelFullScreen',
|
||||
'mozExitFullscreen'
|
||||
];
|
||||
|
||||
if (this.fullscreen)
|
||||
{
|
||||
for (var i = 0; i < cfs.length; i++)
|
||||
{
|
||||
if (this.game.canvas[cfs[i]])
|
||||
{
|
||||
this.cancelFullscreen = cfs[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard Input?
|
||||
if (window['Element'] && Element['ALLOW_KEYBOARD_INPUT'])
|
||||
{
|
||||
this.fullscreenKeyboard = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check what browser is game running in.
|
||||
* @method Phaser.Device#_checkBrowser
|
||||
* @private
|
||||
*/
|
||||
_checkBrowser: function () {
|
||||
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
if (/Arora/.test(ua))
|
||||
{
|
||||
this.arora = true;
|
||||
}
|
||||
else if (/Chrome/.test(ua))
|
||||
{
|
||||
this.chrome = true;
|
||||
}
|
||||
else if (/Epiphany/.test(ua))
|
||||
{
|
||||
this.epiphany = true;
|
||||
}
|
||||
else if (/Firefox/.test(ua))
|
||||
{
|
||||
this.firefox = true;
|
||||
}
|
||||
else if (/Mobile Safari/.test(ua))
|
||||
{
|
||||
this.mobileSafari = true;
|
||||
}
|
||||
else if (/MSIE (\d+\.\d+);/.test(ua))
|
||||
{
|
||||
this.ie = true;
|
||||
this.ieVersion = parseInt(RegExp.$1, 10);
|
||||
}
|
||||
else if (/Midori/.test(ua))
|
||||
{
|
||||
this.midori = true;
|
||||
}
|
||||
else if (/Opera/.test(ua))
|
||||
{
|
||||
this.opera = true;
|
||||
}
|
||||
else if (/Safari/.test(ua))
|
||||
{
|
||||
this.safari = true;
|
||||
}
|
||||
else if (/Trident\/(\d+\.\d+)(.*)rv:(\d+\.\d+)/.test(ua))
|
||||
{
|
||||
this.ie = true;
|
||||
this.trident = true;
|
||||
this.tridentVersion = parseInt(RegExp.$1, 10);
|
||||
this.ieVersion = parseInt(RegExp.$3, 10);
|
||||
}
|
||||
|
||||
//Silk gets its own if clause because its ua also contains 'Safari'
|
||||
if (/Silk/.test(ua))
|
||||
{
|
||||
this.silk = true;
|
||||
}
|
||||
|
||||
// WebApp mode in iOS
|
||||
if (navigator['standalone'])
|
||||
{
|
||||
this.webApp = true;
|
||||
}
|
||||
|
||||
if (navigator['isCocoonJS'])
|
||||
{
|
||||
this.cocoonJS = true;
|
||||
}
|
||||
|
||||
if (typeof window.ejecta !== "undefined")
|
||||
{
|
||||
this.ejecta = true;
|
||||
}
|
||||
|
||||
if (/Crosswalk/.test(ua))
|
||||
{
|
||||
this.crosswalk = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check audio support.
|
||||
* @method Phaser.Device#_checkAudio
|
||||
* @private
|
||||
*/
|
||||
_checkAudio: function () {
|
||||
|
||||
this.audioData = !!(window['Audio']);
|
||||
this.webAudio = !!(window['webkitAudioContext'] || window['AudioContext']);
|
||||
var audioElement = document.createElement('audio');
|
||||
var result = false;
|
||||
|
||||
try {
|
||||
if (result = !!audioElement.canPlayType) {
|
||||
|
||||
if (audioElement.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, '')) {
|
||||
this.ogg = true;
|
||||
}
|
||||
|
||||
if (audioElement.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, '')) {
|
||||
this.opus = true;
|
||||
}
|
||||
|
||||
if (audioElement.canPlayType('audio/mpeg;').replace(/^no$/, '')) {
|
||||
this.mp3 = true;
|
||||
}
|
||||
|
||||
// Mimetypes accepted:
|
||||
// developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
|
||||
// bit.ly/iphoneoscodecs
|
||||
if (audioElement.canPlayType('audio/wav; codecs="1"').replace(/^no$/, '')) {
|
||||
this.wav = true;
|
||||
}
|
||||
|
||||
if (audioElement.canPlayType('audio/x-m4a;') || audioElement.canPlayType('audio/aac;').replace(/^no$/, '')) {
|
||||
this.m4a = true;
|
||||
}
|
||||
|
||||
if (audioElement.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')) {
|
||||
this.webm = true;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check PixelRatio, iOS device, Vibration API, ArrayBuffers and endianess.
|
||||
* @method Phaser.Device#_checkDevice
|
||||
* @private
|
||||
*/
|
||||
_checkDevice: function () {
|
||||
|
||||
this.pixelRatio = window['devicePixelRatio'] || 1;
|
||||
this.iPhone = navigator.userAgent.toLowerCase().indexOf('iphone') != -1;
|
||||
this.iPhone4 = (this.pixelRatio == 2 && this.iPhone);
|
||||
this.iPad = navigator.userAgent.toLowerCase().indexOf('ipad') != -1;
|
||||
|
||||
if (typeof Int8Array !== 'undefined')
|
||||
{
|
||||
this.typedArray = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.typedArray = false;
|
||||
}
|
||||
|
||||
if (typeof ArrayBuffer !== 'undefined' && typeof Uint8Array !== 'undefined' && typeof Uint32Array !== 'undefined')
|
||||
{
|
||||
this.littleEndian = this._checkIsLittleEndian();
|
||||
Phaser.Device.LITTLE_ENDIAN = this.littleEndian;
|
||||
}
|
||||
|
||||
this.support32bit = (typeof ArrayBuffer !== "undefined" && typeof Uint8ClampedArray !== "undefined" && typeof Int32Array !== "undefined" && this.littleEndian !== null && this._checkIsUint8ClampedImageData());
|
||||
|
||||
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
|
||||
|
||||
if (navigator.vibrate)
|
||||
{
|
||||
this.vibration = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check Little or Big Endian system.
|
||||
* @author Matt DesLauriers (@mattdesl)
|
||||
* @method Phaser.Device#_checkIsLittleEndian
|
||||
* @private
|
||||
*/
|
||||
_checkIsLittleEndian: function () {
|
||||
|
||||
var a = new ArrayBuffer(4);
|
||||
var b = new Uint8Array(a);
|
||||
var c = new Uint32Array(a);
|
||||
|
||||
b[0] = 0xa1;
|
||||
b[1] = 0xb2;
|
||||
b[2] = 0xc3;
|
||||
b[3] = 0xd4;
|
||||
|
||||
if (c[0] == 0xd4c3b2a1)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
if (c[0] == 0xa1b2c3d4)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Could not determine endianness
|
||||
return null;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Test to see if ImageData uses CanvasPixelArray or Uint8ClampedArray.
|
||||
* @author Matt DesLauriers (@mattdesl)
|
||||
* @method Phaser.Device#_checkIsUint8ClampedImageData
|
||||
* @private
|
||||
*/
|
||||
_checkIsUint8ClampedImageData: function () {
|
||||
|
||||
if (typeof Uint8ClampedArray === "undefined")
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
var elem = document.createElement('canvas');
|
||||
var ctx = elem.getContext('2d');
|
||||
|
||||
if (!ctx)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
var image = ctx.createImageData(1, 1);
|
||||
|
||||
return image.data instanceof Uint8ClampedArray;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check whether the host environment support 3D CSS.
|
||||
* @method Phaser.Device#_checkCSS3D
|
||||
* @private
|
||||
*/
|
||||
_checkCSS3D: function () {
|
||||
|
||||
var el = document.createElement('p');
|
||||
var has3d;
|
||||
var transforms = {
|
||||
'webkitTransform': '-webkit-transform',
|
||||
'OTransform': '-o-transform',
|
||||
'msTransform': '-ms-transform',
|
||||
'MozTransform': '-moz-transform',
|
||||
'transform': 'transform'
|
||||
};
|
||||
|
||||
// Add it to the body to get the computed style.
|
||||
document.body.insertBefore(el, null);
|
||||
|
||||
for (var t in transforms)
|
||||
{
|
||||
if (el.style[t] !== undefined)
|
||||
{
|
||||
el.style[t] = "translate3d(1px,1px,1px)";
|
||||
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
this.css3D = (has3d !== undefined && has3d.length > 0 && has3d !== "none");
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check whether the host environment can play audio.
|
||||
* @method Phaser.Device#canPlayAudio
|
||||
* @param {string} type - One of 'mp3, 'ogg', 'm4a', 'wav', 'webm'.
|
||||
* @return {boolean} True if the given file type is supported by the browser, otherwise false.
|
||||
*/
|
||||
canPlayAudio: function (type) {
|
||||
|
||||
if (type == 'mp3' && this.mp3)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else if (type == 'ogg' && (this.ogg || this.opus))
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else if (type == 'm4a' && this.m4a)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else if (type == 'wav' && this.wav)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else if (type == 'webm' && this.webm)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check whether the console is open.
|
||||
* Note that this only works in Firefox with Firebug and earlier versions of Chrome.
|
||||
* It used to work in Chrome, but then they removed the ability: http://src.chromium.org/viewvc/blink?view=revision&revision=151136
|
||||
*
|
||||
* @method Phaser.Device#isConsoleOpen
|
||||
* @return {boolean} True if the browser dev console is open.
|
||||
*/
|
||||
isConsoleOpen: function () {
|
||||
|
||||
if (window.console && window.console['firebug'])
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
if (window.console)
|
||||
{
|
||||
console.profile();
|
||||
console.profileEnd();
|
||||
|
||||
if (console.clear)
|
||||
{
|
||||
console.clear();
|
||||
}
|
||||
|
||||
if (console['profiles'])
|
||||
{
|
||||
return console['profiles'].length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Phaser.Device.prototype.constructor = Phaser.Device;
|
||||
166
src/system/RequestAnimationFrame.js
Normal file
166
src/system/RequestAnimationFrame.js
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Abstracts away the use of RAF or setTimeOut for the core game update loop.
|
||||
*
|
||||
* @class Phaser.RequestAnimationFrame
|
||||
* @constructor
|
||||
* @param {Phaser.Game} game - A reference to the currently running game.
|
||||
* @param {boolean} [forceSetTimeOut=false] - Tell Phaser to use setTimeOut even if raf is available.
|
||||
*/
|
||||
Phaser.RequestAnimationFrame = function(game, forceSetTimeOut) {
|
||||
|
||||
if (typeof forceSetTimeOut === 'undefined') { forceSetTimeOut = false; }
|
||||
|
||||
/**
|
||||
* @property {Phaser.Game} game - The currently running game.
|
||||
*/
|
||||
this.game = game;
|
||||
|
||||
/**
|
||||
* @property {boolean} isRunning - true if RequestAnimationFrame is running, otherwise false.
|
||||
* @default
|
||||
*/
|
||||
this.isRunning = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} forceSetTimeOut - Tell Phaser to use setTimeOut even if raf is available.
|
||||
*/
|
||||
this.forceSetTimeOut = forceSetTimeOut;
|
||||
|
||||
var vendors = [
|
||||
'ms',
|
||||
'moz',
|
||||
'webkit',
|
||||
'o'
|
||||
];
|
||||
|
||||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; x++)
|
||||
{
|
||||
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'];
|
||||
}
|
||||
|
||||
/**
|
||||
* @property {boolean} _isSetTimeOut - true if the browser is using setTimeout instead of raf.
|
||||
* @private
|
||||
*/
|
||||
this._isSetTimeOut = false;
|
||||
|
||||
/**
|
||||
* @property {function} _onLoop - The function called by the update.
|
||||
* @private
|
||||
*/
|
||||
this._onLoop = null;
|
||||
|
||||
/**
|
||||
* @property {number} _timeOutID - The callback ID used when calling cancel.
|
||||
* @private
|
||||
*/
|
||||
this._timeOutID = null;
|
||||
|
||||
};
|
||||
|
||||
Phaser.RequestAnimationFrame.prototype = {
|
||||
|
||||
/**
|
||||
* Starts the requestAnimationFrame running or setTimeout if unavailable in browser
|
||||
* @method Phaser.RequestAnimationFrame#start
|
||||
*/
|
||||
start: function () {
|
||||
|
||||
this.isRunning = true;
|
||||
|
||||
var _this = this;
|
||||
|
||||
if (!window.requestAnimationFrame || this.forceSetTimeOut)
|
||||
{
|
||||
this._isSetTimeOut = true;
|
||||
|
||||
this._onLoop = function () {
|
||||
return _this.updateSetTimeout();
|
||||
};
|
||||
|
||||
this._timeOutID = window.setTimeout(this._onLoop, 0);
|
||||
}
|
||||
else
|
||||
{
|
||||
this._isSetTimeOut = false;
|
||||
|
||||
this._onLoop = function (time) {
|
||||
return _this.updateRAF(time);
|
||||
};
|
||||
|
||||
this._timeOutID = window.requestAnimationFrame(this._onLoop);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* The update method for the requestAnimationFrame
|
||||
* @method Phaser.RequestAnimationFrame#updateRAF
|
||||
*/
|
||||
updateRAF: function () {
|
||||
|
||||
this.game.update(Date.now());
|
||||
|
||||
this._timeOutID = window.requestAnimationFrame(this._onLoop);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* The update method for the setTimeout.
|
||||
* @method Phaser.RequestAnimationFrame#updateSetTimeout
|
||||
*/
|
||||
updateSetTimeout: function () {
|
||||
|
||||
this.game.update(Date.now());
|
||||
|
||||
this._timeOutID = window.setTimeout(this._onLoop, this.game.time.timeToCall);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Stops the requestAnimationFrame from running.
|
||||
* @method Phaser.RequestAnimationFrame#stop
|
||||
*/
|
||||
stop: function () {
|
||||
|
||||
if (this._isSetTimeOut)
|
||||
{
|
||||
clearTimeout(this._timeOutID);
|
||||
}
|
||||
else
|
||||
{
|
||||
window.cancelAnimationFrame(this._timeOutID);
|
||||
}
|
||||
|
||||
this.isRunning = false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the browser using setTimeout?
|
||||
* @method Phaser.RequestAnimationFrame#isSetTimeOut
|
||||
* @return {boolean}
|
||||
*/
|
||||
isSetTimeOut: function () {
|
||||
return this._isSetTimeOut;
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the browser using requestAnimationFrame?
|
||||
* @method Phaser.RequestAnimationFrame#isRAF
|
||||
* @return {boolean}
|
||||
*/
|
||||
isRAF: function () {
|
||||
return (this._isSetTimeOut === false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Phaser.RequestAnimationFrame.prototype.constructor = Phaser.RequestAnimationFrame;
|
||||
Reference in New Issue
Block a user