Aravid

Tutoriales, Gamer Sense, opinión y más

Archivos mensuales: abril 2012

Scaleform: Creación del Interfaz I

Ahora que ya sabemos qué tenemos que hacer para crear un fichero, vamos a continuar con el siguiente aspecto: la creación de un interfaz en Flash para poder integrarlo en UDK.

Advertencia: Mi intención no es hacer un tutorial de Flash y Scaleform, sino sólo de Scaleform. Así que asumo que al menos, conocéis algo de Flash, como dónde están los paneles y algunas de las opciones más utilizadas, porque no entraré en detalle en algunos aspectos como dónde se encuentra el panel de propiedades o cómo mostrar la biblioteca.

Abrimos el fichero que vamos a utilizar para crear el interfaz, y lo guardamos como se comentaba en el artículo de UDK: Estructura de carpetas en \UDKGame\Flash\Nombre_Package sustituyendo el Nombre_Package por el nombre del paquete de assets al que queremos añadir el fichero de Flash, porque al importar la película, no podemos seleccionar a qué paquete lo añadimos, lo hace directamente en uno con el nombre de la carpeta en la que se encuentre. Para mantener la nomenclatura de todos los ficheros yo lo hago en \UDKGame\Flash\DCleanerAssets.

Ya tenemos el fichero guardado y, a continuación, tenemos que abrir en otra pestaña el fichero “CLIK_Components.fla” que se encuentra en \Development\Flash\CLIK\components. Ahí tenemos en la zona de trabajo todos los elementos preparados para trabajar directamente con ellos. Mi recomendación es la siguiente:

  1. Cogemos el elemento que nos interese de la biblioteca y botón derecho -> Copiar.

    Hemos seleccionado Button, y botón derecho -> Copiar

  2. En nuestro fichero, en la biblioteca, botón derecho -> Pegar.

    Ahora, en la biblioteca de nuestro archivo, botón derecho -> Pegar

Ahora, en nuestra biblioteca tenemos el widget, que para entendernos, es como tener la clase del botón. Cuando queramos añadir un botón, arrastramos el widget de la biblioteca a la zona de trabajo y le damos un nombre de instancia para poder identificarlo en el código.

Es importante destacar que si añadimos varias veces el mismo widget, aunque cada uno tenga un nombre de instancia distinto y actúe de manera independiente a nivel de código, si modificamos el aspecto del widget, todas las instancias del mismo serán modificadas a dicho aspecto. Para evitarlo, se puede realizar lo siguiente.

  1. Botón derecho -> Duplicar en la biblioteca sobre el widget que queremos duplicar. Por desgracia, algunos aspectos del widget no se duplican al realizar este proceso y hay que hacerlo a mano.

    Botón derecho sobre el widget a duplicar, y en el menú contextual, seleccionamos Duplicar

  2. Botón derecho -> Propiedades sobre el widget original y ahí copiamos el contenido del campo Clase.

    Propiedades del widget Botón que hay en la biblioteca

  3. Por último, botón derecho -> Propiedades sobre el widget duplicado, y en el campo Clase, que estará en blanco, copiamos el valor que hemos copiado anteriormente. En el campo de Nombre seleccionamos un nombre que será el mostrado en la biblioteca, para diferenciarlo de otros widgets, y activamos los dos ticks que están desactivados.

    Ejemplo de cómo debe de quedar la ventana de Propiedades de un Botón duplicado

