记录cocos的基本操作-控制角色移动

安装编辑器

编辑器的版本可以任意选择

编辑器写的代码在其他版本的编辑器是无法打开的,尽量选择最新的编辑器进行使用

新建节点

可以在项目中新建需要用到的节点,这里新建一个Sprite 类型的小方块来使用

初始化是一个可以配置图片的方块,这里直接给他加上颜色接口

新建控制器脚本

如果我们想要对小方块做一些操作事件,就必须用到脚本来控制

那么我们可以通过新建的ts脚本并且绑定到小方块的身上就可以实现对小方块的控制

scala 复制代码
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PlayerController')
export class PlayerController extends Component {
    start() {

    }

    update(deltaTime: number) {

    }
}

新建的脚本会生成两个主要的函数,一个是start开始函数,一个是update的时间差更新函数

比如我们想实现一个功能,点击鼠标的时候进行跳跃,那可以直接在start中去监听input

js 复制代码
start() {
     input.on(Input.EventType.MOUSE_DOWN,this.onMouseUp,this)
}

上面这个代码是监听鼠标的按下事件,并且调用onMouseUp函数

把新建好的脚本拖动到目标节点上,这样每个脚本就会有自己控制的节点了,每个脚本中的this指的就是目标节点

控制节点的移动

this.node.getPosition用于获取节点的当前的位置 this.node.setPosition用于设置节点的当前的位置

js 复制代码
this.node.getPosition(new Vec3()); // 获取节点的当前的位置
Vec3.add(this._targetPos,this._curPos,new Vec3(this._jumpStep,0,0))
this.node.setPosition(this._targetPos)

Vec3是指通常包含三个属性:xyz,分别代表向量在三个轴上的分量

Vec3.add(this._targetPos,this._curPos,new Vec3(this._jumpStep,0,0))的第一个参数是目标分量,第二个参数是当前分量,第三个参数是移动的分量,即把当前分量和移动分量相加,得出目标的分量

通过上面的三个步骤就能实现简单的节点的移动,感兴趣的小伙伴可以试试。

实现的效果

现在想要点击画面让小方块进行移动,那么就需要用到上面的几个方法,通过监听点击事件,然后对小方块进行移动处理即可。

js 复制代码
onMouseUp(){
    this.node.getPosition(new Vec3()); // 获取节点的当前的位置 
    Vec3.add(this._targetPos,this._curPos,new Vec3(this._jumpStep,0,0)) 
    this.node.setPosition(this._targetPos)
}

如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek