Skip to content

Commit cd805fd

Browse files
pandamicropandamicro
committed
Merge pull request cocos2d#3093 from pandamicro/develop
Added cc.view.setRealPixelResolution
2 parents 00dad6d + 2e45157 commit cd805fd

File tree

2 files changed

+92
-45
lines changed

2 files changed

+92
-45
lines changed

‎CCBoot.js‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1590,6 +1590,25 @@ cc._initSys = function (config, CONFIG_KEY) {
15901590
*/
15911591
sys.language = currLanguage;
15921592

1593+
// Get the os of system
1594+
var iOS = ( ua.match(/(iPad|iPhone|iPod)/i) ? true : false );
1595+
var isAndroid = ua.match(/android/i) || nav.platform.match(/android/i) ? true : false;
1596+
var osName = sys.OS_UNKNOWN;
1597+
if (nav.appVersion.indexOf("Win") !== -1) osName = sys.OS_WINDOWS;
1598+
else if (iOS) osName = sys.OS_IOS;
1599+
else if (nav.appVersion.indexOf("Mac") !== -1) osName = sys.OS_OSX;
1600+
else if (nav.appVersion.indexOf("X11") !== -1 && nav.appVersion.indexOf("Linux") === -1) osName = sys.OS_UNIX;
1601+
else if (isAndroid) osName = sys.OS_ANDROID;
1602+
else if (nav.appVersion.indexOf("Linux") !== -1) osName = sys.OS_LINUX;
1603+
1604+
/**
1605+
* Indicate the running os name
1606+
* @memberof cc.sys
1607+
* @name os
1608+
* @type {String}
1609+
*/
1610+
sys.os = osName;
1611+
15931612
/* Determine the browser type */
15941613
var browserType = sys.BROWSER_TYPE_UNKNOWN;
15951614
var browserTypes = ua.match(/sogou|qzone|liebao|micromessenger|qqbrowser|ucbrowser|360 aphone|360browser|baiduboxapp|baidubrowser|maxthon|trident|oupeng|opera|miuibrowser|firefox/i)
@@ -1658,24 +1677,20 @@ cc._initSys = function (config, CONFIG_KEY) {
16581677
*/
16591678
sys.browserVersion = browserVersion;
16601679

1661-
// Get the os of system
1662-
var iOS = ( ua.match(/(iPad|iPhone|iPod)/i) ? true : false );
1663-
var isAndroid = ua.match(/android/i) || nav.platform.match(/android/i) ? true : false;
1664-
var osName = sys.OS_UNKNOWN;
1665-
if (nav.appVersion.indexOf("Win") !== -1) osName = sys.OS_WINDOWS;
1666-
else if (iOS) osName = sys.OS_IOS;
1667-
else if (nav.appVersion.indexOf("Mac") !== -1) osName = sys.OS_OSX;
1668-
else if (nav.appVersion.indexOf("X11") !== -1 && nav.appVersion.indexOf("Linux") === -1) osName = sys.OS_UNIX;
1669-
else if (isAndroid) osName = sys.OS_ANDROID;
1670-
else if (nav.appVersion.indexOf("Linux") !== -1) osName = sys.OS_LINUX;
1680+
var w = window.innerWidth || document.documentElement.clientWidth;
1681+
var h = window.innerHeight || document.documentElement.clientHeight;
1682+
var ratio = window.devicePixelRatio || 1;
16711683

16721684
/**
1673-
* Indicate the running os name
1685+
* Indicate the real pixel resolution of the whole game window
16741686
* @memberof cc.sys
1675-
* @name os
1676-
* @type {String}
1687+
* @name windowPixelResolution
1688+
* @type {Number}
16771689
*/
1678-
sys.os = osName;
1690+
sys.windowPixelResolution = {
1691+
width: ratio * w,
1692+
height: ratio * h
1693+
};
16791694

16801695
//++++++++++++++++++something about cc._renderTYpe and cc._supportRender begin++++++++++++++++++++++++++++
16811696

‎cocos2d/core/platform/CCEGLView.js‎

Lines changed: 63 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
239239
*/
240240
setTargetDensityDPI: function(densityDPI){
241241
this._targetDensityDPI = densityDPI;
242-
this._setViewPortMeta();
242+
this._adjustViewportMeta();
243243
},
244244

245245
/**
@@ -300,41 +300,45 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
300300
this.setDesignResolutionSize(designWidth, designHeight, this._resolutionPolicy);
301301
},
302302

303-
_setViewPortMeta: function () {
304-
if (this._isAdjustViewPort) {
305-
var vp = document.getElementById("cocosMetaElement");
306-
if(vp){
307-
document.head.removeChild(vp);
308-
}
309-
310-
var viewportMetas,
311-
elems = document.getElementsByName("viewport"),
312-
currentVP = elems ? elems[0] : null,
313-
content;
303+
_setViewportMeta: function (metas, overwrite) {
304+
var vp = document.getElementById("cocosMetaElement");
305+
if(vp){
306+
document.head.removeChild(vp);
307+
}
314308

315-
vp = cc.newElement("meta");
316-
vp.id = "cocosMetaElement";
317-
vp.name = "viewport";
318-
vp.content = "";
309+
var elems = document.getElementsByName("viewport"),
310+
currentVP = elems ? elems[0] : null,
311+
content, key, pattern;
319312

320-
viewportMetas = cc.__BrowserGetter.meta;
313+
vp = cc.newElement("meta");
314+
vp.id = "cocosMetaElement";
315+
vp.name = "viewport";
316+
vp.content = "";
321317

322-
content = currentVP ? currentVP.content : "";
323-
for (var key in viewportMetas) {
324-
var pattern = new RegExp(key);
325-
if (!pattern.test(content)) {
326-
content += "," + key + "=" + viewportMetas[key];
327-
}
318+
content = currentVP ? currentVP.content : "";
319+
for (key in metas) {
320+
if (content.indexOf(key) == -1) {
321+
content += "," + key + "=" + metas[key];
328322
}
329-
if(/^,/.test(content))
330-
content = content.substr(1);
323+
else if (overwrite) {
324+
pattern = new RegExp(key+"\s*=\s*[^,]+");
325+
content.replace(pattern, key + "=" + metas[key]);
326+
}
327+
}
328+
if(/^,/.test(content))
329+
content = content.substr(1);
331330

332-
vp.content = content;
333-
// For adopting certain android devices which don't support second viewport
334-
if (currentVP)
335-
currentVP.content = content;
331+
vp.content = content;
332+
// For adopting certain android devices which don't support second viewport
333+
if (currentVP)
334+
currentVP.content = content;
335+
336+
document.head.appendChild(vp);
337+
},
336338

337-
document.head.appendChild(vp);
339+
_adjustViewportMeta: function () {
340+
if (this._isAdjustViewPort) {
341+
this._setViewportMeta(cc.__BrowserGetter.meta, false);
338342
}
339343
},
340344

@@ -585,7 +589,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
585589

586590
// Reinit frame size
587591
if(cc.sys.isMobile)
588-
this._setViewPortMeta();
592+
this._adjustViewportMeta();
589593

590594
this._initFrameSize();
591595

@@ -647,6 +651,34 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
647651
return cc.size(this._designResolutionSize.width, this._designResolutionSize.height);
648652
},
649653

654+
/**
655+
* Sets the document body to desired pixel resolution and fit the game content to it.
656+
* This function is very useful for adaptation in mobile browsers.
657+
* In some HD android devices, the resolution is very high, but its browser performance may not be very good.
658+
* In this case, enabling retina display is very costy and not suggested, and if retina is disabled, the image may be blurry.
659+
* But this API can be helpful to set a desired pixel resolution which is in between.
660+
* This API will do the following:
661+
* 1. Set viewport's width to the desired width in pixel
662+
* 2. Set body width to the exact pixel resolution
663+
* 3. The resolution policy will be reset with designed view size in points.
664+
* @param {Number} width Design resolution width.
665+
* @param {Number} height Design resolution height.
666+
* @param {cc.ResolutionPolicy|Number} resolutionPolicy The resolution policy desired
667+
*/
668+
setRealPixelResolution: function (width, height, resolutionPolicy) {
669+
// Set viewport's width
670+
this._setViewportMeta({"width": width, "user-scalable": "no"}, true);
671+
672+
// Set body width to the exact pixel resolution
673+
document.body.style.width = width + "px";
674+
document.body.style.height = "100%";
675+
document.body.style.left = "0px";
676+
document.body.style.top = "0px";
677+
678+
// Reset the resolution size and policy
679+
this.setDesignResolutionSize(width, height, resolutionPolicy);
680+
},
681+
650682
/**
651683
* Sets view port rectangle with points.
652684
* @param {Number} x

0 commit comments

Comments
 (0)