2. Visión general

En esta sección se ofrece una visión general sobre Construct 2, incluyendo la página de inicio, interfaz, estructura del proyecto, los diferentes formatos para guardar el proyecto, exportación y publicación, la tecnología que hay detrás de los juegos y algunas buenas prácticas y consejos de rendimiento a tener en cuenta al usar el programa.

2.1 Página de inicio

Al arrancar Construct 2 por primera vez deberías ver la Página de inicio, algo como:

Esta pantalla te da un buen punto de partida a la hora de usar onstruct 2. Tiene enlaces útiles como Crear un nuevo proyecto, Últimos tutoriales en la web, los proyectos abiertos recientemente, enlaces a nuestras páginas de Facebook, Twitter y Google+ y más.

Tutorial Guía de inicio

Si eres nuevo, te resultará útil el enlace el tutorial Guía de inicio a Construct 2 ⇗. Se trata de una guía paso a paso para ayudarte a crear tu primer juego.

Ejemplos

Si quieres puedes abrir proyectos ya completados para ver como funciona Construct 2, puedes abrir las demos Space Blaster o Ghost Shooter, que son ejemplos avanzados, así que no te preocupes por su complejidad. Sólo pretenden mostrar lo que puede hacer el programa en las mano de un usuario experimentado.

Hay ejemplo más sencillos en la carpeta Examples dentro del directorio donde instalaste Construct 2. Haz clic en Examinar todos los ejemplos para verlos. Hay sobre unos 40 de todo tipo desde simples demos de un juego de plataformas o efectos físicos. Es muy recomendable consultarlos todos. Preguntas habituales como "¿Cómo establezco los controles por defecto?" tienen ejemplos explicando como se hace.

Ajustes

Puedes cambiar los ajustes Mostrar página de inicio al arrancar y Cerrar página de inicio cuando hago clic en algo en el diálogo Preferencias.

2.2 La interfaz

El diagrama siguiente indica las partes importantes de la interfaz de usuario de Construct 2. A continuación se muestra una visión general de cada apartado y luego se analiza cada sección en detalle.

1: Menú archivo y Banda de pestañas (Ribbon tabs)

Construct 2 usa la interfaz ribbon, que es una barra de herramientas con pestañas similar a las del Office 2007 y posteriores. El botón azul con con la flecha hacia abajo en el menú Archivo, y a la derecha del mismo está la Banda de pestañas que modifican la parte inferior con diferentes opciones y botones.

También está la barra de herramientas de acceso rápido con los cuatro comandos más usados: Guardar, Deshacer, Rehacer y Vista previa. Puedes añadir y quitar botones a tu gusto: haz clic la pequeña flecha a la derecha para pesonalizarlo. Si quieres tener muchos comandos en esta barra puedes mostrarla debajo de la banda de pestañas.

2: La vista Layout

Es el editor visual donde sitúas los objetos para diseñar niveles, pantallas de menú y más. Consulta la vista de Layout.

3: Pestañas de vistas

Estas pestañas te permiten moverte entre las diferentes vistas de layout y vistas de página de evento, para definir la lógica del juego basada en sus eventos.

Puedes hacer clic y arrastrar una pestaña en otra de las vistas para ponerlas una al lado de otra.

4: La barra de propiedades

En esta barra verás una lista de propiedades diferente dependiendo de donde hayas hecho clic. Puedes ver y cambiar las propiedade de layouts, objetos, capas y más elementos. Consulta sección Barra de propiedades.

5: Barra de proyecto y Barra de capas

Por defecto la Barra de proyecto y la Barra de capas aparecen aquí en forma de pestañas. La barra de proyecto muestra la visión general de todo en tu proyecto. La barra de capas se puede usar para añadir más capas al layout.

6: Barra de proyecto/ Pestañas de la barra de capas

Esto te permite cambiar entre una y otra barra.

7: Barra de objeto

Contiene una lista de los objetos que hay en tu juego. Puedes coger y arrastrar objetos desde aquí y ponerlos en el layout. El menú contextual (botón derecho) tiene muchas opciones para filtrar o mostra los objetos de forma diferente. Consulta la Barra de objeto.

8: Barra de estado

En la parte inferior de la ventana del editor está la Barra de estado. Muestra:

• que está haciendo Construct 2 durante tareas que llevan mucho tiempo, como exportar o guardar el proyecto.
• cuantos eventos hay en el proyecto y el tamaño de archivo aproximado
• la capa activa, que es donde se colocan los nuevos objetos
• la posición del ratón en coordenadas del layout
• el nivel actual de zoom.

9: Botones en la esquina superior derecha

Al igual que los habituales botones de Windows minimizar, maximizar y cerrar, también tenemos el botón Pin Ribbon para forzar la visualización permanente de la banda de pestañas, y el botón Sobre para abrir el diálogo Sobre con información y créditos sobre Construct 2.

