From c1d62705d314ace4d4f50381a229f40dbd5d969c Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 13 Oct 2016 22:09:27 +0800 Subject: [PATCH 01/11] Forbidden screen adaptation during edit box focus --- extensions/editbox/CCEditBox.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/extensions/editbox/CCEditBox.js b/extensions/editbox/CCEditBox.js index c928dba439..0959500ab2 100644 --- a/extensions/editbox/CCEditBox.js +++ b/extensions/editbox/CCEditBox.js @@ -265,6 +265,7 @@ cc.EditBox = cc.ControlButton.extend({ tmpEdTxt.style.padding = "0"; this.__fullscreen = false; + this.__autoResize = false; var onCanvasClick = function() { this._edTxt.blur();}; this._onCanvasClick = onCanvasClick.bind(this); @@ -285,13 +286,15 @@ cc.EditBox = cc.ControlButton.extend({ this._keyPressEvent = keypressEvent.bind(this); var focusEvent = function () { // Exit fullscreen - if(cc.view.isAutoFullScreenEnabled()) { + if (cc.view.isAutoFullScreenEnabled()) { this.__fullscreen = true; cc.view.enableAutoFullScreen(false); cc.screen.exitFullScreen(); } else { this.__fullscreen = false; } + this.__autoResize = cc.view.__resizeWithBrowserSize; + cc.view.resizeWithBrowserSize(false); if (this._edTxt.value === this._placeholderText) { this._edTxt.value = ""; @@ -309,9 +312,12 @@ cc.EditBox = cc.ControlButton.extend({ this._focusEvent = focusEvent.bind(this); var blurEvent = function () { // Resume fullscreen logic - if(this.__fullscreen) { + if (this.__fullscreen) { cc.view.enableAutoFullScreen(true); } + if (this.__autoResize) { + cc.view.resizeWithBrowserSize(true); + } if (this._edTxt.value === "") { this._edTxt.value = this._placeholderText; From 2ff174e27ffa56e37763889ff3aecd5b23b1fddf Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:54:13 +0800 Subject: [PATCH 02/11] Improve platform detection --- CCBoot.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/CCBoot.js b/CCBoot.js index c901d49cfe..d2910a4391 100644 --- a/CCBoot.js +++ b/CCBoot.js @@ -1666,7 +1666,7 @@ var _initSys = function () { * @name isMobile * @type {Boolean} */ - sys.isMobile = ua.indexOf('mobile') !== -1 || ua.indexOf('android') !== -1; + sys.isMobile = /mobile|android|iphone|ipad/.test(ua); /** * Indicate the running platform @@ -1701,6 +1701,11 @@ var _initSys = function () { iOS = true; osVersion = uaResult[2] || ''; osMainVersion = parseInt(osVersion) || 0; + } + else if (/(iPhone|iPad|iPod)/.exec(nav.platform)) { + iOS = true; + osVersion = ''; + osMainVersion = 0; } var osName = sys.OS_UNKNOWN; @@ -2089,7 +2094,7 @@ function _afterEngineLoaded(config) { if (cc._initDebugSetting) cc._initDebugSetting(config[cc.game.CONFIG_KEY.debugMode]); cc._engineLoaded = true; - cc.log(cc.ENGINE_VERSION); + console.log(cc.ENGINE_VERSION); if (_engineLoadedCallback) _engineLoadedCallback(); } From 34715e7611400a51738e8603f9f61d2f5b8a0caa Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:55:03 +0800 Subject: [PATCH 03/11] Unify Scheduler:isScheduled behavior with JSB --- cocos2d/core/CCScheduler.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/cocos2d/core/CCScheduler.js b/cocos2d/core/CCScheduler.js index 4075d970d2..4ba83d81a8 100644 --- a/cocos2d/core/CCScheduler.js +++ b/cocos2d/core/CCScheduler.js @@ -768,26 +768,27 @@ cc.Scheduler = cc.Class.extend(/** @lends cc.Scheduler# */{ } }, - isScheduled: function(key, target){ + isScheduled: function(callback, target){ //key, target //selector, target - cc.assert(key, "Argument key must not be empty"); + cc.assert(callback, "Argument callback must not be empty"); cc.assert(target, "Argument target must be non-nullptr"); - var element = this._hashForUpdates[target.__instanceId]; + var element = this._hashForTimers[target.__instanceId]; - if (!element){ + if (!element) { return false; } if (element.timers == null){ return false; - }else{ + } + else { var timers = element.timers; - for (var i = 0; i < timers.length; ++i){ + for (var i = 0; i < timers.length; ++i) { var timer = timers[i]; - if (key === timer.getKey()){ + if (callback === timer._selector){ return true; } } From 6ed695c8f7adff06bcfec4236e944f6c243ed7d2 Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:56:23 +0800 Subject: [PATCH 04/11] Fix wechat touch end/cancel not fired issue --- CCBoot.js | 15 +++++++++++++++ cocos2d/core/event-manager/CCTouch.js | 1 + cocos2d/core/platform/CCInputManager.js | 21 +++++++++++++++++++-- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/CCBoot.js b/CCBoot.js index d2910a4391..4c77147e6f 100644 --- a/CCBoot.js +++ b/CCBoot.js @@ -2020,6 +2020,21 @@ var _initSys = function () { sys.openURL = function(url){ window.open(url); }; + + /** + * Get the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC. + * @memberof cc.sys + * @name now + * @return {Number} + */ + sys.now = function () { + if (Date.now) { + return Date.now(); + } + else { + return +(new Date); + } + }; }; _initSys(); diff --git a/cocos2d/core/event-manager/CCTouch.js b/cocos2d/core/event-manager/CCTouch.js index c36cea14dc..3c8ea79fb9 100644 --- a/cocos2d/core/event-manager/CCTouch.js +++ b/cocos2d/core/event-manager/CCTouch.js @@ -33,6 +33,7 @@ * @param {Number} id */ cc.Touch = cc.Class.extend(/** @lends cc.Touch# */{ + _lastModified: 0, _point:null, _prevPoint:null, _id:0, diff --git a/cocos2d/core/platform/CCInputManager.js b/cocos2d/core/platform/CCInputManager.js index 7d655130f7..11230c464a 100644 --- a/cocos2d/core/platform/CCInputManager.js +++ b/cocos2d/core/platform/CCInputManager.js @@ -56,6 +56,8 @@ cc.UIInterfaceOrientationPortrait = 0; * @name cc.inputManager */ cc.inputManager = /** @lends cc.inputManager# */{ + TOUCH_TIMEOUT: 5000, + _mousePressed: false, _isRegisterEvent: false, @@ -81,12 +83,21 @@ cc.inputManager = /** @lends cc.inputManager# */{ _getUnUsedIndex: function () { var temp = this._indexBitsUsed; + var now = cc.sys.now(); for (var i = 0; i < this._maxTouches; i++) { if (!(temp & 0x00000001)) { this._indexBitsUsed |= (1 << i); return i; } + else { + var touch = this._touches[i]; + if (now - touch._lastModified > this.TOUCH_TIMEOUT) { + this._removeUsedIndexBit(i); + delete this._touchesIntegerDict[touch.getID()]; + return i; + } + } temp >>= 1; } @@ -110,7 +121,9 @@ cc.inputManager = /** @lends cc.inputManager# */{ * @param {Array} touches */ handleTouchesBegin: function (touches) { - var selTouch, index, curTouch, touchID, handleTouches = [], locTouchIntDict = this._touchesIntegerDict; + var selTouch, index, curTouch, touchID, + handleTouches = [], locTouchIntDict = this._touchesIntegerDict, + now = cc.sys.now(); for(var i = 0, len = touches.length; i< len; i ++){ selTouch = touches[i]; touchID = selTouch.getID(); @@ -124,6 +137,7 @@ cc.inputManager = /** @lends cc.inputManager# */{ } //curTouch = this._touches[unusedIndex] = selTouch; curTouch = this._touches[unusedIndex] = new cc.Touch(selTouch._point.x, selTouch._point.y, selTouch.getID()); + curTouch._lastModified = now; curTouch._setPrevPoint(selTouch._prevPoint); locTouchIntDict[touchID] = unusedIndex; handleTouches.push(curTouch); @@ -142,7 +156,9 @@ cc.inputManager = /** @lends cc.inputManager# */{ * @param {Array} touches */ handleTouchesMove: function(touches){ - var selTouch, index, touchID, handleTouches = [], locTouches = this._touches; + var selTouch, index, touchID, + handleTouches = [], locTouches = this._touches, + now = cc.sys.now(); for(var i = 0, len = touches.length; i< len; i ++){ selTouch = touches[i]; touchID = selTouch.getID(); @@ -155,6 +171,7 @@ cc.inputManager = /** @lends cc.inputManager# */{ if(locTouches[index]){ locTouches[index]._setPoint(selTouch._point); locTouches[index]._setPrevPoint(selTouch._prevPoint); + locTouches[index]._lastModified = now; handleTouches.push(locTouches[index]); } } From 1d856ef34285d58c1688a34bc9f624feb0b9d922 Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:56:53 +0800 Subject: [PATCH 05/11] Improve screen adaptation logic --- cocos2d/core/platform/CCEGLView.js | 35 ++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/cocos2d/core/platform/CCEGLView.js b/cocos2d/core/platform/CCEGLView.js index a23b8c61ca..5e039bd91d 100644 --- a/cocos2d/core/platform/CCEGLView.js +++ b/cocos2d/core/platform/CCEGLView.js @@ -217,13 +217,14 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ return; // Frame size changed, do resize works - if (view._resizeCallback) { - view._resizeCallback.call(); - } var width = view._originalDesignResolutionSize.width; var height = view._originalDesignResolutionSize.height; - if (width > 0) { + if (width > 0) view.setDesignResolutionSize(width, height, view._resolutionPolicy); + + cc.eventManager.dispatchCustomEvent('canvas-resize'); + if (view._resizeCallback) { + view._resizeCallback.call(); } }, @@ -287,7 +288,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ * @param {Function|null} callback The callback function */ setResizeCallback: function (callback) { - if (cc.isFunction(callback) || callback == null) { + if (typeof callback === 'function' || callback == null) { this._resizeCallback = callback; } }, @@ -304,6 +305,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ orientation = orientation & cc.ORIENTATION_AUTO; if (orientation) { this._orientation = orientation; + var designWidth = this._originalDesignResolutionSize.width; + var designHeight = this._originalDesignResolutionSize.height; + this.setDesignResolutionSize(designWidth, designHeight, this._resolutionPolicy); } }, @@ -428,7 +432,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ * @param {Boolean} enabled Enable or disable retina display */ enableRetina: function(enabled) { - this._retinaEnabled = enabled ? true : false; + this._retinaEnabled = !!enabled; }, /** @@ -672,6 +676,8 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ if(cc.sys.isMobile) this._adjustViewportMeta(); + // Permit to re-detect the orientation of device. + this._orientationChanging = true; this._initFrameSize(); this._originalDesignResolutionSize.width = this._designResolutionSize.width = width; @@ -713,6 +719,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ // reset director's member variables to fit visible rect director.setGLDefaultValues(); } + else if (cc._renderType === cc.game.RENDER_TYPE_CANVAS) { + cc.renderer._allNeedDraw = true; + } this._originalScaleX = this._scaleX; this._originalScaleY = this._scaleY; @@ -747,7 +756,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ */ setRealPixelResolution: function (width, height, resolutionPolicy) { // Set viewport's width - this._setViewportMeta({"width": width, "target-densitydpi": cc.DENSITYDPI_DEVICE}, true); + this._setViewportMeta({"width": width}, true); // Set body width to the exact pixel resolution document.body.style.width = width + "px"; @@ -871,10 +880,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ return this._isRotated ? {x: this._viewPortRect.width - y, y: x} : {x: x, y: y}; }, - _convertMouseToLocationInView: function(point, relatedPos) { - var locViewPortRect = this._viewPortRect, _t = this; - point.x = ((_t._devicePixelRatio * (point.x - relatedPos.left)) - locViewPortRect.x) / _t._scaleX; - point.y = (_t._devicePixelRatio * (relatedPos.top + relatedPos.height - point.y) - locViewPortRect.y) / _t._scaleY; + _convertMouseToLocationInView: function (point, relatedPos) { + var viewport = this._viewPortRect, _t = this; + point.x = ((_t._devicePixelRatio * (point.x - relatedPos.left)) - viewport.x) / _t._scaleX; + point.y = (_t._devicePixelRatio * (relatedPos.top + relatedPos.height - point.y) - viewport.y) / _t._scaleY; }, _convertPointWithScale: function (point) { @@ -945,6 +954,10 @@ cc.ContainerStrategy = cc.Class.extend(/** @lends cc.ContainerStrategy# */{ _setupContainer: function (view, w, h) { var locCanvas = cc.game.canvas, locContainer = cc.game.container; + if (cc.sys.os === cc.sys.OS_ANDROID) { + document.body.style.width = (view._isRotated ? h : w) + 'px'; + document.body.style.height = (view._isRotated ? w : h) + 'px'; + } // Setup style locContainer.style.width = locCanvas.style.width = w + 'px'; From 0846e9abb53ba5714b65d303208db774085198c3 Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:59:06 +0800 Subject: [PATCH 06/11] Fix skeleton webgl render command --- extensions/spine/CCSkeletonWebGLRenderCmd.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/extensions/spine/CCSkeletonWebGLRenderCmd.js b/extensions/spine/CCSkeletonWebGLRenderCmd.js index 9eb185a204..dea64ae6ee 100644 --- a/extensions/spine/CCSkeletonWebGLRenderCmd.js +++ b/extensions/spine/CCSkeletonWebGLRenderCmd.js @@ -191,17 +191,11 @@ proto._updateRegionAttachmentQuad = function(self, slot, quad, premultipliedAlpha) { var vertices = {}; self.computeVertices(slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices); - var r = slot.bone.skeleton.r * slot.r * 255; - var g = slot.bone.skeleton.g * slot.g * 255; - var b = slot.bone.skeleton.b * slot.b * 255; - var normalizedAlpha = slot.bone.skeleton.a * slot.a; - - if (premultipliedAlpha) { - r *= normalizedAlpha; - g *= normalizedAlpha; - b *= normalizedAlpha; - } - var a = normalizedAlpha * 255; + var a = slot.bone.skeleton.a * slot.a * attachment.a * 255; + var multiplier = premultipliedAlpha ? a : 255; + var r = slot.bone.skeleton.r * slot.r * attachment.r * multiplier; + var g = slot.bone.skeleton.g * slot.g * attachment.g * multiplier; + var b = slot.bone.skeleton.b * slot.b * attachment.b * multiplier; quad.bl.colors.r = quad.tl.colors.r = quad.tr.colors.r = quad.br.colors.r = r; quad.bl.colors.g = quad.tl.colors.g = quad.tr.colors.g = quad.br.colors.g = g; From 02e344696afc42e2ce2f19a0dec7ee5bc525d38d Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 16:59:58 +0800 Subject: [PATCH 07/11] Upgrade EditBox --- cocos2d/core/platform/CCEGLView.js | 3 - extensions/editbox/CCEditBox.js | 1255 +++++++++++++++++++++------- extensions/editbox/CCdomNode.js | 659 --------------- moduleConfig.json | 1 - 4 files changed, 934 insertions(+), 984 deletions(-) delete mode 100644 extensions/editbox/CCdomNode.js diff --git a/cocos2d/core/platform/CCEGLView.js b/cocos2d/core/platform/CCEGLView.js index 5e039bd91d..02a5122324 100644 --- a/cocos2d/core/platform/CCEGLView.js +++ b/cocos2d/core/platform/CCEGLView.js @@ -725,9 +725,6 @@ cc.EGLView = cc.Class.extend(/** @lends cc.view# */{ this._originalScaleX = this._scaleX; this._originalScaleY = this._scaleY; - // For editbox - if (cc.DOM) - cc.DOM._resetEGLViewDiv(); cc.visibleRect && cc.visibleRect.init(this._visibleRect); }, diff --git a/extensions/editbox/CCEditBox.js b/extensions/editbox/CCEditBox.js index 0959500ab2..5d3f23a25a 100644 --- a/extensions/editbox/CCEditBox.js +++ b/extensions/editbox/CCEditBox.js @@ -1,7 +1,7 @@ /**************************************************************************** - Copyright (c) 2011-2012 cocos2d-x.org - Copyright (c) 2013-2014 Chukong Technologies Inc. + Copyright (c) 2013-2016 Chukong Technologies Inc. Copyright (c) 2012 James Chen + Copyright (c) 2011-2012 cocos2d-x.org http://www.cocos2d-x.org @@ -154,14 +154,14 @@ cc.EditBoxDelegate = cc.Class.extend({ * This method is called when an edit box gains focus after keyboard is shown. * @param {cc.EditBox} sender */ - editBoxEditingDidBegin: function (sender) { + editBoxEditingDidBegan: function (sender) { }, /** * This method is called when an edit box loses focus after keyboard is hidden. * @param {cc.EditBox} sender */ - editBoxEditingDidEnd: function (sender) { + editBoxEditingDidEnded: function (sender) { }, /** @@ -176,10 +176,11 @@ cc.EditBoxDelegate = cc.Class.extend({ * This method is called when the return button was pressed. * @param {cc.EditBox} sender */ - editBoxReturn: function (sender) { + editBoxEditingReturn: function (sender) { } }); + /** *

cc.EditBox is a brief Class for edit box.
* You can use this widget to gather small amounts of text from the user.

@@ -204,36 +205,20 @@ cc.EditBoxDelegate = cc.Class.extend({ * @property {Number} returnType - <@writeonly> Return type of edit box, value should be one of the KeyboardReturnType constants. * */ -cc.EditBox = cc.ControlButton.extend({ - _domInputSprite: null, - +cc.EditBox = cc.Node.extend({ + _backgroundSprite: null, _delegate: null, - _editBoxInputMode: cc.EDITBOX_INPUT_MODE_ANY, + _editBoxInputMode: cc.EDITBOX_INPUT_MODE_SINGLELINE, _editBoxInputFlag: cc.EDITBOX_INPUT_FLAG_SENSITIVE, _keyboardReturnType: cc.KEYBOARD_RETURNTYPE_DEFAULT, - - _text: "", - _placeholderText: "", - _textColor: null, - _placeholderColor: null, _maxLength: 50, - _adjustHeight: 18, - - _edTxt: null, - _edFontSize: 14, - _edFontName: "Arial", - - _placeholderFontName: "", + _text: '', + _textColor: null, + _placeholderText: '', + _placeholderFontName: '', _placeholderFontSize: 14, - - _tooltip: false, - _className: "EditBox", - - _onCanvasClick : null, - _inputEvent : null, - _keyPressEvent : null, - _focusEvent : null, - _blurEvent : null, + _placeholderColor: null, + _className: 'EditBox', /** * constructor of cc.EditBox @@ -242,221 +227,201 @@ cc.EditBox = cc.ControlButton.extend({ * @param {cc.Scale9Sprite} press9SpriteBg * @param {cc.Scale9Sprite} disabled9SpriteBg */ - ctor: function (size, normal9SpriteBg, press9SpriteBg, disabled9SpriteBg) { - cc.ControlButton.prototype.ctor.call(this); + ctor: function (size, normal9SpriteBg) { + cc.Node.prototype.ctor.call(this); + this.setAnchorPoint(cc.p(0.5, 0.5)); this._textColor = cc.color.WHITE; this._placeholderColor = cc.color.GRAY; - this.setContentSize(size); - var tmpDOMSprite = this._domInputSprite = new cc.Sprite(); - tmpDOMSprite.draw = function () {}; //redefine draw function - this.addChild(tmpDOMSprite); - var tmpEdTxt = this._edTxt = document.createElement("input"); - tmpEdTxt.type = "text"; - tmpEdTxt.style.fontSize = this._edFontSize + "px"; - tmpEdTxt.style.color = "#000000"; - tmpEdTxt.style.border = 0; - tmpEdTxt.style.background = "transparent"; - //tmpEdTxt.style.paddingLeft = "2px"; - tmpEdTxt.style.width = "100%"; - tmpEdTxt.style.height = "100%"; - tmpEdTxt.style.active = 0; - tmpEdTxt.style.outline = "medium"; - tmpEdTxt.style.padding = "0"; - - this.__fullscreen = false; - this.__autoResize = false; - var onCanvasClick = function() { this._edTxt.blur();}; - this._onCanvasClick = onCanvasClick.bind(this); - - var inputEvent = function () { - if (this._delegate && this._delegate.editBoxTextChanged) - this._delegate.editBoxTextChanged(this, this._edTxt.value); - }; - this._inputEvent = inputEvent.bind(this); - var keypressEvent = function ( e ) { - if (e.keyCode === cc.KEY.enter) { - e.stopPropagation(); - e.preventDefault(); - if (this._delegate && this._delegate.editBoxReturn) - this._delegate.editBoxReturn(this); - cc._canvas.focus(); - } - }; - this._keyPressEvent = keypressEvent.bind(this); - var focusEvent = function () { - // Exit fullscreen - if (cc.view.isAutoFullScreenEnabled()) { - this.__fullscreen = true; - cc.view.enableAutoFullScreen(false); - cc.screen.exitFullScreen(); - } else { - this.__fullscreen = false; - } - this.__autoResize = cc.view.__resizeWithBrowserSize; - cc.view.resizeWithBrowserSize(false); + cc.Node.prototype.setContentSize.call(this, size); - if (this._edTxt.value === this._placeholderText) { - this._edTxt.value = ""; - this._edTxt.style.fontSize = this._edFontSize + "px"; - this._edTxt.style.color = cc.colorToHex(this._textColor); - if (this._editBoxInputFlag === cc.EDITBOX_INPUT_FLAG_PASSWORD) - this._edTxt.type = "password"; - else - this._edTxt.type = "text"; - } - if (this._delegate && this._delegate.editBoxEditingDidBegin) - this._delegate.editBoxEditingDidBegin(this); - cc._canvas.addEventListener("click", this._onCanvasClick); - }; - this._focusEvent = focusEvent.bind(this); - var blurEvent = function () { - // Resume fullscreen logic - if (this.__fullscreen) { - cc.view.enableAutoFullScreen(true); - } - if (this.__autoResize) { - cc.view.resizeWithBrowserSize(true); - } + this._renderCmd._createLabels(); + this.createDomElementIfNeeded(); - if (this._edTxt.value === "") { - this._edTxt.value = this._placeholderText; - this._edTxt.style.fontSize = this._placeholderFontSize + "px"; - this._edTxt.style.color = cc.colorToHex(this._placeholderColor); - this._edTxt.type = "text"; - } - if (this._delegate && this._delegate.editBoxEditingDidEnd) - this._delegate.editBoxEditingDidEnd(this); - cc._canvas.removeEventListener('click', this._onCanvasClick); - }; - this._blurEvent = blurEvent.bind(this); + this.initWithSizeAndBackgroundSprite(size, normal9SpriteBg); + + cc.eventManager.addListener({ + event: cc.EventListener.TOUCH_ONE_BY_ONE, + swallowTouches: true, + onTouchBegan: this._onTouchBegan.bind(this), + onTouchEnded: this._onTouchEnded.bind(this) + }, this); + + this.setInputFlag(this._editBoxInputFlag); + }, + + _createRenderCmd: function () { + if (cc._renderType === cc.game.RENDER_TYPE_CANVAS) { + return new cc.EditBox.CanvasRenderCmd(this); + } else { + return new cc.EditBox.WebGLRenderCmd(this); + } + }, + + setContentSize: function (width, height) { + if (width.width !== undefined && width.height !== undefined) { + height = width.height; + width = width.width; + } + cc.Node.prototype.setContentSize.call(this, width, height); + this._updateEditBoxSize(width, height); + }, - tmpEdTxt.addEventListener("input", this._inputEvent); - tmpEdTxt.addEventListener("keypress", this._keyPressEvent); - tmpEdTxt.addEventListener("focus", this._focusEvent); - tmpEdTxt.addEventListener("blur", this._blurEvent); + setVisible: function ( visible ) { + cc.Node.prototype.setVisible.call(this, visible); + this._renderCmd.updateVisibility(); + }, - cc.DOM.convert(tmpDOMSprite); - tmpDOMSprite.dom.appendChild(tmpEdTxt); - tmpDOMSprite.dom.showTooltipDiv = false; - tmpDOMSprite.dom.style.width = (size.width - 6) + "px"; - tmpDOMSprite.dom.style.height = (size.height - 6) + "px"; + createDomElementIfNeeded: function () { + if(!this._renderCmd._edTxt) { + this._renderCmd.createNativeControl(); + } + }, - //this._domInputSprite.dom.style.borderWidth = "1px"; - //this._domInputSprite.dom.style.borderStyle = "solid"; - //this._domInputSprite.dom.style.borderRadius = "8px"; - tmpDOMSprite.canvas.remove(); + setTabIndex: function(index) { + if(this._renderCmd._edTxt) { + this._renderCmd._edTxt.tabIndex = index; + } + }, - if (this.initWithSizeAndBackgroundSprite(size, normal9SpriteBg)) { - if (press9SpriteBg) - this.setBackgroundSpriteForState(press9SpriteBg, cc.CONTROL_STATE_HIGHLIGHTED); - if (disabled9SpriteBg) - this.setBackgroundSpriteForState(disabled9SpriteBg, cc.CONTROL_STATE_DISABLED); + getTabIndex: function() { + if(this._renderCmd._edTxt) { + return this._renderCmd._edTxt.tabIndex; } + cc.warn('The dom control is not created!'); + return -1; + }, + + setFocus: function() { + if(this._renderCmd._edTxt) { + this._renderCmd._edTxt.focus(); + } + }, + + isFocused: function() { + if(this._renderCmd._edTxt) { + return document.activeElement === this._renderCmd._edTxt; + } + cc.warn('The dom control is not created!'); + return false; + }, + + stayOnTop: function (flag) { + if(this._alwaysOnTop === flag) return; + + this._alwaysOnTop = flag; + this._renderCmd.stayOnTop(this._alwaysOnTop); + }, + + cleanup: function () { + this._super(); + + this._renderCmd._removeDomInputControl(); + }, + + _onTouchBegan: function (touch) { + var touchPoint = touch.getLocation(); + var bb = cc.rect(0,0, this._contentSize.width, this._contentSize.height); + var hitted = cc.rectContainsPoint(bb, this.convertToNodeSpace(touchPoint)); + if(hitted) { + return true; + } + else { + this._renderCmd.hidden(); + return false; + } + }, + + _onTouchEnded: function () { + this._renderCmd.show(); + }, + + _updateBackgroundSpriteSize: function (width, height) { + if(this._backgroundSprite) { + this._backgroundSprite.setContentSize(width, height); + } + }, + + _updateEditBoxSize: function(size, height) { + var newWidth = (typeof size.width === 'number') ? size.width : size; + var newHeight = (typeof size.height === 'number') ? size.height : height; + + this._updateBackgroundSpriteSize(newWidth, newHeight); + this._renderCmd.updateSize(newWidth, newHeight); + }, + + setLineHeight: function (lineHeight) { + this._renderCmd.setLineHeight(lineHeight); }, /** - * Set the font. + * Sets the font. * @param {String} fontName The font name. * @param {Number} fontSize The font size. */ setFont: function (fontName, fontSize) { - this._edFontSize = fontSize; - this._edFontName = fontName; - this._setFontToEditBox(); + this._renderCmd.setFont(fontName, fontSize); }, _setFont: function (fontStyle) { - var res = cc.LabelTTF._fontStyleRE.exec(fontStyle); - if (res) { - this._edFontSize = parseInt(res[1]); - this._edFontName = res[2]; - this._setFontToEditBox(); - } + this._renderCmd._setFont(fontStyle); + }, + + getBackgroundSprite: function() { + return this._backgroundSprite; }, /** - * set fontName + * Sets fontName * @param {String} fontName */ setFontName: function (fontName) { - this._edFontName = fontName; - this._setFontToEditBox(); + this._renderCmd.setFontName(fontName); }, /** - * set fontSize + * Sets fontSize * @param {Number} fontSize */ setFontSize: function (fontSize) { - this._edFontSize = fontSize; - this._setFontToEditBox(); - }, - - _setFontToEditBox: function () { - if (this._edTxt.value !== this._placeholderText) { - this._edTxt.style.fontFamily = this._edFontName; - this._edTxt.style.fontSize = this._edFontSize + "px"; - if (this._editBoxInputFlag === cc.EDITBOX_INPUT_FLAG_PASSWORD) - this._edTxt.type = "password"; - else - this._edTxt.type = "text"; - } + this._renderCmd.setFontSize(fontSize); }, /** - * Set the text entered in the edit box. - * @deprecated - * @param {string} text The given text. - */ - setText: function (text) { - cc.log("Please use the setString"); - this.setString(text); - }, - - /** - * Set the text entered in the edit box. + * Sets the text entered in the edit box. * @param {string} text The given text. */ setString: function (text) { - if (text != null) { - if (text === "") { - this._edTxt.value = this._placeholderText; - this._edTxt.style.color = cc.colorToHex(this._placeholderColor); - this._edTxt.type = "text"; - } else { - this._edTxt.value = text; - this._edTxt.style.color = cc.colorToHex(this._textColor); - if (this._editBoxInputFlag === cc.EDITBOX_INPUT_FLAG_PASSWORD) - this._edTxt.type = "password"; - else - this._edTxt.type = "text"; - } + if (text.length >= this._maxLength) { + text = text.slice(0, this._maxLength); } + this._text = text; + this._renderCmd.setString(text); }, /** - * Set the font color of the widget's text. + * Sets the font color of the widget's text. * @param {cc.Color} color */ setFontColor: function (color) { this._textColor = color; - if (this._edTxt.value !== this._placeholderText) { - this._edTxt.style.color = cc.colorToHex(color); - } + this._renderCmd.setFontColor(color); }, /** - *

* Sets the maximum input length of the edit box.
* Setting this value enables multiline input mode by default. - *

* @param {Number} maxLength The maximum length. */ setMaxLength: function (maxLength) { - if (!isNaN(maxLength) && maxLength > 0) { + if (!isNaN(maxLength)) { + if(maxLength < 0) { + //we can't set Number.MAX_VALUE to input's maxLength property + //so we use a magic number here, it should works at most use cases. + maxLength = 65535; + } this._maxLength = maxLength; - this._edTxt.maxLength = maxLength; + this._renderCmd.setMaxLength(maxLength); } }, @@ -469,108 +434,79 @@ cc.EditBox = cc.ControlButton.extend({ }, /** - * Set a text in the edit box that acts as a placeholder when an edit box is empty. + * Sets a text in the edit box that acts as a placeholder when an edit box is empty. * @param {string} text The given text. */ setPlaceHolder: function (text) { - if (text != null) { - var oldPlaceholderText = this._placeholderText; + if (text !== null) { + this._renderCmd.setPlaceHolder(text); this._placeholderText = text; - if (this._edTxt.value === oldPlaceholderText) { - this._edTxt.value = text; - this._edTxt.style.color = cc.colorToHex(this._placeholderColor); - this._setPlaceholderFontToEditText(); - } } }, /** - * Set the placeholder's font. + * Sets the placeholder's font. * @param {String} fontName * @param {Number} fontSize */ setPlaceholderFont: function (fontName, fontSize) { this._placeholderFontName = fontName; this._placeholderFontSize = fontSize; - this._setPlaceholderFontToEditText(); + this._renderCmd._updateDOMPlaceholderFontStyle(); }, + _setPlaceholderFont: function (fontStyle) { var res = cc.LabelTTF._fontStyleRE.exec(fontStyle); if (res) { this._placeholderFontName = res[2]; this._placeholderFontSize = parseInt(res[1]); - this._setPlaceholderFontToEditText(); + this._renderCmd._updateDOMPlaceholderFontStyle(); } }, /** - * Set the placeholder's fontName. + * Sets the placeholder's fontName. * @param {String} fontName */ setPlaceholderFontName: function (fontName) { this._placeholderFontName = fontName; - this._setPlaceholderFontToEditText(); + this._renderCmd._updateDOMPlaceholderFontStyle(); }, /** - * Set the placeholder's fontSize. + * Sets the placeholder's fontSize. * @param {Number} fontSize */ setPlaceholderFontSize: function (fontSize) { this._placeholderFontSize = fontSize; - this._setPlaceholderFontToEditText(); - }, - - _setPlaceholderFontToEditText: function () { - if (this._edTxt.value === this._placeholderText) { - this._edTxt.style.fontFamily = this._placeholderFontName; - this._edTxt.style.fontSize = this._placeholderFontSize + "px"; - this._edTxt.type = "text"; - } + this._renderCmd._updateDOMPlaceholderFontStyle(); }, /** - * Set the font color of the placeholder text when the edit box is empty. + * Sets the font color of the placeholder text when the edit box is empty. * @param {cc.Color} color */ setPlaceholderFontColor: function (color) { this._placeholderColor = color; - if (this._edTxt.value === this._placeholderText) { - this._edTxt.style.color = cc.colorToHex(color); - } + this._renderCmd.setPlaceholderFontColor(color); }, /** - * Set the input flags that are to be applied to the edit box. + * Sets the input flags that are to be applied to the edit box. * @param {Number} inputFlag One of the EditBoxInputFlag constants. * e.g.cc.EDITBOX_INPUT_FLAG_PASSWORD */ setInputFlag: function (inputFlag) { this._editBoxInputFlag = inputFlag; - if ((this._edTxt.value !== this._placeholderText) && (inputFlag === cc.EDITBOX_INPUT_FLAG_PASSWORD)) - this._edTxt.type = "password"; - else - this._edTxt.type = "text"; + this._renderCmd.setInputFlag(inputFlag); }, /** - * Gets the input string of the edit box. - * @deprecated - * @return {string} - */ - getText: function () { - cc.log("Please use the getString"); - return this._edTxt.value; - }, - - /** - * Gets the input string of the edit box. + * Gets the input string of the edit box. * @return {string} */ getString: function () { - if(this._edTxt.value === this._placeholderText) - return ""; - return this._edTxt.value; + return this._text; }, /** @@ -579,23 +515,27 @@ cc.EditBox = cc.ControlButton.extend({ * @param {cc.Color | cc.Scale9Sprite} normal9SpriteBg */ initWithSizeAndBackgroundSprite: function (size, normal9SpriteBg) { - if (this.initWithBackgroundSprite(normal9SpriteBg)) { - this._domInputSprite.x = 3; - this._domInputSprite.y = 3; - - this.setZoomOnTouchDown(false); - this.setPreferredSize(size); - this.x = 0; - this.y = 0; - this._addTargetWithActionForControlEvent(this, this.touchDownAction, cc.CONTROL_EVENT_TOUCH_UP_INSIDE); - return true; + if(this._backgroundSprite) { + this._backgroundSprite.removeFromParent(); } - return false; + this._backgroundSprite = normal9SpriteBg; + this.setContentSize(size); + + if(this._backgroundSprite && !this._backgroundSprite.parent) { + this._backgroundSprite.setAnchorPoint(cc.p(0, 0)); + this.addChild(this._backgroundSprite); + + this._updateBackgroundSpriteSize(size.width, size.height); + } + + + this.x = 0; + this.y = 0; + return true; }, - /* override functions */ /** - * Set the delegate for edit box. + * Sets the delegate for edit box. * @param {cc.EditBoxDelegate} delegate */ setDelegate: function (delegate) { @@ -603,7 +543,7 @@ cc.EditBox = cc.ControlButton.extend({ }, /** - * Get a text in the edit box that acts as a placeholder when an + * Gets the text in the edit box that acts as a placeholder when an * edit box is empty. * @return {String} */ @@ -612,51 +552,30 @@ cc.EditBox = cc.ControlButton.extend({ }, /** - * Set the input mode of the edit box. + * Sets the input mode of the edit box. * @param {Number} inputMode One of the EditBoxInputMode constants. */ setInputMode: function (inputMode) { + if (this._editBoxInputMode === inputMode) return; + + var oldText = this.getString(); this._editBoxInputMode = inputMode; + + this._renderCmd.setInputMode(inputMode); + this._renderCmd.transform(); + + this.setString(oldText); + this._renderCmd._updateLabelPosition(this.getContentSize()); }, /** - * Set the return type that are to be applied to the edit box. + * Sets the return type that are to be applied to the edit box. * @param {Number} returnType One of the CCKeyboardReturnType constants. */ setReturnType: function (returnType) { this._keyboardReturnType = returnType; }, - keyboardWillShow: function (info) { - var rectTracked = cc.EditBox.getRect(this); - // some adjustment for margin between the keyboard and the edit box. - rectTracked.y -= 4; - // if the keyboard area doesn't intersect with the tracking node area, nothing needs to be done. - if (!rectTracked.intersectsRect(info.end)) { - cc.log("needn't to adjust view layout."); - return; - } - - // assume keyboard at the bottom of screen, calculate the vertical adjustment. - this._adjustHeight = info.end.getMaxY() - rectTracked.getMinY(); - // CCLOG("CCEditBox:needAdjustVerticalPosition(%f)", m_fAdjustHeight); - - //callback - }, - keyboardDidShow: function (info) { - }, - keyboardWillHide: function (info) { - //if (m_pEditBoxImpl != NULL) { - // m_pEditBoxImpl->doAnimationWhenKeyboardMove(info.duration, -m_fAdjustHeight); - //} - }, - keyboardDidHide: function (info) { - }, - - touchDownAction: function (sender, controlEvent) { - //this._editBoxImpl.openKeyboard(); - }, - /** * @warning HTML5 Only * @param {cc.Size} size @@ -664,20 +583,10 @@ cc.EditBox = cc.ControlButton.extend({ */ initWithBackgroundColor: function (size, bgColor) { this._edWidth = size.width; - this.dom.style.width = this._edWidth.toString() + "px"; + this.dom.style.width = this._edWidth.toString() + 'px'; this._edHeight = size.height; - this.dom.style.height = this._edHeight.toString() + "px"; + this.dom.style.height = this._edHeight.toString() + 'px'; this.dom.style.backgroundColor = cc.colorToHex(bgColor); - }, - - cleanup : function () { - this._edTxt.removeEventListener("input", this._inputEvent); - this._edTxt.removeEventListener("keypress", this._keyPressEvent); - this._edTxt.removeEventListener("focus", this._focusEvent); - this._edTxt.removeEventListener("blur", this._blurEvent); - cc._canvas.removeEventListener('click', this._onCanvasClick); - - this._super(); } }); @@ -686,64 +595,52 @@ var _p = cc.EditBox.prototype; // Extended properties /** @expose */ _p.font; -cc.defineGetterSetter(_p, "font", null, _p._setFont); +cc.defineGetterSetter(_p, 'font', null, _p._setFont); /** @expose */ _p.fontName; -cc.defineGetterSetter(_p, "fontName", null, _p.setFontName); +cc.defineGetterSetter(_p, 'fontName', null, _p.setFontName); /** @expose */ _p.fontSize; -cc.defineGetterSetter(_p, "fontSize", null, _p.setFontSize); +cc.defineGetterSetter(_p, 'fontSize', null, _p.setFontSize); /** @expose */ _p.fontColor; -cc.defineGetterSetter(_p, "fontColor", null, _p.setFontColor); +cc.defineGetterSetter(_p, 'fontColor', null, _p.setFontColor); /** @expose */ _p.string; -cc.defineGetterSetter(_p, "string", _p.getString, _p.setString); +cc.defineGetterSetter(_p, 'string', _p.getString, _p.setString); /** @expose */ _p.maxLength; -cc.defineGetterSetter(_p, "maxLength", _p.getMaxLength, _p.setMaxLength); +cc.defineGetterSetter(_p, 'maxLength', _p.getMaxLength, _p.setMaxLength); /** @expose */ _p.placeHolder; -cc.defineGetterSetter(_p, "placeHolder", _p.getPlaceHolder, _p.setPlaceHolder); +cc.defineGetterSetter(_p, 'placeholder', _p.getPlaceHolder, _p.setPlaceHolder); /** @expose */ _p.placeHolderFont; -cc.defineGetterSetter(_p, "placeHolderFont", null, _p._setPlaceholderFont); +cc.defineGetterSetter(_p, 'placeholderFont', null, _p._setPlaceholderFont); /** @expose */ _p.placeHolderFontName; -cc.defineGetterSetter(_p, "placeHolderFontName", null, _p.setPlaceholderFontName); +cc.defineGetterSetter(_p, 'placeholderFontName', null, _p.setPlaceholderFontName); /** @expose */ _p.placeHolderFontSize; -cc.defineGetterSetter(_p, "placeHolderFontSize", null, _p.setPlaceholderFontSize); +cc.defineGetterSetter(_p, 'placeholderFontSize', null, _p.setPlaceholderFontSize); /** @expose */ _p.placeHolderFontColor; -cc.defineGetterSetter(_p, "placeHolderFontColor", null, _p.setPlaceholderFontColor); +cc.defineGetterSetter(_p, 'placeholderFontColor', null, _p.setPlaceholderFontColor); /** @expose */ _p.inputFlag; -cc.defineGetterSetter(_p, "inputFlag", null, _p.setInputFlag); +cc.defineGetterSetter(_p, 'inputFlag', null, _p.setInputFlag); /** @expose */ _p.delegate; -cc.defineGetterSetter(_p, "delegate", null, _p.setDelegate); +cc.defineGetterSetter(_p, 'delegate', null, _p.setDelegate); /** @expose */ _p.inputMode; -cc.defineGetterSetter(_p, "inputMode", null, _p.setInputMode); +cc.defineGetterSetter(_p, 'inputMode', null, _p.setInputMode); /** @expose */ _p.returnType; -cc.defineGetterSetter(_p, "returnType", null, _p.setReturnType); +cc.defineGetterSetter(_p, 'returnType', null, _p.setReturnType); _p = null; -/** - * get the rect of a node in world coordinate frame - * @function - * @param {cc.Node} node - * @return {cc.Rect} - */ -cc.EditBox.getRect = function (node) { - var contentSize = node.getContentSize(); - var rect = cc.rect(0, 0, contentSize.width, contentSize.height); - return cc.rectApplyAffineTransform(rect, node.getNodeToWorldTransform()); -}; - /** * create a edit box with size and background-color or * @deprecated since v3.0, please use new cc.EditBox(size, normal9SpriteBg, press9SpriteBg, disabled9SpriteBg) instead @@ -758,5 +655,721 @@ cc.EditBox.create = function (size, normal9SpriteBg, press9SpriteBg, disabled9Sp }; +(function (editbox) { + editbox._polyfill = { + zoomInvalid: false + }; + + if (cc.sys.OS_ANDROID === cc.sys.os + && (cc.sys.browserType === cc.sys.BROWSER_TYPE_SOUGOU + || cc.sys.browserType === cc.sys.BROWSER_TYPE_360)) { + editbox._polyfill.zoomInvalid = true; + } +})(cc.EditBox); + +(function (polyfill) { + // https://segmentfault.com/q/1010000002914610 + var SCROLLY = 40; + var TIMER_NAME = 400; + var LEFT_PADDING = 2; + + function scrollWindowUp (editBox) { + if (cc.sys.os === cc.sys.OS_IOS && cc.sys.osMainVersion === 9) { + var worldPos = editBox.convertToWorldSpace(cc.p(0,0)); + var windowHeight = cc.visibleRect.height; + var windowWidth = cc.visibleRect.width; + var factor = 0.5; + if(windowWidth > windowHeight) { + factor = 0.7; + } + setTimeout(function() { + if(window.scrollY < SCROLLY && worldPos.y < windowHeight * factor) { + var scrollOffset = windowHeight * factor - worldPos.y - window.scrollY; + if (scrollOffset < 35) scrollOffset = 35; + if (scrollOffset > 320) scrollOffset = 320; + window.scrollTo(0, scrollOffset); + } + }, TIMER_NAME); + } + } + + function capitalize (string) { + return string.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }); + } + + function capitalizeFirstLetter (string) { + return string.charAt(0).toUpperCase() + string.slice(1); + } + + var EditBoxImpl = function () { + }; + var proto = EditBoxImpl.prototype = Object.create(Object.prototype); + + proto.updateMatrix = function () { + if (!this._edTxt) return; + + var node = this._node, scaleX = cc.view._scaleX, scaleY = cc.view._scaleY; + var dpr = cc.view._devicePixelRatio; + var t = this._worldTransform; + + scaleX /= dpr; + scaleY /= dpr; + + var container = cc.game.container; + var a = t.a * scaleX, b = t.b, c = t.c, d = t.d * scaleY; + + var offsetX = container && container.style.paddingLeft && parseInt(container.style.paddingLeft); + var offsetY = container && container.style.paddingBottom && parseInt(container.style.paddingBottom); + var tx = t.tx * scaleX + offsetX, ty = t.ty * scaleY + offsetY; + + if (polyfill.zoomInvalid) { + this.updateSize(node._contentSize.width * a, node._contentSize.height * d); + a = 1; + d = 1; + } + + var matrix = "matrix(" + a + "," + -b + "," + -c + "," + d + "," + tx + "," + -ty + ")"; + this._edTxt.style['transform'] = matrix; + this._edTxt.style['-webkit-transform'] = matrix; + this._edTxt.style['transform-origin'] = '0px 100% 0px'; + this._edTxt.style['-webkit-transform-origin'] = '0px 100% 0px'; + }; + + proto.updateVisibility = function () { + if (!this._edTxt) return; + + var node = this._node; + var editBox = this._edTxt; + if (node.visible) { + editBox.style.visibility = 'visible'; + cc.game.container.appendChild(editBox); + } else { + editBox.style.visibility = 'hidden'; + var hasChild = false; + if('contains' in cc.game.container) { + hasChild = cc.game.container.contains(editBox); + }else { + hasChild = cc.game.container.compareDocumentPosition(editBox) % 16; + } + if(hasChild) + cc.game.container.removeChild(editBox); + } + }; + + proto.stayOnTop = function (flag) { + if(flag) { + this._removeLabels(); + this._edTxt.style.display = ''; + } else { + this._createLabels(); + this._edTxt.style.display = 'none'; + this._updateLabelString(); + } + }; + + proto._createDomInput = function () { + this._removeDomInputControl(); + var thisPointer = this; + var tmpEdTxt = this._edTxt = document.createElement('input'); + tmpEdTxt.type = 'text'; + tmpEdTxt.style.fontSize = this._edFontSize + 'px'; + tmpEdTxt.style.color = '#000000'; + tmpEdTxt.style.border = 0; + tmpEdTxt.style.background = 'transparent'; + tmpEdTxt.style.width = '100%'; + tmpEdTxt.style.height = '100%'; + tmpEdTxt.style.active = 0; + tmpEdTxt.style.outline = 'medium'; + tmpEdTxt.style.padding = '0'; + tmpEdTxt.style.textTransform = 'uppercase'; + tmpEdTxt.style.display = 'none'; + + tmpEdTxt.style.position = "absolute"; + tmpEdTxt.style.bottom = "0px"; + tmpEdTxt.style.left = LEFT_PADDING + "px"; + tmpEdTxt.style.className = "cocosEditBox"; + this.setMaxLength(thisPointer._editBox._maxLength); + + tmpEdTxt.addEventListener('input', function () { + var editBox = thisPointer._editBox; + + + if (this.value.length > this.maxLength) { + this.value = this.value.slice(0, this.maxLength); + } + + if (editBox._delegate && editBox._delegate.editBoxTextChanged) { + if (editBox._text.toLowerCase() !== this.value.toLowerCase()) { + editBox._text = this.value; + thisPointer._updateEditBoxContentStyle(); + editBox._delegate.editBoxTextChanged(editBox, editBox._text); + } + } + }); + tmpEdTxt.addEventListener('keypress', function (e) { + var editBox = thisPointer._editBox; + + if (e.keyCode === cc.KEY.enter) { + e.stopPropagation(); + e.preventDefault(); + if(this.value === '') { + this.style.fontSize = editBox._placeholderFontSize + 'px'; + this.style.color = cc.colorToHex(editBox._placeholderColor); + } + + editBox._text = this.value; + thisPointer._updateEditBoxContentStyle(); + thisPointer.hidden(); + if (editBox._delegate && editBox._delegate.editBoxEditingReturn) { + editBox._delegate.editBoxEditingReturn(editBox); + } + cc._canvas.focus(); + } + }); + + tmpEdTxt.addEventListener('focus', function () { + var editBox = thisPointer._editBox; + this.style.fontSize = thisPointer._edFontSize + 'px'; + this.style.color = cc.colorToHex(editBox._textColor); + thisPointer._hiddenLabels(); + + if(cc.view.isAutoFullScreenEnabled()) { + thisPointer.__fullscreen = true; + cc.view.enableAutoFullScreen(false); + cc.screen.exitFullScreen(); + } else { + thisPointer.__fullscreen = false; + } + this.__autoResize = cc.view.__resizeWithBrowserSize; + cc.view.resizeWithBrowserSize(false); + + scrollWindowUp(editBox); + + if (editBox._delegate && editBox._delegate.editBoxEditingDidBegan) { + editBox._delegate.editBoxEditingDidBegan(editBox); + } + }); + tmpEdTxt.addEventListener('blur', function () { + var editBox = thisPointer._editBox; + editBox._text = this.value; + thisPointer._updateEditBoxContentStyle(); + if(thisPointer.__fullscreen) { + cc.view.enableAutoFullScreen(true); + } + if (this.__autoResize) { + cc.view.resizeWithBrowserSize(true); + } + window.scrollY = 0; + if (editBox._delegate && editBox._delegate.editBoxEditingDidEnded) { + editBox._delegate.editBoxEditingDidEnded(editBox); + } + + if (this.value === '') { + this.style.fontSize = editBox._placeholderFontSize + 'px'; + this.style.color = cc.colorToHex(editBox._placeholderColor); + } + thisPointer.hidden(); + }); + return tmpEdTxt; + }; + + proto._createDomTextArea = function () { + this._removeDomInputControl(); + var thisPointer = this; + var tmpEdTxt = this._edTxt = document.createElement('textarea'); + tmpEdTxt.type = 'text'; + tmpEdTxt.style.fontSize = this._edFontSize + 'px'; + tmpEdTxt.style.color = '#000000'; + tmpEdTxt.style.border = 0; + tmpEdTxt.style.background = 'transparent'; + tmpEdTxt.style.width = '100%'; + tmpEdTxt.style.height = '100%'; + tmpEdTxt.style.active = 0; + tmpEdTxt.style.outline = 'medium'; + tmpEdTxt.style.padding = '0'; + tmpEdTxt.style.resize = 'none'; + tmpEdTxt.style.textTransform = 'uppercase'; + tmpEdTxt.style.overflow_y = 'scroll'; + tmpEdTxt.style.display = 'none'; + tmpEdTxt.style.position = "absolute"; + tmpEdTxt.style.bottom = "0px"; + tmpEdTxt.style.left = LEFT_PADDING + "px"; + tmpEdTxt.style.className = "cocosEditBox"; + this.setMaxLength(thisPointer._editBox._maxLength); + + tmpEdTxt.addEventListener('input', function () { + if (this.value.length > this.maxLength) { + this.value = this.value.slice(0, this.maxLength); + } + + var editBox = thisPointer._editBox; + if (editBox._delegate && editBox._delegate.editBoxTextChanged) { + if(editBox._text.toLowerCase() !== this.value.toLowerCase()) { + editBox._text = this.value; + thisPointer._updateEditBoxContentStyle(); + editBox._delegate.editBoxTextChanged(editBox, editBox._text); + } + } + }); + + tmpEdTxt.addEventListener('focus', function () { + var editBox = thisPointer._editBox; + thisPointer._hiddenLabels(); + + this.style.fontSize = thisPointer._edFontSize + 'px'; + this.style.color = cc.colorToHex(editBox._textColor); + if(cc.view.isAutoFullScreenEnabled()) { + thisPointer.__fullscreen = true; + cc.view.enableAutoFullScreen(false); + cc.screen.exitFullScreen(); + } else { + thisPointer.__fullscreen = false; + } + + scrollWindowUp(editBox); + + if (editBox._delegate && editBox._delegate.editBoxEditingDidBegan) { + editBox._delegate.editBoxEditingDidBegan(editBox); + } + + }); + tmpEdTxt.addEventListener('keypress', function (e) { + var editBox = thisPointer._editBox; + + if (e.keyCode === cc.KEY.enter) { + e.stopPropagation(); + + if (editBox._delegate && editBox._delegate.editBoxEditingReturn) { + editBox._delegate.editBoxEditingReturn(editBox); + } + } + }); + tmpEdTxt.addEventListener('blur', function () { + var editBox = thisPointer._editBox; + editBox._text = this.value; + thisPointer._updateEditBoxContentStyle(); + window.scrollY = 0; + if(thisPointer.__fullscreen) { + cc.view.enableAutoFullScreen(true); + } + + if (editBox._delegate && editBox._delegate.editBoxEditingDidEnded) { + editBox._delegate.editBoxEditingDidEnded(editBox); + } + + if (this.value === '') { + this.style.fontSize = editBox._placeholderFontSize + 'px'; + this.style.color = cc.colorToHex(editBox._placeholderColor); + } + + thisPointer.hidden(); + }); + + return tmpEdTxt; + }; + + proto._createLabels = function () { + var editBoxSize = this._editBox.getContentSize(); + if(!this._textLabel) { + this._textLabel = new cc.LabelTTF(); + this._textLabel.setVisible(false); + this._textLabel.setAnchorPoint(cc.p(0, 1)); + this._editBox.addChild(this._textLabel, 100); + } + + if(!this._placeholderLabel) { + this._placeholderLabel = new cc.LabelTTF(); + this._placeholderLabel.setAnchorPoint(cc.p(0, 1)); + this._placeholderLabel.setColor(cc.color.GRAY); + this._editBox.addChild(this._placeholderLabel, 100); + } + + this._updateLabelPosition(editBoxSize); + }; + + proto._removeLabels = function () { + if(!this._textLabel) return; + + this._editBox.removeChild(this._textLabel); + this._textLabel = null; + }; + + proto._updateLabelPosition = function (editBoxSize) { + if(!this._textLabel || !this._placeholderLabel) return; + + var labelContentSize = cc.size(editBoxSize.width - LEFT_PADDING, editBoxSize.height); + this._textLabel.setContentSize(labelContentSize); + this._textLabel.setDimensions(labelContentSize); + this._placeholderLabel.setLineHeight(editBoxSize.height); + var placeholderLabelSize = this._placeholderLabel.getContentSize(); + + if (this._editBox._editBoxInputMode === cc.EDITBOX_INPUT_MODE_ANY){ + this._textLabel.setPosition(LEFT_PADDING, editBoxSize.height); + this._placeholderLabel.setPosition(LEFT_PADDING, editBoxSize.height); + this._placeholderLabel.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_TOP); + this._textLabel.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_TOP); + // this._textLabel.enableWrapText(true); + } + else { + // this._textLabel.enableWrapText(false); + this._textLabel.setPosition(LEFT_PADDING, editBoxSize.height); + this._placeholderLabel.setPosition(LEFT_PADDING, (editBoxSize.height + placeholderLabelSize.height) / 2); + this._placeholderLabel.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER); + this._textLabel.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER); + } + + }; + + proto.setLineHeight = function (lineHeight) { + if(this._textLabel) { + this._textLabel.setLineHeight(lineHeight); + } + }; + + proto._hiddenLabels = function () { + if(this._textLabel) { + this._textLabel.setVisible(false); + } + + if(this._placeholderLabel) { + this._placeholderLabel.setVisible(false); + } + }; + + proto._updateEditBoxContentStyle = function() { + var inputFlag = this._editBox._editBoxInputFlag; + if (inputFlag === cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_ALL_CHARACTERS) { + this._editBox._text = this._editBox._text.toUpperCase(); + } + else if (inputFlag === cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) { + this._editBox._text = capitalize(this._editBox._text); + } + else if (inputFlag === cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_SENTENCE) { + this._editBox._text = capitalizeFirstLetter(this._editBox._text); + } + }; + + proto._updateLabelString = function() { + this._updateInputType(); + + if(this._textLabel) { + this._textLabel.setVisible(true); + this._textLabel.setString(this._editBox._text); + } + + if (this._edTxt.type === 'password') { + var passwordString = ''; + var len = this._editBox._text.length; + for (var i = 0; i < len; ++i) { + passwordString += '\u25CF'; + } + if(this._textLabel) { + this._textLabel.setString(passwordString); + } + } else { + this._updateEditBoxContentStyle(); + if(this._textLabel) { + this._textLabel.setString(this._editBox._text); + } + } + }; + + proto._showLabels = function () { + this._hiddenLabels(); + if (this._edTxt.value === '') { + if(this._placeholderLabel) { + this._placeholderLabel.setVisible(true); + this._placeholderLabel.setString(this._editBox._placeholderText); + } + } + else { + this._updateLabelString(); + } + }; + + proto.show = function() { + if(!this._editBox._alwaysOnTop) { + if (this._edTxt.style.display === 'none') { + this._edTxt.style.display = ''; + this._edTxt.focus(); + } + } + this._hiddenLabels(); + }; + + proto.hidden = function() { + if(!this._editBox._alwaysOnTop) { + this._edTxt.style.display = 'none'; + } + this._showLabels(); + }; + + proto._setFont = function (fontStyle) { + var res = cc.LabelTTF._fontStyleRE.exec(fontStyle); + var textFontName = res[2]; + var textFontSize = parseInt(res[1]); + if (res) { + this.setFont(textFontName, textFontSize); + } + }; + + proto.setFont = function (fontName, fontSize) { + this._edFontName = fontName || this._edFontName; + this._edFontSize = fontSize || this._edFontSize; + this._updateDOMFontStyle(); + }; + + proto.setFontName = function (fontName) { + this._edFontName = fontName || this._edFontName; + this._updateDOMFontStyle(); + }; + + proto.setFontSize = function (fontSize) { + this._edFontSize = fontSize || this._edFontSize; + this._updateDOMFontStyle(); + }; + + proto.setFontColor = function (color) { + if(!this._edTxt) return; + + if (this._edTxt.value !== this._editBox._placeholderText) { + this._edTxt.style.color = cc.colorToHex(color); + } + if(this._textLabel) { + this._textLabel.setColor(color); + } + }; + + proto.setPlaceHolder = function (text) { + this._placeholderLabel.setString(text); + }; + + proto.setMaxLength = function (maxLength) { + if(!this._edTxt) return; + this._edTxt.maxLength = maxLength; + }; + + proto._updateDOMPlaceholderFontStyle = function () { + this._placeholderLabel.setFontName(this._editBox._placeholderFontName); + this._placeholderLabel.setFontSize(this._editBox._placeholderFontSize); + }; + + proto.setPlaceholderFontColor = function (color) { + this._placeholderLabel.setColor(color); + }; + + proto._updateInputType = function () { + if(this._editBox._keyboardReturnType === cc.KEYBOARD_RETURNTYPE_SEARCH) { + this._edTxt.type = 'search'; + } + + var inputMode = this._editBox._editBoxInputMode; + if(inputMode === cc.EDITBOX_INPUT_MODE_EMAILADDR) { + this._edTxt.type = 'email'; + } else if(inputMode === cc.EDITBOX_INPUT_MODE_DECIMAL || + inputMode === cc.EDITBOX_INPUT_MODE_NUMERIC) { + this._edTxt.type = 'number'; + } else if(inputMode === cc.EDITBOX_INPUT_MODE_PHONENUMBER) { + this._edTxt.type = 'number'; + this._edTxt.pattern = '[0-9]*'; + } else if(inputMode === cc.EDITBOX_INPUT_MODE_URL) { + this._edTxt.type = 'url'; + } else { + this._edTxt.type = 'text'; + } + + + if (this._editBox._editBoxInputFlag === cc.EDITBOX_INPUT_FLAG_PASSWORD) { + this._edTxt.type = 'password'; + } + }; + + proto.setInputFlag = function (inputFlag) { + if(!this._edTxt) return; + + this._updateInputType(); + + this._edTxt.style.textTransform = 'none'; + + if (inputFlag === cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_ALL_CHARACTERS) { + this._edTxt.style.textTransform = 'uppercase'; + } + else if (inputFlag === cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) { + this._edTxt.style.textTransform = 'capitalize'; + } + this._updateLabelString(); + }; + + proto.setInputMode = function (inputMode) { + this._removeDomInputControl(); + if (inputMode === cc.EDITBOX_INPUT_MODE_ANY) { + this._createDomTextArea(); + } + else { + this._createDomInput(); + } + this._addDomInputControl(); + + this._updateInputType(); + var contentSize = this._node.getContentSize(); + this.updateSize(contentSize.width, contentSize.height); + }; + + proto.setString = function (text) { + if(!this._edTxt) return; + + if (text !== null) { + this._edTxt.value = text; + + if (text === '') { + if(this._placeholderLabel) { + this._placeholderLabel.setString(this._editBox._placeholderText); + this._placeholderLabel.setColor(this._editBox._placeholderColor); + this._placeholderLabel.setVisible(true); + } + + if(this._textLabel) { + this._textLabel.setVisible(false); + } + } + else { + this._edTxt.style.color = cc.colorToHex(this._editBox._textColor); + if(this._textLabel) { + this._textLabel.setColor(this._editBox._textColor); + } + if(this._placeholderLabel) { + this._placeholderLabel.setVisible(false); + } + + this._updateLabelString(); + } + } + }; + + proto._updateDOMFontStyle = function() { + if(!this._edTxt) return; + + if (this._edTxt.value !== '') { + this._edTxt.style.fontFamily = this._edFontName; + this._edTxt.style.fontSize = this._edFontSize + 'px'; + } + if(this._textLabel) { + this._textLabel.setFontSize(this._edFontSize); + this._textLabel.setFontName(this._edFontName); + } + }; + + + proto.updateSize = function(newWidth, newHeight) { + var editboxDomNode = this._edTxt; + if (!editboxDomNode) return; + + editboxDomNode.style['width'] = newWidth + 'px'; + editboxDomNode.style['height'] = newHeight + 'px'; + + this._updateLabelPosition(cc.size(newWidth, newHeight)); + }; + + proto.createNativeControl = function() { + this._createDomTextArea(); + this._addDomInputControl(); + }; + + proto._addDomInputControl = function () { + cc.game.container.appendChild(this._edTxt); + }; + + proto._removeDomInputControl = function () { + var editBox = this._edTxt; + if(editBox){ + var hasChild = false; + if('contains' in cc.game.container) { + hasChild = cc.game.container.contains(editBox); + }else { + hasChild = cc.game.container.compareDocumentPosition(editBox) % 16; + } + if(hasChild) + cc.game.container.removeChild(editBox); + } + this._edTxt = null; + }; + + proto.initializeRenderCmd = function (node) { + this._editBox = node; + + //it's a dom node, may be assigned with Input or TextArea. + this._edFontSize = 14; + this._edFontName = 'Arial'; + this._textLabel = null; + this._placeholderLabel = null; + }; + + //define the canvas render command + cc.EditBox.CanvasRenderCmd = function (node) { + cc.Node.CanvasRenderCmd.call(this, node); + this.initializeRenderCmd(node); + }; + + var canvasRenderCmdProto = cc.EditBox.CanvasRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype); + + function _getPropertyDescriptor (obj, name) { + var pd = Object.getOwnPropertyDescriptor(obj, name); + if (pd) { + return pd; + } + var p = Object.getPrototypeOf(obj); + if (p) { + return _getPropertyDescriptor(p, name); + } + else { + return null; + } + } + + function _copyprop(name, source, target) { + var pd = _getPropertyDescriptor(source, name); + Object.defineProperty(target, name, pd); + } + + var _mixin = function (obj) { + obj = obj || {}; + for (var i = 1, length = arguments.length; i < length; i++) { + var source = arguments[i]; + if (source) { + if (typeof source !== 'object') { + cc.error('cc.js.mixin: arguments must be type object:', source); + continue; + } + for ( var name in source) { + _copyprop( name, source, obj); + } + } + } + return obj; + }; + + _mixin(canvasRenderCmdProto, proto); + canvasRenderCmdProto.constructor = cc.EditBox.CanvasRenderCmd; + + canvasRenderCmdProto.transform = function (parentCmd, recursive) { + this.originTransform(parentCmd, recursive); + this.updateMatrix(); + }; + + + //define the webgl render command + cc.EditBox.WebGLRenderCmd = function (node) { + cc.Node.WebGLRenderCmd.call(this, node); + this.initializeRenderCmd(node); + }; + + var webGLRenderCmdProto = cc.EditBox.WebGLRenderCmd.prototype = Object.create(cc.Node.WebGLRenderCmd.prototype); + _mixin(webGLRenderCmdProto, proto); + webGLRenderCmdProto.constructor = cc.EditBox.WebGLRenderCmd; + webGLRenderCmdProto.transform = function (parentCmd, recursive) { + this.originTransform(parentCmd, recursive); + this.updateMatrix(); + }; +}(cc.EditBox._polyfill)); diff --git a/extensions/editbox/CCdomNode.js b/extensions/editbox/CCdomNode.js deleted file mode 100644 index 5074596750..0000000000 --- a/extensions/editbox/CCdomNode.js +++ /dev/null @@ -1,659 +0,0 @@ -/**************************************************************************** - Copyright (c) 2011-2012 cocos2d-x.org - Copyright (c) 2013-2014 Chukong Technologies Inc. - - http://www.cocos2d-x.org - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in - all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - THE SOFTWARE. - ****************************************************************************/ -/** - * the DOM object - * @namespace - * @name cc.DOM - */ -cc.DOM = {}; - -/** - * @function - * @private - * @param node - */ -cc.DOM._addMethods = function (node) { - for (var funcs in cc.DOM.methods) { - node[funcs] = cc.DOM.methods[funcs]; - } - - // Redefine getter setter - cc.defineGetterSetter(node, "x", node.getPositionX, node.setPositionX); - cc.defineGetterSetter(node, "y", node.getPositionY, node.setPositionY); - cc.defineGetterSetter(node, "width", node._getWidth, node._setWidth); - cc.defineGetterSetter(node, "height", node._getHeight, node._setHeight); - cc.defineGetterSetter(node, "anchorX", node._getAnchorX, node._setAnchorX); - cc.defineGetterSetter(node, "anchorY", node._getAnchorY, node._setAnchorY); - cc.defineGetterSetter(node, "scale", node.getScale, node.setScale); - cc.defineGetterSetter(node, "scaleX", node.getScaleX, node.setScaleX); - cc.defineGetterSetter(node, "scaleY", node.getScaleY, node.setScaleY); - cc.defineGetterSetter(node, "rotation", node.getRotation, node.setRotation); - cc.defineGetterSetter(node, "skewX", node.getSkewX, node.setSkewX); - cc.defineGetterSetter(node, "skewY", node.getSkewY, node.setSkewY); - cc.defineGetterSetter(node, "visible", node.isVisible, node.setVisible); - cc.defineGetterSetter(node, "parent", node.getParent, node.setParent); - cc.defineGetterSetter(node, "opacity", node.getOpacity, node.setOpacity); -}; -cc.DOM.methods = /** @lends cc.DOM# */{ - /** - * Replace the set position of ccNode - * @param {cc.Point|Number} x - * @param {Number} y - */ - setPosition:function (x, y) { - if (y === undefined) { - this._position.x = x.x; - this._position.y = x.y; - } else { - this._position.x = x; - this._position.y = y; - } - this.setNodeDirty(); - this.dom.translates(this._position.x, -this._position.y); - }, - /** - * replace set Position Y of ccNode - * @param {Number} y - */ - setPositionY:function (y) { - this._position.y = y; - this.setNodeDirty(); - this.dom.translates(this._position.x, -this._position.y); - }, - - /** - * replace set Position X of ccNode - * @param {Number} x - */ - setPositionX:function (x) { - this._position.x = x; - this.setNodeDirty(); - this.dom.translates(this._position.x, -this._position.y); - }, - - /** - * replace set Scale of ccNode - * @param {object|Number} scale - * @param {Number} scaleY - */ - setScale:function (scale, scaleY) { - //save dirty region when before change - //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld()); - - this._scaleX = scale; - this._scaleY = scaleY || scale; - - //save dirty region when after changed - //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld()); - this.setNodeDirty(); - this.dom.resize(this._scaleX, this._scaleY); - }, - - /** - * replace set Scale X of ccNode - * @param {Number} x - */ - setScaleX:function (x) { - this._scaleX = x; - this.setNodeDirty(); - this.dom.resize(this._scaleX, this._scaleY); - }, - - /** - * replace set Scale Y of ccNode - * @param {Number} y - */ - setScaleY:function (y) { - this._scaleY = y; - this.setNodeDirty(); - this.dom.resize(this._scaleX, this._scaleY); - }, - - /** - * replace set anchorpoint of ccNode - * @param {cc.Point|Number} point The anchor point of node or The anchor point.x of node. - * @param {Number} [y] The anchor point.y of node. - */ - setAnchorPoint:function (point, y) { - var cmd = this._renderCmd; - - var locAnchorPoint = this._anchorPoint; - if (y === undefined) { - locAnchorPoint.x = point.x; - locAnchorPoint.y = point.y; - } else { - locAnchorPoint.x = point; - locAnchorPoint.y = y; - } - var locAPP = cmd._anchorPointInPoints, locSize = this._contentSize; - locAPP.x = locSize.width * locAnchorPoint.x; - locAPP.y = locSize.height * locAnchorPoint.y; - - this.dom.style[cc.$.pfx + 'TransformOrigin'] = '' + locAPP.x + 'px ' + -locAPP.y + 'px'; - if (this.ignoreAnchor) { - this.dom.style.marginLeft = 0; - this.dom.style.marginBottom = 0; - } else { - this.dom.style.marginLeft = (this.isToggler) ? 0 : -locAPP.x + 'px'; - this.dom.style.marginBottom = -locAPP.y + 'px'; - } - this.setNodeDirty(); - }, - - /** - * replace set anchorpoint x of ccNode - * @param {Number} x The anchor x of node. - */ - _setAnchorX:function (x) { - var locAnchorPoint = this._anchorPoint; - var cmd = this._renderCmd; - - if (x === locAnchorPoint.x) - return; - locAnchorPoint.x = x; - - var locAPP = cmd._anchorPointInPoints, locSize = this._contentSize; - locAPP.x = locSize.width * locAnchorPoint.x; - - this.dom.style[cc.$.pfx + 'TransformOrigin'] = '' + locAPP.x + 'px ' + -locAPP.y + 'px'; - if (this.ignoreAnchor) { - this.dom.style.marginLeft = 0; - this.dom.style.marginBottom = 0; - } else { - this.dom.style.marginLeft = (this.isToggler) ? 0 : -locAPP.x + 'px'; - } - this.setNodeDirty(); - }, - - /** - * replace set anchorpoint y of ccNode - * @param {Number} y The anchor y of node. - */ - _setAnchorY:function (y) { - var locAnchorPoint = this._anchorPoint; - var cmd = this._renderCmd; - - if (y === locAnchorPoint.y) - return; - locAnchorPoint.y = y; - - var locAPP = cmd._anchorPointInPoints, locSize = this._contentSize; - locAPP.y = locSize.height * locAnchorPoint.y; - - this.dom.style[cc.$.pfx + 'TransformOrigin'] = '' + locAPP.x + 'px ' + -locAPP.y + 'px'; - if (this.ignoreAnchor) { - this.dom.style.marginLeft = 0; - this.dom.style.marginBottom = 0; - } else { - this.dom.style.marginBottom = -locAPP.y + 'px'; - } - this.setNodeDirty(); - }, - - /** - * replace set ContentSize of ccNode - * @param {cc.Size|Number} size The untransformed size of the node or The untransformed size's width of the node. - * @param {Number} [height] The untransformed size's height of the node. - */ - setContentSize:function (size, height) { - var cmd = this._renderCmd; - - var locContentSize = this._contentSize; - if (height === undefined) { - locContentSize.width = size.width; - locContentSize.height = size.height; - } else { - locContentSize.width = size; - locContentSize.height = height; - } - var locAPP = cmd._anchorPointInPoints, locAnchorPoint = this._anchorPoint; - locAPP.x = locContentSize.width * locAnchorPoint.x; - locAPP.y = locContentSize.height * locAnchorPoint.y; - this.dom.width = locContentSize.width; - this.dom.height = locContentSize.height; - this.setAnchorPoint(this.getAnchorPoint()); - if (this.canvas) { - this.canvas.width = locContentSize.width; - this.canvas.height = locContentSize.height; - } - this.setNodeDirty(); - this.redraw(); - }, - - /** - * replace set width of ccNode - * @param {Number} width The untransformed size's width of the node. - */ - _setWidth:function (width) { - var locContentSize = this._contentSize; - var cmd = this._renderCmd; - if (width === locContentSize.width) - return; - locContentSize.width = width; - - var locAPP = cmd._anchorPointInPoints, locAnchorPoint = this._anchorPoint; - locAPP.x = locContentSize.width * locAnchorPoint.x; - this.dom.width = locContentSize.width; - this.anchorX = locAnchorPoint.x; - if (this.canvas) { - this.canvas.width = locContentSize.width; - } - this.setNodeDirty(); - this.redraw(); - }, - - /** - * replace set height of ccNode - * @param {Number} height The untransformed size's height of the node. - */ - _setHeight:function (height) { - var locContentSize = this._contentSize; - var cmd = this._renderCmd; - if (height === locContentSize.height) - return; - locContentSize.height = height; - - var locAPP = cmd._anchorPointInPoints, locAnchorPoint = this._anchorPoint; - locAPP.y = locContentSize.height * locAnchorPoint.y; - this.dom.height = locContentSize.height; - this.anchorY = locAnchorPoint.y; - if (this.canvas) { - this.canvas.height = locContentSize.height; - } - this.setNodeDirty(); - this.redraw(); - }, - - /** - * replace set Rotation of ccNode - * @param {Number} newRotation - */ - setRotation:function (newRotation) { - if (this._rotation === newRotation) - return; - - this._rotationX = this._rotationY = newRotation; - this.setNodeDirty(); - this.dom.rotate(newRotation); - }, - - /** - * replace set SkewX of ccNode - * @param {Number} x - */ - setSkewX:function (x) { - this._skewX = x; - this.setNodeDirty(); - this.dom.setSkew(this._skewX, this._skewY); - }, - - /** - * replace set SkewY of ccNode - * @param {Number} y - */ - setSkewY:function (y) { - this._skewY = y; - this.setNodeDirty(); - this.dom.setSkew(this._skewX, this._skewY); - }, - - /** - * replace set Visible of ccNode - * @param {Boolean} x - */ - setVisible:function (x) { - this._visible = x; - this.setNodeDirty(); - if (this.dom) - this.dom.style.display = (x) ? 'block' : 'none'; - }, - _setLocalZOrder:function (z) { - this._localZOrder = z; - this.setNodeDirty(); - if (this.dom) - this.dom.zIndex = z; - }, - - /** - * replace set Parent of ccNode - * @param {cc.Node} p - */ - setParent:function (p) { - this._parent = p; - - if (p !== null) { - p.setAnchorPoint(p.getAnchorPoint()); - this.setNodeDirty(); - cc.DOM.parentDOM(this); - } - }, - - /** - * replace resume Schedule and actions of ccNode - */ - resume:function () { - this.getScheduler().resumeTarget(this); - this.getActionManager().resumeTarget(this); - cc.eventManager.resumeTarget(this); - //if dom does not have parent, but node has no parent and its running - if (this.dom && !this.dom.parentNode) { - if (!this.getParent()) { - if(this.dom.id === ""){ - cc.DOM._createEGLViewDiv(this); - }else{ - this.dom.appendTo(cc.container); - } - } else { - cc.DOM.parentDOM(this); - } - } - if (this.dom) - this.dom.style.visibility = "visible"; - }, - - /** - * replace pause Schedule and Actions of ccNode - */ - pause:function () { - this.getScheduler().pauseTarget(this); - this.getActionManager().pauseTarget(this); - cc.eventManager.pauseTarget(this); - if (this.dom) { - this.dom.style.visibility = 'hidden'; - } - }, - - /** - * replace clean up of ccNode - */ - cleanup:function () { - // actions - this.stopAllActions(); - this.unscheduleAllCallbacks(); - - cc.eventManager.removeListeners(this); - - // timers - this._arrayMakeObjectsPerformSelector(this._children, cc.Node._stateCallbackType.cleanup); - if (this.dom) { - this.dom.remove(); - } - }, - setOpacity:function (o) { - this._opacity = o; - this.dom.style.opacity = o / 255; - }, - /** - * refresh/updates the DOM element - */ - redraw:function () { - if (this.isSprite) { - var tmp = this._children; - this._children = []; - cc.Sprite.prototype.visit.call(this, this.ctx); - this._children = tmp; - } - else { - cc.Sprite.prototype.visit.call(this, this.ctx); - } - } -}; - -cc.DOM._resetEGLViewDiv = function(){ - var div = cc.$("#EGLViewDiv"); - if(div){ - var view = cc.view; - var designSize = view.getDesignResolutionSize(); - var viewPortRect = view.getViewPortRect(); - var screenSize = view.getFrameSize(); - var pixelRatio = view.getDevicePixelRatio(); - var designSizeWidth = designSize.width, designSizeHeight = designSize.height; - var paddingLeft = parseInt(cc.container.style.paddingLeft), - paddingBottom = parseInt(cc.container.style.paddingBottom); - if((designSize.width === 0) && (designSize.height === 0)){ - designSizeWidth = screenSize.width; - designSizeHeight = screenSize.height; - } - - var viewPortWidth = viewPortRect.width/pixelRatio; - if((viewPortRect.width === 0) && (viewPortRect.height === 0)){ - viewPortWidth = screenSize.width; - } - - div.style.position = 'absolute'; - //x.dom.style.display='block'; - div.style.width = designSizeWidth + "px"; - div.style.maxHeight = designSizeHeight + "px"; - div.style.margin = 0; - - div.resize(view.getScaleX()/pixelRatio, view.getScaleY()/pixelRatio); - div.translates(paddingLeft, -paddingBottom); - if (view.getResolutionPolicy() === view._rpNoBorder) { - div.style.left = (view.getFrameSize().width - designSizeWidth)/2 + "px"; - div.style.bottom = (view.getFrameSize().height - designSizeHeight*view.getScaleY()/pixelRatio)/2 + "px"; - } - else { - div.style.left = (designSizeWidth*view.getScaleX()/pixelRatio - designSizeWidth) / 2 + "px"; - div.style.bottom = "0px"; - } - } -}; - -/** - * @function - * @private - * @param x - * @return {Boolean} - */ -cc.DOM.parentDOM = function (x) { - var p = x.getParent(); - //if has parent, parent need to have dom too - if (!p || !x.dom) - return false; - if (!p.dom) { - cc.DOM.placeHolder(p); - p.setParent = cc.DOM.methods.setParent; - } - //if parent have dom, attach self to parent - x.dom.appendTo(p.dom); - p.setAnchorPoint(p.getAnchorPoint()); - - if (p.getParent()) { - cc.DOM.parentDOM(p); - } else { - //parent has no more parent, if its running, then add it to the container - if (p.isRunning()) { - //find EGLView div - var eglViewDiv = cc.$("#EGLViewDiv"); - if (eglViewDiv) { - p.dom.appendTo(eglViewDiv); - } else { - cc.DOM._createEGLViewDiv(p); - } - } - } - return true; -}; - -cc.DOM._createEGLViewDiv = function(p){ - var div = cc.$("#EGLViewDiv"); - if(!div){ - div = cc.$new("div"); - div.id = "EGLViewDiv"; - } - - var view = cc.view; - var designSize = view.getDesignResolutionSize(); - var viewPortRect = view.getViewPortRect(); - var screenSize = view.getFrameSize(); - var pixelRatio = view.getDevicePixelRatio(); - var designSizeWidth = designSize.width, designSizeHeight = designSize.height; - var paddingLeft = parseInt(cc.container.style.paddingLeft), - paddingBottom = parseInt(cc.container.style.paddingBottom); - if ((designSize.width === 0) && (designSize.height === 0)) { - designSizeWidth = screenSize.width; - designSizeHeight = screenSize.height; - } - - var viewPortWidth = viewPortRect.width/pixelRatio; - if ((viewPortRect.width === 0) && (viewPortRect.height === 0)) { - viewPortWidth = screenSize.width; - } - - div.style.position = 'absolute'; - //x.dom.style.display='block'; - div.style.width = designSizeWidth + "px"; - div.style.maxHeight = designSizeHeight + "px"; - div.style.margin = 0; - - div.resize(view.getScaleX()/pixelRatio, view.getScaleY()/pixelRatio); - div.translates(paddingLeft, -paddingBottom); - if (view.getResolutionPolicy() === view._rpNoBorder) { - div.style.left = (screenSize.width - designSizeWidth)/2 + "px"; - div.style.bottom = (screenSize.height - designSizeHeight*view.getScaleY()/pixelRatio)/2 + "px"; - } - else { - div.style.left = (designSizeWidth*view.getScaleX()/pixelRatio - designSizeWidth) / 2 + "px"; - div.style.bottom = "0px"; - } - - p.dom.appendTo(div); - div.appendTo(cc.container); -}; - -/** - * @function - * @private - * @param x - */ -cc.DOM.setTransform = function (x) { - if (x.ctx) { - x.ctx.translate(x.getAnchorPointInPoints().x, x.getAnchorPointInPoints().y); - if (x.isSprite) { - var tmp = x._children; - x._children = []; - cc.Sprite.prototype.visit.call(x); - x._children = tmp; - } - else { - cc.Sprite.prototype.visit.call(x); - } - } - if (x.dom) { - x.dom.position.x = x.getPositionX(); - x.dom.position.y = -x.getPositionY(); - x.dom.rotation = x.getRotation(); - x.dom.scale = {x:x.getScaleX(), y:x.getScaleY()}; - x.dom.skew = {x:x.getSkewX(), y:x.getSkewY()}; - if (x.setAnchorPoint) - x.setAnchorPoint(x.getAnchorPoint()); - x.dom.transforms(); - } - -}; - -/** - * @function - * @private - * @param x - */ -cc.DOM.forSprite = function (x) { - x.dom = cc.$new('div'); - x.canvas = cc.$new('canvas'); - var locContentSize = x.getContentSize(); - x.canvas.width = locContentSize.width; - x.canvas.height = locContentSize.height; - x.dom.style.position = 'absolute'; - x.dom.style.bottom = 0; - x.ctx = x.canvas.getContext('2d'); - x.dom.appendChild(x.canvas); - if (x.getParent()) { - cc.DOM.parentDOM(x); - } - x.isSprite = true; -}; - -/** - * This creates divs for parent Nodes that are related to the current node - * @function - * @private - * @param x - */ -cc.DOM.placeHolder = function (x) { - //creating a placeholder dom to simulate other ccNode in the hierarchy - x.dom = cc.$new('div'); - x.placeholder = true; - x.dom.style.position = 'absolute'; - x.dom.style.bottom = 0; - //x.dom.style.display='block'; - x.dom.style.width = (x.getContentSize().width || cc.director.getWinSize().width) + "px"; - x.dom.style.maxHeight = (x.getContentSize().height || cc.director.getWinSize().height) + "px"; - x.dom.style.margin = 0; - cc.DOM.setTransform(x); - x.dom.transforms(); - cc.DOM._addMethods(x); - //x.dom.style.border = 'red 1px dotted'; -}; - -/** - * Converts cc.Sprite or cc.MenuItem to DOM elements
- * It currently only supports cc.Sprite and cc.MenuItem - * @function - * @param {cc.Sprite|cc.MenuItem|Array} nodeObject - * @example - * // example - * cc.DOM.convert(Sprite1, Sprite2, Menuitem); - * - * var myDOMElements = [Sprite1, Sprite2, MenuItem]; - * cc.DOM.convert(myDOMElements); - */ -cc.DOM.convert = function (nodeObject) { - //if passing by list, make it an array - if (arguments.length > 1) { - cc.DOM.convert(arguments); - return; - } else if (arguments.length === 1 && !arguments[0].length) { - cc.DOM.convert([arguments[0]]); - return; - } - var args = arguments[0]; - for (var i = 0; i < args.length; i++) { - //first check if its sprite - if (args[i] instanceof cc.Sprite) { - // create a canvas - if (!args[i].dom) - cc.DOM.forSprite(args[i]); - } else { - cc.log('DOM converter only supports sprite and menuitems yet'); - } - cc.DOM._addMethods(args[i]); - args[i].visit = function () { - }; - args[i].transform = function () { - }; - cc.DOM.setTransform(args[i]); - args[i].setVisible(args[i].isVisible()); - } -}; diff --git a/moduleConfig.json b/moduleConfig.json index bebf4f2b6c..cc5570bc42 100644 --- a/moduleConfig.json +++ b/moduleConfig.json @@ -292,7 +292,6 @@ "editbox" : [ "core", "gui", - "extensions/editbox/CCdomNode.js", "extensions/editbox/CCEditBox.js" ], "ccpool" : [ From 6d965db866f659e8769c125948ea8c2fb9983b1d Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 17:09:07 +0800 Subject: [PATCH 08/11] Remove overwrite in webgl context object --- cocos2d/core/CCDrawingPrimitivesWebGL.js | 18 +- cocos2d/core/layers/CCLayerWebGLRenderCmd.js | 12 +- cocos2d/core/renderer/GlobalVertexBuffer.js | 4 +- cocos2d/core/renderer/RendererWebGL.js | 6 +- cocos2d/core/textures/CCTextureAtlas.js | 4 +- cocos2d/core/textures/TexturesWebGL.js | 10 +- cocos2d/effects/CCGrid.js | 24 +- cocos2d/motion-streak/CCMotionStreak.js | 6 +- .../CCMotionStreakWebGLRenderCmd.js | 6 +- .../CCParticleSystemWebGLRenderCmd.js | 10 +- .../CCProgressTimerWebGLRenderCmd.js | 4 +- cocos2d/shaders/CCGLStateCache.js | 224 +++++++++--------- cocos2d/shape-nodes/CCDrawNode.js | 2 +- .../UIScrollViewWebGLRenderCmd.js | 2 +- 14 files changed, 169 insertions(+), 163 deletions(-) diff --git a/cocos2d/core/CCDrawingPrimitivesWebGL.js b/cocos2d/core/CCDrawingPrimitivesWebGL.js index f8c9b46d0d..dadf0cf759 100644 --- a/cocos2d/core/CCDrawingPrimitivesWebGL.js +++ b/cocos2d/core/CCDrawingPrimitivesWebGL.js @@ -88,7 +88,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith1f(this._pointSizeLocation, this._pointSize); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array([point.x, point.y]), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -117,7 +117,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith1f(this._pointSizeLocation, this._pointSize); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(points), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -151,7 +151,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray([origin, destination]), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -206,7 +206,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(vertices), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -237,7 +237,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(poli), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.TRIANGLE_FAN, 0, poli.length); @@ -285,7 +285,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -323,7 +323,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -362,7 +362,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.LINE_STRIP, 0, segments + 1); @@ -422,7 +422,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.LINE_STRIP, 0, segments + 1); diff --git a/cocos2d/core/layers/CCLayerWebGLRenderCmd.js b/cocos2d/core/layers/CCLayerWebGLRenderCmd.js index 8051a50abe..f39a4814b7 100644 --- a/cocos2d/core/layers/CCLayerWebGLRenderCmd.js +++ b/cocos2d/core/layers/CCLayerWebGLRenderCmd.js @@ -101,10 +101,10 @@ // // Attributes // - context.bindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); + cc.glBindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, context.FLOAT, false, 0, 0); - context.bindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); + cc.glBindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, context.UNSIGNED_BYTE, true, 0, 0); context.drawArrays(context.TRIANGLE_STRIP, 0, this._squareVertices.length); @@ -144,13 +144,13 @@ proto._bindLayerVerticesBufferData = function(){ var glContext = cc._renderContext; - glContext.bindBuffer(glContext.ARRAY_BUFFER, this._verticesFloat32Buffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, this._verticesFloat32Buffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._squareVerticesAB, glContext.DYNAMIC_DRAW); }; proto._bindLayerColorsBufferData = function(){ var glContext = cc._renderContext; - glContext.bindBuffer(glContext.ARRAY_BUFFER, this._colorsUint8Buffer); + cc.glBindBuffer(glContext.ARRAY_BUFFER, this._colorsUint8Buffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._squareColorsAB, glContext.STATIC_DRAW); }; @@ -313,9 +313,9 @@ // // Attributes // - context.bindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); + cc.glBindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, context.FLOAT, false, 0, 0); - context.bindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); + cc.glBindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, context.UNSIGNED_BYTE, true, 0, 0); context.drawArrays(context.TRIANGLE_STRIP, 0, this._squareVertices.length); diff --git a/cocos2d/core/renderer/GlobalVertexBuffer.js b/cocos2d/core/renderer/GlobalVertexBuffer.js index 4bb7029805..9cbfd28d21 100644 --- a/cocos2d/core/renderer/GlobalVertexBuffer.js +++ b/cocos2d/core/renderer/GlobalVertexBuffer.js @@ -39,7 +39,7 @@ var GlobalVertexBuffer = function (gl) { this.dataArray = new Float32Array(this.data); // Init buffer data - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.dataArray, gl.DYNAMIC_DRAW); this._dirty = false; @@ -114,7 +114,7 @@ GlobalVertexBuffer.prototype = { update: function () { if (this._dirty) { - this.gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // Note: Can memorize different dirty zones and update them separately, maybe faster this.gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dataArray); this._dirty = false; diff --git a/cocos2d/core/renderer/RendererWebGL.js b/cocos2d/core/renderer/RendererWebGL.js index 93c692a5d9..34c6c7715d 100644 --- a/cocos2d/core/renderer/RendererWebGL.js +++ b/cocos2d/core/renderer/RendererWebGL.js @@ -315,7 +315,7 @@ return { cc.glBlendFunc(_batchedInfo.blendSrc, _batchedInfo.blendDst); cc.glBindTexture2DN(0, texture); // = cc.glBindTexture2D(texture); - var _bufferchanged = !gl.bindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); + var _bufferchanged = !cc.glBindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); // upload the vertex data to the gl buffer if (_batchingSize > _vertexSize * 0.5) { gl.bufferData(gl.ARRAY_BUFFER, _vertexDataF32, gl.DYNAMIC_DRAW); @@ -334,7 +334,7 @@ return { gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); } - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer); gl.drawElements(gl.TRIANGLES, count * 6, gl.UNSIGNED_SHORT, 0); cc.g_NumberOfDraws++; @@ -352,7 +352,7 @@ return { context = ctx || cc._renderContext; // Reset buffer for rendering - context.bindBuffer(gl.ARRAY_BUFFER, null); + cc.glBindBuffer(gl.ARRAY_BUFFER, null); for (i = 0, len = locCmds.length; i < len; ++i) { cmd = locCmds[i]; diff --git a/cocos2d/core/textures/CCTextureAtlas.js b/cocos2d/core/textures/CCTextureAtlas.js index b996dc7f42..baa68f0e3c 100644 --- a/cocos2d/core/textures/CCTextureAtlas.js +++ b/cocos2d/core/textures/CCTextureAtlas.js @@ -211,10 +211,10 @@ cc.TextureAtlas = cc.Class.extend(/** @lends cc.TextureAtlas# */{ //WebGL only _mapBuffers: function () { var gl = cc._renderContext; - gl.bindBuffer(gl.ARRAY_BUFFER, this._quadsWebBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._quadsWebBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._quadsArrayBuffer, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); }, diff --git a/cocos2d/core/textures/TexturesWebGL.js b/cocos2d/core/textures/TexturesWebGL.js index cf6a2555de..ae55915d95 100644 --- a/cocos2d/core/textures/TexturesWebGL.js +++ b/cocos2d/core/textures/TexturesWebGL.js @@ -795,10 +795,10 @@ cc._tmp.WebGLTextureAtlas = function () { var _t = this; var gl = cc._renderContext; - gl.bindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); gl.bufferData(gl.ARRAY_BUFFER, _t._quadsArrayBuffer, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, _t._indices, gl.STATIC_DRAW); //cc.checkGLErrorDebug(); @@ -823,10 +823,10 @@ cc._tmp.WebGLTextureAtlas = function () { // Using VBO without VAO // //vertices - //gl.bindBuffer(gl.ARRAY_BUFFER, _t._buffersVBO[0]); + cc.glBindBuffer(gl.ARRAY_BUFFER, _t._buffersVBO[0]); // XXX: update is done in draw... perhaps it should be done in a timer - gl.bindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); if (_t.dirty){ gl.bufferData(gl.ARRAY_BUFFER, _t._quadsArrayBuffer, gl.DYNAMIC_DRAW); _t.dirty = false; @@ -840,7 +840,7 @@ cc._tmp.WebGLTextureAtlas = function () { gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); // colors gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); // tex coords - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); if (cc.TEXTURE_ATLAS_USE_TRIANGLE_STRIP) gl.drawElements(gl.TRIANGLE_STRIP, n * 6, gl.UNSIGNED_SHORT, start * 6 * _t._indices.BYTES_PER_ELEMENT); diff --git a/cocos2d/effects/CCGrid.js b/cocos2d/effects/CCGrid.js index 8c5cd08a22..64e1d3086a 100644 --- a/cocos2d/effects/CCGrid.js +++ b/cocos2d/effects/CCGrid.js @@ -456,18 +456,18 @@ cc.Grid3D = cc.GridBase.extend(/** @lends cc.Grid3D# */{ // Attributes // // position - gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 0, 0); // texCoords - gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 0, 0); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); if (locDirty) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0); @@ -553,11 +553,11 @@ cc.Grid3D = cc.GridBase.extend(/** @lends cc.Grid3D# */{ } this._originalVertices = new Float32Array(this._vertices); - gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); this._dirty = true; }, @@ -727,18 +727,18 @@ cc.TiledGrid3D = cc.GridBase.extend(/** @lends cc.TiledGrid3D# */{ gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); // position - gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 0, this._vertices); // texCoords - gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 0, this._texCoordinates); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); if (locDirty) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0); @@ -832,11 +832,11 @@ cc.TiledGrid3D = cc.GridBase.extend(/** @lends cc.TiledGrid3D# */{ } this._originalVertices = new Float32Array(this._vertices); - gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.DYNAMIC_DRAW); this._dirty = true; } diff --git a/cocos2d/motion-streak/CCMotionStreak.js b/cocos2d/motion-streak/CCMotionStreak.js index 1553aa4c2a..b3c33947de 100644 --- a/cocos2d/motion-streak/CCMotionStreak.js +++ b/cocos2d/motion-streak/CCMotionStreak.js @@ -290,11 +290,11 @@ cc.MotionStreak = cc.Node.extend(/** @lends cc.MotionStreak# */{ this.scheduleUpdate(); //bind buffer - gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordsBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordsBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoords, gl.DYNAMIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, this._colorPointerBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._colorPointerBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._colorPointer, gl.DYNAMIC_DRAW); return true; diff --git a/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js b/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js index 69f4f12f5f..56914dda6a 100644 --- a/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js +++ b/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js @@ -60,17 +60,17 @@ cc.MotionStreak.WebGLRenderCmd.prototype.rendering = function(ctx){ ctx.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); //position - ctx.bindBuffer(ctx.ARRAY_BUFFER, node._verticesBuffer); + cc.glBindBuffer(ctx.ARRAY_BUFFER, node._verticesBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._vertices, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, ctx.FLOAT, false, 0, 0); //texcoords - ctx.bindBuffer(ctx.ARRAY_BUFFER, node._texCoordsBuffer); + cc.glBindBuffer(ctx.ARRAY_BUFFER, node._texCoordsBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._texCoords, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, ctx.FLOAT, false, 0, 0); //colors - ctx.bindBuffer(ctx.ARRAY_BUFFER, node._colorPointerBuffer); + cc.glBindBuffer(ctx.ARRAY_BUFFER, node._colorPointerBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._colorPointer, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, ctx.UNSIGNED_BYTE, true, 0, 0); diff --git a/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js b/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js index 8e684256d3..eb8f3872fe 100644 --- a/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js +++ b/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js @@ -210,12 +210,12 @@ gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); - gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 24, 0); // vertices gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); // colors gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); // tex coords - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.drawElements(gl.TRIANGLES, node._particleIdx * 6, gl.UNSIGNED_SHORT, 0); }; @@ -341,11 +341,11 @@ //gl.deleteBuffer(this._buffersVBO[0]); this._buffersVBO[0] = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.bufferData(gl.ARRAY_BUFFER, this._quadsArrayBuffer, gl.DYNAMIC_DRAW); this._buffersVBO[1] = gl.createBuffer(); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); //cc.checkGLErrorDebug(); @@ -378,7 +378,7 @@ proto.postStep = function(){ var gl = cc._renderContext; - gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this._quadsArrayBuffer); }; diff --git a/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js b/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js index e1be5255ae..1f57a535f4 100644 --- a/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js +++ b/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js @@ -70,7 +70,7 @@ var blendFunc = node._sprite._blendFunc; cc.glBlendFunc(blendFunc.src, blendFunc.dst); cc.glBindTexture2D(node._sprite.texture); - context.bindBuffer(context.ARRAY_BUFFER, this._vertexWebGLBuffer); + cc.glBindBuffer(context.ARRAY_BUFFER, this._vertexWebGLBuffer); context.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION); context.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); @@ -220,7 +220,7 @@ } // Init buffer data - gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexWebGLBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._vertexWebGLBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._float32View, gl.DYNAMIC_DRAW); this._vertexDataCount = 0; diff --git a/cocos2d/shaders/CCGLStateCache.js b/cocos2d/shaders/CCGLStateCache.js index 127bc2d711..e86109aa6e 100644 --- a/cocos2d/shaders/CCGLStateCache.js +++ b/cocos2d/shaders/CCGLStateCache.js @@ -24,108 +24,112 @@ THE SOFTWARE. ****************************************************************************/ -cc._currentProjectionMatrix = -1; +(function () { -if (cc.ENABLE_GL_STATE_CACHE) { - cc.MAX_ACTIVETEXTURE = 16; +cc.MAX_ACTIVETEXTURE = 16; +var _currentProjectionMatrix = -1, + _currentShaderProgram = -1, + _currentBoundTexture = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1], + _blendingSource = -1, + _blendingDest = -1, + _GLServerState = 0, + _uVAO = 0, + _currBuffers = {}, + _vertexAttribPosition = false, + _vertexAttribColor = false, + _vertexAttribTexCoords = false, - cc._currentShaderProgram = -1; - cc._currentBoundTexture = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1]; - cc._blendingSource = -1; - cc._blendingDest = -1; - cc._GLServerState = 0; - if(cc.TEXTURE_ATLAS_USE_VAO) - cc._uVAO = 0; + ENABLE_GL_STATE_CACHE = cc.ENABLE_GL_STATE_CACHE; - var _currBuffers = {}; +// GL State Cache functions - WebGLRenderingContext.prototype.glBindBuffer = WebGLRenderingContext.prototype.bindBuffer; - WebGLRenderingContext.prototype.bindBuffer = function (target, buffer) { - if (_currBuffers[target] !== buffer) { - this.glBindBuffer(target, buffer); - _currBuffers[target] = buffer; - return false; - } - else { - return true; - } - }; +cc.glBindBuffer = ENABLE_GL_STATE_CACHE ? function (target, buffer) { + if (_currBuffers[target] !== buffer) { + cc._renderContext.bindBuffer(target, buffer); + _currBuffers[target] = buffer; + return false; + } + else { + return true; + } +} : function (target, buffer) { + cc._renderContext.bindBuffer(target, buffer); +}; - WebGLRenderingContext.prototype.glEnableVertexAttribArray = WebGLRenderingContext.prototype.enableVertexAttribArray; - WebGLRenderingContext.prototype.enableVertexAttribArray = function (index) { - if (index === cc.VERTEX_ATTRIB_FLAG_POSITION) { - if (!this._vertexAttribPosition) { - this.glEnableVertexAttribArray(index); - this._vertexAttribPosition = true; - } - } - else if (index === cc.VERTEX_ATTRIB_FLAG_COLOR) { - if (!this._vertexAttribColor) { - this.glEnableVertexAttribArray(index); - this._vertexAttribColor = true; - } +cc.glEnableVertexAttribArray = ENABLE_GL_STATE_CACHE ? function (index) { + if (index === macro.VERTEX_ATTRIB_FLAG_POSITION) { + if (!_vertexAttribPosition) { + cc._renderContext.enableVertexAttribArray(index); + _vertexAttribPosition = true; } - else if (index === cc.VERTEX_ATTRIB_FLAG_TEX_COORDS) { - if (!this._vertexAttribTexCoords) { - this.glEnableVertexAttribArray(index); - this._vertexAttribTexCoords = true; - } + } + else if (index === macro.VERTEX_ATTRIB_FLAG_COLOR) { + if (!_vertexAttribColor) { + cc._renderContext.enableVertexAttribArray(index); + _vertexAttribColor = true; } - else { - this.glEnableVertexAttribArray(index); + } + else if (index === macro.VERTEX_ATTRIB_FLAG_TEX_COORDS) { + if (!_vertexAttribTexCoords) { + cc._renderContext.enableVertexAttribArray(index); + _vertexAttribTexCoords = true; } - }; + } + else { + cc._renderContext.enableVertexAttribArray(index); + } +} : function (index) { + cc._renderContext.enableVertexAttribArray(index); +}; - WebGLRenderingContext.prototype.glDisableVertexAttribArray = WebGLRenderingContext.prototype.disableVertexAttribArray; - WebGLRenderingContext.prototype.disableVertexAttribArray = function (index) { - if (index === cc.VERTEX_ATTRIB_FLAG_COLOR) { - if (this._vertexAttribColor) { - this.glDisableVertexAttribArray(index); - this._vertexAttribColor = false; - } - } - else if (index === cc.VERTEX_ATTRIB_FLAG_TEX_COORDS) { - if (this._vertexAttribTexCoords) { - this.glDisableVertexAttribArray(index); - this._vertexAttribTexCoords = false; - } +cc.glDisableVertexAttribArray = ENABLE_GL_STATE_CACHE ? function (index) { + if (index === macro.VERTEX_ATTRIB_FLAG_COLOR) { + if (_vertexAttribColor) { + cc._renderContext.disableVertexAttribArray(index); + _vertexAttribColor = false; } - else if (index !== 0) { - this.glDisableVertexAttribArray(index); + } + else if (index === macro.VERTEX_ATTRIB_FLAG_TEX_COORDS) { + if (_vertexAttribTexCoords) { + cc._renderContext.disableVertexAttribArray(index); + _vertexAttribTexCoords = false; } - }; -} - -// GL State Cache functions + } + else if (index !== 0) { + cc._renderContext.disableVertexAttribArray(index); + } +} : function (index) { + cc._renderContext.disableVertexAttribArray(index); +}; /** * Invalidates the GL state cache.
- * If CC_ENABLE_GL_STATE_CACHE it will reset the GL state cache. + * If cc.ENABLE_GL_STATE_CACHE it will reset the GL state cache. * @function */ cc.glInvalidateStateCache = function () { cc.kmGLFreeAll(); - cc._currentProjectionMatrix = -1; - if (cc.ENABLE_GL_STATE_CACHE) { - cc._currentShaderProgram = -1; + _currentProjectionMatrix = -1; + if (ENABLE_GL_STATE_CACHE) { + _currentShaderProgram = -1; for (var i = 0; i < cc.MAX_ACTIVETEXTURE; i++) { - cc._currentBoundTexture[i] = -1; + _currentBoundTexture[i] = -1; } - cc._blendingSource = -1; - cc._blendingDest = -1; - cc._GLServerState = 0; + _blendingSource = -1; + _blendingDest = -1; + _GLServerState = 0; } }; /** * Uses the GL program in case program is different than the current one.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glUseProgram() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glUseProgram() directly. * @function * @param {WebGLProgram} program */ -cc.glUseProgram = cc.ENABLE_GL_STATE_CACHE ? function (program) { - if (program !== cc._currentShaderProgram) { - cc._currentShaderProgram = program; +cc.glUseProgram = ENABLE_GL_STATE_CACHE ? function (program) { + if (program !== _currentShaderProgram) { + _currentShaderProgram = program; cc._renderContext.useProgram(program); } } : function (program) { @@ -134,14 +138,14 @@ cc.glUseProgram = cc.ENABLE_GL_STATE_CACHE ? function (program) { /** * Deletes the GL program. If it is the one that is being used, it invalidates it.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glDeleteProgram() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glDeleteProgram() directly. * @function * @param {WebGLProgram} program */ cc.glDeleteProgram = function (program) { - if (cc.ENABLE_GL_STATE_CACHE) { - if (program === cc._currentShaderProgram) - cc._currentShaderProgram = -1; + if (ENABLE_GL_STATE_CACHE) { + if (program === _currentShaderProgram) + _currentShaderProgram = -1; } gl.deleteProgram(program); }; @@ -165,15 +169,15 @@ cc.setBlending = function (sfactor, dfactor) { /** * Uses a blending function in case it not already used.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glBlendFunc() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glBlendFunc() directly. * @function * @param {Number} sfactor * @param {Number} dfactor */ -cc.glBlendFunc = cc.ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { - if ((sfactor !== cc._blendingSource) || (dfactor !== cc._blendingDest)) { - cc._blendingSource = sfactor; - cc._blendingDest = dfactor; +cc.glBlendFunc = ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { + if ((sfactor !== _blendingSource) || (dfactor !== _blendingDest)) { + _blendingSource = sfactor; + _blendingDest = dfactor; cc.setBlending(sfactor, dfactor); } } : cc.setBlending; @@ -184,9 +188,9 @@ cc.glBlendFunc = cc.ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { * @param {Number} dfactor */ cc.glBlendFuncForParticle = function(sfactor, dfactor) { - if ((sfactor !== cc._blendingSource) || (dfactor !== cc._blendingDest)) { - cc._blendingSource = sfactor; - cc._blendingDest = dfactor; + if ((sfactor !== _blendingSource) || (dfactor !== _blendingDest)) { + _blendingSource = sfactor; + _blendingDest = dfactor; var ctx = cc._renderContext; if ((sfactor === ctx.ONE) && (dfactor === ctx.ZERO)) { ctx.disable(ctx.BLEND); @@ -200,14 +204,14 @@ cc.glBlendFuncForParticle = function(sfactor, dfactor) { /** * Resets the blending mode back to the cached state in case you used glBlendFuncSeparate() or glBlendEquation().
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will just set the default blending mode using GL_FUNC_ADD. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will just set the default blending mode using GL_FUNC_ADD. * @function */ cc.glBlendResetToCache = function () { var ctx = cc._renderContext; ctx.blendEquation(ctx.FUNC_ADD); - if (cc.ENABLE_GL_STATE_CACHE) - cc.setBlending(cc._blendingSource, cc._blendingDest); + if (ENABLE_GL_STATE_CACHE) + cc.setBlending(_blendingSource, _blendingDest); else cc.setBlending(ctx.BLEND_SRC, ctx.BLEND_DST); }; @@ -217,12 +221,12 @@ cc.glBlendResetToCache = function () { * @function */ cc.setProjectionMatrixDirty = function () { - cc._currentProjectionMatrix = -1; + _currentProjectionMatrix = -1; }; /** * If the texture is not already bound, it binds it.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. * @function * @param {cc.Texture2D} textureId */ @@ -232,15 +236,15 @@ cc.glBindTexture2D = function (textureId) { /** * If the texture is not already bound to a given unit, it binds it.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. * @function * @param {Number} textureUnit * @param {cc.Texture2D} textureId */ -cc.glBindTexture2DN = cc.ENABLE_GL_STATE_CACHE ? function (textureUnit, textureId) { - if (cc._currentBoundTexture[textureUnit] === textureId) +cc.glBindTexture2DN = ENABLE_GL_STATE_CACHE ? function (textureUnit, textureId) { + if (_currentBoundTexture[textureUnit] === textureId) return; - cc._currentBoundTexture[textureUnit] = textureId; + _currentBoundTexture[textureUnit] = textureId; var ctx = cc._renderContext; ctx.activeTexture(ctx.TEXTURE0 + textureUnit); @@ -259,7 +263,7 @@ cc.glBindTexture2DN = cc.ENABLE_GL_STATE_CACHE ? function (textureUnit, textureI /** * It will delete a given texture. If the texture was bound, it will invalidate the cached.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. * @function * @param {WebGLTexture} textureId */ @@ -269,22 +273,22 @@ cc.glDeleteTexture = function (textureId) { /** * It will delete a given texture. If the texture was bound, it will invalidate the cached for the given texture unit.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. * @function * @param {Number} textureUnit * @param {WebGLTexture} textureId */ cc.glDeleteTextureN = function (textureUnit, textureId) { - if (cc.ENABLE_GL_STATE_CACHE) { - if (textureId === cc._currentBoundTexture[ textureUnit ]) - cc._currentBoundTexture[ textureUnit ] = -1; + if (ENABLE_GL_STATE_CACHE) { + if (textureId === _currentBoundTexture[ textureUnit ]) + _currentBoundTexture[ textureUnit ] = -1; } cc._renderContext.deleteTexture(textureId._webTextureObj); }; /** * If the vertex array is not already bound, it binds it.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindVertexArray() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindVertexArray() directly. * @function * @param {Number} vaoId */ @@ -292,9 +296,9 @@ cc.glBindVAO = function (vaoId) { if (!cc.TEXTURE_ATLAS_USE_VAO) return; - if (cc.ENABLE_GL_STATE_CACHE) { - if (cc._uVAO !== vaoId) { - cc._uVAO = vaoId; + if (ENABLE_GL_STATE_CACHE) { + if (_uVAO !== vaoId) { + _uVAO = vaoId; //TODO need fixed //glBindVertexArray(vaoId); } @@ -305,24 +309,24 @@ cc.glBindVAO = function (vaoId) { /** * It will enable / disable the server side GL states.
- * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glEnable() directly. + * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glEnable() directly. * @function * @param {Number} flags */ cc.glEnable = function (flags) { - if (cc.ENABLE_GL_STATE_CACHE) { + if (ENABLE_GL_STATE_CACHE) { /*var enabled; */ /* GL_BLEND */ /* - if ((enabled = (flags & cc.GL_BLEND)) != (cc._GLServerState & cc.GL_BLEND)) { + if ((enabled = (flags & cc.GL_BLEND)) != (_GLServerState & cc.GL_BLEND)) { if (enabled) { cc._renderContext.enable(cc._renderContext.BLEND); - cc._GLServerState |= cc.GL_BLEND; + _GLServerState |= cc.GL_BLEND; } else { cc._renderContext.disable(cc._renderContext.BLEND); - cc._GLServerState &= ~cc.GL_BLEND; + _GLServerState &= ~cc.GL_BLEND; } }*/ } else { @@ -332,3 +336,5 @@ cc.glEnable = function (flags) { cc._renderContext.disable(cc._renderContext.BLEND);*/ } }; + +})(); diff --git a/cocos2d/shape-nodes/CCDrawNode.js b/cocos2d/shape-nodes/CCDrawNode.js index 48cdf4cccc..bb101ab904 100644 --- a/cocos2d/shape-nodes/CCDrawNode.js +++ b/cocos2d/shape-nodes/CCDrawNode.js @@ -664,7 +664,7 @@ cc.game.addEventListener(cc.game.EVENT_RENDERER_INITED, function () { _render:function () { var gl = cc._renderContext; - gl.bindBuffer(gl.ARRAY_BUFFER, this._trianglesWebBuffer); + cc.glBindBuffer(gl.ARRAY_BUFFER, this._trianglesWebBuffer); if (this._dirty) { gl.bufferData(gl.ARRAY_BUFFER, this._trianglesArrayBuffer, gl.STREAM_DRAW); this._dirty = false; diff --git a/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js b/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js index 413d23aff0..11696851d3 100644 --- a/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js +++ b/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js @@ -40,7 +40,7 @@ this._node.updateChildren(); // Reset buffer for rendering - context.bindBuffer(gl.ARRAY_BUFFER, null); + cc.glBindBuffer(gl.ARRAY_BUFFER, null); for (i = 0, len = locCmds.length; i < len; i++) { cmd = locCmds[i]; From 80759742e13c03fab83f9c072564b1aacfc2ea19 Mon Sep 17 00:00:00 2001 From: pandamicro Date: Thu, 3 Nov 2016 21:42:02 +0800 Subject: [PATCH 09/11] Revert "Remove overwrite in webgl context object" This reverts commit 6d965db866f659e8769c125948ea8c2fb9983b1d. --- cocos2d/core/CCDrawingPrimitivesWebGL.js | 18 +- cocos2d/core/layers/CCLayerWebGLRenderCmd.js | 12 +- cocos2d/core/renderer/GlobalVertexBuffer.js | 4 +- cocos2d/core/renderer/RendererWebGL.js | 6 +- cocos2d/core/textures/CCTextureAtlas.js | 4 +- cocos2d/core/textures/TexturesWebGL.js | 10 +- cocos2d/effects/CCGrid.js | 24 +- cocos2d/motion-streak/CCMotionStreak.js | 6 +- .../CCMotionStreakWebGLRenderCmd.js | 6 +- .../CCParticleSystemWebGLRenderCmd.js | 10 +- .../CCProgressTimerWebGLRenderCmd.js | 4 +- cocos2d/shaders/CCGLStateCache.js | 224 +++++++++--------- cocos2d/shape-nodes/CCDrawNode.js | 2 +- .../UIScrollViewWebGLRenderCmd.js | 2 +- 14 files changed, 163 insertions(+), 169 deletions(-) diff --git a/cocos2d/core/CCDrawingPrimitivesWebGL.js b/cocos2d/core/CCDrawingPrimitivesWebGL.js index dadf0cf759..f8c9b46d0d 100644 --- a/cocos2d/core/CCDrawingPrimitivesWebGL.js +++ b/cocos2d/core/CCDrawingPrimitivesWebGL.js @@ -88,7 +88,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith1f(this._pointSizeLocation, this._pointSize); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array([point.x, point.y]), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -117,7 +117,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith1f(this._pointSizeLocation, this._pointSize); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(points), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -151,7 +151,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray([origin, destination]), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -206,7 +206,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(vertices), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -237,7 +237,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._pointsToTypeArray(poli), glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.TRIANGLE_FAN, 0, poli.length); @@ -285,7 +285,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -323,7 +323,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); @@ -362,7 +362,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.LINE_STRIP, 0, segments + 1); @@ -422,7 +422,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL# this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray); var pointBuffer = glContext.createBuffer(); - cc.glBindBuffer(glContext.ARRAY_BUFFER, pointBuffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, pointBuffer); glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW); glContext.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, glContext.FLOAT, false, 0, 0); glContext.drawArrays(glContext.LINE_STRIP, 0, segments + 1); diff --git a/cocos2d/core/layers/CCLayerWebGLRenderCmd.js b/cocos2d/core/layers/CCLayerWebGLRenderCmd.js index f39a4814b7..8051a50abe 100644 --- a/cocos2d/core/layers/CCLayerWebGLRenderCmd.js +++ b/cocos2d/core/layers/CCLayerWebGLRenderCmd.js @@ -101,10 +101,10 @@ // // Attributes // - cc.glBindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); + context.bindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, context.FLOAT, false, 0, 0); - cc.glBindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); + context.bindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, context.UNSIGNED_BYTE, true, 0, 0); context.drawArrays(context.TRIANGLE_STRIP, 0, this._squareVertices.length); @@ -144,13 +144,13 @@ proto._bindLayerVerticesBufferData = function(){ var glContext = cc._renderContext; - cc.glBindBuffer(glContext.ARRAY_BUFFER, this._verticesFloat32Buffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, this._verticesFloat32Buffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._squareVerticesAB, glContext.DYNAMIC_DRAW); }; proto._bindLayerColorsBufferData = function(){ var glContext = cc._renderContext; - cc.glBindBuffer(glContext.ARRAY_BUFFER, this._colorsUint8Buffer); + glContext.bindBuffer(glContext.ARRAY_BUFFER, this._colorsUint8Buffer); glContext.bufferData(glContext.ARRAY_BUFFER, this._squareColorsAB, glContext.STATIC_DRAW); }; @@ -313,9 +313,9 @@ // // Attributes // - cc.glBindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); + context.bindBuffer(context.ARRAY_BUFFER, this._verticesFloat32Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, context.FLOAT, false, 0, 0); - cc.glBindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); + context.bindBuffer(context.ARRAY_BUFFER, this._colorsUint8Buffer); context.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, context.UNSIGNED_BYTE, true, 0, 0); context.drawArrays(context.TRIANGLE_STRIP, 0, this._squareVertices.length); diff --git a/cocos2d/core/renderer/GlobalVertexBuffer.js b/cocos2d/core/renderer/GlobalVertexBuffer.js index 9cbfd28d21..4bb7029805 100644 --- a/cocos2d/core/renderer/GlobalVertexBuffer.js +++ b/cocos2d/core/renderer/GlobalVertexBuffer.js @@ -39,7 +39,7 @@ var GlobalVertexBuffer = function (gl) { this.dataArray = new Float32Array(this.data); // Init buffer data - cc.glBindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.dataArray, gl.DYNAMIC_DRAW); this._dirty = false; @@ -114,7 +114,7 @@ GlobalVertexBuffer.prototype = { update: function () { if (this._dirty) { - cc.glBindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + this.gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // Note: Can memorize different dirty zones and update them separately, maybe faster this.gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dataArray); this._dirty = false; diff --git a/cocos2d/core/renderer/RendererWebGL.js b/cocos2d/core/renderer/RendererWebGL.js index 34c6c7715d..93c692a5d9 100644 --- a/cocos2d/core/renderer/RendererWebGL.js +++ b/cocos2d/core/renderer/RendererWebGL.js @@ -315,7 +315,7 @@ return { cc.glBlendFunc(_batchedInfo.blendSrc, _batchedInfo.blendDst); cc.glBindTexture2DN(0, texture); // = cc.glBindTexture2D(texture); - var _bufferchanged = !cc.glBindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); + var _bufferchanged = !gl.bindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); // upload the vertex data to the gl buffer if (_batchingSize > _vertexSize * 0.5) { gl.bufferData(gl.ARRAY_BUFFER, _vertexDataF32, gl.DYNAMIC_DRAW); @@ -334,7 +334,7 @@ return { gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); } - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer); gl.drawElements(gl.TRIANGLES, count * 6, gl.UNSIGNED_SHORT, 0); cc.g_NumberOfDraws++; @@ -352,7 +352,7 @@ return { context = ctx || cc._renderContext; // Reset buffer for rendering - cc.glBindBuffer(gl.ARRAY_BUFFER, null); + context.bindBuffer(gl.ARRAY_BUFFER, null); for (i = 0, len = locCmds.length; i < len; ++i) { cmd = locCmds[i]; diff --git a/cocos2d/core/textures/CCTextureAtlas.js b/cocos2d/core/textures/CCTextureAtlas.js index baa68f0e3c..b996dc7f42 100644 --- a/cocos2d/core/textures/CCTextureAtlas.js +++ b/cocos2d/core/textures/CCTextureAtlas.js @@ -211,10 +211,10 @@ cc.TextureAtlas = cc.Class.extend(/** @lends cc.TextureAtlas# */{ //WebGL only _mapBuffers: function () { var gl = cc._renderContext; - cc.glBindBuffer(gl.ARRAY_BUFFER, this._quadsWebBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._quadsWebBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._quadsArrayBuffer, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); }, diff --git a/cocos2d/core/textures/TexturesWebGL.js b/cocos2d/core/textures/TexturesWebGL.js index ae55915d95..cf6a2555de 100644 --- a/cocos2d/core/textures/TexturesWebGL.js +++ b/cocos2d/core/textures/TexturesWebGL.js @@ -795,10 +795,10 @@ cc._tmp.WebGLTextureAtlas = function () { var _t = this; var gl = cc._renderContext; - cc.glBindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); gl.bufferData(gl.ARRAY_BUFFER, _t._quadsArrayBuffer, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, _t._indices, gl.STATIC_DRAW); //cc.checkGLErrorDebug(); @@ -823,10 +823,10 @@ cc._tmp.WebGLTextureAtlas = function () { // Using VBO without VAO // //vertices - cc.glBindBuffer(gl.ARRAY_BUFFER, _t._buffersVBO[0]); + //gl.bindBuffer(gl.ARRAY_BUFFER, _t._buffersVBO[0]); // XXX: update is done in draw... perhaps it should be done in a timer - cc.glBindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, _t._quadsWebBuffer); if (_t.dirty){ gl.bufferData(gl.ARRAY_BUFFER, _t._quadsArrayBuffer, gl.DYNAMIC_DRAW); _t.dirty = false; @@ -840,7 +840,7 @@ cc._tmp.WebGLTextureAtlas = function () { gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); // colors gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); // tex coords - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _t._buffersVBO[1]); if (cc.TEXTURE_ATLAS_USE_TRIANGLE_STRIP) gl.drawElements(gl.TRIANGLE_STRIP, n * 6, gl.UNSIGNED_SHORT, start * 6 * _t._indices.BYTES_PER_ELEMENT); diff --git a/cocos2d/effects/CCGrid.js b/cocos2d/effects/CCGrid.js index 64e1d3086a..8c5cd08a22 100644 --- a/cocos2d/effects/CCGrid.js +++ b/cocos2d/effects/CCGrid.js @@ -456,18 +456,18 @@ cc.Grid3D = cc.GridBase.extend(/** @lends cc.Grid3D# */{ // Attributes // // position - cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 0, 0); // texCoords - cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 0, 0); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); if (locDirty) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0); @@ -553,11 +553,11 @@ cc.Grid3D = cc.GridBase.extend(/** @lends cc.Grid3D# */{ } this._originalVertices = new Float32Array(this._vertices); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); this._dirty = true; }, @@ -727,18 +727,18 @@ cc.TiledGrid3D = cc.GridBase.extend(/** @lends cc.TiledGrid3D# */{ gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); // position - cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 0, this._vertices); // texCoords - cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); if (locDirty) gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 0, this._texCoordinates); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); if (locDirty) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0); @@ -832,11 +832,11 @@ cc.TiledGrid3D = cc.GridBase.extend(/** @lends cc.TiledGrid3D# */{ } this._originalVertices = new Float32Array(this._vertices); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordinateBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoordinates, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.DYNAMIC_DRAW); this._dirty = true; } diff --git a/cocos2d/motion-streak/CCMotionStreak.js b/cocos2d/motion-streak/CCMotionStreak.js index b3c33947de..1553aa4c2a 100644 --- a/cocos2d/motion-streak/CCMotionStreak.js +++ b/cocos2d/motion-streak/CCMotionStreak.js @@ -290,11 +290,11 @@ cc.MotionStreak = cc.Node.extend(/** @lends cc.MotionStreak# */{ this.scheduleUpdate(); //bind buffer - cc.glBindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._texCoordsBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordsBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._texCoords, gl.DYNAMIC_DRAW); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._colorPointerBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._colorPointerBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._colorPointer, gl.DYNAMIC_DRAW); return true; diff --git a/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js b/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js index 56914dda6a..69f4f12f5f 100644 --- a/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js +++ b/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js @@ -60,17 +60,17 @@ cc.MotionStreak.WebGLRenderCmd.prototype.rendering = function(ctx){ ctx.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); //position - cc.glBindBuffer(ctx.ARRAY_BUFFER, node._verticesBuffer); + ctx.bindBuffer(ctx.ARRAY_BUFFER, node._verticesBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._vertices, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, ctx.FLOAT, false, 0, 0); //texcoords - cc.glBindBuffer(ctx.ARRAY_BUFFER, node._texCoordsBuffer); + ctx.bindBuffer(ctx.ARRAY_BUFFER, node._texCoordsBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._texCoords, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, ctx.FLOAT, false, 0, 0); //colors - cc.glBindBuffer(ctx.ARRAY_BUFFER, node._colorPointerBuffer); + ctx.bindBuffer(ctx.ARRAY_BUFFER, node._colorPointerBuffer); ctx.bufferData(ctx.ARRAY_BUFFER, node._colorPointer, ctx.DYNAMIC_DRAW); ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, ctx.UNSIGNED_BYTE, true, 0, 0); diff --git a/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js b/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js index eb8f3872fe..8e684256d3 100644 --- a/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js +++ b/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js @@ -210,12 +210,12 @@ gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 24, 0); // vertices gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); // colors gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); // tex coords - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.drawElements(gl.TRIANGLES, node._particleIdx * 6, gl.UNSIGNED_SHORT, 0); }; @@ -341,11 +341,11 @@ //gl.deleteBuffer(this._buffersVBO[0]); this._buffersVBO[0] = gl.createBuffer(); - cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.bufferData(gl.ARRAY_BUFFER, this._quadsArrayBuffer, gl.DYNAMIC_DRAW); this._buffersVBO[1] = gl.createBuffer(); - cc.glBindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._buffersVBO[1]); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this._indices, gl.STATIC_DRAW); //cc.checkGLErrorDebug(); @@ -378,7 +378,7 @@ proto.postStep = function(){ var gl = cc._renderContext; - cc.glBindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); + gl.bindBuffer(gl.ARRAY_BUFFER, this._buffersVBO[0]); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this._quadsArrayBuffer); }; diff --git a/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js b/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js index 1f57a535f4..e1be5255ae 100644 --- a/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js +++ b/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js @@ -70,7 +70,7 @@ var blendFunc = node._sprite._blendFunc; cc.glBlendFunc(blendFunc.src, blendFunc.dst); cc.glBindTexture2D(node._sprite.texture); - cc.glBindBuffer(context.ARRAY_BUFFER, this._vertexWebGLBuffer); + context.bindBuffer(context.ARRAY_BUFFER, this._vertexWebGLBuffer); context.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION); context.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); @@ -220,7 +220,7 @@ } // Init buffer data - cc.glBindBuffer(gl.ARRAY_BUFFER, this._vertexWebGLBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexWebGLBuffer); gl.bufferData(gl.ARRAY_BUFFER, this._float32View, gl.DYNAMIC_DRAW); this._vertexDataCount = 0; diff --git a/cocos2d/shaders/CCGLStateCache.js b/cocos2d/shaders/CCGLStateCache.js index e86109aa6e..127bc2d711 100644 --- a/cocos2d/shaders/CCGLStateCache.js +++ b/cocos2d/shaders/CCGLStateCache.js @@ -24,112 +24,108 @@ THE SOFTWARE. ****************************************************************************/ -(function () { +cc._currentProjectionMatrix = -1; -cc.MAX_ACTIVETEXTURE = 16; -var _currentProjectionMatrix = -1, - _currentShaderProgram = -1, - _currentBoundTexture = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1], - _blendingSource = -1, - _blendingDest = -1, - _GLServerState = 0, - _uVAO = 0, - _currBuffers = {}, - _vertexAttribPosition = false, - _vertexAttribColor = false, - _vertexAttribTexCoords = false, +if (cc.ENABLE_GL_STATE_CACHE) { + cc.MAX_ACTIVETEXTURE = 16; - ENABLE_GL_STATE_CACHE = cc.ENABLE_GL_STATE_CACHE; + cc._currentShaderProgram = -1; + cc._currentBoundTexture = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1]; + cc._blendingSource = -1; + cc._blendingDest = -1; + cc._GLServerState = 0; + if(cc.TEXTURE_ATLAS_USE_VAO) + cc._uVAO = 0; -// GL State Cache functions + var _currBuffers = {}; -cc.glBindBuffer = ENABLE_GL_STATE_CACHE ? function (target, buffer) { - if (_currBuffers[target] !== buffer) { - cc._renderContext.bindBuffer(target, buffer); - _currBuffers[target] = buffer; - return false; - } - else { - return true; - } -} : function (target, buffer) { - cc._renderContext.bindBuffer(target, buffer); -}; + WebGLRenderingContext.prototype.glBindBuffer = WebGLRenderingContext.prototype.bindBuffer; + WebGLRenderingContext.prototype.bindBuffer = function (target, buffer) { + if (_currBuffers[target] !== buffer) { + this.glBindBuffer(target, buffer); + _currBuffers[target] = buffer; + return false; + } + else { + return true; + } + }; -cc.glEnableVertexAttribArray = ENABLE_GL_STATE_CACHE ? function (index) { - if (index === macro.VERTEX_ATTRIB_FLAG_POSITION) { - if (!_vertexAttribPosition) { - cc._renderContext.enableVertexAttribArray(index); - _vertexAttribPosition = true; + WebGLRenderingContext.prototype.glEnableVertexAttribArray = WebGLRenderingContext.prototype.enableVertexAttribArray; + WebGLRenderingContext.prototype.enableVertexAttribArray = function (index) { + if (index === cc.VERTEX_ATTRIB_FLAG_POSITION) { + if (!this._vertexAttribPosition) { + this.glEnableVertexAttribArray(index); + this._vertexAttribPosition = true; + } } - } - else if (index === macro.VERTEX_ATTRIB_FLAG_COLOR) { - if (!_vertexAttribColor) { - cc._renderContext.enableVertexAttribArray(index); - _vertexAttribColor = true; + else if (index === cc.VERTEX_ATTRIB_FLAG_COLOR) { + if (!this._vertexAttribColor) { + this.glEnableVertexAttribArray(index); + this._vertexAttribColor = true; + } } - } - else if (index === macro.VERTEX_ATTRIB_FLAG_TEX_COORDS) { - if (!_vertexAttribTexCoords) { - cc._renderContext.enableVertexAttribArray(index); - _vertexAttribTexCoords = true; + else if (index === cc.VERTEX_ATTRIB_FLAG_TEX_COORDS) { + if (!this._vertexAttribTexCoords) { + this.glEnableVertexAttribArray(index); + this._vertexAttribTexCoords = true; + } } - } - else { - cc._renderContext.enableVertexAttribArray(index); - } -} : function (index) { - cc._renderContext.enableVertexAttribArray(index); -}; + else { + this.glEnableVertexAttribArray(index); + } + }; -cc.glDisableVertexAttribArray = ENABLE_GL_STATE_CACHE ? function (index) { - if (index === macro.VERTEX_ATTRIB_FLAG_COLOR) { - if (_vertexAttribColor) { - cc._renderContext.disableVertexAttribArray(index); - _vertexAttribColor = false; + WebGLRenderingContext.prototype.glDisableVertexAttribArray = WebGLRenderingContext.prototype.disableVertexAttribArray; + WebGLRenderingContext.prototype.disableVertexAttribArray = function (index) { + if (index === cc.VERTEX_ATTRIB_FLAG_COLOR) { + if (this._vertexAttribColor) { + this.glDisableVertexAttribArray(index); + this._vertexAttribColor = false; + } } - } - else if (index === macro.VERTEX_ATTRIB_FLAG_TEX_COORDS) { - if (_vertexAttribTexCoords) { - cc._renderContext.disableVertexAttribArray(index); - _vertexAttribTexCoords = false; + else if (index === cc.VERTEX_ATTRIB_FLAG_TEX_COORDS) { + if (this._vertexAttribTexCoords) { + this.glDisableVertexAttribArray(index); + this._vertexAttribTexCoords = false; + } } - } - else if (index !== 0) { - cc._renderContext.disableVertexAttribArray(index); - } -} : function (index) { - cc._renderContext.disableVertexAttribArray(index); -}; + else if (index !== 0) { + this.glDisableVertexAttribArray(index); + } + }; +} + +// GL State Cache functions /** * Invalidates the GL state cache.
- * If cc.ENABLE_GL_STATE_CACHE it will reset the GL state cache. + * If CC_ENABLE_GL_STATE_CACHE it will reset the GL state cache. * @function */ cc.glInvalidateStateCache = function () { cc.kmGLFreeAll(); - _currentProjectionMatrix = -1; - if (ENABLE_GL_STATE_CACHE) { - _currentShaderProgram = -1; + cc._currentProjectionMatrix = -1; + if (cc.ENABLE_GL_STATE_CACHE) { + cc._currentShaderProgram = -1; for (var i = 0; i < cc.MAX_ACTIVETEXTURE; i++) { - _currentBoundTexture[i] = -1; + cc._currentBoundTexture[i] = -1; } - _blendingSource = -1; - _blendingDest = -1; - _GLServerState = 0; + cc._blendingSource = -1; + cc._blendingDest = -1; + cc._GLServerState = 0; } }; /** * Uses the GL program in case program is different than the current one.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glUseProgram() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glUseProgram() directly. * @function * @param {WebGLProgram} program */ -cc.glUseProgram = ENABLE_GL_STATE_CACHE ? function (program) { - if (program !== _currentShaderProgram) { - _currentShaderProgram = program; +cc.glUseProgram = cc.ENABLE_GL_STATE_CACHE ? function (program) { + if (program !== cc._currentShaderProgram) { + cc._currentShaderProgram = program; cc._renderContext.useProgram(program); } } : function (program) { @@ -138,14 +134,14 @@ cc.glUseProgram = ENABLE_GL_STATE_CACHE ? function (program) { /** * Deletes the GL program. If it is the one that is being used, it invalidates it.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glDeleteProgram() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glDeleteProgram() directly. * @function * @param {WebGLProgram} program */ cc.glDeleteProgram = function (program) { - if (ENABLE_GL_STATE_CACHE) { - if (program === _currentShaderProgram) - _currentShaderProgram = -1; + if (cc.ENABLE_GL_STATE_CACHE) { + if (program === cc._currentShaderProgram) + cc._currentShaderProgram = -1; } gl.deleteProgram(program); }; @@ -169,15 +165,15 @@ cc.setBlending = function (sfactor, dfactor) { /** * Uses a blending function in case it not already used.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will the glBlendFunc() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will the glBlendFunc() directly. * @function * @param {Number} sfactor * @param {Number} dfactor */ -cc.glBlendFunc = ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { - if ((sfactor !== _blendingSource) || (dfactor !== _blendingDest)) { - _blendingSource = sfactor; - _blendingDest = dfactor; +cc.glBlendFunc = cc.ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { + if ((sfactor !== cc._blendingSource) || (dfactor !== cc._blendingDest)) { + cc._blendingSource = sfactor; + cc._blendingDest = dfactor; cc.setBlending(sfactor, dfactor); } } : cc.setBlending; @@ -188,9 +184,9 @@ cc.glBlendFunc = ENABLE_GL_STATE_CACHE ? function (sfactor, dfactor) { * @param {Number} dfactor */ cc.glBlendFuncForParticle = function(sfactor, dfactor) { - if ((sfactor !== _blendingSource) || (dfactor !== _blendingDest)) { - _blendingSource = sfactor; - _blendingDest = dfactor; + if ((sfactor !== cc._blendingSource) || (dfactor !== cc._blendingDest)) { + cc._blendingSource = sfactor; + cc._blendingDest = dfactor; var ctx = cc._renderContext; if ((sfactor === ctx.ONE) && (dfactor === ctx.ZERO)) { ctx.disable(ctx.BLEND); @@ -204,14 +200,14 @@ cc.glBlendFuncForParticle = function(sfactor, dfactor) { /** * Resets the blending mode back to the cached state in case you used glBlendFuncSeparate() or glBlendEquation().
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will just set the default blending mode using GL_FUNC_ADD. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will just set the default blending mode using GL_FUNC_ADD. * @function */ cc.glBlendResetToCache = function () { var ctx = cc._renderContext; ctx.blendEquation(ctx.FUNC_ADD); - if (ENABLE_GL_STATE_CACHE) - cc.setBlending(_blendingSource, _blendingDest); + if (cc.ENABLE_GL_STATE_CACHE) + cc.setBlending(cc._blendingSource, cc._blendingDest); else cc.setBlending(ctx.BLEND_SRC, ctx.BLEND_DST); }; @@ -221,12 +217,12 @@ cc.glBlendResetToCache = function () { * @function */ cc.setProjectionMatrixDirty = function () { - _currentProjectionMatrix = -1; + cc._currentProjectionMatrix = -1; }; /** * If the texture is not already bound, it binds it.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. * @function * @param {cc.Texture2D} textureId */ @@ -236,15 +232,15 @@ cc.glBindTexture2D = function (textureId) { /** * If the texture is not already bound to a given unit, it binds it.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindTexture() directly. * @function * @param {Number} textureUnit * @param {cc.Texture2D} textureId */ -cc.glBindTexture2DN = ENABLE_GL_STATE_CACHE ? function (textureUnit, textureId) { - if (_currentBoundTexture[textureUnit] === textureId) +cc.glBindTexture2DN = cc.ENABLE_GL_STATE_CACHE ? function (textureUnit, textureId) { + if (cc._currentBoundTexture[textureUnit] === textureId) return; - _currentBoundTexture[textureUnit] = textureId; + cc._currentBoundTexture[textureUnit] = textureId; var ctx = cc._renderContext; ctx.activeTexture(ctx.TEXTURE0 + textureUnit); @@ -263,7 +259,7 @@ cc.glBindTexture2DN = ENABLE_GL_STATE_CACHE ? function (textureUnit, textureId) /** * It will delete a given texture. If the texture was bound, it will invalidate the cached.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. * @function * @param {WebGLTexture} textureId */ @@ -273,22 +269,22 @@ cc.glDeleteTexture = function (textureId) { /** * It will delete a given texture. If the texture was bound, it will invalidate the cached for the given texture unit.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glDeleteTextures() directly. * @function * @param {Number} textureUnit * @param {WebGLTexture} textureId */ cc.glDeleteTextureN = function (textureUnit, textureId) { - if (ENABLE_GL_STATE_CACHE) { - if (textureId === _currentBoundTexture[ textureUnit ]) - _currentBoundTexture[ textureUnit ] = -1; + if (cc.ENABLE_GL_STATE_CACHE) { + if (textureId === cc._currentBoundTexture[ textureUnit ]) + cc._currentBoundTexture[ textureUnit ] = -1; } cc._renderContext.deleteTexture(textureId._webTextureObj); }; /** * If the vertex array is not already bound, it binds it.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glBindVertexArray() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glBindVertexArray() directly. * @function * @param {Number} vaoId */ @@ -296,9 +292,9 @@ cc.glBindVAO = function (vaoId) { if (!cc.TEXTURE_ATLAS_USE_VAO) return; - if (ENABLE_GL_STATE_CACHE) { - if (_uVAO !== vaoId) { - _uVAO = vaoId; + if (cc.ENABLE_GL_STATE_CACHE) { + if (cc._uVAO !== vaoId) { + cc._uVAO = vaoId; //TODO need fixed //glBindVertexArray(vaoId); } @@ -309,24 +305,24 @@ cc.glBindVAO = function (vaoId) { /** * It will enable / disable the server side GL states.
- * If cc.ENABLE_GL_STATE_CACHE is disabled, it will call glEnable() directly. + * If CC_ENABLE_GL_STATE_CACHE is disabled, it will call glEnable() directly. * @function * @param {Number} flags */ cc.glEnable = function (flags) { - if (ENABLE_GL_STATE_CACHE) { + if (cc.ENABLE_GL_STATE_CACHE) { /*var enabled; */ /* GL_BLEND */ /* - if ((enabled = (flags & cc.GL_BLEND)) != (_GLServerState & cc.GL_BLEND)) { + if ((enabled = (flags & cc.GL_BLEND)) != (cc._GLServerState & cc.GL_BLEND)) { if (enabled) { cc._renderContext.enable(cc._renderContext.BLEND); - _GLServerState |= cc.GL_BLEND; + cc._GLServerState |= cc.GL_BLEND; } else { cc._renderContext.disable(cc._renderContext.BLEND); - _GLServerState &= ~cc.GL_BLEND; + cc._GLServerState &= ~cc.GL_BLEND; } }*/ } else { @@ -336,5 +332,3 @@ cc.glEnable = function (flags) { cc._renderContext.disable(cc._renderContext.BLEND);*/ } }; - -})(); diff --git a/cocos2d/shape-nodes/CCDrawNode.js b/cocos2d/shape-nodes/CCDrawNode.js index bb101ab904..48cdf4cccc 100644 --- a/cocos2d/shape-nodes/CCDrawNode.js +++ b/cocos2d/shape-nodes/CCDrawNode.js @@ -664,7 +664,7 @@ cc.game.addEventListener(cc.game.EVENT_RENDERER_INITED, function () { _render:function () { var gl = cc._renderContext; - cc.glBindBuffer(gl.ARRAY_BUFFER, this._trianglesWebBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, this._trianglesWebBuffer); if (this._dirty) { gl.bufferData(gl.ARRAY_BUFFER, this._trianglesArrayBuffer, gl.STREAM_DRAW); this._dirty = false; diff --git a/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js b/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js index 11696851d3..413d23aff0 100644 --- a/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js +++ b/extensions/ccui/uiwidgets/scroll-widget/UIScrollViewWebGLRenderCmd.js @@ -40,7 +40,7 @@ this._node.updateChildren(); // Reset buffer for rendering - cc.glBindBuffer(gl.ARRAY_BUFFER, null); + context.bindBuffer(gl.ARRAY_BUFFER, null); for (i = 0, len = locCmds.length; i < len; i++) { cmd = locCmds[i]; From f60dde1e0ff762421c65113e408eb9560d4976ca Mon Sep 17 00:00:00 2001 From: pandamicro Date: Sun, 6 Nov 2016 18:58:42 +0800 Subject: [PATCH 10/11] Fix texture issue on Android browser by always set vertexAttribPointer --- cocos2d/core/renderer/RendererWebGL.js | 16 +++++++--------- cocos2d/shaders/CCGLStateCache.js | 4 ---- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/cocos2d/core/renderer/RendererWebGL.js b/cocos2d/core/renderer/RendererWebGL.js index 93c692a5d9..918c175b71 100644 --- a/cocos2d/core/renderer/RendererWebGL.js +++ b/cocos2d/core/renderer/RendererWebGL.js @@ -315,7 +315,7 @@ return { cc.glBlendFunc(_batchedInfo.blendSrc, _batchedInfo.blendDst); cc.glBindTexture2DN(0, texture); // = cc.glBindTexture2D(texture); - var _bufferchanged = !gl.bindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, _quadVertexBuffer); // upload the vertex data to the gl buffer if (_batchingSize > _vertexSize * 0.5) { gl.bufferData(gl.ARRAY_BUFFER, _vertexDataF32, gl.DYNAMIC_DRAW); @@ -325,14 +325,12 @@ return { gl.bufferData(gl.ARRAY_BUFFER, view, gl.DYNAMIC_DRAW); } - if (_bufferchanged) { - gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION); - gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); - gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); - gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 24, 0); - gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); - gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); - } + gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION); + gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR); + gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_TEX_COORDS); + gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 3, gl.FLOAT, false, 24, 0); + gl.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, gl.UNSIGNED_BYTE, true, 24, 12); + gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 24, 16); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer); gl.drawElements(gl.TRIANGLES, count * 6, gl.UNSIGNED_SHORT, 0); diff --git a/cocos2d/shaders/CCGLStateCache.js b/cocos2d/shaders/CCGLStateCache.js index 127bc2d711..edcf86c3b8 100644 --- a/cocos2d/shaders/CCGLStateCache.js +++ b/cocos2d/shaders/CCGLStateCache.js @@ -44,10 +44,6 @@ if (cc.ENABLE_GL_STATE_CACHE) { if (_currBuffers[target] !== buffer) { this.glBindBuffer(target, buffer); _currBuffers[target] = buffer; - return false; - } - else { - return true; } }; From 2032c3a97dd7d476d9d9dc425f6a475bf4e3a1e8 Mon Sep 17 00:00:00 2001 From: pandamicro Date: Mon, 7 Nov 2016 15:53:27 +0800 Subject: [PATCH 11/11] Improve performance for transform by removing recursive logic --- .../core/base-nodes/CCNodeCanvasRenderCmd.js | 107 +++++++++++------- 1 file changed, 66 insertions(+), 41 deletions(-) diff --git a/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js b/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js index 768998f8d2..27ed094b7b 100644 --- a/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js +++ b/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js @@ -38,7 +38,7 @@ cc.CustomRenderCmd = function (target, func) { }; }; -cc.Node._dirtyFlags = { +var dirtyFlags = cc.Node._dirtyFlags = { transformDirty: 1 << 0, visibleDirty: 1 << 1, colorDirty: 1 << 2, opacityDirty: 1 << 3, cacheDirty: 1 << 4, orderDirty: 1 << 5, textDirty: 1 << 6, gradientDirty: 1 << 7, textureDirty: 1 << 8, contentDirty: 1 << 9, @@ -46,6 +46,32 @@ cc.Node._dirtyFlags = { all: (1 << 10) - 1 }; +var ONE_DEGREE = Math.PI / 180; +var stack = new Array(50); + +function transformChildTree (root) { + var index = 1; + var children, child, curr, parentCmd, i, len; + stack[0] = root; + while (index) { + index--; + curr = stack[index]; + // Avoid memory leak + stack[index] = null; + if (!curr) continue; + children = curr._children; + if (children && children.length > 0) { + parentCmd = curr._renderCmd; + for (i = 0, len = children.length; i < len; ++i) { + child = children[i]; + stack[index] = child; + index++; + child._renderCmd.transform(parentCmd); + } + } + } +} + //-------------------------Base ------------------------- cc.Node.RenderCmd = function (renderable) { this._dirtyFlag = 1; //need update the transform at first. @@ -150,7 +176,7 @@ cc.Node.RenderCmd.prototype = { // rotation if (hasRotation) { - var rotationRadiansX = node._rotationX * 0.017453292519943295; //0.017453292519943295 = (Math.PI / 180); for performance + var rotationRadiansX = node._rotationX * ONE_DEGREE; c = Math.sin(rotationRadiansX); d = Math.cos(rotationRadiansX); if (node._rotationY === node._rotationX) { @@ -158,7 +184,7 @@ cc.Node.RenderCmd.prototype = { b = -c; } else { - var rotationRadiansY = node._rotationY * 0.017453292519943295; //0.017453292519943295 = (Math.PI / 180); for performance + var rotationRadiansY = node._rotationY * ONE_DEGREE; a = Math.cos(rotationRadiansY); b = -Math.sin(rotationRadiansY); } @@ -172,8 +198,8 @@ cc.Node.RenderCmd.prototype = { // skew if (hasSkew) { - var skx = Math.tan(node._skewX * Math.PI / 180); - var sky = Math.tan(node._skewY * Math.PI / 180); + var skx = Math.tan(node._skewX * ONE_DEGREE); + var sky = Math.tan(node._skewY * ONE_DEGREE); if (skx === Infinity) skx = 99999999; if (sky === Infinity) @@ -250,17 +276,13 @@ cc.Node.RenderCmd.prototype = { this._transform = cc.affineTransformConcat(t, node._additionalTransform); } - this._updateCurrentRegions && this._updateCurrentRegions(); - this._notifyRegionStatus && this._notifyRegionStatus(cc.Node.CanvasRenderCmd.RegionStatus.DirtyDouble); + if (this._updateCurrentRegions) { + this._updateCurrentRegions(); + this._notifyRegionStatus && this._notifyRegionStatus(cc.Node.CanvasRenderCmd.RegionStatus.DirtyDouble); + } if (recursive) { - var locChildren = this._node._children; - if (!locChildren || locChildren.length === 0) - return; - var i, len; - for (i = 0, len = locChildren.length; i < len; i++) { - locChildren[i]._renderCmd.transform(this, recursive); - } + transformChildTree(node); } this._cacheDirty = true; @@ -331,7 +353,7 @@ cc.Node.RenderCmd.prototype = { } } } - this._dirtyFlag = this._dirtyFlag & cc.Node._dirtyFlags.colorDirty ^ this._dirtyFlag; + this._dirtyFlag &= ~dirtyFlags.colorDirty; }, _updateDisplayOpacity: function (parentOpacity) { @@ -366,7 +388,7 @@ cc.Node.RenderCmd.prototype = { } } } - this._dirtyFlag = this._dirtyFlag & cc.Node._dirtyFlags.opacityDirty ^ this._dirtyFlag; + this._dirtyFlag &= ~dirtyFlags.opacityDirty; }, _syncDisplayColor: function (parentColor) { @@ -394,14 +416,17 @@ cc.Node.RenderCmd.prototype = { this._displayedOpacity = node._realOpacity * parentOpacity / 255.0; }, - _updateColor: function () { - }, + _updateColor: function(){}, updateStatus: function () { - var flags = cc.Node._dirtyFlags, locFlag = this._dirtyFlag; - var colorDirty = locFlag & flags.colorDirty, - opacityDirty = locFlag & flags.opacityDirty; - this._savedDirtyFlag = this._savedDirtyFlag || locFlag; + var locFlag = this._dirtyFlag; + var colorDirty = locFlag & dirtyFlags.colorDirty, + opacityDirty = locFlag & dirtyFlags.opacityDirty; + + if (locFlag & dirtyFlags.contentDirty) { + this._notifyRegionStatus && this._notifyRegionStatus(_ccsg.Node.CanvasRenderCmd.RegionStatus.Dirty); + this._dirtyFlag &= ~dirtyFlags.contentDirty; + } if (colorDirty) this._updateDisplayColor(); @@ -412,20 +437,20 @@ cc.Node.RenderCmd.prototype = { if (colorDirty || opacityDirty) this._updateColor(); - if (locFlag & flags.transformDirty) { + if (locFlag & dirtyFlags.transformDirty) { //update the transform this.transform(this.getParentRenderCmd(), true); - this._dirtyFlag = this._dirtyFlag & flags.transformDirty ^ this._dirtyFlag; + this._dirtyFlag &= ~dirtyFlags.transformDirty; } - if (locFlag & flags.orderDirty) - this._dirtyFlag = this._dirtyFlag & flags.orderDirty ^ this._dirtyFlag; + if (locFlag & dirtyFlags.orderDirty) + this._dirtyFlag &= ~dirtyFlags.orderDirty; }, _syncStatus: function (parentCmd) { // In the visit logic does not restore the _dirtyFlag // Because child elements need parent's _dirtyFlag to change himself - var flags = cc.Node._dirtyFlags, locFlag = this._dirtyFlag, parentNode = null; + var locFlag = this._dirtyFlag, parentNode = null; if (parentCmd) { parentNode = parentCmd._node; this._savedDirtyFlag = this._savedDirtyFlag || parentCmd._savedDirtyFlag || locFlag; @@ -440,37 +465,37 @@ cc.Node.RenderCmd.prototype = { // But while the child element does not enter the circulation // Here will be reset state in last // In order the child elements get the parent state - if (parentNode && parentNode._cascadeColorEnabled && (parentCmd._dirtyFlag & flags.colorDirty)) - locFlag |= flags.colorDirty; + if (parentNode && parentNode._cascadeColorEnabled && (parentCmd._dirtyFlag & dirtyFlags.colorDirty)) + locFlag |= dirtyFlags.colorDirty; - if (parentNode && parentNode._cascadeOpacityEnabled && (parentCmd._dirtyFlag & flags.opacityDirty)) - locFlag |= flags.opacityDirty; + if (parentNode && parentNode._cascadeOpacityEnabled && (parentCmd._dirtyFlag & dirtyFlags.opacityDirty)) + locFlag |= dirtyFlags.opacityDirty; - if (parentCmd && (parentCmd._dirtyFlag & flags.transformDirty)) - locFlag |= flags.transformDirty; + if (parentCmd && (parentCmd._dirtyFlag & dirtyFlags.transformDirty)) + locFlag |= dirtyFlags.transformDirty; - var colorDirty = locFlag & flags.colorDirty, - opacityDirty = locFlag & flags.opacityDirty; + var colorDirty = locFlag & dirtyFlags.colorDirty, + opacityDirty = locFlag & dirtyFlags.opacityDirty; this._dirtyFlag = locFlag; if (colorDirty) - //update the color + //update the color this._syncDisplayColor(); if (opacityDirty) - //update the opacity + //update the opacity this._syncDisplayOpacity(); if (colorDirty || opacityDirty) this._updateColor(); - if (locFlag & flags.transformDirty) + if (locFlag & dirtyFlags.transformDirty) //update the transform this.transform(parentCmd); - if (locFlag & flags.orderDirty) - this._dirtyFlag = this._dirtyFlag & flags.orderDirty ^ this._dirtyFlag; + if (locFlag & dirtyFlags.orderDirty) + this._dirtyFlag &= ~dirtyFlags.orderDirty; }, visitChildren: function () { @@ -612,4 +637,4 @@ cc.Node.RenderCmd.prototype.originTransform = cc.Node.RenderCmd.prototype.transf return "source-over"; } }; -})(); \ No newline at end of file +})();