Ahora que ya sabemos cómo conseguir los widgets necesarios para hacer nuestra interfaz, vamos a realizar una interaz de ejemplo, como puede ser un menú de pausa, con un Label y dos Buttons. Detallo el proceso y añadimos también la incrustación de las fuentes:

  1. Traemos un widget de Label del CLIK_Components a nuestra biblioteca.
  2. Traemos un widget de Button del CLIK_Components a nuestra biblioteca.
  3. Cambiamos el nombre de la capa que hay por uno que nos permita identificarla más fácilmente, como “Menú”
  4. Arrastramos a la parte superior el widget de Labe, y en el panel de propiedades de la instancia, en el campo de “text”, ponemos “Menú de pausa”. Es normal que el texto no cambie en la zona de trabajo, el cambio se verá cuando probemos la película.
  5. Arrastramos dos botones, que centraremos, y en el panel de propiedades, en el cuado de “Nombre de Instancia” ponemos un nombre para poder acceder a él desde el Actionscript. Yo voy a poner “Btn_Continue” a uno y “Btn_Exit” al otro. En el mismo panel, en “label”, ponemos “Continuar” y “Salir”.

    Así debería de quedar el botón de Continuar. El botón de Salir es similar, cambiando los valores de los campos en rojo

  6. Ahora si probamos la película usando el botón de “Test with FxMediaPlayer” como comentaba en el tutorial de configuración de Flash, veremos que las fuentes no funcionan correctamente (salen cuadraditos en vez de los caracteres), esto es porque no hemos incrustrado la fuente. Hacemos click en Texto -> Incrustación de Fuente.

    No se entiende nada de nada, parece escrito en Quenya

  7. Pulsamos en el “+” y seleccionamos la fuente que acabamos de crear. Ahora en el panel de la derecha podemos elegir la fuente y el estilo de la fuente.

    En la fuente que añadiré, seleccionaré la Trajan Pro, de estilo Regular, como muestra la imagen

  8. No es lo más recomendable, pero si no queréis tener problemas con los caracteres, podéis seleccionar de los rangos de caracteres, que incluya todos. Una mejor optimización sería Latín Base, Signos de puntuación y añadir a mano las vocales con tílde y la ñ en el cuadro dedicado a ello.

    En la imagen muestro la opción rápida y sucia, que es el incrustado de todos los glifos. Viviendo al límite

  9. Ya tenemos la fuente, ahora tenemos que especificar en nuestros widgets que tienen que utilizar esta fuente. Vamos al panel de biblioteca, botón derecho en el widget a modificar y a Editar.
  10. Seleccionamos la capa que contiene el texto, y la desbloqueamos (viene bloqueada por defecto). 
  11. Seleccionamos el texto y en el panel de propiedades debe de aparecer un desplegable para seleccionar la fuente. En él, seleccionamos la fuente que hemos creado. En este panel también podemos seleccionar el formato, yo especificaré que los textos estén centrados.

    Hacemos click en el desplegable, y a continuación, en nuestra fuente

  12. Ahora debemos repetir desde el paso 9 con cada uno de los widgets que tengamos en la biblioteca. Podemos crear varias fuentes para asociar a cada widget una fuente distinta, pero recordar que todas las instancias del mismo widget reflejaran los cambios.
Aviso: Al modificar la fuente, hay que tener en cuenta en qué rango de fotogramas lo modificamos. En el botón, por ejemplo, la fuente tiene 2 rangos, uno que es cuando el botón está en reposo, el cursor está sobre él y pulsado, y otro rango que es con el botón desactivado. Si vamos a tener en algún momento el botón desactivado, tendremos que seleccionar un fotograma de dicho rango y modificar la fuente ahí también.

Ya tenemos el esqueleto de nuestra interfaz con sus dos botones, y una etiqueta que nos informa que nos encontramos en el menú de pausa.

Mucho trabajo para tan poca cosa, ¿verdad?

Con algo de imaginación, podemos realizar casi cualquier tipo de interfaz. Pero ahora tenemos un problema, y es que no tenemos una manera de darle a los botones, necesitamos un puntero para poder hacer click en ellos. Este será nuestro siguiente paso. Lo veremos en el siguiente tutorial.

ScaleForms: Configuración de Flash

ScaleForms es un middleware que nos permite la utilización de películas de flash en UDK y la interactuación con ellas. Algunos de los ejemplos son un menú de pausa, un minimapa o un HUD en nuestro juego. Antes de poder realizar un fichero de flash para utilizarlo en UDK, hay una serie de pasos previos que explicaré en este artículo.