Personalizando

Puedes personalizar la interfaz a tu gusto. Culaquiera de la baras se puede coger y arrastrar a cualquier posición en la ventana de edición. Además, puedes auto-ocultar barras para tener más espacio: haz clic en el icono pin en una barra y se convertirá en una sencilla pestaña. Ponte sobre la pestaña para abrir de nuevo la barra.

La barras se pueden ocultar y mostrar en la pestaña Vista de la banda superior.

También puedes crear una vista de pantalla partida haciendo clic y arrastrando una de las pestañas de página de layout o evento en la vista general. Esto puede ser útil en monitores amplios.

2.3 Estructura del proyecto

Los proyectos de Constrtuct 2 están formados por los siguientes elementos, a los que se puede acceder a través de la Barra de proyecto, que contiene un árbol con todos ellos. Los elementos en la barra de proyecto se pueden organizar en subcarpetas (en las versiones con licencia) lo que es muy útil para proyectos medios o grandes. Para obtener más información, consulta la sección del manual Primitivas del proyecto.

Layouts

Niveles, menús, pantallas de título y otros objetos pre-definidos de los layouts. En otros programas los Layouts pueden ser conocidos como scenes, rooms, frames o stages. Consulta la sección Layouts para ampliar información.

Los layouts también consisten en multiples Capas, que se usan para colocar objetos a distintos niveles de profundidad. Se gestionan a través de la Barra de capas.

Páginas de evento

Una lista de Eventos define la lógica del juego. En Construct 2, los eventos son la alternativa a la programación. Los layouts tienen asociada una página de evento para su funcionamiento. Las páginas de evento pueden ser reusadas entre diferentes layout con event sheet includes. Se editan en la Vista de página de evento.

Para ampiar información sobre los eventos, consulta la sección Eventos, especialmente la página Como funcionan los eventos.

Tipos de objeto

Un tipo de objeto define una 'clase' de objeto. Por ejemplo, EnemigoTroll y EnemigoOgro pueden ser tipos diferentes de objetos. Se pueden crear varias instancias de un tipo de objeto. Por ejemplo, podría haber tres instancias del tipo EnemigoTroll y cinco del tipo EnemigoOgro.

Es importante tener clara la diferencia entre tipo de objeto e instancias: se refieren a cosas diferentes. Para ampiar información, consulta las secciones Complementos, Tipos de objeto e Instancias.

Los tipos de objeto también se pueden agrupar en Familias.

Objeto Sistema

El objeto Sistema representa la funcionalidad incorporada en Construct 2. Es el único objeto que está por defecto en un proyecto vacío. No puede ser añadido de nuevo o borrado. No hay instancias de este objeto: sólo está presente y da acceso a los aspectos incorporados del game engine Construct 2. Sus condiciones, acciones y expresiones están documentadas en la Referencia del sistema.

Sonidos y música

En el juego hay archivos de sonido para los efectos y música. Los Sonidos deberían ser usados para efectos de corta duración que se escuchan cuando ocurren eventos como colisiones o explosiones. La Música debería usarse para pistas de audios más largas. Es importante organizar correctamente los archivos de sonido, porque los sonidos se descargan antes de empezar el juego pero la música se reproduce en stream.

Esto quiere decir que si una tema musical se pone por error en la carpeta Sounds, deberá descargarse del todo (y puede llevar su tiempo) antes del comienzo del juego. Los sonidos colocados en la carpeta Music se reproducen inmediatamente ya que se emiten desde el propio servidor.

Tanto la música como los sonidos tiene que estar disponibles en los formatos Ogg Vorbis (.ogg) y MPG-4 AAC (.m4a). Estos es así porque los desarrolladores de navegadores web no se ponen de acuerdo sobre el formato de audio para la web y cada uno implementa uno diferente! Internet Explorer y Safari usan archivos .m4a y el resto de navegadores (Firefox, Chrome y Opera) usan archivos .ogg. Construct 2 te ayuda a convertir el audio cuando se importa al programa. Consulta Diálogo importar audio y Sonidos y música para ampliar información.

Archivos del proyecto

Se pueden importar archivos externos al proyecto. Para más información, consulta Archivos del proyecto.

Unidades habituales

En Construct 2, a veces necesitas incluir valores como ángulos, velocidade o medidas. Para darle compatibilidad a tu proyecto y evitar errores siempre se usan las mismas unidades, excepto cuando se avise en las desciprciones o se muestre en el editor. Las habituales son las siguientes.

