miércoles, 30 de julio de 2014

#Script Barra de vida #unity3d - Health Bar

En todo videojuego existen diferentes formas o maneras de mostrar las vidas del player o enemigos. Por lo tanto he considerado importante realizar un script basado en JS (javascript) el cual muestre por medio de una barra, las vidas del personaje principal.


Como se indica en la parte superior este script está realiazado en JS.

En primera instancia lo que debemos de tener en consideración es la relación existente entre los siguientes scripts. Primero debemos de crear el entorno en el cual nuestro player se va a ver afectado por el enemigo.

En mi caso he elaborado un plano, un cubo (enemigo), y el player (Primera Persona). Se pueden optimizar los scripts a realizar pero en mi caso he elaborado 3 Scripts para que se aprecie la mecánica.

El primer Script "muestra_vidas" se lo colocaremos a la cámara o a un gameobject vació, puesto que este script permitirá que se muestren las texturas de la vida del player. Este script posee la variable progress en la cual almacenaré la vida total del player. Las variables de tipo Texture2D sirven para adicionar las texturas de la barra de vida y la del fondo de la barra. Las texturas a usar pueden estar en formato PNG.

Adicional se han aumentado variables de tipo float que permiten almacenar el tamaño de la pantalla a visualizar y realizar una operación matemática para devidir la pantalla en cinco partes iguales. Pero esto se explicará en otra publicación.

*JS
------------------------------------------------
var progress : float= 0;
var progressBarEmpty : Texture2D;
var progressBarFull:Texture2D;

static var ScreenX:float;
static var ScreenY:float;
static var AnchoxPantalla: int;
static var AltoxPantalla:int;

function OnGUI () {
//barra vacia (posicionx,posiciony, ancho, alto)
GUI.DrawTexture (Rect(ScreenX*0.1,ScreenY*0.1,400,140), progressBarEmpty);
//barra llena
GUI.DrawTexture (Rect(ScreenX*0.55,ScreenY*0.65,progress,20), progressBarFull);
}

function Update (){
AnchoxPantalla=Screen.width;
AltoxPantalla=Screen.height;
ScreenX = (Screen.width)/5;
ScreenY=(Screen.height)/5;
progress = PlayerStat.vida; //llamo a la variable vida que se encuentra en el script PlayerStat
}
------------------------------------------------


La función OnGUI dibujará en la pantalla la barra de vida y el fondo. Como se ha comentado el GUIDrawTexture mostrará la textura almacenada en progressBarEmpty, y en otra línea se mostrará progressBarFull, la barra que se irá debilitando apenas el player reciba daño.


La variable progress almacenará el valor total de las vidas, osea que al principio esta tiene 250 vidas, pero por cada daño esta va a bajar 50pts. Si revisamos el GUIDraw de la progressBarFull, nos damos cuenta que en el ancho no tenemos un valor fijo, sino que el ancho va a estar guiado por los puntos de la vida.

Hasta este momento solo hemos mostrado las barras de vida pero no poseen interacción con el player. Para lo cual crearemos el segundo script llamado "PlayerStat" en este script creamos la variable vida que almacenará el total de la vida del player. Aquí realizamos el cálculo del daño, donde la funcion Update valida al momento que vida sea 0 se active la funcion dead (cambio de nivel), y para resetear la variable vida luego le asignamos los 250pts. Este Script se lo ponen al player.

*JS
------------------------------------------------
static var vida = 250;

function Update (){
if(vida <= 0){
Dead();
}
}

function Dead(){
Application.LoadLevel("enemigo 2");
vida = 250;
}
------------------------------------------------

El último script a realizar lo llamaremos "baja_vidas" Este script lo tiene el enemigo, y en este le indicamos cuanto es el daño que va a ocasionar. En mi caso he simplificado el ejemplo usando el OnTriggerEnter a un cubo.
En este script lo único que se realiza es cuando entra a la zona sensible la variable vida es restada por 50pts.

*JS
------------------------------------------------
function OnTriggerEnter () {
PlayerStat.vida = PlayerStat.vida -50;
}
------------------------------------------------


Y con esto hemos elaborado nuestra barra de vida. Debemos de tener claro que cuando llegue "vidas"a cero se cambiará de escena. La misma mecánica se puede usar para restar vidas al enemigo u otros elementos.

Si tienes alguna duda o consulta no dudes en comentar.

