Aravid

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

Archivos en la Categoría: Scaleform

Scaleform: Integración en UDK

Después de los dos tutoriales anteriores, ya tenemos una película de Flash preparada para que pueda ser importada en UDK. Para ello, debemos de hacer una clase que se encargue de la película en sí y de implementar los métodos que llamamos desde Actionscript.

El primer paso es importar a nuestro paquete de assets la película siguiendo los pasos a continuación:

  1. Lanzamos el Unreal Editor y nos vamos al Content Browser.
  2. Seleccionamos nuestro paquete de assets (en mi caso, DCleanerAssets) y pulsamos el botón Import.
  3. Seleccionamos la película que se encuentra en UDK\UDKGame\Flash\DCleanerAssets (Recordar que no podemos especificar a qué paquete de assets se añadirá la película. Lo hará en uno con el nombre de la carpeta, por eso mi carpeta se llama igual que el paquete de assets).
Ahora en nuestro paquete de assets tendremos un SwfMovie que es la película que hemos importado y una Texture2D que es el puntero del ratón.
Nota: Lo que importamos no es el fichero .fla, lo que importamos en el fichero .fla una vez publicado, que su extensión es .swf

A continuación, nos vamos a nuestra carpeta donde se encuentran todos los ficheros de UnrealScript, en mi caso y siguiendo las convenciones habituales, se encuentra en Development\Src\DCleaner\Classes siendo DCleaner vuestra carpeta para código propio. Como recordatorio, esta carpeta se definió en el primer artículo de UDK: Estructura de carpetas, y en dicha carpeta creamos un nuevo fichero que yo llamaré DCleanerPauseMenu.uc

Recomendación: Ya dije en el artículo de UDK: Herramientas que lo mejor para trabajar con UnrealScript es tener nFringe instalado, y para crear un fichero desde nFringe, nos vamos a la carpeta donde debería de estar el fichero, y con botón derecho -> Add -> New Item y seleccionando un fichero de UnrealScript, nFringe ya se encarga de crearlo y además el autocompletado de código funcionará mejor que si importamos el fichero.

Ya tenemos el fichero, y debemos especificar el nombre de la clase y de qué clase vamos a heredar. Yo llamaré a la clase igual que al fichero, es decir DCleanerPauseMenu y toda película de Flash debe de heredar de GFxMoviePlayer, así que sabiendo esto, podemos poner la primera línea:

class DCleanerPauseMenu extends GFxMoviePlayer;

A continuación, rellenamos el bloque de defaultProperties con el nombre de la película que vamos a reproducir, y activamos el boolean bPauseGameWhileActive que se encargará de pausar el juego mientras mostramos la película, que es exactamente lo que queremos para nuestro menú de pausa. También necesitamos capturar la entrada del juego, así que también activamos el boolean bCaptureInput. El bloque quedará así:

defaultProperties
{
	MovieInfo = SwfMovie'DCleanerAssets.PauseMenu'
	bCaptureInput=true
	bPauseGameWhileActive=true
}

Nota: Para obtener el nombre completo de la película, nos vamos al Content Browser y con botón derecho sobre el item del que queremos obtener el nombre completo, seleccionamos la opción de Copy fullname to clipboard.

Ahora tenemos que implementar el método Init(), que lo llamaremos para inicializar la película.

function Init(optional LocalPlayer LocPlay)
{
	super.Init(LocPlay); // Llamamos al método de la clase padre
	Start(); // Inicializamos la película

	/* Los siguientes métodos especifican el escalado de la película, al igual 
	que su alineación en la pantalla, los posibles valores de cada uno están 
	definidos en GFxMoviePlayer.uc pero como no me cuesta nada, os los copio 
	aquí para que conozcáis las posibilidades de cada método

	enum GFxScaleMode
	{
		SM_NoScale,
		SM_ShowAll,
		SM_ExactFit,
		SM_NoBorder
	};

	enum GFxAlign
	{
		Align_Center,
		Align_TopCenter,
		Align_BottomCenter,
		Align_CenterLeft,
		Align_CenterRight,
		Align_TopLeft,
		Align_TopRight,
		Align_BottomLeft,
		Align_BottomRight
	}; */

	SetViewScaleMode(SM_NoScale);
	SetAlignment(Align_Center);
	Advance(0.f); // Especificamos que vaya al frame 0 de la película
}

