CocosCreator3.8第一节旋转位移触摸

原创已于 2024-01-26 13:30:35 修改 · 847 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d

于 2024-01-26 09:52:31 首次发布

文章详细描述了在使用CC框架开发时如何获取和修改组件参数，以及处理触摸事件如开始、移动、结束和取消的逻辑，包括位移、缩放和设备像素比调整。还涉及了输入事件的监听和处理。

获取组件

修改组件上的参数

/*
 * @Author: Coat 654264424@qq.com
 * @Date: 2024-01-24 17:06:09
 * @LastEditors: Coat 654264424@qq.com
 * @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
event打印

打印的uiPos 以左下角为0,0
uiPos

触摸的所有事件

/*
 * @Author: Coat 654264424@qq.com
 * @Date: 2024-01-24 17:06:09
 * @LastEditors: Coat 654264424@qq.com
 * @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);
        
    }