Las posiciones están en pixeles. El origen (0,0) está en la esquina superior izquierda del layout, y el eje Y se incrementa hacia abajo (como es habitual en los games engines).
Los tamaños están en pixeles.
Los ángulos en grados. Los 0 grados están a la derecha y se incrementan en el sentido de las agujas del reloj.
Los tiempos están en segundos.
Las velocidades en pixeles por segundo.
Las aceleraciones están en pixeles por segundo al segundo.

Índices basados en 0

Para ser compatible con los lenguajes de programación, todas las características de Construct 2 que usan un número de objetos en una lista (índices) empiezan en 0 en vez de en 1. Esto puede parecer raro al principio y llevar un tiempo acostumbrarse, pero en la mayoría de los casos es mucho más conveniente que empezar en 1.

Habitualmente las listas se numeran 1,2,3... pero en Construct 2 (y otros lenguajes de programación) se numeran 0,1, 2...

2.4 Guardar y compartir proyectos

Hay dos tipos de proyectos en los que puedes trabajar que se guardan de forma diferente. Esto no afecta para nada a la funcionalidad del juego, pero tiene sus ventajas e inconvenientes durante su edición. Se tiene que elegir uno de los tipo al comenzar un nuevo proyecto.

Proyecto de carpeta

Los proyectos se pueden guardar en una carpeta. Esto almacena las diferentes partes del proyecto en archivos diferentes. Por ejemplo, cada layout se guarda en un archivo diferente en la subcarpeta Layouts.

Los proyectos por carpeta se guardan y cargan más rápido. Esto los hace más adecuados para proyectos medianos o grandes.

También son buenos para colaborar en equipo y que cada uno trabaje en sus archivos por separado para luego juntarlos.

El archivo principal del proyecto tiene la extensión .caproj. Este archivo no contiene todo el proyecto: sólo es una lista con todos los archivos usados. Si quieres compartir un proyecto, este archivo no es útil por si mismo, debería guardarlo proyecto de archivo único (.capx).

Proyectos de archivo único (archivos .capx)

Este tipo suele ser más útil para proyectos pequeños. Sólo hay un archivo para guardar, subir o compartir. No obstante, se guardan y cargan de forma más lenta porque Construct 2 tiene que comprimir y descomprimir el proyecto desde el archivo. También hace la colaboración en equipo más complicada.

Estos archivo son una versión en ZIP de la carpeta de proyecto. Puedes renombrar un archivo .capx a .zip y ver todos los archivos.

Conversión entre tipos

Es fácil pasar de un tipo a otro y viceversa. Abre un proyecto y elige Archivo - Guardar como proyecto... para guardarlo como proyecto de carpeta o Archivo - Guardar como archivo único... para el otro tipo.

Como los archivos .capx son archivos ZIP de la carpeta del proyecto, también se pueden convertir renombrando a .zip y descomprimiéndolo donde quieras. Y a la inversa lo mismo, puedes comprimir la carpeta del proyecto en un .zip y cambiarle la extensión a .capx.

2.5 Probar y publicar

Probar tu juego

Para probar el juego durante su desarrollo puedes realizar una vista previa haciendo clic en el icono "play" barra de acceso rápido o en la banda, presionando F5 o con el botón derecho sobre un layout en la Barra de proyecto y seleccionar Vista previa. De esta forma puede previsualizar el juego sin necesidad de subirlo a Internet.

Si quieres probarlo en otros móviles, tabletas o portátiles/PC, puedes hacerlo de forma sencilla sobre tu red local (por ejemplo Wifi). Para ampliar información, consulta el tutorial Como hacer una vista previa en la red local ⇗.

Debes exportar y luego publicar el proyecto (por ejemplo subirlo) antes de que alguien más pueda jugar. No puedes compartirlo en Internet durante la vista previa.

Exportar

Para exportar el proyecto, usa el Menú archivo, la Banda o la Barra de proyecto para abrir el diálogo Exportar proyecto.

Si estás interesado en los detalles técnicos que los proyectos exportado, consulta la sección Tecnología.

Distribuir tu proyecto

Construct 2 realiza juegos en HTML5 y hay muchas formas de distribuirlos. Puede ser desde tu propio servidor, el Arcade de Scirra ⇗, la Chrome Web Store ⇗, Facebook ⇗ juegos y más. La sección de Tutoriales ⇗ en la web Scirra.com trata cada una de estas opciones que están resumidas en el tutorial Publicar y promocionar tu juego realizado en Construct 2 ⇗.

2.6 Tecnología

Construct 2 crea juegos HTML5 que se pueden jugar online en un navegador web en diferentes dispositivos y sistemas operativos, incluyendo dispositivos portátiles como móviles o tabletas, asegurándote así que tu juego llega a mucha más gente. Esta sección es un resumen de las tecnologías que se usan y está pensada para los usuarios más técnicos, puedes pasarla por alto si te interesa más como usar Construct 2.

