Parece que não consigo encontrar uma resposta para essa pergunta. Eu tenho um mapa de blocos hexadecimais. Desejo implementar a rolagem.
Código atualmente:
drawTilemap = function() {
actualX = Math.floor(viewportX / hexWidth);
actualY = Math.floor(viewportY / hexHeight);
offsetX = -(viewportX - (actualX * hexWidth));
offsetY = -(viewportY - (actualY * hexHeight));
for(i = 0; i < (10); i++)
{
for(j = 0; j < 10; j++)
{
if(i % 2 == 0) {
x = (hexOffsetX * i) + offsetX;
y = j * sourceHeight;
} else {
x = (hexOffsetX * i) + offsetX;
y = hexOffsetY + (j * sourceHeight);
}
var tileselected = mapone[actualX + i][j];
drawTile(x, y, tileselected);
}
}
}
O código que escrevi até agora apenas lida com o movimento X. Ainda não funciona como deveria. Se você olhar para o meu exemplo no jsfiddle.net abaixo, verá que ao mover para a direita, quando chegar ao próximo bloco hexagonal, há um problema com a posição X e os cálculos que ocorreram.
Parece que está faltando um pouco de matemática. Infelizmente, não consegui encontrar um exemplo que inclua rolagem ainda.
Verifique se não há barra de rolagem horizontal e tente mover para a direita usando a seta -> direita no teclado. Você verá o problema ao chegar ao final do primeiro bloco.
Desculpas pelo código horrível, estou aprendendo!
Felicidades
fonte
Respostas:
Seja hexadecimal ou não, sugiro manter suas variáveis de localização (x, y) apontando para o mundo do jogo e converter para / das coordenadas da tela somente quando necessário. Ao converter da tela para o mundo, você adiciona (cameraX, cameraY) e depois divide por (tileStepX, tileStepY). Ao converter do mundo para a tela, você multiplica por (tileStepX, tileStepY) e subtrai (cameraX, cameraY). Observe que há uma pequena complicação com hexágonos, que você lida com columnOffset.
Aqui está uma versão mais simples do seu código, com x, y, firstX, firstY nas coordenadas mundiais:
fonte
Encontrei a resposta! Veja aqui: http://jsfiddle.net/ck6Vq/1/embedded/result/
Não tem certeza se alguém pode apresentar algo mais organizado do que o código abaixo?
fonte