cocos 🦑 🎮 开发游戏的利器 ⚔ :1️⃣ 创建游戏场景

931 阅读2分钟

这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

安装 Cocos CREATOR

新下载后是需要Editor中安装插件的(我最开始安装的时最新的版本,但是新建项目后没有Canvas,只有Scence。跟官网的一些例子不太一样。这里建议使用2.x的版本) image.png

image.png

新建项目

在2.4.4版本下有如下六种可供选择的模板,可以选择hello world来初步学一下。选好模板后,输入项目名和项目存放位置。 image.png 3D/2D image.png 画布 Canvas

  • Canvas:Node + cc.Canvas组件(设计分辨率 + 适配策略)
  • MainCamera:Node+cc.Camera 用来拍摄画面 image.png assets 资源文件,根据你的需要建立不同的层级

浏览器控制台 可以在控制台对我们的游戏进行性能分析

image.png 点击stop后

image.png

可以看到每部分的耗时 image.png

开始我的项目

分为如下七步

1.创建项目
2.创建游戏场景
3.制作游戏摇杆
4.搭建物理地图,开启物理引擎
5.摇杆控制坦克移动
6.游戏地图滚动
7.打包发布微信小游戏

我们项目已经建好了我,文件夹也建了。下面我们创建一下游戏场景:

创建游戏场景

把需要的图片文件放入文件夹

如果复制到Cocos Creator中时复制不进去,那就去文件夹中粘贴。

image.png 生成map节点

将图片拖拽到Canvas下,生成了map节点。然后可以通过Size改变其大小,通过Position来改变其位置,[0,0]是坐标轴中心 image.png

如果背景图很小,然后生成的size很大。他也有类似于css的no-repeat的属性:把Sprite下的Type属性选为 TILED

image.png

加入坦克

同样将坦克拖入Canvas下

image.png

加入遥杆

我们新建一个节点(右键点击Canvas新建) 用来存放 摇杆的外圈和内部的按钮。

  • 点击joystick后,上下拖拽绿色y轴线,实现其上下移动。同理红色x轴线实现左右移动。

image.png

  • 因为joystick在左下角,我们可以点击joystick,添加UI组件下的 ->Widget组件来控制其位置。 image.png

image.png