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 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