cocos入门知识

来源:http://www.chinese-glasses.com 作者:Web前端 人气:57 发布时间:2020-03-24
摘要:时间: 2019-11-04阅读: 121标签: 引导 了解 Dashboard 以后,我们现在看看如何创建和打开一个 Hello World 项目。 早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下

时间: 2019-11-04阅读: 121标签: 引导

了解 Dashboard 以后,我们现在看看如何创建和打开一个 Hello World 项目。

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能:新手引导

在 Dashboard 中,打开新建项目选项卡,选中Hello World项目模板。

回想起当年,接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光,游戏代码本来就千疮面孔,逻辑错综复杂,根本不知道该怎么下手?更困难的是,游戏本身功能和需求还不稳定,老板随便一个想法可能就会被改、改、改...,我该怎么办?

10bet 1

在这种情艰难的情况下一定要,需要保持冷静,在痛定思痛之后,我开始了引导功能的开发,在做的过程中不断积累,编写了一套配置式、可编程的引导框架,然后交给其他开发人员或策划人员做具体的引导内容,真的是:“杀不死你的会使你更强大”

然后在下面的项目路径栏中指定一个新项目存放路径,路径的最后一部分就是项目文件夹名称。

实现新手引导的困难

填好路径后点击右下角的新建项目10bet,按钮,就会自动以 Hello World 项目模板创建项目并打开。

通常实现新手引导的困难在于,它与当前需求、功能密切相关,而且稍有不甚连正常流程都走不通,下面一起看看新手引导到底有那些痛点。

Cocos Creator 的工作流程是以数据驱动和场景为核心的,初次打开一个项目时,默认不会打开任何场景,要看到 Hello World 模板中的内容,我们需要先打开场景资源文件。

开发中的痛点需要在正常流程中插入引导代码,干扰流程;引导代码的增加会影响原有代码逻辑,增加维护难和成本;界面或需求的变化会导致引导功能大幅修改,甚至重新制作;手指提示对应的矩形区定位麻烦,不能简单使用固定的位置和矩形大小;编写引导的代码也很困难,需要策划—程序之间高度配合。期望的编程体验

10bet 2

在了解到传统的引导制作过程中的难点与弊端后,一直在思考没有更好的实现方式,我心中的引导功能的编程方式希望有以下几点:

资源管理器中双击箭头所指的helloworld场景文件。Cocos Creator 中所有场景文件都以

引导功能代码,不能混入正常游戏逻辑代码中,后患无穷,应尽量分离;(难以忍受优雅的代码被无情的打乱,更难忍受糟糕的代码被弄的支离破碎)界面只发生简单的UI位移、Size大小、节点层次的调整,不需要修改具引导代码;定位UI指引矩形区域应尽可能简单,能自适应不同的屏幕尺寸;最好能做到策划人员都可以来制作部分流程引导;在引导需求明确、游戏功能正常的情况下,制作一个常规的引导步骤应该非常快捷。

作为图标。

下面是我使用Cocos Creator 官方 demo-ui 工程上嵌入的引导案例演示:

10bet 3

demo体验地址:

要预览游戏场景,点击编辑器窗口正上方的预览游戏按钮。

这里有一个视频演示:

10bet 4

框架要点

Cocos Creator 会使用您的默认浏览器运行当前游戏场景,效果如图所示:

演示中的引导操作,是使用下面JSON配置进行控制:

10bet 5

module.exports = { name: '进入商店', debug: true, autorun: true, steps: [ { desc: '文本提示', command: { cmd: 'text', args: ['欢迎体验Shawn的新手引导框架', '本案例演示:n1.文本提示指令n2.手指定位指令n3.自动执行引导n4.点击操作录像', '首先,请点击首页按钮'] }, }, { desc: '点击主界面主页按钮', command: { cmd: 'finger', args: 'Home  main_btns  btn_home'}, delayTime: 0.5, }, { desc: '文本提示', command: { cmd: 'text', args: '点击主界面设置按钮' } }, { desc: '点击主界面设置按钮', command: { cmd: 'finger', args: 'Home  main_btns  btn_setting'}, }, { desc: '文本提示', command: { cmd: 'text', args: '点击主界面商店按钮' } },}

点击预览窗口左上角的下拉菜单,可以选择不同设备屏幕的预览效果。

配置中的重点是 steps 数组项目,其中的 desc 是引导步骤的描述,主要用于调试,command是引导指令,这里实现的是一个手指指示指令:finger, 后面的args是指令参数,借助CSS中的选择器概念,我这里简单实现了一个节点获取的方法,称之为:定位器

修改欢迎文字

定位器

Cocos Creator 以数据驱动为核心的最初体现,就在于当我们需要改变 Hello World 的问候文字时,不需要再编辑脚本代码,而是直接修改场景中保存的文字属性。

点定位器的概念,其实它非常简单,如下图所示:

首先在层级管理器中选中Canvas节点,我们的HelloWorld组件脚本就挂在这个节点上。

你可能会想到,引擎提供的 cc.find 就搞定,代码如下:

接下来在属性检查器面板下方找到HelloWorld组件属性,然后将Text属性里的文本改成你好,世界!:

cc.find('Canvas/Home/lower/main_btns/layout/btn_home')

10bet 6

本文由10bet发布于Web前端,转载请注明出处:cocos入门知识

关键词:

频道精选

最火资讯