miércoles, 5 de febrero de 2014

El primer Videojuego (Parte 4)

Vamos a comenzar este nuevo post creando nuestro primer nivel, entonces deberemos clonar los bloques rectangulo_rojo necesarios y colocarlos de esta manera:


ahora daremos un nuevo behavior al sprite plataforma el cual sera 8 Directions:


Recuerda que muchos de los procesos para realizar algunas de las cosas que hacemos, fueron descritos en post anteriores :]. Bien con esto el comportamiento de plataforma sera que puede moverse por toda la pantalla, para ver su comportamiento da en Run:


Si utilizas las flechas de tu teclado veras que puedes mover el  sprite plataforma por toda partes. Para evitar que esto ocurra ya que la naturaleza de nuestro juego no es que haga eso, configuramos algunas propiedades de plataforma , ya sabes como; solo selecciónala y ve a sus propiedades que deben quedar de la siguiente manera: 



Con estos nuevos valores solo ira de un lado a otro nuestra plataforma, pruebalo para comprobarlo. También necesitara el behavior Solid para que la pelota pueda botar sobre ella:



Una vez añadido este behavior corremos la aplicación en Run, si seguimos todos los pasos de manera correcta entonces veremos que podemos mover la plataforma únicamente de un lado a otro y que la pelota bota y rebota por todos lados, incluso sobre plataforma:


Continuemos entonces añadimos el siguiente evento, de manera que cuando bola_gris colisione con rectangulo_rojo algo ocurra, entonces lo hacemos así, da click en Add event:



Y selecciona el sprite bola_gris para asignar su tipo de evento, el cual sera este.


Después da click en Next y te encontraras con esto:


Da click en la opción seleccionada para elegir contra que objeto colisionara, y como ya sabemos sera con rectangulo_rojo :


Das click en OK y despues Done:


Con este evento sabremos que hacer en el momento justo cuando bola_gris colisione con el rectangulo_rojo, Damos en Done y ya esta. Ahora vamos a añadir una  Acción con la que podremos hacer algo relevante al juego después de que la condición del evento sea cumplida, añade la acción a este evento entonces y selecciona a rectangulo_rojo:


Ya por ultimo añadimos la siguiente opción del rectangulo_rojo:



Click en Done y quedara lo siguiente:


Córrelo y ve como comienza a tomar forma nuestro juego:


Desarrollar buenos Videojuegos como es natural lleva tiempo, al principio puede ser tedioso y aburrido y muchas personas terminaran por frustrase a mitad del desarrollo, pero veras que si tienes paciencia las cosas se irán dando y sobre todo mejorando poco a poco. En los siguientes post continuaremos puliendo el juego. No olvides guardar tu juego para no perder tus avances.

"Una búsqueda comienza siempre con la suerte del principiante y termina con la prueba del conquistador". Paulo Coelho.




sábado, 1 de febrero de 2014

El primer Videojuego (Parte 3)

Bienvenidos una vez más, en este nuevo post vamos  tomar conceptos aprendidos en los anteriores posts, así que es imperativo que hallas entendió los conceptos anteriores, de no ser así te invito a que leas las entradas anteriores :] .

Comencemos entonces enriqueciendo nuestro juego, lo primero será añadir un marco al juego así que añadiremos un nuevo elemento al juego pero esta vez será de tipo Tiled Background el cual nombraremos "marco":


Entonces lo agregamos y al layout game y nos deberá aparecer esto y vamos a redimencionarlo en la opción que se indica:


Le damos las nuevas dimensiones 32x32 y OK:


A continuación nos vamos a la herramienta balde para rellenar la figura de color negro así:

Al final nos quedara una figura negra y un poco grande en el layout, entonces solo selecciónala y redimencionala en la paleta de propiedades como se muestra continuación:


Bien, el elemento que acabamos de agregar como viste no es de tipo sprite sino mas bien de tipo Tile o mosaico, la ventaja de usar este tipo de gráfico es que tiene la propiedad de replicarse a si mismo muchas veces. Recuerda que a la hora de crear el mundo de tu Videojuego debes tener en cuenta que el numero de sprites que son repintados en pantalla afectaran el rendimiento de tu juego, por eso los sprites deben tener solo el tamaño necesario, es decir, no debes cargar sprites muy grandes por ejemplo de 500 px por 500 px si solamente los vas a mostrar en pantalla en mediadas de 32 px por 32 px, porque aun así son almacenados en memoria y esto afecta el rendimiento, también debes tener cuidado si un sprites tiene demasiadas animaciones o colocar demasiados sprites si esto se puede evitar, por eso es importante usar siempre que se puedan mosaicos ya que reducen la carga  a la memoria y el juego mantiene un mejor rendimiento. Aquí mas información acerca de esto https://www.scirra.com/manual/134/performance-tips.

Entonces haremos uso de una herramienta muy útil para acomodar objetos en tu layout, ve y selecciona los siguientes check boxs y deja los valores actuales de 32 y 32:


Como puedes observar apareció un cuadricula y también se podrá auto ajustar un objeto, entonces coloca el Tile marco en la esquina superior izquierda donde empieza el layout, después coloca el cursor al final del lado derecho del objeto marco y aumenta su tamaño hasta la linea punteada de la derecha así:


Repite estos pasos pero trata de que quede de este modo, recuerda clonar la imagen primero selecciónala después presionando Ctrl +C para copiar y Ctrl+V para pegar:


Ahora selecciona el objeto rectangulo_rojo y agrégale este Behavior o comportamiento


Has lo mismo seleccionando cualquier objeto marco y después agrega el mismo behavior o comportamiento, por ultimo selecciona el objeto bola_gris y cambia la propiedad Bounce off solids por yes:



Ahora vé lo que sucede si das Run:



Como puedes ver la pelota aparece botando de arriba abajo, esto es porque indicamos que los objetos marco(Los 4 que se agregaron) y rectangulo_rojo son de tipo Solid y el objeto bola_gris es de tipo bullet, pero al agregar la propiedad Bounce off solids > yes  podrá comportarse como una especie de pelota que bota de un lado a otro.

Hemos dado otro paso en el desarrollo de nuestro juego por ahora es todo. En la siguiente parte aprenderemos nuevos conceptos no te lo pierdas :].

"El fracaso derrota a los perdedores e inspira a los ganadores" Robert T. Kiyosaki.



viernes, 31 de enero de 2014

El primer Videojuego (Parte 2)

Llego la hora de dar un poco de funcionalidad a nuestro proyecto ya que lo ultimo que teníamos era esto:


Pero antes que nada vamos a configurar algunos aspectos básicos de nuestro proyecto, así que nos posicionamos nivel del proyecto y damos click:


 Y aparecerá del lado izquierdo lo que configuraremos a continuación. que debe configurarse así;


Debes llenar los campos como están en la imagen anterior y finalmente renombraremos la hoja de eventos o "Event sheet 1" para llamarla GAME, ya sabes como; solo dando click derecho > Rename. Con esto has configurado tu proyecto, ahora puedes guardarlo recuerda hacerlo como "Save As Single File" y darle un nombre como arkanoid1.0 por ejemplo.

Has aprendido a dar una configuración básica a tu proyecto y cambiar los nombres de los Layouts  y Event Sheets. Ahora si podemos continuar, da un click o selecciona el sprite bola_gris y ve a sus propiedades del lado izquierdo de la pantalla:


Has click en la parte de Behaviors como se ve en la imagen anterior, después click en la cruz de mas y seleccionaremos el behavior (comportamiento) llamado Bullet (Bala), damos add y listo:


Con esto tendremos un nuevo comportamiento  para el sprite bola_gris. Los behaviors o comportamientos son las conductas que tendrán los sprites, cada behavior puede generalmente configurarse en cualquier momento ya sea antes de ejecutar nuestro juego o durante el mismo, esto se logra mediante Eventos y Acciones.
Es importante mencionar que Construct 2 esta dirigido a los no programadores, asea que NO TENDRÁS QUE ESCRIBIR CÓDIGO ALGUNO, pero claro si entender algunos simples conceptos básicos de la programación. No debes subestimar su potencia solo porque no verás código C++ dentro del Engine de Construct 2 por ejemplo, algunas empresas y algunos programadores como yo por ejemplo utilizamos Construtc 2 mas que por sencillo de usar, por el tiempo que se ahorra durante el desarrollo, pues bien como ya sabes vivimos en un mundo demasiado cambiante en el que lo que importan son los resultados finales, se trata de hacer lo mas posible con lo menos, y al decir lo menos me refiero a buscar la manera mas económica de realizar todos los aspectos de un Videojuego, que son: Diseño gráfico, de niveles, música, efectos de sonido y por supuesto la programación, como vez hay mucho trabajo de tras por eso el valor que toma Construct 2. Debes siempre tener en cuenta que hacer un juego no es como jugarlo, pero debe ser una experiencia interesante e incluso divertida de hacer. Este es el ultimo juego que he visto que se realiza con Construct 2 hasta la fecha y vale la pena mencionarlo.


Continuemos, en términos sencillos un evento es cuando ocurre algo dentro del juego por ejemplo: cuando un objeto colisiona con otro, cuando el usuario presiona una tecla, cuando el juego inicia, cuando el juego termina, cuando algún objeto se mueve, etc. Y una acción es la consecuencia directa del evento, es decir, la acción ocurre justo después del evento correspondiente. Bien entonces ahora vamos a la hoja de eventos GAME dando doble click sobre ella y aparecerá lo siguiente:


Ahora damos click en la opción "add event" y seleccionaremos la opción System:



A continuación seleccionamos la opcion On start of layout y despues en Done:


Con esto acabamos de añadir nuestro primer evento y es hora de añadir nuestra primera acción:


Después seleccionamos el objeto bola_gris:



Y enseguida Set angle of motion después Next:


