英文:
2.5d in 2d canvas with camera rotation
问题
我正在尝试使用纯粹的原生JavaScript在2D画布中学习2.5D，但不知道从哪里开始。
最近我发现了 Winterwood，它是用 PICO-8 写的，基本上实现了我想要的效果。我可以学习其中的可用代码，但变量被压缩了（因为 PICO-8 的标记限制），而且它使用了一个在 PICO-8 中独有的函数 tline。
以下是我想要实现的一个示例：假设有两个精灵位于（50, 40）和（20, 70）的位置，并且有一个以35度角度的相机（相机可以自由旋转从0到360度）。如果我将相机角度应用于它们，我如何找到相对于相机的这些精灵的位置？请注意，我不能使用 context.rotate，因为精灵是“面向相机”的，意味着它们始终朝向相机。
谢谢。
英文:
I'm trying to learn 2.5d using plain vanilla Javascript in a 2d canvas but don't know where to start
I've recently came across Winterwood which is written in PICO-8 and basically achieves what I want. I could study the available code but the variables are compressed (due to PICO-8's token limitation) and it uses a function tline that's exclusive in PICO-8.
Here's an example of what I want to achieve: Say there's 2 sprites postioned at (50, 40) and (20, 70), and a camera angled at 35deg (the camera can be rotated freely from 0 - 360 degrees). How can I find the position relative to the camera these sprites will have if I apply the camera angle to them? Note that I can't use context.rotate since the sprites are 'billboarded' meaning they always face the camera.
Thanks.
答案1
得分: 0
需要计算相对角度和距离距离中心。
使用毕达哥拉斯定理计算距离。
学习三角学，了解三角形和角度，正弦和余弦。
将摄像机角度添加到您计算的角度，并放置在距离中心相同的位置。
英文:
You need to calculate relative angle and distance from center.
Use pythagorean theorem for distance.
Study trigonometry and learn about triangles and angles, sine and cosine.
Add camera angle to you calculated angle and place at same distance from center.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论