diff --git a/CCBoot.js b/CCBoot.js index 4be84da2c6..0532c798ca 100644 --- a/CCBoot.js +++ b/CCBoot.js @@ -2638,15 +2638,6 @@ cc.game = /** @lends cc.game# */{ localCanvas.setAttribute("width", width || 480); localCanvas.setAttribute("height", height || 320); localCanvas.setAttribute("tabindex", 99); - localCanvas.style.outline = "none"; - localConStyle = localContainer.style; - localConStyle.width = (width || 480) + "px"; - localConStyle.height = (height || 320) + "px"; - localConStyle.margin = "0 auto"; - - localConStyle.position = 'relative'; - localConStyle.overflow = 'hidden'; - localContainer.top = '100%'; if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) { this._renderContext = cc._renderContext = cc.webglContext diff --git a/cocos2d/core/platform/CCEGLView.js b/cocos2d/core/platform/CCEGLView.js index 284f6178eb..949fd6e6b1 100644 --- a/cocos2d/core/platform/CCEGLView.js +++ b/cocos2d/core/platform/CCEGLView.js @@ -128,7 +128,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ _viewPortRect: null, // The visible rect in content's coordinate in point _visibleRect: null, - _retinaEnabled: false, + _retinaEnabled: false, _autoFullScreen: false, // The device's pixel ratio (for retina displays) _devicePixelRatio: 1, @@ -140,8 +140,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ _originalScaleX: 1, _scaleY: 1, _originalScaleY: 1, - _indexBitsUsed: 0, - _maxTouches: 5, + + _isRotated: false, + _orientation: 3, + _resolutionPolicy: null, _rpExactFit: null, _rpShowAll: null, @@ -150,11 +152,6 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ _rpFixedWidth: null, _initialized: false, - _captured: false, - _wnd: null, - _hDC: null, - _hRC: null, - _supportTouch: false, _contentTranslateLeftTop: null, // Parent node that contains cc.container and cc._canvas @@ -196,8 +193,6 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ _t._rpFixedHeight = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_HEIGHT); _t._rpFixedWidth = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_WIDTH); - _t._hDC = cc._canvas; - _t._hRC = cc._renderContext; _t._targetDensityDPI = cc.DENSITYDPI_HIGH; }, @@ -211,9 +206,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ } // Check frame size changed or not - var prevFrameW = view._frameSize.width, prevFrameH = view._frameSize.height; + var prevFrameW = view._frameSize.width, prevFrameH = view._frameSize.height, prevRotated = view._isRotated; view._initFrameSize(); - if (view._frameSize.width === prevFrameW && view._frameSize.height === prevFrameH) + if (view._isRotated === prevRotated && view._frameSize.width === prevFrameW && view._frameSize.height === prevFrameH) return; // Frame size changed, do resize works @@ -287,10 +282,45 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ } }, + /** + * Sets the orientation of the game, it can be landscape, portrait or auto. + * When set it to landscape or portrait, and screen w/h ratio doesn't fit, + * cc.view will automatically rotate the game canvas using CSS. + * Note that this function doesn't have any effect in native, + * in native, you need to set the application orientation in native project settings + * @param {Number} orientation - Possible values: cc.ORIENTATION_LANDSCAPE | cc.ORIENTATION_PORTRAIT | cc.ORIENTATION_AUTO + */ + setOrientation: function (orientation) { + orientation = orientation & cc.ORIENTATION_AUTO; + if (orientation) { + this._orientation = orientation; + } + }, + _initFrameSize: function () { var locFrameSize = this._frameSize; - locFrameSize.width = cc.__BrowserGetter.availWidth(this._frame); - locFrameSize.height = cc.__BrowserGetter.availHeight(this._frame); + var w = cc.__BrowserGetter.availWidth(this._frame); + var h = cc.__BrowserGetter.availHeight(this._frame); + var isLandscape = w >= h; + + if (!cc.sys.isMobile || + (isLandscape && this._orientation & cc.ORIENTATION_LANDSCAPE) || + (!isLandscape && this._orientation & cc.ORIENTATION_PORTRAIT)) { + locFrameSize.width = w; + locFrameSize.height = h; + cc.container.style['-webkit-transform'] = 'rotate(0deg)'; + cc.container.style.transform = 'rotate(0deg)'; + this._isRotated = false; + } + else { + locFrameSize.width = h; + locFrameSize.height = w; + cc.container.style['-webkit-transform'] = 'rotate(90deg)'; + cc.container.style.transform = 'rotate(90deg)'; + cc.container.style['-webkit-transform-origin'] = '0px 0px 0px'; + cc.container.style.transformOrigin = '0px 0px 0px'; + this._isRotated = true; + } }, // hack @@ -435,7 +465,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ * @return {Boolean} */ isOpenGLReady: function () { - return (this._hDC !== null && this._hRC !== null); + return (cc.game.canvas && cc._renderContext); }, /* @@ -655,7 +685,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ vb.y = -vp.y / this._scaleY; vb.width = cc._canvas.width / this._scaleX; vb.height = cc._canvas.height / this._scaleY; - cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y) + cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y); } // reset director's member variables to fit visible rect @@ -823,7 +853,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ * @return {cc.Point} */ convertToLocationInView: function (tx, ty, relatedPos) { - return {x: this._devicePixelRatio * (tx - relatedPos.left), y: this._devicePixelRatio * (relatedPos.top + relatedPos.height - ty)}; + var x = this._devicePixelRatio * (tx - relatedPos.left); + var y = this._devicePixelRatio * (relatedPos.top + relatedPos.height - ty); + return this._isRotated ? {x: this._viewPortRect.width - y, y: x} : {x: x, y: y}; }, _convertMouseToLocationInView: function(point, relatedPos) { @@ -833,15 +865,20 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ }, _convertTouchesWithScale: function(touches){ - var locViewPortRect = this._viewPortRect, locScaleX = this._scaleX, locScaleY = this._scaleY, selTouch, selPoint, selPrePoint; + var locViewPortRect = this._viewPortRect, locScaleX = this._scaleX, locScaleY = this._scaleY, + selTouch, selPoint, selPrePoint, selStartPoint; for( var i = 0; i < touches.length; i ++){ selTouch = touches[i]; selPoint = selTouch._point; - selPrePoint = selTouch._prevPoint; - selTouch._setPoint((selPoint.x - locViewPortRect.x) / locScaleX, - (selPoint.y - locViewPortRect.y) / locScaleY); - selTouch._setPrevPoint((selPrePoint.x - locViewPortRect.x) / locScaleX, - (selPrePoint.y - locViewPortRect.y) / locScaleY); + selPrePoint = selTouch._prevPoint; + selStartPoint = selTouch._startPoint; + + selPoint.x = (selPoint.x - locViewPortRect.x) / locScaleX; + selPoint.y = (selPoint.y - locViewPortRect.y) / locScaleY; + selPrePoint.x = (selPrePoint.x - locViewPortRect.x) / locScaleX; + selPrePoint.y = (selPrePoint.y - locViewPortRect.y) / locScaleY; + selStartPoint.x = (selStartPoint.x - locViewPortRect.x) / locScaleX; + selStartPoint.y = (selStartPoint.y - locViewPortRect.y) / locScaleY; } } }); @@ -891,36 +928,19 @@ cc.ContainerStrategy = cc.Class.extend(/** @lends cc.ContainerStrategy# */{ }, _setupContainer: function (view, w, h) { - var frame = view._frame; + var locCanvas = cc.game.canvas, locContainer = cc.game.container; - var locCanvasElement = cc._canvas, locContainer = cc.container; - // Setup container - locContainer.style.width = locCanvasElement.style.width = w + "px"; - locContainer.style.height = locCanvasElement.style.height = h + "px"; + // Setup style + locContainer.style.width = locCanvas.style.width = w + 'px'; + locContainer.style.height = locCanvas.style.height = h + 'px'; // Setup pixel ratio for retina display var devicePixelRatio = view._devicePixelRatio = 1; if (view.isRetinaEnabled()) devicePixelRatio = view._devicePixelRatio = Math.min(2, window.devicePixelRatio || 1); // Setup canvas - locCanvasElement.width = w * devicePixelRatio; - locCanvasElement.height = h * devicePixelRatio; + locCanvas.width = w * devicePixelRatio; + locCanvas.height = h * devicePixelRatio; cc._renderContext.resetCache && cc._renderContext.resetCache(); - - var body = document.body, style; - if (body && (style = body.style)) { - style.paddingTop = style.paddingTop || "0px"; - style.paddingRight = style.paddingRight || "0px"; - style.paddingBottom = style.paddingBottom || "0px"; - style.paddingLeft = style.paddingLeft || "0px"; - style.borderTop = style.borderTop || "0px"; - style.borderRight = style.borderRight || "0px"; - style.borderBottom = style.borderBottom || "0px"; - style.borderLeft = style.borderLeft || "0px"; - style.marginTop = style.marginTop || "0px"; - style.marginRight = style.marginRight || "0px"; - style.marginBottom = style.marginBottom || "0px"; - style.marginLeft = style.marginLeft || "0px"; - } }, _fixContainer: function () { @@ -1034,11 +1054,17 @@ cc.ContentStrategy = cc.Class.extend(/** @lends cc.ContentStrategy# */{ containerH = frameH - 2 * offy; this._setupContainer(view, containerW, containerH); - // Setup container's margin - containerStyle.marginLeft = offx + "px"; - containerStyle.marginRight = offx + "px"; - containerStyle.marginTop = offy + "px"; - containerStyle.marginBottom = offy + "px"; + // Setup container's margin and padding + if (view._isRotated) { + containerStyle.marginLeft = frameH + 'px'; + } + else { + containerStyle.margin = '0px'; + } + containerStyle.paddingLeft = offx + "px"; + containerStyle.paddingRight = offx + "px"; + containerStyle.paddingTop = offy + "px"; + containerStyle.paddingBottom = offy + "px"; } }); diff --git a/cocos2d/core/platform/CCMacro.js b/cocos2d/core/platform/CCMacro.js index d2e307be57..a9dce0d6ed 100644 --- a/cocos2d/core/platform/CCMacro.js +++ b/cocos2d/core/platform/CCMacro.js @@ -481,35 +481,21 @@ cc.checkGLErrorDebug = function () { * @constant * @type Number */ -cc.DEVICE_ORIENTATION_PORTRAIT = 0; +cc.ORIENTATION_PORTRAIT = 1; /** * Device oriented horizontally, home button on the right (UIDeviceOrientationLandscapeLeft) * @constant * @type Number */ -cc.DEVICE_ORIENTATION_LANDSCAPE_LEFT = 1; +cc.ORIENTATION_LANDSCAPE = 2; /** * Device oriented vertically, home button on the top (UIDeviceOrientationPortraitUpsideDown) * @constant * @type Number */ -cc.DEVICE_ORIENTATION_PORTRAIT_UPSIDE_DOWN = 2; - -/** - * Device oriented horizontally, home button on the left (UIDeviceOrientationLandscapeRight) - * @constant - * @type Number - */ -cc.DEVICE_ORIENTATION_LANDSCAPE_RIGHT = 3; - -/** - * In browsers, we only support 2 orientations by change window size. - * @constant - * @type Number - */ -cc.DEVICE_MAX_ORIENTATIONS = 2; +cc.ORIENTATION_AUTO = 3; // ------------------- vertex attrib flags -----------------------------