Navegadores web

Un navegador es un programa que carga y muestra páginas web en tu ordenador. Los más populares son:

• Internet Explorer ⇗ (HTML5 sólo funciona a partir de la versión 9)
• Mozilla Firefox ⇗
• Google Chrome ⇗
• Opera ⇗

Los Macs también suele traer Safari ⇗. Algunos de ellos también están disponibles para móviles y tabletas.

HTML5

HTML ⇗ iniciales de HyperText Markup Language (Lenguaje de Marcado de Hiper Texto). Es el formato standard de para crear páginas web desde el inicio de Internet. HTML5 ⇗ es la quinta revisión importante de dicho standard y empezó a tener una amplia adopció en el 2011. Incluye muchas características nuevas pero sólo unas pocas se pueden aplicar a los juegos. No obstante, "HTML5" aún es la mejor manera de describir la tecnología usada para crear los juegos en Construct 2. Javascript también es el lenguaje standard para programar páginas web y también se usa para los juegos.

De especial interés en HTML5 es la nueva etiqueta <canvas>, que crea un rectángulo en una página web donde se puede mostrar cualquier contenido. Resulta perfecta para los juegos. Todos los juegos realizados en Construct 2 usan está etiqueta para mostrar el juego.

HTML5 es comparable con la tecnología Adobe Flash que dominó los juegos de Internet antes de 2011, la diferencia es que HTML5 es un standard de toda la industria en vez de un producto controlado por una sóla compañia como Adobe. Flash funciona también como un complemento externo al navegador que ha de ser descargado e instalado por separado, mientras que HTML5 ya está incluido en el navegador. Esto significa que los juegos HTML5 también funcionarán en dispositivos sin soporte Flash como los iPhones o los iPads. Dadas sus ventajas, HTML5 podría reemplazar a Flash en la web.

Javascript

Javascript ⇗ es el lenguaje de programación standard para la web. Permite añadirles interactividad como a las aplicaciones de escritorio tradicionales. Es un standard que acepta toda la industrias implicada.

Javascript no es Java. Son dos lenguajes de progración con un nombre similar. Los applets de Java son una tecnología diferente que puede ejecutarse en una web, pero es totalmente diferente a Javascript. Procura no confundir los lenguajes: los juegos realizados en Construct 2 no necesitan de Java para ejecutarse.

Los modernos navegadores compilan el javascript en el código nativo de la máquina (o las instrucciones de la CPU). Con esto se aseguran que las webs (incluyendo los juegos) que usen javascript se ejecuten tan rápido y eficientemente como sea posible.

Javascript es un lenguaje que recoge mucha "basura", lo que hace a los juegos susceptibles de parase o bloquearse durante esa recogida. Construct 2 está optimizado para crear la mínima basura posible, reciclando objetos cuando sea posible. Todas las instancias de un objeto son recicladas si un objeto es destruído y creado de nuevo. Esto ayuda a mejorar el rendimiento y asegura que el juego funciona con soltura.

SDK de Complementos y Comportamientos

Los programadores de javascript pueden ampliar Construct 2 con sus propios complementos y comportamientos. Para ampliar información consulta la documentación del SDK Javascript.

Renderizadores de Canvas

La etiqueta <canvas> de HTML5 tiene dos formas diferentes de mostrar el juego en la página: un contexto sencillo de 2D y el contexto WebGL basado en OpenGL. WebGL es el doble de rápido y tiene más características, incluyendo soporte para efectos, pero no está soportado en todas las plataformas. La mayoría de los navegadores lo soportan pero Internet Explorer no. Constrcut 2 soporta ambas tecnologías para renderizar el juego. WebGL se puede activar o desactivar el las Propiedades del proyecto. Habitualmente es mejor tenerlo activado, ya que así el juego funcionará más rápido en el modo WebGL y los efectos no funcionarán sin él. Si WebGL no está soportado por el dispositivo del usuario o está deshabilitado, Constuct 2 volverá al contexto 2D. En este caso el juego puede jugarse igual pero irá un poco más lento y no se verá tan bien.

Ya que Internet Explorer no soporta WebGL, si estás usándolo igual es buena idea cambiar a otro navegador como Firefox o Chrome. También puedes avisarle a tus posibles jugadores que hagan lo mismo.

WebGL puede no estar soportado en un ordenador si aún no está habilitado. En este caso se usará el contexto 2D. Puedes comprobar que renderizador está en uso en el propio juego con la expresión de sistema renderer, que devuleve "canvas2d" o "webgl".

Ofuscación y compresión

El código javascript de tu juego se reduce y ofusca con el Compilador Closure ⇗de Google. Esto reduce el tamaño a descargar y dufuculta que alguien pueda descubrir el código usado en tu juego.

Las imágenes están comprimidas en formato PNG. También se comprimen más al exportar para asegurarse que la descarga es lo más pequeña posible. Para ampliar información consulta el artículo del blog Compresión de imágenes en Construct 2 ⇗.

Sonido

Construct 2 soporta la API Web Audio en Google Chrome para efectos de sonido de baja latencia. En otros navegadores se usa la etiqueta standard de HTM5 <audio>.

Soporte offline

Aunque los juegos HTML5 se juegan en un navegador web, los juegos realizado en Construct 2 usan la opción de HTML5 AppCache para permitir que se jueguen cuando no está conectado. Esto es muy útil para las apps de iOS y Chrome Web Store ya que muchos usuarios pueden estar desconectados en el momento de ponerse a jugar. Además, la AppCache ayudar a reducir el ancho de banda en los servidores donde esté alojado el juego: los archivos sólo serán descargados una vez y cuando se vuelva se cargarán localmente desde el disco (mientras realiza una comprobación de actualización silenciosa). Consulta el tutorial soporte offline en Construct 2 ⇗ para ampliar información. El punto más importante es que tu servidor tiene que estar configurado para servir archivos .appcache con el MIME type text/cache-manifest sino el soporte offline no funcionará y provocará que desperdicies mucho ancho de banda.

2.7 Buenas prácticas

Haz copias de seguridad

Nada en tu equipo o en los programas que usas es perfecto, el ordenador puede fallar y los programas se pueden cerrar inesperadamente. Haz copias de seguridad para protegerte frente a pérdidas de datos. Es esencial hacer copias de seguridad en otros sitios. Si todas las copias están en el mismo ordenador o guardadas en discos que están en el mismo edificio, cualquier catástrofe como incendios, inundaciones o fallo encadenado en los equipos pueden causar que pierdas todo tu trabajo con las copias de seguridad.

Construct 2 viene con funciones que hacen copias de seguridad automáticas, incluyendo copias externas usando Dropbox. Para ampliar información consulta el tutorial Mantén tu trabajo a salvo con las opciones de copia se seguridad.

Este consejo no es sólo para Construct 2. Es vital seguirlo en cualquier trabajo importante que tengas en el ordenador. No esperes a perder tus archivos antes de planteártelo. La gente pierde el trabajo habitualmente por tener malos hábitos a la hora de gestionar sus copias, no seas uno de ellos!

Prueba en varios navegadores y dispositivos

Es muy recomendable probar que tu juego funciona como está previsto en varios navegadores. Aunque en teoría HTML5 es un standard que está implementado de igual forma en todos los navegadores, en la práctica hay cambios de un navegador a otro (por ejemplo en rendimiento, características, renderizado de texto, etc). Deberías tener instalados varios para asegurarte que funcionan por igual en todos. Usa la propieda Vista previa en el navegador para probarlo en los de escritorio y Vista previa en una red local ⇗para probarlo en los móviles.

Soporte para pantallas táctiles

Muchos usuarios navegan con dispositivos táctiles sin necesidad de ratón o teclado. Siempre que puedas debería diseñar tu juego para que funciones sobre estos dispositivos, quizás con los controles de toque en pantalla. Para ampliar información, consulta el tutorial controles de toque ⇗.

Formatos de archivo recomendados

Debería preparar tus gráficos y sonidos en otros programas antes de importarlos a Construct 2. Los mejores formatos son:

32-bit PNG (Portable Network Graphics) para la imágenes. Selecciona la opción de 32-bit antes que la de 8-bit para no perder calidad. Los PNGs de 32-bit no tienen pérdida de calidad al guardarlos y soporta un canal alfa de transparencia. Por defecto el Paint de Windows no soporta esta transparencia, elige un editor diferente como Paint.NET ⇗.

Puede elegir otros formatos como JPEG para reducir el tamaño del proyecto acabado. De todas formas y si es posible deberías seguir importándolo en PNG de 32-bit y dejar que Construct 2 lo reformatee al exportar. Para ampliar información sobre este tema consulta el artículo del blog Compresión de imágenes en Construct 2 ⇗.

16-bit PCM WAV para el sonido. Son los clásicos archivos .wav, pero no todos está en este formato. Si estás usando al menos Windows 7 puedes importar un archivo 16-bit PCM .wav a Construct 2 y este lo codificará en AAC y Ogg Vorbis. Son necesarios los dos formatos para que funcione bien en cualquier navegador. Para ampliar información consulta la entrada del manual Diálogo importar sonido.

Seguridad

Nunca incluyas nombres de usuario o contraseñas en los eventos. Estos serán visibles como texto en el javascript exportado y algún usuario con malas intenciones podría hacerse con el control de la cuenta. Si necesitas conectarte a una base de datos, escribe un script de servidor (PHP, ASP...) que lo haga y luego haz una llamada a la URL del servidor.

