1. 新的API风格

我们直接来看看你可以如何使用Cocos2d-JS v3.0：

如表格中可以看到的，设置position属性的函数调用在3.0版中会被替换为直接的对象属性存取。不仅仅是示例中的x，y和rotation，几乎所有节点类型中关于属性存取的函数都会被替换为直接的对象属性访问。具体的属性列表在文档最后。

得益于JavaScript的getter/setter，我们可以为对象的某一个属性名分别设置其getter/setter函数。这就是Cocos2d-JS如何做到从函数到属性的转换。比如说，node.x = x;实际上调用了setPositionX函数并传入x作为参数，所以在使用属性风格API的时候请不要因为它的简单而感到担心，在很多情况下这等同于以前的函数调用。

你也可以给自己的对象属性定义getter/setter函数，只需要使用下面这行代码：

cc.defineGetterSetter(object,"propertyName",getterFunc,setterFunc);

这样的话，var a = object.propertyName;会通过getterFunc获取propertyName的当前值，object.propertyName = newvalue;则会通过setterFunc来给propertyName赋新值。

至于属性的命名，我们尽可能提供了类似css风格的属性名，除此之外的属性都尽力维持与v2.2.2中一致。选择类似css的属性名是为了给JavaScript开发者以最自然的开发体验。

2. cc.Node的attr函数

新API使得Cocos2d-JS代码更加简洁，但这还不够，我们为cc.Node添加了更为简单易用的attr函数。与jQuery的attr函数相同，这个函数允许开发者批量设置多个属性。示例如下：

node.attr({
    x: 20,y0.5,anchorY400,height300,scale2
});

值得一提的是，这个函数不仅仅支持文末列表中的属性，也支持开发者的自定义属性。

3. 改变的初衷

为什么Cocos2d-JS要对已稳定的API做出如此大的改变呢？我想最显而易见的答案已经体现在前面的示例中了：那就是更简单。

但是我们真正想改变的目标，并不仅仅是更简单而已，或者说简单并不是目标，而是结果。长期以来，Cocos2d-JS一直被WEB开发者诟病其复杂程度导致难于学习和使用。在与其他html5游戏引擎比较之后，我们发现我们引擎最大的问题是，它并不是为JavaScript开发者设计的。事实上确实如此，到目前为止，Cocos2d-JS引擎的实现目标一直是尽力与Cocos2d-x的API保持一致，而Cocos2d-x是为C++开发者设计的，与此同时，Cocos2d家族的起源Cocos2d-iPhone也在引擎中留下了非常多objective-C风格的API设计。很显然，正是由于这些API被直接移植到h5引擎中，JavaScript开发者才会觉得引擎非常复杂难用。

所以引擎3.0版本的主要目标就是提供给开发者一套全新的JavaScript风格API，开发团队决定冒着很大的风险推动这次重构。

回到属性风格API，cc.Node以及所有继承自cc.Node的类都使用属性风格重构。以往的大多数getXXX()和setXXX(value)都被直接属性存取取代了。同时也有也有少数其他适合属性风格的类使用这种方式重构，它们都可以在文末的列表中找到。

4. 关于Closure Compiler

由于attr函数使用键值对来配置节点，当我们使用Closure Compiler的高级模式来混淆时，这可能会引起一些意想不到的错误。

简单来说，键值对中的键实质上是String类型，混淆过程中它并不会被压缩，而与之相对应的属性名却会被压缩，这导致了两者命名的不匹配。所幸，在引擎中我们保障了常用的属性不会被压缩，至于其他的属性和用户自定义属性，可以使用Closure Compiler的expose声明来避免出现问题。需要注意的是这个问题只有在开发者尝试使用attr函数来配置属性的时候才会出现，如果没有使用attr函数就不需要做任何额外的处理。

5. 通过继承来重载属性

另一个重要的问题是在继承过程中，如何重载父类中的属性。好消息是我们已经将这一机制在Cocos2d-JS的cc.Class中实现了。只要你重载了父类中的getter/setter函数，那么不需要重新定义，新的getter/setter会自动被绑定到属性上。下面是一个重载Sprite类中的x属性的例子：

mySprite.x = x;会调用MySprite类的setPositionX函数而不是Sprite类的，getter函数也是同理。用户代码中唯一需要保证的是重载的getter/setter函数名必须和父类中定义的属性的getter/setter函数同名。否则你将需要通过cc.defineGetterSetter重新定义属性。

6. 属性列表

cc.Node

cc.Texture2D

cc.Sprite

Extend from cc.NodeRGBA

flippedX

isFlippedX,setFlippedX

flippedY

isFlippedY,setFlippedY

offsetX

_getOffsetX

offsetY

_getOffsetY

atlasIndex

texture

cc.Texture2D

getTexture,setTexture

textureRectRotated

isTextureRectRotated

textureAtlas

cc.TextureAtlas

batchNode

cc.SpriteBatchNode

getBatchNode,setBatchNode

quad

cc.V3F_C4B_T2F_Quad

getQuad

