一:Sprite组件教学分为两部分:组件基础讲解、动态更换Sprite
中的背景图像。
Sprite(精灵)组件:
单色组件:背景色为纯色的Sprite组件,主要用于纯色背景填充
非单色组件:主要用于各种画面填充
单色组件讲解:
按照如图所示添加单色Sprite组件
非单色组件:
按照如图所示,将图放置其中即可
其中Node中各个参数的含义如下(Node节点通用):
position: 相对于父节点的位置信息,返回的是世界坐标
rotation: 旋转角度
scale: 放大倍数
size: 大小
color: 颜色
opacity: 透明度
skew: 倾斜的角度
group: 分组,目前已知用法是用来区分碰撞
Sprite中的参数着重说几个:
Sprite Frame:这个表示填充的背景图
其余参数相对来讲直接在官网中查看即可,
二:动态加载Sprite Frame:
前提条件:保证所有的资源都在resources文件夹或者其子文件夹之下
1.动态加载本地文件
a:先查看项目文件结构,确保所有的资源都在resources文件下
b:新建一个脚本,名为loadScene,并将其挂载在Canvas节点下
c:打开loadScene.js文件,开始编写脚本文件逻辑
对于上述脚本文件中强调几点:
cc.loader.loadRes("资源路径", function (err, prefab) {
//执行逻辑....
});
其中资源路径默认是直接从resources下寻找路径,举例说明如下图:
具体的加载方法的资源路径为:prefabs/Background
cocos中默认直接从resources/下进行寻找,因此方法如下:
cc.loader.loadRes("prefabs/Background", function (err, prefab) {
//执行逻辑....
});
注:所有动态加载的资源中,加载图片给并得到图片对应的SpriteFrame会多一个参数,具体 参考官方文档
给出举例的完整脚本,感兴趣的可以深入研究下,注释已经说明各个方法用途:
2.动态加载远程文件
a.远程 url 带图片后缀名
var remoteUrl = "图片链接";
cc.loader.load(remoteUrl, function (err, texture) {
//执行逻辑
});
b.远程 url 不带图片后缀名,此时必须指定远程图片文件的类型
var remoteUrl = "图片链接";
cc.loader.load({url: remoteUrl, type: 'png'}, function () {
//执行逻辑
});
注:由于后台还没开始搭建服务器,因此如果用网络上的链接加载图片资源等会出现跨域,限制访问等情况,这个地方后续在搭建服务器部分再结合此章节着重说明,具体的解决方案是后台再请求中修改请求头。
欢迎添加微信交流:yuanzhangdexiaoyouxi