Skip to content

Commit ea7141f

Browse files
pandamicropandamicro
committed
Add cc.view.setOrientation to force game orientation always correct
1 parent fcbe0f9 commit ea7141f

File tree

3 files changed

+80
-77
lines changed

3 files changed

+80
-77
lines changed

Diff for: ‎CCBoot.js

-9
Original file line numberDiff line numberDiff line change
@@ -2638,15 +2638,6 @@ cc.game = /** @lends cc.game# */{
26382638
localCanvas.setAttribute("width", width || 480);
26392639
localCanvas.setAttribute("height", height || 320);
26402640
localCanvas.setAttribute("tabindex", 99);
2641-
localCanvas.style.outline = "none";
2642-
localConStyle = localContainer.style;
2643-
localConStyle.width = (width || 480) + "px";
2644-
localConStyle.height = (height || 320) + "px";
2645-
localConStyle.margin = "0 auto";
2646-
2647-
localConStyle.position = 'relative';
2648-
localConStyle.overflow = 'hidden';
2649-
localContainer.top = '100%';
26502641

26512642
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
26522643
this._renderContext = cc._renderContext = cc.webglContext

Diff for: ‎cocos2d/core/platform/CCEGLView.js

+77-51
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
128128
_viewPortRect: null,
129129
// The visible rect in content's coordinate in point
130130
_visibleRect: null,
131-
_retinaEnabled: false,
131+
_retinaEnabled: false,
132132
_autoFullScreen: false,
133133
// The device's pixel ratio (for retina displays)
134134
_devicePixelRatio: 1,
@@ -140,8 +140,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
140140
_originalScaleX: 1,
141141
_scaleY: 1,
142142
_originalScaleY: 1,
143-
_indexBitsUsed: 0,
144-
_maxTouches: 5,
143+
144+
_isRotated: false,
145+
_orientation: 3,
146+
145147
_resolutionPolicy: null,
146148
_rpExactFit: null,
147149
_rpShowAll: null,
@@ -150,11 +152,6 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
150152
_rpFixedWidth: null,
151153
_initialized: false,
152154

153-
_captured: false,
154-
_wnd: null,
155-
_hDC: null,
156-
_hRC: null,
157-
_supportTouch: false,
158155
_contentTranslateLeftTop: null,
159156

160157
// Parent node that contains cc.container and cc._canvas
@@ -196,8 +193,6 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
196193
_t._rpFixedHeight = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_HEIGHT);
197194
_t._rpFixedWidth = new cc.ResolutionPolicy(_strategyer.EQUAL_TO_FRAME, _strategy.FIXED_WIDTH);
198195

199-
_t._hDC = cc._canvas;
200-
_t._hRC = cc._renderContext;
201196
_t._targetDensityDPI = cc.DENSITYDPI_HIGH;
202197
},
203198

@@ -211,9 +206,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
211206
}
212207

213208
// Check frame size changed or not
214-
var prevFrameW = view._frameSize.width, prevFrameH = view._frameSize.height;
209+
var prevFrameW = view._frameSize.width, prevFrameH = view._frameSize.height, prevRotated = view._isRotated;
215210
view._initFrameSize();
216-
if (view._frameSize.width === prevFrameW && view._frameSize.height === prevFrameH)
211+
if (view._isRotated === prevRotated && view._frameSize.width === prevFrameW && view._frameSize.height === prevFrameH)
217212
return;
218213

219214
// Frame size changed, do resize works
@@ -287,10 +282,45 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
287282
}
288283
},
289284

285+
/**
286+
* Sets the orientation of the game, it can be landscape, portrait or auto.
287+
* When set it to landscape or portrait, and screen w/h ratio doesn't fit,
288+
* cc.view will automatically rotate the game canvas using CSS.
289+
* Note that this function doesn't have any effect in native,
290+
* in native, you need to set the application orientation in native project settings
291+
* @param {Number} orientation - Possible values: cc.ORIENTATION_LANDSCAPE | cc.ORIENTATION_PORTRAIT | cc.ORIENTATION_AUTO
292+
*/
293+
setOrientation: function (orientation) {
294+
orientation = orientation & cc.ORIENTATION_AUTO;
295+
if (orientation) {
296+
this._orientation = orientation;
297+
}
298+
},
299+
290300
_initFrameSize: function () {
291301
var locFrameSize = this._frameSize;
292-
locFrameSize.width = cc.__BrowserGetter.availWidth(this._frame);
293-
locFrameSize.height = cc.__BrowserGetter.availHeight(this._frame);
302+
var w = cc.__BrowserGetter.availWidth(this._frame);
303+
var h = cc.__BrowserGetter.availHeight(this._frame);
304+
var isLandscape = w >= h;
305+
306+
if (!cc.sys.isMobile ||
307+
(isLandscape && this._orientation & cc.ORIENTATION_LANDSCAPE) ||
308+
(!isLandscape && this._orientation & cc.ORIENTATION_PORTRAIT)) {
309+
locFrameSize.width = w;
310+
locFrameSize.height = h;
311+
cc.container.style['-webkit-transform'] = 'rotate(0deg)';
312+
cc.container.style.transform = 'rotate(0deg)';
313+
this._isRotated = false;
314+
}
315+
else {
316+
locFrameSize.width = h;
317+
locFrameSize.height = w;
318+
cc.container.style['-webkit-transform'] = 'rotate(90deg)';
319+
cc.container.style.transform = 'rotate(90deg)';
320+
cc.container.style['-webkit-transform-origin'] = '0px 0px 0px';
321+
cc.container.style.transformOrigin = '0px 0px 0px';
322+
this._isRotated = true;
323+
}
294324
},
295325

