O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Rpg para Web com HTML4 (Sem canvas)

Iniciado por Crixus, 16/05/2017 às 04:38

16/05/2017 às 04:38 Última edição: 15/03/2019 às 00:37 por Crixus
Bem, a principio a ideia e fazer um sistema semelhante ao RmXP, só que sem o uso do CANVAS, somente CSS e Jscript.
A diferença é que será apenas para computadores com navegadores modernos e alguns mais antigos, nada de celulares.

Basicamente é uma versão não isométrica e melhorada desta ideia:
http://www.condadobraveheart.com/forum/index.php?topic=1837

O editor seria este, que nunca teve o projeto realmente iniciado:
http://www.condadobraveheart.com/forum/index.php?topic=531

Navegadores testados e que funcionaram:

  • Firefox
  • Chrome
  • Opera (Chromium)
  • Internet Explorer 11

Aqui postarei as atualizações:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/


CitarMapa com Tileset do RMXP, somente o mapeamento e nível:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/map-tileset.html
Gráfico por Tile: 100%
Mover por teclado: 100%
Mover jogador com gráfico pelo mapa: 100%
Animação do Charaset: 100%
Gráficos de arvores e outros acima do jogador: 80%
Sistema de camadas: 50%


Panorama como no Rm2k/2k3:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/panorama.html
Completo


Audio como no RMXP:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/playerAudio.html
Todos principais navegadores: Falta funcionar IE devido aos diferentes formatos
Controlar volume: 90% (Falta IE)
Controlar Play/Stop: 90% (Falta IE)
Repetição: 90% (Falta IE)
Volume aumentar ou diminuir progressivamente: Não foi feito ainda.

Veja mais imagens:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/Screenshots-01.png
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/Screenshots-02.png

Existem pessoas que gostam de radicalizar. Eu gosto disso. :coffee:

Bem bacana as demos. Eu não sei o quão pesado pode ficar em comparação ao canvas, mas em computadores modernos, isso provavelmente é insignificante.

No demo do tileset, game.scroll do walkTile parece não existir. O senhor pensa em implementar a função?

function walkTile(d) {
	d = d.toLowerCase();

	vX += d === 'left' ? -32 : d === 'right' ? 32 : 0;
	vY += d === 'up' ? -32 : d === 'down' ? 32 : 0;
	
	vX = Math.min(Math.max(vX, 0), mapw / 2);
	vY = Math.min(Math.max(vY, 0), maph / 2);
	
	game.scrollLeft = vX;
	game.scrollTop = vY;
}

16/05/2017 às 10:40 #2 Última edição: 20/05/2017 às 15:29 por Crixus
Eu fiz na correria, por que a ideia surgiu do nada na minha cabeça, e eu nem lembrei de testar em outros navegadores.

Coisas que o FIREFOX tem que o Chrome e outros não tem ou que são diferente.
Além do Scroll ser diferente também que o CSS do FF tem a transição suave "scroll-behavior" o que deixa o movimento realista:
https://css-tricks.com/almanac/properties/s/scroll-behavior/

Mas agora está corrigido.

Como a transição suave não funciona no Chrome e em outros navegadores, vou fazer maior parte em javascript mesmo, evitando uso de Css3.

Eu ia usar a maneira que você fez, mas não entendi pra que serve o Math.min e o Math.max

EDIT:
Incluido animação do charset do player/jogador.

22/05/2017 às 00:22 #3 Última edição: 10/04/2019 às 14:33 por Crixus
Fiz os teste em um computador POSITIVO com 2GB de RAM, não notei qualquer diferença pro meu notebook com placa de vídeo.

NOVIDADE:
https://rpgmaker.000webhostapp.com/webmaster/rpghtml4/playerAudio.html
Comecei a fazer testes para simular o funcionamento de midias no Rpg Maker