Cocos 3.x 菜鸟一起玩:旋转的猴头带着骑士一起旋转

Cocos 3.x 菜鸟一起玩:旋转的猴头带着骑士一起旋转

首页休闲益智一起来旋转更新时间:2024-05-11

在不经过编码基础上,能够通过编辑器的动画功能实现旋转。那么同理,通过代码也可以控制模型旋转。这个过程所用到的代码并不多。

那么需要解决的问题是,Cocos 3.x如何创建脚本?这个过程步骤是如何?

如何挂载脚本?

如何旋转?

1 创建一个脚本

首选在资源管理器里面,创建一个文件夹script,将新建的脚本创建在其文件夹下。如创建一个叫Monkey.ts的脚本。如下图1

1.1 创建一个脚本

1.2 鼠标右键创建脚本

新建脚本如下,该脚本会继承Component组件类。这里用到语法是TypeScript。

备注:Typescript语法:可以到微软官方查看其写法,https://www.typescriptlang.org/

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc'; const { ccclass, property } = _decorator; @ccclass('Monkey') export class Monkey extends Component { start() { } update(deltaTime: number) { } } 2 编写旋转逻辑

模型点击节点的时候可以观察到其坐标系,Y轴是朝上,Z轴正对着我们,X轴在右边。这个时候要围绕Y轴去旋转。要让它产生旋转,就是在每一帧里面对其角度递增。我们将代码写到update方法里面,使产生每一帧刷新。

Rotation属性

猴头模型

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc'; const { ccclass, property } = _decorator; @ccclass('Monkey') export class Monkey extends Component { private angle:number = 0 //角值 start() { } update(deltaTime: number) { this.angle ; // 不断递增角度 if(this.angle > 360) { this.angle = 0; } let vec3 = new Vec3(0, this.angle, 0); //针对Y轴旋转 this.node.eulerAngles = vec3;//赋值欧拉角 } } 3 挂载脚本到其节点身上

要使脚本产生效果,这个时候就要对脚本绑定挂载。鼠标拖住资源管理器的脚本拖拽到对应其节点属性面板。绑定后这个脚本就能成功挂载到脚本身上。

绑定脚本到节点

同理,将其他节点也挂载这个脚本,重复上述的操作。完成后进行预览效果。

绑定脚本

旋转的猴头

以上经过脚本后,猴头和骑士就能一起旋转了。若在此刻想打包window给朋友看,这个时候就可以直接打包window平台来实现桌面化平台的支持。

4 不同方向旋转的实现

要其产生不同的方向,只需要修改不同轴的数值就可以实现其效果。如修改X轴的旋转。让猴头基于X轴方向进行旋转。产生效果和基于Y轴并不会一样。

基于X轴旋转

import { _decorator, Component, Node, math, Vec3, Quat } from 'cc'; const { ccclass, property } = _decorator; @ccclass('Monkey') export class Monkey extends Component { private angle:number = 0 start() { } update(deltaTime: number) { this.angle ; if(this.angle > 360) { this.angle = 0; } let vec3 = new Vec3(this.angle, 0, 0); this.node.eulerAngles = vec3; } } 5 小结

基于TypeScript 的语法,通过挂载脚本到节点中去产生旋转效果,这个过程操作十分便利。当你写好的脚本也可以分享给有需要的朋友来展示你要的效果。由于第一次编写,在书写过程出现很多不熟悉情况。查看官方的API是一个不错的选择。

语法需要到微软官方进行查看 https://www.typescriptlang.org/

typeScript官方截图

cocos 文档APi 可以到https://docs.cocos.com/creator/api/zh/ 官方进行查看

Cocos 官网API

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved