问题标签 [isometric]

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 投票
1 回答
1245 浏览

objective-c - Objective-c -> 等距网格

对不起,但我确实有一个与常规有点不同的问题。我想制作一个看起来是等距的游戏显示,所以每个单元格都是:

http://upload.wikimedia.org/wikipedia/commons/4/42/Rhombus_01.png

在形状上。我有点不确定如何有效地做到这一点,虽然我目前正在使用 2D 数组

中继哪些图像定位在哪里。我的主要问题是确保瓷砖最终到达它们应该在的地方。目前我让它们高 45 像素,宽 60 像素。我想问是否有人可以帮我设置一些东西,使关卡屏幕看起来有点等距。谢谢你的时间:)

0 投票
3 回答
1599 浏览

xna - XNA 等距瓷砖渲染问题

我目前正在开发 XNA 游戏原型。我正在尝试实现游戏世界的等距视图(或者它是正交的??我不确定哪个是这个投影的正确术语 - 参见图片)。世界应该是一个由立方体瓷砖组成的基于瓷砖的世界(例如,类似于 Minecraft 的世界),我正在尝试使用精灵将其渲染为 2D。

所以我有一个精灵表,上面有立方体的顶面、正面和侧面(可见面)。我使用 3 个单独的 drawSprite 调用来绘制图块,一个用于顶部,一个用于侧面,一个用于正面,使用源矩形选择我要绘制的面,并使用目标矩形设置屏幕上的位置转换为从 3D 世界坐标转换为等距(正交?)的公式。

(示例精灵 雪碧:)

只要我绘制脸部,这效果很好,但是如果我尝试绘制每个块的精细边缘(根据瓷砖网格),我可以看到我得到一个随机渲染模式,其中一些线条被脸部本身覆盖并且有些不是。

请注意,对于我的世界表示,X 是从左到右,Y 是屏幕内到屏幕外,Z 是从上到下。

在这个例子中,我只使用顶面边缘。这是我得到的(图片):

替代文字

我不明白为什么有些行显示而有些则没有。我使用的渲染代码是(注意在这个例子中我只画了每个维度的最顶层):

我尝试使用不同的方法,在第一个循环之后创建第二个 3 层嵌套 for 循环,所以我在第一个循环中保留顶面绘图,在第二个循环中保留边缘突出显示(我知道,这是低效的,我应该也可能避免为每个图块调用方法来绘制它,但我只是想让它现在工作)。

结果在某种程度上更好,但仍无法按预期工作,缺少顶部行,请参见图片:

替代文字

知道为什么我会遇到这个问题吗?在第一种方法中,它可能是一种 z-fighting,但我正在以精确的顺​​序绘制精灵,所以它们不应该覆盖已经存在的内容吗?

谢谢大家

0 投票
2 回答
6256 浏览

c# - 绘制等轴测图

我一直在用 C# / XNA Game Studio 绘制等距地图,虽然我已经走了很远,但它看起来不太正确,我想知道是否有人可以提供帮助。

这是我绘制地图的代码:

此方法中的代码就像在嵌套的 for 循环中一样,从左到右、从上到下绘制。当 y 值为奇数时,该行将移到合适位置,但它看起来有点偏离。

这是生成的 8x5 地图的输出:

http://imgur.com/xpDRU.png

如您所见,它看起来不太正确,我不确定它是否与我的代码中的数学有关,或者是否与绘制所有内容的顺序有关。我很新到 C# 并使用精灵,所以任何帮助将不胜感激。

因为它可能会有所帮助,所以这里是绘制地图的其他相关代码部分。

整个瓷砖类:

TileRow 类,它包含一排瓷砖。

以及包含所有行的 MapStruct 类

任何有关如何解决此问题的帮助以及有关如何改进代码的建议将不胜感激!

0 投票
5 回答
8024 浏览

math - 如何计算等距矩形/正方形的高度和宽度

我正在写一个等距瓷砖游戏。每块瓷砖的宽度是高度的两倍(w:h = 2:1)。地图中的所有图块大小相同,并且它们的宽度和高度是已知的(TileWidth 和 TileHeight)。

可以有任意数量的列 (>0) 和行 (>0)。

我正在努力想出一个公式来计算完全绘制的地图的宽度和高度。这需要是从最顶部到最底部以及从极左到极右的距离。由于列数和行数可以变化(因此地图并不总是完美的菱形),事实证明这非常困难!

0 投票
1 回答
2579 浏览

math - 鉴于我知道等距菱形地图坐标,我如何确定点击了哪个图块?

我的瓷砖引擎来了。它可以绘制正方形、六边形和等距的交错视点。我苦苦挣扎的地方是等距旋转(或菱形)视点。下面是一张 10x10 菱形地图的图片和用于绘制它的(简化的)代码。瓷砖是 128x64。

http://garrypetett.com/images/forum_images/5%20col%20x%205%20rows.png

我知道这将绘制整个 Tiles() 的内容,而不仅仅是屏幕上可见的内容,但我试图先了解基础知识。

