CocosCreator 3.x 实现角色移动与加载时动态屏幕边缘检测

效果

思路

1. 通过cc.view全局单例 View 对象获取屏幕尺寸
2. 加载时根据屏幕尺寸动态计算上下左右边缘

代码实现

import { _decorator, Component, EventTouch, Input, input, Node, view } from 'cc';
const { ccclass, property } = _decorator;/*** 玩家控制脚本*/
@ccclass('Player')
export class Player extends Component {/** 左边界 */private leftBound: number;/** 右边界 */private rightBound: number;/** 上边界 */private topBound: number;/** 下边界 */private bottomBound: number;protected onLoad(): void {// 初始化边界this.initBound();// 监听触摸移动事件input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);}/*** 初始化边界*/initBound() {/** 获取背景尺寸 */let height = view.getVisibleSize().height;let width = view.getVisibleSize().width;/** 设置边界 */this.leftBound = -width / 2;this.rightBound = width / 2;this.bottomBound = -height / 2;this.topBound = height / 2;}protected onDestroy(): void {// 取消监听触摸移动事件input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);}/*** 触摸移动回调* @param event 触摸事件*/onTouchMove(event: EventTouch) {// 计算出移动位置let posX = this.node.getPosition().x + event.getDeltaX();let posY = this.node.getPosition().y + event.getDeltaY();// 水平边界限制posX = Math.max(this.leftBound, posX);posX = Math.min(this.rightBound, posX);// 垂直边界限制posY = Math.max(this.bottomBound, posY);posY = Math.min(this.topBound, posY);// 更新位置this.node.setPosition(posX, posY);}
}