【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，一经查实，立即删除！

相关文章

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

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

打开是一张图 查看源码&#xff0c;发现就一个链接是有用信息&#xff0c;用目录扫描工具&#xff0c;没有发现有价值的信息。 F12&#xff0c;查看请求和相应信息&#xff0c;在响应头中发现了信息。 还有一个小技巧&#xff1a;点击手机图标&#xff0c;可以切换到手机模式中…
阅读更多...
Spring相关的面试题

Spring相关的面试题

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

UDP协议介绍和作用

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

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

手撸俄罗斯方块&#xff08;四&#xff09;——渲染与交互 如何渲染游戏界面 我们知道&#xff0c;当我们看到页面先呈现图像时&#xff0c;实际上看到的是一张图片&#xff0c;多张图片按照一定的刷新频率进行切换&#xff0c;则变成了动态的视频。当刷新频率超过24Hz时&…
阅读更多...
DWG文件发布至IIS后无法下载和预览解决办法

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

问题描述 DWG文件发布至IIS后无法下载和预览 原因分析&#xff1a; iis里面需要添加扩展 解决方案&#xff1a; 在服务器端IS属性的HTTP头下的MIME内容中添加扩展名“.dwg” MIME类型填入application/acad
阅读更多...
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;并非官网提供的…
阅读更多...
【公益案例展】亚运天穹——践行亚运理念，筑牢安全防线

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

‍ 安恒信息公益案例 本项目案例由安恒信息投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《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 &…
阅读更多...
5款文案生成神器，自动一键生成原创文案

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

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

Python中的null是什么？

在知乎上遇到一个问题&#xff0c;说&#xff1a;计算机中的「null」怎么读&#xff1f; null正确的发音是/n^l/&#xff0c;有点类似四声‘纳儿’&#xff0c;在计算机中null是一种类型&#xff0c;代表空字符&#xff0c;没有与任何一个值绑定并且存储空间也没有存储值。 P…
阅读更多...
MySQL CONCAT函数的简单使用

MySQL CONCAT函数的简单使用

CONCAT函数用于将mysql中查询多列的值拼成一列显示&#xff0c; 使用示例&#xff1a; SELECT CONCAT(attr_name,"&#xff1a;",attr_value) FROM pms_sku_sale_attr_value WHERE sku_id1; 上面SQL语句使用CONCAT函数将attr_name、attr_value两列的值拼成一列&am…
阅读更多...
动态sql 单选变多选

动态sql 单选变多选

实体类 添加数组存储值 private ArrayList tssjfjList; <!-- <if test"tssjfj ! null and tssjfj ! ">and tssjfj #{tssjfj}</if>--><if test"tssjfjList ! null and tssjfjList.size() > 0">AND tssjfj IN<fo…
阅读更多...
JeecgBoot 前端 vue3 项目，配置项目多页面入口

JeecgBoot 前端 vue3 项目，配置项目多页面入口

前端 vue3配置项目多页面入口 1.项目根目录新建home.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…
阅读更多...
Rust Hello

Rust Hello

首先还是安装&#xff1a; 一定要换源&#xff0c;否则真的太慢了。 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh 就是~/.cargo/config [source.crates-io] # 替换成你偏好的镜像源 replace-with tuna# 清华大学 5mb [source.tuna] registry "htt…
阅读更多...
数字信号处理教程（4）—— 离散傅里叶变换DFT

数字信号处理教程（4）—— 离散傅里叶变换DFT

今天继续数字信号处理的学习&#xff0c;本次我们将来聊聊离散傅里叶变换DFT(Discrete Fourier Transform)。DFT是数字信号处理领域中应 用最为广泛的离散变换。DFT将一个序列x(n)映射到频率域。DFT 的许多性质都与对模拟信号进行傅里叶变换的性质相同。里面包含着大量的算法值…
阅读更多...
论文研读：ViT-V-Net—用于无监督3D医学图像配准的Vision Transformer

论文研读：ViT-V-Net—用于无监督3D医学图像配准的Vision Transformer

目录 摘要 介绍 方法 VIT-V-Net体系结构 损失函数 图像相似性度量 变形场正则化 结果与讨论 摘要 在过去的十年里&#xff0c;卷积神经网络(ConvNets)在各种医学成像应用中占据了主导地位并取得了最先进的性能。然而&#xff0c;由于缺乏对图像中远程空间关系的理解&a…
阅读更多...
Gitlab CI/CD介绍

Gitlab CI/CD介绍

基本概念 GitLab CI/CD&#xff08;持续集成/持续部署&#xff09;流水线是GitLab平台提供的一项强大功能&#xff0c;旨在通过自动化构建、测试和部署过程&#xff0c;提高开发团队的效率和软件发布的质量。 CI&#xff08;Continuous Integration&#xff09;&#xff1a;持续…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023