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

伪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素材调整@property(cc.Graphics)map: cc.Graphics = null;@property(cc.Node)boxRoot: cc.Node = null;@property(cc.Node)boxNode: cc.Node = null;maxLayer = 0;   //最大高度gridsList = nullonLoad() {this.gridsList = null;this.maxLayer = 0;this.initMap();}protected start(): void {let boxArr = ["1,1|1,2|1,3|2,1|2,2|3,1", "1,1|1,2|2,1", "1,1"]//行列不超过mapW，mapHthis.init(boxArr)}init(boxArr) {this.creatSceneBox(boxArr)}/*** 初始化格子二维数组*/initMap() {this.gridsList = new Array(this.mapW);for (let col = 0; col < this.gridsList.length; col++) {this.gridsList[col] = new Array(this.mapH);}this.map.clear();for (let col = 0; col < this.mapW; col++) {for (let row = 0; row < this.mapH; row++) {this.addGrid(col, row, 0);}}this.drawBlock()}addGrid(x, y, topLayer) {let grid = {x: 0,y: 0,zArr: [0],topLayer: 0}grid.x = x;grid.y = y;grid.topLayer = topLayer;this.gridsList[x][y] = grid;}/*** 绘制底部地图线*/drawBlock() {for (let col = 0; col <= this.mapW; col++) {this.drawLine(cc.v2(col - 0.5, -0.5), cc.v2(col - 0.5, this.mapH - 0.5));}for (let row = 0; row <= this.mapH; row++) {this.drawLine(cc.v2(0 - 0.5, row - 0.5), cc.v2(this.mapW - 0.5, row - 0.5));}}creatSceneBox(boxArr = []) {let maxData = this.getMaxWidth(boxArr)this.boxRoot.children.forEach((value) => { value.active = false })let index = 0;for (let i = 0; i < boxArr.length; i++) {const element = boxArr[i];index = this.creatBox(element, this.boxRoot, i, index, maxData);}}/*** 获取方块位置范围* @param boxArr * @returns */getMaxWidth(boxArr) {let minX = 999let maxX = -999let minZ = 999let maxZ = -999for (let i = 0; i < boxArr.length; i++) {const element1 = boxArr[i];const element = element1.split("|")for (let j = 0; j < element.length; j++) {const element2 = element[j];let pos = element2.split(",")let x = (Number(pos[0]) - 1) || 0let z = (Number(pos[1]) - 1) || 0if (x < minX) minX = xif (x > maxX) maxX = xif (z < minZ) minZ = zif (z > maxZ) maxZ = z}}let middleX = Math.floor((maxX - minX) / 2);let middleY = Math.floor((maxX - minX) / 2);let maxData = { minX, maxX, minZ, maxZ, middleX, middleY }return maxData;}/*** 创建方块初始位置* @param boxString * @param parent * @param layer * @param index * @param maxData * @returns */creatBox(boxString = "", parent: cc.Node, layer, index, maxData) {let boxArr = boxString.split("|")for (let i = 0; i < boxArr.length; i++) {const element = boxArr[i];let colRowPos = element.split(",")let x = Number(colRowPos[0]) - 1 + Math.floor(this.mapW / 2) - maxData.middleXlet y = this.mapH - (Number(colRowPos[1]) + Math.floor(this.mapH / 2)) - maxData.middleYlet box = parent.children[index] || cc.instantiate(this.boxNode)box.parent = parent;let newPos = cc.v3(x, y, layer)let pos = this.getPos(newPos)box.name = `box${pos[0]}_${pos[i]}_layer`box.setPosition(pos)box.zIndex = x * 10 - y * 100 + layer;box.active = truebox.getComponent(dragItem).init(newPos)this.addBox(newPos)index++}return index;}/*** 添加方块到地图数组* @param newPos * @returns */addBox(newPos) {const { x, y, z } = newPos;if (!this.gridsList[x] || !this.gridsList[x][y]) returnlet zArr = this.gridsList[x][y].zArr;if (zArr[z]) return;zArr[z] = 1if (!zArr[z + 1]) zArr[z + 1] = 0if (z + 1 > this.maxLayer) this.maxLayer = z + 1;this.logMap()}/*** 从地图数组移除方块* @param newPos * @returns */removeBox(newPos) {const { x, y } = newPos;if (!this.gridsList[x] || !this.gridsList[x][y]) returnlet zArr = this.gridsList[x][y].zArrzArr[newPos.z] = 0;let newArr = []for (let i = zArr.length - 1; i >= 0; i--) {const element = zArr[i];if (!newArr.length && !element) continue;if (!newArr.length && element) {newArr.unshift(0)}newArr.unshift(element || 0)}if (!newArr.length) {newArr.unshift(0)}this.gridsList[x][y].zArr = newArrthis.gridsList[x][y].topLayer = newArr.lengthif (newArr.length > this.maxLayer) this.maxLayer = newArr.length;this.logMap()}/*** 打印当前方块数组*/logMap() {let str = ""for (let row = this.mapH - 1; row >= 0; row--) {for (let col = 0; col < this.mapW; col++) {for (let i = 0; i <= this.maxLayer; i++) {let box = this.gridsList[col][row].zArr[i] || "0"str += box}str += " "}str += ("\n")}// cc.log(str)}/*** 获取当前位置周围是否有方块* @param pos * @returns */getSideBox(pos) {const { x, y, z } = posif (!this.gridsList[x] || !this.gridsList[y]) return falselet zArr = this.gridsList[x][y].zArrif (zArr[z - 1] || zArr[z + 1]) return truelet chsecArr = [{ x: 0, y: 1 }, { x: 0, y: -1 }, { x: -1, y: 0 }, { x: 1, y: 0 }]let canput = falsefor (let index = 0; index < chsecArr.length; index++) {const element = chsecArr[index];if (!this.gridsList[x + element.x] || !this.gridsList[x + element.x][y + element.y]) {continue;}let zArr = this.gridsList[x + element.x][y + element.y].zArrif (zArr[z]) {canput = true;break;}}return canput;}/*** 根据方块位置，获取需要放置到的位置* @param node * @param isInit * @param colRowPos * @returns */getPutPos(node, isInit = true, colRowPos) {let worldPos = node.convertToWorldSpaceAR(cc.v2(0, 0));let boxPos = this.node.convertToNodeSpaceAR(worldPos);let minDis = 9999;let endPos = boxPos;let endRow = colRowPos.y;let endCol = colRowPos.x;let layer = colRowPos.z;for (let col = 0; col < this.mapW; col++) {for (let row = 0; row < this.mapH; row++) {let data = this.gridsList[col][row]let have = falsefor (let i = 0; i <= this.maxLayer; i++) {const element = data.zArr[i];if (element) have = true}for (let i = 0; i <= this.maxLayer; i++) {const element = data.zArr[i];if (element) continue;if (!isInit && i > 0) {let canPut = this.getSideBox(cc.v3(col, row, i))if (!canPut) continue;}let pos = this.getPos(cc.v3(col, row, i));let distance = pos.sub(boxPos).mag()if (!endPos || distance < minDis) {minDis = distance;endPos = pos;endRow = row;endCol = col;layer = i;}}}}return { endPos, col: endCol, row: endRow, layer }}/*** 根据方块格子下标获取2d坐标* @param pos 方块格子位置 cc.v3(x:列，y：行，z:第几层,最下层为0)* @returns 位置position*/getPos(pos) {const { x, y, z } = poslet radian = (Math.PI / 180 * (this.boxAngel));let posX = (x - this.mapW / 2) * (this._gridW) + y * this._gridH * Math.tan(radian);let posY = (y - this.mapH / 2) * (this._gridH) + z * this._layerH;return cc.v3(posX, posY)}/*** 画线* @param start_col_cow * @param end_col_cow * @param color * @param width */drawLine(start_col_cow, end_col_cow, color = cc.Color.GRAY, width = 2) {this.map.strokeColor = color;this.map.strokeColor.a = 80;//添加透明度let pos1 = this.getPos(start_col_cow)let pos2 = this.getPos(end_col_cow)this.map.lineWidth = width;this.map.moveTo(pos1.x, pos1.y);this.map.lineTo(pos2.x, pos2.y);this.map.stroke();}/*** 画点* @param col * @param row * @param color */drawPoint(col, row, color = new cc.Color().fromHEX("#FF000033")) {this.map.fillColor = color;this.map.fillColor.a = 20;//添加透明度let pos = this.getPos(cc.v2(col, row))this.map.fillRect(pos.x, pos.y, 10, 10);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/45526.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MPPT概念

