cocos2d-x js 中創建node的方法
阿新 • • 發佈：2017-09-12
大小 時間 ssp strong table 精靈sprite fin ima batchnode
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：紋理
varsprite1 = 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);
|
cocos2d-x js 中創建node的方法