Primeros pasos Tutorial de movimiento parte 1

Ver el tema anterior Ver el tema siguiente Ir abajo

Primeros pasos Tutorial de movimiento parte 1

Mensaje  Cr3ator2012 el Mar Ago 21, 2012 6:33 pm

Bienvenidos a este tutorial para los que inician en la creación de juegos con este motor de desarrollo en html5

Antes de comenzar quiero aclarar que no soy experto en este motor ya que hace poco que lo estoy aprendiendo a manejar y quiero compartir lo que he aprendido porque casi no hay tutoriales en “español” así que este tutorial es para los que usan por primera vez un motor de este tipo, bien comencemos

Crearemos 1 ejemplo de cada acción que se pueda encontrar en un juego; es decir que aprenderemos cosas básicas para usar y combinar en nuestro propio juego, por ejemplo moverse, disparar, enemigos, etc.

Creamos un nuevo proyecto llamado “Tutorial 1 movimiento” o como ustedes quieran pero es importante llevar un orden
1. crear proyecto
2. seleccionar carpeta
3. ubicar donde se guardara el proyecto
[Tienes que estar registrado y conectado para ver esa imagen]

y llenamos estas propiedades basicas para que sepan quien hizo el juego y una pequeña descripción
[Tienes que estar registrado y conectado para ver esa imagen]

Lo primero que hay que aprender es a identificar nuestra área de trabajo así como para un pintor que debe tener el lienzo y los pinceles antes de comenzar a pintar.

Construct se divide en 5 partes que usaremos frecuentemente (agregare comentarios dentro de paréntesis para aclarar cosas importantes de aquí en adelante)

Parte 1. Barra de opciones comunes

ubicada en la parte superior de la pantalla(es un nombre descriptivo no es el real), lo llamo así porque estas mismas opciones las podemos hacer también con el mouse o el teclado o desde otras partes del programa como los eventos que se trabajan desde la pestaña Event sheet
[Tienes que estar registrado y conectado para ver esa imagen]

Parte 2. Barra de propiedades

ubicada en la parte izquierda de la pantalla, aquí se encuentran las propiedades de cada cosa que existe dentro de nuestro juego; pueden existir muchas cosas dentro como personajes, escenarios, fondos y otras, cada una de estas cosas (de ahora en adelante OBJETOS) tendrá propiedades diferentes como tamaño, nombre, posición, etc.
[Tienes que estar registrado y conectado para ver esa imagen]
Las propiedades no son visibles todas al tiempo solo es visible la propiedad del objeto seleccionado, de esa forma sabremos
que le estamos cambiando la propiedad al objeto adecuado y las modificaremos dependiendo de la necesidad por ejemplo creemos un OBJETO llamado Carro haciendo click derecho sobre el centro (área en blanco) del programa y seleccionemos Insertar nuevo objeto (new object) seleccionamos SPRITE (pueden colocar cualquier imagen como objeto) y cambiemos las propiedades de ese objeto de esta forma:
[Tienes que estar registrado y conectado para ver esa imagen]

objeto 1: Carro
propiedades:
(Tamaño) Ancho: 120 (Width) & Alto: 70 (Heigth)
(coordenadas) Pos X: 300 & Pos Y: 400
hagamos lo mismo para un segundo objeto llamado Carro2
objeto 2: Carro2
Tamaño 90,95 & Pos 280,220 (asi lo usaremos de ahora en adelante para ahorrar espacio y tiempo)
Parte 3. Área de trabajo

ubicada en el centro del motor, esta área es la parte visible de nuestro juego, aquí se colocan todos los objetos que servirán para dar vida a nuestro juego.
[Tienes que estar registrado y conectado para ver esa imagen]
Para comodidad podemos usar las herramientas de vista (lo que el usuario o jugador ve en pantalla) de esa forma podemos acercar (zoom in) o alejar (zoom out) el escenario y ver todos los objetos que esten dentro y fuera (se pueden colocar objetos por fuera del escenario para hacerlos aparecer durante el juego, estos deben estar en el área azul cielo) el área de trabajo oculta sirve para juegos que requieran movimiento del personaje por el tablero sin cambiar de nivel tipo Mario Bros, Contra, Bomber Man(el mas claro) esto lo veremos después en otro tutorial

4. Barra del proyecto

