cocos creator制作2dTop-down游戏(虚拟摇杆、地图加载)

server/2024/12/24 3:36:33/
《不被遗忘的时光》第一期

1、游戏的形式:横板;2d的顶视角(Top-down);射击;ARPG;益智解谜。

2、画风:类似手游《伊洛纳》。

3、故事背景:以中元节的爷孙阴阳交流作为故事背景,参考《寻梦环游记》。以孙子的视角探寻爷爷年轻(1960s-1970s)年代的故事。

4、游戏引擎:cocos creator v3.8+

5、场景和相机:游戏场景主要两个:

(1)大厅(界面游戏和线索),只需要一个固定相机。

(2)游戏内的主场景,需要一个ui的固定相机,以及一个跟随主人公的相机。

下面是游戏内场景暂时的实现方案:

a.scene下两个画布:Canvas和UICanvas,UI层级更高,因为控制和信息的组件都在UI层。
在这里插入图片描述
b.项目设置为高度适配模式,然后两个画布分别加上widget组件,都选择宽度拉伸。

如果对适配感兴趣的,可以参考一下cocos creator 的适配用法。

在这里插入图片描述
c.两个画布分别挂上相机,而相机的可视层需要做区别,需要让UICanvas的相机拍不到Canvas的内容,反之亦然即可。

d.Canvas的相机需要跟随移动,但为了性能的考虑,这里使用的是延时检测加相机缓动的形式。在主人公移动时,通过时间间隔校验,当移动时间超过一定的阈值,则发送事件,让监听的相机做出移动跟随。

typescript">//主人公移动检测
if (this.m_iMoveInterval < 0){this.m_iMoveInterval = D.REFRESH_CAMERA_TIME;EventManager.getInstance().emit(D.DefineEvent.EVENT_PLAYER_MOVE);
}
typescript">//相机跟随的监听方法
private onPlayerMove(){if (this._playerPrefab.getComponent("hero").judgePlayerIsMove() && 		  		this.m_mainCamera){this.changeCameraPosition();}
}

这里我设置的REFRESH_CAMERA_TIME是1s,可以根据实际情况做调整。

注意:当主人公移动完成后,需要再发一个事件让相机移动到正确的位置,防止主人公的移动过程不足REFRESH_CAMERA_TIME。

案例演示效果:
请添加图片描述

6、控制方式:方向的控制用虚拟摇杆,攻击及其他功能的控制还没做。

(1)虚拟摇杆的实现方式,这里是使用了这位大佬的代码:虚拟摇杆,再加上了一点小修改,主要是加入了速度控制,以下是添加了速度控制的代码:

typescript"> private _onTouchEventMove(event: EventTouch) {let curTouchPos = event.touch.getUILocation();let uiWorldPos = new Vec3(curTouchPos.x, curTouchPos.y, 0);let convertNodePos = this.node.getComponent(UITransform).convertToNodeSpaceAR(uiWorldPos);//触摸起始点世界坐标let originLocation = this.node.getWorldPosition();let startLocation:Vec2 = v2(originLocation.x, originLocation.y);//触摸点和大圆距离 (大圆坐标 = 触摸起始点坐标)let dist = Vec2.distance(curTouchPos, startLocation);let radian = Math.atan2(curTouchPos.y - startLocation.y, curTouchPos.x - startLocation.x);//触摸点和大圆夹角弧度//触摸点在大圆范围内,则小圆位置移动到当前触摸点let dirPos = convertNodePos;if (dist <= this.maxMoveRadius) {//触摸点在圆环范围外,如果小圆移动到当前触摸点就会跑出大圆了,所以小圆位置移动到大圆边缘if (isValid(this.imgSmallCircleSpNode)) {this.imgSmallCircleSpNode.setPosition(convertNodePos);}} else {let posX = Math.cos(radian) * this.maxMoveRadius;let posY = Math.sin(radian) * this.maxMoveRadius;dirPos = new Vec3(posX, posY, 0);if (isValid(this.imgSmallCircleSpNode)) {this.imgSmallCircleSpNode.setPosition(posX, posY);}}let slidingScale = dist / this.maxMoveRadius;slidingScale = slidingScale > 1 ? 1 : slidingScale;this._vcMoveData.slidingScale = slidingScale;this._vcMoveData.distance.x = dirPos.x / dist;this._vcMoveData.distance.y = dirPos.y / dist;let newAngle = radian * 180 / Math.PI;this._vcMoveData.angle = newAngle;let vcMoveData = this._vcMoveData.cloneSelf();//派发移动事件//this.node.emit(UIVCEvent.UIVC_Move, vcMoveData);EventManager.getInstance().emit(UIVCEvent.UIVC_Move, vcMoveData);}

