如何做个网站教程,网站建设做账,电商网页设计欣赏,社保服务个人网页转载知识星球 | 深度连接铁杆粉丝#xff0c;运营高品质社群#xff0c;知识变现的工具
项目地址#xff1a;赛车小游戏-基于Cocos Creator 3.5版本实现: 课程的源码#xff0c;基于Cocos Creator 3.5版本实现
上一张您已经对Cocos的坐标系有了了解。这一章我们将让小车能…转载知识星球 | 深度连接铁杆粉丝运营高品质社群知识变现的工具
项目地址赛车小游戏-基于Cocos Creator 3.5版本实现: 课程的源码基于Cocos Creator 3.5版本实现
上一张您已经对Cocos的坐标系有了了解。这一章我们将让小车能够自动的向您触控的点运动过去。所以为了达到这个目的我们要接收触摸屏幕事件再对小车的刚体组件施加一个由小车的坐标点指向触摸点的力。具体步骤如下 一、实现一个触控类 1.请在script文件夹下新建一个名为TouchInput的脚本文件我们将会在这里完成对触控事件的接收。新建脚本后效果如下 2.打开并初步编辑脚本文件 双击这个脚本文件VS Code将会为您打开并编辑这个脚本文件因为这个脚本文件只负责处理触控事件不会挂载到某个节点上所以它无需具备组件的特性所以我们可以删掉他的“extend Componment”属性。而您要实现的游戏是个单人游戏也就是说触控接收器只为由玩家操控的汽车节点提供触控事件处理服务不会为别的节点例如电脑提供的NPC车辆提供服务所以以单例模式运行即可。综上TouchInput的初步代码为 3.接收触摸事件 cocos中采用input常量中的on方法来注册事件on方法一共有两个参数第一个参数是要注册的事件类型事件类型的枚举值都Input.EventType下第二个参数是一个方法当接收到对应事件后这个方法将会执行这个方法的入参是框架已经为您封装好的事件的具体值例如点击的是哪个坐标点等。现在您要实现的是点击屏幕来控制小车的运动所以在控制器里首先您需要注册开始点击、结束点击、点击时手指移动以及点击时手指移动到触控区域外这四个函数不过在处理时我们可以把点击时手指移动到触控区域外也视为结束点击的逻辑。其次我们还需要记录当前是否玩家处于点击状态以及当前的触控点的坐标。具体代码如下 import { _decorator, Component, Node, input, Input, Vec2 } from cc;
const { ccclass, property } _decorator;ccclass(TouchInput)
export class TouchInput {private static singleiInstance: TouchInput new TouchInput();touchX: number 0;touchY: number 0;inTouch: boolean falsestatic Instance() {return TouchInput.singleiInstance;};private constructor() { input.on(Input.EventType.TOUCH_MOVE, (event){this.inTouch truevar pos new Vec2(event.getLocation())this.touchX pos.xthis.touchY pos.yconsole.log(移动中 点击的X坐标 this.touchX 点击的Y坐标this.touchY 点击状态this.inTouch)})input.on(Input.EventType.TOUCH_START,(event){this.inTouch truevar pos new Vec2(event.getLocation())this.touchX pos.xthis.touchY pos.yconsole.log(开始点击 点击的X坐标 this.touchX 点击的Y坐标this.touchY 点击状态this.inTouch)})input.on(Input.EventType.TOUCH_CANCEL,(event){this.inTouch falseconsole.log(点击结束 点击的X坐标 this.touchX 点击的Y坐标this.touchY 点击状态this.inTouch)})input.on(Input.EventType.TOUCH_END,(event){this.inTouch falseconsole.log(点击结束 点击的X坐标 this.touchX 点击的Y坐标this.touchY 点击状态this.inTouch)})}
} 我们可以看到我们在实例化类时自动执行的构造函数中注册了对应的事件并且将是否处于触控状态以及点击的坐标保存到了TouchInput的成员变量中。 4.测试触摸接收事件 保存好文件然后点击运行按钮在浏览器运行后打开开发者工具然后在屏幕上点击任意位置我们将会在控制台中看到对event的打印 也许你可能会有疑问为何感觉console.log打印出来的坐标和上一章说的无论是世界坐标系还是本地坐标系都匹配不上这是因为点击事件返回的点是根据触控坐标系计算出来的您可能会对又引入了一个坐标系感到很Angry但是不要紧只需要使用相机来转化一下就能把触控坐标转化为世界坐标这个具体过程我们会在后面实现。 5.在控制汽车节点的CarControl脚本中引入并使用TouchInput 双击CarControl来让VS Code编辑它我们先清空下update方法中的语句然后把添加一个TouchInput类型的成员变量并且在start函数中让这个成员变量指向TouchInput的单例。具体效果如下 6.分析小车向触控点运动的实现 我们要实现的效果是小车向玩家点击屏幕的位置移动所以在代码中的逻辑就是在每一帧的update的函数中先获取touchInput的inTouch字段来判断下是否处于触摸状态如果处于触摸状态就获取到触摸点然后将触摸点转换为世界坐标最后再给小车的刚体组件施加一个由当前小车刚体所在的节点的世界坐标点指向触摸点的世界坐标点的力。 7.引入camera组件 上一步骤中说到获取到触摸点后要将触摸点转换为世界坐标才能参与后续计算camera类中提供了screenToWorld方法来完成了这种转换。所以我们要引入camera。和引入汽车节点的刚体组件时一样我们先声明一个Camera类型的gameCamera成员变量并且为他添加上给Cocos Creator看的注解。也许你会问我为什么不直接叫camera而是叫gameCamera这是因为后期要显示UI所以可能不只有一个摄像头所以这个就不采用比较笼统的camera的名字 然后回到Cocos Creator中指定这个变量指向Game场景下的Canvas下的Camera: 8.实现步骤6的逻辑 逻辑非常简单把6的步骤给翻译成代码就是了直接上CarControl的代码 import { _decorator, Component, Node, RigidBody2D, Vec3, Vec2, math, Camera } from cc;
import { TouchInput } from ./TouchInput;
const { ccclass, property } _decorator;ccclass(CarControl)
export class CarControl extends Component {property({type: RigidBody2D})carRigidBody: RigidBody2DtouchInput: TouchInputproperty({type: Camera})gameCamera: Camerastart() {console.log(------------start-----------------)this.touchInput TouchInput.Instance()}update(deltaTime: number) {var inTouching: boolean this.touchInput.inTouchif(!inTouching){return}var twPos: Vec3 new Vec3(this.gameCamera.screenToWorld(new Vec3(this.touchInput.touchX,this.touchInput.touchY)))var nwPos: Vec3 this.carRigidBody.node.getWorldPosition()var force: Vec2 new Vec2(-nwPos.xtwPos.x,-nwPos.ytwPos.y)this.carRigidBody.applyForceToCenter(force,true)}
} 9.在浏览器中运行并查看结果 VS Code和Cocos Creator中各自保存好然后点击运行在浏览器中查看运行。因为目前没有设置小车的阻力所以如果一直点击的话持续受力会越来越快如果只点击一下则会做向点击方向的匀速直线运动。但是不管怎么了只要点击一下发现小车向着您点击的点做匀速直线运动了就表明没问题了效果 10、debug 虽然我们已经看到了小车的受力已经没问题了但是小车的根节点也就Car节点并没有随着刚体发生移动 这是为什么呢因为在前面的章节中我们在挂载刚体时按照常理给挂载到了小车的CarSprite节点上而现在我们看到因为刚体受力而发生位移时只对刚体所在的节点及其子节点生效所以刚体应该挂载到Car节点上才对。所以现在需要您删除掉CarSprite上的刚体 然后按照相同方式在Car上面新建一个刚体 最后记得让Car节点挂载的CarControl节点的carRigidBody变量指向Car的刚体 11.重新测试 保存好然后点击运行按钮在浏览器中观察效果 我们可以看到Car节点不再一直停在起始位置了。
