Skip to content

Add cc.view.setOrientation to force game orientation always correct #3293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 26, 2016
Merged

Add cc.view.setOrientation to force game orientation always correct #3293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions CCBoot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
128 changes: 77 additions & 51 deletions cocos2d/core/platform/CCEGLView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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;
},

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
},

/*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
}
}
});
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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";
}
});

Expand Down
20 changes: 3 additions & 17 deletions cocos2d/core/platform/CCMacro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -----------------------------
Expand Down