Solo nos falta implementar los métodos que son llamados desde ActionScript, los nombres que le dimos a estos métodos eran ExitMenu() y ExitGame(), así que los declaramos y los rellenamos.

function ExitMenu()
{
	ConsoleCommand("TogglePauseMenu");
}

function ExitGame()
{
	ConsoleCommand("exit");
}

Nota: El método ConsoleCommand lo que invoca es el método que se le pasa por parámetro como si lo hubieramos introducido en la consola.

El comando de consola exit ya existe, por lo que no tenemos que hacer nada con él, pero TogglePauseMenu no existe, y debemos de declararlo de forma que pueda ser invocado por consola para que todo funcione correctamente. El lugar más adecuado para este método es la clase personalizada para mostrar el HUD que ya debería de existir. Yo abro mi fichero DCleanerHUD.uc y al final, declaramos el método TogglePauseMenu que abrirá la película si está abierta, y en el caso de estar abierta, la cerrará.

/* Al comienzo del fichero, declaramos una variable de tipo DCleanerPauseMenu */
var DCleanerPauseMenu PauseMenu;

exec function TogglePauseMenu()
{
	/* Si el fichero no es igual a none y el flag de que la película está 
	abierta es true, lo que hacemos es cerrar la película. */
	if(PauseMenu != None && PauseMenu.bMovieIsOpen)
	{
		/* Cerramos la película. El parámetro de la función es si deseamos 
		eliminar de la memoria la película. En nuestro caso, como es un
		menú de pausa que será invocado en más de una ocasión, mejor no 
		eliminarlo porque la siguiente vez que fuera invocado, tendría que
		copiarlo a memoria de nuevo. */
		PauseMenu.Close(false);
	}
	/* Si por otro lado, la película no es igual a None o no se encuentra 
	abierta */
	else
	{
		/* Comprobamos si la película es igual a none, para inicializar la 
		variable. Lo realizamos así, porque al no descargar la película, 
		podría ocurrir que la película estuviera cerrada, pero que PauseMenu 
		no fuera none */
		if(PauseMenu == None)
		{
			/* Sabiendo que la película no está inicializada, la 
			inicializamos haciendo un new en nuestra variable */
			PauseMenu = new class'DCleanerPauseMenu';
		}
		/* Llegados a este punto, estando ya la película creada, o recién 
		creada, debemos llamar a este método para que muestre la película. 
		Recuerdo que este método lo hemos escrito en nuestra clase*/
		PauseMenu.Init();
	}
}

Nota: la palabra reservada exec se utiliza para especificar que un método puede ser invocado por consola. Lo que nos permite invocarlo con el método ConsoleCommand.

Ya hemos terminado con la integración de un fichero de Flash en UDK. Como habéis podido ver, es realmente fácil y una vez realizado uno, todos son iguales. Un pequeño resumen de los pasos es:

  1. Realizamos la película con los widgets específicos de Scaleform.
  2. Importamos la película a nuestro paquete de assets.
  3. Declaramos el fichero que hereda de GFxMoviePlayer.
  4. En el bloque de defaultProperties, especificamos la película y todos los parámetros por defecto, como bCaptureInput o bPauseGameWhileActive.
  5. Reescribimos el método Init() y modificamos la alineación o escalado al gusto.
  6. Y Voilá. Tenemos que buscar un sitio en nuestro código donde llamaremos a la película para mostrarla, y acordarnos de disponer de una manera de cerrar la película, o no podremos volver al juego.

