[英]How can I incorporate the camera's position into this algorithm to calculate a sprite's position on the screen?
我正在研究3D空间中的2D渲染系统。 精灵是2D的,但它们是在3D空间中渲染的。 “相机”可以在3D空间中移动并水平旋转360度。 我在根据相机的位置/旋转度以及资产在屏幕上应存在的位置,找出正确的公式进行计算时遇到了麻烦。
我所拥有的是这样的:
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);
});
但这不考虑摄像机(玩家)的位置(存储在player.coords.x, player.coords.y
),仅考虑摄像机/玩家面对的angle
( angle
)。 因此,现在相机无法移动。 注意:深度图只是按顺序存储资产,因此渲染器知道渲染精灵的顺序,以便根据哪个更接近播放器/相机,事物以正确的顺序出现。
如何将相机的位置纳入此算法?
一些假设:
如果相机和子画面位于同一位置,则子画面将渲染为0 | 0。
相机向左移动还是精灵向右移动都无关紧要。
由此可以得出结论,只有相对位置很重要,并且可以很容易地计算出(通过减去两个位置)。
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.