资讯专栏INFORMATION COLUMN

cocos creator 简单实战

taowen / 2688人阅读

摘要:锚点位置确定后,所有子节点就会以父节点锚点所在位置作为坐标系原点。观察实际效果以下为实际效果,左侧打开栏目为不同手机分辨率模式。巨坑因为分辨率发生变化,导致节点大小位置都会发生变化。

项目地址:https://github.com/Iroha1024/...

一个小游戏的demo,以下简单地介绍了我关于cocos creator的一点理解和开发流程

版本:cocos creator v2.0.9

编辑器:vscode

准备篇

1、新建目录
res存放资源,scenes存放场景,scripts存放脚本

2、新建scene

3、双击左键,打开scene

改变了当前场景内容记住及时ctrl+s保存!

背景篇

1、在canvas节点下创建空节点background(作为所有背景的父节点),在父节点下创建渲染节点sprite。子节点会随父节点移动

2、点击创建的bg1节点,右侧"属性检查器"出现bg1相关信息。将准备好的图片资源拖至正确位置

3、确定background锚点(Anchor)

锚点(Anchor)是节点的另一个重要属性,它决定了节点以自身约束框中的哪一个点作为整个节点的位置。

Anchor:https://docs.cocos.com/creato...

锚点位置确定后,所有子节点就会以 父节点锚点所在位置作为坐标系原点。
因为本游戏设计为从上至下,所以background的锚点值设置为(0.5, 1)

4、设置background Y值为320(canvas Y值的一半),点击bg1节点、拖动蓝色矩形或在属性检查器中改变position值致使背景与紫色矩形(camera节点)吻合(X值为0,即为居中)。游戏初始画面为camera中内容。

5、观察实际效果

以下为实际效果,左侧打开栏目为不同手机分辨率模式。选择后会发现画面上方出现黑边、同样旋转(rotate)也会有一样状况。
巨坑:因为分辨率发生变化,导致canvas节点大小、位置都会发生变化。因此,一开始所有的对齐都成无用功。

6、点击background,在属性检查器中点击“添加组件”,选择UI的widget组件。点击top(将background与父节点上边界对齐)

widget组件:https://docs.cocos.com/creato...

改变canvas的屏幕适应(以宽度为标准撑满屏幕)。

现在所有分辨率下都不会出现问题

脚本篇

1、创建小球节点(步骤同背景篇),更改player节点position坐标、ball节点图片

2、在scripts文件夹下新建javascript,ball.js

3、双击ball.js进入编辑器,编辑小球属性

cc.Class声明:https://docs.cocos.com/creato...

4、在ball节点,属性检查器中“添加组件”,选择用户脚本组件-->ball
将层级管理器中“Main Camera”和“background”节点分别拖至相应位置,即可在ball.js脚本中访问相应节点实例化对象

5、编辑ball.js方法

生命周期回调:https://docs.cocos.com/creato...

6、使用js和官方提供的API编写自定义函数来实现你想实现的功能

Cocos Creator v2.0 用户手册:https://docs.cocos.com/creato...
API参考:https://docs.cocos.com/creato...

追加

以下为我未在上面讲述,但是比较重要的内容,官方教程这些地方很详细

预制资源:https://docs.cocos.com/creato...

碰撞系统:https://docs.cocos.com/creato...

动画系统:https://docs.cocos.com/creato...

动画编辑完点击在“场景编辑器”保存,不编辑点击关闭。一个Animation组件挂载多个clip,编辑时在“动画编辑器”左下角切换

音乐和音效:https://docs.cocos.com/creato...

感谢阅读至此

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106311.html

相关文章

  • 小游戏开发上手体验 - Cocos Creator

    摘要:但开发的游戏是无法通过网页发给别人在线玩的,更不能做成微信小游戏。它使用作为开发语言,开发出的游戏可以直接生成微信小游戏网页安卓等平台上的版本。 微信群里最大的骚扰源有两种: 一是转发#吱口令#~!@#¥%……&*,长按复制此消息领红包之类的 另一种就是各种小程序和小游戏的分享 前天有同学无意间把一个小游戏分享到了答疑群中,我看了一下,其实游戏的代码逻辑并不复杂(简化版的跳一跳,套上个...

    zhiwei 评论0 收藏0
  • Cocos Creator—如何给资源打MD5版本号

    摘要:从年底开发组就说要支持,等了大半年,新的内测版本终于增加了的功能,但效果也是差强人意。实际上我不会把这几个和打版本号的。最后产出会把这几个文件合并到中。 Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布。Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写起来也更方便快捷,开发效率更高。 ...

    lk20150415 评论0 收藏0
  • cocos creator 事件

    摘要:事件在做一个消除类游戏时,需要对点击的方块做出响应。普通节点注册事件在中如果需要相应事件,需要为该节点添加一个组件。,事件冒泡利用自定义事件的属性,实现冒泡。 cocos creator 事件 在做一个消除类游戏时,需要对点击的方块做出响应。代码很简单,可背后的原理还多着呢。 1. 普通节点注册click事件 在cc中如果需要相应click事件,需要为该节点添加一个Button组件。或...

    since1986 评论0 收藏0
  • Cocos Creator—最佳构建部署实践

    摘要:本篇我们会基于的官方示例做分析,我在原的基础上增加了部署的脚本,部署到又拍云和腾讯云。文件资源增加版本号版本号的方案跟之前的文章基本一致,这个流程在版本应该可以忽略了。 这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是《快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践》,对于其他团队可能并不是。 ...

    caohaoyu 评论0 收藏0
  • cocos creator游戏开发

    摘要:自从调整游戏难度后我的最高分重来就没有超过生命最高分来点实际的做技术嘛,大多都是做点总结吧开源地址在基本中定义的属性,切记在编辑器中拖动绑定多看官网,多开实例代码发布微信小游戏一定不要有英文,会导致审核不通过 1.初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘。作为前端的你对这个文件是不是再熟悉不过了。是的,和你想...

    SoapEye 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<