Scaleform: Creación del Interfaz II

Continuamos desde el tutorial Scaleform: Creación del Interfaz I, primero tenemos que buscar una imagen bonita para nuestro cursor. También podemos crear nuestro propio cursor utilizando las herramientas de Flash para dibujarlo. Yo voy a explicar el uso de una imagen porque requiere un proceso añadido, y así aprovecho para explicarlo.

En la carpeta donde hemos guardado el fichero, tenemos que crear una carpeta con el mismo nombre del fichero. En mi caso, al tratarse de un menú de pausa, he llamado al fichero “PauseMenu.fla” y como consecuencia, el nombre de la carpeta que tendría que crear, es “PauseMenu”, que es donde hay que colocar los ficheros que tenemos que utilizar, siempre en formato PNG. El cursor que voy a gastar es gracias a http://www.totallyfreecursors.com/ y antes de usarlo, hay que eliminar la zona blanca que lo rodea, para que sea transparente.

Ahora, a los pasos para importar imágenes:

  1. Archivo -> Importar -> Importar a la biblioteca.
  2. Importar un fichero a nuestra biblioteca

  3. Seleccionamos el fichero que hemos guardado en la carpeta que hemos creado anteriormente.
  4. Botón derecho -> Propiedades sobre la imagen que ahora se encuentra en la biblioteca.
  5. Activamos el tick de Permitir suavizado si se encuentra desactivado, y en el desplegable de Compresión, seleccionamos Sin pérdida (PNG/GIF).
  6. Activamos los dos ticks de Exportar para Actionscript y Exportar en fotograma 1, y en el campo Identificador, ponemos el nombre del fichero sin la extensión.
  7. A partir de ahora, cuando importemos la película en UDK, además del fichero, se añadirá una Texture2D por cada una de las imágenes que estén añadidas a la biblioteca.

    Ya disponemos de la imagen en nuestra biblioteca, los siguientes pasos nos indicarán cómo conseguir que esa imagen, se convierta en un cursor:

    1. Creamos una nueva capa, para que el cursor siempre se encuentre por encima del resto de elementos. Si la capa se crea por debajo de la actual, subirla para que se encuentre por encima de la capa donde hemos añadido los elementos anteriormente. También modificamos su nombre por “Cursor” y la seleccionamos.
    2. Arrastramos la imagen que hemos seleccionado para hacer de cursor a la zona de trabajo.
    3. Aspecto de la zona de trabajo, añadiendo el cursor

    4. Seleccionamos la imagen en la zona de trabajo, y botón derecho -> Convertir en símbolo.
    5. En la ventana que ha aparecido, seleccionamos en el desplegable de Tipo la opción de Clip de película, y en el campo Nombre escribiremos el nombre que aparecerá en la biblioteca para este nuevo símbolo, que será añadido automáticamente.
    6. En el panel de Propiedades, le damos un nombre de instancia, porque trabajaremos con él desde el Actionscript. En mi caso, lo llamaré “Cursor”.
    7. Ahora tenemos que crear una capa para albergar nuestro código de Actionscript, le damos el nombre de “Actionscript” y nos colocamos en la primera celda del mismo, y botón derecho -> Acciones. Esto nos abrirá el editor de Actionscript.
    8. Ahí, tenemos que copiar el siguiente código, que será el encargado de ocultar el ratón habitual, y colocar en su posición, nuestra imagen que representa el cursor.
      var cursorListener:Object = new Object();
      
      Mouse.hide();
      
      Cursor._x = _root._xmouse;
      Cursor._y = _root._ymouse;
      
      cursorListener.onMouseMove = function ()
      {
      	Cursor._x = _root._xmouse;
      	Cursor._y = _root._ymouse;
      }
      
      Mouse.addListener(cursorListener);

    Nota: Lo que realiza el código es ocultar el ratón por defecto, crear un Listener que cada vez que se mueva el ratón, invoque a la función que coloca nuestro cursor en la posición del ratón, y como último paso, registrar ese Listener.

    Ahora podemos probar por primera vez nuestro fichero, y comprobar que funciona.

    Me estoy aficionando demasiado a esto de los pasos numerados, continuamos:

    1. Si no utilizamos ratón, necesitamos que un boton tenga la propiedad de focused a true. La razón, es que al utilizar teclas, nos moveremos entre los botones con respecto al que esté seleccionado, y para seleccionar uno, tenemos que activar la propiedad focused. El botón que lo tenga da igual, pero será el que esté resaltado al lanzar la película. Nos vamos a la capa de Actionscript, y en la primera celda, volvemos a darle botón derecho -> Acciones, y al comienzo del editor, añadimos la línea
      Btn_Continue.focused = true;
    2. Ahora tenemos que crear los métodos que van a ser llamados cuando hagamos click en nuestros botones, de momento, los métodos estarán vacíos porque su contenido está relacionado con la comunicación con UDK y aún no hemos hablado sobre ello. Destacar que no se pueden pasar parámetros a estas funciones que se invocan al realizar alguna acción. Añadimos al final del editor el siguiente código.
      function btn_continue_click()
      {
      
      }
      
      function btn_exit_click()
      {
      
      }
    3. Bien, ya disponemos de los cuerpos, que serán llamados cuando hagamos click en nuestros botones. Ahora tenemos que añadir los EventListener a nuestros botones. Si conocéis Flash, este no es el método habitual de añadir la funcionalidad del click a un botón, y el proceso se hace como se ve en las siguientes líneas de código.
      Btn_Continue.addEventListener("click",this,"btn_continue_click");
      Btn_Exit.addEventListener("click",this,"btn_exit_click");

    A parte de click, también podemos añadir un EventListener con otros eventos, como un over, por si queremos realizar alguna acción especial cuando el cursor esté por encima del botón. Es tan fácil como crear un método que será invocado, y cambiar la cadena que especifica la acción que invoca el método. De hecho, para mostrar esto, vamos a añadir algo de funcionalidad a nuestro menú de pausa.

    1. Siguiendo los pasos que están en Scaleform: Creación del Interfaz I para clonar un widget, clonamos el Label que tenemos en la biblioteca, para así poder modificar las características de la fuente y que sea distinto al título de “Menú de Pausa”. Añadimos el nuevo widget y modificamos su nombre de instancia a “Lab_Info” y en el panel de propiedades, el textValue a “Seleccione alguna de las opciones”.
    2. La colocamos de forma que quede debajo de los botones, y centrada. Hay que hacerla de un tamaño suficiente para que las distintas cadenas que mostrará entren, o se cortarán.
    3. La utilidad de este label es cambiar su texto cuando nos encontremos encima de uno de los botones, mostrando la frase “Pulse Continuar para seguir con el juego” en el botón Btn_Continue y la frase “Pulse Salir para salir del juego” en el Btn_Exit, creamos nuevos métodos que tendrán el siguiente aspecto.
      function btn_continue_over()
      {
      	Lab_Info.text ="Pulse Continuar para seguir con el juego";
      }
      
      function btn_exit_over()
      {
      	Lab_Info.text ="Pulse Salir para salir del juego";
      }
    4. Ahora hay que crear un nuevo método, que será el invocado cuando dejemos de estar encima de alguno de los dos botones, que volverá a dejar la Label con el texto inicial de “Seleccione alguna de las opciones”. Lo conseguiremos creando un nuevo método que se encargue de este trabajo.
      function btn_rollout()
      {
      	Lab_Info.text ="Seleccione alguna de las dos opciones";
      }
    5. Ahora que tenemos los métodos, tenemos que añadir los EventListener, que quedarán tal como se muestra a continuación.
      Btn_Continue.addEventListener("rollOver",this,"btn_continue_over");
      Btn_Exit.addEventListener("rollOver",this,"btn_exit_over");
      Btn_Continue.addEventListener("rollOut",this,"btn_rollout");
      Btn_Exit.addEventListener("rollOut",this,"btn_rollout");

    Ya hemos terminado, ahora si probamos de nuevo el fichero con el FxMediaPlayer, si pasamos el ratón por encima de los botones, veremos cómo cambia el texto de este Label que hemos creado. Ahora a por el último paso, rellenar los métodos que se invocan al hacer click, y explicar cómo se comunica desde Actionscript con UDK Script.

    Antes de comenzar con los pasos, voy a hablar sobre el funcionamiento de la comunicación Actionscript -> UDK.

    Para poder reproducir una película Flash en UDK, debemos de crear una clase que hereda de GFxMoviePlayer y en ella, especificar la película y algunas de las características de la misma, como el tamaño y la alineación de la misma. En ese fichero podemos especificar métodos, y cuando desde el código de Actionscript se invoca uno, se busca en su clase y desde el método en UDK podemos realizar las acciones consecuentes.

    1. En la capa de Actionscript, con la primera celda seleccionada, entramos en botón derecho -> Acciones.
    2. Bajamos todo el texto una línea, y en la primera línea, que ahora estará libre, importamos una librería que nos hará falta para poder comunicarse con UDK.
      import flash.external.ExternalInterface;
    3. Rellenamos los métodos que teníamos vacíos conforme a lo siguiente. El método ExternalInterface.callrealiza una llamada al método cuyo nombre es el primer parámetro y le pasa unos parámetros que se especifican a continuación. Tenemos que tener preparado un método en la clase que se encarga de la película que acepte esos parámetros y realice alguna acción.
      function btn_continue_click()
      {
      	ExternalInterface.call("ExitMenu");
      }
      
      function btn_exit_click()
      {
      	ExternalInterface.call("ExitGame");
      }

    Si ahora probamos la pelícla con el FxMediaPlayer y hacemos click en alguno de los botones, en la ventana de consola que se abre, aparecerá una línea de color azul que nos informa de qué método se invoca y en el caso de tener parámetros, también.

    Prueba final de nuestro menú, completamente funcional

    En el siguiente tutorial explicaremos cómo crear una clase para que cargue una película, y se escribirán los métodos que se invocan al hacer click.

    Antes de terminar, voy a poner todo el ActionScript que tenemos en nuestro archivo

    import flash.external.ExternalInterface;
    
    var cursorListener:Object = new Object();
    
    Mouse.hide();
    
    Cursor._x = _root._xmouse;
    Cursor._y = _root._ymouse;
    
    cursorListener.onMouseMove = function ()
    {
    	Cursor._x = _root._xmouse;
    	Cursor._y = _root._ymouse;
    }
    
    Mouse.addListener(cursorListener);
    
    function btn_continue_click()
    {
    	ExternalInterface.call("ExitMenu");
    }
    
    function btn_exit_click()
    {
    	ExternalInterface.call("ExitGame");
    }
    
    function btn_continue_over()
    {
    	Lab_Info.text ="Pulse Continuar para seguir con el juego";
    }
    
    function btn_exit_over()
    {
    	Lab_Info.text ="Pulse Salir para salir del juego";
    }
    
    function btn_rollout()
    {
    	Lab_Info.text ="Seleccione alguna de las dos opciones";
    }
    
    Btn_Continue.addEventListener("click",this,"btn_continue_click");
    Btn_Exit.addEventListener("click",this,"btn_exit_click");
    Btn_Continue.addEventListener("rollOver",this,"btn_continue_over");
    Btn_Exit.addEventListener("rollOver",this,"btn_exit_over");
    Btn_Continue.addEventListener("rollOut",this,"btn_rollout");
    Btn_Exit.addEventListener("rollOut",this,"btn_rollout");

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í.