CocosCreator3.8
获取组件
修改组件上的参数
/*
* @Author: Coat [email protected]
* @Date: 2024-01-24 17:06:09
* @LastEditors: Coat [email protected]
* @LastEditTime: 2024-01-25 13:22:26
* @FilePath: \NewProject\assets\Test.ts
*/
import { _decorator, Component, Label, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Test')
export class Test extends Component {
start() {
console.log(this); //当前脚本
console.log(this.node); //归属的节点
//获得组件
const a = this.node.getComponent(Label)
console.log(a);
//修改组件参数
a.string='Hello Word'
}
update(deltaTime: number) {
}
}
// deltaTime// 电脑刷新率分之1 统一设备间的效果
旋转位移缩放
位移三种方法
// this.node.setPosition(300,0)
// //重载接收不同的入参 不同的效果
// 推荐这种方法
// const p = new Vec3(300,0,0)
// this.node.setPosition(p)
// const p = new Vec3()
// p.x+=300
//this.node.setPosition(p)
const p = this.node.getPosition()
p.x+=300
this.node.setPosition(p)
//一波性能优化
curpos= new Vec3()
// curpos = v3()
start() {
}
update(deltaTime: number) {
// deltaTime// 电脑刷新率分之1 统一设备间的效果
this.node.getPosition(this.curpos)
this.curpos.x+=100*deltaTime
this.node.setPosition(this.curpos)
}
旋转
console.log(this.node.scale);//3d
// angle 旋转2d
this.node.angle +=1
触摸
start() {
// 几个参数 时间类型 回调方法,第三个参数执行上述方法环境
this.node.on(Node.EventType.TOUCH_START,(event:EventTouch)=>{
//回调方法
const uiPos = event.getUILocation()
console.log(uiPos);
},this)
}
update(deltaTime: number) {
}
打印的event
打印的uiPos 以左下角为0,0
触摸的所有事件
/*
* @Author: Coat [email protected]
* @Date: 2024-01-24 17:06:09
* @LastEditors: Coat [email protected]
* @LastEditTime: 2024-01-25 15:59:44
* @FilePath: \NewProject\assets\Test.ts
*/
import { _decorator, Component, EventTouch, Label, log, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Test')
export class Test extends Component {
start() {
// 几个参数 时间类型 回调方法,第三个参数执行上述方法环境
this.node.on(Node.EventType.TOUCH_START,this.onTouchStart,this)
this.node.on(Node.EventType.TOUCH_MOVE,this.onTouchMove,this)
this.node.on(Node.EventType.TOUCH_END,this.onTouchEnd,this)
this.node.on(Node.EventType.TOUCH_CANCEL,this.onTouchCancel,this)
}
onTouchStart(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos,'onTouchStart');
}
onTouchMove(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchMove');
}
// 里面结束
onTouchEnd(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchEnd');
}
// 外面结束
onTouchCancel(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchCancel');
}
update(deltaTime: number) {
}
}
例如按下缩放 抬起恢复this.node.setScale(0.5,0.5)
onTouchStart(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos,'onTouchStart');
this.node.setScale(0.5,0.5)
}
onTouchMove(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchMove');
}
// 里面结束
onTouchEnd(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchEnd');
this.node.setScale(1,1)
}
设备像素比
高端手机用900展示一个圆 低端用100个像素
不加UI相对于屏幕的高度
onTouchMove(event:EventTouch){
const uiPos = event.getUILocation()
console.log(uiPos);
console.log(uiPos,'onTouchMove');
// 如果是2k的就不会跟手
// const dx =event.getDeltaX()
// const dy =event.getDeltaY()
// 正常使用带UI的
const delta = event.getUIDelta()
const dx =delta.x
const dy =delta.y
let x = this.node.position.x
let y = this.node.position.y
this.node.setPosition(x + dx,y + dy)
}
获取节点transform
onTouchStart(event:EventTouch){
const uiPos = event.getUILocation()
//获取当前节点下的坐标 也就是图片
const tra = this.node.getComponent(UITransform)
const nodePos = tra.convertToNodeSpaceAR(v3(uiPos.x,uiPos.y,0))
console.log(nodePos,'nodePos');//相对图片中点
// if(nodePos.x>0){
// this.node.setPosition(this.node.position.x+50,this.node.position.y)
// }else{
// this.node.setPosition(this.node.position.x-50,this.node.position.y)
// }
// 第二种简便写法
const dx = nodePos.x > 0 ? 50 : -50
this.node.setPosition(this.node.position.x + dx ,this.node.position.y)
}
输入事件
import { _decorator,KeyCode,input, Input,Component, EventTouch, Label, log, Node, UITransform, v3, Vec3, EventKeyboard } from 'cc';
// 输入事件
input.on(Input.EventType.KEY_DOWN,this.onKeyDown,this)
onKeyDown(event:EventKeyboard){
//按 w 的时候会是true
console.log(event.keyCode === KeyCode.KEY_W);
}