Rendimiento

Hay varias formas de optimizar el rendimiento del juego para que siempre funcione rápido. Quizá la más importante cuando se desarrolla para móvil es probarla en el dispositivo desde el comienzo. El ordenador puede ser 10 o 20 veces más rápido que el móvil y algo que funciones bien en uno puede ser desesperadamente lento en el otro. Para ampliar información consulta la sección Consejos de rendimiento.

Uso de memoria

Algunos diseñadores incluyen todo el nivel en una sola imagen grande, por ejemplo de 10.000 x 10.000 pixeles. Este método debe evitarse a toda costa. No sólo desperdicia mucha memoria, sino que muchos dispositivos no dan cobertura a imágenes más grandes de determinado tamaño y por tanto tu juego no funcionará para todos los usuarios. Habitualmente el tamaño máximo permitido en todos los sistemas (incluyendo teléfonos móviles) es 2.048 x 2.048 pixeles. Aún así también deberías evitarlas y diseñar niveles que usen imágenes de tamaño medio (por ejemplo 512 x 512) para crear Fondos en mosaico para rellenar el layout, y luego diseñar el nivel poniendo instancias de fondos de mosaico y objetos Sprite. Cada instancia se puede modificar y rotar por separado lo que ayudará a evitar una apariencia repetitiva.

Ten en cuenta que una imagen de 10.000 x 10.000 pixeles usa unos 400 Mb de memoria y puede dejar a algunos ordenadores bloqueados. Por otro lado, un nivel compuesto por tres fondos de 512 x 512 pixeles y 50 objetos sprite diferentes de medidas 200 x 200 usarán menos de 20 Mb de memoria (20 veces menos) - a tener en cuenta al diseñar para la poca memoria que tienen los dispositivos móviles.

Efectos

Recuerda que los efectos necesitan WebGL para mostrarse y no siempre están soportados. Asegúrate de ajustarlo de forma correcta y prueba tus proyectos con WebGL deshabilitado para asegurarte que se verá bien en aquellos sistemas que no lo soporten.

Gestionar los proyectos

Si estás trabajando en un equipo, probablemente usarás algún tipo de programa de control de código como SVN, muy útil para gestionar proyectos basados en carpeta. Puede juntar los cambios y destacar los cambios realizados por cada usuario. También tiene un historial de cambios y se puede volver hacia atrás en cualquier momento. Construct 2 guarda la información del proyecto en formato XML así que se presta bien a este tipo de gestión.

Trabajo individual

Si estás trabajando tú solo en un proyecte, probablemente te será más fácil usar proyecto de archivo único (archivos .capx). Si el proyecto crece mucho notarás que Construct 2 tardará más al guardarlo y cargarlo con los mensajes Descomprimiendo CAPX... o Comprimiendo CAPX en la barra de estado. Llegados a ese punto ya sería más útil convertirlo a un proyecto de carpeta.

2.8 Consejos de rendimiento

Dispositivos móviles

Los modernos ordenadores de escritorio son muy potentes. Habitualmente el principal problema de rendimiento es que el juego funcione bien en móviles y tabletas. Es más complicado conseguirlo por varias razones :

• Tienen un hardware menos potente: CPUs y chips gráficos más lentos y menos memoria.
• Ejecutan Javascript de forma más lenta.
• Algunos dispositivos sólo usan renderizadores por software haciendo que el tazado de gráficos sea muy lento.

Debes probar tus creaciones en dispositivos móviles desde el principio porque probablemente tu ordenador sea diez veces más rápido. Para evitar sorpresas desagradables comprueba con frecuencia el funcionamiento del juego para asegurarte que se ejecuta bien. La opción Vista previa en LAN puede hacerlo de forma rápida y sencilla. Debería de diseñar el juego tan sencillo como bajo sea el potencial de los dispositivos móviles y con una tasa de fotogramas baja (30 FPS puede estar bien).

Los tres siguientes consejos te ayudarán a conseguir un mejor rendimiento en los dispositivos móviles:

1. En las propiedades de proyecto establece 'Pixel rounding' a 'On'. Esto evita que se dibujen objetos entre los pixeles, lo cual puede ser lento en los renderizadores por software de los dispositivos.
   
2. Evita usar demasiado objetos o efectos de partículas, puesto que los dispositivos móviles tienen más limitaciones que los equipos de escritorio para trabajar con ellos.
3. Sitúa los objetos usando los mismo modos de fusión o efectos en la misma capa. Por ejemplo, si tienes muchos objetos que usan el modo de fusión Additive (usado en explosiones, lasers y otros efectos) asegúrate que todos esos objetos están en su propia capa. Asegúrate también que se están en esa capa si los objetos se crean sobre la marcha. Cambiar entre varios efectos puede reducir el rendimiento, y haciendo esto te aseguras que todos los objetos que usen el mismo efecto se dibujan a la vez. .

