Livre circulação em um jogo isométrico baseado em blocos

Existe uma maneira fácil e razoável de implementar a livre circulação em um jogo isométrico baseado em blocos? Significa que o jogador não iria pular instantaneamente de um bloco para outro ou não ser "encaixado" na grade (por exemplo, se o movimento entre os blocos fosse animado, mas você não conseguiria fazer nada antes que a animação terminasse). Sou realmente iniciante em tudo relacionado à programação de jogos, mas com a ajuda deste site e de outros recursos, foi bastante fácil fazer as coisas básicas, mas não consegui encontrar recursos úteis para esse problema em particular .

Atualmente, improvisei algo próximo disso: http://jsfiddle.net/KwW5b/4/ (movimento WASD). A idéia para o movimento era usar o mapa do mouse para detectar quando o jogador mudou para um bloco diferente e, em seguida, inverter os desvios, e na maioria das vezes funciona corretamente (cada canto faz com que o jogador se mova para o local errado: veja http: //www.youtube.com/watch?v=0xr15IaOhrI , provavelmente porque não consegui fazer o mapa completo do mouse funcionar corretamente), mas não tenho ilusões de que ele esteja perto de uma solução boa / sã. De qualquer forma, é apenas para demonstrar que tipo de coisa eu gostaria de implementar.

html5 movement isometric html-canvas xtr486
fonte

Esse código parece ótimo, qual é o problema exatamente? Você é bastante modesto (em um bom sentido), seu código parece bastante bom, que recurso está faltando na demonstração?

AturSams 28/09/12

O que eu quis dizer com os problemas dos cantos foi esse tipo de comportamento: youtube.com/watch?v=0xr15IaOhrI . Não consegui encontrar outra solução além de fazer muitas verificações de if para as compensações problemáticas, e mesmo assim há alguns casos especiais em que o jogador muda para um local errado. Mas, como eu disse, fiquei imaginando como esse tipo de movimento geralmente é implementado, pois ainda não vi o método usado em nenhum outro lugar.

Xtr486

Respostas:

Antes de tudo, sugiro que você altere as direções de: W - cima-esquerda S - baixo-direita A - baixo-esquerda D - superior-direita

em mais intuitivo: W - para cima S - para baixo A - esquerda D - direita

Quanto à sua preocupação, sugiro que você faça duas funções, uma traduzindo coordenadas isométricas de ladrilhos em coordenadas de grade e a segunda ao contrário. Dessa forma, você pode simplesmente separar o MVC e facilitaria sua vida ao calcular o bloco ativo: insira a descrição da imagem aqui

Markus von Broady
fonte

Sua resposta parece realmente promissora, mas admito que muito disso passa pela minha cabeça. No entanto, tentarei continuar digerindo sua solução durante os próximos dias. Isso está perto do que você estava procurando? jsfiddle.net/Sd4ZP/18 Ele tem alguns erros de lógica (desligado por um etc.) e tal, mas até onde eu sei, os mapas isométricos e de cima para baixo têm o mesmo movimento. O que eu não tenha sequer chegado ao redor é como traduzir o deslocamento a partir de cima para baixo para isométrica azulejo ..

xtr486

Parece bom até agora! Vou dar uma olhada na noite. O objetivo é aplicar transformações no método de desenho de ladrilhos isométricos na função de conversão positionToUser () e inverter no método positionFromUser ().

Markus von Broady

Vejo o problema: você está desenhando uma vista izométrica colocando imagens em vez de usar a API de desenho em tela. É bastante lógico, pois no final suas peças izo serão muito mais do que uma cor sólida. No entanto, para depuração, você também deve desenhar linhas entre os blocos, o que tornaria sua vida muito mais fácil. De qualquer forma, eu peguei seu código e criei a função de tradução positionToUser (x, y). Teste-o centralizando o quadrado preto em um bloco (porque na exibição iso está sempre centralizado) e movendo o mouse sobre a tela inferior - um ponto traduzido será mostrado na tela izo: jsfiddle.net/tZTXS/1

Markus von Broady

Obrigado! Na verdade, eu consegui deduzir (bem, mais ou menos) algo eu mesmo, a saber, o deslocamento isométrico na função drawIsometric. Agora está assim: jsfiddle.net/P2eKF/4 , que parece fazer exatamente o que eu pedi na pergunta original, por isso vou marcar sua resposta. :)

xtr486

Estou feliz que você fez isso! Gosto de como as combinações de teclas WA, WD, AS e SD alinham o movimento a eixos isométricos em vez de ângulos de 45 graus. Bom trabalho.

Markus von Broady

Se eu entendi, você quer que o jogador mova ladrilhos em ladrilhos, mas sem pular. Você pode:

1- Comece com o bloco t0 e o deslocamento 0

2- Quando o jogador passa para o ladrilho t1, defina o deslocamento = - (t1 - t0)

3- Na atualização do jogador, se o deslocamento não for 0, diminua usando o tempo de atualização e a velocidade do jogador.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Você pode usar o deslocamento == 0 para saber quando o jogador está no ladrilho.

Com isso, você obtém um jogador que se move livremente no mapa, mas mantém as peças.

Zhen
fonte