Visitante!
Faça seu Login ou Registre-se!

Galeria de Jogos

[HTML5] Manipulando filtros e Canvas - Para desenvolvimento de jogos 2 Respostas | 150 Visualizações

0 Membros e 1 Visitante estão vendo este tópico.

Crixus

  • *
  • Mensagens: 405 Ouro: 159

    Vencedor CRM Awards - Melhor Eventer

    • RPG Maker 2k/2k3
    • Youtube
    • Ver perfil

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:
  • 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.
« Última modificação: 20 Mai 2017, 12:58 por Crixus »
Gosta de tutoriais? Então acesse:
http://tanatosmaker.forumeiros.com

(Para evitar propagandas cadastre-se)

Gosta de charges?
Charges.com.br

Crixus

  • *
  • Mensagens: 405 Ouro: 159

    Vencedor CRM Awards - Melhor Eventer

    • RPG Maker 2k/2k3
    • Youtube
    • Ver perfil
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)
Gosta de tutoriais? Então acesse:
http://tanatosmaker.forumeiros.com

(Para evitar propagandas cadastre-se)

Gosta de charges?
Charges.com.br

Alisson

  • *
  • Mensagens: 2957 Ouro: 1948

    Vencedor CRM Awards - Melhor Mapper Vencedor CRM Awards - Melhor Maker Participantes do Maps Together 2

  • Stay cool, calm and collected.
    • Unity
    • Facebook
    • Steam
    • Youtube
    • Ver perfil
    • E-mail
  • Dragon ScalesPhoenixEspada CRMBreaklance
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/




 

Versão Mobile