我们在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定义了一系列生命周期方法,在节点不同生命周期会调用。下面是入口脚本的简单实现。



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等类型的属性,这样就可以把界面的元素关联到脚本,通过脚本来刷新。


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的生命周期和消息来实现界面更新,降低耦合,后面会详细介绍这种方式。


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);
            });
    }
}

现在我们已经知道怎样建立游戏入口,怎样制作、加载、显示界面,下一章将讲解怎样对弹窗分层管理。

Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