Tutorial Pantalla Titulo Personalizado
En este tutorial, se enseñara como hacer tu propia pantalla de titulo personalzado.
Primero de todo, cabe resaltar que este tutorial, esta diseñado para usarse con los pluguins de Dyn, puedes encontrar la muestra de juego totalmente parcheada aqui:
Paso 1º - Preparacion de imagenes
Lo primero que haremos, sera preparar las imagenes para la Pantalla de Ttilo Personalizado (en adelante PTP)
Las imagenes que necesitaremos, seran las siguientes:
1º - Imagen de fondo: Buscaremos una imagen de fondo que querramos añadir, en este tutorial, seleccionaremos un panorama de nubes que ya viene en nuestro RTP.
2º - Imagen del titulo del juego: Crearemos mediante un editor grafico, el nombre del titulo del juego, en este caso, lo llamaremos "Tutorial Quest" y su tamaño será de 320 x 240
3º - Imagenes de menu: Crearemos mediante un editor gráfico, las imagenes del menu, estas imagenes, seran las que mostraran el menu inical, crearemos cuatro imagenes, y seran para lo siguiente:
1º- Imagen "Iniciar partida"
2º- Imagen "Cargar partida"
3º- Imagen "Creditos"
4º- Imagen "Salir del juego"
El tamaño de las imagenes del menu para este tutorial seran de 80x16,
Asi pues, aqui os dejo las imagenes que usaremos:
Una vez que ya tengamos las imagenes, procederemos al siguiente paso.
Paso 2º - Mostrar imagenes.
A continuacion, haremos que se muestren las imagenes del PTP y lo haremos de la siguiente forma..
Primero de todo, crearemos el mapa donde querramos que este nuestro PTP y lo pintaremos del tileset que nos deje ver el fondo.
Entraremos a las opciones de este mapa, y configuraremos un fondo para el mapa, en este caso, colocaremos una imagen de fondo, en este tutorial, pondremos un fondo de nubes que ya viene con el RTP, haremos click en una de las casillas de Scrolling, y pondremos en automatico con el valor de 3 y aceptaremos.
Despues de configurar el mapa, crearemos un evento nuevo, este lo colocaremos en "proceso paralelo" y aqui pondremos los comandos de "mostrar imagen",
Primero, colocaremos la imagen de titulo y las coordenadas que pondremos, seran de 160x 120y y su "Nº de imagen" lo dejaremos en 1
Para las imagenes del menu, haremos lo mismo, pero con las siguientes coordenadas y ªNº de imagen" siguientes:
Imagen "Iniciar partida": coordenadas 80X y 120 Nº imange: 2
Imagen "Cargar partida": coordenadas 80X y 136 Nº imange: 3
Imagen "Creditos": coordenadas 80X y 152 Nº imange: 4
Imagen "Salir del juego": coordenadas 80X y 168 Nº imange: 5
Despues de colocar estas imagenes, colocaremo el comando de "eliminar evento momentaneamente"
De este modo, cuando entremos en este mapa, se colocaran las imagenes y no se saturara el programa
Paso 3º - Preparando las variables.
Este paso es muy sencill, simplemente nombraremos las variables que usaremos, y seran las sigueintes:
Variable 0001: Cursor menu
Variable 0002: Posicion menu
Variable 3350: Cerrar juego
Estas variables son las unicas que usaremos para el menu.
Paso 4º - Creando el engine.
Bien, ahora pasaremos a la mejor parte que es crear el engine para que podamos seleccionar los diferentes menus..
Primero de todo, crearemos un evento en "inicio Automatico", esto mismo hara que el heroe no pueda desplazarse por el mapa.
Dentro de este evento, iremos poniendo los siguientes comandos:
Comando variable:
Seleccionaremos la variable "posicion de menu" y le pondremos el valor 1 con la operacion "sustitucion".
Despues colocaremos el comando "Elegir etiqueta" y pondremos la etiqueta Nº1
Despues colocaremos el comando "Asignar teclas" aqui seleccionaremos la variable "cursor menu", en opciones dejaremos la casilla "esperar a pulsar tecla" marcada y en las opciones de "tecla a asginar" marcaremos las siguientes: "tecla abajo" "tecla arriba" e "intro" y aceptaremos.
Hasta aqui, muy sencillo, a partir del siguiente punto, se complica un poco la cosa, ya que crearemos 3 grupos de "condiciones y efectos" con varios comandos dentro, y para que se pueda entender mejor, los separare de la siguiente forma:
-Condicion Grupo 1º-
A continuacion, pondremos el comando "condiciones y efectos" marcaremos la opcion de Variable, y seleccionaremos la variable "cursor" y pondremos que sea "Equivalente" a 1 y aceptaremos.
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 1
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 2 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Bien, ahora, despues de esta "condiciones y efectos" crearemos otra condiciones y efectos, y lo configuraremos y añadiremos los mismos comandos que en el paso anterior, pero con diferentes opciones:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 2
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 3 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Haremos de nuevo el mismo paso , crearemos una nueva condicion despues de la ultima condicion que hemos añadido y cambiaremos los mismos valores a los siguientes:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 3
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 4 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Haremos de nuevo el mismo paso , crearemos una nueva condicion despues de la ultima condicion que hemos añadido y cambiaremos los mismos valores a los siguientes:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 4
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Nota: Estos comandos que hemos añadido, lo que haran, es q al pulsar hacia abajo, se añadan unos valores a las variables que representaran mas adelante, las posiciones del menu inicial y al llegar a la posicion 4, no avance mas..
-Condicion Grupo 2º-
Despues de añadir estas condiciones, añadiremos otro comando de "condiciones y efectos" pero lo colocaremos despues de la primera "condiciones y efecto" y seguiremos un proceso similar al anterior, pero a la inversa, configurando los valores de este modo:
La primera "condiciones y efectos" le colocaremos la opcion de "variable" seleccionndo la variable "cursor menu" y pondremos que sea Equivalente a 4
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 1
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Bien, ahora, despues de esta "condiciones y efectos" crearemos otra condiciones y efectos, y lo configuraremos y añadiremos los mismos comandos que en el paso anterior, pero con diferentes opciones:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 2
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 1 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Haremos de nuevo el mismo paso , crearemos una nueva condicion despues de la ultima condicion que hemos añadido y cambiaremos los mismos valores a los siguientes:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 3
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 2 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
Haremos de nuevo el mismo paso , crearemos una nueva condicion despues de la ultima condicion que hemos añadido y cambiaremos los mismos valores a los siguientes:
Dentro de esta condicion, pondremos otro comando de "condiciones y efectos" pero con la variable "posicion de cursor" con Equivalente a 4
Dentro de esta condicion, pondremos el comando de Varible y le pondremos que sustituya con el valor 3 a la variable "posicion de menu".
Despues, colocaremos el comando "reproducir sonido" y escojamos el que querramos, en este caso, "cursor1" estara bien
Despues, colocaremos el comando "ir a etiqueta" y seleccionaremos el 1.
-Condicion Grupo 3º-
Bien, ahora, despues de esta "condiciones y efectos" donde hemos colocado la variable "Cursor menu" con valor 4, pondremos una nueva "condiciones y efectos" con la variable "cursor menu" y equivalente en 5
Dentro de estas condicion, crearemos una nueva "condiciones y efectos" con la variable "posicion de menu" equivalente a 1
dentro de esta condicion, pondremos el comando de sonido, y escogeremos un sonido de "aceptar" en este caso, "decision2.wav"
despues, pondremos el comando "esperar" y pondremos 0.5 segundos.
y luego colocaremos el comando de "teletransporte" y escogeremos el mapa que querramos que sea el inicio de juego.
Acto seguido, pondremos el comando de "cambiar miembros del grupo" y seleccionaremos al heroe que querramos
Despues de esta condicion, crearemos una nueva condicion, con la variable "posicion de menu" equivalente a 2
dentro de esta condicion, pondremos el comando de sonido, y escogeremos un sonido de "aceptar" en este caso, "decision2.wav"
despues, pondremos el comando "esperar" y pondremos 0.5 segundos.
luego colocaremos los comandos correspondientes para cargar una partida, (en este tutorial, solo hemos puesto un mensage de texto).
Despues colocaremos el comando de "ir a etiqueta" y pondremos la 1
Despues de esta condicion, crearemos una nueva condicion, con la variable "posicion de menu" equivalente a 3
dentro de esta condicion, pondremos el comando de sonido, y escogeremos un sonido de "aceptar" en este caso, "decision2.wav"
despues, pondremos el comando "esperar" y pondremos 0.5 segundos.
Despues pondremos el comando "Mensage de texto" y pondremos lo que deseemos
Despues colocaremos el comando de "ir a etiqueta" y pondremos la 1
Despues de esta condicion, crearemos una nueva condicion, con la variable "posicion de menu" equivalente a 4
dentro de esta condicion, pondremos el comando de sonido, y escogeremos un sonido de "aceptar" en este caso, "decision2.wav"
despues, pondremos el comando "esperar" y pondremos 0.5 segundos.
Luego, pondremos el comando de Variable, y seleccionaremos la variable 3350 y haremos que se añada el valor 2
Despues colocaremos el comando "parar proceso de evento" o "parar proceso paralelo (segun la traduccion que tengas) es el comando q esta justo encima de "eliminar evento"
Bien, si hemos seguido estos pasos correctamente, tendremos ya un menu inicial funcional, pero aun hay que añadir mas cosas
Paso 5º - Mostrar imagenes de seleccion del menu
En este paso, añadiremos las imagenes de seleccion para el menu
Primero de todo, crearemos un eventos en proceso paralelo.
En la casilla de la izquierda, marcaremos la casilla de "variable" seleccionaremos la variable "posicion de menu" y pondremos que sea equivalente a 1
Despues, añadiremos el comando "mostrar imagen" esta, le pondremos el numero 6, y seleccionaremos la imagen de "iniciar partida" y en las opciones de "otros atributos" le pondremos todos los valores a 200 y pondremos las coordenadas 160x 120y.
Despues, añadiremos el comando "mover imagen" seleccionaremos la imagen 6, con las coordenadas 160x 120y y en "otros atributos" pondremos todos los valores a 100 y le pondremos un tiempo de 0.5 segundos
Despues, añadiremos nuevamente el comando "mover imagen" seleccionaremos la imagen 6, con las coordenadas 160x 120y y en "otros atributos" pondremos todos los valores a 200 y le pondremos un tiempo de 0.5 segundos
Bien, a continuacion, crearemos una segunda pagina y seguiremos el mismo proceso, lo unico que cambiaremos, sera la variable "posicion de menu" sera a 2, la imagen a mostrar, sera "cargar partida" y las coordenadas seran 160x 136y
Otra nueva pagina crearemos, esta vez con la variable equivalente a 3, con la imagen "creditos" y con las coordenadas 160x 152y
Y la cuarta pagina lo mismo, la variable equivalente a 4, imagen "salir del juego" y con las coordenadas 160x 168y
Con esto, el Menu sera visible y aparecera la recreacion de las posiciones de menu cuando pulsemos arriba o abajo
Paso 6º - Detalles
Ahora que ya hemos hecho el engine, matizaremos algunos detalles para que se vea mejor el menu.
Despues de pintar todo el mapa con el tile transparente, pondremos el grupo de inicio de juego en este mapa, y para que no aparezca ningun heroe, iremos a la base de datos, y haremos que el grupo inicial, no haya ningun heroe seleccionado, de este modo, no se vera a nadie, salvo el fondo de pantalla de las nubes y las imagenes que se mostraran con el engine.
Y bueno, este tutorial acaba aqui, es un tutorial simple de como hacer una Pantalla de Titulo con su menu inicial, a partir de este, se pueden añadir neuvos menus o ampliando este mismo añadiendo mas valores a la variable de "posicion de menu", pero recuerda que todo ha de ser configurado previamente como hemos hecho en este tutorial.
Si has tenido dificultades a la hora de seguir este tutorial, os dejo aqui el link del juego de muestra en el que os debera quedar el menu si seguiis este tutorial.