MPPT概念

Maximum Power Point Tracking (MPPT)代表“最大功率点跟踪”&#xff0c;是一种智能型电子控制系统&#xff0c;可以追踪连接在系统上的太阳能电池板的最大功率点&#xff08;MPP&#xff09;&#xff0c;它的主要作用是最大化发电设备的输出功率并将其输送到电网或电池存储系…
阅读更多...
【web]-信息收集-空白页面

【web]-信息收集-空白页面

打开是一张图 查看源码&#xff0c;发现就一个链接是有用信息&#xff0c;用目录扫描工具&#xff0c;没有发现有价值的信息。 F12&#xff0c;查看请求和相应信息&#xff0c;在响应头中发现了信息。 还有一个小技巧&#xff1a;点击手机图标&#xff0c;可以切换到手机模式中…
阅读更多...
javaweb学习day2《JavaScript篇》--JavaScript全套基础知识点详解（附全套源代码及其案例逐语句解析）一万七千字全方位概括

javaweb学习day2《JavaScript篇》--JavaScript全套基础知识点详解（附全套源代码及其案例逐语句解析）一万七千字全方位概括

一、前言 不知道大家有没有一同跟随小编坚持下去，这是javaweb学习的第二天，相信大家已经感觉到有些难度了，因为主要学习的是后端和框架，所以js和HTML只是简单的过一遍。这些基础的知识点应该总结的算是十分全面的了。相信对于学习前端的小伙伴们也是一味很好的良药。 黑马…
阅读更多...
Spring相关的面试题

