一：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