Estou no processo de construção de um jogo JavaScript / HTML5 (usando o Canvas) para celular (Android / iPhone / WebOS) com o PhoneGap. Atualmente, estou tentando projetar como a interface do usuário e o tabuleiro de jogo devem ser construídos e como eles devem interagir, mas não tenho certeza qual é a melhor solução. Aqui está o que eu consigo pensar -
Crie a interface do usuário diretamente na tela usando coisas como drawImage e fillText Crie partes da interface do usuário fora da tela usando objetos DOM regulares e, em seguida, flutue uma div sobre a tela quando os elementos da interface do usuário precisarem se sobrepor à tela do tabuleiro. Existem outras técnicas possíveis que eu possa usar para criar a interface do jogo que eu ainda não pensei? Além disso, qual deles seria considerado o caminho "padrão" (eu sei que os jogos HTML5 não são muito populares, então provavelmente ainda não existe um caminho "padrão")? E, finalmente, de que maneira você recomendaria / usaria?
Muito obrigado antecipadamente!
fonte
Respostas:
Ambas as soluções (desenhando na sua tela versus o tradicional HTML / CSS) são totalmente válidas e funcionarão perfeitamente. Algumas coisas a considerar:
Parte disso será subjetiva; um desenvolvedor que eu conheço sempre prefere usar canvas, pois ele acha que o DOM é feio e detalhado. Como qualquer solução funcionará bem, eu escolheria uma única tela simples no seu aplicativo, desenvolveria rapidamente rapidamente separadamente usando os dois métodos e veria qual deles se sente mais fácil / melhor.
Boa sorte!
fonte
Eu tenho usado easeljs para minha interação de tela.
É muito bom e facilita o design sólido. Um dos principais recursos que me fez escolher foi a facilidade de sincronizar a posição dos seus objetos de tela e elementos dom.
Isso facilita a realização de bolhas de fala CSS e elementos estáticos da interface do usuário, como o quadro hud e esse tipo de coisa.
A vantagem que isso tem para os navegadores é que você obtém a tela rica, mas consegue separar as coisas menores e estáticas para o domínio para manter o desempenho sob controle.
fonte
O Canvas é lento em plataformas móveis, pelo menos o safari móvel é assim mesmo, então você deve usar o posicionamento de objetos com base em CSS. Especificamente, use "translate3d" que ativará a renderização acelerada de objetos por hardware.
Confira a biblioteca CAAT para ver as telas, porém, é rápido e você pode usar "atores" suportados por CSS e não alterar a lógica do jogo.
Ainda não posso postar links, mas aqui estão alguns pseudo-links http://labs.hyperandroid.com/animation
fonte
É necessário concordar com a lentidão da tela no iPhone 4. Certamente, a tela de safari não está sendo apoiada pela GL. Meu jogo de cheezy roda rápido no iPhone 3GS e no Android, mas no iPhone 4 acho que a tela da retina tem muitos pixels ou, se a tela não estiver rodando no GL, isso explicaria por que ele se arrasta. Eu gosto do modelo de desenvolvimento de tela, ainda não tentei a opção css translate3d. Em particular, usei o GWT e o wrapper de tela gwt-g2d (otimização / ofuscação). http://www.photonjunky.com/shootout.html
fonte
Eu sugeriria manter seus controles como elementos html, como
menu
ecommand
por razões de acessibilidade. Usando um pouco de CSS, você pode exibir elementos sobre uma tela e não perder a funcionalidade pré-criada do HTML.fonte
Sei que essa é uma pergunta antiga, mas hoje (março de 2013) sabemos mais. Decidi responder caso alguém mais aparecesse aqui como eu. Eu tenho que discordar da maioria das outras respostas. Eles provavelmente são válidos para o desenvolvimento de navegadores da web, mas não para dispositivos móveis. Faz uma grande diferença qual caminho você escolhe (DOM ou animação de tela). A visualização da web do Android é completamente inútil (lenta, gaguejante), o que torna o Phonegap inútil para o desenvolvimento de jogos para Android, a menos que você possa aplicar a aceleração de hardware, que atualmente só é possível usando animação de tela e uma estrutura adequada. Para mais informações, consulte esta resposta .
fonte
Você pode fazer isso de um milhão de maneiras. No entanto, você se sente mais confortável e seus engenheiros se sentem mais confiantes.
Se você está procurando inspiração ou um exemplo de código, aqui está uma maneira de fazê-lo. Eu tenho uma função que desenha repetidamente um menu até que um botão seja pressionado. Quando o botão é pressionado, o jogo é carregado e os ouvintes de evento de clique no menu antigos são removidos e novos ouvintes de evento de clique em jogo são adicionados. Também encerro o loop de empate antigo do menu e inicio um novo loop de empate no jogo. Aqui estão alguns trechos selecionados para ter uma idéia de como isso é feito:
Dessa forma, sou capaz de separar o desenho do jogo e os eventos do desenho e do menu. Também me dá margem de manobra para usar elementos de jogo / animação em meus menus, caso eu queira torná-los realmente bonitos.
fonte