Spring相关的面试题

1、spring中bean的生命周期 spring bean的生命周期主要分为三大类 &#xff0c;分别是创建-》使用-〉销毁。 在三大类下面又可以分为5个小类。分别是 实列化-〉初始化-》组册destruction回调-〉使用-〉销毁 这这其中 初始化也可以细分为 设置属性值&#xff0c;前置处理&#…
阅读更多...
RAG的上限在哪里？边界在哪里？

RAG的上限在哪里？边界在哪里？

随着大模型的火热&#xff0c;RAG也重出江湖&#xff0c;成为AI产品中最火热的成员之一。特别是2024年到现在&#xff0c;越来越多的RAG产品出现在gitlib 上。 世人皆知RAG&#xff0c;唯独不知RAG的能力边界。 RAG用一句话&#xff1a;入门&#xff08;demo跑通整个流程&#…
阅读更多...
UDP协议介绍和作用

UDP协议介绍和作用

什么是UDP? UDP是User Datagram Protocol的简称&#xff0c;中文名是用户数据报协议&#xff0c;是OSI参考模型中的传输层协议&#xff0c;它是一种无连接的传输层协议&#xff0c;提供面向事务的简单不可靠信息传送服务。 UDP的正式规范是IETF RFC768。UDP在IP报文的协议号是…
阅读更多...
手撸俄罗斯方块（四）——渲染与交互

手撸俄罗斯方块（四）——渲染与交互

手撸俄罗斯方块&#xff08;四&#xff09;——渲染与交互 如何渲染游戏界面 我们知道&#xff0c;当我们看到页面先呈现图像时&#xff0c;实际上看到的是一张图片&#xff0c;多张图片按照一定的刷新频率进行切换&#xff0c;则变成了动态的视频。当刷新频率超过24Hz时&…
阅读更多...
Spring设计模式

Spring设计模式

Spring框架在设计和实现时使用了许多设计模式&#xff0c;这些设计模式帮助Spring提供了灵活、可扩展和松耦合的架构。以下是Spring中一些常见的设计模式&#xff1a; 1. 单例模式&#xff08;Singleton Pattern&#xff09;: - Spring的默认作用域是singleton&#xff0c;…
阅读更多...
DWG文件发布至IIS后无法下载和预览解决办法

DWG文件发布至IIS后无法下载和预览解决办法

问题描述 DWG文件发布至IIS后无法下载和预览 原因分析&#xff1a; iis里面需要添加扩展 解决方案&#xff1a; 在服务器端IS属性的HTTP头下的MIME内容中添加扩展名“.dwg” MIME类型填入application/acad
阅读更多...
「AIGC」TDSQL技术详解

「AIGC」TDSQL技术详解

