Los juegos realizados en Construct 2 están basados en la tecnología HTML 5 y por lo tanto son perfectos para exportarlos a la web. Esta guía incluye información útil a la hora de publicar tus juegos online.
Exportar plantillas
Cuando exportes y selecciones la opción HTML5 website tendrás que elegir una plantilla. Según cual elijas habrá pequeños cambios en la manera de mostrar el juego en el navegador, cada uno de ellos útil según el propósito buscado. La forma de visualizar el juego también depende de la propiedad de proyecto Fullscreen in browser (Pantalla completa en el navegador).
Normal style muestra los juegos a pantalla completa tomando toda la ventana del navegador. Los juegos que no sean a pantalla completa se muestran en la parte superior de la vista y centrados horizontalmente. A continuación se muestra un ejemplo.
Advert bar style es lo mismo que Normal style pero sitúa una barra en la parte inferior del juego y este se muestra en un frame. Los juegos a pantalla completa usan todo el frame (excluyendo la barra) y los que no son a pantalla completa se muestran en la parte superior y centrados horizontalmente.
Ya que siempre hay un sitio reservado en el lateral, puede ser usado para mostrar más contenido HTML como publicidad, navegación u otros. El uso de HTML o la integración de servicios de publicidad está fuera del objetivo de esta guía; la opción está pensada para los usuarios avanzados que quieran mostrar su propio HTML. La barra se puede mostrar en cualquier de los laterales y darle un tamaño personalizado. A continuación se muestra un ejemplo de barra superior de 150px. El texto blanco que se ve se puede cambiar por cualquier otro contenido HTML.
Embed style hace desaparecer todos los márgenes y barras de desplazamiento del navegador y sitúa el juego en la parte izquierda superior. Cuando se usa en un juego a pantalla completa es idéntico a Normal style: en ambos casos se usa toda la pantalla del navegador. Embed style es útil sólo para juegos que no sean a pantalla completa para que la página se pueda mostrar en el tamaño justo del iframe sin ninguna barra de desplazamiento. A continuación se muestra un ejemplo.
Ejecutar los juegos exportados
Normalmente los juegos no se ejecutan en un navegador después de exportarlos al disco. Si haces doble clic en el archivo index.html desde el explorador de Windows, el juego usará una URL file:// en vez de http:// ya que está en tu disco y no en un servidor. Por motivos de seguridad los navegadores tienen algunas limitaciones a la hora de ejecutar una página web desde una URL file://, que impiden la puesta en marcha de los juegos realizados con Construct 2.
Para mejorar tu ritmo de trabajo es mejor hacer vistas previas durante el desarrollo en Construct 2 y, al finalizar, publicarlo en la web después de exportarlo. Si lanzas el juego desde tu disco duro te saldrá un aviso recordándote ("exported games won't work until you upload them") (que el juego no funcionará hasta que los subas a un servidor). Si necesitas hacer test en dispositivos móviles, puedes usar preview-over-Wifi en vez de exportarlo una y otra vez.
En Chrome es posible saltarse las limitaciones de seguridad y probar un juego exportado guardado en el disco. Cierra todas las instancias de Chrome y usa el cuadro de diálogo Run (tecla Windows + R) para escribir:
chrome --allow-file-access-from-files
Cuando Chrome abre de esta manera deberías de poder abrir tu archivo index.html y verlo funcionar correctamente. El mensaje recordatorio puede aparecer, pero puede ser ignorado en este caso. Algunas características podrían aún así no funcionar como las llamadas AJAX a servidores web. El uso de este modo normalmente no es necesario, pero en algunos casos puede ser útil para testear un juego exportado sin necesidad de publicarlo. Si tu intención es ejecutar un juego de forma local en tu ordenador, la opción de exportación node-webkit sería la mejor.
Subirlo a la web
Lo mejor es tener un servidor propio para alojar los juegos en él. Aunque puedes alojarlos en sitios como Dropbox, pueden tener restricciones de ancho de banda y no desearás que tu juego deje de funcionar en cuanto sea popular! Un alojamiento de archivos sin bases de datos es mucho mejor y es fácil de encontrar. Los pasos a seguir para subir tu juego dependen del alojamiento que tengas. Sería bueno buscar ayuda en este paso según lo que vayas a usar. Las formas habituales de subir archivos son el FTP, formularios webs o escritorios remotos.
Si sólo estás creando pequeñas demos para mostrarlas a unos pocos amigos, un alojamiento gratuito debería ser suficiente. Aquí tienes algunas guías para ayudarte:
Subir tu juego a Dropbox
Subir tu juego a Google Drive
Subirlo a Scirra Arcade (en este caso necesitas usar la opción de exportación Scirra Arcade, no la de HTML5 website).
Una vez subido deberías de tener un enlace que puedas compartir para empezar a publicitar tu juego! Si has diseñado tu juego con touch controls y soporte para multiple screen size, debería de funcionar bien en navegadores de dispositivos móviles.
Es frecuente cometer un error al subir el juego: si olvidas subir algún archivo o carpeta, el juego podría no funcionar. Si parece no funcionar, check for browser errors para ver algún mensaje que te aclare lo sucedido (ejemplo "myfile.png returned 404 not found" para indicar que te olvidaste de dicho archivo).
Configuración del servidor
Si tienes tu propio servidor asegúrate que los MIME types son correctos para que funcione el juego. Puedes consultar esto en la entrada del manual setting up MIME types.
Incluir en otra web
Esto sólo es necesario si quieres incluir tu juego en una web diferente a donde está alojado.
La mejor forma de hacer esto es con el elemento HTML iframe. Sólo tienes que dirigir al iframe a la dirección web del juego. Por ejemplo:
<iframe src="http://www.mywebsite.com/mygame" width="600" height="400" />
Esto creará un iframe de tamaño fijo (600x400) donde aparecerá el juego. Si es un juego a pantalla completa, automáticamente se escalará para rellenar todo el tamaño del iframe - útil para ajustar al tamaño reservado en el otro sitio web. Si es un juego de tamaño fijo deberás elegir el estilo de plantilla embed y comprobar que los atributos width (ancho) y height (alto) del iframe coinciden con el tamaño del juego.
Si el juego se incluye en un dominio diferente al que está alojado, las restricciones de seguridad cross-domain pueden afectar al juego. Por ejemplo las llamadas AJAX o las imágenes cargadas desde una URL deben de tener el ajuste CORS apropiado (Cross-Origin Resource Sharing), sino el navegador bloqueará la petición.Normalmente esto se refiere a responder con el header Access-Control-Allow-Origin en la respuesta HTTP del servidor.
También es posible pasar a pantalla completa los juegos incluidos en iframes para que ocupen todo el espacio del monitor. Para hacer esto, tu juego no debe de tener un tamaño fijo - hay usar el modo fullscreen. Luego usa la acción Request fullscreen del Browser object en tu juego. Por último debes añadir el atributo allowfullscreen a la etiqueta iframe de esta manera:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" width="600" height="400" />
También puedes incluir algunos prefijos propietarios porque es una opción relativamente nueva de HTML 5:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" msallowfullscreen="true" width="600" height="400" />
Con todo esto tu juego incluido en un iframe debería poder "liberarse" y ocupar toda la pantalla!