当前位置：首页 > news >正文

【cocos creator】2.x，伪3d拖拽，45度视角，60度视角，房屋装扮

news 2025/7/15 0:20:35

伪3d拖拽，45度视角,60度视角
工程下载：（待审核）
https://download.csdn.net/download/K86338236/89530812

在这里插入图片描述

dragItem2.t s


import mapCreat2 from "./mapCreat2";const { ccclass, property } = cc._decorator;
/*** 拖拽类，挂在要拖拽的节点上*/
@ccclass
export default class dragItem2 extends cc.Component {@property(mapCreat2)mapCreat: mapCreat2 = null;private _originPos: cc.Vec2;private _startPos: any;oginPos: any;colRowPos = cc.v3(0, 0, 0)onLoad() {this.oginPos = this.node.position;this.regiestNodeEvent(this.node.children[0] || this.node);}init(pos) {this.colRowPos = pos;}/** 节点注册事件 */regiestNodeEvent(node: cc.Node) {if (!node) return;node.on(cc.Node.EventType.TOUCH_START, this.touchStartEvent, this);node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);node.on(cc.Node.EventType.TOUCH_END, this.touchEndEvent, this);node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchEndEvent, this);}touchStartEvent(event) {console.log('touch start--------')this._originPos = this.node.getPosition();this._startPos = event.getLocation();this.node.zIndex = 9999;this.mapCreat.removeBox(this.colRowPos)}touchMoveEvent(event) {let pos = event.getLocation();if (!this._startPos) {return;}let offset_x = pos.x - this._startPos.x;let offset_y = pos.y - this._startPos.y;this.node.x = this._originPos.x + offset_x;this.node.y = this._originPos.y + offset_y;}touchEndEvent(event) {this._startPos = null;this.setPos(false)}setPos(isInit?) {const { endPos, col, row, layer } = this.mapCreat.getPutPos(this.node, isInit, this.colRowPos)if (!endPos) returnthis.node.position = endPos;this.colRowPos = cc.v3(col, row, layer);this.mapCreat.addBox(cc.v3(col, row, layer))this.node.zIndex = -col * 10 - row * 10 + layer;}
}

mapCreat2.ts

import dragItem from "./dragItem";const { ccclass, property } = cc._decorator;@ccclass
export default class mapCreat extends cc.Component {//可修改mapH = 10;     // 地图纵向格子数量mapW = 10;     // 地图横向格子数量_layerH = 64.3;     // 地图单元格子高度,根据ui素材调整_gridW = 64.3;   // 地图单元格子长度,根据ui素材调整_gridH = 19;   // 地图单元格子宽度,根据ui素材调整boxAngel = 52;//地图伪3d角度,根据ui素材调整