开坑开坑啦,KUOKUO带你入门CocosCreator,承诺不TJ,顶多慢一点{的console.log(滑稽)}本次引擎2.0.5
在我入门学习的时候是按照官方文档一条一条学习的,的确是有效。
但是我认为任务驱动的学习效率更高,例如,我开的坑。希望可以帮助更多的人入门CocosCreator!
废话不多说:本教程默认你安装了引擎和Vscode;
目标:随机数游戏;
新建项目后:
习惯性的拖过去...
然后在层级管理器中鼠标右键画布(画布);创建节点;创建渲染节点;精灵(单色);
得到如下图,其实就是,我们在游戏的层级中加入了一个单色的图片
然后我会习惯性的给它重命名叫BK(背景的缩写);
然后点击它,看编辑器的右方属性,改变大小到
然后你会发现白色图片变大了;
哈哈,你已经迈出了第一步(给游戏加个白色背景),
可能你看到的还是云里雾里,别怕,一切事物都是从未知到熟悉,坚持下去!
然后咱们弄个按钮上去;
鼠标右键帆布,创建节点,创建UI节点,按钮(按钮);
现在是不是有点感觉了呢?未来的开发者!
接下来再添加一个标志(文字),自己找一找在哪吧,嘻嘻。
然后我们选中这个New Label,改变右方属性面板的颜色到你喜欢的颜色(默认的白色与背景冲突);
我喜欢红色
然后在屏幕中间会这样:
那个红色的标签跟按钮重叠了,别怕,点击那个绿色向上箭头,拖动它,顺便试试红色的!
好了,场景布局完毕,我们把它保存一下,摁下Ctrl + s,会弹窗,起一个英文名字游戏吧
点击保存,我们的场景就会咻的一下,出现在资源管理器(这些名词其实就是表面意思,理解理解吧)
点击模拟器右方的小箭头,试试吧!
诶呀!按钮点击是点击了,但是怎么没反应呢?
这就需要用CocosCreator的核心--JS脚本啦(暂且理解:就是用代码控制图形的改变)!
马上就成功了,加油↖(^ω^)↗
我们在资源管理器鼠标右键资产,点击新建,JavaScript中,
起个名字叫buttonjs吧(看习惯)
然后双击。。。。。。啊,对了,第一次要设置一下;
点击文件;设置;数据编辑;外部脚本编辑器,浏览,然后选中VScode的启动方式;
这样双击脚本就可以直接打开了;然后按照官方提示
没错,以上的步骤就是为了在打代码时偷懒!哈哈,我一直在偷懒!
好的,
经历了以上步骤,我们打开了脚本;
然后删去无用的注释,
是这样的:
怎么样,可爱多了吧。让我介绍一下:properties可以理解为与编辑器进行沟通的一个桥梁,
比如说我这次准备控制那个Label(文本),我就写一个:
我写了一个text(自己起的名字)并声明它是一个Label类型的;
这样我们Ctrl + s保存一下再回到编辑器;把它绑定在画布上吧(脚本要绑定在游戏场景的某个东西上才有用哦)
我们点击Canvas,然后看右侧属性面板的最底下;
点击添加组件;添加用户脚本;你会看到我们写的脚本就在那里;点击
看到那个text了吗,没错,就是刚才我写的!所以说脚本中的properties就是这么用的,一个桥梁。
我们把想控制的那个New Label拖过去,对,鼠标左键摁住拖过去!(如果不小心点击了一下New Label,你就再点击Canvas,因为脚本在Canvas上),加油,你可以的,完成后是这样:
你想控制的那个Label过来了,这样就可以在脚本里通过代码控制它了;
我们试一试:
在start()函数内改变这个Label文本
保存一下,我们模拟器运行一下,看!
啥?你问我this是啥?这样吧,我举个例子:
代码这样打(var 是声明一个变量的意思,类似与c语言的int,,,)
为什么i不加this呢,你猜,思考一下!是因为它跨函数?
我们来让它产生随机数吧!用到了Math.random()函数,该函数会生成[0,1)之间的小数,我们来试一试:
呀哈,成功了!但是我们没用到摁钮呀,别急!
我们单独列出来这个产生随机数的函数并起名为Button_Click
对,就是给Button用的。
好了,写完了,但是button怎么调用呢?
第一步,设置按钮的点击事件为1(默认为0,没有)
选中按钮,在属性检查器中往下滑;事件数改为1
回车之后(点一下别的地方也可以)
我们看到了:
底下出现了空位置,因为我们想控制那个标签文本,但是那个文本的控制代码在脚本里,而这个脚本我们绑定在了画布上,
哈哈,有点绕,其实就是一号联系二号,二号联系三号,我们通过三号往回找
把帆布拖到这里(因为脚本在它身上)
然后点开后面,找脚本
没错,就是那个buttonjs
再往后找我们写的那个点击函数,怎么样,会了吗;
我们试一试:
这样就实现了点击摁钮随机数,怎么样!找了没。
O(∩_∩)O〜
怎么样,有没有立个标志的冲动
加我QQ群:(博客里面的项目,群文件里都有哦)
706176551
我们一起学习!