Created
August 23, 2014 19:43
-
-
Save bassarisse/aab5b28e7a41f8a435b7 to your computer and use it in GitHub Desktop.
cocos2d-html5 2.2.2 modification for CocoonJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| From b271f48c28604fde5b2562e2ecfd17aaaff0d74c Mon Sep 17 00:00:00 2001 | |
| From: Bruno Assarisse <bruno@assarisse.com.br> | |
| Date: Sat, 21 Jun 2014 18:53:01 -0300 | |
| Subject: [PATCH] Modifications on cocos2d for CocoonJS. | |
| --- | |
| cocos2d/core/platform/CCApplication.js | 97 +++++++++++++++++---------- | |
| cocos2d/core/platform/CCEGLView.js | 47 +++++++++---- | |
| cocos2d/core/platform/Sys.js | 2 +- | |
| cocos2d/core/platform/miniFramework.js | 2 +- | |
| cocos2d/core/sprite_nodes/CCSprite.js | 2 + | |
| cocos2d/jsloader.js | 27 +++++--- | |
| cocos2d/touch_dispatcher/CCTouchDispatcher.js | 6 +- | |
| 7 files changed, 118 insertions(+), 65 deletions(-) | |
| diff --git a/cocos2d/core/platform/CCApplication.js b/cocos2d/core/platform/CCApplication.js | |
| index 0d04e98..9f2a7dc 100755 | |
| --- a/cocos2d/core/platform/CCApplication.js | |
| +++ b/cocos2d/core/platform/CCApplication.js | |
| @@ -166,45 +166,65 @@ cc.isAddedHiddenEvent = false; | |
| * cc.setup("Cocos2dGameContainer"); | |
| */ | |
| cc.setup = function (el, width, height) { | |
| - var element = cc.$(el) || cc.$('#' + el); | |
| - var localCanvas, localContainer, localConStyle; | |
| - if (element.tagName == "CANVAS") { | |
| - width = width || element.width; | |
| - height = height || element.height; | |
| - | |
| - //it is already a canvas, we wrap it around with a div | |
| - localContainer = cc.container = cc.$new("DIV"); | |
| - localConStyle = localContainer.style; | |
| + var element, localCanvas, localContainer, localConStyle; | |
| + if (navigator.isCocoonJS) { | |
| + | |
| + width = width || window.innerWidth; | |
| + height = height || window.innerHeight; | |
| + | |
| + element = document.createElement("canvas"); | |
| + | |
| + if (typeof el === "string") | |
| + element.id = el; | |
| + element.width = width; | |
| + element.height = height; | |
| + element.style.cssText="idtkscale:ScaleAspectFit;"; | |
| + | |
| + document.body.appendChild(element); | |
| + | |
| localCanvas = cc.canvas = element; | |
| - localCanvas.parentNode.insertBefore(localContainer, localCanvas); | |
| - localCanvas.appendTo(localContainer); | |
| - localConStyle.width = (width || 480) + "px"; | |
| - localConStyle.height = (height || 320) + "px"; | |
| - localContainer.setAttribute('id', 'Cocos2dGameContainer'); | |
| - localConStyle.margin = "0 auto"; | |
| - localCanvas.setAttribute("width", width || 480); | |
| - localCanvas.setAttribute("height", height || 320); | |
| - } else {//we must make a new canvas and place into this element | |
| - if (element.tagName != "DIV") { | |
| - cc.log("Warning: target element is not a DIV or CANVAS"); | |
| + localContainer = cc.container = window; | |
| + | |
| + } else { | |
| + element = cc.$(el) || cc.$('#' + el); | |
| + if (element.tagName == "CANVAS") { | |
| + width = width || element.width; | |
| + height = height || element.height; | |
| + | |
| + //it is already a canvas, we wrap it around with a div | |
| + localContainer = cc.container = cc.$new("DIV"); | |
| + localConStyle = localContainer.style; | |
| + localCanvas = cc.canvas = element; | |
| + localCanvas.parentNode.insertBefore(localContainer, localCanvas); | |
| + localCanvas.appendTo(localContainer); | |
| + localConStyle.width = (width || 480) + "px"; | |
| + localConStyle.height = (height || 320) + "px"; | |
| + localContainer.setAttribute('id', 'Cocos2dGameContainer'); | |
| + localConStyle.margin = "0 auto"; | |
| + localCanvas.setAttribute("width", width || 480); | |
| + localCanvas.setAttribute("height", height || 320); | |
| + } else {//we must make a new canvas and place into this element | |
| + if (element.tagName != "DIV") { | |
| + cc.log("Warning: target element is not a DIV or CANVAS"); | |
| + } | |
| + width = width || element.clientWidth; | |
| + height = height || element.clientHeight; | |
| + | |
| + localCanvas = cc.canvas = cc.$new("CANVAS"); | |
| + localCanvas.addClass("gameCanvas"); | |
| + localCanvas.setAttribute("width", width || 480); | |
| + localCanvas.setAttribute("height", height || 320); | |
| + localContainer = cc.container = element; | |
| + localConStyle = localContainer.style; | |
| + element.appendChild(localCanvas); | |
| + localConStyle.width = (width || 480) + "px"; | |
| + localConStyle.height = (height || 320) + "px"; | |
| + localConStyle.margin = "0 auto"; | |
| } | |
| - width = width || element.clientWidth; | |
| - height = height || element.clientHeight; | |
| - | |
| - localCanvas = cc.canvas = cc.$new("CANVAS"); | |
| - localCanvas.addClass("gameCanvas"); | |
| - localCanvas.setAttribute("width", width || 480); | |
| - localCanvas.setAttribute("height", height || 320); | |
| - localContainer = cc.container = element; | |
| - localConStyle = localContainer.style; | |
| - element.appendChild(localCanvas); | |
| - localConStyle.width = (width || 480) + "px"; | |
| - localConStyle.height = (height || 320) + "px"; | |
| - localConStyle.margin = "0 auto"; | |
| + localConStyle.position = 'relative'; | |
| + localConStyle.overflow = 'hidden'; | |
| + localContainer.top = '100%'; | |
| } | |
| - localConStyle.position = 'relative'; | |
| - localConStyle.overflow = 'hidden'; | |
| - localContainer.top = '100%'; | |
| if(cc.__renderDoesnotSupport) | |
| return; | |
| @@ -224,7 +244,8 @@ cc.setup = function (el, width, height) { | |
| cc.renderContext = localCanvas.getContext("2d"); | |
| cc.mainRenderContextBackup = cc.renderContext; | |
| cc.renderContextType = cc.CANVAS; | |
| - cc.renderContext.translate(0, localCanvas.height); | |
| + if (!navigator.isCocoonJS) // not sure why this doesn't work on CocoonJS | |
| + cc.renderContext.translate(0, localCanvas.height); | |
| cc.drawingUtil = cc.DrawingPrimitiveCanvas ? new cc.DrawingPrimitiveCanvas(cc.renderContext) : null; | |
| } | |
| @@ -299,6 +320,8 @@ cc.setup = function (el, width, height) { | |
| cc._addUserSelectStatus = function(){ | |
| var fontStyle = document.createElement("style"); | |
| + if (!fontStyle) | |
| + return; | |
| fontStyle.type = "text/css"; | |
| document.body.appendChild(fontStyle); | |
| diff --git a/cocos2d/core/platform/CCEGLView.js b/cocos2d/core/platform/CCEGLView.js | |
| index 31ae5a8..9fc88bd 100755 | |
| --- a/cocos2d/core/platform/CCEGLView.js | |
| +++ b/cocos2d/core/platform/CCEGLView.js | |
| @@ -100,7 +100,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{ | |
| _isAdjustViewPort: false, | |
| ctor: function () { | |
| - this._frame = (cc.container.parentNode === document.body) ? document.documentElement : cc.container.parentNode; | |
| + if (navigator.isCocoonJS) | |
| + this._frame = window; | |
| + else | |
| + this._frame = (cc.container.parentNode === document.body) ? document.documentElement : cc.container.parentNode; | |
| this._frameSize = cc.size(0, 0); | |
| this._initFrameSize(); | |
| @@ -165,8 +168,13 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{ | |
| _initFrameSize: function () { | |
| var locFrameSize = this._frameSize; | |
| - locFrameSize.width = this._frame.clientWidth; | |
| - locFrameSize.height = this._frame.clientHeight; | |
| + if (typeof this._frame.clientWidth === "undefined") { | |
| + locFrameSize.width = this._frame.innerWidth; | |
| + locFrameSize.height = this._frame.innerHeight; | |
| + } else { | |
| + locFrameSize.width = this._frame.clientWidth; | |
| + locFrameSize.height = this._frame.clientHeight; | |
| + } | |
| }, | |
| // hack | |
| @@ -343,8 +351,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{ | |
| setFrameSize: function (width, height) { | |
| this._frameSize.width = width; | |
| this._frameSize.height = height; | |
| - this._frame.style.width = width + "px"; | |
| - this._frame.style.height = height + "px"; | |
| + if (this._frame.style) { | |
| + this._frame.style.width = width + "px"; | |
| + this._frame.style.height = height + "px"; | |
| + } | |
| //this.centerWindow(); | |
| this._resizeEvent(); | |
| cc.Director.getInstance().setProjection(cc.Director.getInstance().getProjection()); | |
| @@ -597,6 +607,8 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{ | |
| * Get the real location in view | |
| */ | |
| convertToLocationInView: function (tx, ty, relatedPos) { | |
| + if (navigator.isCocoonJS) | |
| + return {x: tx, y: cc.canvas.height - ty}; | |
| return {x: tx - relatedPos.left, y: relatedPos.top + relatedPos.height - ty}; | |
| }, | |
| @@ -874,9 +886,12 @@ cc.ContainerStrategy = cc.Class.extend({ | |
| // Setup canvas | |
| locCanvasElement.width = w; | |
| locCanvasElement.height = h; | |
| - // Setup container | |
| - locContainer.style.width = w + "px"; | |
| - locContainer.style.height = h + "px"; | |
| + | |
| + if (locContainer.style) { | |
| + // Setup container | |
| + locContainer.style.width = w + "px"; | |
| + locContainer.style.height = h + "px"; | |
| + } | |
| var body = document.body, style; | |
| if (body && (style = body.style)) { | |
| @@ -896,6 +911,9 @@ cc.ContainerStrategy = cc.Class.extend({ | |
| }, | |
| _fixContainer: function () { | |
| + if (navigator.isCocoonJS) | |
| + return; | |
| + | |
| // Add container to document body | |
| document.body.insertBefore(cc.container, document.body.firstChild); | |
| // Set body's width height to window's size, and forbid overflow, so that game will be centered | |
| @@ -993,11 +1011,14 @@ cc.ContentStrategy = cc.Class.extend({ | |
| containerH = frameH - 2 * offy; | |
| this._setupContainer(view._frame, containerW, containerH); | |
| - // Setup container's margin | |
| - containerStyle.marginLeft = offx + "px"; | |
| - containerStyle.marginRight = offx + "px"; | |
| - containerStyle.marginTop = offy + "px"; | |
| - containerStyle.marginBottom = offy + "px"; | |
| + | |
| + if (containerStyle) { | |
| + // Setup container's margin | |
| + containerStyle.marginLeft = offx + "px"; | |
| + containerStyle.marginRight = offx + "px"; | |
| + containerStyle.marginTop = offy + "px"; | |
| + containerStyle.marginBottom = offy + "px"; | |
| + } | |
| } | |
| }); | |
| diff --git a/cocos2d/core/platform/Sys.js b/cocos2d/core/platform/Sys.js | |
| index b89e9f9..684864f 100755 | |
| --- a/cocos2d/core/platform/Sys.js | |
| +++ b/cocos2d/core/platform/Sys.js | |
| @@ -53,7 +53,7 @@ Object.defineProperties(sys, | |
| if(cc.Browser.supportWebGL) | |
| capabilities["opengl"] = true; | |
| - if( 'ontouchstart' in document.documentElement || window.navigator.msPointerEnabled) | |
| + if( 'ontouchstart' in document.documentElement || window.navigator.msPointerEnabled || navigator.isCocoonJS) | |
| capabilities["touches"] = true; | |
| else if( 'onmouseup' in document.documentElement ) | |
| diff --git a/cocos2d/core/platform/miniFramework.js b/cocos2d/core/platform/miniFramework.js | |
| index 0f7cb14..7f330ff 100755 | |
| --- a/cocos2d/core/platform/miniFramework.js | |
| +++ b/cocos2d/core/platform/miniFramework.js | |
| @@ -63,7 +63,7 @@ cc.Browser.webglWhiteList = ["baidubrowser", "opera", "firefox", "chrome", "safa | |
| var ua = navigator.userAgent; | |
| cc.Browser.ua = ua.toLowerCase(); | |
| cc.Browser.platform = navigator.platform.toLowerCase(); | |
| - cc.Browser.isMobile = (cc.Browser.ua.indexOf('mobile') != -1 || cc.Browser.ua.indexOf('android') != -1); | |
| + cc.Browser.isMobile = (navigator.isCocoonJS || cc.Browser.ua.indexOf('mobile') != -1 || cc.Browser.ua.indexOf('android') != -1); | |
| cc.Browser.type = (function () { | |
| var browserTypes = cc.Browser.ua.match(/micromessenger|qqbrowser|mqqbrowser|ucbrowser|360browser|baidubrowser|maxthon|ie|opera|firefox/) || cc.Browser.ua.match(/chrome|safari/); | |
| if (browserTypes && browserTypes.length > 0) { | |
| diff --git a/cocos2d/core/sprite_nodes/CCSprite.js b/cocos2d/core/sprite_nodes/CCSprite.js | |
| index 507f2f9..400b1d9 100755 | |
| --- a/cocos2d/core/sprite_nodes/CCSprite.js | |
| +++ b/cocos2d/core/sprite_nodes/CCSprite.js | |
| @@ -69,6 +69,7 @@ cc.generateTextureCacheForColor = function (texture) { | |
| ref.canvas.height = h; | |
| var ctx = ref.canvas.getContext("2d"); | |
| + ctx.clearRect(0, 0, w, h); | |
| ctx.drawImage(texture, 0, 0); | |
| ref.tempCanvas.width = w; | |
| @@ -79,6 +80,7 @@ cc.generateTextureCacheForColor = function (texture) { | |
| for (var rgbI = 0; rgbI < 4; rgbI++) { | |
| var cacheCtx = textureCache[rgbI].getContext('2d'); | |
| cacheCtx.getImageData(0, 0, w, h).data; | |
| + ref.tempCtx.clearRect(0, 0, w, h); | |
| ref.tempCtx.drawImage(texture, 0, 0); | |
| var to = ref.tempCtx.getImageData(0, 0, w, h); | |
| diff --git a/cocos2d/jsloader.js b/cocos2d/jsloader.js | |
| index ff640c9..3bf1ae3 100755 | |
| --- a/cocos2d/jsloader.js | |
| +++ b/cocos2d/jsloader.js | |
| @@ -290,22 +290,27 @@ | |
| } | |
| var loadJsImg = document.getElementById("cocos2d_loadJsImg"); | |
| - if(!loadJsImg){ | |
| - loadJsImg = document.createElement('img'); | |
| - loadJsImg.src = "data:image/gif;base64,R0lGODlhEAAQALMNAD8/P7+/vyoqKlVVVX9/fxUVFUBAQGBgYMDAwC8vL5CQkP///wAAAP///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAANACwAAAAAEAAQAAAEO5DJSau9OOvNex0IMnDIsiCkiW6g6BmKYlBFkhSUEgQKlQCARG6nEBwOgl+QApMdCIRD7YZ5RjlGpCUCACH5BAUAAA0ALAAAAgAOAA4AAAQ6kLGB0JA4M7QW0hrngRllkYyhKAYqKUGguAws0ypLS8JxCLQDgXAIDg+FRKIA6v0SAECCBpXSkstMBAAh+QQFAAANACwAAAAACgAQAAAEOJDJORAac6K1kDSKYmydpASBUl0mqmRfaGTCcQgwcxDEke+9XO2WkxQSiUIuAQAkls0n7JgsWq8RACH5BAUAAA0ALAAAAAAOAA4AAAQ6kMlplDIzTxWC0oxwHALnDQgySAdBHNWFLAvCukc215JIZihVIZEogDIJACBxnCSXTcmwGK1ar1hrBAAh+QQFAAANACwAAAAAEAAKAAAEN5DJKc4RM+tDyNFTkSQF5xmKYmQJACTVpQSBwrpJNteZSGYoFWjIGCAQA2IGsVgglBOmEyoxIiMAIfkEBQAADQAsAgAAAA4ADgAABDmQSVZSKjPPBEDSGucJxyGA1XUQxAFma/tOpDlnhqIYN6MEAUXvF+zldrMBAjHoIRYLhBMqvSmZkggAIfkEBQAADQAsBgAAAAoAEAAABDeQyUmrnSWlYhMASfeFVbZdjHAcgnUQxOHCcqWylKEohqUEAYVkgEAMfkEJYrFA6HhKJsJCNFoiACH5BAUAAA0ALAIAAgAOAA4AAAQ3kMlJq704611SKloCAEk4lln3DQgyUMJxCBKyLAh1EMRR3wiDQmHY9SQslyIQUMRmlmVTIyRaIgA7"; | |
| + if (!loadJsImg){ | |
| var canvasNode = document.getElementById(c.tag); | |
| - canvasNode.style.backgroundColor = "black"; | |
| - canvasNode.parentNode.appendChild(loadJsImg); | |
| - | |
| - var canvasStyle = getComputedStyle?getComputedStyle(canvasNode):canvasNode.currentStyle; | |
| - loadJsImg.style.left = canvasNode.offsetLeft + (parseFloat(canvasStyle.width) - loadJsImg.width)/2 + "px"; | |
| - loadJsImg.style.top = canvasNode.offsetTop + (parseFloat(canvasStyle.height) - loadJsImg.height)/2 + "px"; | |
| - loadJsImg.style.position = "absolute"; | |
| + if (canvasNode) { | |
| + | |
| + loadJsImg = document.createElement('img'); | |
| + loadJsImg.src = "data:image/gif;base64,R0lGODlhEAAQALMNAD8/P7+/vyoqKlVVVX9/fxUVFUBAQGBgYMDAwC8vL5CQkP///wAAAP///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAANACwAAAAAEAAQAAAEO5DJSau9OOvNex0IMnDIsiCkiW6g6BmKYlBFkhSUEgQKlQCARG6nEBwOgl+QApMdCIRD7YZ5RjlGpCUCACH5BAUAAA0ALAAAAgAOAA4AAAQ6kLGB0JA4M7QW0hrngRllkYyhKAYqKUGguAws0ypLS8JxCLQDgXAIDg+FRKIA6v0SAECCBpXSkstMBAAh+QQFAAANACwAAAAACgAQAAAEOJDJORAac6K1kDSKYmydpASBUl0mqmRfaGTCcQgwcxDEke+9XO2WkxQSiUIuAQAkls0n7JgsWq8RACH5BAUAAA0ALAAAAAAOAA4AAAQ6kMlplDIzTxWC0oxwHALnDQgySAdBHNWFLAvCukc215JIZihVIZEogDIJACBxnCSXTcmwGK1ar1hrBAAh+QQFAAANACwAAAAAEAAKAAAEN5DJKc4RM+tDyNFTkSQF5xmKYmQJACTVpQSBwrpJNteZSGYoFWjIGCAQA2IGsVgglBOmEyoxIiMAIfkEBQAADQAsAgAAAA4ADgAABDmQSVZSKjPPBEDSGucJxyGA1XUQxAFma/tOpDlnhqIYN6MEAUXvF+zldrMBAjHoIRYLhBMqvSmZkggAIfkEBQAADQAsBgAAAAoAEAAABDeQyUmrnSWlYhMASfeFVbZdjHAcgnUQxOHCcqWylKEohqUEAYVkgEAMfkEJYrFA6HhKJsJCNFoiACH5BAUAAA0ALAIAAgAOAA4AAAQ3kMlJq704611SKloCAEk4lln3DQgyUMJxCBKyLAh1EMRR3wiDQmHY9SQslyIQUMRmlmVTIyRaIgA7"; | |
| + | |
| + canvasNode.style.backgroundColor = "black"; | |
| + canvasNode.parentNode.appendChild(loadJsImg); | |
| + | |
| + var canvasStyle = getComputedStyle?getComputedStyle(canvasNode):canvasNode.currentStyle; | |
| + loadJsImg.style.left = canvasNode.offsetLeft + (parseFloat(canvasStyle.width) - loadJsImg.width)/2 + "px"; | |
| + loadJsImg.style.top = canvasNode.offsetTop + (parseFloat(canvasStyle.height) - loadJsImg.height)/2 + "px"; | |
| + loadJsImg.style.position = "absolute"; | |
| + | |
| + } | |
| } | |
| var updateLoading = function(p){ | |
| - if(p>=1) { | |
| + if (p>=1 && loadJsImg) { | |
| loadJsImg.parentNode.removeChild(loadJsImg); | |
| } | |
| }; | |
| diff --git a/cocos2d/touch_dispatcher/CCTouchDispatcher.js b/cocos2d/touch_dispatcher/CCTouchDispatcher.js | |
| index 7f31edd..75d0805 100755 | |
| --- a/cocos2d/touch_dispatcher/CCTouchDispatcher.js | |
| +++ b/cocos2d/touch_dispatcher/CCTouchDispatcher.js | |
| @@ -613,9 +613,11 @@ cc.getHTMLElementPosition = function (element) { | |
| }; | |
| } | |
| } | |
| + if (navigator.isCocoonJS) | |
| + return box; | |
| return { | |
| - left:box.left + win.pageXOffset - docElem.clientLeft, | |
| - top:box.top + win.pageYOffset - docElem.clientTop, | |
| + left:box.left + (win.pageXOffset || 0) - (docElem.clientLeft || 0), | |
| + top:box.top + (win.pageYOffset || 0) - (docElem.clientTop || 0), | |
| width:box.width, | |
| height:box.height | |
| }; | |
| -- | |
| 1.8.4.2 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment