Centro RPG Maker

Acessar: Clique aqui (https://rpgmaker.000webhostapp.com/games/html5/canvas/gamefilters/)

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:

• Tamanho original do Canvas (320px X 240px)
• Ajustado pelo tamanho da janela podendo deixar a imagem expremida
• 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.

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)

Achei bem interessante a proposta. Ultimamente andei estudando um pouco das capacidades do Canvas para desenvolvimento e consegui alguns resultados bem simples porém funcionais.
Estarei dando uma olhada \o/