martes, 22 de julio de 2014

#Script para pausar el juego en #unity3d - Pause a game

El siguiente Script es de uso frecuente en los juegos, puesto que con este podemos pausarlo y luego continuar jugando. En el script a continuación se indica como mostrar la textura al momento de la pausa.


En el Script se permite al usuario pausar el juego al presionar la tecla "P". Es necesario indicar que al momento de parar el tiempo, el player también dejará de moverse. Se puede reemplazar por cualquier tecla donde indica "KeyCode.(letra)" pero es necesario al momento de escribir la letra que esté en mayúscula. En el caso de no usar por medio de una letra, puede cambiar la sentencia por otra condición.

*JS
----------------------------------------------
function Update () {
    if (Input.GetKeyDown (KeyCode.P)) {
         Time.timeScale = 1.0-Time.timeScale;
         Time.fixedDeltaTime = 0.02 * Time.timeScale;
    }
}
----------------------------------------------
El timeScale se usa para efectos de movimiento lento. Cuando el timeScale es 1.0 el tiempo pasa más rápido que en el tiempo real. Cuando es 0.5 el tiempo pasa 2 veces más lento que el tiempo real. Si es de 0 el juego se detiene si todas sus funciones trabajan con velocidad de fotogramas independientes.

Si deseas aumentarle al código la opción de mostrar un mensaje al momento de la pausa, deberíamos de adicionar una variable de Boolean (verdadero y falso) y la función OnGUI para mostrar la textura o texto.

La variable textura es de tipo Texture2D para almacenar la textura a mostrar. Si observan en el siguiente script en la función update se aumentó una línea que valida si muestra es verdadero o falso. Dependiendo de ese valor de "muestra" se activará la función OnGUI, la cual crear un cuadro con los valores de (230,130,400,400) estos valores corresponden a (x, y, ancho y alto) y la "," seguida de la variable indica que se muestra la textura. Si se desea mostrar un texto en vez de una textura se debe de modificar el GUI.Label y al final poner el texto seguido de comillas.

*JS
----------------------------------------------
var textura : Texture2D;
var muestra : boolean;

function Update () {
    if (Input.GetKeyDown (KeyCode.P)) {
         Time.timeScale = 1.0-Time.timeScale;
         Time.fixedDeltaTime = 0.02 * Time.timeScale;
         muestra=!muestra;
    }
 
}

function OnGUI(){
if(muestra){
    GUI.Label(Rect(230,130,400,400), textura); // muestra textura
    GUI.Label(Rect(100, 100, 50, 30), "Pausa"); // muestra texto
    }
}
----------------------------------------------

miércoles, 16 de julio de 2014

#Script #Unity uso de video como textura

Para usar la opción de video se debe de contar con la versión Pro de Unity. En Unity los videos son considerados como texturas animadas (tiene lógica), los formatos de videos aceptados son: mov, mpg, mpeg, mp4, avi, asf
En el caso de exportar para IOS este usa solo las extensiones de mov, mp4, mpv y 3gp
En el caso de exportar para Android este acepta las siguientes extensiones: H263 , H264 AVC, MPEG-4 SP, VPS

En el caso de Android el sitio web oficial de Unity (Documentacion/Manual) indica que el videoTexture no son compatible y que en lugar de esa opción se ofrece la reproducción de Streaming de pantalla completa utilizando la opción Handheld.PlayFullScreenMovie.

El uso de videos en unity es un poco complejo, hasta el momento no se puede usar de forma fácil el canal alfa de un video, lo único que se puede hacer es cambiar es el "shader" del video y poner "Particles/Aditive" y de esa forma parece que el video tiene la propiedad del alfa.

Una vez cargado el video en nuestro proyecto debemos de probar que se reproduzca el mismo. Para reproducir el video seleccionamos el archivo y en el "Inspector" se habilita la opción de Play (icono).
Si al dar clic en Play el video se reproduce no existe ningún problema, si el video no se reproduce puede ser por incompatibilidad con la extensión del video.


Luego de tener el video en nuestro proyecto el proceso más sencillo es asignárselo a un cubo o a un plano para que en este elemento se reproduzca. El video no se va a reproducir hasta que no usemos un script. Para lo cual he desarrollado algunos ejemplos en Javascript :  para ejecutar el video, cambiar a otra escena al finalizar el video y el ejemplo tradicional de unity que viene en la documentación.