我想不通的是一种将地图上的 x,y 坐标转换为平铺列、行坐标的简单方法。我试图扭转:

要计算给定 x 和 y 的列和行,并得出以下结论:

但这似乎不起作用。谁能想到更好的方法来做到这一点?有没有更好的方法将矩形网格转换为菱形并再次转换回来(鉴于我对矩阵知之甚少......)。

谢谢,

0 投票
1 回答
1322 浏览

ios - 计算等距网格上矩形内包含的单元格

考虑给我们一个等距网格(考虑类似于暗黑破坏神)的瓷砖。我们对网格有一些度量,例如网格高度、网格宽度和图块高度/宽度。考虑这张图片:这个图片

网格的中心单元是 0,0 延伸等北 (+y)、等南(-y)、等东(+x)、等西(-x)。

假设我们要在网格上的任意位置绘制一个矩形。我们没有矩形的等距位置,而是具有网格的正常绘制坐标,其中左上角为 0,0,南为 y+,右为 x+。

如果我们有问题矩形的顶部、左侧、高度、宽度 - 我们如何计算与矩形底部边缘交叉的等单元格数组。

您选择任何语言来证明这一点就足够了。

0 投票
2 回答
3231 浏览

3d - 如何在 CSS 中制作等距 3D

我正在尝试在 CSS 中做 Isometric 3D,这就是我现在所拥有的:http: //jsfiddle.net/AagGZ/1/(webkit 仅用于测试)

我基本上使用 box-shadow,1px x 1px 来创建 3D 效果,这对我来说似乎很 hacky。动画时,我试图添加 1px 的新层,所以动画失败(不是很好)。

有没有更好的方法来实现它?我想到了 CSS Matrix 前后的 CSS 内容并添加了 div。

这应该是对我的项目的一个很好的补充,而不是基本功能,所以我可以接受它在 IE9 下无法工作。

谢谢你的帮助。

编辑:我重新打开了这个问题,因为你需要有一个纯色背景这个事实有点问题,在过滤器之前和之后创建大的“不可见”白色箭头,当你在不同的地方有不同的背景时,它变得非常痛苦网站的一部分或当您想更改悬停在另一个元素上的背景时。我现在要回到我的版本并禁用动画。欢迎任何想法!

0 投票
1 回答
393 浏览

python - 如何在 python GUI 中创建和交互式等距框架(首选 wxpython)

我正在设计一个管道软件,现在它可以在 2D 上运行。我用 wx.paintDC() 实现了一个非常简单的框架,它基本上是这样的:

结果是这个[1]。右侧的按钮用于将部分(管道、阀门等)添加到右侧框架。当您单击按钮时,程序会计算位置并绘制它,因此该框架是非交互式的,您无法单击管道或阀门的段,无法调整其大小等。

这非常容易和简单,但作为一个新程序员,我花了一些时间(并且为此感到自豪)。现在我想改进它,我现在要做的是创建一个类似 3D 的交互式框架,用户可以在其中“通过鼠标”创建管道图,单击它们以更改属性等。

像这些[2] [3]的目标是什么。具有这样的等距背景[4]

我想这并不容易(但一开始我所做的对我来说也不是),但我决定继续尝试和学习以实现它。我想从你们那里得到方向..

现在我不知道从哪里开始,想知道“这可能在 wx 上吗?” , “我应该使用 openGL 还是什么?” . 我需要你指出正确的方向。

这可以仅用 wx 实现吗?或者我需要pyopengl(我什么都不知道的女巫),或者类似的东西?

谢谢!!!...

0 投票
2 回答
1077 浏览

silverlight - Silverlight 中的等距透视

如何在 Silverlight 中获得完美的等距透视?

我想在 Silverlight 中创建一个 3D 环境,它必须是等距透视图。如果我使用平面投影,我可以使网格类似于等距透视,但它不是完美的等距透视,因为网格单元不相等。

http://uwconcept.be/projects/uwconceptcity/grid_base_1.jpg

人们必须能够沿着网格“滚动”;即在其上向前、向后、向左和向右移动。您可以将其视为飞越网格,但始终保持正确的等轴测视角。将不会实现轮换(在第一个版本中)。并且即使它被实施,旋转也将精确到 90 度,以保持等轴测视角。

编辑:我还注意到,当我尝试在 Silverlight 中重现透视图时,“正常”等距 x、y、z 坐标不适用。“正常”转换显示在以下 Wikipedia 文章中:http ://en.wikipedia.org/wiki/File:Wikipedia_isometric_cube_3.jpg

0 投票
2 回答
767 浏览

graphics - 通过等距瓷砖的通道

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

上图是一个角色从右下角到左上角在地面上行走的四幅图像。您可以在第三个面板中看到绘图顺序不正确。

这里似乎没有“正确的顺序”。例如,如果不是一个小家伙,而是让一个 looooong 猫的精灵穿过门,那么无论你先画门还是先画猫,都是错误的。

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

其他游戏引擎如何处理这个问题?一些黑客来防止这种情况发生?手动绘制 z 缓冲区?我没有想到的其他选择?