CocosCreator之KUOKUO带你做随机数游戏(1)

开坑开坑啦,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〜

怎么样,有没有立个标志的冲动

猜你喜欢

转载自blog.csdn.net/kuokuo666/article/details/83901975