Как я могу добавить спрайты в свой райкастер и текстуры различных стен? ⇐ Html

[Anonymous]

Вот мой raycast algorythm, не такой сложный: < /p>
var currentAngle = playerAngle + HALF_FOV;
var rayStartX = Math.floor(playerX / MAP_SCALE ) * MAP_SCALE;
var rayStartY = Math.floor(playerY / MAP_SCALE) * MAP_SCALE;
for(var ray = 0; ray < WIDTH; ray++){
var currentSin = Math.sin(currentAngle); currentSin = currentSin ? currentSin : 0.000001;
var currentCos = Math.cos(currentAngle); currentCos = currentCos ? currentCos : 0.000001;

//vertical collisions
var rayEndX, rayEndY, rayDirectionX, verticalDepth, textureEndY, textureX;
if(currentSin > 0) { rayEndX = rayStartX + MAP_SCALE; rayDirectionX = 1}
else { rayEndX = rayStartX; rayDirectionX = -1}
for (var offset = 0; offset < MAP_RANGE; offset += MAP_SCALE) {
verticalDepth = (rayEndX - playerX) / currentSin;
rayEndY = playerY + verticalDepth * currentCos;
var mapTargetX = Math.floor(rayEndX / MAP_SCALE);
var mapTargetY = Math.floor(rayEndY / MAP_SCALE);
if(currentSin map.length - 1) break;
if(map[targetSquare] == 1 || map[targetSquare] == 2) { textureY = map[targetSquare]; break;}
rayEndX += rayDirectionX * MAP_SCALE;
}
textureEndY = rayEndY;

var tempY = rayEndY;
var tempX = rayEndX;

//horizontal collisions
var rayEndY, rayEndX, rayDirectionY, horizontalDepth, textureEndX, textureY;
if(currentCos > 0) { rayEndY = rayStartY + MAP_SCALE; rayDirectionY = 1}
else { rayEndY = rayStartY; rayDirectionY = -1}
for (var offset = 0; offset < MAP_RANGE; offset += MAP_SCALE) {
horizontalDepth = (rayEndY - playerY) / currentCos;
rayEndX = playerX + horizontalDepth * currentSin;
var mapTargetX = Math.floor(rayEndX / MAP_SCALE);
var mapTargetY = Math.floor(rayEndY / MAP_SCALE);
if(currentCos map.length - 1) break;
if(map[targetSquare] == 1 || map[targetSquare] == 2) {texturex = map[targetSquare]; break;}
rayEndY += rayDirectionY * MAP_SCALE;
}
textureEndX = rayEndX;

var endX = verticalDepth < horizontalDepth ? tempX : rayEndX;
var endY = verticalDepth < horizontalDepth ? tempY : rayEndY;

//3D projection
var textureImg = verticalDepth < horizontalDepth ? textureY : textureX;
var depth = verticalDepth < horizontalDepth ? verticalDepth : horizontalDepth;
var textureOffset = verticalDepth < horizontalDepth ? textureEndY : textureEndX;
textureOffset = textureOffset - Math.floor(textureOffset / MAP_SCALE) * MAP_SCALE;
depth *= Math.cos(playerAngle - currentAngle)
var WallHeight = Math.min(Math.floor(MAP_SCALE * 300 / (depth + 0.001)), 50000);
context.globalAlpha = 1;
context.fillStyle = verticalDepth < horizontalDepth ? "#aaa" : '#555';
context.fillRect( 148 + ray, 46 + ( HEIGHT / 2 - WallHeight / 2), 1,
WallHeight);
var textureImg = verticalDepth < horizontalDepth ? textureY : textureX;
//textures
context.drawImage(
WALLS[0],
textureOffset,
0,
1,
64,
ray + 148,
46 + (HALF_HEIGHT - WallHeight / 2),
1,
WallHeight
);
< /code>
Ну, я хочу добавить несколько спрайтов в игру. Как я могу это сделать, используя холст HTML и основываясь на нем Raycaster? Это вообще возможно? Я попытался нарисовать круг на 2D -карте, в результате я получил еще одну стену, это довольно странно. Также я попытался сделать другие текстуры на стенах, заменив стены [0] на стены [TextureImg], которые не работали (я получаю ошибку).

Подробнее здесь: https://stackoverflow.com/questions/795 ... s-textures