🤔 Para Refletir :
"Apresente seu projeto com um post bonito. Isso atrai olhares, acredite."
- Delayzado

[HTML5][JS][CSS3] Jogo Isométrico com CSS3 + Javascript

Crixus

Marquês
Membro
Membro
Crixus Offline
Juntou-se
07 de Julho de 2015
Postagens
586
Bravecoins
4
Totalmente inspirado no sistema que eu criei a anos atrás pro Rm2k/2k3/XP que podia ser facilmente convertido para VX e ACE agora refeito para Web.

Esse é um sistema que simula um jogo isométrico, as posições CSS3 são calculadas e definidas com Javascript com um algoritmo que eu fiz na época em que usava rpg maker.

Diferente da versão de Rm2k essa ainda está bem crua, dando foco apenas ao calculo que faz o mapa se mover referente as coordenadas do personagem, só que agora não existe o personagem, somente suas variáveis.

sample.png

[imagem]

DEMO: https://rpgmaker.000webhostapp.com/games/html5/css3/isoview/​

Suporte para teclado (direcionais) e touch através de botões, apenas para testes.


Segue aqui a ideia do algoritmo:
#====================================#
#===== Dá a posição inicial do mapa na tela =====#
#=====  antes de calcular as coordenadas  =====#
#====================================#
mapaX = -194;
mapaY = 23;

#====================================#
#============ Posiciona o Mapa ===========#
#====================================#
var calculaX = 16;
var calculaY = 8;
calculaX = calculaX * jogadorX;
calculaY = calculaY * jogadorY;
mapaX = mapaX - calculaX;
mapaY = mapaY - calculaY;

#====================================#
#=========== corrige_iso o Isométrico ==========#
#====================================#
var corrige_isoX = 16;
var corrige_isoY = 8;
corrige_isoX = corrige_isoX * jogadorY; //(aqui a posição X se corrige_iso pela corrdenada Y)
corrige_isoY = corrige_isoY * jogadorX; //(aqui a posição X se corrige_iso pela corrdenada X)
mapaX = mapaX + corrige_isoX;
mapaY = mapaY - corrige_isoY;
Clique para expandir...
 
Mas esse vídeo é de 2015 e não tem plugin ou demo pra baixar XD kkk queria algo que eu pudesse usar. eu tenho um parecido para o RPG Maker XP, mas como não é  JavaScript não funciona no MV. então, nesse caso, tem um plugin ou demo que possa ser usado no MV? rs
Engine do RPG Maker XP
https://save-point.org/thread-2427.html
 
Esse Script pra RMXP segue a lógica do RGSS (baseado em Ruby) é diferente de Javascript para HTML5.
O que eu ensinei é a lógica de um Isoview SIMULADO, pode ver que usei está mesma simulação no Rpg Maker 2000:

https://www.youtube.com/watch?v=WV5O2Kn3FJs

Não tem nada de isométrico, são várias imagens em posições calculadas com está formula, o que gera uma simulação do IsoView.
No Rpg Maker MV seria capaz de ajudar à travar mais ainda que o sistema super sobrecarregado do MV.
 
Pena, to buscando um plugin similar para o rpg maker MV. para colocar a movimentação isométrica eu até consegui com o Ultra Mode7, mas ai entra o problema do mapa. por isso esses sistema do XP que mostrei é bom. ele usa 2 mapas, um onde rola um "mode 7" e o outro que vc de fato anda e etc. no caso se tivesse um plugin que fizesse usar um segundo mapa, mas com a movimentação do primeiro mapa do mode 7, seria o ideal
.
 
Cara, que incrível!

Um Final Fantasy Tactics feito em RMMV não parece ser mais um sonho tão distante agora...  :XP:
 
Crixus, você era conhecido por Tanatos Maker, certo!?

Coincidência ou não, ontem eu estava a procura de
algum sistema isometrico para VX ACE e achei esse:

[youtube]https://www.youtube.com/watch?v=lx_cMOf4j6I[/youtube]

Creio que foi daqui que tudo surgiu, não é!?
De qualquer maneira, a ideia está bem apresentada
e limpa, seria legal ver a evolução deste trabalho.
No mais, boa sorte com o trabalho, está ótimo!!!
 
guh_walker comentou:
Pena, to buscando um plugin similar para o rpg maker MV.
Clique para expandir...
Isso tudo foi feito apenas por EVENTOS e não por Scripts, nada te impede de reproduzir no Rpg Maker MV.

CleanWater comentou:
Cara, que incrível!

Um Final Fantasy Tactics feito em RMMV não parece ser mais um sonho tão distante agora...  :XP:
Clique para expandir...
Faz quase 10 anos que lancei esse sistema... ninguém usou por comodismo desde aquela época.

Don Mariachi comentou:
Crixus, você era conhecido por Tanatos Maker, certo!?
Clique para expandir...
Isso mesmo, sou eu, ou era eu.

Don Mariachi comentou:
Coincidência ou não, ontem eu estava a procura de
algum sistema isometrico para VX ACE e achei esse:
Clique para expandir...
Existe um sistema de VX e ACE:
https://forums.rpgmakerweb.com/index.php?threads/gubids-tactical-battle-system-v2-4-for-ace.16085/
Infelizmente é só sistema de batalha pelo que vi.

Don Mariachi comentou:
[youtube]https://www.youtube.com/watch?v=lx_cMOf4j6I[/youtube]

Creio que foi daqui que tudo surgiu, não é!?
Clique para expandir...
Exatamente.
 
Eu apenas mostrei que o sistema existe, a vontade de procurar pelo nome no Google vai de cada um... mas pra não dizerem que sou um mala pega ai.

Tópico:
https://www.gdunlimited.net/scripts/rpg-maker-vx-ace/custom-battle-scripts/gubid-s-tactical-battle-system-gtbs-v2-for-ace

Download:
https://www.gdunlimited.net/ajax.php/manager/download/script/1542/gtbsv2-4-release1-1/.zip

20 segundos de pesquisa.

Agora quem quiser continuar o assunto sobre o código simulado estamos aí.
 
Pra quem estava com dúvida quanto ao ALGORITIMO, eu rescrevi o código no tópico por que confundi os nomes das variaveis quando peguei do arquivo main.js
 
1. Não fique postando mensagens seguidas, o botão do lapis na sua mensagem serve pra editar e assim acrescentar detalhes.

2. Eu realmente não postei a versão do Luigi aberta por que planejava montar um jogo que fosse um paralelo ou continuação do Super Mario Rpg, o que não vai acontecer mais por que já se passaram 10 anos.

3. Eu criei este tópico para expor e falar do algoritimo usado, no caso pra Web (Javascript+Css) e não de Rpg Maker, eu postei o tópico de Rpg Maker em vários outros fóruns, Youtube e no meu fórum pessoal, não vejo necessidade de repostar aqui, mas se continuarem a tirar o foco do assunto vou repostar...

4. Se alguém mais quiser falar de desenvolvimento de jogos pra Web com CSS legal, se alguém mais falar do Rpg Maker nem vou me dar o trabalho de responder, vou replicar o tópico do meu fórum pessoal aqui na Condado e se quiser vai lá e comenta, nem vou passar o link.

Fica dica.
 
Você deve fazer login ou se registrar para responder aqui.
Voltar
Topo Inferior