Unity3D - Movimiento

 Movimiento en una dirección

Código

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ControlJugador : MonoBehaviour
{
    public float velocidad;

    // Update is called once per frame
    void Update()
    {
        transform.Translate(new Vector3(0,0,1) * Time.deltaTime * velocidad);
    }
}

Es posible poner también:

transform.Translate(Vector3.forward * Time.deltaTime * velocidad);
transform.Translate(Vector3.back * Time.deltaTime * velocidad);
transform.Translate(Vector3.left * Time.deltaTime * velocidad);
transform.Translate(Vector3.right * Time.deltaTime * velocidad);
transform.Translate(Vector3.up * Time.deltaTime * velocidad);
transform.Translate(Vector3.down * Time.deltaTime * velocidad);

Movimiento en todas direcciones (con teclado)

Código

public class ControlJugador : MonoBehaviour
{
    public float velocidad;
    
    public float verticalInput;
    public float horizontalInput;

    // Update is called once per frame
    void Update()
    {
        verticalInput = Input.GetAxis("Vertical");
        horizontalInput = Input.GetAxis("Horizontal");

        transform.Translate(Vector3.forward * Time.deltaTime * velocidad * verticalInput);
        transform.Translate(Vector3.right * Time.deltaTime * velocidad * horizontalInput);
    }
}

Giro de un vehículo

Código

public class ControlJugador : MonoBehaviour
{
    public float velocidad;
    public float velocidadGiro;

    public float verticalInput;
    public float horizontalInput;

    // Update is called once per frame
    void Update()
    {
        verticalInput = Input.GetAxis("Vertical");
        horizontalInput = Input.GetAxis("Horizontal");

        transform.Translate(Vector3.forward * Time.deltaTime * velocidad * verticalInput);
        transform.Rotate(Vector3.up * Time.deltaTime * velocidadGiro * horizontalInput); 
    }
}

Movimiento de un avión

Código

public class ControlJugador : MonoBehaviour
{
    public float velocidad;
    public float velocidadGiro;

    public float horizontalInput;
    public float verticalInput;


    // Update is called once per frame
    void Update()
    {
        horizontalInput = Input.GetAxis("Horizontal");
        verticalInput = Input.GetAxis("Vertical");

        transform.Translate(Vector3.forward * Time.deltaTime * velocidad);
        transform.Rotate(new Vector3(0,1,0) * Time.deltaTime * velocidadGiro * horizontalInput);
        transform.Rotate(new Vector3(1, 0, 0) * verticalInput * velocidadGiro * Time.deltaTime);
    }
}

Ren'py (II) - Un sencillo diálogo

Intro

Vamos a ver cómo construir una historia en Ren'py. Va a ser una historia lineal con imágenes. De estos hay mil tutoriales por ahí, pero no quería empezar con un nivel intermedio, así que vamos a ver esto...

Ya vimos en el episodio anterior como crear un proyecto nuevo. Para este proyecto necesitaremos además dos imágenes:

Una imagen de fondo que será formato JPG ya que es la que ocupa menos espacio y una imagen PNG con fondo transparente que la pondremos sobre el fondo.

¿Dónde guardamos las imágenes?

Desde el menú de Ren'py podemos abrir directamente la carpeta de imágenes y guardar ahí las mismas.

Estructura proyecto en Ren'Py

Si en el menú pulsamos sobre script.rpy veremos el código que nos ha generado automáticamente en Ren'py. 

Vemos que hay dos partes:

• La parte roja que es la de las declaraciones de los personajes e imágenes.
• La parte amarilla es la que incluye el código, en este caso nuestro minidiálogo.

Para hacer este ejercicio eliminaremos lo que en la imagen anterior está recuadrado en rojo y en amarillo. Obsérvese que dejamos label start: y return.

Definir personaje

Se define, oh sorpresa, en la parte de definiciones o lo que hemos marcado en rojo. 

Pondremos:

define s = Character("Samantha")

Esto no hace nada y hace todo. A este nivel lo que hace es que yo me pueda llamar a mi personaje como s en lugar de como Samantha con lo que me ahorro de escribir,

Escribir diálogo

Ahora sí, vamos a escribir el código de este apasionante diálogo, así que escribimos en la zona amarilla, entre el label start: y el return.

NOTA: Veremos más adelante que podemos tener tropecientosmil label, pero es el start el que SIEMPRE se ejecutará primero.

Si os fijáis en la captura de código original, la etiqueta 'label start:' es un bloque. Sabemos lo que incluye un bloque porque está sangrado. Esto es que empezamos a escribir las líneas cuatro espacios más a la derecha.

Por tanto escribimos identando (que bonito palabro) cuatro espacios los siguientes líneas:

La primera línea, es un diálogo sin más, sin hacer referencia a ningún personaje. Esto es porque se trata del narrador. En el juego veremos algo asín:

En la segunda frase, hacemos referencia a Samantha. Si recordáis hemos relacionado la simple 's' con el carácter Samantha en la selección de definiciones:

define s = Character("Samantha")

Esto hace que el diálogo se vea así:

Mostrar imágenes

Las imágenes se definen así:

Esto lo ponemos en la sección de definiciones, dónde hemos puesto la definición de personajes.

Sin embargo hay dos tipos de imágenes:

Fondos:

Un fondo es un fondo, y como tal se mantendrá siempre ahí hasta que mostremos un nuevo fondo que sustituirá al anterior.

Lo suyo es que sea un .jpg porque ocupa menos espacio en disco y deberá siempre tener el tamaño que hemos definido del juego. En el ejemplo anterior se trata del colegio. 

Si os fijáis, en el ejemplo anterior lo asociamos a la imagen bg school.jpg .  La partícula bg que precede al nombre es una convención. Por convención todos los fondos se llamarán bg algo.jpg.

Lo mostraremos así:

scene colegio

Imágenes:

Las imágenes se colocarán sobre el fondo. Y si muestro otra imagen sobre la anterior. El hecho de que se muestren sobre otras requiere que el fondo sea transparente, con lo que usaremos imágenes ".png". Se muestra así:

show imagen

Ejemplo

Y con esto ya estamos en condiciones de escribir una historia lineal.

Os copio aquí todo el código de mi ejemplo en el que he añadido un nuevo personaje:

# Coloca el código de tu juego en este archivo.

# Declara los personajes usados en el juego como en el ejemplo:

define s = Character("Samantha")
define r = Character("Ron")

image colegio = "bg school.jpg"
image samantha = "samantha.png"
image ron = "ron.png"

# El juego comienza aquí.

label start:

    scene colegio
    "Hola, ¿cómo estamos? os presento a Samantha"
    show samantha
    s "Holi. Soy Samantha"
    show ron
    r "Muy buenas... y tan buenas..."
    return

Esto se verá así:

Como veis Ron se monta sobre Sam (más querría él). Lo suyo sería que una imagen saliera a la derecha y la otra a la izquierda. Pero eso ya lo veremos.

Nota final y chin pum.

Sólo decir que si colocamos las imágenes en la carpeta que tenemos predeterminado para ello y no usamos caracteres raros (ni mayúsculas) en la nomenclatura, no hará falta definirlas. Basta con llamarlas por su nombre sin extensión.

Así que:

image colegio = "bg school.jpg" scene colegio

Podía haberse sustituido sólo por:

scene bg school

Si queréis ver esto en un tutorial de YouTube os aconsejo éste del gran Sedac, en el que me he basado para hacer este pequeño tutorial.

Un besi.

Genesis 8 Daz Studio Freebies

Daz Studio tiene es la herramienta perfecta para que los que no sabemos dibujar hagan algo decente.
Sin embargo,  los caracteres, poses y objetos se han de escoger entre una gran oferta a menudo de pago.

Localizar lo que quieres es harto difícil y puede significar horas de búsqueda que no siempre son fructuosas.

Para solucionar este problema existe esta página que intenta indexar los diferentes elementos para Genesis 8. Es un poco cutre pero para localizar una pose que se nos ajuste va muy bien.

Es más... es lo que uso...  XD

Esta es la dirección:

http://furnitube.es/furniman

Ren'py o cómo hacer una novela visual

Muy buenas, hace muy mucho que no nos leemos. Durante este tiempo he estado con varios proyectos, pero al final estoy desarrollando una novela / simDate para adultos en Ren'py.

Si bien la herramienta, suele ser usada para este tipo de juegos, su mecánica es muy sencilla y puede ser usada también por niños para hacer cuentos infantiles o desarrollar su propia historia.

Por tanto os animo a que déis un vistazo a esta herramienta que es muy interesante.

Instalar Ren'py

Para instalar Ren'py tenemos que ir a https://www.renpy.org/. Si no lo cambian, es esta misma página, veréis el enlace de descarga.

Pinchando sobre él, veremos varias opciones de descarga. A nosotros nos interesará la que lleva extensión .exe

Lo descargamos y ejecutamos. Nos solicitará la carpeta dónde instalar.

Realmente lo que hace es descomprimir. Podéis coger la carpeta que os ha creado y moverla donde queráis. Yo personalmente la cuelgo de C:\

Entramos a la carpeta y ejecutamos renpy.exe y... ya está!!!!

Si vamos a preferencias:

Podremos elegir la carpeta dónde guardaremos nuestros proyectos y también podremos elegir el idioma del juego.

Una vez volvamos... vamos a crear nuestro primer proyecto...

Nos pedirá el nombre del proyecto y que le demos a continuar. Imagino que para esto, no necesitamos pantallazo...

Después nos pedirá la resolución. Yo le pongo la que sale por defecto 1280 x 720. Pensad que esto determina el tamaño de los fondos que tendrá el juego (es decir, el tamaño que van a tener que tener las imágenes que pongáis). Le damos a continuar.

Seguidamente podréis escoger el color del juego. Se refiere a menús y fondos. También si queréis que de entrada el juego se ejecute a pantalla completa o ventana, y la velocidad del texto. La velocidad la dejáis igual... o no... no es mi problema. Y le damos a continuar...

Y ya está... ya tenemos el proyecto creado.

Este proyecto, de hecho ya tiene un minúsculo código demo. Lo podemos ejecutar.

Nos colocamos sobre él y pulsamos sobre Ejecutar Proyecto.

Veremos algo asín:

Cuando salgamos, podremos investigar el código. Para ello, colocados sobre el proyecto pulsamos sobre todos los scripts.

Si es la primera vez que editamos código, Ren'py nos preguntará qué editor queremos usar. Personalmente yo uso Atom que es el que Ren'py recomienda.

Y nada más... en el próximo pisodio veremos como hacer un diálogo con imágenes. Lo más básico de Ren'py.

¿Tiene espejos en su casa? Pues nos vemos.

La estructura de un programa en Phaser 3

Hola mundo!!!

Como no podía ser de otra manera vamos a ver como se estructura un programa en Phaser 3 con un sencillo y manido Hola Mundo!!!

Una página HTML

Phaser 3 se integra en una página HTML monda y lironda

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Holi mundo</title>
     <script src="http://cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.min.js"></script> 
 </head>

 <body>
  
  <script type="text/javascript">

    ---> Aquí pondremos nuestro código
                     
  </script>
 </body>
</html>

Como podéis ver, se trata de una estructura típica HTML con su cabecera y cuerpo. En la cabecera es dónde cargamos Phaser. O bien llamándolo a la URL dónde lo tengamos descargado en nuestro site, o bien directamente de jsDeliver. Tenéis más info de esto en mi post sobre instalación de Phaser 3.

En el cuerpo ponemos la etiqueta de JavaScript y en su interior nuestro código.

Estructura de Phaser 3

El código siguiente iría dentro de las etiquetas de JavaScript.

var config = {
 type: Phaser.AUTO,
 width: 617,
 height: 410,
 backgroundColor: '#01DF01',
 parent: 'phaser-example',
 scene: {
  preload: preload,
  create: create,
  update: update
 }
};

var imgUnchi;
var game = new Phaser.Game(config);

function preload() {
 this.load.image('unchi', './unchi.png');
 this.load.image('texto', './texto.png');
}

function create() {
 this.add.image(300,100, 'texto');
 imgUnchi = this.add.image(305, 250, 'unchi');
}

function update() {
 imgUnchi.rotation += 0.01;
}

Lo primero que hacemos es declarar y dotar de valor una variable config que determinará los parámetros en los que se desarrollará el juego. Luego entro con más profundidad...

Después creamos el juego y guardamos la instancia en una variable game.  Fijaos que le pasamos la configuración definida anteriormente.

Posteriormente definimos la escena y las fases que conforman su ciclo de vida. Fijaos que éstas se han definido en el config. Hay más (init, render, shutdown, destroy) pero las básicas son:

Preload: Cargaremos todo lo cargable: Imágenes, sprites, sonidos... antes de nada, para que no hayan retardos después.

Create: Pintamos la escena. Es decir, colocamos todo en su sitio.

Update: Definimos cómo se mueve cada cosa. Esta escena se ejecuta contantemente un montón de veces por segundo. Vamos, el juego está aquí.  :-)

El concepto de escena es muy raro en Phaser 3. Una escena sería también el menú inicial, cada nivel de un juego de plataformas o la pantalla de Game Over. Incluso el menu de inventario que se superpone en un juego de rol o el mapa de un mundo que vemos en la esquinita de un shooter también serian escenas y cada una tendría su preload, create y update. Pero eso ya lo veremos. Aquí tenemos una única pantalla. No nos compliquemos nada más empezar...

La configuración Config

Evidentemente hay mucha cosas que configurar en nuestro juego, pero las básicas son:

Type: Define cómo se va a renderizar el juego. Básicamente si se van a usar las capacidades de nuestra tarjeta grafica (tecnología WEBGL) o si se lo vamos a dejar todo al procesador. Si ponemos AUTO nos aseguramos que si se puede, usamos la tarjeta gráfica.

Width y Height: ¿Qué tamaño va a tener la ventana de nuestro juego? Pues aquí se lo decimos.

BackgroundColor: O color de fondo de la ventanita del juego.

Parent: Aquí podéis poner cualquier cosa o una referencia a una etiqueta <div> de HTML. Me explico, si utilizamos la estructura web mostrada hasta ahora, Phaser 3 se ejecutará dónde le de la gana. Normalmente al final de nuestra página. En el ejemplo no pasa nada ya que no tenemos texto, ni imágenes... sólo Phaser. Pero imaginaos que queremos integrar Phaser en medio de una página con texto.  Entonces en nuestro código HTML pondríamos:

<div id="phaservaaqui"></div>

Y nuestro parámetro parent seria:

De hecho esto es lo que voy a hacer para ver el resultado del código anterior:

Phaser 3: Un potente framework para videojuegos en Javascript.

Phaser 3 vs. CraftyJS

En el pasado podíais leer en este blog unos pequeños tutoriales para CraftyJS. No os engañéis, Crafty me encanta, me parece sencillo y bien documentado pero no tiene tecnología WebGL.

La tecnología WebGL permite al navegador usar las capacidades de la tarjeta gráfica para mover el juego y hace que sea mucho más rápido, sobretodo si mueves cientos de objetos a la vez.

Es por eso que me he decido a cambiar a Phaser.

Phaser 2 está muy consolidado y tiene sobrada documentación. Phaser 3 es totalmente diferente a Phaser 2 y en momento de escribir estas líneas la documentación es muy escasa. Aquí entra este blog. Para facilitaros la vida y que no tengáis que pegaros para cualquier tontería.

Instalación de Phaser 3

Por temas de seguridad, los navegadores modernos ya no ejecutan JavaScript en local, con lo que necesitaremos instalar un servidor web. No os asustéis. Yo uso XAMPP. Se baja, se le da a instalar y ya. No necesitáis hacer nada. AQUÍ tenéis un pequeño tutorial para su instalación.

Ahora la cosa es bajarse el PHASER 3 que lo podéis hacer desde AQUÍ.

En este punto os preguntaréis... ¿y qué me bajo?

Pues tenéis el ZIP con el framework y ejemplos y demás. Luego tenéis la opción de sólo bajaros sólo el framework. Tenéis la opción de js y la min.js.  ¿Diferencia?  Ninguna. La cosa es si lo editáis en uno está el fuente estructurado y en el otro todo el código arrebujiñao con el objeto de que ocupe lo mínimo posible. Si no pensáis meterle mano al fuente con el min.js os vale.

Si habéis instalado el XAMPP y habéis seguido el magnífico tutorial al que os referencié en el principio de este artículo, bastará con copiarlo en la carpeta htdocs de XAMPP. Si además, cosa que me consta, sois personas pulcras, lo meteréis en una carpeta.

Luego sólo será necesario llamarlo tal que asín en un archivo HTML:

<script src="phaser3/phaser.min.js"></script>

Como el ávido lector habrá inferido he creado dentro de mi carpeta htdocs otra llamada phaser3.

Perdone Ud. Sr. Furniman... es que yo soy muy xul@ y paso de bajármelo...

Hay otra opción, y es llamarlo directamente de jsDelivr. La instrucción la encontraréis en la página de descargas dentro del apartado CDN.

En el momento de escribir estas líneas es:

<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.min.js"></script>

Bajarnos el framework permite actualizar la versión de Phaser 3 cambiando el fichero. Llamar al framework de jsDelivr obligará a cambiar el código si queremos actualizar la versión de Phaser. En todo caso sólo sería una línea en un único fichero.

1,2,3... Probando...

Phaser 3 no es un IDE es decir, no tiene herramientas de edición y depuración de código. Debéis utiliza uno de los miles de editores de texto, algunos muy potentes y muy orientados a código o el Bloc de notas. A medio camino entre los dos se encuentra el que uso yo el Notepad++ que te asistirá poniendo colorines a las palabras reservadas y demás.

Así que tomaremos para probar el mismo código que trae Phaser en su página. Con un editor de texto plano crearemos una página llamada index.html y pegaremos el siguiente código:

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

Lo guardaremos en la carpeta htdocs de XAMPP y ya...

Para llamarlo sólo tenemos que poner en nuestro navegador con XAMPP arrancado (os remito de nuevo a su tutorial) lo siguiente:

