[英]How can I incorporate the camera's position into this algorithm to calculate a sprite's position on the screen?
I'm working on a 2D rendering system in 3D space, for practice. 我正在研究3D空间中的2D渲染系统。 The sprites are 2D, but they're rendered in 3D space.
精灵是2D的,但它们是在3D空间中渲染的。 The "camera" can move in 3D space and turn 360 degrees horizontally.
“相机”可以在3D空间中移动并水平旋转360度。 I'm having trouble figuring out the right formula to calculate, based on the position/rotation of the camera and the position of the assets, where they should exist on the screen.
我在根据相机的位置/旋转度以及资产在屏幕上应存在的位置,找出正确的公式进行计算时遇到了麻烦。
What I have is like this: 我所拥有的是这样的:
chunk.assets.forEach(asset => {
let x = Math.round(
asset.coords.x * Math.cos(angle) - asset.coords.y * Math.sin(angle)
);
let y = Math.round(
asset.coords.y * Math.cos(angle) + asset.coords.x * Math.sin(angle)
);
if (!depthMap[y]) {
depthMap[y] = [];
}
depthMap[y].push(asset);
});
But this does not take into account the camera's (player's) position (stored at player.coords.x, player.coords.y
), only the angle the camera/player is facing ( angle
). 但这不考虑摄像机(玩家)的位置(存储在
player.coords.x, player.coords.y
),仅考虑摄像机/玩家面对的angle
( angle
)。 So right now the camera can't move. 因此,现在相机无法移动。 Note: Depth map is just storing the assets in order so the renderer knows which order to render the sprites so things appear in the right order based on which is closer to the player/camera.
注意:深度图只是按顺序存储资产,因此渲染器知道渲染精灵的顺序,以便根据哪个更接近播放器/相机,事物以正确的顺序出现。
How can I incorporate the camera's position into this algorithm? 如何将相机的位置纳入此算法?
Some assumptions: 一些假设:
If the camera and the sprite are at the same position, the sprite will be rendered at 0|0. 如果相机和子画面位于同一位置,则子画面将渲染为0 | 0。
Wether the camera moves left or the sprite moves right does not matter. 相机向左移动还是精灵向右移动都无关紧要。
From that we can conclude that only the relative position matters, and that can be easily calculated (by subtracting both positions). 由此可以得出结论,只有相对位置很重要,并且可以很容易地计算出(通过减去两个位置)。
let x = Math.round(
(asset.coords.x - player.coords.x) * Math.cos(angle) - (asset.coords.y - player coords.y) * Math.sin(angle)
);
let y = Math.round(
(asset.coords.y - player.coords.y) * Math.cos(angle) + (asset.coords.x - player.coords.x) * Math.sin(angle)
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.