从网上下载cocos creator,安装好后,就可以制作游戏了。我这里用的是mac,直接一键安装,不用配置什么环境。先来试试第一个小游戏,就简单的切换一下就行了。
我的cocos creator 的版本
打开creator,点击新建项目,新建一个空白项目,选好路径和项目名,创建完成之后是这样的:
空白项目
点住左下角assets,右键新建文件夹创建三个文件夹,命名为Scene,Script,Texture,分别存放场景文件,脚本文件和图片资源。往Texture文件夹里随便拖两张背景图和两张按钮图。接着点选Scene文件夹,右键选择新建Scene:
新建Scene
修改名字为home,接着同样操作在创建个scene命名为shop。
双击打开home,看到左上角有个Canvas,这个就是home这个场景的画布,我们要在这个上面添加东西进去,从Texture文件夹下拖一张背景图到Canvas下,然后点击Canvas上面的加号,创建一个按钮:
创建按钮
然后删除这个按钮的子文件Label。再将一张按钮图拖到这个按钮的右边属性检查器对应的SpriteFrame中:
给按钮添加图片资源
完成后如图:
home场景完成
然后双击进入shop,将另外的一张背景图拖进去,并用另一张按钮图创建一个按钮。再回到home,在Script文件夹下右键选择新建JavaScript:
新建JavaScript
命名为homeJS,同样操作,再建一个,命名为shopJS。
双击homeJS,在
这个是场景加载函数
下面添加代码:
toShop: function () {
cc.director.loadScene("shop")
},
这是个函数,这个函数的意思是切换到shop场景。
然后再shopJS里同样位置添加:
toHome: function () {
cc.director.loadScene("home")
},//切换到home场景
哈哈,代码部分就这样完成了,接下来的事情就是把这homeJS,shopJS关联到那两个按钮上去了。
双击home,选住按钮,在它对应的属性查看器中下滑找到添加组件,点击:
将按钮关联homeJS
完成:
关联完成
然后找到Button那一栏:
属性检查器的Button栏
找到Click Events,设为1,将这个按钮本身拖入到下方的cc.Node处,再选择脚本:homeJS,再选择函数:toShop。如此,这个按钮的关联事件就做好了。完成图如上。
同样,对shop场景的那个按钮也是如此操作,完成如下:
shop场景的按钮的事件关联
OK,完成了,点击正中间的三角形运行吧:
运行键
完成效果就是两个页面的切换。
同时,在实际过程中,我们也发现了许多一些这里没有用到的控件和属性,动手试试吧。
如有错误,欢迎指正。如有补充,欢迎告知。
2017-07-21