http://localhost

Y ya... podréis ver algo parecido a ESTO.

Si os fijáis en la cuarta línea del código, se está llamando a la versión 3.11 de Phaser desde jsDelivr. Si hemos optado por tener el framework en local, sólo tenemos que cambiarlo por la ruta en la que está algo así como:

<script src="phaser3/phaser.min.js"></script>

Y con esto y un bizcocho ya hemos terminado...

Os dejo con un enlace a una página de bailes tradicionales... ¿Que no os interesa el tema?  Bueno... hay que promocionarlo... ¿no?

furnitube.es/danzasdelmundo

XAMPP guía de instalación.

¿Qué es XAMPP?

La ciberdelincuencia es un rollo. Antes podías hacerte un pogramita en JavaScript y ejecutarlo en tu navegador y ver lo que molaba. Ahora no, la seguridad en navegadores impide dicha praxis y obliga a que estos estén alojados en un servidor web. Asín que consigue un espacio, gratuito o no y sube cualquier modificación que hagas para probarlo... pfff! qué palo!

Ante esta diatriba lo mejor es que instales en tu máquina un servidor web, hagas tus pruebas y subas el producto que te satisfaga. Pero eso es pá pros. ¿O no?

XAMPP una posible solución.

Las hay más sencillas, de hecho hay un pluggin pal Google que funciona a las mil maravillas, busca por ahí, pero la gracia de XAMPP es que tendrás un servidor completo con su base de datos MySQL y todo y que no te consumirá recursos ya que lo arrancarás cuando lo necesites. Además, puede ejecutar PHP y Perl.

Mmmm... me gusta, ande lo pillo.

Pues mira... pincha AQUÍ.

Vale lo tengo, ¿y ahora qué hago?

Eh! Es un ejecutable! Dale!

Cuando empieces a instalar te dirá que si tienes antivirus, que si la UAC está activa, que si Júpiter no está aún en línea con Saturno... hazle caso o no. Yo paso y me instala bien, pero si no te funciona por no seguir los consejos no vengas a poner comentarios en el blog...

Después de los avisos te pedirá qué módulos quieres instalar. ¿Tienes claro lo qué vas a hacer? Quita lo que no necesites. ¿Estás empezando y tu límite es abarcar lo abarcable? Dale a todo.

En la siguiente pantalla se te pide la carpeta en la que instalar XAMPP y verás que te pide instalar en raíz C:. Hazle caso sabe lo que dice. Piensa que los archivos que crees los tendrás que copiar en esa carpeta y si los metes en c:\pruebas\misprimerospinitos\xampp\prueba1 lo vas a sufrir constantemente.

La siguiente pantalla es autobombo. Que cómo molo. Que si puedo instalar tal y cual... tú mism@. Si quieres, véndete al diablo (que dicen que tiene un buen rab...)  OPS! Perdón! Me puede el imaginario popular.

Y ya le das y se pone a instalar.

Y se acabó!

Mola. Está instalado porque me lo dices. ¿Y ahora?

Ahora trata de arrancarlo por Dios!. Si me has hecho caso lo tendrás en C:\xampp.

En esa carpeta tienes un fichero que se llama xampp_start que arranca algo y un xampp_stop que para algo. También tiene un xampp-control que te permite decidir qué arrancas y qué paras. ¿Lo pillas? Que le des al xampp-control...

Si sólo quieres utilizar JavaScript o HTML, como es el caso que hemos planteado al principio... le das al Start únicamente al Apache.

Y yastá. Ya funciona. Pon en la barra de direcciones (que no en el Google que nos conocemos) lo siguiente:  http://localhost o bien http://127.0.0.1 y verás la pantalla principal de XAMPP.

Guay! Pero yo quiero ver mi página!

Vale. Vuelve a la carpeta C:\xampp (¿es porqué es importante copiarlo en raíz?) y copia tu holamundo.html en la carpeta htdocs. (Puedes borrar todo lo que hay si te apetece).

Ahora, en la barra de direcciones de tu navegador (que no en el Google, pesao!) pon http://localhost/holamundo.html o bien http://127.0.0.1/holamundo.html

Vamos. Que tu página web se aloja en esa carpeta. Con el servicio Apache levantado, ya podrás ejecuta HTML, PHP, JavaScript o lo que quieras como si en un servidor de esos que se pagan se tratara. Eso sí. Es pa ti y pa mi. Si quieres que lo vea el resto de la humanidad tendrás que buscarte un servidor de pago... o no... que lo aloje.

Y yastá! 

Y para acabar ya que ha salido un apache por ahí... no os voy a privar de escuchar este magnífico tema de los Shadows...