ESTE ARTICULO ES UNA TRADUCCIÓN DE LA ENTRADA ORIGINAL.
CUALQUIER CORRECCIÓN DEJA UN COMENTARIO
Hasta hace poco, rendimiento de juegos basada en navegador para dispositivos móviles ha quedado significativamente rezagadas rendimiento de sobremesa. Si desea crear un juego basado en el lienzo, actuación fue terrible y necesita construir su juego alrededor de las limitaciones de la plataforma. Desarrollar un juego utilizable significado usando trucos como el escalado de muy baja resolución o hacer actualizaciones de pantalla parcial en lugar de actualizaciones completas, lo que significa que el diseño del juego estaba limitada por las debilidades de la plataforma, en lugar de su creatividad.
Afortunadamente, esto ha cambiado. Proveedores de navegador rápidamente están mejorando su rendimiento móvil:
- iOS5 acompaña ahora Nitro Javascript
- Chrome Android Browser está ahora disponible en Android 4 (Ice Cream Sandwich)
- Windows Phone 7 Mango lanzó agilizarán móvil con aceleración de hardware
Mientras que Chrome para Android todavía tienen algunos trabajos importantes que hacer en el rendimiento del lienzo, esto ahora parece una inevitabilidad en lugar de una oración de esperanza.
Desarrollo de juegos de HTML5 que funcionan en el explorador móvil viene con su propio conjunto de requisitos especiales. En primer lugar necesitará tener una idea del número de sprites que se puede insertar en la pantalla a la vez. Siguiente que desea maximizar su juego con el tamaño de la pantalla para que los usuarios no tengan que dirigiendo a su juego. A continuación, necesitará agregar controles de toque, por lo que el juego será jugable sin un teclado.
Por último, deseará considerar la adición de un número de piezas de metadatos para permitir que la página que utiliza una aplicación de pantalla de inicio y han muestra con el icono de la derecho.
Consideraciones de rendimiento
Mientras HTML5 móvil rendimiento del juego ha aumentado significativamente, todavía necesita ser consciente de las limitaciones de las dos plataformas dominantes: iOS y Android.
Esto fue y generalmente todavía es el caso con Android. Navegadores han sido optimizar la representación de los elementos HTML para una larga, así que a menos que esté moviendo vale de una página completa de azulejos y sprites, sprites CSS todavía son algo a tener en cuenta.
Ahora con aceleración de hardware, rendimiento de lienzo ha alcanzado un nivel donde donde son posibles juegos de acción de pantalla completa en resolución de píxeles CSS.
En iPhone 4, la resolución de la pantalla de retina expuesta a los desarrolladores web se mantuvo sin cambios a 320 x 480, mientras que la resolución de pantalla actual es 640 x 960.
Dado que la resolución de la etiqueta de lienzo es independiente de cómo se procesa en la pantalla, puede crear una resolución completa del lienzo, establecer dimensiones de píxel CSS de 320 x 480 y presionar 4 veces más píxeles a través de la pantalla.
Esto será nítida y agradable, pero a menos que se están haciendo actualizaciones de pantalla parcial, que muchos píxeles a través de la etiqueta de lienzo de bombeo está fuera del alcance de juegos móviles de HTML5.
Estas limitaciones significa que como de la actual generación de dispositivos, usted debe ser contra una resolución de píxel CSS en tu juego (muchas aplicaciones nativas todavía no necesariamente todas tienen activos de escalado de pantalla Retina, por lo que no debería considerarse un error enorme).
Ejecutar esta secuencia de comandos de prueba en un iPhone 4, un iPad 2 y un nexo de Galaxy en cromo para Android resultados en la siguiente performance para CSS sprites (imágenes de fondo) y sprites de lienzo:
Los tres dispositivos son capaces de dibujar más 100 sprites por fotograma (con un lienzo completo claro) y procesar por lo menos 30 fps. Mientras 100 sprites no es un número ilimitado de sprites, es suficiente para muchos casos de usos. Para juegos con fondos mosaico, que todavía desea realizar un procesamiento previo de búferes de lienzo ocultas en lugar de dibujar cada mosaico cada fotograma, pero un juego fullscreen animado es ciertamente factible.
Dado que cada plataforma todavía puede representar marcos de doble dígito por segundo a 1000 sprites por fotograma, tienes algún margen adicional hacer algunos pre-rendering importante y offscreen procesar cada pocos fotogramas sin moler tu juego interrumpido.
El resto de este artículo asumirá que está trabajando en un juego de lienzo base ya es donde la mejora de rendimiento va a ser. Si está trabajando en un juego basado en el objeto sprite CSS, algunas de las piezas (como cambiar el tamaño del lienzo) no se aplican, pero mucho aún serán aplicable.
Consideraciones de ventanilla
Una vez que tienes un HTML5 juego spec'd cabo dentro de las capacidades de rendimiento de la plataforma (o convertir un juego existente para jugar móvil) necesita considerar cómo ese juego será realmente buscar y jugar en el móvil. Muchos juegos de web en el escritorio generalmente se limitan a un área de reproducción de un tamaño específico con material adicional (anuncios!) envoltura alrededor del área de juego.En mobile, esto no volar. Dispositivos móviles tienen esa limitada pantalla inmobiliaria como es que cuando un jugador está jugando su juego, advierten le permite maximizar el área de reproducción en la medida en que se puede. Esto puede parecer fácil en principio, pero desde distintos dispositivos tienen diferentes resoluciones y proporciones de aspecto suele haber sólo mucho se puede hacer.
Sus opciones principales son:
- Cambiar el tamaño del lienzo para cubrir toda la pantalla.
- Cambiar el tamaño del lienzo a mayoría de relleno de la pantalla, manteniendo la proporción existente.
En el reverso, también significa que voy restringiendo la ventanilla de su juego más pequeño que el tamaño completo del dispositivo.
Para algunos juegos deseará el tamaño y la proporción de aspecto del juego permanecer consistente para que enemigos aparecen y desaparecen de manera consistente.
Para un 2d juego, puede ir con la opción 1 como ajuste ligeramente la cantidad del nivel que el jugador ve jugando no va a dramáticamente afectan a juego pero va hacer el juego (y jugar) más como un juego nativo.
De cualquier manera, probablemente querrá sacar el juego de su actual ubicación en la página y colóquela absolutamente retomar el tamaño completo de la pantalla, ocultando nada en la página.
Juego de HTML5 muchos motores hará esto para usted (impacto y Crafty para nombrar un par), pero si está usando su propio motor o un motor que no hace esto para usted, hay es una serie de cuestiones que desee tomar en consideración.
La primera cuestión es área de visualización del navegador.
Cuando se enfrentan con una página web normal, no móvil optimizada, exploradores móviles generalmente permiten al usuario hacer zoom dentro y fuera de la página.
Para permitir esto, que el explorador móvil finge tiene un tamaño de pantalla es mayor de lo que realmente es (980 píxeles de ancho en iOS) y 900 píxeles en Android mientras que esto funciona bien para muchos sitios Web, es un desastre para los juegos.
En primer lugar, no desea que el usuario zoom dentro y fuera de la página web (incluso si tu juego es compatible con pizca de zoom, deseará que manejar en el juego en sí).
En segundo lugar, podrá forzar su juego para empujar más píxeles para llenar la pantalla. En su lugar, deseará agregar una etiqueta meta a tu página contando el explorador móvil para establecer el ancho de la pantalla a la anchura de píxeles (CSS) del dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
Esto limita el ancho de la anchura de la pantalla y evitar que el usuario acercar o alejar.
Esto puede hacerse normalmente llamando
window.scrollTo(0,1); en el iPhone (más sobre Android infra). Sin embargo, hay un par de advertencias a esto. Para que la barra de direcciones desaparecer le deba tener una página superior de la pantalla.
Supongamos que tiene el elemento de lienzo creado dentro de otro contenedor a lo largo de las líneas de HTML siguiente:
<div id='container'> <canvas id='game' width='320' height='480'></canvas> </div>
setupMobileFull que establecerá la página con un lienzo de tamaño. Este método seguirá opción 1 descrita anteriormente, maximizando el lienzo al tamaño completo de la página.function setupMobileFull() {
Puede establecer explícitamente la altura del elemento contenedor que contiene a una altura mayor que el tamaño de la página (en el ejemplo siguiente utiliza jQuery de concisión):
var $container = $("#container"), $canvas = $("#game"), h = window.innerHeight, w = window.innerWidth; $container.css('height',h*2); window.scrollTo(0,1);
window.scrollTo. Debido a que el comando
scrollTo , la altura de la página realmente debe ser un par de píxeles más grandes que la página propia para evitar un vacío en la parte inferior de la página. También deseará restablecer el contenedor a la altura y el ancho de la página para evitar cualquier desplazamiento en cambios de orientación.
Si tuviera cualquier relleno o margen en el contenedor para las versiones de escritorio, también es un buen momento para eliminarlo.
h = window.innerHeight + 10; $container.css({ height: h, width: w, padding: 0, margin: 0});
A continuación puede establecer el ancho y propiedades de altura en el lienzo para cambiar el tamaño coincide con la ventana y, a continuación, establecer la posición de absoluta y colóquelo en la parte superior izquierda de la página.
$game.attr({ width: w, height: h }); $game.css({ position: 'absolute', left: 0, top: 0 }); };
Si ejecuta setupMobileFull() en dispositivos móviles más, ahora debería tener un tamaño lienzo que llena cualquier dispositivo móvil se ejecuta.
La desventaja de esto es que voy a tomar un ligero rendimiento golpeó el navegador necesita a escala el lienzo para dibujar en la pantalla, pero con lienzo GPU acelerado, esto no debería ser notable.
Vamos a escribir una función denominada setupProportionalCanvas() que hace justamente eso. El principio de la función es idéntico, ya que todavía queremos deshacernos de la barra de direcciones.
function setupProportionalCanvas() { var $container = $("#container"), $canvas = $("#game"), h = window.innerHeight, w = window.innerWidth; $container.css('height',h*2); window.scrollTo(0,1); $canvas.attr({width: w, height: h}); h = window.innerHeight + 2 $container.css({ height: h, width: w, padding: 0, margin: 0});
Sin embargo, cuando llega el momento de establecer el lienzo, en lugar de ello necesitará calcular la dimensión límite y luego maximizar el tamaño del lienzo basado en.
var canvasH = $canvas.attr('height'),canvasW = $canvas.attr('width'),maxHeightMult = h / canvasH,maxWidthMult = w / canvasW,multiplier = Math.min(maxHeightMult, maxWidthMult),destH = canvasH * multiplier,destW = canvasW * multiplier;$canvas.css({position: 'absolute',height: destH,width: destW,left: w / 2 - destW / 2,top: 0});
}
Un juego real podría utilizar una combinación de las dos opciones dependiendo del tamaño de píxeles del dispositivo que se está ejecutando para impedir que los dispositivos tengan empujar demasiados píxeles por fotograma.
Controles táctiles
Siguiente está gestionando la incorporación de los controles de toque a la página.Esto es algo que generalmente sólo puede hacerse cuando el juego admite eventos de toque, que se pueden comprobar mirando el objeto
window de la propiedad ontouchstart .var hasTouch = !!('ontouchstart' in window);
También puede comprobar Modernizr.touch si tienes Modernizr cargado
click , pero esto debe evitarse generalmente en toque dispositivos incluso por elementos de la interfaz de juego hay un retraso significativo (300 ms-500ms) antes de desencadenar un evento click que agregar exploradores móviles para evitar accidental clics. Mayoría de los usuarios se utilizará para tener una respuesta inmediata al hacer clic en un elemento de la interfaz en un juego (en lugar de una página web) y dejando que demora allí hará su sensación de juego lento.
Puede utilizar los eventos del mouse existentes (
Una mejor opción es utilizar los eventos de cuatro toque (mousedown, mousemovey mouseup) en los navegadores de móviles, pero estos no ofrecen ningún soporte para multitouch.touchstart, touchmovey touchend,touchcancel) que son compatibles con iOS y Android 2.1 +. Responder a los eventos de toque (especialmente
touchmove) y asegurándose de que llamar aevent.preventDefault también evitará comportamiento explorador normal, como zoom y desplazamiento, que puedan perturbar su juego.Para elementos de la interfaz como menú seguimiento
touchstart y touchend en lugar de los elementos, haga clic en significa que elementos serán más receptivos. Por ejemplo, realizar el seguimiento de un conjunto de DOM según elementos de la interfaz configurada como enlaces dentro de un
<div> con un id de "interfaz", podría hacer lo siguiente para obtener el patrón de uso de la interfaz normal:El punto de este código es falsificar eventos de tipo activable en elementos de la interfaz sin desencadenar realmente un elemento hasta los usuarios liberar su toque. Para lograr esto, los eventosvar currentElement = null; $("#interface a").on('touchstart',function(e) { currentElement = this; $(this).addClass('hover'); e.preventDefault(); }); $("#interface a").on('touchmove',function(e) { var evt = e.originalEvent; var element = document.elementFromPoint(evt.changedTouches[0].clientX, evt.changedTouches[0].clientY); if(element != currentElement) { $(this).removeClass('hover'); currentElement = null; } e.preventDefault(); }); $("#interface a").on('touchend',function(e) { var evt = e.originalEvent; $(this).removeClass('hover'); var element = document.elementFromPoint(evt.changedTouches[0].clientX, evt.changedTouches[0].clientY); if(element == currentElement) { $(this).text('Touched'); } currentElement = null; e.preventDefault(); });
touchmove ytouchend un seguimiento el elemento real que está bajo el toque y si ese elemento es diferente de la currentElement ser "sobrevoló" descartar el toque. El poco utilizado
document.elementFromPoint(x,y) devolverá el elemento DOM que realmente está en la ubicación del ratón del pasado en clientX y clientY coordenadas. La matriz de changedTouchesutilizado anteriormente se describe con más detalle a continuación. Puede proporcionar el código de un disparo al toque-test.html.Este código permitirá al usuario pulse un elemento de la interfaz de juego (como el botón de inicio en una pantalla de menú de juego), liberar lo más rápidamente posible y aún genera un evento. Igualmente si el usuario mueve su dedo fuera del elemento de la interfaz sin levantar, el evento no se activará.
También puede agregar una norma coloquen psudeo clase CSS junto con una clase activable a su elemento:
#interface a:hover, #interface a.hover { /* Highlight the element */ }
La ventaja aquí es que aún puede utilizar un controlador de clic estándar para equipos de sobremesa y no necesita quitar el móvil para los dispositivos que no admitan toque.
Mover elementos de la interfaz de pantalla del menú tipo de controles en el juego, existen cuatro esquemas de controles básicos para touch juegos:
- Interacción directa - te toque el elemento que desee interactuar con (como un ave pequeño, perturbado) y mover directamente.
- Botones de control - el equivalente de las teclas del teclado en la pantalla.
- Controles analógicos - un joystick analógico estilo añadido a la pantalla.
- Una combinación de 2 y 3.
event.touches- todos los toques en la pantallaevent.targetTouches- toques en el elemento que desencadena el eventoevent.changedTouches- toques que se vieron afectadas debido a este evento
Dentro de cada una de estas listas son una serie de piezas útiles de información, son los más valiosos de que nuestra perspectiva:
touch.identifier- un identificador único para el actual toque de dedotouch.target- el elemento DOM tocadotouch.pageXytouch.pageY- la ubicación de la página donde fue tocado el elemento
originalEventdel pasado normalizado evento que jQuery pasa a sus controladores de eventos.Si intentas agarrar cualquiera de las matrices mencionadas de toques del evento normalizado podrá cumplirse con frustración.
En cada caso querrá capturar la ubicación de la etiqueta Canvas. Esto puede complicarse por la escala y el tamaño y la posición de la etiqueta de lienzo en la página (estos cálculos pueden ser simplificados si no cambiar el tamaño), pero viene a:
( touchLocation - elementLocation) * elementPixelSize / elementCSSSize;
Desglosarse en código real, dado un toque (como un elemento de
changedTouches) y un elemento, se puede calcular la posición del píxel en el lienzo como tal:function targetLocation(element,touch) { var $elem = $(element), touchX = $elem.attr('width') * (touch.pageX - $elem.position().left) / $elem.width(), touchY = $elem.attr('height') * (touch.pageY - $elem.position().top) / $elem.height(); return { x: touchX, y: touchY }; }
Si lo hace entonces tu código de manipulación directa tendrá que ajustar en función de cualquier transformación agregados para obtener un lienzo válido x e y ubicación.
Vamos a probar el primer tipo, dirigir la interacción con una demostración de arrastrar círculos arrastre mediante multitouch basado en la siguiente matriz de elementos (que se mostrará como círculos) y un método simple colisión como a continuación:
El código de colisión de marcador de posición anterior comprobará si hay una colisión entre un punto y un círculo. Su motor o juego sería sustituir en cualquier código o verificación de colisiones reales contra entidades de juego que desea incluir.var items = [ { x: 100, y: 100, r: 50, color: 'white' }, { x: 15, y: 70, r: 25, color: 'pink' }, { x: 200, y: 100, r: 25, color: 'blue' } ], curDrags = { }; function collision(x,y) { for(var i =0; i<items.length; i++) { var elem = items[i], distX = x - elem.x, distY = y - elem.y, dist = Math.sqrt(distX * distX + distY * distY); if(dist < elem.r) { return i; } } return null; }
Cuando se inicia un toque, comprobar si cualquier
changedTouches (sabemos que sólo son nuevos toques porque es un evento touchstart ) estén en contacto con un elemento. Si es así, guardar el identificador de toque de arrastre junto con la ubicación original del elemento y la ubicación de la resistencia. El evento de touchmove tiene el trabajo de seguimiento de cada uno de los$("#game").on('touchstart',function(e) { var evt = e.originalEvent, elem = this; $.each(evt.changedTouches,function() { var loc = targetLocation(elem,this), itemIdx = collision(loc.x,loc.y); if(itemIdx !== null) { curDrags[itemIdx] = { identifier: this.identifier, x: loc.x, y: loc.y, origX: items[itemIdx].x, origY: items[itemIdx].y }; } }); e.preventDefault(); });
changedTouches nuevamente y coincidencia de los changedTouches contra los elementos que ya están siendo arrastrado basado en su identificador de contacto. Para ello, necesitamos recorrer la matriz curDrags , encontrar si alguno de los elementos coincidentes existentes están siendo arrastrado por un toque con el identificador apropiado y mover ese elemento adecuadamente:Finalmente, el evento defunction touchElement(touch) { for(var k in curDrags) { var details =curDrags[k]; if(details.identifier == touch.identifier) { return k; } } } $("#game").on('touchmove',function(e) { var evt = e.originalEvent, elem = this; $.each(evt.changedTouches,function() { var elemIdx = touchElement(this); if(elemIdx !== null) { var loc = targetLocation(elem,this), details = curDrags[elemIdx]; items[elemIdx].x = details.origX + loc.x - details.x; items[elemIdx].y = details.origY + loc.y - details.y; } }); e.preventDefault(); });
touchEnd necesita buscar el toque que está terminando (nuevamente por mirarchangedTouches) y quitar ese elemento de los elementos actualmente arrastrados. Pueden extraer hasta el ejemplo completo en drag.html en su teléfono. dispositivos de iOS y cromo para ICS Android apoyo multi-touch, lo que significa que puede arrastrar varios elementos a la vez, mientras que el navegador Android sólo es compatible con un solo toque.
El segundo tipo de claves de entrada, en la pantalla, es el más fácil, pero también tiene un par de trucos a ella. El objetivo es añadir botones en pantalla, a menudo un conjunto de flechas izquierda y derecha sobre la izquierda y un par de botones de la derecha.
Una vez más, es preferible multitouch como el usuario puede mashing las teclas de flecha derecha izquierda al mismo tiempo que están presionando los botones a o B. La forma más sencilla de lograr esto es mantener una lista de botones y cada vez que hay que un evento de toque prendieron todas las claves a false y, a continuación, recorrer todos los toques activos el elemento de destino en
event.targetTouches y volver a activar los botones. Esto permite a los jugadores mover sus dedos hacia adelante y hacia atrás en el dispositivo sin tener que levantarlos hasta todavía poder presionar los botones.
Ya estamos en
targetTouches, que están disponibles en todos touch eventos y contiene los toques actualmente en el elemento enlazado, podemos utilizar 1 controlador para todos los eventos de toque como a continuación:Retirar keys.html en su teléfono para obtener un ejemplo de esto en acción. Observará las claves aparecen como botones en la parte inferior de la página, pero su éxito es realmente una columna vertical que va hacia arriba y hacia abajo en la página. Esto permite a los jugadores con menos ágiles dedos golpear todavía fácilmente botones individuales.var $canvas = $("#game"), ctx = $canvas[0].getContext('2d'), keys = [ "<", ">", "", "B", "A" ], keysOn = [ ], gutterWidth = 10, unitWidth = ($canvas.width()-gutterWidth) / keys.length, keyWidth = unitWidth-gutterWidth, canvasHeight = $canvas.height(); $canvas.on("touchstart touchmove touchend",function(e) { var touch, elem = this; var evt = e.originalEvent; $.each(keys,function(i) { keysOn[i] = false; }); $.each(evt.targetTouches,function() { var loc = targetLocation(elem,this), key = Math.floor(loc.x / unitWidth); keysOn[key] = true; }); e.preventDefault(); });
Aplican las mismas reglas con arrastrar: iOS y cromo para Android, Multi-Touch está habilitado por lo que se pueden pulsar varios botones a la vez mientras que en versiones anteriores de Android estará limitada a una solo botón de prensa en un momento, pero los usuarios podrán jugar su juego.
Hay un par de formas de hacerlo.
El primero es agregar un único control visible en la página con un centro fijo.
La segunda forma es centro de un control de estilo joystick siempre que un usuario toca primero el dispositivo.
Ambos mecanismos de trabajo, mientras que el segundo es un poco más flexible.
La idea principal en el código es establecer un centro de joystick en
touchstart cuando el usuario toca la pantalla:Una vez que la variablevar joypadSize = 50, joypadCenterSize = 25, joypadTouch = null, joypad = {}; $("#game").on('touchstart',function(e) { if(joypadTouch===null) { var evt = e.originalEvent, touch = evt.changedTouches[0], loc = touchLocation(this,touch); joypadTouch = touch.identifier; joypad = { centerX: loc.x, centerY: loc.y }; } });
joypadTouch está enlazada al identificador, cualquier otros eventos toque pueden mover la parte central del joystick, hasta un máximo. Podemos utilizar el teorema de Pitágoras para calcular la forma de distancia del centro y el método de
Math.atan2 tangente inverso para agarrar el ángulo de la joypad:$("#game").on('touchmove',function(e) { if(joypadTouch !== null) { var evt = e.originalEvent, touch = evt.changedTouches[0], loc = targetLocation(this,touch); // Make sure we're on the right touch if(touch.identifier == joypadTouch) { joypad.x = loc.x; joypad.y = loc.y; var distX = joypad.x - joypad.centerX, distY = joypad.y - joypad.centerY; joypad.dist = Math.sqrt(distX * distX + distY * distY); joypad.ang = Math.atan2(distY,distX); if(joypad.dist > joypadSize) { joypad.x = joypad.centerX + (distX / joypad.dist * joypadSize); joypad.y = joypad.centerY + (distY / joypad.dist * joypadSize); joypad.dist = joypadSize; } joypad.dist *= 100 / joypadSize; } } e.preventDefault(); });
Para impedir que el joypad mover demasiado lejos del centro, el código pone un límite a la distancia total y mueve el joystick hasta el borde del círculo de centro si es necesario.
Por último, en
touchend nos acaba de establecer joypadTouch en null si el toque cambiado coincide con el identificador del toque que hemos estado usando como la pantalla táctil.$("#game").on('touchend',function(e) { var evt = e.originalEvent, touch = evt.changedTouches[0]; // Make sure we're on the right touch if(touch.identifier === joypadTouch) { joypadTouch = null; } e.preventDefault(); });
Pruebe joystick.html del dispositivo táctil para un completo ejemplo de trabajo.
Claves y un joystick analógico se mezclan y coincidentes, añadiendo, por ejemplo, un conjunto de botones de la derecha y un joypad de la izquierda. Consulte joykeys.html para los dos trabajando juntos.
Sonido
Lamentablemente, el sonido es el talón de Aquiles actual de juegos de HTML5 basada en la web.Las restricciones de sonido en dispositivos iOS dentro de Safari son graves: sólo 1 canal de sonido a la vez, sin precarga y todos los sonidos debe ser iniciado por acción del usuario.
En Android, las restricciones son lo mismo esperan para necesariamente se limita a un solo canal pero esto depende del dispositivo y generación de Android están en. Android dispositivos que admiten Flash pueden utilizar como un respaldo.
Lo que todo viene abajo a es que HTML5 audio móvil es un paisaje hostil que no desea intentar afrontar solos.
Mejor apuesta para juegos basados en web es usar software de Jukebox de Zynga código abierto que es diseñado para proporcionar una solución multiplataforma para todas estas cuestiones.
Si tiene pensado en colocar juego en un App store, puede utilizar algo como API multiSound de AppMobi, que es parte de su suite de directCanvas.
Ambos son open source y en GitHub (iOS, Android).
IOS extra casa pantalla Bling
Algunas cosas adicionales que usted puede hacer para que tu juego que es una experiencia más transparente en el móvil agregar unos trozos de información de la meta a la cabeza de su documento para hacerlo funcionar más como una aplicación normal de iOS dispositivos cuando se agrega a la pantalla de inicio.Apple le da cuatro etiquetas meta que hacen esto.
La primera etiqueta indica que su juego es feliz corriendo como una "aplicación" de la pantalla de inicio.
Esto significa que si un usuario selecciona "Añadir a pantalla de inicio" y, a continuación, ejecuta app desde su pantalla de inicio se mostrará maximizada sin una barra de direcciones o pie de página iconos de navegación.
Apple se refiere a esto como "mobile web app capaz" y todo lo que necesita hacer es agregar la siguiente etiqueta meta en su documento
<head>:<meta name="apple-mobile-web-app-capable" content="yes">
Esto no habría sido recomendar para pre-iOS juegos 5 pero JIT de Nitro de Safari de iOS 5 finalmente trajo lanzó homescreen Apps, así que no hay ningún inconveniente para el usuario que ejecuta el juego desde su pantalla de inicio y obtendrán más de pantalla real para jugar.
Mientras que usted no puede deshacerse de él, tienes dos opciones además de la gris por defecto: puede hacer negro o negro y translúcido.
Utilizando el último abrirá el tamaño completo del dispositivo a tu juego, incluso si los superiores pocos píxeles están cubiertos por una barra negra semitranslúcida.
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- or --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Desde negro es el color normal para aplicaciones nativas que dejar visible la barra de Estado, al establecer la barra en negro en lugar del gris de safari por defecto dará su juego una sensación más nativa.
<link rel="apple-touch-icon" href="launch-icon.png" />
Si ya tienes un icono con esquinas redondeadas también puede utilizar la versión precompuesta:
También puede especificar tres tamaños diferentes para manejar nuevos iPhones, iPads y iPhones antiguos (así como Android 2.1 + yapa gratis)
<!-- iPad (72 pixels square)--> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-ipad.png" /> <!-- iPhone4+ (114 pixels square) --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-iphone4.png" /> <!-- older iPhones + Android 2.1+ (57 pixels square) --> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-iphone.png" />
La imagen predeterminada debe ser 320 x 460 píxeles en orientación vertical y se agrega con:
<link rel="apple-touch-startup-image" href="startup-image.png">
Nota: el orden en este caso importa! Puede hacer clic en el botón "Agregar a la pantalla de inicio" en el dispositivo para ver las imágenes de icono y el inicio de lanzamiento.
Conclusión y mejoras
Este artículo ha cubierto los principales fragmentos de código que son específicos de juegos móviles de HTML5, incluyendo cómo planificar para limitaciones de rendimiento, maximizar el área de visualización, manejar controles basados en toque y agregar metadatos específicos del dispositivo.Sin embargo, hay un número de otras optimizaciones que deseará tomar en consideración para llegar a sus jugadores la mejor experiencia.
El primero es el uso de la caché de la aplicación cuando sea posible. Desde dispositivos móviles son menos garantizados para tener acceso a internet en todo momento, sin conexión usando almacenamiento con memoria caché de la aplicación significa que los usuarios pueden cargar tu juego desde su homescreen tiene acceso a internet o no.
La segunda consideración es que en dispositivos móviles, ancho de banda es generalmente más limitado, así asegurándose de que su caché y ETag encabezados están definidos correctamente significa que incluso sin memoria caché de la aplicación todavía puede optimizar la experiencia de carga.
Además, cada solicitud web independiente que el explorador móvil necesita hacer ralentizará la experiencia mucho más significativa que en escritorio, utilizando tanto los trucos estándar de JavaScript minified junto con hojas de sprite asignada garantizará jugadores pasan más tiempo jugando su juego y menos tiempo esperando activos cargar.
0 comentarios :
Publicar un comentario