Skip to content

Instantly share code, notes, and snippets.

@bassarisse
Created August 23, 2014 19:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bassarisse/aab5b28e7a41f8a435b7 to your computer and use it in GitHub Desktop.
Save bassarisse/aab5b28e7a41f8a435b7 to your computer and use it in GitHub Desktop.
cocos2d-html5 2.2.2 modification for CocoonJS
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