296326
// hack
@@ -435,7 +465,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
435465
* @return {Boolean}
436466
*/
437467
isOpenGLReady: function () {
438-
return (this._hDC !== null && this._hRC !== null);
468+
return (cc.game.canvas && cc._renderContext);
439469
},
440470

441471
/*
@@ -655,7 +685,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
655685
vb.y = -vp.y / this._scaleY;
656686
vb.width = cc._canvas.width / this._scaleX;
657687
vb.height = cc._canvas.height / this._scaleY;
658-
cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y)
688+
cc._renderContext.setOffset && cc._renderContext.setOffset(vp.x, -vp.y);
659689
}
660690

661691
// reset director's member variables to fit visible rect
@@ -823,7 +853,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
823853
* @return {cc.Point}
824854
*/
825855
convertToLocationInView: function (tx, ty, relatedPos) {
826-
return {x: this._devicePixelRatio * (tx - relatedPos.left), y: this._devicePixelRatio * (relatedPos.top + relatedPos.height - ty)};
856+
var x = this._devicePixelRatio * (tx - relatedPos.left);
857+
var y = this._devicePixelRatio * (relatedPos.top + relatedPos.height - ty);
858+
return this._isRotated ? {x: this._viewPortRect.width - y, y: x} : {x: x, y: y};
827859
},
828860

