版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/themagickeyjianan/article/details/88324704
背景:毫无疑问,Sprite精灵组件在游戏开发中是使用最多的元素。根据cocos creator的Sprite组件使用,简单写下我的理解。
1)如何显示一张图片
1.添加空节点
2.挂载Sprite组件
3.指定Sprite组件要显示的图片,即spriteFrame
2)理解Sprite组件的选项
1.Type
Simple:
简单 这个最常用,大部分显示都勾选这个
Sliced:九宫格:
做背景时,为了节约资源,当一张小的图片当做背景图,则需要制作九宫格图片
Tiled
Filled
Mesh
2.SizeMode
CUSTOM: 用户自定义尺寸,这个非常常用,比如棋牌中,一个桌子4个人显示微信头像,远程资源加载的微信头像并不知道多大,那么就需要自定义尺寸。 自定义完毕后,那么一张大图也会显示自己指定的大小;
当自己手动调整图片大小时,就会由TRIMMED或者RAW自动变为这个选项。
TRIMMED
原始图片裁减掉透明度后的图片,trim嘛,意思就是去除。 所以中间显示的部分能够达到原始尺寸。 比如原始尺寸是150*150, 可显示区域是130*130,那么使用这个。 将会将中间的130*130强行拉到150*150;
当将一张图片拖入编辑器,默认就是这个选项。
RAW
原生,因此就是显示原始大小,考虑透明像素。因此和TRIMMED相比,看着显示区域会小一点。因为TRIMMED不显示透明部分,RAW显示;
RAW中node的宽高和在电脑中的宽高一致。
3.Trim(不勾选,勾选容易变形)
是否渲染原始图像周围的透明区域。
勾选则不渲染,那么将会填充至node节点大小,因此看起来好像图片放大了一样。甚至有点变形,因此觉得不勾选好点。
4)代码控制随机头像
cc.Class({
extends: cc.Component,
properties: {
spr_wxHeadImg: {
type: cc.Sprite,
default: null
},
wx_spriteFrame: {
type: cc.SpriteFrame,
default: []
}
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
var index = parseInt(Math.random() * this.wx_spriteFrame.length);
if (index >= this.wx_spriteFrame.length-1){
index = this.wx_spriteFrame.length - 1;
}
this.spr_wxHeadImg.spriteFrame = this.wx_spriteFrame[index];
},
// update (dt) {},
});
5)效果:
其实这个里面这张图片很大,但是依然填充满了
不勾选trim,因此考虑透明区域到node大小,因此感觉图标略小。
这张宽度很小,也填充满
编辑器中,bg在下,所以层级高一点。中间透明,因此不会看起来遮住了。
总结:综上,我觉得微信头像的话。
Type:Simple
SizeMode:CUSTOM,调整要显示的尺寸。
Trim:不勾选