[HTML5][CSS3][JS] Manipulando filtros e Canvas - Para desenvolvimento de jogos

[Crixus]

LINK​

Acessar: Clique aqui

A ideia
Venho tentando desenvolver um jogo semelhante aos criados em Rpg Maker a alguns anos para navegador sem precisar do RpgMaker MV para melhor aproveitamento da memória sem exceder com coisas desnecessárias e usar um pouco do CSS3.

Eu achei muito lento, ele trava mesmo no meu computador com 8 Giga e placa de vídeo offboard (NVidia Geoforce).

Compatibilidade:
Navegadores de Computadores:

• Google Chrome - Testado, funciona 100%
• Firefox - Testado, funciona 100%
• Opera Chromium - Testado, funciona 100%
• Internet Explorer 8 - Não testado
• Internet Explorer 9 - Não testado
• Internet Explorer 10 - Não testado
• Internet Explorer 11 - Testado, somente uma incompatibilidade
• MsEdge - Não testado
• Safari - Não testado

Navegadores de Smartphones:

• Webview Android 2.3 - Testado, funciona somente o auto ajuste de tela e nada mais
• Webview Android 5.0 - Testado, funciona somente o auto ajuste de tela e nada mais
• Google Chrome Android - Testado, funciona somente o auto ajuste de tela e nada mais e a pixelização de imagem
• Firefox Android - Testado, funciona 100%

*Obs.: Não testei em dispositivos mais antigos por que não é mais possível compilar para Androids antigos (anteriores ao 4.0), então testarei via navegador.

Imagens de RTP do Rpg Maker 2000 são apenas ilustrativas, não é um jogo e sim um teste de filtros.

O menu dele permite redimensionar o CANVAS para três medidas:

1. Tamanho original do Canvas (320px X 240px)
2. Ajustado pelo tamanho da janela podendo deixar a imagem expremida
3. Ajustado pela altura da janela tornado melhor adaptado para qualquer dispositivo móvel

Javascript:
Nos menus você pode manipular a saturação de cores, sépia, inverter cores, transparência e o desfoque.

Caso redimencione a janela o código autoajusta o canvas para manter sempre no centro da página e proporcional a dimensão da janeja que você escolher ou o seu dispositivo móvel (celular ou Tablet) permitir.

CSS3:
No ajuste de renderização você tem duas opções, manter o padrão que se redimensionar o CANVAS ajusta os pixels com desfoque e você pode deixar pixelizado de maneira que deixe o CANVAS com aparência estranha dependendo das dimensões dele.

Metatags
Não usei as metatags para os testes por que não achei necessário já que você pode simular dispositivo móvel em duas orientações pelo navegador do próprio computador.

 

[Ellye]

Recomendo dar uma estudada em WebGL (e em alguns frameworks de implementação dela), caso contrário você pode começar a ter problemas de performance quando precisar desenhar muitas coisas na tela, ou quando quiser usar shaders e filtros mais complexos.

 

[Crixus]

Eu já tinha lido algo a respeito, eu nem pretendo muito trabalhar com isso.
Nesse caso seria mais ideal pegar uma dessas API's própria para desenvolvimento de jogos para WEB, seria isso?

 

[Crixus]

Desculpa o UP, mas preciso relatar que foi feito testes no navegador com WebView do Android 2.3.6.

 

[Rafael_Sol_MAKER]

Me diz aí como posso contribuir com alguns testes. Eu posso testar no Edge e no IE11, se quiser. E talvez em alguns outro browser (Vivaldi?).

Quero saber o que precisa ser feito, a ideia parece legal...

Ah, e apesar de não ser a coisa mais rápida que já vi, aparentemente na maior parte rodou beleza aqui no Firefox.

Se precisar das specs do PC eu te passo por PM.

Bom, cê já sabe, precisando, basta passar instruções. O projeto me parece promissor!

 

[Crixus]

Opa! Seria ótimo testar no Edge, o pc tem que ser qualquer um, por que realmente tenho que fazer ser o mais funcional possivel nas variadas máquinas e navegadores usados por jogadores casuais que procuram jogos de navegador.

O IE 11 eu testei, já o Vivaldi não, é igual ao antigo Opera?

 

[Crixus]

Feito testes com alguns navegadores de Smartphones:
[*]Webview padrão do Android 2.3
[*]Webview padrão do Android 5.0
[*]Chrome Android (atualiado)
[*]Firefox Android (atualizado)