Como implementar un juego de pilas en una pagina web?

Hola, quisiera saber como incluir un juego hecho en pilas a una pagina web.

Hola @Pan !!!, hay varias formas realmente, para mí la forma más sencilla es pulsando el botón exportar dentro del editor, seleccionar exportar como archivo .zip y luego editando el archivo “index.html”:

Cómo exportar juegos 2020-06-10 14-02-47

Ese archivo index.html es el que inicia el juego y lo muestra dentro de una página
web, así que podrías “mezclarlo” con el maquetado de tu sitio por ejemplo.

Eso sí, ten en cuenta que tu sitio web debería correr dentro de un servidor
web, como nginx o similar, porque pilas carga imágenes mientras carga. Si abris el archivo
index.html directamente desde un explorador de archivos no va a poder cargar las
imágenes.

Igualmente, si tu sitio web está online, seguro está corriendo en un servidor web.

Otra opción, es dejar el juego en el archivo “index.html” o cambiarle el nombre a “juego.html” e incrustarlo dentro de tu sitio web usando un iframe. El Iframe es un elemento de html
que sirve para mostrar el contenido de otro archivo o sitio dentro de una página web.

Por ejemplo, recién hice un minijuego de naves y lo subí al hosting de pilas (pulsando el botón exportar y luego “publicar en la web”), así que para mostrarlo en un archivo .html cualquiera puedo agregar el elemento iframe de esta forma:

<iframe src="https://app.pilas-engine.com.ar/#/proyecto/88b31158-fe7e-47d0-bccf-8e1ced842d75"></iframe>

Y así quedaría en tu página:

Ojo esos botones que se ven arriba para ver el código y usar le modo pantalla completa están porque usé la URL de pilas, en tu caso podrías apuntarlo a un html propio, sin esos botones.

El elemento iframe solo necesita una URL, que puede ser una ruta a un archivo local en tu sitio web como “./mi_juego.html” o una URL absoluta como la que coloqué más arriba. Ah, a este elemento también podes agregarle parámetros como width y height para ajustar el tamaño.

Por cierto, hay más detalles sobre esto en el manual de pilas:

¡Avisame cualquier cosa!

3 Likes

Buenisimo, si conocia lo de iframe, cuando pueda lo pruebo, lo que no entendi del todo es si uso el iframe con el link del juego exportado a la web si, si o si aparecen los botones.

¡Hola @Pan!, me quedé pensando en lo que escribí y se me ocurrió una mejora para que sea más fácil compartir un juego usando un iframe. Recién subí una actualización que mejora la pantalla de exportación así:

En esa parte del texto te retorna el código de un iframe para copiar y pegar en otro sitio. Además, si copias ese código de iframe vas a notar que tiene un argumento al final de la URL para ocultar esos botones que aparecen en la parte superior.

Así debería quedarte el iframe si lo copias y pegas desde el exportador:

¿Que te parece?

Acabo de descargar la ultima version y no me salio esa nueva opcion.
Y al intentar usar la etiqueta “iframe”, no me carga el juego:

1 Like

Uh, que raro… ¿la pantalla inicial de pilas te marca que es la versión más nueva?, debería decirte que es la versión 2.2.5

Otra consulta, si abris el juego con la URL directamente, sin el iframe, ¿levanta bien?

1 Like

Parece ser que cuando habia descargado pilas, no se habia subido la nueva version y si, si uso directamente el link del juego, funciona correctamente.

Ya descargue la nueva version, y use la nueva opcion, y cuando lo puse en mi archivo html, funciono! gracias.

1 Like

ahhh espectacular!!!

1 Like

Es una gran ventaja un motor como pilas,gracias por el dato.

1 Like