cocos creator基础-(六)cc.Sprite使用

1: 了解cc.Sprite的使用;
2: 了解cc.Sprite的大小模式;
3: 学会使用九宫格,使用九宫格节省美术资源;
4: 学会个性化的时间精度条的使用;
5: 代码里面来更换图片;

cc.Sprite

1: 游戏中显示一个图片，通常我们把这个叫做”精灵” sprite
2: cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame)
3: 显示一个图片的步骤:
(1) 创建一个节点;
(2) 添加一个组件;
(3) 要显示的图片(SpriteFrame)拖动到SpriteFrame;
(4) 配置图片的SIZE_MODE:
a: CUSTOM 大小和CCNode的大小一致;
b: RAW 原始的图片大小;
c: TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;
(5) trim: 是否裁剪掉图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明度,动画，不至于抖动;
4: 精灵更换spriteFame;
5: 快捷创建带精灵组件的节点;

图片模式

1: simple: 精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小;
2: Tiled: 平铺模式, 图片以平铺的模式，铺地板砖的模式，铺到目标大小上;
3: Slice: 九宫格模式，指定拉伸区域;
4: Filled: 设置填充的方式(圆，矩形)，可以使用比例来裁剪显示图片(只显示的比例);

九宫格的使用

1: 指定拉伸区域, 让图片在拉伸的时候某些区域不会改变;
比如圆角,聊天气泡等
2: 九宫格能省图片资源, (对话框);
3: 编辑九宫格,来制定缩放区域;
4: 体会对话框背景的九宫拉伸;

Filled模式

1: 配置Filled模式
2: 配置Filled模式, 设置为Radius参数;
3: 配置Radius的参数模式,
中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点
Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走
Fill Range: 填充总量(0, 1];
FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;
4: 个性化时间进度条案例;
5: 游戏中道具的时间进度显示都可以;

cc.Class({extends: cc.Component,properties: {// foo: {//    default: null,      // The default value will be used only when the component attaching//                           to a node for the first time//    url: cc.Texture2D,  // optional, default is typeof default//    serializable: true, // optional, default is true//    visible: true,      // optional, default is true//    displayName: 'Foo', // optional//    readonly: false,    // optional, default is false// },// ...
        sprite: {default: null,type: cc.Sprite,},action_time: 15,},// use this for initializationonLoad: function () {// 获取组件的实例，代码获取，编辑器绑定var node = this.node.getChildByName("time_bar");this.sp = node.getComponent(cc.Sprite);// end // this.now_time = 0;this.now_time = this.action_time;},// called every frame, uncomment this function to activate update callbackupdate: function (dt) {/*this.now_time += dt;var percent = this.now_time / this.action_time; // -->百分比if (percent >= 1)  {percent = 1;this.now_time = 0; // 重新开始}this.sp.fillRange = percent;*/this.now_time -= dt; // 顺时针转动- 逆时针+var percent = this.now_time / this.action_time; // -->百分比if (percent <= 0)  {this.now_time = this.action_time; // 重新开始
        }this.sp.fillRange = percent;},
});

转载于:https://www.cnblogs.com/orxx/p/10430227.html

cocos creator基础-(六)cc.Sprite使用相关推荐

cocos creator基础-(五)cc.Component使用
一.组件入口函数 1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点,以及节点关联的资源数据 2: start: 也就是第一次执行 update 之前触发 3: updat ...
cocos creator基础-(十三)cc.Loader使用
1: 掌握cc.loader加载本地资源; 2: 掌握cc.loader加载远程资源; 3: 掌握资源释放的机制与autorelease; 4: 掌握手动释放资源; cc.Loader 1:有三个默认 ...
Cocos Creator基础（六） cc.Component使用+Shedule定时器操作
cc.Component使用+Shedule定时器操作组件入口函数 cc.Component属性组件添加查找删除 Shedule定时器操作组件入口函数 1: onLoad: 组件加载的时候调用, ...
cocos creator 基础教程(一) 组件的基本使用
最近有人问我比较多入门的问题,关于cocos creator,今天就来写一篇基础的教程,不似教科书类型的教法.如果不懂的,欢迎来群咨询. 有刚入门的朋友,一直苦于不知道该怎么进行组件间的交互,或者一些 ...
cocos creator基础一文通(十一)--预制体 mask layout scrollView
预制体一.创建预制体 1.创建预制体将配置好的节点从节点树拖到资源管理器就可以创建预制体创建好的预制体直接拖拽至节点树就可以创建预制体实例 2.拿到预制体对象两种方法:<1>资源动 ...
Cocos Creator基础教程(8)—加载预制件
我们上篇讲了[场景切换] 并编写了LoadScene场景加组件,这次我们在场景里面创建独立的子界面或子窗口.在Cocos Creator中实现子界面的最好方案就是: 预制件. 1. 生成预制件 Coc ...
Cocos creator 基础学习---Color颜色
this.node.color = cc.color(255,255,100); this.node.opacity = 100; 也可以: this.node.color = cc.Color.GR ...
cocos creator基础-创建WX开放域遇到的问题
cocos 2.0.7 创建空白项目,做开放域测试失败 1.主域挂载WXSubContextView的节点,不能为空白节点,应该是Sprite组件,另外需要设置组件的大小和位置转载于:https:/ ...
cocos creator基础-碰撞检测系统
1: 掌握碰撞检测的基本步骤; 2: 掌握开启碰撞检测和响应碰撞; 3: 完成道具拾取案例,理解group与groupIndex; 1: creator有碰撞检测系统 +物理碰撞系统,这个是两个独立的 ...
cocos creator基础-基本控件知识
cc.Label 默认创建的label无法修改宽高属性原因是overflow默认为none,为none时自动计算大小,改为clamp或者shrink就可以了 Label字体如何加粗 richtext ...

cocos creator基础-(六)cc.Sprite使用

cocos creator基础-(六)cc.Sprite使用相关推荐

最新文章

热门文章