Exportando a través de CocoonJS ⇗ o directCanvas ⇗ puede incrementar notablemente el rendimiento en Android e iOS si el navegador del dispositivo es lento.

El rendimiento móvil mejorará con el tiempo, así que si ahora tienes problemas, los dispositivos futuros o las actualizaciones de software lo mejorarán.

Motivos principales de un bajo rendimiento

Algunos de los motivos se listan a continuación, aunque puede haber otras razones que ralenticen tu juego. Estas son las principales.

Demasiados objetos que usan Physics
El comportamiento Physics hace un uso muy intenso de la CPU. Usar demasiados objetos con esto ralentiazará mucho el juego. Deberías diseñar tus juegos para que sólo lo usen poco objetos y grandes en vez de muchos y pequeños.

Crear demasiados objetos
Aunque los ordenadores modernos son muy rápidos, aún tienen una capacidad de proceso limitada. Crea más de 1.000 objetos posiblemente provoque una ralentización del juego. Intenta diseñar el juego para no necesitar tantos objetos. La expresión del sistema objectcount te dirá cuantos objetos estás usando.

Comprobar demasiadas colisiones
Probar las colisiones o el solapamiento entre dos tipos de objeto, cada uno con 100 instancias, necesitaría 10.000 comprobaciones de colisión. Si esto se hace en cada en ciclo a una tasa de 60 fotogramas por segundo serán 600.000 comprobacione de colisión por segundo, lo cual es mucho trabajo para el procesador. Intenta sólo comprobar las colisiones cuando sea necesario o con un temporizador (por ejemplo una vez por segundo) o usa menos objetos.

Usar demasiados efectos
Los Efectos son visulamente atractivos, pero pueden ralentizar mucho el juego se se abusa de ellos, especialmente en dispositivos móviles. Usar un efecto en un objeto con demasiadas instancias es especialmente lento - habitualmente es mucho más eficiente situar los objetos en una misma capa y luego aplicar dicho efecto a la capa en si. Esto permite que el efecto procese todo de una vez en vez de aplicarlo una y otra vez sobre cada pequeño objeto.

Uso innecesario de efectos
Nunca uses efectos para procesar efectos estátivos en un objeto. Por ejemplo, no uses el efecto 'Escala de grises' para hacer que un objeto aparezca siempre en blanco y negro. Esto reducirá el rendimiento cuando puedes hacer lo mismo importando una imagen en blanco y negro, sin necesidad de aplicar ningún efecto.

Usar demasiadas partículas
El objeto Partículas puede crear fácilmente cientos de partículas. Cada una de ellas es como un sprite, por tanto pueden rápidamente consumir toda la capacidad de procesamiento. Evita usar más de un par de cientos de partículas en equipos de escritorio. Es recomendable no usarlas para dispositivos móviles si es posible; si aún así las usas, usa las mínimas posibles con tasas bajas. La expresión ParticleCount te ayudará a contar cuantas has creado.

Usar Sprites en vez de fondo en mosaico (Tiled Backgrounds)
Crear demasiado objetos puede causar bajadas de rendimiento y un error muy común es usar una cuadrícula de objetos Sprite en vez de objetos de Fondo en mosaico. Por ejemplo una cuadrícula de 20x20 sprites tiene 400 objetos lo cual tiene un impacto significativo en el recuento de objetos. Un sólo fondo en mosaico puede reemplazarlos y sólo cuenta como un objeto. Los fondos en mosaico están optimizados para repetir la textura así que en este caso literalmente es 400 veces más eficiente que la cuadrícula de sprites. Siempre que sea posible usa los fondos en mosaico.

Usar un navegador lento
No todos los navegadores tienen el mismo rendimiento. Conseguirás un mejor rendimiento en el navegador probando una amplia variedad de ellos.

Sin aceleración de hardware
Normalmente y aún usando el renderizador Canvas 2D este usa aceleración por hardware de la tarjeta gráfica del ordenador. Pero algunas veces el Canvas 2D usa renderizadores por software más lentos. No hay un manera fácil de explicarlo pero normalemente indica peor rendimiento en un sistema. Pruébalo en varios sistemas para comprobar si el bajo rendimiento es sólo en uno y asegúrate de tener actualizados los controladores de la tarjeta gráfica ⇗.

Usar demasiados bucles
Esto es más raro, pero usar demasiados bucles como For, For Each y Repeat pueden provocar la ralentización del juego; especialmente los bucles anidados. Para probar si este es el problema, intenta deshabilitar temporalmente los eventos de bucle.

