微信小游戏-CocosCreator教学系列--Sprite教学

一:Sprite组件教学分为两部分:组件基础讲解、动态更换Sprite

中的背景图像。

Sprite(精灵)组件:

单色组件:背景色为纯色的Sprite组件,主要用于纯色背景填充

非单色组件:主要用于各种画面填充

单色组件讲解:

按照如图所示添加单色Sprite组件

微信小游戏-CocosCreator教学系列--Sprite教学_第1张图片

微信小游戏-CocosCreator教学系列--Sprite教学_第2张图片

非单色组件:

按照如图所示,将图放置其中即可

微信小游戏-CocosCreator教学系列--Sprite教学_第3张图片

微信小游戏-CocosCreator教学系列--Sprite教学_第4张图片

其中Node中各个参数的含义如下(Node节点通用):

position: 相对于父节点的位置信息,返回的是世界坐标

rotation: 旋转角度

scale: 放大倍数

size: 大小

color: 颜色

opacity: 透明度

skew: 倾斜的角度

group: 分组,目前已知用法是用来区分碰撞

Sprite中的参数着重说几个:

Sprite Frame:这个表示填充的背景图

其余参数相对来讲直接在官网中查看即可,

二:动态加载Sprite Frame:

前提条件:保证所有的资源都在resources文件夹或者其子文件夹之下

1.动态加载本地文件

a:先查看项目文件结构,确保所有的资源都在resources文件下

微信小游戏-CocosCreator教学系列--Sprite教学_第5张图片

b:新建一个脚本,名为loadScene,并将其挂载在Canvas节点下

微信小游戏-CocosCreator教学系列--Sprite教学_第6张图片

c:打开loadScene.js文件,开始编写脚本文件逻辑

微信小游戏-CocosCreator教学系列--Sprite教学_第7张图片

对于上述脚本文件中强调几点:

cc.loader.loadRes("资源路径", function (err, prefab) {

//执行逻辑....

});

其中资源路径默认是直接从resources下寻找路径,举例说明如下图:

微信小游戏-CocosCreator教学系列--Sprite教学_第8张图片

具体的加载方法的资源路径为:prefabs/Background

cocos中默认直接从resources/下进行寻找,因此方法如下:

cc.loader.loadRes("prefabs/Background", function (err, prefab) {

//执行逻辑....

});

注:所有动态加载的资源中,加载图片给并得到图片对应的SpriteFrame会多一个参数,具体 参考官方文档

给出举例的完整脚本,感兴趣的可以深入研究下,注释已经说明各个方法用途:

微信小游戏-CocosCreator教学系列--Sprite教学_第9张图片

 

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

你可能感兴趣的:(Cocos,Creator,微信,微信小游戏,小游戏,Cocos,Cocos,Creator)