【COCOS CREATOR 系列教程之三】PREFAB讲解&CC项目如何多开与分享

简介:

还有几天就要过年了,今天Himi就要坐车回老家了,这里提前祝福各位新年快乐、家庭和睦、万事如意。

进入主题,今天讲解下的小伙伴比较在意的几点问题:(当前使用的版本 0.7.1)

         1. 关于Prefab的使用与概述

         2. Cocos Creator 如何同时打开多个项目

         3. 如何把自己的Cocos Creator的项目分享给别人

  一.  关于Prefab的使用与讲解(CC版Prefab的方式说明)

Prefab:大家习惯喊它“预制体”,其实通俗的讲大家可以理解成是个“被打包的集合”,Prefab可以是由一个或多个节点(Node)、组件(Sprite、Label、Js脚本等)组合,当然其中也会包括组件之间的关系等一同保存。

       a)  什么时候用Prefab?(Himi就说下从接触U3d到现在对Prefab的理解吧)

       当你想制作一个有通用性强、或想重复使用的且个体之间存异较少时…你都应该第一时间想到Prefab:

       例1:背包中每个物品,如下图:

QQ20160205-0

像上图中可以明显看到,每个物品都包括:一个底图、一个物品icon、一个label数量、一个文本name,不同的是每个元素内容的不同而已。因此可以我们可以设计一个Prefab 结构 如下:

   KnapItem(Node)

            itemBG      (Sprite)

            itemIcon   (Sprite)

            itemCount(Label)

            itemName (Label)

例2: 排行榜每一条目(基本都是相同的,可能每一条底图有区分)

QQ20160205-1

上图中我们可以将每个条目设计Prefab 其结构如下:

   RankList(Node)

            rankBG(Sprite)

            rankOderNo(Label)

            rankIcon (Sprite)

            rankNick(Label)

            rankEquIcon1(Sprite)

            rankEquIcon2(Sprite)

            rankEquIcon3(Sprite)

创建好Prefab后,利用脚本for循环实例化Prefab,并对其进行设置各自应该显示的内容、图片等即可。

     b) 如何创建Prefab:

      那么下面我们来通过如下图 ( 点击图片查看动态Gif效果 )   来演示创建Prefab的过程:

Prefab

其实创建Prefab很简单,只要你在层级管理器视图创建的任意节点->拖动到->资源管理器视图即可完成创建。

    c) 如何在脚本中进行实例使用:



1

2

3

4

5

6

7

8

t_prefab:{

    default:null,

    type:cc.Prefab

},

 

var tPrefab = cc.instantiate(this.t_prefab);

tPrefab.parent = this.node;

tPrefab.setPosition(-210,100);



    d)已创建好的Prefab的修改操作

          当前版本无法支持选中做好的Prefab进行直接修改操作。所以我们步骤进行:

  1. 将制作好的Prefab拖到层级管理器

  2. 选中进行修改Prefab,然后查看属性检查器,可看到如下图:

QQ20160205-0@2x

         可以看到有个“prefab”标签,其中按钮的作用如下:

         “回退”:当你当前Prefab如果有任意一处与原型Prefab不同时,可点击进行还原。

         “保存”:当你当前Prefab如果有任意一处与原型Prefab不同时,可点击进行保存并修改原型Prefab

       【注意】修改Prefab(原型Prefab有改动)那么所有的Prefab示例都会改变!


二.  如何打开多个不同的Cocos Creator项目

     Windows: 双击图标即可

     Mac:打开终端,使用 open -n PATH,  (PATH是你CC的路径)如下:

     open -n /Applications/CocosCreator.app/

QQ20160129-0@2x

QQ20160129-0

三.  如何将自己的Cocos Creator 整个项目分享给别人

        1. 当前的版本由于还没有与cc的.fire文件关联,所以如果想把项目分享给别人,只需要将项目根目录下,除“temp”与“library” ,剩余所有文件发给别人即可。

QQ20160205-2

    2. 对方将所有文件替换一个新创建的空项目即可

那么本篇就先到这里,下一篇Himi将利用当前的版本制作一个PageView。








本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/1741213,如需转载请自行联系原作者
目录
相关文章
|
5月前
|
JavaScript Ubuntu 应用服务中间件
nginx扩展 OpenResty 实现防cc攻击教程
使用OpenResty实现CC攻击防护,包括两个主要步骤:限制请求速度和JS验证。首先,安装依赖(RHEL/CentOS需安装readline-devel, pcre-devel, openssl-devel,Ubuntu需安装libreadline-dev等)。然后,安装Luajit和OpenResty。在Nginx配置中,创建`lua`共享字典并设置`content_by_lua_file`调用lua脚本。lua脚本检查请求频率,超过限制则返回503,否则增加计数。同时,通过JS验证,生成随机码并重定向用户,用户需携带正确验证码请求才能访问。
136 0
Adobe XD CC 55.2.12.2 是一款非常专业的矢量图形规划软件Adobe XD 2023版本软件下载安装教程(内含所有版本)
Adobe XD CC 55.2.12.2 是一款非常专业的矢量图形规划软件,全新的桌面端UX原型工具,这是新一代网页与移动应用的UX设计工具。xd能够帮助设计者快速有效的设计图形、建立手机APP以及网站原型等等设计制作,支持设备的尺寸多样。集原型、设计和交互等功能于一体,从网站和移动应用程序到语音交互都可轻松实现,Adobe XD CC带来了响应调整大小、自动动画、语音原型、插件和应用程序集成等新功能,
|
Android开发
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
269 0
cocos cc.resource.loadDir在网页端正常安卓端报错的解决
Adobe Photoshop CC 2019下载中文永久安装和破解教程
Adobe Photoshop CC 2019下载中文永久安装和破解教程
50040 0
Animate CC 2019免费下载丨Adobe Animate CC 2019下载中文完整版永久安装教程
Adobe 提供了一整套可互相配合使用的动画应用程序,助您实现所有创意。使用 Animate CC 创建适用于游戏、应用程序和 Web 的交互式矢量动画。利用 Character Animator CC 将人物实时制成动画。
8444 0
|
人工智能
Adobe CC 2018全系列软件下载AdobeCC2018注册机破解教程
你好,很高兴你能看到我这篇教程经验,我叫尹训标,希望本教程能给你带来帮助,也希望能在你的学习上工作上对你有所帮助,这篇教程主要是讲我们如何正确安装Adobe系列所有的软件,以及永久破解的教程,还请大家一定要认真仔细阅读观看。
2407 0
Photoshop CC 2018 软件安装包+破解教程
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34173549/article/details/81512721 Photoshop CC 2018功能特点 1.
5540 0
Adobe Photoshop CC 2018安装教程最新PS2018软件更新
Adobe Creative Cloud 所有软件于2017.10.18 更新,Adobe Creative Cloud 2018 震撼上市!Adobe系列软件全部更新。
1591 0