Con esta línea de código indicamos que se reproduzca el video.

renderer.material.mainTexture.Play();


En el Script que visualizaremos a continuación se ha creado una variable de tipo MovieTexture para almacenar el video a ejecutar. A esa variable de video le hemos indicado que el loop (repetición de animación) se encuentra activo o true. A la variable se la activa la opción Play o en su defecto Stop.

Script JS
----------------------------------------------
var movTexture : MovieTexture;

function Update(){
movTexture.loop = true;
renderer.material.mainTexture = movTexture; // Se indica que la textura se asigna a esa variable
movTexture.Play();
}
----------------------------------------------
Se puede realizar una pequeña variación en el Script superior para validar cuando el video se termine de reproducir cambie de escena. Para lo cual usaremos las funciones Start y Update. En la funcion Start indicaremos que se ejecute el video, y en la funcion Update consultaremos si el video no se está reproduciendo cambie de escena. Como se observa en el Script ya no se usa la opción del loop del video.

Script 2 JS
----------------------------------------------
var movTexture : MovieTexture;

function Start(){
  renderer.material.mainTexture = movTexture;
  movTexture.Play();
}

function Update(){
if (!movTexture.isPlaying)Application.LoadLevel("NombreNivel"); //el signo "!" se lee Sino
}
----------------------------------------------

Este es el Script tradicional que encontramos en la página de Documentación de Unity, en el cual por medio de la barra de espacio o tecla "Jump" procedemos a poner Play al video, en el caso de ser presionada de nuevo el botón "Jump" el video se pondrá en pausa. A este mismo script le podemos hacer una variación y cambiar el Update por OnTriggerEnter u OnTriggerExit y aplicarlo a zonas sensibles.

Script 3 JS 
-------------------------------------------
function Update () {
    if (Input.GetButtonDown ("Jump")) {
       if (renderer.material.mainTexture.isPlaying) {
            renderer.material.mainTexture.Pause();
        }
        else {
            renderer.material.mainTexture.Play();
        }
    }
 
}
-------------------------------------------

martes, 1 de julio de 2014

#Script elaboración de #menu en #unity3d

Cuando nos encontramos elaborando un juego nos es siempre necesario elaborar el menú respectivo de la aplicación tanto para escoger niveles, para cambiar de escenas o para salir.
A continuación indicaré el proceso necesario para elaborar el menú y su salto a las respectivas escenas siguientes.

La imagen pertenece a un mini juego que realicé para El Telégrafo referente a la participación de Ecuador en el Mundial Brasil 2014.

Para poder elaborar el menú puedes realizar los botones de dos formas por medio de #GUITexture o por el uso de #planos. En mi caso lo vamos a realizar por medio de planos.


1. Colocamos los planos necesario en el escena, en mi caso vamos a colocar 4 planos para el botón empezar, instrucciones, marcador y créditos.
Para incluir los planos, seleccionamos en el menú la opción GameObject/Crear Objeto/ Plano

* Es necesario que el objeto a usar sea plano, esfera, cubo o lo que sea tenga la propiedad del Collider.


2. Creamos el script en este caso llamado menú, el script está creado en JS

*-JS-*
----------------------------------------------------------------------------------------
var btn_empezar : boolean;
var btn_instrucciones : boolean;
var btn_creditos : boolean;
var btn_back : boolean;
var btn_marcador : boolean;


function OnMouseDown (){
if (btn_empezar == true){
Application.LoadLevel("nivel1");
}
if (btn_instrucciones == true){
Application.LoadLevel("instrucciones");
}
if (btn_creditos == true){
Application.LoadLevel("creditos");
}
if (btn_back == true){
Application.LoadLevel("menu");
}
if (btn_marcador == true){
Application.LoadLevel("score");
}
}
----------------------------------------------------------------------------------------

Como pueden observar en el script se han creado variables de tipo "boolean" para cada nivel. Estas variables nos servirá poder usar el mismo script para todo el menú sin necesidad de crear un script para cada cambio de nivel.
Otro punto importante a considerar es que la acción va a ser cuando se de presione cada uno de los planos con el mouse, empieza a validar que botón se presionó y procede al cambio de escena.

3. Hasta aquí es lo más complejo de todo, ahora lo que toca es poner el script a cada plano que hace de botón, y dar check en el script para indicarle que botón es.