cc.LabelTTF Extend from cc.Sprite string String getString,setString textAlign getHorizontalAlignment,setHorizontalAlignment verticalAlign getVerticalAlignment,setVerticalAlignment fontSize getFontSize,setFontSize fontName getFontName,setFontName font _getFont,_setFont boundingWidth _getBoundingWidth,_setBoundingWidth boundingHeight _getBoundingHeight,_setBoundingHeight fillStyle _getFillStyle,setFontFillColor strokeStyle _getStrokeStyle,_setStrokeStyle lineWidth _getLineWidth,_setLineWidth shadowOffsetX _getShadowOffsetX,_setShadowOffsetX shadowOffsetY _getShadowOffsetY,_setShadowOffsetY shadowOpacity _getShadowOpacity,_setShadowOpacity shadowBlur _getShadowBlur,_setShadowBlur YES cc.Node cc.TextureAtlasImage capacity getCapacity totalQuads getTotalQuads quads getQuads,setQuads cc.AtlasNode quadsToDraw cc.LayerRGBA Extend from cc.Layer cc.LayerGradient Extend from cc.LayerColor startColor getStartColor,setStartColor endColor getEndColor,setEndColor startOpacity getStartOpacity,setStartOpacity endOpacity getEndOpacity,setEndOpacity vector getVector,setVector compresseInterpolation cc.ClippingNode Extend from cc.Node alphaThreshold inverted stencil getStencil,setStencil cc.SpriteBatchNode descendants getDescendants Extend from cc.Sprite cc.LabelAtlas Extend from cc.AtlasNode cc.LabelBMFont Extend from cc.SpriteBatchNode enum _getAlignment,setAlignment cc.Menu Extend from cc.LayerRGBA enabled cc.MenuItem isEnabled,setEnabled cc.MenuItemLabel Extend from cc.MenuItem label getLabel,setLabel disabledColor getDisabledColor,setDisabledColor cc.MenuItemFont Extend from cc.MenuItemLabel cc.MenuItemSprite normalImage cc.Sprite getNormalImage,setNormalImage selectedImage getSelectedImage,setSelectedImage disabledImage getDisabledImage,setDisabledImage cc.NodeGrid target writeonly setTarget @L_@R_502_449@_24@cc.ParticleBatchNode cc.ParticleSystem active isActive shapeType particleCount duration sourcePos cc.Point getSourcePosition,setSourcePosition posVar getPosVar,setPosVar life lifeVar angle angleVar startSize startSizeVar endSize endSizeVar startSpin startSpinVar endSpin endSpinVar gravity getGravity,setGravity speed getSpeed,setSpeed speedVar getSpeedVar,setSpeedVar tangentialAccel tangentialAccelVar getTangentialAccel,setTangentialAccel getTangentialAccelVar,setTangentialAccelVar rotationIsDir getRotationIsDir,setRotationIsDir startRadius getStartRadius,setStartRadius startRadiusVar getStartRadiusVar,setStartRadiusVar endRadius getEndRadius,setEndRadius endRadiusVar getEndRadiusVar,setEndRadiusVar rotatePerS getRotatePerSecond,setRotatePerSecond rotatePerSVar getRotatePerSecondVar,setRotatePerSecondVar startColorVar getStartColorVar,setStartColorVar endColorVar getEndColorVar,setEndColorVar emissionRate emitterMode positionType totalParticles getTotalParticles,setTotalParticles autoRemoveOnFinish cc.ProgressTimer midPoint getMidpoint,setMidpoint barChangeRate getBarChangeRate,setBarChangeRate type getType,setType percentage getPercentage,setPercentage sprite getSprite,setSprite reverseDir isReverseDirection,setReverseDirection cc.RenderTexture clearFlags clearDepthVal clearStencilVal clearColorVal getClearColor,setClearColor autoDraw cc.TMXLayer tiles tileset cc.TMXTilesetInfo layerOrientation properties layerName layerWidth _getLayerWidth,_setLayerWidth layerHeight _getLayerHeight,_setLayerHeight tileWidth _getTileWidth,_setTileWidth tileHeight _getTileHeight,_setTileHeight cc.TMXTiledMap mapOrientation objectGroups mapWidth _getMapWidth,_setMapWidth mapHeight _getMapHeight,_setMapHeight ccui.Widget Extend from ccui.Node xPercent _getXPercent,_setXPercent yPercent _getYPercent,_setYPercent widthPercent _getWidthPercent,_setWidthPercent heightPercent _getHeightPercent,_setHeightPercent widgetParent ccui.Widget getWidgetParent focused isFocused,setFocused touchEnabled isTouchEnabled,setTouchEnabled updateEnabled isUpdateEnabled,setUpdateEnabled bright isBright,setBright getName,setName actionTag getActionTag,setActionTag ccui.Layout Extend from ccui.Widget clippingEnabled isClippingEnabled,setClippingEnabled ccui.Button titleText getTitleText,setTitleText titleFont _getTitleFont,_setTitleFont titleFontSize getTitleFontSize,setTitleFontSize titleFontName getTitleFontName,setTitleFontName titleFontColor pressedActionEnabled ccui.CheckBox selected getSelectedState,setSelectedState ccui.LoadingBar percent getPercent,setPercent ccui.Slider ccui.Text getStringValue,setText stringLength getStringLength getTextHorizontalAlignment,setTextHorizontalAlignment getTextVerticalAlignment,setTextVerticalAlignment touchScaleEnabled ccui.TextAtlas ccui.TextBMFont ccui.TextField maxLengthEnabled isMaxLengthEnabled,setMaxLengthEnabled maxLength getMaxLength,setMaxLength passwordEnabled isPasswordEnabled,setPasswordEnabled ccui.ScrollView Extend from ccui.Layout innerWidth _getInnerWidth,_setInnerWidth innerHeight _getInnerHeight,_setInnerHeight bounceEnabled inertiaScrollEnabled ccs.Armature Extend from ccs.NodeRGBA parentBone ccs.Bone getParentBone,setParentBone animation ccs.ArmatureAnimation armatureData ccs.ArmatureData version body getBody,setBody colliderFilter ccs.ColliderFilter setColliderFilter ccs.Bone boneData ccs.BoneData getBoneData,setBoneData armature ccs.Armature getArmature,setArmature childArmature getChildArmature,setChildArmature childrenBone getChildrenBone tween ccs.Tween getTween tweenData ccs.FrameData getTweenData transformDirty getColliderFilter,setColliderFilter displayManager ccs.DisplayManager ignoreMovementBoneData blendDirty ccs.Skin Extend from ccs.Sprite skinData getSkinData,setSkinData bone displayName getDisplayName cc.EditBox Extend from cc.ControlButton _setFont setFontName setFontSize getText,sans-serif"> cc.Control state getState isSelected,setSelected highlighted isHighlighted,setHighlighted cc.ControlButton Extend from cc.Control adjustBackgroundImage zoomOnTouchDown preferredSize cc.Size getPreferredSize,setPreferredSize labelAnchor getLabelAnchorPoint,setLabelAnchorPoint cc.ControlColourPicker background getBackground cc.ControlHuePicker hue getHue,setHue huePercent getHuePercentage,setHuePercentage slider getSlider startPos getStartPos cc.ControlPotentiometer value getValue,setValue minValue getMinimumValue,setMinimumValue maxValue getMaximumValue,setMaximumValue progressTimer cc.ProgressTimer getProgressTimer,setProgressTimer thumbSprite getThumbSprite,setThumbSprite prevLocation getPrevIoUsLocation,setPrevIoUsLocation cc.ControlSaturationBrightnessPicker saturation getSaturation brightness getBrightness overlay getOverlay shadow getShadow cc.ControlSlider minAllowedValue getMinimumAllowedValue,setMinimumAllowedValue maxAllowedValue getMaximumAllowedValue,setMaximumAllowedValue getThumbSprite progressSprite getProgressSprite backgroundSprite getBackgroundSprite cc.ControlStepper wraps getWraps,setWraps stepValue getStepValue,setStepValue continuous isContinuous minusSprite getMinusSprite,setMinusSprite plusSprite getPlusSprite,setPlusSprite minusLabel cc.LabelTTF getMinusLabel,setMinusLabel plusSLabel cc.Scale9Sprite capInsets cc.Rect getCapInsets,setCapInsets insetLeft getInsetLeft,setInsetLeft insetTop getInsetTop,setInsetTop insetRight getInsetRight,setInsetRight insetBottom getInsetBottom,setInsetBottom cc.TableViewCell Extend from cc.Node objectId getObjectID,setObjectID YES 转载 请注明： http://www.cocos2dx.net/post/235 上一篇：Something you have to know in Co下一篇：【cocos2d-js官方文档】十八、Coco 猜你在找的Cocos2d-x相关文章 创建自定义的Cocos2d-x场景 操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE... 作者：前端之家 时间：2021-01-27 给vs2010安装上cocos2d-x的模版 开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，... 作者：前端之家 时间：2021-01-27 Python创建Cocos2d-x 2.2方法 把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-... 作者：前端之家 时间：2021-01-27 cocos2dx 物理碰撞 https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics... 作者：前端之家 时间：2020-08-06 cocos2d-js 自定义事件监听派发 转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的... 作者：前端之家 时间：2020-08-06 cocos常用 实用 公共函数 lua代码 公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加... 作者：前端之家 时间：2020-08-06 cocos creator box2d title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g... 作者：前端之家 时间：2020-08-06 （转）让quick-cocos2d-x支持加密的plist文件 前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现... 作者：前端之家 时间：2020-08-06 （转）quick-cocos2d-x图片资源加密(续) 摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加... 作者：前端之家 时间：2020-08-06 Cocos Creator 动态改变sprite图片 首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url... 作者：前端之家 时间：2020-08-06 编程分类 iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova 最新文章 • 创建自定义的Cocos2d-x场景 • 给vs2010安装上cocos2d-x的 • Python创建Cocos2d-x 2.2方 • cocos2dx 物理碰撞 • cocos2d-js 自定义事件监听 • cocos2dx 分帧加载 • cocos常用 实用 公共函数 • cocos creator box2d • （转）让quick-cocos2d-x支 • （转）quick-cocos2d-x图片 热门标签 更多 ► 调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签