游戏中显示一个图片,通常叫做sprite
创建好一个精灵(sprite)之后,拖动一张图片到sprite frame上
显示如下:
配置图片的size_mode(图片的大小模式):
a:custom:显示的大小就是节点的大小
从300改为500后图片被拉伸
b:trimmed:显示裁剪掉透明像素后的图片,大小为原始图片大小
c:raw:原始大小
回到图片原来的大小
trim:勾选后裁掉完全透明的行和列
Type就是图片的模式
a:simple 选择后把图片缩放到指定的大小
b:tiled 平铺,向地板砖一样,把图片铺到指定大小
c:sliced 九宫格模式 拉图片部分,在spriteFrame那一行点击编辑,进入九宫格模式
选择sliced后:指定区域拉伸
九宫格也能省资源,只需要一部分图片就好
d:filled 填充
圆形填充:
fill center代表:
fill start 0是指从X轴开始,0.25就从Y开始,逆时针填充
fill range就是显示范围0.25就是1/4,如上图
可以把这个做成进度条,倒计时之类的
如尝试慢慢显示这只鸟:
this.bird.fillRange = 0;
cc.tween(this.bird)
.to(2,{fillRange:1}).start();
var timeCallback = function (dt) {
cc.log("time: " + dt);
}
this.scheduleOnce(timeCallback, 2);
顺便学习一下scheduleOnce()的使用,刚好在加载完整张图片时候会调用到。
fill Type:Horizonal水平方向上慢慢fill
Vertical垂直方向上慢慢fill