cocos creator主程入门教程(一)—— 初识creator
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑。本系列文章以TypeScript为介绍语言。
我们在cocos creator新建一个Hello TypeScript项目,都会有一个assets/Scene/helloworld.fire文件。使用cocos creator开发游戏时,项目可以只有一个.fire文件。一般地,我会把这个文件夹改名为assets/scene,下面只有main.fire文件:assets/scene/main.fire。
双击main.fire文件,在层级管理器可以看到它的结构,
根节点是一个Canvas,点击Canvas节点,在右边的属性面板可以看到Canvas组件有Design Resolution属性,作为屏幕适配的尺寸。例如设置为1334x750,那么美术出资源时一屏界面的大小就是这个尺寸。不同的手机屏幕引擎自动做等比例缩放,具体缩放倍数,当勾选Fix Width表示界面的宽缩放到跟实际屏幕一样,当勾选Fix Height表示界面的高缩放到跟实际屏幕一样。另外一边相应等比例缩放,可能小于屏幕大小而出现黑边,也可能大于屏幕而被裁剪,这些可能都不是我们想要的,后面会说怎么解决。
cocos creator2.1.0版本默认Canvas下面有Main Camera子节点,其他子节点是模版示例,直接删除。一般我还会给Canvas添加两个子节点,一个sceneLayer作为场景根节点,一个popupLayer作为弹窗根节点。因为场景我们宁愿超框被裁剪,也不希望看到黑底,弹窗则希望能完整显示,但引擎本身是统一处理的。分开两个不同的根节点,在加载后根据屏幕大小单独调整场景根节点sceneLayer的缩放让他铺满屏幕。对于微信小游戏之类,单独调整下移弹窗根节点popupLayer,避免与微信小游戏的关闭按钮重合。
然后,就可以开始写入口脚本,把它挂到Canvas节点。cocos creator采用组件模式,每个节点都可以挂载不同的组件,包括自己开发的脚本组件。新建一个StartCtrl.ts,所有跟界面节点关联的脚本类都继承自cc.Component,由于creator是使用装饰器语法来检查属性的,所以要用到@property和@class装饰器,其中@property用于声明编辑器可以检查到的属性,我们可以声明两个属性,sceneLayer和popupLayer属性,用于关联界面的场景根节点和弹窗根节点,@class用于声明编辑器可以挂到节点的类。cc.Component定义了一系列生命周期方法,在节点不同生命周期会调用。下面是入口脚本的简单实现。
/**
* auth: 关健昌
* date: 2018-11-17
* desc: 游戏入口
* modify:
*/ const {ccclass, property} = cc._decorator; @ccclass
export default class StartCtrl extends cc.Component { @property(cc.Node)
popupLayer: cc.Node = null; @property(cc.Node)
sceneLayer: cc.Node = null; start () {
// TODO Add Start Code
}
}
在编辑器选择Canvas节点,在属性面板点击“添加组件”,选择用户脚本组件,选择StartCtrl,拖sceneLayer和popupLayer两个节点到属性面板对应属性,这样就关联好入口脚本。启动游戏后,Canvas的生命周期就会触发StartCtrl里对应的方法,StartCtrl里的sceneLayer和popupLayer属性已被赋值为Canvas对应的子节点。后面我们会继续讲解如何使用这两个属性对界面进行分层管理。
现在,我们先看看怎样制作界面。我们可以把每一个界面都做成一个prefab预制体。同样在assets目录下,会看到一个叫Texture的目录,先把它改成resources,因为cocos加载资源时对resources有特殊处理,后面会讲解。在这个目录下再建一个目录叫prefabs,assets/resources/prefabs专门用来存放界面的预制体。
制作预制体的方法很简单。先双击scene/main.fire打开,在Canvas节点右键新建空白节点,属性面板将新节点名字改为TestView,拖动该节点到资源管理器面板的assets/resources/prefabs目录。这样一个预制体TestView就生成了,这时可以在main.fire的Canvas节点中删除TestView这个子节点,我们已经不需要这个子节点。
在资源管理器目录找到assets/resources/prefabs目录,双击TestView.prefab打开这个预制体,可以看到里面是空的,可以先设置根节点的Size,这就是这个界面的设计大小。然后可以开始用cocos的ui组件、渲染组件布局界面,cocos的ui组件、渲染组件使用参看cocos官方文档。
然后,同样我们可以开始写这个界面的脚本TestViewCtrl.ts,控制界面逻辑和刷新。这个脚本还是继承cc.Component,定义对应的cc.Label等类型的属性,这样就可以把界面的元素关联到脚本,通过脚本来刷新。
/**
* auth: 关健昌
* date: 2018-11-17
* desc: 测试界面
* modify:
*/ const {ccclass, property} = cc._decorator; @ccclass
export default class TestViewCtrl extends cc.Component { @property(cc.Label)
label: cc.Label = null;// LIFE-CYCLE CALLBACKS: // onLoad () {} start () {
this.label.string = "hello";
} // update (dt) {}
}
打开回刚才那个预制体,选择根节点,在属性面板选择添加组件TestViewCtrl,并将对应ui组件拖到脚本组件的属性上进行关联,这样我们就可以通过TestViewCtrl控制这个界面了。
要显示这个界面,首先要加载prefab。cocos提供了cc.loader.loadRes接口,类型传cc.Prefab,加载成功后通过cc.instantiate接口把预制体实例出一个cc.Node,cocos的界面布局是基于组合模式的一棵树,cc.Node通过addChild把其他cc.Node添加到界面。所以,我们通过popupLayer.addChild把这个界面放到屏幕,这些代码可以写在入口脚本StartCtrl的start方法里。可以通过cc.Node.getComponent获取TestViewCtrl的实例来操作界面。不过,我一般是通过cc.Component的生命周期和消息来实现界面更新,降低耦合,后面会详细介绍这种方式。
/**
* auth: 关健昌
* date: 2018-11-17
* desc: 游戏入口
* modify:
*/ const {ccclass, property} = cc._decorator; @ccclass
export default class StartCtrl extends cc.Component { @property(cc.Node)
popupLayer: cc.Node = null; @property(cc.Node)
sceneLayer: cc.Node = null; start () {
cc.loader.loadRes("prefabs/TestView", cc.Prefab, (err, result) => {
if (err) {
return;
} let prefab = result as cc.Prefab;
let view = cc.instantiate(prefab);
// let ctrl = view.getComponent(TestViewCtrl);
this.popupLayer.addChild(view);
});
}
}
现在我们已经知道怎样建立游戏入口,怎样制作、加载、显示界面,下一章将讲解怎样对弹窗分层管理。
cocos creator主程入门教程(一)—— 初识creator的更多相关文章
- cocos creator主程入门教程(七)—— MVC架构
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇将介绍在游戏客户端常用的架构MVC架构.一个游戏的MVC如下划分: M:1)单例全局的数据中心Wo ...
- cocos creator主程入门教程(三)—— 资源管理
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 在初识篇,我介绍过怎样加载prefab.cocos提供了一系列的加载接口,包括cc.loader.loa ...
- cocos creator主程入门教程(二)—— 弹窗管理
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 我们已经知道怎样制作.加载.显示界面.但cocos没有提供一个弹窗管理模块,对于一个多人合作的项目,没有 ...
- cocos creator主程入门教程(五)—— 日志系统
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍日志系统的设计.一般我们开发一个demo,只会简单的用cocos提供的cc.log打印下日志, ...
- cocos creator主程入门教程(四)—— 网络通信
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 前面已经介绍怎样加载资源.管理弹窗.开发一个网络游戏,难免要处理网络通信.有几点问题需要注意: 1.服务 ...
- cocos creator主程入门教程(十一)—— 有限状态机和行为树
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...
- cocos creator主程入门教程(十)—— A*寻路
摘要: 五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍A*寻路算法.在RPG.SLG.模拟经营类游戏,有需要给角色寻路的需求,一般寻路我们采 ...
- cocos creator主程入门教程(九)—— 瓦片地图
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍瓦片地图,在开发模拟经营类游戏.SLG类游戏.RPG游戏,都会使用到瓦片地图.瓦片地图地面是通 ...
- cocos creator主程入门教程(八)—— 代码结构
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇简单介绍下代码结构,清晰的代码结构更有利于团队对项目的理解和维护. 1.前面我们介绍了一系列基础功 ...
随机推荐
- postgresql从timestamp(6)复制到timestamp(0),时间会变
主要涉及临界点(跨天) 例子(时间:2016-08-05 23:59:59.863) timestamp(6):2016-08-05 23:59:59.863 timestamp(0):2016-08 ...
- Java基础实训
- JavaScript递归函数解“汉诺塔”
“汉诺塔”是一个著名的益智游戏.塔上有3根柱子和一套直径各不相同的空心圆盘.开始时柱子上的所有圆盘都按照从小到大的顺序堆叠.目标是通过每次移动一个圆盘到另一根柱子,最终把一堆圆盘移动到目标柱子上,过程 ...
- IdentityServer(14)- 通过EntityFramework Core持久化配置和操作数据
本文用了EF,如果不适用EF的,请参考这篇文章,实现这些接口来自己定义存储等逻辑.http://www.cnblogs.com/stulzq/p/8144056.html IdentityServer ...
- Linux 纯字符界面的玩法
Linux 纯字符界面的用途 装逼必备 省资源,服务器一般不安装图形界面 图形界面崩溃后紧急救援 进入字符界面的正确方式 目前新的 Linux 发行版基本上都使用 Systemd 作为 init 程序 ...
- 微信小程序开发资料
微信开放平台:主要面向App开发者.通常是拥有成熟的应用程序后,通过开放平台将内容分享到朋友圈或发送给某个微信好友/群.例如QQ音乐分享,美图秀秀修改过的照片直接发朋友圈或聊天. 微信公众平台:强 ...
- [Swift]LeetCode455. 分发饼干 | Assign Cookies
Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...
- [Swift]LeetCode764. 最大加号标志 | Largest Plus Sign
In a 2D grid from (0, 0) to (N-1, N-1), every cell contains a 1, except those cells in the given lis ...
- [Swift]LeetCode889. 根据前序和后序遍历构造二叉树 | Construct Binary Tree from Preorder and Postorder Traversal
Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...
- [Swift]LeetCode924.尽量减少恶意软件的传播 | Minimize Malware Spread
In a network of nodes, each node i is directly connected to another node j if and only if graph[i][j ...