Comunidad orientada al desarrollo de videojuegos

Tutorial: empezar a crear juegos HTML5 con WiMi5

En este tutorial de introducción vamos a ver paso a paso como crear un proyecto con WiMi5 y poder visualizar un juego HTML5.

Nuestro objetivo será arrastrar una imagen en la escena que se carga por defecto y poder previsualizarla con el panel de Preview. ¡Empecemos!

1. El primer paso es logearse dentro de https://accounts.wimi5.com. Después veremos la pantalla del Dashboard, desde donde se puede crear, editar o clonar nuevos proyectos. En nuestro caso elegimos Create Project y accedemos al Logic Editor de WiMi5. Desde esta pantalla debemos ir al Scene Editor. Para ello podemos hacer click en la opción Scene Editor del menú Desktop. O también podemos clickar en el icono que aparece dentro del panel Asset Manager.

tutorial juego html5

tutorial juego html5

tutorial juego html5

2. Ahora vamos a subir una imagen desde nuestro ordenador al almacén de archivos en la nube de WiMi5. Todos los recursos tanto sonoros como de imagen han de estar en ese repositorio para poder ser usados. Todos los archivos se gestionan desde el panel Resource Manager que permite subir, ordenar y borrar los archivos. Volviendo al ejemplo, para subir una imagen hacemos click en el icono de carpeta que aparece en la parte inferior del panel Resource Manager. Una vez abierta la ventana del Resource Manager se puede seleccionar la imagen que se quiere subir clickando en Upload… o bien arrastrando la imagen dentro de la ventana. Después hay que elegir el fichero y seleccionarlo para que se pueda usar en el proyecto que estamos editando. Una vez seleccionada la imagen aparecerá en el Resource Manager y podremos arrastrarla al panel Scene View.

tutorial juego html5

3. Ahora vamos a volver al Logic Editor para poder previsualizar el juego. Para ello se puede hacer click en la opción Logic Editor del menú Desktop. O bien se puede clickar en el icono inferior del panel Asset Manager.

tutorial juego html5

4. Ya en el Logic Editor simplemente tenemos que clickar en el botón de Play del panel Preview.

tutorial juego html5

Eso es todo, así de fácil es poder crear un proyecto con WiMi5. Más adelante realizaremos una serie de tutoriales sobre cada parte del Editor de juegos y sobre otros aspectos relacionados con la publicación, la integración de Virtual Goods o la descarga de proyectos.

tutorial juego html5

, , , , , , ,

Leave a Reply