Y por ultimo en la caja de texto de angle ponemos 270 grados y damos click en done:


Con esto lo que hemos hecho es configurar el angulo de la pelota en 270 grados cuando inicie el layout (en este caso el juego) mediante el evento On start of layout para que valla hacia arriba, esto sucederá por que previamente le asignamos el comportamiento de bala al sprite bola_gris, entonces lo único que le indicamos con el evento es hacia que dirección debe ir el sprite en base a su angulo.


 Ahora da click en Run para ver el resultado.


Bien se que puede ser aburrido al principio aprender estos conceptos pero créeme son necesarios, solo así llegaras a dominar la herramienta, aunque por el momento nos falta un gran camino por recorrer. En el siguiente Post iremos un poco mas rápido ya que conoces lo mas importante y básico, por ahora ya sabes usar los eventos y las acciones :].

"El requisito del éxito es la prontitud en las decisiones" Francis Bacon. 









martes, 28 de enero de 2014

El primer Videojuego (Parte 1)

Muy bien es hora de ponernos manos a la obra con nuestro primer Videojuego independiente, como ya había mencionado vamos a utilizar construct 2. Esta es una herramienta relativamente sencilla de utilizar, así que vamos a comenzar con un simple ejemplo utilizando la versión gratuita y posteriormente vamos a realizar otros ejemplos con la versión de pago, como he comentado en otro post el costo de Construct 2 no es tan elevado como Unity 3d por ejemplo; sino que es mucho mas barato como puedes ver aqui .

Entonces vamos a comenzar abriendo nuestro programa para familiarizarnos un poco con el y tenemos esto:




bueno pues muestro las partes mas importantes del programa o las que se deben tener mas en cuenta:

1.- Lo mas básico de todo programa guardar,deshacer, rehacer, run y debug (modo de depuración).
2.- Todas las ventanas que queremos que se muestren en la interfaz principal.
3.- Mostrar la cuadricula y ajustarla.
4.- Tamaño de la cuadricula.
5.- Propiedades de todos los elementos del proyecto, desde aquí se pueden configurar muchas de las propiedades de dichos elementos.
6.- Árbol de los archivos que contiene el proyecto.
7.- Capas que puede contener un Layout (conocido también como pantalla del juego o lienzo).
8.- Orden de las figuras unas respecto de otras.

Vamos a comenzar con nuestro primer Juego ejemplo el cual sera el clásico Arkanoid, este juego lo iremos puliendo a lo largo de varios tutoriales, con la finalidad de ir cubriendo paso a paso las herramientas de Construct 2. Entonces le damos en crear nuevo proyecto:


Y seleccionamos "New empty proyect":


A continuación veras lo siguiente:


Como puedes observar el proyecto ya trae una configuración por defecto la cual vamos explicar y cambiar un poco mas delante para que funcione mejor nuestro proyecto, por ahora trabajaremos con esta configuración y nos enfocaremos en detalle en el juego. A continuación nos descargamos un paquete de imágenes con el que vamos a trabajar del sitio http://kenney.nl/assets al entrar ahí buscas el siguiente:


Bien entonces nos regresamos a Construct 2 y damos click derecho > rename en el lienzo principal llamado layout y le cambiamos el nombre por game.



Ahora damos doble click en el linezo blanco para poder agregar un sprite:


Como vez aparecerá esta ventana y debes seleccionar el icono del sprite y darle el nombre plataforma, damos insert y volvemos a dar click en el lienzo dentro de las lineas punteadas para colocar el nuevo sprite. Una vez hecho esto veremos loa siguientes ventanas:


1.- Ventana principal donde podremos ver el sprite el cual vamos a cargar desde los archivos que descargamos antes (o en su defecto podemos pintar ahí mismo con el editor gráfico de imágenes básico).
2.- Paleta de colores.
3.- Animaciones para el sprite correspondiente.
4.- Numero de Frames por cada animación.
(el numero 3 y 4 se explicara a detalle mas adelante).

Ahora seleccionas la opción "Load an image from a file".


Una vez hecho esto debemos buscar dentro de la paquete de archivos que descargamos un folder llamado png y dentro debes buscar la imagen llamada paddleBlu. Selecciónala y entonces debes ver lo siguiente:


Cierras el editor de imágenes y el sprite debera aparecer en el lienzo:


Ahora vas hacer lo mismo para las imagenes ballGrey y element_red_rectangle del folder png, entonces solo los nombraras bola_gris y rectangulo_rojo respectivamente. Ya que hayas echo lo mismo con los últimos dos sprites debes acomodarlos de esta manera:


como puedes darte cuenta esto fue demasiado sencillo, para ver el resultado solo da click en Run layout en la esquina superior izquierda para ver el resultado que debe ser algo similar a esto :].


Bien por el momento es todo no es mucho pero ya estamos progresando. En el siguiente post comenzaremos a darle movimiento y funcionalidad en general a nuestro juego.

"Para correr primero hay que aprender a caminar"