创建一个完整的TDSQL实例涉及到多个步骤，包括数据库的创建、配置、连接以及基本的数据库操作。请注意，以下示例代码是模拟操作，实际使用时需要根据TDSQL的具体环境和要求进行调整。 步骤1: 创建TDSQL实例 在TDSQL的官网上，进入产品控制台，选择数据库服务器所在的地域，以…
阅读更多...
29.PLL（锁相环）-IP核的调用

29.PLL（锁相环）-IP核的调用

&#xff08;1&#xff09;PLL IP核的简介&#xff1a; Phase Locked Loop&#xff0c;即锁相环&#xff0c;是最常用的IP核之一&#xff0c;其性能强大&#xff0c;可以对输入到FPGA的时钟信号进行任意分频、倍频、相位调整、占空比调整&#xff0c;从而输出一个期望时钟。锁相…
阅读更多...
JVM学习（day1）

JVM学习（day1）

JVM 运行时数据区 线程共享&#xff1a;方法区、堆 线程独享&#xff08;与个体“同生共死”&#xff09;&#xff1a;虚拟机栈、本地方法栈、程序计数器 程序计数器 作用&#xff1a;记录下次要执行的代码行的行号 特点&#xff1a;为一个没有OOM&#xff08;内存溢出&a…
阅读更多...
C语言：指针详解（4）

C语言：指针详解（4）

作者本人由于大一下学期事情繁多&#xff0c;大部分时间都在备赛&#xff0c;没有时间进行博客撰写&#xff0c;如今已经到了暑假时间&#xff0c;作者将抓紧每一天的时间进行编程语言的学习&#xff0c;由于目前作者已经进行到了C的学习&#xff0c;C语言阶段的学习与初阶数据…
阅读更多...
Tensorflow入门实战 T08-Vgg16网络进行猫狗识别

Tensorflow入门实战 T08-Vgg16网络进行猫狗识别

目录 1、前言 2、代码 3、运行结果 4、反思 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 1、前言 本周学习内容为&#xff0c;采用自己设置的vgg-16网络进行猫狗识别&#xff0c;并非官网提供的…
阅读更多...
Three 平面（Plane）和 三维几何线段（Line3）

Three 平面（Plane）和 三维几何线段（Line3）

平面&#xff08;Plane&#xff09; 在三维空间中无限延伸的二维平面&#xff0c;平面方程用单位长度的法向量和常数表示为海塞法向量Hessian normal form形式。 构造器&#xff08;Constructor&#xff09; Plane( normal : Vector3, constant : Float ) normal - (可选参…
阅读更多...
【公益案例展】亚运天穹——践行亚运理念，筑牢安全防线

【公益案例展】亚运天穹——践行亚运理念，筑牢安全防线

‍ 安恒信息公益案例 本项目案例由安恒信息投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数据智能产业最具社会责任感企业》榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 杭州第19届亚运会是中国第三次举办亚洲最高规格的国际综合…
阅读更多...
217.贪心算法：加油站(力扣)

217.贪心算法：加油站(力扣)

代码解决 class Solution { public:int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {int curtotol 0; // 当前累积油量int tatol 0; // 总的油量减去总的花费油量int start 0; // 起始加油站的索引// 遍历所有加油站for (int i 0; i &…
阅读更多...
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？

AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？

ajax 的全称 Asynchronous JavaScript and XML (异步 JavaScript 和 XML)。 AJAX是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象&#xff0c;是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页 面不刷新的…
阅读更多...
try catch 解决大问题

try catch 解决大问题

项目开发中遇到一个棘手的bug&#xff0c;react前端项目独自运行时一切正常&#xff0c;但是把项目集成到使用wujie的大平台微前端项目中之后&#xff0c;突然有个地方无故报错&#xff0c;导致程序运行停止&#xff0c;后续的方法不再执行。报错如下&#xff1a; DOMExceptio…
阅读更多...
5款文案生成神器，自动一键生成原创文案

5款文案生成神器，自动一键生成原创文案

文案在我们的生活中随处可见&#xff0c;好的文案内容不仅可以为企业带来销售转化&#xff0c;而且还能提升品牌的影响力&#xff0c;因此文案的重要性可想而知&#xff0c;对于文案创作者来说&#xff0c;写作好的文案不是轻松容易的事&#xff0c;但如果把这个任务交给文案生…
阅读更多...
最新文章

Copyright @ 2022~2023