es aquí donde se listan todos los componentes de nuestro juego, se separan dentro de carpetas para tenerlos ordenados (en la versión free lamentablemente no se pueden crear carpetas adicionales a las que ya existan por defecto), ademas es importante saber que se maneja como un libro o mejor como un archivador (el título está ubicado encima de la hoja separado de los demás por colores para facilitar la búsqueda dentro de la propia àrea de trabajo).
El orden de las carpetas comienza con las escenas “layout” que son las hojas donde colocamos objetos que conformen un tablero o nivel (los layout son como escenarios si lo comparamos al juego de Bomber Man cada layout es un nivel). Por defecto al crear el proyecto aparece 1 layout, si queremos crear mas niveles o escenarios (layout) debemos hacer click derecho sobre la carpeta Layouts y seleccionar "Add Layout"
[Tienes que estar registrado y conectado para ver esa imagen]

Están las hojas de código Event sheets que sirven para cambiar las propiedades de nuestros personajes y demás objetos como movimientos, animaciones, cambiar tamaños, aparecer o desaparecer objetos y textos; también daremos ordenes como desplazamientos por medio de teclas o mouse, cambiar de capas o niveles al tocar un objeto o pasar por una zona, etc.
[Tienes que estar registrado y conectado para ver esa imagen]

A todos los cambios en las propiedades de los objetos se le conoce como EVENTO y cada evento puede tener varias ACCIONES para entenderlo mejor debemos responder estas dos preguntas,¿ quién y cuándo se hará algo?; por ejemplo si queremos que nuestro personaje haga algo cada 5 segundos con eso crearemos un evento ya que tenemos las respuestas
Quien = personaje y cuando = cada 5 segundos (estos son otros eventos)
Quien = enemigo y cuando = toque al personaje
Quien = bala y cuando = toque al personaje
(es importante saber que cada hoja corresponde a un layout pero nosotros en la barra de propiedades podemos cambiar esto) sí nuestro objeto al que le vamos a colocar el evento está en el layout 1 debemos asegurarnos que la Event sheet 1 le corresponde a ese layout (si no cambiamos esta propiedad por defecto el layout 1 corresponde a la Event sheet 1, el layout 2 a la Event Sheet 2 y así sucesivamente) Hagamos la prueba con nuestro proyecto ya colocamos 2 objetos en nuestro Layout 1 así que vamos a crear un evento para uno de los objetos; hay dos formas la primera es ir a la barra de proyecto seleccionamos la hoja de eventos (Event sheet) que corresponda a el layout que queremos modificar en nuestro caso solo hay un layout asi que no hay problema, luego hacemos click derecho en Open; la segunda forma y mas rapida es hacer click directamente en el titulo de la Event sheet 1 y ya podemos crear el evento: Click izquierdo en el texto Add event se abre una ventana seleccionan System luego click al boton Next (Siguiente) seleccionan Every X second (cada X segundos [donde X = al número de segundos que quieran colocar]) y volvemos a la pregunta ¿Cuándo? cada 3 segundos, hacemos click en Next y en Interval(seconds): colocamos 3 es decir cada 3 segundos se hace algo. Ahora debemos preguntar quien hace algo cada 3 segundos? EL CARRO y que hace? lo que haga es un cambio de propiedad que puede ser saltar, correr, volar, acelerar, girar, frenar, subir, bajar, cambiar de tamaño, etc, a todo esto se le conoce con el nombre de ACCION.
Para las acciones es igual solo que la acción es dependiente del evento por eso para cada evento pueden haber varias acciones y podemos preguntarnos cuando pase este evento ¿qué hacemos?; por ejemplo cuando una bala toque al carro haga que el carro explote y desaparezca
Que hace = el Carro desaparece
Que hace = aparece explosión
Que hace = la bala desaparece
(3 acciones para 1 solo evento)
quien = carro cuándo = cada 3 segundos le disparan que hace 1 = si la bala toca el carro el carro desaparece, que hace 2 = encima del carro aparece explosión, que hace 3 = la bala desaparece (mas adelante lo podremos usar)
La siguiente carpeta son los objetos que agregamos al juego como personajes, fondos, textos, y demás objetos que lleve nuestro juego
La siguiente carpeta se llama Families se usa para que varios objetos se comporten igual entre sí; por ejemplo si un enemigo debe ir de izquierda a derecha del juego podemos hacer que otros enemigos se comporten igual ahorrando trabajo ya que no tendremos que hacer mover enemigo por enemigo si no que se moverán igual que el primero
La siguiente carpeta son los sonidos del juego como explosiones, choques, disparos, etc.
La siguiente es la música que se escucha durante todo el juego, o que cambia cuando hay enemigos o simplemente llega al final de algún nivel
Por último está la carpeta Files (archivos) creo que es para el uso de código de programación pero no estoy seguro hasta el momento no la he usado así que cuando lo haga colocare para que sirve o si alguien sabe le agradeceríamos nos explique

