1 /**************************************************************************** 2 Copyright (c) 2008-2010 Ricardo Quesada 3 Copyright (c) 2011-2012 cocos2d-x.org 4 Copyright (c) 2013-2014 Chukong Technologies Inc. 5 6 http://www.cocos2d-x.org 7 8 Permission is hereby granted, free of charge, to any person obtaining a copy 9 of this software and associated documentation files (the "Software"), to deal 10 in the Software without restriction, including without limitation the rights 11 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 copies of the Software, and to permit persons to whom the Software is 13 furnished to do so, subject to the following conditions: 14 15 The above copyright notice and this permission notice shall be included in 16 all copies or substantial portions of the Software. 17 18 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 THE SOFTWARE. 25 ****************************************************************************/ 26 27 /** 28 * @ignore 29 */ 30 cc.Touches = []; 31 cc.TouchesIntergerDict = {}; 32 33 cc.DENSITYDPI_DEVICE = "device-dpi"; 34 cc.DENSITYDPI_HIGH = "high-dpi"; 35 cc.DENSITYDPI_MEDIUM = "medium-dpi"; 36 cc.DENSITYDPI_LOW = "low-dpi"; 37 38 var __BrowserGetter = { 39 init: function(){ 40 this.html = document.getElementsByTagName("html")[0]; 41 }, 42 availWidth: function(frame){ 43 if(!frame || frame === this.html) 44 return window.innerWidth; 45 else 46 return frame.clientWidth; 47 }, 48 availHeight: function(frame){ 49 if(!frame || frame === this.html) 50 return window.innerHeight; 51 else 52 return frame.clientHeight; 53 }, 54 meta: { 55 "width": "device-width" 56 }, 57 adaptationType: cc.sys.browserType 58 }; 59 60 if(window.navigator.userAgent.indexOf("OS 8_1_") > -1) //this mistake like MIUI, so use of MIUI treatment method 61 __BrowserGetter.adaptationType = cc.sys.BROWSER_TYPE_MIUI; 62 63 if(cc.sys.os === cc.sys.OS_IOS) // All browsers are WebView 64 __BrowserGetter.adaptationType = cc.sys.BROWSER_TYPE_SAFARI; 65 66 switch(__BrowserGetter.adaptationType){ 67 case cc.sys.BROWSER_TYPE_SAFARI: 68 __BrowserGetter.meta["minimal-ui"] = "true"; 69 __BrowserGetter.availWidth = function(frame){ 70 return frame.clientWidth; 71 }; 72 __BrowserGetter.availHeight = function(frame){ 73 return frame.clientHeight; 74 }; 75 break; 76 case cc.sys.BROWSER_TYPE_CHROME: 77 __BrowserGetter.__defineGetter__("target-densitydpi", function(){ 78 return cc.view._targetDensityDPI; 79 }); 80 case cc.sys.BROWSER_TYPE_SOUGOU: 81 case cc.sys.BROWSER_TYPE_UC: 82 __BrowserGetter.availWidth = function(frame){ 83 return frame.clientWidth; 84 }; 85 __BrowserGetter.availHeight = function(frame){ 86 return frame.clientHeight; 87 }; 88 break; 89 case cc.sys.BROWSER_TYPE_MIUI: 90 __BrowserGetter.init = function(view){ 91 if(view.__resizeWithBrowserSize) return; 92 var resize = function(){ 93 view.setDesignResolutionSize( 94 view._designResolutionSize.width, 95 view._designResolutionSize.height, 96 view._resolutionPolicy 97 ); 98 window.removeEventListener("resize", resize, false); 99 }; 100 window.addEventListener("resize", resize, false); 101 }; 102 break; 103 } 104 105 var _scissorRect = cc.rect(); 106 107 /** 108 * cc.view is the singleton object which represents the game window.<br/> 109 * It's main task include: <br/> 110 * - Apply the design resolution policy<br/> 111 * - Provide interaction with the window, like resize event on web, retina display support, etc...<br/> 112 * - Manage the game view port which can be different with the window<br/> 113 * - Manage the content scale and translation<br/> 114 * <br/> 115 * Since the cc.view is a singleton, you don't need to call any constructor or create functions,<br/> 116 * the standard way to use it is by calling:<br/> 117 * - cc.view.methodName(); <br/> 118 * @class 119 * @name cc.view 120 * @extend cc.Class 121 */ 122 cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ 123 _delegate: null, 124 // Size of parent node that contains cc.container and cc._canvas 125 _frameSize: null, 126 // resolution size, it is the size appropriate for the app resources. 127 _designResolutionSize: null, 128 _originalDesignResolutionSize: null, 129 // Viewport is the container's rect related to content's coordinates in pixel 130 _viewPortRect: null, 131 // The visible rect in content's coordinate in point 132 _visibleRect: null, 133 _retinaEnabled: false, 134 _autoFullScreen: false, 135 // The device's pixel ratio (for retina displays) 136 _devicePixelRatio: 1, 137 // the view name 138 _viewName: "", 139 // Custom callback for resize event 140 _resizeCallback: null, 141 _scaleX: 1, 142 _originalScaleX: 1, 143 _scaleY: 1, 144 _originalScaleY: 1, 145 146 _isRotated: false, 147 _orientation: 3, 148 149 _resolutionPolicy: null, 150 _rpExactFit: null, 151 _rpShowAll: null, 152 _rpNoBorder: null, 153 _rpFixedHeight: null, 154 _rpFixedWidth: null, 155 _initialized: false, 156 157 _contentTranslateLeftTop: null, 158 159 // Parent node that contains cc.container and cc._canvas 160 _frame: null, 161 _frameZoomFactor: 1.0, 162 __resizeWithBrowserSize: false, 163 _isAdjustViewPort: true, 164 _targetDensityDPI: null, 165 166 /** 167 * Constructor of cc.EGLView 168 */ 169 ctor: function () { 170 var _t = this, d = document, _strategyer = cc.ContainerStrategy, _strategy = cc.ContentStrategy; 171 172 __BrowserGetter.init(this); 173 174 _t._frame = (cc.container.parentNode === d.body) ? d.documentElement : cc.container.parentNode; 175 _t._frameSize = cc.size(0, 0); 176 _t._initFrameSize(); 177 178 var w = cc._canvas.width, h = cc._canvas.height; 179 _t._designResolutionSize = cc.size(w, h); 180 _t._originalDesignResolutionSize = cc.size(w, h); 181 _t._viewPortRect = cc.rect(0, 0, w, h); 182 _t._visibleRect = cc.rect(0, 0, w, h); 183 _t._contentTranslateLeftTop = {left: 0, top: 0}; 184 _t._viewName = "Cocos2dHTML5"; 185 186 var sys = cc.sys; 187 _t.enableRetina(sys.os === sys.OS_IOS || sys.os === sys.OS_OSX); 188 _t.enableAutoFullScreen(sys.isMobile && sys.browserType !== sys.BROWSER_TYPE_BAIDU); 189 cc.visibleRect && cc.visibleRect.init(_t._visibleRect); 190 191 // Setup system default resolution policies 192 _t._rpExactFit = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.EXACT_FIT); 193 _t._rpShowAll = new cc.ResolutionPolicy(_strategyer.PROPORTION_TO_FRAME, _strategy.SHOW_ALL); 194 _t._rpNoBorder = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.NO_BORDER); 195 _t._rpFixedHeight = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_HEIGHT); 196 _t._rpFixedWidth = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_WIDTH); 197 198 _t._targetDensityDPI = cc.DENSITYDPI_HIGH; 199 }, 200 201 // Resize helper functions 202 _resizeEvent: function () { 203 var view; 204 if (this.setDesignResolutionSize) { 205 view = this; 206 } else { 207 view = cc.view; 208 } 209 210 // Check frame size changed or not 211 var prevFrameW = view._frameSize.width, prevFrameH = view._frameSize.height, prevRotated = view._isRotated; 212 view._initFrameSize(); 213 if (view._isRotated === prevRotated && view._frameSize.width === prevFrameW && view._frameSize.height === prevFrameH) 214 return; 215 216 // Frame size changed, do resize works 217 if (view._resizeCallback) { 218 view._resizeCallback.call(); 219 } 220 var width = view._originalDesignResolutionSize.width; 221 var height = view._originalDesignResolutionSize.height; 222 if (width > 0) { 223 view.setDesignResolutionSize(width, height, view._resolutionPolicy); 224 } 225 }, 226 227 /** 228 * <p> 229 * Sets view's target-densitydpi for android mobile browser. it can be set to: <br/> 230 * 1. cc.DENSITYDPI_DEVICE, value is "device-dpi" <br/> 231 * 2. cc.DENSITYDPI_HIGH, value is "high-dpi" (default value) <br/> 232 * 3. cc.DENSITYDPI_MEDIUM, value is "medium-dpi" (browser's default value) <br/> 233 * 4. cc.DENSITYDPI_LOW, value is "low-dpi" <br/> 234 * 5. Custom value, e.g: "480" <br/> 235 * </p> 236 * @param {String} densityDPI 237 */ 238 setTargetDensityDPI: function(densityDPI){ 239 this._targetDensityDPI = densityDPI; 240 this._adjustViewportMeta(); 241 }, 242 243 /** 244 * Returns the current target-densitydpi value of cc.view. 245 * @returns {String} 246 */ 247 getTargetDensityDPI: function(){ 248 return this._targetDensityDPI; 249 }, 250 251 /** 252 * Sets whether resize canvas automatically when browser's size changed.<br/> 253 * Useful only on web. 254 * @param {Boolean} enabled Whether enable automatic resize with browser's resize event 255 */ 256 resizeWithBrowserSize: function (enabled) { 257 if (enabled) { 258 //enable 259 if (!this.__resizeWithBrowserSize) { 260 this.__resizeWithBrowserSize = true; 261 window.addEventListener('resize', this._resizeEvent); 262 window.addEventListener('orientationchange', this._resizeEvent); 263 } 264 } else { 265 //disable 266 if (this.__resizeWithBrowserSize) { 267 this.__resizeWithBrowserSize = false; 268 window.removeEventListener('resize', this._resizeEvent); 269 window.removeEventListener('orientationchange', this._resizeEvent); 270 } 271 } 272 }, 273 274 /** 275 * Sets the callback function for cc.view's resize action,<br/> 276 * this callback will be invoked before applying resolution policy, <br/> 277 * so you can do any additional modifications within the callback.<br/> 278 * Useful only on web. 279 * @param {Function|null} callback The callback function 280 */ 281 setResizeCallback: function (callback) { 282 if (cc.isFunction(callback) || callback == null) { 283 this._resizeCallback = callback; 284 } 285 }, 286 287 /** 288 * Sets the orientation of the game, it can be landscape, portrait or auto. 289 * When set it to landscape or portrait, and screen w/h ratio doesn't fit, 290 * cc.view will automatically rotate the game canvas using CSS. 291 * Note that this function doesn't have any effect in native, 292 * in native, you need to set the application orientation in native project settings 293 * @param {Number} orientation - Possible values: cc.ORIENTATION_LANDSCAPE | cc.ORIENTATION_PORTRAIT | cc.ORIENTATION_AUTO 294 */ 295 setOrientation: function (orientation) { 296 orientation = orientation & cc.ORIENTATION_AUTO; 297 if (orientation) { 298 this._orientation = orientation; 299 } 300 }, 301 302 _initFrameSize: function () { 303 var locFrameSize = this._frameSize; 304 var w = __BrowserGetter.availWidth(this._frame); 305 var h = __BrowserGetter.availHeight(this._frame); 306 var isLandscape = w >= h; 307 308 if (!cc.sys.isMobile || 309 (isLandscape && this._orientation & cc.ORIENTATION_LANDSCAPE) || 310 (!isLandscape && this._orientation & cc.ORIENTATION_PORTRAIT)) { 311 locFrameSize.width = w; 312 locFrameSize.height = h; 313 cc.container.style['-webkit-transform'] = 'rotate(0deg)'; 314 cc.container.style.transform = 'rotate(0deg)'; 315 this._isRotated = false; 316 } 317 else { 318 locFrameSize.width = h; 319 locFrameSize.height = w; 320 cc.container.style['-webkit-transform'] = 'rotate(90deg)'; 321 cc.container.style.transform = 'rotate(90deg)'; 322 cc.container.style['-webkit-transform-origin'] = '0px 0px 0px'; 323 cc.container.style.transformOrigin = '0px 0px 0px'; 324 this._isRotated = true; 325 } 326 }, 327 328 // hack 329 _adjustSizeKeepCanvasSize: function () { 330 var designWidth = this._originalDesignResolutionSize.width; 331 var designHeight = this._originalDesignResolutionSize.height; 332 if (designWidth > 0) 333 this.setDesignResolutionSize(designWidth, designHeight, this._resolutionPolicy); 334 }, 335 336 _setViewportMeta: function (metas, overwrite) { 337 var vp = document.getElementById("cocosMetaElement"); 338 if(vp && overwrite){ 339 document.head.removeChild(vp); 340 } 341 342 var elems = document.getElementsByName("viewport"), 343 currentVP = elems ? elems[0] : null, 344 content, key, pattern; 345 346 content = currentVP ? currentVP.content : ""; 347 vp = vp || document.createElement("meta"); 348 vp.id = "cocosMetaElement"; 349 vp.name = "viewport"; 350 vp.content = ""; 351 352 for (key in metas) { 353 if (content.indexOf(key) == -1) { 354 content += "," + key + "=" + metas[key]; 355 } 356 else if (overwrite) { 357 pattern = new RegExp(key+"\s*=\s*[^,]+"); 358 content.replace(pattern, key + "=" + metas[key]); 359 } 360 } 361 if(/^,/.test(content)) 362 content = content.substr(1); 363 364 vp.content = content; 365 // For adopting certain android devices which don't support second viewport 366 if (currentVP) 367 currentVP.content = content; 368 369 document.head.appendChild(vp); 370 }, 371 372 _adjustViewportMeta: function () { 373 if (this._isAdjustViewPort) { 374 this._setViewportMeta(__BrowserGetter.meta, false); 375 // Only adjust viewport once 376 this._isAdjustViewPort = false; 377 } 378 }, 379 380 // RenderTexture hacker 381 _setScaleXYForRenderTexture: function () { 382 //hack for RenderTexture on canvas mode when adapting multiple resolution resources 383 var scaleFactor = cc.contentScaleFactor(); 384 this._scaleX = scaleFactor; 385 this._scaleY = scaleFactor; 386 }, 387 388 // Other helper functions 389 _resetScale: function () { 390 this._scaleX = this._originalScaleX; 391 this._scaleY = this._originalScaleY; 392 }, 393 394 // Useless, just make sure the compatibility temporarily, should be removed 395 _adjustSizeToBrowser: function () { 396 }, 397 398 initialize: function () { 399 this._initialized = true; 400 }, 401 402 /** 403 * Sets whether the engine modify the "viewport" meta in your web page.<br/> 404 * It's enabled by default, we strongly suggest you not to disable it.<br/> 405 * And even when it's enabled, you can still set your own "viewport" meta, it won't be overridden<br/> 406 * Only useful on web 407 * @param {Boolean} enabled Enable automatic modification to "viewport" meta 408 */ 409 adjustViewPort: function (enabled) { 410 this._isAdjustViewPort = enabled; 411 }, 412 413 /** 414 * Retina support is enabled by default for Apple device but disabled for other devices,<br/> 415 * it takes effect only when you called setDesignResolutionPolicy<br/> 416 * Only useful on web 417 * @param {Boolean} enabled Enable or disable retina display 418 */ 419 enableRetina: function(enabled) { 420 this._retinaEnabled = enabled ? true : false; 421 }, 422 423 /** 424 * Check whether retina display is enabled.<br/> 425 * Only useful on web 426 * @return {Boolean} 427 */ 428 isRetinaEnabled: function() { 429 return this._retinaEnabled; 430 }, 431 432 /** 433 * If enabled, the application will try automatically to enter full screen mode on mobile devices<br/> 434 * You can pass true as parameter to enable it and disable it by passing false.<br/> 435 * Only useful on web 436 * @param {Boolean} enabled Enable or disable auto full screen on mobile devices 437 */ 438 enableAutoFullScreen: function(enabled) { 439 if (enabled && enabled !== this._autoFullScreen && cc.sys.isMobile && this._frame === document.documentElement) { 440 // Automatically full screen when user touches on mobile version 441 this._autoFullScreen = true; 442 cc.screen.autoFullScreen(this._frame); 443 } 444 else { 445 this._autoFullScreen = false; 446 } 447 }, 448 449 /** 450 * Check whether auto full screen is enabled.<br/> 451 * Only useful on web 452 * @return {Boolean} Auto full screen enabled or not 453 */ 454 isAutoFullScreenEnabled: function() { 455 return this._autoFullScreen; 456 }, 457 458 /** 459 * Force destroying EGL view, subclass must implement this method. 460 */ 461 end: function () { 462 }, 463 464 /** 465 * Get whether render system is ready(no matter opengl or canvas),<br/> 466 * this name is for the compatibility with cocos2d-x, subclass must implement this method. 467 * @return {Boolean} 468 */ 469 isOpenGLReady: function () { 470 return (cc.game.canvas && cc._renderContext); 471 }, 472 473 /* 474 * Set zoom factor for frame. This method is for debugging big resolution (e.g.new ipad) app on desktop. 475 * @param {Number} zoomFactor 476 */ 477 setFrameZoomFactor: function (zoomFactor) { 478 this._frameZoomFactor = zoomFactor; 479 this.centerWindow(); 480 cc.director.setProjection(cc.director.getProjection()); 481 }, 482 483 /** 484 * Exchanges the front and back buffers, subclass must implement this method. 485 */ 486 swapBuffers: function () { 487 }, 488 489 /** 490 * Open or close IME keyboard , subclass must implement this method. 491 * @param {Boolean} isOpen 492 */ 493 setIMEKeyboardState: function (isOpen) { 494 }, 495 496 /** 497 * Sets the resolution translate on EGLView 498 * @param {Number} offsetLeft 499 * @param {Number} offsetTop 500 */ 501 setContentTranslateLeftTop: function (offsetLeft, offsetTop) { 502 this._contentTranslateLeftTop = {left: offsetLeft, top: offsetTop}; 503 }, 504 505 /** 506 * Returns the resolution translate on EGLView 507 * @return {cc.Size|Object} 508 */ 509 getContentTranslateLeftTop: function () { 510 return this._contentTranslateLeftTop; 511 }, 512 513 /** 514 * Returns the canvas size of the view.<br/> 515 * On native platforms, it returns the screen size since the view is a fullscreen view.<br/> 516 * On web, it returns the size of the canvas element. 517 * @return {cc.Size} 518 */ 519 getCanvasSize: function () { 520 return cc.size(cc._canvas.width, cc._canvas.height); 521 }, 522 523 /** 524 * Returns the frame size of the view.<br/> 525 * On native platforms, it returns the screen size since the view is a fullscreen view.<br/> 526 * On web, it returns the size of the canvas's outer DOM element. 527 * @return {cc.Size} 528 */ 529 getFrameSize: function () { 530 return cc.size(this._frameSize.width, this._frameSize.height); 531 }, 532 533 /** 534 * On native, it sets the frame size of view.<br/> 535 * On web, it sets the size of the canvas's outer DOM element. 536 * @param {Number} width 537 * @param {Number} height 538 */ 539 setFrameSize: function (width, height) { 540 this._frameSize.width = width; 541 this._frameSize.height = height; 542 this._frame.style.width = width + "px"; 543 this._frame.style.height = height + "px"; 544 //this.centerWindow(); 545 this._resizeEvent(); 546 cc.director.setProjection(cc.director.getProjection()); 547 }, 548 549 /** 550 * Empty function 551 */ 552 centerWindow: function () { 553 }, 554 555 /** 556 * Returns the visible area size of the view port. 557 * @return {cc.Size} 558 */ 559 getVisibleSize: function () { 560 return cc.size(this._visibleRect.width,this._visibleRect.height); 561 }, 562 563 /** 564 * Returns the visible area size of the view port. 565 * @return {cc.Size} 566 */ 567 getVisibleSizeInPixel: function () { 568 return cc.size( this._visibleRect.width * this._scaleX, 569 this._visibleRect.height * this._scaleY ); 570 }, 571 572 /** 573 * Returns the visible origin of the view port. 574 * @return {cc.Point} 575 */ 576 getVisibleOrigin: function () { 577 return cc.p(this._visibleRect.x,this._visibleRect.y); 578 }, 579 580 /** 581 * Returns the visible origin of the view port. 582 * @return {cc.Point} 583 */ 584 getVisibleOriginInPixel: function () { 585 return cc.p(this._visibleRect.x * this._scaleX, 586 this._visibleRect.y * this._scaleY); 587 }, 588 589 /** 590 * Returns whether developer can set content's scale factor. 591 * @return {Boolean} 592 */ 593 canSetContentScaleFactor: function () { 594 return true; 595 }, 596 597 /** 598 * Returns the current resolution policy 599 * @see cc.ResolutionPolicy 600 * @return {cc.ResolutionPolicy} 601 */ 602 getResolutionPolicy: function () { 603 return this._resolutionPolicy; 604 }, 605 606 /** 607 * Sets the current resolution policy 608 * @see cc.ResolutionPolicy 609 * @param {cc.ResolutionPolicy|Number} resolutionPolicy 610 */ 611 setResolutionPolicy: function (resolutionPolicy) { 612 var _t = this; 613 if (resolutionPolicy instanceof cc.ResolutionPolicy) { 614 _t._resolutionPolicy = resolutionPolicy; 615 } 616 // Ensure compatibility with JSB 617 else { 618 var _locPolicy = cc.ResolutionPolicy; 619 if(resolutionPolicy === _locPolicy.EXACT_FIT) 620 _t._resolutionPolicy = _t._rpExactFit; 621 if(resolutionPolicy === _locPolicy.SHOW_ALL) 622 _t._resolutionPolicy = _t._rpShowAll; 623 if(resolutionPolicy === _locPolicy.NO_BORDER) 624 _t._resolutionPolicy = _t._rpNoBorder; 625 if(resolutionPolicy === _locPolicy.FIXED_HEIGHT) 626 _t._resolutionPolicy = _t._rpFixedHeight; 627 if(resolutionPolicy === _locPolicy.FIXED_WIDTH) 628 _t._resolutionPolicy = _t._rpFixedWidth; 629 } 630 }, 631 632 /** 633 * Sets the resolution policy with designed view size in points.<br/> 634 * The resolution policy include: <br/> 635 * [1] ResolutionExactFit Fill screen by stretch-to-fit: if the design resolution ratio of width to height is different from the screen resolution ratio, your game view will be stretched.<br/> 636 * [2] ResolutionNoBorder Full screen without black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two areas of your game view will be cut.<br/> 637 * [3] ResolutionShowAll Full screen with black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two black borders will be shown.<br/> 638 * [4] ResolutionFixedHeight Scale the content's height to screen's height and proportionally scale its width<br/> 639 * [5] ResolutionFixedWidth Scale the content's width to screen's width and proportionally scale its height<br/> 640 * [cc.ResolutionPolicy] [Web only feature] Custom resolution policy, constructed by cc.ResolutionPolicy<br/> 641 * @param {Number} width Design resolution width. 642 * @param {Number} height Design resolution height. 643 * @param {cc.ResolutionPolicy|Number} resolutionPolicy The resolution policy desired 644 */ 645 setDesignResolutionSize: function (width, height, resolutionPolicy) { 646 // Defensive code 647 if( !(width > 0 || height > 0) ){ 648 cc.log(cc._LogInfos.EGLView_setDesignResolutionSize); 649 return; 650 } 651 652 this.setResolutionPolicy(resolutionPolicy); 653 var policy = this._resolutionPolicy; 654 if (!policy){ 655 cc.log(cc._LogInfos.EGLView_setDesignResolutionSize_2); 656 return; 657 } 658 policy.preApply(this); 659 660 // Reinit frame size 661 if(cc.sys.isMobile) 662 this._adjustViewportMeta(); 663 664 this._initFrameSize(); 665 666 this._originalDesignResolutionSize.width = this._designResolutionSize.width = width; 667 this._originalDesignResolutionSize.height = this._designResolutionSize.height = height; 668 669 var result = policy.apply(this, this._designResolutionSize); 670 671 if(result.scale && result.scale.length === 2){ 672 this._scaleX = result.scale[0]; 673 this._scaleY = result.scale[1]; 674 } 675 676 if(result.viewport){ 677 var vp = this._viewPortRect, 678 vb = this._visibleRect, 679 rv = result.viewport; 680 681 vp.x = rv.x; 682 vp.y = rv.y; 683 vp.width = rv.width; 684 vp.height = rv.height; 685 686 vb.x = -vp.x / this._scaleX; 687 vb.y = -vp.y / this._scaleY; 688 vb.width = cc._canvas.width / this._scaleX; 689 vb.height = cc._canvas.height / this._scaleY; 690 cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y); 691 } 692 693 // reset director's member variables to fit visible rect 694 var director = cc.director; 695 director._winSizeInPoints.width = this._designResolutionSize.width; 696 director._winSizeInPoints.height = this._designResolutionSize.height; 697 policy.postApply(this); 698 cc.winSize.width = director._winSizeInPoints.width; 699 cc.winSize.height = director._winSizeInPoints.height; 700 701 if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) { 702 // reset director's member variables to fit visible rect 703 director.setGLDefaultValues(); 704 } 705 706 this._originalScaleX = this._scaleX; 707 this._originalScaleY = this._scaleY; 708 // For editbox 709 if (cc.DOM) 710 cc.DOM._resetEGLViewDiv(); 711 cc.visibleRect && cc.visibleRect.init(this._visibleRect); 712 }, 713 714 /** 715 * Returns the designed size for the view. 716 * Default resolution size is the same as 'getFrameSize'. 717 * @return {cc.Size} 718 */ 719 getDesignResolutionSize: function () { 720 return cc.size(this._designResolutionSize.width, this._designResolutionSize.height); 721 }, 722 723 /** 724 * Sets the document body to desired pixel resolution and fit the game content to it. 725 * This function is very useful for adaptation in mobile browsers. 726 * In some HD android devices, the resolution is very high, but its browser performance may not be very good. 727 * In this case, enabling retina display is very costy and not suggested, and if retina is disabled, the image may be blurry. 728 * But this API can be helpful to set a desired pixel resolution which is in between. 729 * This API will do the following: 730 * 1. Set viewport's width to the desired width in pixel 731 * 2. Set body width to the exact pixel resolution 732 * 3. The resolution policy will be reset with designed view size in points. 733 * @param {Number} width Design resolution width. 734 * @param {Number} height Design resolution height. 735 * @param {cc.ResolutionPolicy|Number} resolutionPolicy The resolution policy desired 736 */ 737 setRealPixelResolution: function (width, height, resolutionPolicy) { 738 // Set viewport's width 739 this._setViewportMeta({"width": width, "target-densitydpi": cc.DENSITYDPI_DEVICE}, true); 740 741 // Set body width to the exact pixel resolution 742 document.body.style.width = width + "px"; 743 document.body.style.left = "0px"; 744 document.body.style.top = "0px"; 745 746 // Reset the resolution size and policy 747 this.setDesignResolutionSize(width, height, resolutionPolicy); 748 }, 749 750 /** 751 * Sets view port rectangle with points. 752 * @param {Number} x 753 * @param {Number} y 754 * @param {Number} w width 755 * @param {Number} h height 756 */ 757 setViewPortInPoints: function (x, y, w, h) { 758 var locFrameZoomFactor = this._frameZoomFactor, locScaleX = this._scaleX, locScaleY = this._scaleY; 759 cc._renderContext.viewport((x * locScaleX * locFrameZoomFactor + this._viewPortRect.x * locFrameZoomFactor), 760 (y * locScaleY * locFrameZoomFactor + this._viewPortRect.y * locFrameZoomFactor), 761 (w * locScaleX * locFrameZoomFactor), 762 (h * locScaleY * locFrameZoomFactor)); 763 }, 764 765 /** 766 * Sets Scissor rectangle with points. 767 * @param {Number} x 768 * @param {Number} y 769 * @param {Number} w 770 * @param {Number} h 771 */ 772 setScissorInPoints: function (x, y, w, h) { 773 var zoomFactor = this._frameZoomFactor, scaleX = this._scaleX, scaleY = this._scaleY; 774 _scissorRect.x = x; 775 _scissorRect.y = y; 776 _scissorRect.width = w; 777 _scissorRect.height = h; 778 cc._renderContext.scissor(x * scaleX * zoomFactor + this._viewPortRect.x * zoomFactor, 779 y * scaleY * zoomFactor + this._viewPortRect.y * zoomFactor, 780 w * scaleX * zoomFactor, 781 h * scaleY * zoomFactor); 782 }, 783 784 /** 785 * Returns whether GL_SCISSOR_TEST is enable 786 * @return {Boolean} 787 */ 788 isScissorEnabled: function () { 789 return cc._renderContext.isEnabled(gl.SCISSOR_TEST); 790 }, 791 792 /** 793 * Returns the current scissor rectangle 794 * @return {cc.Rect} 795 */ 796 getScissorRect: function () { 797 return cc.rect(_scissorRect); 798 }, 799 800 /** 801 * Sets the name of the view 802 * @param {String} viewName 803 */ 804 setViewName: function (viewName) { 805 if (viewName != null && viewName.length > 0) { 806 this._viewName = viewName; 807 } 808 }, 809 810 /** 811 * Returns the name of the view 812 * @return {String} 813 */ 814 getViewName: function () { 815 return this._viewName; 816 }, 817 818 /** 819 * Returns the view port rectangle. 820 * @return {cc.Rect} 821 */ 822 getViewPortRect: function () { 823 return this._viewPortRect; 824 }, 825 826 /** 827 * Returns scale factor of the horizontal direction (X axis). 828 * @return {Number} 829 */ 830 getScaleX: function () { 831 return this._scaleX; 832 }, 833 834 /** 835 * Returns scale factor of the vertical direction (Y axis). 836 * @return {Number} 837 */ 838 getScaleY: function () { 839 return this._scaleY; 840 }, 841 842 /** 843 * Returns device pixel ratio for retina display. 844 * @return {Number} 845 */ 846 getDevicePixelRatio: function() { 847 return this._devicePixelRatio; 848 }, 849 850 /** 851 * Returns the real location in view for a translation based on a related position 852 * @param {Number} tx The X axis translation 853 * @param {Number} ty The Y axis translation 854 * @param {Object} relatedPos The related position object including "left", "top", "width", "height" informations 855 * @return {cc.Point} 856 */ 857 convertToLocationInView: function (tx, ty, relatedPos) { 858 var x = this._devicePixelRatio * (tx - relatedPos.left); 859 var y = this._devicePixelRatio * (relatedPos.top + relatedPos.height - ty); 860 return this._isRotated ? {x: this._viewPortRect.width - y, y: x} : {x: x, y: y}; 861 }, 862 863 _convertMouseToLocationInView: function(point, relatedPos) { 864 var locViewPortRect = this._viewPortRect, _t = this; 865 point.x = ((_t._devicePixelRatio * (point.x - relatedPos.left)) - locViewPortRect.x) / _t._scaleX; 866 point.y = (_t._devicePixelRatio * (relatedPos.top + relatedPos.height - point.y) - locViewPortRect.y) / _t._scaleY; 867 }, 868 869 _convertPointWithScale: function (point) { 870 var viewport = this._viewPortRect; 871 point.x = (point.x - viewport.x) / this._scaleX; 872 point.y = (point.y - viewport.y) / this._scaleY; 873 }, 874 875 _convertTouchesWithScale: function (touches) { 876 var viewport = this._viewPortRect, scaleX = this._scaleX, scaleY = this._scaleY, 877 selTouch, selPoint, selPrePoint; 878 for( var i = 0; i < touches.length; i++){ 879 selTouch = touches[i]; 880 selPoint = selTouch._point; 881 selPrePoint = selTouch._prevPoint; 882 883 selPoint.x = (selPoint.x - viewport.x) / scaleX; 884 selPoint.y = (selPoint.y - viewport.y) / scaleY; 885 selPrePoint.x = (selPrePoint.x - viewport.x) / scaleX; 886 selPrePoint.y = (selPrePoint.y - viewport.y) / scaleY; 887 } 888 } 889 }); 890 891 /** 892 * @function 893 * @return {cc.EGLView} 894 * @private 895 */ 896 cc.EGLView._getInstance = function () { 897 if (!this._instance) { 898 this._instance = this._instance || new cc.EGLView(); 899 this._instance.initialize(); 900 } 901 return this._instance; 902 }; 903 904 /** 905 * <p>cc.ContainerStrategy class is the root strategy class of container's scale strategy, 906 * it controls the behavior of how to scale the cc.container and cc._canvas object</p> 907 * 908 * @class 909 * @extends cc.Class 910 */ 911 cc.ContainerStrategy = cc.Class.extend(/** @lends cc.ContainerStrategy# */{ 912 /** 913 * Manipulation before appling the strategy 914 * @param {cc.view} The target view 915 */ 916 preApply: function (view) { 917 }, 918 919 /** 920 * Function to apply this strategy 921 * @param {cc.view} view 922 * @param {cc.Size} designedResolution 923 */ 924 apply: function (view, designedResolution) { 925 }, 926 927 /** 928 * Manipulation after applying the strategy 929 * @param {cc.view} view The target view 930 */ 931 postApply: function (view) { 932 933 }, 934 935 _setupContainer: function (view, w, h) { 936 var locCanvas = cc.game.canvas, locContainer = cc.game.container; 937 938 // Setup style 939 locContainer.style.width = locCanvas.style.width = w + 'px'; 940 locContainer.style.height = locCanvas.style.height = h + 'px'; 941 // Setup pixel ratio for retina display 942 var devicePixelRatio = view._devicePixelRatio = 1; 943 if (view.isRetinaEnabled()) 944 devicePixelRatio = view._devicePixelRatio = Math.min(2, window.devicePixelRatio || 1); 945 // Setup canvas 946 locCanvas.width = w * devicePixelRatio; 947 locCanvas.height = h * devicePixelRatio; 948 cc._renderContext.resetCache && cc._renderContext.resetCache(); 949 }, 950 951 _fixContainer: function () { 952 // Add container to document body 953 document.body.insertBefore(cc.container, document.body.firstChild); 954 // Set body's width height to window's size, and forbid overflow, so that game will be centered 955 var bs = document.body.style; 956 bs.width = window.innerWidth + "px"; 957 bs.height = window.innerHeight + "px"; 958 bs.overflow = "hidden"; 959 // Body size solution doesn't work on all mobile browser so this is the aleternative: fixed container 960 var contStyle = cc.container.style; 961 contStyle.position = "fixed"; 962 contStyle.left = contStyle.top = "0px"; 963 // Reposition body 964 document.body.scrollTop = 0; 965 } 966 }); 967 968 /** 969 * <p>cc.ContentStrategy class is the root strategy class of content's scale strategy, 970 * it controls the behavior of how to scale the scene and setup the viewport for the game</p> 971 * 972 * @class 973 * @extends cc.Class 974 */ 975 cc.ContentStrategy = cc.Class.extend(/** @lends cc.ContentStrategy# */{ 976 977 _result: { 978 scale: [1, 1], 979 viewport: null 980 }, 981 982 _buildResult: function (containerW, containerH, contentW, contentH, scaleX, scaleY) { 983 // Makes content fit better the canvas 984 Math.abs(containerW - contentW) < 2 && (contentW = containerW); 985 Math.abs(containerH - contentH) < 2 && (contentH = containerH); 986 987 var viewport = cc.rect(Math.round((containerW - contentW) / 2), 988 Math.round((containerH - contentH) / 2), 989 contentW, contentH); 990 991 // Translate the content 992 if (cc._renderType === cc.game.RENDER_TYPE_CANVAS){ 993 //TODO: modify something for setTransform 994 //cc._renderContext.translate(viewport.x, viewport.y + contentH); 995 } 996 997 this._result.scale = [scaleX, scaleY]; 998 this._result.viewport = viewport; 999 return this._result; 1000 }, 1001 1002 /** 1003 * Manipulation before applying the strategy 1004 * @param {cc.view} view The target view 1005 */ 1006 preApply: function (view) { 1007 }, 1008 1009 /** 1010 * Function to apply this strategy 1011 * The return value is {scale: [scaleX, scaleY], viewport: {cc.Rect}}, 1012 * The target view can then apply these value to itself, it's preferred not to modify directly its private variables 1013 * @param {cc.view} view 1014 * @param {cc.Size} designedResolution 1015 * @return {object} scaleAndViewportRect 1016 */ 1017 apply: function (view, designedResolution) { 1018 return {"scale": [1, 1]}; 1019 }, 1020 1021 /** 1022 * Manipulation after applying the strategy 1023 * @param {cc.view} view The target view 1024 */ 1025 postApply: function (view) { 1026 } 1027 }); 1028 1029 (function () { 1030 1031 // Container scale strategys 1032 /** 1033 * @class 1034 * @extends cc.ContainerStrategy 1035 */ 1036 var EqualToFrame = cc.ContainerStrategy.extend({ 1037 apply: function (view) { 1038 var frameH = view._frameSize.height, containerStyle = cc.container.style; 1039 this._setupContainer(view, view._frameSize.width, view._frameSize.height); 1040 // Setup container's margin and padding 1041 if (view._isRotated) { 1042 containerStyle.marginLeft = frameH + 'px'; 1043 } 1044 else { 1045 containerStyle.margin = '0px'; 1046 } 1047 } 1048 }); 1049 1050 /** 1051 * @class 1052 * @extends cc.ContainerStrategy 1053 */ 1054 var ProportionalToFrame = cc.ContainerStrategy.extend({ 1055 apply: function (view, designedResolution) { 1056 var frameW = view._frameSize.width, frameH = view._frameSize.height, containerStyle = cc.container.style, 1057 designW = designedResolution.width, designH = designedResolution.height, 1058 scaleX = frameW / designW, scaleY = frameH / designH, 1059 containerW, containerH; 1060 1061 scaleX < scaleY ? (containerW = frameW, containerH = designH * scaleX) : (containerW = designW * scaleY, containerH = frameH); 1062 1063 // Adjust container size with integer value 1064 var offx = Math.round((frameW - containerW) / 2); 1065 var offy = Math.round((frameH - containerH) / 2); 1066 containerW = frameW - 2 * offx; 1067 containerH = frameH - 2 * offy; 1068 1069 this._setupContainer(view, containerW, containerH); 1070 // Setup container's margin and padding 1071 if (view._isRotated) { 1072 containerStyle.marginLeft = frameH + 'px'; 1073 } 1074 else { 1075 containerStyle.margin = '0px'; 1076 } 1077 containerStyle.paddingLeft = offx + "px"; 1078 containerStyle.paddingRight = offx + "px"; 1079 containerStyle.paddingTop = offy + "px"; 1080 containerStyle.paddingBottom = offy + "px"; 1081 } 1082 }); 1083 1084 /** 1085 * @class 1086 * @extends EqualToFrame 1087 */ 1088 var EqualToWindow = EqualToFrame.extend({ 1089 preApply: function (view) { 1090 this._super(view); 1091 view._frame = document.documentElement; 1092 }, 1093 1094 apply: function (view) { 1095 this._super(view); 1096 this._fixContainer(); 1097 } 1098 }); 1099 1100 /** 1101 * @class 1102 * @extends ProportionalToFrame 1103 */ 1104 var ProportionalToWindow = ProportionalToFrame.extend({ 1105 preApply: function (view) { 1106 this._super(view); 1107 view._frame = document.documentElement; 1108 }, 1109 1110 apply: function (view, designedResolution) { 1111 this._super(view, designedResolution); 1112 this._fixContainer(); 1113 } 1114 }); 1115 1116 /** 1117 * @class 1118 * @extends cc.ContainerStrategy 1119 */ 1120 var OriginalContainer = cc.ContainerStrategy.extend({ 1121 apply: function (view) { 1122 this._setupContainer(view, cc._canvas.width, cc._canvas.height); 1123 } 1124 }); 1125 1126 // #NOT STABLE on Android# Alias: Strategy that makes the container's size equals to the window's size 1127 // cc.ContainerStrategy.EQUAL_TO_WINDOW = new EqualToWindow(); 1128 // #NOT STABLE on Android# Alias: Strategy that scale proportionally the container's size to window's size 1129 // cc.ContainerStrategy.PROPORTION_TO_WINDOW = new ProportionalToWindow(); 1130 // Alias: Strategy that makes the container's size equals to the frame's size 1131 cc.ContainerStrategy.EQUAL_TO_FRAME = new EqualToFrame(); 1132 // Alias: Strategy that scale proportionally the container's size to frame's size 1133 cc.ContainerStrategy.PROPORTION_TO_FRAME = new ProportionalToFrame(); 1134 // Alias: Strategy that keeps the original container's size 1135 cc.ContainerStrategy.ORIGINAL_CONTAINER = new OriginalContainer(); 1136 1137 // Content scale strategys 1138 var ExactFit = cc.ContentStrategy.extend({ 1139 apply: function (view, designedResolution) { 1140 var containerW = cc._canvas.width, containerH = cc._canvas.height, 1141 scaleX = containerW / designedResolution.width, scaleY = containerH / designedResolution.height; 1142 1143 return this._buildResult(containerW, containerH, containerW, containerH, scaleX, scaleY); 1144 } 1145 }); 1146 1147 var ShowAll = cc.ContentStrategy.extend({ 1148 apply: function (view, designedResolution) { 1149 var containerW = cc._canvas.width, containerH = cc._canvas.height, 1150 designW = designedResolution.width, designH = designedResolution.height, 1151 scaleX = containerW / designW, scaleY = containerH / designH, scale = 0, 1152 contentW, contentH; 1153 1154 scaleX < scaleY ? (scale = scaleX, contentW = containerW, contentH = designH * scale) 1155 : (scale = scaleY, contentW = designW * scale, contentH = containerH); 1156 1157 return this._buildResult(containerW, containerH, contentW, contentH, scale, scale); 1158 } 1159 }); 1160 1161 var NoBorder = cc.ContentStrategy.extend({ 1162 apply: function (view, designedResolution) { 1163 var containerW = cc._canvas.width, containerH = cc._canvas.height, 1164 designW = designedResolution.width, designH = designedResolution.height, 1165 scaleX = containerW / designW, scaleY = containerH / designH, scale, 1166 contentW, contentH; 1167 1168 scaleX < scaleY ? (scale = scaleY, contentW = designW * scale, contentH = containerH) 1169 : (scale = scaleX, contentW = containerW, contentH = designH * scale); 1170 1171 return this._buildResult(containerW, containerH, contentW, contentH, scale, scale); 1172 } 1173 }); 1174 1175 var FixedHeight = cc.ContentStrategy.extend({ 1176 apply: function (view, designedResolution) { 1177 var containerW = cc._canvas.width, containerH = cc._canvas.height, 1178 designH = designedResolution.height, scale = containerH / designH, 1179 contentW = containerW, contentH = containerH; 1180 1181 return this._buildResult(containerW, containerH, contentW, contentH, scale, scale); 1182 }, 1183 1184 postApply: function (view) { 1185 cc.director._winSizeInPoints = view.getVisibleSize(); 1186 } 1187 }); 1188 1189 var FixedWidth = cc.ContentStrategy.extend({ 1190 apply: function (view, designedResolution) { 1191 var containerW = cc._canvas.width, containerH = cc._canvas.height, 1192 designW = designedResolution.width, scale = containerW / designW, 1193 contentW = containerW, contentH = containerH; 1194 1195 return this._buildResult(containerW, containerH, contentW, contentH, scale, scale); 1196 }, 1197 1198 postApply: function (view) { 1199 cc.director._winSizeInPoints = view.getVisibleSize(); 1200 } 1201 }); 1202 1203 // Alias: Strategy to scale the content's size to container's size, non proportional 1204 cc.ContentStrategy.EXACT_FIT = new ExactFit(); 1205 // Alias: Strategy to scale the content's size proportionally to maximum size and keeps the whole content area to be visible 1206 cc.ContentStrategy.SHOW_ALL = new ShowAll(); 1207 // Alias: Strategy to scale the content's size proportionally to fill the whole container area 1208 cc.ContentStrategy.NO_BORDER = new NoBorder(); 1209 // Alias: Strategy to scale the content's height to container's height and proportionally scale its width 1210 cc.ContentStrategy.FIXED_HEIGHT = new FixedHeight(); 1211 // Alias: Strategy to scale the content's width to container's width and proportionally scale its height 1212 cc.ContentStrategy.FIXED_WIDTH = new FixedWidth(); 1213 1214 })(); 1215 1216 /** 1217 * <p>cc.ResolutionPolicy class is the root strategy class of scale strategy, 1218 * its main task is to maintain the compatibility with Cocos2d-x</p> 1219 * 1220 * @class 1221 * @extends cc.Class 1222 * @param {cc.ContainerStrategy} containerStg The container strategy 1223 * @param {cc.ContentStrategy} contentStg The content strategy 1224 */ 1225 cc.ResolutionPolicy = cc.Class.extend(/** @lends cc.ResolutionPolicy# */{ 1226 _containerStrategy: null, 1227 _contentStrategy: null, 1228 1229 /** 1230 * Constructor of cc.ResolutionPolicy 1231 * @param {cc.ContainerStrategy} containerStg 1232 * @param {cc.ContentStrategy} contentStg 1233 */ 1234 ctor: function (containerStg, contentStg) { 1235 this.setContainerStrategy(containerStg); 1236 this.setContentStrategy(contentStg); 1237 }, 1238 1239 /** 1240 * Manipulation before applying the resolution policy 1241 * @param {cc.view} view The target view 1242 */ 1243 preApply: function (view) { 1244 this._containerStrategy.preApply(view); 1245 this._contentStrategy.preApply(view); 1246 }, 1247 1248 /** 1249 * Function to apply this resolution policy 1250 * The return value is {scale: [scaleX, scaleY], viewport: {cc.Rect}}, 1251 * The target view can then apply these value to itself, it's preferred not to modify directly its private variables 1252 * @param {cc.view} view The target view 1253 * @param {cc.Size} designedResolution The user defined design resolution 1254 * @return {object} An object contains the scale X/Y values and the viewport rect 1255 */ 1256 apply: function (view, designedResolution) { 1257 this._containerStrategy.apply(view, designedResolution); 1258 return this._contentStrategy.apply(view, designedResolution); 1259 }, 1260 1261 /** 1262 * Manipulation after appyling the strategy 1263 * @param {cc.view} view The target view 1264 */ 1265 postApply: function (view) { 1266 this._containerStrategy.postApply(view); 1267 this._contentStrategy.postApply(view); 1268 }, 1269 1270 /** 1271 * Setup the container's scale strategy 1272 * @param {cc.ContainerStrategy} containerStg 1273 */ 1274 setContainerStrategy: function (containerStg) { 1275 if (containerStg instanceof cc.ContainerStrategy) 1276 this._containerStrategy = containerStg; 1277 }, 1278 1279 /** 1280 * Setup the content's scale strategy 1281 * @param {cc.ContentStrategy} contentStg 1282 */ 1283 setContentStrategy: function (contentStg) { 1284 if (contentStg instanceof cc.ContentStrategy) 1285 this._contentStrategy = contentStg; 1286 } 1287 }); 1288 1289 /** 1290 * @memberOf cc.ResolutionPolicy# 1291 * @name EXACT_FIT 1292 * @constant 1293 * @type Number 1294 * @static 1295 * The entire application is visible in the specified area without trying to preserve the original aspect ratio.<br/> 1296 * Distortion can occur, and the application may appear stretched or compressed. 1297 */ 1298 cc.ResolutionPolicy.EXACT_FIT = 0; 1299 1300 /** 1301 * @memberOf cc.ResolutionPolicy# 1302 * @name NO_BORDER 1303 * @constant 1304 * @type Number 1305 * @static 1306 * The entire application fills the specified area, without distortion but possibly with some cropping,<br/> 1307 * while maintaining the original aspect ratio of the application. 1308 */ 1309 cc.ResolutionPolicy.NO_BORDER = 1; 1310 1311 /** 1312 * @memberOf cc.ResolutionPolicy# 1313 * @name SHOW_ALL 1314 * @constant 1315 * @type Number 1316 * @static 1317 * The entire application is visible in the specified area without distortion while maintaining the original<br/> 1318 * aspect ratio of the application. Borders can appear on two sides of the application. 1319 */ 1320 cc.ResolutionPolicy.SHOW_ALL = 2; 1321 1322 /** 1323 * @memberOf cc.ResolutionPolicy# 1324 * @name FIXED_HEIGHT 1325 * @constant 1326 * @type Number 1327 * @static 1328 * The application takes the height of the design resolution size and modifies the width of the internal<br/> 1329 * canvas so that it fits the aspect ratio of the device<br/> 1330 * no distortion will occur however you must make sure your application works on different<br/> 1331 * aspect ratios 1332 */ 1333 cc.ResolutionPolicy.FIXED_HEIGHT = 3; 1334 1335 /** 1336 * @memberOf cc.ResolutionPolicy# 1337 * @name FIXED_WIDTH 1338 * @constant 1339 * @type Number 1340 * @static 1341 * The application takes the width of the design resolution size and modifies the height of the internal<br/> 1342 * canvas so that it fits the aspect ratio of the device<br/> 1343 * no distortion will occur however you must make sure your application works on different<br/> 1344 * aspect ratios 1345 */ 1346 cc.ResolutionPolicy.FIXED_WIDTH = 4; 1347 1348 /** 1349 * @memberOf cc.ResolutionPolicy# 1350 * @name UNKNOWN 1351 * @constant 1352 * @type Number 1353 * @static 1354 * Unknow policy 1355 */ 1356 cc.ResolutionPolicy.UNKNOWN = 5; 1357