如果对cocos creator 的触摸相关感兴趣的,可以跳转

7、地图加载

(1)地图做出无边界的形式动态的循环加载;我将地图分割为256*256像素的单元,动态的进行加载。

(2)将植物,建筑等作为预制体,带上碰撞盒和刚体,然后每个地图上放上需要的预制体。以下是示例:
请添加图片描述

注意,Top-down的2d游戏需要将重力加速度设为0:

cc.PhysicsSystem2D.instance.gravity = cc.v2(0, 0);

(3)碰撞关系可以直接在project setting的物理中设置:
请添加图片描述

(4)动态加载和刷新的代码会在第一章结束时上传到github和gitee上,这里暂时不做介绍。

(5)示例演示:

打开调试模式:

请添加图片描述

关闭调试模式:

请添加图片描述

8、美术风格上:2d像素风顶视角(Top-down),画风上参考《伊洛纳》。

由于我们现在只有程序,非常需要感兴趣的会画画、会spine动效的朋友们来一起来合作。

联系方式:rogerorion@163.com。


http://www.ppmy.cn/server/152656.html

相关文章

鸿蒙NEXT游戏|Cocos参展2024华为开发者年度盛典

代码改变世界 2024华为开发者年度盛典在松山湖基地进行&#xff0c;来自各行各业的华为生态开发者相聚在一起&#xff0c;交流总结、探讨新的机遇。 开发者&#xff0c;用代码改变世界的人&#xff01; 这句 SLOGAN&#xff0c;引起了在场程序员的深度共鸣&#xff0c;持续热烈…

深度学习从入门到精通——图像分割实战DeeplabV3

DeeplabV3算法 参数配置关于数据集的配置训练集参数 数据预处理模块DataSet构建模块测试一下数据集去正则化模型加载模块DeepLABV3 参数配置 关于数据集的配置 parser argparse.ArgumentParser()# Datset Optionsparser.add_argument("--data_root", typestr, defa…

252-8路SATAII 6U VPX高速存储模块

8路SATAII 6U VPX高速存储模块主要包括存储模块母卡和SATA SSD&#xff0c;母卡上包括8个SATAII接插件&#xff0c;可并联挂载8块SATAII SSD组成存储阵列。单个SATAII SSD可配置容量为128GB-512GB&#xff08;SLC存储介质&#xff09;或256GB-1TB&#xff08;MLC存储介质&#…

RK3568平台(Kbuild篇)vmlinux 编译过程

一.vmlinux是什么 vmlinux 是 Linux 操作系统的内核映像文件,它包含了 Linux 内核的所有功能代码和必要的数据结构。这个文件通常是没有经过压缩和符号表去除的原始可执行文件。 具体来说,vmlinux 文件是编译后的 Linux 内核的最终产物,通常是 ELF(可执行和可链接格式)格…

【多模态】swift-3框架使用

swift-3框架使用 前言swift3安装swift训练swift cli推理swift vllm python推理 前言 接前面&#xff0c;swift3相比于swift2做了大升级&#xff0c;很多swift2能使用的在3里面error改改改…但是效率确实大升级&#xff0c;推理速度快了很多&#xff5e;&#xff5e;&#xff5e…

苹果将推出超薄和折叠款iPhone,2024年带来哪些变化?

苹果公司&#xff08;AAPL&#xff09;近日宣布&#xff0c;将对其iPhone系列进行重大升级&#xff0c;以应对当前市场中的销量压力。这一改变&#xff0c;或许会为苹果带来新的增长动力。那么&#xff0c;苹果的2024年新iPhone究竟有哪些亮点呢&#xff1f;下面我们来详细了解…

【Threejs】从零开始(六)--GUI调试开发3D效果

请先完成前置步骤再进行下面操作&#xff1a;【Threejs】从零开始&#xff08;一&#xff09;--创建threejs应用-CSDN博客 一.GUI界面概述 GUI&#xff08;Graphical User Interface&#xff09;指的是图形化用户界面&#xff0c;广泛用在各种程序的上位机&#xff0c;能够通过…

手写Redis分布式锁+RedisUtil二次封装

文章目录 1.手写Redis分布式锁1.RedisShareLockUtil2.使用方式 2.RedisUtil二次封装1.RedisUtil2.使用案例 1.手写Redis分布式锁 1.RedisShareLockUtil package com.sunxiansheng.redis.util;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springfra…