829861
_convertMouseToLocationInView: function(point, relatedPos) {
@@ -833,15 +865,20 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{
833865
},
834866

835867
_convertTouchesWithScale: function(touches){
836-
var locViewPortRect = this._viewPortRect, locScaleX = this._scaleX, locScaleY = this._scaleY, selTouch, selPoint, selPrePoint;
868+
var locViewPortRect = this._viewPortRect, locScaleX = this._scaleX, locScaleY = this._scaleY,
869+
selTouch, selPoint, selPrePoint, selStartPoint;
837870
for( var i = 0; i < touches.length; i ++){
838871
selTouch = touches[i];
839872
selPoint = selTouch._point;
840-
selPrePoint = selTouch._prevPoint;
841-
selTouch._setPoint((selPoint.x - locViewPortRect.x) / locScaleX,
842-
(selPoint.y - locViewPortRect.y) / locScaleY);
843-
selTouch._setPrevPoint((selPrePoint.x - locViewPortRect.x) / locScaleX,
844-
(selPrePoint.y - locViewPortRect.y) / locScaleY);
873+
selPrePoint = selTouch._prevPoint;
874+
selStartPoint = selTouch._startPoint;
875+
876+
selPoint.x = (selPoint.x - locViewPortRect.x) / locScaleX;
877+
selPoint.y = (selPoint.y - locViewPortRect.y) / locScaleY;
878+
selPrePoint.x = (selPrePoint.x - locViewPortRect.x) / locScaleX;
879+
selPrePoint.y = (selPrePoint.y - locViewPortRect.y) / locScaleY;
880+
selStartPoint.x = (selStartPoint.x - locViewPortRect.x) / locScaleX;
881+
selStartPoint.y = (selStartPoint.y - locViewPortRect.y) / locScaleY;
845882
}
846883
}
847884
});
@@ -891,36 +928,19 @@ cc.ContainerStrategy = cc.Class.extend(/** @lends cc.ContainerStrategy# */{
891928
},
892929

893930
_setupContainer: function (view, w, h) {
894-
var frame = view._frame;
931+
var locCanvas = cc.game.canvas, locContainer = cc.game.container;
895932

896-
var locCanvasElement = cc._canvas, locContainer = cc.container;
897-
// Setup container
898-
locContainer.style.width = locCanvasElement.style.width = w + "px";
899-
locContainer.style.height = locCanvasElement.style.height = h + "px";
933+
// Setup style
934+
locContainer.style.width = locCanvas.style.width = w + 'px';
935+
locContainer.style.height = locCanvas.style.height = h + 'px';
900936
// Setup pixel ratio for retina display
901937
var devicePixelRatio = view._devicePixelRatio = 1;
902938
if (view.isRetinaEnabled())
903939
devicePixelRatio = view._devicePixelRatio = Math.min(2, window.devicePixelRatio || 1);
904940
// Setup canvas
905-
locCanvasElement.width = w * devicePixelRatio;
906-
locCanvasElement.height = h * devicePixelRatio;
941+
locCanvas.width = w * devicePixelRatio;
942+
locCanvas.height = h * devicePixelRatio;
907943
cc._renderContext.resetCache && cc._renderContext.resetCache();
908-
909-
var body = document.body, style;
910-
if (body && (style = body.style)) {
911-
style.paddingTop = style.paddingTop || "0px";
912-
style.paddingRight = style.paddingRight || "0px";
913-
style.paddingBottom = style.paddingBottom || "0px";
914-
style.paddingLeft = style.paddingLeft || "0px";
915-
style.borderTop = style.borderTop || "0px";
916-
style.borderRight = style.borderRight || "0px";
917-
style.borderBottom = style.borderBottom || "0px";
918-
style.borderLeft = style.borderLeft || "0px";
919-
style.marginTop = style.marginTop || "0px";
920-
style.marginRight = style.marginRight || "0px";
921-
style.marginBottom = style.marginBottom || "0px";
922-
style.marginLeft = style.marginLeft || "0px";
923-
}
924944
},
925945

926946
_fixContainer: function () {
@@ -1034,11 +1054,17 @@ cc.ContentStrategy = cc.Class.extend(/** @lends cc.ContentStrategy# */{
10341054
containerH = frameH - 2 * offy;
10351055

10361056
this._setupContainer(view, containerW, containerH);
1037-
// Setup container's margin
1038-
containerStyle.marginLeft = offx + "px";
1039-
containerStyle.marginRight = offx + "px";
1040-
containerStyle.marginTop = offy + "px";
1041-
containerStyle.marginBottom = offy + "px";
1057+
// Setup container's margin and padding
1058+
if (view._isRotated) {
1059+
containerStyle.marginLeft = frameH + 'px';
1060+
}
1061+
else {
1062+
containerStyle.margin = '0px';
1063+
}
1064+
containerStyle.paddingLeft = offx + "px";
1065+
containerStyle.paddingRight = offx + "px";
1066+
containerStyle.paddingTop = offy + "px";
1067+
containerStyle.paddingBottom = offy + "px";
10421068
}
10431069
});
10441070

Diff for: ‎cocos2d/core/platform/CCMacro.js

+3-17
Original file line numberDiff line numberDiff line change
@@ -481,35 +481,21 @@ cc.checkGLErrorDebug = function () {
481481
* @constant
482482
* @type Number
483483
*/
484-
cc.DEVICE_ORIENTATION_PORTRAIT = 0;
484+
cc.ORIENTATION_PORTRAIT = 1;
485485

486486
/**
487487
* Device oriented horizontally, home button on the right (UIDeviceOrientationLandscapeLeft)
488488
* @constant
489489
* @type Number
490490
*/
491-
cc.DEVICE_ORIENTATION_LANDSCAPE_LEFT = 1;
491+
cc.ORIENTATION_LANDSCAPE = 2;
492492

493493
/**
494494
* Device oriented vertically, home button on the top (UIDeviceOrientationPortraitUpsideDown)
495495
* @constant
496496
* @type Number
497497
*/
498-
cc.DEVICE_ORIENTATION_PORTRAIT_UPSIDE_DOWN = 2;
499-
500-
/**
501-
* Device oriented horizontally, home button on the left (UIDeviceOrientationLandscapeRight)
502-
* @constant
503-
* @type Number
504-
*/
505-
cc.DEVICE_ORIENTATION_LANDSCAPE_RIGHT = 3;
506-
507-
/**
508-
* In browsers, we only support 2 orientations by change window size.
509-
* @constant
510-
* @type Number
511-
*/
512-
cc.DEVICE_MAX_ORIENTATIONS = 2;
498+
cc.ORIENTATION_AUTO = 3;
513499

514500

515501
// ------------------- vertex attrib flags -----------------------------

0 commit comments

Comments
 (0)