【Cocos2d-html5游戏引擎学习笔记(5)】Sprite精灵渲染
2013-09-21 17:28
525 查看
精灵类是任何一款游戏引擎的核心,你所见到的图片画面基本都是由它展现出来的,比如我们的游戏背景,主角等等,所以学好Sprite精灵类对游戏的画面体验有着很重要的影响。我们就先介绍他的创建方式,一般来说有以下5种:
第一种:
cc.Sprite.create(fileName)通过一张图片生成精灵对象
参数:图片的名称。
第二种:
cc.Sprite.create(fileName,
rect) 通过一张图片进行给定矩形裁剪生成精灵对象
参数1:图片名称
参数2:矩形的区域
第三种:
cc.Sprite.createWithSpriteFrame(spriteFrame)通过缓存中的帧生成精灵对象
参数:帧的名称
第四种:
cc.Sprite.createWithSpriteFrameName(spriteFrameName)另外一种通过缓存中的帧生成精灵对象
参数:帧的名称
第五种:
cc.Sprite.createWithTexture(texture,
rect) 通过Texture2D,并进行裁剪生成精灵对象
参数1:Texture图片
参数2:矩形的区域
精灵类也有很多自己的属性,比如设置旋转角度,设置缩放,设置透明度等等,这些可以在官方的api中查看到,我就列举几个我比较常用的方法。
setRotation(rotation)设置旋转角度
setScale(scale)设置缩放值
setVisible(visible)设置是否可见
setOpacity(var)设置透明度
还有一些父类在精灵中常用的
setTag(var)设置标记
setAnchorPoint(point)设置锚点
getBoundingBox()获取rect大小
想自己新建一个属于自己的Sprite也很简单
以上就是精灵类的介绍了,吃饭去咯~
第一种:
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(){ //自己定义自己想要的方法 } });
以上就是精灵类的介绍了,吃饭去咯~
相关文章推荐
- 【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字
- 【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画
- 【Cocos2d-html5游戏引擎学习笔记(11)】运动中速度效果
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(9)】Action系统动作
- 【Cocos2d-html5游戏引擎学习笔记(1)】游戏引擎初探究和搭建开发环境
- 【Cocos2d-HTML5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(8)】音乐及音效
- 【Cocos2d-html5游戏引擎学习笔记(4)】菜单按钮
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(7)】CCLayer创建及场景跳转
- 【Cocos2d-html5游戏引擎学习笔记(2)】Hello Cocos2d-Html5
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器(1)
- 【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十七课:Cocos2D-X物理引擎之chipmunk
- 【Cocos2d-X开发学习笔记】第06期:渲染框架之精灵类(CCSprite)的使用
- 【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十五课:Cocos2D-X物理引擎之Box2D8-10
- cocos2d-x学习笔记(16)--spritesheet(精灵表单)
- 【Cocos2d-x游戏引擎开发笔记(2)】在屏幕上渲染文字