Primero, configuramos el entorno. Yo voy a explicar Adobe Flash, aunque existen alternativas gratuitas para la realización de este tutorial, como es el tándem de Vectorian Giotto (http://vectorian.com/giotto/) y Flash Develop (http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page)

Configuración:

  1. Abrimos el Flash, y vamos a Ayuda -> Administrador de Extensiones -> Instalar.

    Esta es la ventana del Administrador de Extensiones del Flash CS5, que es el que utilizo.

  2. Al presionar Instalar, buscaremos el fichero “Scaleform CLIK.mxp” que se encuentra en UDK\Binaries\GFx\CLIK Tools.
  3. Reiniciamos Flash.
  4. Hacemos click en Ventana -> Otros Paneles ->Scaleform Launcher.
  5. En el panel que ha aparecido, pulsamos el botón con un “+”.
  6. En el campo de Profile Name, podemos escribir cualquier nombre, por ejemplo FxMediaPlayer. A continuación, volvemos a pulsar en el “+” y seleccionamos “FxMediaPlayer” que se encuentra en UDK\Binaries\GFx.
  7. Presionamos Ok, y cuando queramos probar la película, tal y como se ejecutará en el juego (a veces falla en algún elemento, pero es una ayuda para poder comprobar la película rápidamente) debemos de pulsar el botón de “Test with FxMediaPlayer”.
  8. Hacemos click en Editar -> Preferencias -> ActionScript -> Configuración de ActionScript 2.0.
  9. Pulsar sobre el “+” y luego sobre el icono de la carpeta.
  10. Buscar UDK\Development\Flash\CLIK y a continuación, seleccionar su entrada, y hacer que se quede la segunda, tal como muestra la imagen de arriba, aceptamos y hemos terminado la configuración.

Nota: Este proceso hay que realizarlo sólo una vez, y no con cada fichero de Flash que tengamos intención de utilizar en UDK.

Ahora ya tenemos configurado el entorno, el siguiente paso es la configuración del nuevo archivo que vamos a crear.

Creación de un fichero nuevo:

  1. Hacemos click en Archivo -> Nuevo. Una vez ahí, seleccionamos ActionScript 2.0 y aceptamos.
  2. Ahora vamos a Archivo -> Configuración de la publicación.
  3. En la pestaña de Formatos, desmarcamos la casilla de HTML.
  4. En la misma ventana, en la pestaña de Flash, en el desplegable de Reproductor, seleccionamos Flash Player 8.
  5. Aceptamos, y ya podremos guardar el fichero preparado para que pueda ser importado en UDK.

Aviso: Los elementos que nos permite utilizar Flash por defecto para añadir a nuestro documento en blanco, no funcionarán correctamente sin una configuración previa. Los elementos que podrán ser utilizados y cómo utilizarlos se comentarán en el siguiente tutorial.

Nota: La configuración mostrada aquí, utiliza el reproductor de Flash 8.0 y el ActionScript 2.0. Puede ocurrir que alguien quiera utilizar ActionScript 3.0, ya existe soporte para él, pero no he investigado más allá porque no he tenido necesidad.

Con esto hemos terminado el primer tutorial de ScaleForms, que es la preparación de Flash. A partir de ahora, cuando tengamos que trabajar sobre un fichero de flash, debemos de seguir los pasos de creación de un fichero que hay aquí.

Gamer Sense: FF IX

Recientemente he terminado el Final Fantasy IX con mi PSP, que para mí, es la plataforma perfecta para jugar RPGs, porque siempre la llevo encima y aunque sea a ratos, le dedico más tiempo al juego que en cualquier otra plataforma.

En líneas generales, el juego me ha gustado, pero éste es un artículo de Gamer Sense, así que voy a comentar los detalles que lo despertaron. Aunque hay más de uno, me centraré en hablar de los personajes. También voy a intentar reducir al máximo la cantidad de spoilers en el artículo.

Personajes FF IX

Todos los personajes jugables del Final Fantasy IX

Entre los personajes de la imagen superior se encuentran aquellos más relacionados con la historia principal. No todos son protagonistas, pero, al menos, han tenido momentos de importancia en el juego. Coincide que estos han sido, a mi parecer, los más desarrollados, y además, tienen carisma (un detalle importantísimo). Estos son Yitán, Daga, Viví, Steiner y en menor medida, Eiko.

El que sean personajes arquetípicos no me molesta realmente si los personajes están bien hechos, como ocurre con los que he comentado arriba. Pero en el otro lado están Amarant, Quina y aunque me duela, Freija. Estos personajes me da la impresión de que fueron colocados al final del desarrollo, porque no querían dejar el juego con un plantel tan reducido

Amarant Coral

Amarant Coral

Amarant es Vegeta con un aspecto diferente. Al principio es malo y luego se hace bueno. Comienza siendo un individualista que no entiende eso de jugar en equipo y tengo mis dudas de que cambie al final del juego, aunque hay un momento bastante forzado para que se redima. Lo de cambiarse de bando bien llevado puede ser bueno, de hecho, hay un montón de personajes que son malos, se hacen buenos y mola. Éste no es el caso.

Es un personaje olvidado que no aporta nada, a excepción de un momento en Treno. Ahí cuenta a Freija su primer encuentro con Yitán años atrás, del que él no recuerda nada. En este momento, da la sensación de que podría suceder algo interesante con este personaje, pero no es así. Además, al hablar con los aldeanos en esta visita a la ciudad, se preguntan por qué ha vuelto cuando está buscado por la ley (a raíz del encuentro, Amarant es buscado), pero después de tanta preparación, no ocurre absolutamente nada.

Yo creo que pensaron que ya que tenían el modelado hecho, sería un desperdicio tirarlo, así que lo integraron en el grupo como pudieron. Y esa sensación es horrible, y me ocurrió tanto con Amarant como con Quina.

Quina Quen

Quina Quen

Quina es un personaje que directamente me produjo un cierto rechazo por su aspecto, eso quizá me hizo juzgarlo con más dureza, pero es que no entiendo su finalidad. La historia principal, por llamarlo de alguna manera, no le importa lo más mínimo. Ella tiene su motivación personal que es probar la comida de todos los rincones del mundo y no entiendo cómo encaja esto con el grupo. Además que, al igual que Amarant, su inclusión al grupo no aporta nada.

La sensación se hizo más fuerte cuando en tu grupo sois tres y tenéis que seguir a los otros dos miembros que se separan. En mi caso, el tramo hasta el reencuentro se me hizo realmente duro y fui aniquilado un par de veces. Finalmente, en un momento durante el camino, me dio por investigar un lugar intermedio (el pantano Qu) para subir de nivel, y allí lo encontré y se unió. Una vez estuvo en mi grupo, la zona fue asequible. Desde ese momento, tuve la sensación de que fue colocado ahí.

Freya Crescent

Freya Crescent

Y por último, Freija. Me duele tener que incluirla porque usa lanzas, que es un arma que me encanta, pero que todo el potencial del personaje sea desperdiciado, me descoloca. Al encontrarla por primera vez, habla de su amado Flatley, que partió hace años, y desde entonces, lo busca sin descanso. La idea está bien, y en el momento de contarlo, me imaginé que a lo largo del juego, aparecería varias veces, tendría alguna razón rocambolesca para haberse marchado sin decirle nada, pero una vez más, me equivocaba.

A lo largo del juego, tan sólo recuerdo una aparición de él, para decir que… ¡tiene amnesia! El juego goza de gran cantidad de estos clichés maravillosos (no me molesta si se usan bien, pero aquí tengo mis dudas). El caso es que le dice que no se acuerda de ella para nada, y que ha venido un momento para salvar la situación, para a continuación, desaparecer. Literalmente. Hasta la secuencia final del juego. En la que sigue teniendo amnesia, pero dice que ahora podrán crear recuerdos juntos. ¿Entonces para qué desapareces todo el juego y luego vienes para crear recuerdos? ¿Qué te ha motivado volver en ese momento y no en ningún otro? ¿La aventura de salvar el mundo no te parece un bonito recuerdo, y de paso vengar la destrucción de tu país?

Como conclusión, quiero decir que un personaje no jugable, como es Beatrix, consiguió transmitirme muchísimas más sensaciones y un mayor interés que los tres personajes arriba comentados. Es por eso que sé que tienen la capacidad de hacer un gran trabajo con los personajes, pero no lo hicieron con estos tres, por ello, pienso que fueron una inclusión de última hora.

UDK: Estructura de carpetas

El siguiente paso, una vez tenemos las herramientas instaladas y correctamente configuradas es entender cómo gestiona UDK un proyecto y dónde debemos colocar las cosas para que sean visibles desde UDK. También es importante conocer ciertos archivos que se esconden en la estructura de carpetas de la instalación, así que la comentaré, haciendo hincapié en los ficheros que utilizaremos, y las carpetas que debemos crear para nuestro proyecto.

En la instalación limpia, disponemos de las siguientes carpetas:

  • Binaries
  • Development
  • Engine
  • UDKGame

Ahora comentaré una a una las carpetas, y la importancia detrás de cada una de ellas.

Binaries

UnrealFrontend.exe será nuestro centro de operaciones, desde él tenemos acceso a todo lo que nos permite UDK.

Captura de pantalla del UnrealFrontend, con el proyecto que estoy realizando, DCleaner

No voy a entrar en muchos detalles, porque el UnrealFrontend merece un artículo para él solo. Sí que os digo que en el menú de la izquierda salen los distintos proyectos que están disponibles para trabajar, pero ya comenté que no es recomendable trabajar con más de un proyecto por instalación de UDK, por eso sólo tengo uno.

UnrealFrontend.Profiles

Es una carpeta donde, en formato xml, se almacenan los datos de los proyectos, que son leídos por el UnrealFrontend. Aquí no es necesario hacer nada, porque los cambios realizados se guardan automáticamente, pero es importante conocer la existencia de la carpeta, por si utilizáis algún sistema de control de versiones para añadir el fichero de información del proyecto.

Recomendación: Para conseguir un proyecto propio, lo mejor es clonar uno ya existente, renombrarlo y eliminar todos los mapas que están añadidos. Una vez hecho esto, ya podemos comenzar a utilizarlo.

Development

Dentro de Development, tenemos la carpeta de Src, y dentro de ella, debemos de crear una carpeta para nuestro trabajo. Si nuestro proyecto se llama DCleaner, lo recomendable sería mantener ese nombre para las carpetas.

  1. Development
    1. Flash
    2. Src
      1. DCleaner
        1. Classes

Como se ve en el esquema de arriba, la carpeta DCleaner tiene que ser creada en Src, y dentro de la carpeta que hemos creado, tenemos que crear una llamada Classes. En esta carpeta, se guardarán todos nuestros ficheros en UDKScript, con extensión .uc, pero no es suficiente para que UDK lo encuentre. Tenemos que especificarlo en un fichero de configuración. En el siguiente apartado, se comentará la ubicación del fichero.

Engine

Nada importante para nosotros.

UDKGame

En este fichero es donde estará casi todo nuestro juego, a excepción de los ficheros de UDKScript. Vamos poco a poco:

Config

Lo que voy a decir suena raro, pero la lógica utilizada aquí a veces lo es. Si observáis la carpeta, veréis que la mayoría de los ficheros están duplicados con un nombre ligeramente distinto, por ejemplo, DefaultInput.ini y UDKInput.ini. El sentido común podría dictarnos que el fichero DefaultInput.ini no debería de ser tocado, ya que son los valores por defecto, y tendremos que trabajar con el otro. Pues no.

El fichero con el que debemos trabajar es con el Default, porque los otros ficheros, cada ejecución de Unreal, son borrados y creados de cero, para asegurar que los valores se mantienen. Una vez comentada esta curiosidad, hablaré de los ficheros que debemos cambiar, y lo importante dentro de cada uno de ellos:

DefaultEngine.ini Aquí es donde especificamos la carpeta creada arriba, donde están nuestros ficheros de UDKScript, para que sea tenida en cuenta por el motor. Tenemos que buscar el bloque [UnrealEd.EditorEngine] y al finalizar el mismo, añadir la línea +ModEditPackages=DCleaner (siendo DCleaner el nombre de vuestra carpeta). Debería de quedar así:

[UnrealEd.EditorEngine]
+EditPackages=UTGame
+EditPackages=UTGameContent
+ModEditPackages=DCleaner

Hay más bloques que podrían modificarse, pero tienen menos importancia, como el bloque de [FullScreenMovie] donde se especifican las películas de carga. El necesario es el de arriba para que nuestros ficheros de UDKScript sean compilados.

DefaultGame.ini Aquí hay que especificar algunos ficheros de UDKScript, pero que aún no hemos creado. Os diré qué serán esos ficheros, y la convención de nombres utilizada. Primero, os copio el bloque concreto que hay que modificar, y las primeras seis líneas:

[Engine.GameInfo]
DefaultGame=DCleaner.DCleanerGI
DefaultServerGame=DCleaner.DCleanerGI
PlayerControllerClassName=DCleaner.DCleanerPC
GameDifficulty=+1.0
MaxPlayers=32
DefaultGameType=”DCleaner.DCleanerGI”;

De todo el bloque, tenemos que modificar las primeras tres líneas, y la sexta. El primer DCleaner, que antecede al punto, es la carpeta de nuestros ficheros, que se llama DCleaner, y después es el nombre del fichero de UDKScript.

El fichero DCleanerGI es el Dungeon Cleaner Game Info, en él se especifican las clases que definen aspectos del juego, como la clase que controlará al jugador, la clase que definirá al jugador o la clase que especificará el HUD utilizado.

El fichero DCleanerPC es el Dungeon Cleaner Player Controller, en este fichero está programado el comportamiento del personaje.

Aviso: Estos ficheros los crearemos más adelante, pero lo importante ahora es saber dónde hay que colocarlos, y qué hace cada uno.

DefaultInput.ini Las asignaciones de teclas a las acciones se realizan aquí. Decir que UDK utiliza un sistema que hace de capa intermedia entre el código y la pulsación de una tecla, que es la GBA o Game Bindable Action. El funcionamiento es que a un método que realiza algo, se le asigna una GBA, y luego, a un botón concreto, se le asigna esta GBA en vez del método. La utilidad es que el reasignar teclas dentro del juego, y los botones de las distintas plataformas es más cómodo.

Content

En esta carpeta va todo nuestro contenido del juego, pero para tenerlo todo organizado, hay que crear una carpeta dentro de Content con el nombre de siempre, DCleaner.

  1. UDKGame
    1. Content
      1. DCleaner

Dentro de esta carpeta, guardaremos nuestros ficheros de mapa que crearemos con el UnrealEditor, y los paquetes de Assets que son unos ficheros que encapsulan todos nuestros contenidos, como mallas estáticas, materiales, animaciones, etc.

Flash

La última carpeta, es la de Flash. En ella se guardan las películas creadas en flash para ser introducidas en el juego. El motor implementa ScaleForms, que es un middleware que nos permite utilizar una película en flash dentro del juego, ejecutar código de ActionScript y comunicarnos en los dos sentidos con dicha película, es decir, desde UDKScript con ActionScript, y viceversa.

Para que los ficheros se añadan correctamente, deben de estar dentro de una carpeta, dentro de Flash. Por alguna razón, en la versión en la que trabajo, no puedo especificar el paquete al que quiero importarlo, lo importa directamente en un paquete con el nombre de la carpeta, por ello, crearemos una carpeta con el nombre del paquete de Assets con el que trabajaremos, para que al importar un fichero, lo añada donde queremos. Sabiendo que nuestro paquete de assets se llamará DCleanerAssets, crearemos la siguiente estructura de carpetas:

  1. UDKGame
    1. Flash
      1. DCleanerAssets

Aviso: Los ficheros de Flash deben de tener ciertas características para que funcionen correctamente, al igual que una versión concreta de ActionScript. Estos detalles se comentarán en el tutorial de integración de elementos de Flash con UDK Script.