Cocos2d-JS 创建node节点示例

本文详细介绍了Cocos2d-x中精灵Sprite、文字LabelTTF、动画Animation、批量SpriteBatchNode、精灵SpriteFrame、粒子效果ParticleSystem、物理PhysicsSprite、大纹理TextureAtlas的多种创建方式,包括根据图片资源路径、plist文件、精灵帧、纹理、自定义对象等进行创建。每种创建方式都提供了具体的参数说明和示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、精灵Sprite 一共4种创建方式

(1) 根据图片资源路径创建

1
2
3
4
//参数1:图片资源路径
var sprite1 = cc.Sprite.create("res/zifeiyu.png");
//参数1:图片资源路径,参数2:显示区域
var sprite2 = cc.Sprite.create("res/zifeiyu.png",cc.rect(0,0,480,320));

(2) 根据plist文件中的frame name创建. 注意:必须要在前头加#符号作为区分

1
2
//参数1:帧名字 frame name
var sprite = cc.Sprite.create('#zifeiyu.png');

(3) 根据sprite frame创建

1
2
3
var spriteFrame = cc.spriteFrameCache.getSpriteFrame("zifeiyu.png");
//参数1:cc.SpriteFrame对象
var sprite = cc.Sprite.create(spriteFrame);

(4) 根据纹理texture创建

1
2
3
4
5
var texture = cc.textureCache.addImage("zifeiyu.png");
//参数1:纹理
var sprite1 = cc.Sprite.create(texture);
//参数1:纹理,参数2:显示区域
var sprite2 = cc.Sprite.create(texture, cc.rect(0,0,480,320));

2、文字LabelTTF 一共2种创建方式

(1) 根据字体、大小等多参数创建

1
2
//参数1:显示字符串,参数2:字体,参数3:字号,参数4:宽高,参数5:定位
var myLabel = cc.LabelTTF.create('label text''Times New Roman', 32, cc.size(320,32), cc.TEXT_ALIGNMENT_LEFT);

(2) 根据自定义对象cc.FontDefinition创建

1
2
3
4
5
var fontDef = new cc.FontDefinition();
fontDef.fontName = "Arial";
fontDef.fontSize = "32";
//参数1:显示字符串,参数2:自定义对象cc.FontDefinition
var myLabel = cc.LabelTTF.create('label text', fontDef);

3、动画Animation一共3种创建方式

(1) 空创建

1
2
//无参数
var animation1 = cc.Animation.create();

(2) 根据精灵帧(sprite frames)创建

1
2
3
4
5
6
7
8
9
var spriteFrameArr = [];
var spriteFrame = cache.getSpriteFrame("ipastimes.png");
spriteFrameArr.push(spriteFrame);
//参数1:精灵帧数组
var animation1 = cc.Animation.create(spriteFrameArr);
//参数1:精灵帧数组,参数2:延续时间,单位为秒
var animation2 = cc.Animation.create(spriteFrameArr, 0.2);
//参数1:精灵帧数组,参数2:延续时间,单位为秒,参数3:循环次数
var animation3 = cc.Animation.create(spriteFrameArr, 0.2,2);

(3) 根据动作帧(animation frames)创建

1
2
3
4
5
6
7
8
9
10
var animationFrameArr = [];
var animationFrame = new cc.AnimationFrame();
aFrame1.initWithSpriteFrame(spriteFrame1,0.5);
animationFrameArr.push(animationFrame);
//参数1:动画帧数组
var animation1 = cc.Animation.create(animationFrameArr);
//参数1:动画帧数组,参数2:延续时间,单位为秒
var animation2 = cc.Animation.create(animationFrameArr, 0.2);
//参数1:动画帧数组,参数2:延续时间,单位为秒,参数3:循环次数
var animation3 = cc.Animation.create(animationFrameArr, 0.2,2);

4、批量SpriteBatchNode一共2种创建方式

(1)根据图片资源路径

1
2
//参数1:图片路径,参数2:容量
var spriteBatchNode = cc.SpriteBatchNode.create("res/animations/ipastimes.png", 50);

(2)根据纹理

1
2
3
var texture = cc.textureCache.addImage("res/animations/ipastimes.png");
//参数1:纹理,参数2:容量
var spriteBatchNode = cc.SpriteBatchNode.create(texture,50);

5、精灵SpriteFrame一共2种创建方式

(1)根据图片资源路径

1
2
3
4
//参数1:图片路径,参数2:区域
var frame1 = cc.SpriteFrame.create("res/ipastimes.png",cc.rect(0,0,90,128));
//参数1:图片路径,参数2:区域,参数3:是否旋转,参数4:偏移量,参数5:原区域
var frame2 = cc.SpriteFrame.create("res/ipastimes.png",cc.rect(0,0,90,128),false,0,cc.size(90,128));

(2)根据纹理

1
2
3
4
5
var texture = cc.textureCache.addImage("res/ipastimes.png");
//参数1:图片路径,参数2:区域
var frame1 = cc.SpriteFrame.create(texture, cc.rect(0,0,90,128));
//参数1:图片路径,参数2:区域,参数3:是否旋转,参数4:偏移量,参数5:原区域
var frame2 = cc.SpriteFrame.create(texture, cc.rect(0,0,90,128),false,0,cc.size(90,128));

6、粒子效果ParticleSystem一共2种创建方式

(1)根据图片资源路径

1
2
//参数1:粒子数量
var particle = cc.ParticleSystem.create(50);

(2)根据纹理

1
2
//参数1:粒子工具particleDesigner导出的文件
var particle = cc.ParticleSystem.create("res/particle.plist");

7、物理PhysicsSprite 一共4种创建方式

(1) 根据图片资源路径创建

1
2
3
4
//参数1:图片资源路径
var physicsSprite1 = cc.PhysicsSprite.create("res/ipastimes.png");
//参数1:图片资源路径,参数2:显示区域
var physicsSprite2 = cc.PhysicsSprite.create("res/ipastimes.png",cc.rect(0,0,480,320));

(2) 根据plist文件中的frame name创建. 注意:必须要在前头加#符号作为区分

1
2
//参数1:帧名字 frame name
var physicsSprite = cc.PhysicsSprite.create('#ipastimes.png');

(3) 根据sprite frame创建

1
2
3
var spriteFrame = cc.spriteFrameCache.getSpriteFrame("ipastimes.png");
//参数1:cc.SpriteFrame对象
var physicsSprite = cc.PhysicsSprite.create(spriteFrame);

(4) 根据纹理texture创建

1
2
3
4
5
var texture = cc.textureCache.addImage("ipastimes.png");
//参数1:纹理
var physicsSprite1 = cc.PhysicsSprite.create(texture);
//参数1:纹理,参数2:显示区域
var physicsSprite2 = cc.PhysicsSprite.create(texture, cc.rect(0,0,480,320));

8、大纹理TextureAtlas一共2种创建方式

(1)根据图片资源路径

1
2
//参数1:图片路径,参数2:容量
var textureAtlas = cc.TextureAtlas.create("res/animations/ipastimes.png", 50);

(2)根据纹理

1
2
3
var texture = cc.textureCache.addImage("res/animations/ipastimes.png");
//参数1:纹理,参数2:容量
var textureAtlas = cc.TextureAtlas.create(texture,50);



源引:http://cn.cocos2d-x.org/article/index

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值