*******Si nos fijamos bien hay un subtitulo que dice Projects y al lado derecho hay un subtitulo que dice Layers esta sección es para separar los niveles dentro de una misma escena por ejemplo en un juego que tenga un texto siempre fijo como el número de vidas del personaje o los puntos que haga en cada nivel este texto debe aparecer por encima de todos los demás objetos para eso podemos usar esta sección colocando una nueva capa llamada HUD (en casi todos los juegos se usa esta terminología y significa en ingles Head-Up Display), aquí solo se colocara la información permanente que tenga el juego también puede ser la barra de salud, tipo de arma, si es un carro puede ser la cantidad de gasolina o la velocidad, etc.

Las capas en la versión free solo pueden ser máximo cuatro así que yo les recomiendo usarlas así:
[Tienes que estar registrado y conectado para ver esa imagen]

La capa 0 es la de más abajo para los fondos que tenga el juego como montañas, carreteras, cielos, etc.
La capa 1 es la del medio para todos los objetos del juego como personajes, enemigos, bloques, muros, autos, etc.
La capa 2 para el HUD que ya les explique para que sirve (la cuarta capa puede usarse como HUD y tener dos capas para objetos los que pasan por encima y los que pasan por debajo por ejemplo una casa y un avión, o un avión y un barco debe verse cual es el que pasa por encima pero no es obligatorio hacerlo de esta forma ya que una capa también tiene objetos encima y objetos abajo)

5. Barra de objetos

esta sirve para ver todos los objetos que colocamos al juego por defecto si no le colocamos nombre al objeto este llevara el nombre del tipo de objeto que es por ejemplo Sprite, Sprite2, Sprite3 o Text, Text2, Text3 , etc. Estos nombres se pueden cambiar en la barra de propiedades.

Esta barra es útil cuando los objetos están uno sobre otro y no los podemos seleccionar en el Layout para esto hacemos click en el objeto desde esta barra y listo ya estará seleccionado (podemos ver que esta seleccionado porque alrededor aparecerá un cuadro que rodea el objeto además de otros cuadros blancos más pequeños que son para redimensionar o girar el objeto a nuestro gusto o necesidad). También está la opción de dar click derecho sobre el objeto para acceder a opciones como clonar, editar animación y otras opciones básicas
[Tienes que estar registrado y conectado para ver esa imagen]

Hay varios tutoriales de cómo crear un juego en varios minutos yo creo que además de eso lo que debemos aprender es a realizar cosas básicas que podamos usar para crear lo que queramos y no lo que dicen esos tutoriales por eso les recomiendo que lo separen por acciones (Movimiento, Giro, cambio, escenario, menu, etc) como yo lo hago porque esto les permitirá abrir la acción y agregarla a su propio proyecto

Hacemos doble click sobre el Layout (de aquí en adelante insertar)
Insertamos un Sprite lo llamamos “Carro”
Seleccionamos la imagen de nuestro Carro

********Podemos cambiar de tamaño a nuestro Carro y hasta borrarlo por error, si lo hacemos podemos volver a colocarlo simplemente arrastrándolo desde la carpeta Object Types o si lo que queremos es borrarlo definitivamente lo debemos también borrar de esta carpeta

********Si lo que queremos es cambiar la imagen del carro podemos hacer tres cosas que depende de su comodidad para abrir otra imagen y reemplazar la actual así de sencillo

1. dar doble click izq. sobre el objeto (recomendado)
2. dar un click en la propiedad = Animations: Edit
3. dar click derecho sobre el objeto y seleccionar Edit animations
avatar
Cr3ator2012
Admin

Mensajes : 14
Fecha de inscripción : 21/08/2012
Localización : Colombia

Ver perfil de usuario http://creajuegosenconstruc.foro-colombia.net

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.