Estoy en el proceso de crear un juego JavaScript / HTML5 (usando Canvas) para dispositivos móviles (Android / iPhone / WebOS) con PhoneGap. Actualmente estoy tratando de diseñar cómo se debe construir la interfaz de usuario y el tablero de juego y cómo deben interactuar, pero no estoy seguro de cuál es la mejor solución. Esto es lo que puedo pensar:
Cree la interfaz de usuario directamente en el lienzo utilizando elementos como drawImage y fillText Cree partes de la interfaz de usuario fuera del lienzo utilizando objetos DOM regulares y luego flote un div sobre el lienzo cuando los elementos de la interfaz de usuario necesiten superponerse al lienzo del tablero de juego. ¿Hay alguna otra técnica posible que pueda usar para construir la interfaz de usuario del juego que no haya pensado? Además, ¿cuál de estos se consideraría la forma "estándar" (sé que los juegos HTML5 no son muy populares, por lo que probablemente todavía no haya una forma "estándar")? Y finalmente, ¿de qué manera recomendarías / usarías?
¡Muchas gracias de antemano!
fuente
Respuestas:
Ambas soluciones (dibujar en su lienzo VS. HTML / CSS tradicional) son totalmente válidas y funcionarán bien. Algunas cosas a considerar:
Algo de esto será subjetivo; un desarrollador que conozco siempre prefiere usar el lienzo, ya que considera que DOM es feo y detallado. Dado que cualquiera de las soluciones funcionará bien, elegiría una sola pantalla simple en su aplicación, la desarrollaría rápidamente por separado utilizando ambos métodos y vería cuál se siente más fácil / mejor.
¡La mejor de las suertes!
fuente
He estado usando easeljs para mi interacción con el lienzo.
Es bastante bueno y facilita un diseño sólido. Una de las características clave que me hizo elegirlo fue la posibilidad de sincronizar la posición de sus objetos de lienzo y elementos dom.
Esto facilita hacer burbujas de discurso CSS y elementos de interfaz de usuario estáticos como el marco del hud y ese tipo de cosas.
La ventaja que esto tiene para los navegadores es que obtienes el lienzo rico pero puedes empeñar las cosas más pequeñas y estáticas en el dom para mantener el rendimiento bajo control.
fuente
El lienzo es lento en las plataformas móviles, al menos el safari móvil lo es de todos modos, por lo que querrá usar el posicionamiento de objetos basado en CSS en esos. Utilice específicamente "translate3d" que activará la representación de objetos acelerada por hardware.
Echa un vistazo a la biblioteca CAAT para el lienzo, sin embargo, es rápido y puedes usar "actores" respaldados por CSS y no cambiar la lógica del juego.
Todavía no puedo publicar enlaces, pero aquí hay algunos pseudo enlaces http://labs.hyperandroid.com/animation
fuente
Tengo que estar de acuerdo sobre la lentitud del lienzo en el iPhone 4. Bastante seguro de que el lienzo de safari no está respaldado por GL. Mi descarado juego funciona rápido en iPhone 3GS y Android, pero en iPhone 4 creo que la pantalla retina tiene demasiados píxeles, o si el lienzo no se monta en GL, esto explicaría por qué se arrastra. Me gusta el modelo de desarrollo del lienzo, todavía no he probado la opción css translate3d. En particular, utilicé GWT y el gwt-g2d canvas wrapper (optimización / ofuscación). http://www.photonjunky.com/shootout.html
fuente
Sugeriría mantener sus controles como elementos html como
menu
ycommand
por razones de accesibilidad. Usando un poco de CSS, puede mostrar elementos sobre un lienzo y no perder la funcionalidad preconstruida de HTML.fuente
Sé que esta es una vieja pregunta, pero hoy (marzo de 2013) lo sabemos mejor. Decidí responder en caso de que alguien más tropezara aquí como yo. Tengo que estar en desacuerdo con la mayoría de las otras respuestas. Probablemente sean válidos para el desarrollo del navegador web, pero no para dispositivos móviles. Hace una gran diferencia qué ruta elegir (DOM o animación de lienzo). La vista web de Android es completamente inútil (lenta, tartamudeante) en sí misma, lo que hace que Phonegap sea inútil para el desarrollo de juegos de Android, a menos que pueda aplicar la aceleración de hardware, que actualmente solo es posible usando animación de lienzo y un marco adecuado. Para más información, vea esta respuesta .
fuente
Puedes hacerlo de mil maneras. Sin embargo, se siente más cómodo y sus ingenieros se sienten más seguros.
Si está buscando inspiración o un ejemplo de código, aquí hay una manera de hacerlo. Tengo una función que dibuja repetidamente un menú hasta que se presiona un botón. Cuando se presiona el botón, se carga el juego y se eliminan los antiguos oyentes de eventos de clic de menú y se agregan nuevos oyentes de eventos de clic de juego. También finalizo el antiguo ciclo de extracción del menú y comienzo un nuevo ciclo de extracción del juego. Aquí hay algunos fragmentos seleccionados para darle una idea de cómo se hace:
De esta manera, puedo separar el dibujo del juego y los eventos del juego del dibujo del menú y los eventos del menú. También me da margen para usar elementos de juego / animación en mis menús si quiero que se vean realmente bonitos.
fuente