【Cocos2d-html5游戏引擎学习笔记(5)】Sprite精灵渲染

来源:互联网 发布:你画我猜源码 编辑:程序博客网 时间:2024/04/29 18:06

精灵类是任何一款游戏引擎的核心,你所见到的图片画面基本都是由它展现出来的,比如我们的游戏背景,主角等等,所以学好Sprite精灵类对游戏的画面体验有着很重要的影响。我们就先介绍他的创建方式,一般来说有以下5种:

第一种:

cc.Sprite.create(fileName)通过一张图片生成精灵对象

参数:图片的名称。

var sprite1 = cc.Sprite.create("test.png"); //这里图片名称最好写在resource.js里面sprite1.setPosition(cc.p(10,10));this.addChild(sprite1);


第二种:

cc.Sprite.create(fileName, rect) 通过一张图片进行给定矩形裁剪生成精灵对象

参数1:图片名称

参数2:矩形的区域

var sprite2 = cc.Sprite.create("test.png", cc.rect(0, 0, 50, 50));sprite2.setPosition(cc.p(10,10));this.addChild(sprite2);


第三种:

cc.Sprite.createWithSpriteFrame(spriteFrame)通过缓存中的帧生成精灵对象

参数:帧的名称

var spriteFrameCache = cc.SpriteFrameCache.getInstance(); //使用精灵帧缓存,方便后面多次使用
var frameCache = spriteFrameCache.addSpriteFrames(s_plist, s_png); //第一个参数plist文件,第二个参数plist对应的png图片var sprite3 = cc.Sprite.createWithSpriteFrame(spriteFrameCache.getSpriteFrame("test.png"));//plist里面对于的图片名称sprite1.setPosition(cc.p(10,10));this.addChild(sprite3);


第四种:

cc.Sprite.createWithSpriteFrameName(spriteFrameName)另外一种通过缓存中的帧生成精灵对象

参数:帧的名称

var sprite4 = cc.Sprite.createWithSpriteFrameName("test1.png");sprite4.setPosition(cc.p(10,10));this.addChild(sprite4);


第五种:

cc.Sprite.createWithTexture(texture, rect) 通过Texture2D,并进行裁剪生成精灵对象

参数1:Texture图片

参数2:矩形的区域

var batch = cc.SpriteBatchNode.create(s_mybach); this.addChild(batch);var sprite5 = cc.Sprite.createWithTexture(batch.getTexture(), cc.rect(0, 121, 85, 121)); //需要显示的区域var sprite6 = cc.Sprite.createWithTexture(batch.getTexture(), cc.rect(85, 121, 85, 121));sprite5.setPosition(cc.p(10,10));this.addChild(sprite5);


精灵类也有很多自己的属性,比如设置旋转角度,设置缩放,设置透明度等等,这些可以在官方的api中查看到,我就列举几个我比较常用的方法。

setRotation(rotation)设置旋转角度

setScale(scale)设置缩放值

setVisible(visible)设置是否可见

setOpacity(var)设置透明度


还有一些父类在精灵中常用的

setTag(var)设置标记

setAnchorPoint(point)设置锚点

getBoundingBox() 获取rect大小


想自己新建一个属于自己的Sprite也很简单

var MySprite = cc.Sprite.extend({  //继承cc.Sprite    ctor: function (fileName) {        this._super();        this.initWithFile(fileName); //初始化图片    },        xxx:function(){ //自己定义自己想要的方法        }});


以上就是精灵类的介绍了,吃饭去咯~


原创粉丝点击