WIMI5 es un editor en línea que permite crear y publicar juegos en formato HTML5. Representa una excelente alternativa a la tecnología Flash para el diseño de animaciones interactivas. El juego resultante es accesible desde cualquier tipo de ordenador, tableta o smartphone

Posada Prieto, Fernando

Repositorio Institucional de la Universidad de La Laguna

      Actas del V Congreso Internacional de Videojuegos y Educación (CIVE'17) ISBN 978-84-697-3849-8 WIMI5, alternativa a la tecnología flash  Herramienta online para el diseño de juegos HTML5  Fernando Posada Prieto  Centro del Profesorado de Lanzarote  Consejería de Educación del Gobierno de Canarias  Arrecife-Las Palmas  fernandoposada@gmail.com         Abstract— WIMI5 es un editor en línea que permite crear y publicar juegos en formato HTML5. Representa una excelente alternativa a la tecnología Flash para el diseño de animaciones interactivas. El juego resultante es accesible desde cualquier tipo de ordenador, tableta o smartphone.   Keywords—html5,videojuegos, animaciones, interacción.  I. ¿QUE ES WIMI5?  WIMI5 es una herramienta en línea que facilita el diseño, publicación y monetización de juegos HTML5. Proporciona una interfaz donde mediante arrastrar/soltar es posible programar fácilmente juegos para la web. Estos juegos se pueden publicar en distintos markets y comenzar a conseguir jugadores de una forma rápida. También contempla monetizar tu juego y obtener beneficios usando distintas pasarelas de pago incluidas en la propia plataforma.  II. WIMI5 EN EL MUNDO EDUCATIVO  En el entorno académico WIMI5 puede ser una excelente aplicación para el profesorado interesado en la elaboración de multimedias interactivos de aplicación en distintas áreas y niveles. Pero también puede ser una herramienta de diseño a utilizar por el alumnado para continuar avanzando en el pensamiento computacional y en el diseño de objetos digitales animados. Con ella se amplían las posibilidades del aprendizaje constructivo. De forma similar a otros programas (Scratch, MIT  •  •  •  •  •  •  •  •  Semántica: permite describir con mayor precisión el contenido de una página web.   Conectividad: facilita comunicarse con el servidor de formas nuevas e innovadoras.  Sin conexión y almacenamiento: admite que las páginas web almacenen datos localmente en el lado del cliente y funcionen sin conexión de manera más eficiente.  Multimedia: ofrece un excelente soporte nativo por defecto para incorporar a las páginas web: audios, vídeos, animaciones, etc.  Gráficos y efectos 2D/3D: proporciona una amplia gama de nuevas características para mostrar gráficos: canvas 2D, WebGL, SVG, etc.  Rendimiento e Integración: aporta una mayor optimización de la velocidad y un mejor uso del hardware.  Acceso al dispositivo: dispone de APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.  CSS3: aporta una nueva gran variedad de opciones para hacer diseños más sofisticados.   IV.   HTML5 VERSUS FLASH        Actas del V Congreso Internacional de Videojuegos y Educación (CIVE'17) ISBN 978-84-697-3849-8 App Inventor, Lego EV3 …), WIMI5  está basado en la filosofía de la programación visual. Esto significa que la lógica del videojuego se construye configurando bloques funcionales y conectándolos entre sí a modo de puzzle. Por tanto esta solución admite integración en los proyectos que se deseen emprender con el alumnado relacionados con la lógica computacional y tras una experiencia previa en Scratch y similares.  III. EL LENGUAJE HTML5  HTML5 es la última versión del lenguaje HTML publicada con carácter definitivo en octubre de 2014. Es un lenguaje pensado para crear páginas web enriquecidas con audios, vídeos, gráficos, imágenes, animaciones, etc. Para ello dispone de nuevos elementos, atributos y comportamientos. Incorpora un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y tener una mayor calidad e impacto.  Hace algunos años Flash revolucionó el mundo de la web y se convirtió en el estándar multimedia por excelencia en Internet. Esta hegemonía se extendió durante unos cuantos años. Prácticamente todos los desarrolladores utilizaban esta tecnología para crear juegos en línea, animaciones y elementos dinámicos en la web. Sin embargo con el tiempo Flash fue decreciendo en favor del estándar HTML5. Entre las razones que justifican este cambio se pueden citar:  • Dispositivos móviles. El auge de las tabletas y los smartphones ha resultado decisivo para el avance del HTML5 frente a Flash. Firmas como Apple se negaron a incluir en sus dispositivos móviles el reproductor de Flash. Por otra parte Adobe, el fabricante de Flash, abandonó en el 2013 el desarrollo y soporte de su reproductor para móviles. Todo ello ha resultado crucial para que los desarrolladores opten por HTML5 como herramienta de creación de juegos interactivos.  Las características más destacadas del HTML5 son:    • Posicionamiento en buscadores. Las páginas creadas en HTML5 son indexadas de una forma más fácil, rápida y eficaz por los buscadores. Los contenidos Flash admite un etiquetado pero no resultan tan accesibles.  • Avances de los navegadores web. Aunque al principio no todos los navegadores web (Internet Explorer, Mozilla Firefox, Chrome, Opera, etc) soportaban la correcta visualización de contenidos creados en HTML5, en la actualidad las últimas versiones los muestran de una forma ágil y eficaz.  • Animaciones interactivas. El lenguaje HTML5 proporciona el elemento canvas que resulta muy potente para construir gráficos, manipular imágenes y realizar animaciones. El gráfico generado se manipula mediante código javascript y un conjunto de funciones API que permite la interacción del usuario: pulsar, arrastrar, pasar por encima, etc. De esta forma es posible crear animaciones complejas que hasta no hace mucho solamente era posible diseñarlas con Flash.  • Accesibilidad. Las personas con discapacidades visuales acceden al contenido de Internet utilizando lectores de pantalla. Se trata de programas de síntesis de voz que leen el contenido de la página web. Esta lectura es más fácil y eficaz en webs creadas en HTML5 y no tanto en Flash.  • Estándares. HTML5 es un estándar para el diseño de páginas web supervisado por el consorcio W3C que vela por el acceso universal a la información en Internet. Por otra parte los contenidos implementados en HTML5 se pueden visualizar en cualquier navegador web sin necesidad de disponer de ningún plugin instalado.  • Coste. El lenguaje HTML5 es una tecnología de libre uso y abierta que no requiere ningún coste para sus desarrolladores. Sin embargo el editor de Adobe Flash es software comercial privativo que requiere un desembolso importante.  V. CARACTERÍSTICAS DE WIMI5  Actualmente existen distintas herramientas para la producción de videojuegos. WIMI5 ofrece interesantes prestaciones:  • Editor en línea. La herramienta de edición no requiere instalar nada en el equipo. Basta con disponer de un navegador web compatible (p.e. Google Chrome), una conexión a Internet y una cuenta de usuario.  • Estándares.  El producto final es un juego construido en tecnología HTML5 que se ajusta a los estándares recomendados por el consorcio W3C y que no requiere instalar ningún plugin en el equipo del cliente.  • Multiplataforma. El editor en línea y el juego resultante se puede ejecutar en cualquier sistema operativo: Windows, Mac, Linux, etc.  • Ubicuidad. Al tratarse de un servicio en la nube es posible acceder a él desde cualquier lugar o equipo y a cualquier hora.  • Fiabilidad. La experiencia de usuario resulta excelente tanto en la creación del juego como en su posterior utilización por parte de los usuarios finales.  • Gratuidad. El registro y utilización de la plataforma WIMI5 tiene carácter gratuito.         Actas del V Congreso Internacional de Videojuegos y Educación (CIVE'17) ISBN 978-84-697-3849-8 • Integración gráfica. El diseño de escenas gráficas se simplifica subiendo y situando objetos distribuidos en escenas y capas sobre el escenario.   • Programación visual. La programación basada en la conexión de bloques usando la acción "arrastrar y soltar" facilita la creación de los scripts.   • Todo en uno. WIMI5 contempla la creación, publicación y monetización desde una misma plataforma.  • Markets. Se permite la publicación del juego diseñado en el propio servicio de WIMI5, en un servidor web o en Chrome Web Store.  VI. REQUISITOS PARA USAR WIMI5  Para poder utilizar WIMI5 es necesario disponer de ...  • Cuenta en WIMI5. Al acceder a la portada principal de WIMI5 pulsa en el botón Sign Up Free (Registrarse gratis). Introduce tu nombre de usuario, email y contraseña. Se recomienda marcar los checkboxes de aceptar las condiciones de uso y la política de cookies así como la suscripción a las novedades. Para terminar haz clic en Sign up free. De esta forma en sucesivos accesos dispondremos de credenciales de acceso a este servicio.  • Navegador HTML5. Es necesario utilizar un navegador web moderno compatible con HTML5. La opción más recomendada es la última versión de Google Chrome  pero se pueden utilizar otros: Mozilla Firefox, Opera, etc. Puedes utilizar la siguiente aplicación en línea para medir la compatibilidad con HTML5 de tu marca y versión de navegador web actual: http://html5test.com  VII. ARQUITECTURA DE LA PLATAFORMA WIMI5  WIMI5 es un sistema que facilita a los desarrolladores de juegos realizar en un mismo espacio las 3 tareas necesarias: crear, publicar y monetizar. Precisamente el valor añadido de WIMI5 consiste en integrar todos estos procesos en una única herramienta facilitando el ciclo de vida de un videojuego HTML5.   Tras autentificarse en la plataforma se accede al Escritorio (Dashboard) donde es posible crear y gestionar los proyectos de juego. La creación de un juego se puede hacer desde cero o bien clonando una plantilla existente. En esta zona también se pueden configurar las propiedades de un juego, publicarlo y administrar sus Bienes Virtuales (Virtual Goods), es decir, los elementos que van a permitir monetizarlo.    Cuando el desarrollador decide crear o editar un proyecto se sitúa en la herramienta Editor del juego (Game Editor). Consta de 2 espacios de trabajo diferenciados: el Editor de Escenas (Scene Editor) y Editor de Scripts (Logic Editor). En el editor de escenas se organizan los elementos multimedia que aparecerán en el juego (imágenes, audios, etc). En el editor de scripts se configuran las acciones y comportamientos del juego.    VIII. ENLACES RELACIONADOS   • Web oficial de WIMI5: http://www.wimi5.com  • Ejemplo de tutorial del curso Aula Mentor-MEC: http://canaltic.com/wimi5/  • WIMI5 en canalTIC: http://canaltic.com/blog/?p=2479    

WIMI5, alternativa a la tecnología flash: herramienta online para el diseño de juegos HTML5

https://riull.ull.es/xmlui/bitstream/915/6792/1/CIVE17_paper_75.pdf

WIMI5, alternativa a la tecnología flash: herramienta online para el diseño de juegos HTML5

Abstract

Similar works

Full text

Available Versions

Repositorio Institucional de la Universidad de La Laguna