问题标签 [hexagonal-tiles]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
257 浏览

javascript - 逐像素跟踪六边形的边缘

要使用 HTML5 画布在 Javascript 中创建动画,我首先需要能够描述围绕六边形形状的逐点路径。我已经有了每个顶点的 x/y 坐标。我不知道我将在边缘行驶的哪个方向,所以任何解决方案都应该能够在任何一个方向上工作。

六边形的半径(因此每边)为 20 像素。我需要为每一侧生成一组 20 个点,用于映射该路径中每个像素的 x 和 y 位置。这对于直线来说显然很容易,其中每个像素每步递增 1,而另一个轴保持静止。对于有角度的边,我无法获得绘制点所需的三角函数。

我相当肯定这是微不足道的,但希望能在我的脑海中得到一些帮助。

0 投票
2 回答
5287 浏览

c++ - 在六边形网格上:在选择点的给定半径内选择图块。

我正在使用六角瓷砖地图开发一个简单的 2D 棋盘游戏,我已经阅读了几篇关于如何在屏幕上绘制六边形以及如何管理的文章(包括 gamedev 的,每次出现关于六角瓷砖的问题时都会链接运动(尽管我以前已经做过很多运动)。我的主要问题是根据给定的半径找到相邻的瓷砖。

这就是我的地图系统的工作方式:

我正在努力解决的事实是,我不能通过使用“选择”相邻的图块,for(x-range;x+range;x++); for(y-range;y+range;y++);因为它选择了不需要的图块(在我给出的示例中,选择 (1,1) 图块并给出 1 的范围也会给出我是 (3,0) 瓦片(我实际需要的是 (0,1)(0,2)(1,0)(1,2)(2,1)(2,2) ),这有点与瓷砖相邻(因为数组的结构方式),但这并不是我真正想要选择的。我可以暴力破解它,但这不会很漂亮,并且可能不会涵盖“选择半径事物”的各个方面'。

有人可以在这里指出我正确的方向吗?

0 投票
7 回答
5884 浏览

c++ - 六边形网格上 2 个六边形之间的距离

我有一个六边形网格:

六边形网格

使用模板类型坐标 T。如何计算两个六边形之间的距离?

例如:

距离((3,3),(5,5))= 3

距离((1,2),(1,4))= 2

0 投票
1 回答
2337 浏览

java - LibGDX 实现可滚动的 HexMap

我目前正在尝试使用 LibGDX 实现可滚动的十六进制图。该框架有一些不错的地图 api,但它们似乎对我想做的事情毫无用处:(

我想要的地图视图示例。粉色矩形代表屏幕上实际可见的区域,而周围的一切都将被裁剪

十六进制图

这是我的地图需要能够做什么的基本概要:

  1. 地图需要是屏幕上的 Actor,可以简单地在舞台上绘制并且是一次性的。(已经有了)

  2. 地图需要可滚动。这意味着需要注册点击和拖动。

  3. 各个地图图块必须是可点击的。单击一个图块时,我想知道它是什么图块。(编辑:我目前可以注册演员的点击,但我必须手动计算实际点击的图块。有没有更好的方法?)

  4. 然后,地图需要知道左上角或右上角显示的是什么图块,以确定从四叉树请求多少图块,以及在屏幕上绘制什么。

  5. 地图数据存储在四叉树中。最后,我必须使用我要绘制的图块调用一个方法,然后四叉树会将图块数据返回给我。

  6. 最后但并非最不重要的一点:应该裁剪超出地图边界的图块(优先级较低)

现在。这是我目前拥有的:

http://pastebin.com/aqjSNPy3(这个类有 200 行长,不会在这里发送垃圾邮件:))

我已经可以在屏幕上绘制地图演员了。它看起来很丑陋,但到底是什么。现在不重要了。我认为现在最重要的事情是注册对图块的点击,弄清楚要显示/请求多少图块,也许用相机做点什么让它可以滚动?

我真的有点没有答案。帮助将不胜感激。非常感谢!

0 投票
1 回答
2024 浏览

css - 仅使用 CSS 绘制六边形形状

我找到了如何仅使用 CSS3(没有 Javascript)绘制三角形和圆形的示例,但我没有找到任何关于如何绘制六边形的示例。可能吗?任何想法?

非常感谢。

0 投票
2 回答
314 浏览

android - 使用六边形图像随机生成图案

好的,我有这些图像:

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

基本上我要做的是创建一个大约 5 到 12 个六边形的“马赛克”,其中大部分大致集中,并且所有线条都汇合。

例如:

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

我知道我可能只是暴力破解它,但是当我为 Android 开发时,我需要一种更快、更高效且处理器密集程度更低的方式来做这件事。

任何人都可以为我提供解决方案,甚至只是指出我正确的方向吗?

0 投票
2 回答
1975 浏览

c# - 嵌套 For 循环 - 在 Unity 中生成卡坦风格的十六进制网格

正如标题所示,我正在尝试使用 C# 在 Unity 中生成程序十六进制网格。

代码有效,但是行是“向后”生成的,这意味着外行包含更多的十六进制数,而内行包含最小的。

这显然是我试图达到的相反效果。我已经把这段代码弄乱了几个小时,我不知道为什么。

有什么想法吗?

0 投票
1 回答
3509 浏览

hexagonal-tiles - Calculate grid distance between hexagons

enter image description here

I have a hexagonal grid like the one in the picture and Im trying to find the easiest way(a formula maybe) to calculate the distance between two hexagons inside this grid. Of course the size of my grid is bigger than this but Im trying to find a formula similar to the Euclidian Distance formula when we calculate the distance between two nodes in a regular grid (with horizontal and vertical axes).

I read for some ways but they all say that Y axis should be 60 degree and then they offer some formulas (Manhattan Distance between tiles in a hexagonal grid). Is there a way to calculate distances using the "Coordinate System" same as in the picture I have uploaded?

0 投票
1 回答
347 浏览

c# - XNA Waterphysics 自上而下的基于十六进制的网格

我正在使用 C#/XNA 开发一个项目,但在自上而下的基于十六进制的网格中创建水物理时遇到了麻烦。

我们在http://www.redblobgames.com/grids/hexagons的帮助下使用 hex-tilemap 。所以我想我可以为水流实现一个算法,但我似乎无法做到正确,而且它似乎非常注重性能。

现在我的问题是,你们中是否有人知道在自上而下的环境中实施水物理的方法,最好是使用基于十六进制的网格。

我查看了几个库,发现了 Smoothed-particle hydrodynamics,但我不确定它是否可以自上而下地实施,而且我似乎无法找到该方向的任何指南。

任何帮助都会很棒,甚至一些指针可能就足够了。

在此先感谢 C. Venhuizen

0 投票
0 回答
272 浏览

r - 在 ggplot2 中改变 stat_binhex() 大小

我正在尝试使用stat_binhex()in ggplot2 在绘图上放置十六进制图块,并且自动设置会根据计数改变 bin 的颜色。也就是说,所有的六角形大小相同,但颜色不同。

我想改变十六进制符号本身的大小!所以有些比其他的大......我也想根据第三个变量改变颜色。我通读了 ggplot2 的文档,但找不到任何方法来做到这一点。该*hexbin*软件包有一个像这样的选项(格子),但它的plot()功能令人抓狂,所以我希望留在 ggplot2 中。任何其他建议也将非常有帮助。

如果您知道 Kirk Goldsberry 在 Grantland 上的 NBA 投篮图表,那与我想用我的数据集完成的非常相似。