cocos creator 初体验

        最近不是很忙,就想来看看cocos官方的h5开发环境,自从用过白鹭之后就一直想来看看,一直没有时间,今天好不容易来看看,就来尝尝鲜。还别说,刚看还真心有点看不懂,也不知道是不是老了......

学习之前先去官网了解一下cocos creator ,这个是用js语言开发的, 图形编辑+vscode用起来还算顺心吧。毕竟我装了杨超越插件:

看起来是不是还行,不过该说不说啊,vscode 用起来确实不错,速度快体积小,并且代码提示啥的功能还都齐全,还有很多插件供我们选择使用。

不瞎扯了,现在进入正题,打开create并且我们建立一个helloworld工程,跑起来看一下,你会发现可以选择二种方式进行预览,一种是模拟器还有一种是浏览器:

我这边喜欢用浏览器进行预览,所以我选择的是浏览器,建议开发人员使用谷歌浏览器进行开发调试,至于为啥,我在这里不想说,嘿嘿!整个图形编辑器的结构是这样的:

如果你用cocosstdio的话,这个界面看起来还是有那么一点面熟的。整个界面分为层级管理器、 资源管理器、场景编辑器、属性检查器、动画编辑器、控制台 等。资源管理器中我们可以看到,有 scene,script,texture三个文件夹,scene放场景文件,script放的是js脚本,texture放的是资源,但是你想怎么放是你的事。

好了,说了这么多了,我们来搞点实质性的东西玩玩,creator里面每js文件都对应绑定了一个控件,比如我们的helloworld创建后虽然没有绑定,但是如果你想在js里面添加东西,就需要绑定,我把helloworld场景和helloworld 脚本文件绑定在一起,怎么绑呢?

选择你想绑定的控件添加组件,然后选择用户脚本组件,然后再选择你的脚本,就算绑定了,我是直接选的canvas绑定的

绑定之后,只要我们在js脚本中添加任何变量,属性检查器都能给我们检查出来,比如我定义了如下变量:

我增加了VideoPlayer ,playButton 二个变量这个时候我们可以看一下属性检查器:

是不是都给检测出来了,虽然说在文本里面也可以设置初始值,但是我经过试验发现,在属性检查器里面设置的初始值优先级比你再脚本里面设置初始值优先级高,或者说在刚才定义的地方只是定义变量,并不会初始化。哦,到了这里还有一件很重要的事,那就是我们需要把我们创建的控件和属性检查器定义的变量对应绑定起来,方法就是直接拖上去就可以了。等拖完了,我们就可以在代码里面用this去访问了,我刚才定义的就可以用this.VideoPlayer 和 this.playButton 去访问了。

这个相比于lua和c++版本就是省了一步查找控件了,还是有优势的。

我本来想体验一下webview控件使用,但是我看到还有一个VideoPlayer可以选择玩,当然选择玩他,在场景里面添加一个控件VideoPlayer属性检查器里面有很多控件供我们填写,但是有一个地方可以选择视屏的类型

一个local  是本地视频 ,一个 remote是网络视频,我先试一下本地视频:

把你想要播放的视频直接拖进去就可以了,然后在代码里面用一个什么东东控制一下,我是用按钮来控制的,我还添加了一个playButton按钮,用来控制视频播放:

点击运行起来我们看看:

点击播放我们就可以看到视屏在播放了。然后我们再试一下网络视频,把vedioplay 的 resource type属性选择remote

然后clip填写一个网络视频链接  如 :http://www.w3school.com.cn/i/movie.mp4

再运行一下,看到的结果是这样的:

一个熊在喝水,小鸟过来唠嗑。

哦,还没有说 onLoad  update这二个函数的作用呢,onLoad是程序一运行就会入的函数 而update函数是计时器帧率函数,这个很好理解,除了这二个还有一个start函数,在这里就不多说了。

好了,时间也差不多了,学完了也算入门了吧,嘻嘻!

最后总结一下吧,cocos creator的出现确实是给h5开发提供了很大的方便,并且可以发布到多个平台:

原生平台也可以,那么是不是以前的c++ 和lua的开发模式是不是都可以取消了,难怪官方现在主推creator还是有一点道理的,但是作为一个cocos2d的使用者来说,cocos开发的学习成本是真的大,毕竟我是从CC.的时代过来的,2.X到3.X再到creator ,时代在变化,技术在更新,不学习就要被挨打。不过这也是好事嘛,代表中国游戏引擎的繁荣昌盛嘛。

(⊙o⊙)…好像扯的有点多了。。。

算了,不说了,就到这里吧。

哎哎哎,最后再说一下,那个vscode的插件上额小姐姐还真好看-_- 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值