Ideas falsas sobre rendimiento

A los siguiente motivos habitualmente se les acusa de afectar al rendimiento (como es, la tasa de fotogramas en tiempo de ejecución) pero probablemente tiene poco o ningún efecto:

Los formatos de imagen (por ejemplo JPEG, PNG-8, PNG-32) afectan al tamaño de descargar pero no tiene influencia al ejecutar el juego (todos se descomprimen a mapa de bits de 32-bit al empezar).

Los formatos de audio lo mismo, sólo influyen en el tamaño descarga no en el rendimiento.

El número de capas habitualmente tampoco tiene influencia, a menos que muchas de las capas hayan cambiado su transparencias, tenga muchos efectos aplicados, tengan modos de fusión diferentes a 'Normal' o usen 'force own texture'. No obstante no hay un impacto en el rendimiento al usar varias capas con los ajustes por defecto.

El número de layouts tampoco tienen ninguna influencia salvo en el tamaño de descarga del juego.

El tamaño, ángulo y transparencia de los sprites/fondos en mosaico y posiciones de punto flotante (por ejemplo situar un sprite en X = 10.5) no tiene influencia cuando está en uso la aceleración por hardware. Esto puede resultar un poco sorprendente pero las tarjetas gráficas modernas normalmente renderizan a la misma velocidad un sprite pequeño como uno grande (a pantalla completa o aún más grande) y sin importar su ángulo, transparencia o posición. De todas formas, si el juego es renderizador por software, si que puede tener importancia en su rendimiento; pruébalo en una amplía variedad de sistemas.

WebGL

WebGL ayuda a los juegos a ejecutarse más rápido en los ordenadores de escritorio. Este sistema es dos veces más rápido que el renderizador Canvas 2D, así que para mejorar el rendimiento deberías asegurarte que está activado en las propiedades del proyecto. No obstante, WebGL no siempre está soportado así que activarlo no garantiza que el juego se mostrará con WebGL. Usa la expresión del sistema renderer para determinar cual se usa.

Hay varias razones por las que WebGL puede no estar soportado:

• El navegador no lo implementa. Por ejemplo, actualmente Internet Explorer no lo soporta, siempre usar el renderizador Canvas 2D, más lento. Para mejorar esto, sólo te queda usar un navegador compatible como Firefox o Chrome.
  
• El controlador de tu tarjeta gráfica no está actualizado. Para garantizar una experiencia de navegación estable, los navegadores a veces deshabilitan WebGL si se sabe que la tarjeta gráfica es problemática. Al actualizar el controlador de tu tarjeta gráfica ⇗ puedes resolver este problema.
• Tu ordenador es demasiado antiguo o tiene hardware que no soporta esta tecnología. Algunas gráficas antiguas no tienen ningún tipo de soporte para WebGL. Si es posible hazte con una más moderna para corregir esto. No obstante, no olvides que tu juego aún se puede usar con el renderizador Canvas 2D - sólo que será un poco más lento.
  

Más avisos

Para ampliar información y avisos sobre rendimiento consulta el artículo del blog Optimización: no desperdicies tu tiempo ⇗.

Pruebas y medida

Desde el comienzo de tu proyecto deberías usar un indicador de tasa de fotogramas y estar al tanto de su rendimiento. Esto te permitirá saber si un cambio en particular afecta seriamente al rendimiento global.

Prueba tu juego en tantos sistemas y navegadores como sea posible.

Si piensas que algo está causando problemas normalmente es fácil probarlo en teoría: haz una copia de seguridad del proyecto, borra el elemento en cuestión y comprueba si la tasa de fotogramas ha mejorado. Si esta así ya tiene al causante del problema, si no, tienes que seguir buscando.

Siempre mide el rendimiento. Los sistemas de ordenador son complejos y hay muchos resultados imprevistos en el rendimiento. La única forma de saber qué efecto se tiene sobre el rendimiento es medirlo. Si no puedes apreciar una diferencia sustancial es que probablemente no le afecte.

Como medir el rendimiento

Hay dos expresiones de sistema que son importante para esto:

fps - devuelve la tasa actual de fotogramas por segundo. Habitualmente la más alta es 60 por segundo pero puede cambiar dependiendo del sistema.

renderer - devuelve canvas2d o webgl dependiendo del renderizador en uso. WebGL es el doble de rápido pero no siempre está disponible. Para ampliar información consulta la sección Tecnología.

Puedes mostrar cualquiera de ellos en un objeto Text para estar atento al rendimiento mientras pruebas el juego. Puede usar una acción como:

Set text to fps & " FPS (" & renderer & ")"

Esto mostrará una cadena de texto como 60 FPS (webgl) indicando ambos valores, la tasa de fotogramas y el renderizador usado.