在不经过编码基础上,能够通过编辑器的动画功能实现旋转。那么同理,通过代码也可以控制模型旋转。这个过程所用到的代码并不多。
那么需要解决的问题是,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