码迷,mamicode.com
首页 > 其他好文 > 详细

cocos creator主程入门教程(一)—— 初识creator

时间:2019-01-01 13:59:59      阅读:4451      评论:0      收藏:0      [点我收藏+]

标签:详细介绍   空白   技术   手机   xtu   img   就会   fabs   ddc   

四邑隐侠,本名关健昌,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

标签:详细介绍   空白   技术   手机   xtu   img   就会   fabs   ddc   

原文地址:https://www.cnblogs.com/niudanshui/p/10203449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!