GameMaker Studio / Generando el scroll

Bienvenidos sean a este post, hoy nos centraremos en como manipular las vistas de nuestro juego.

Para comenzar eliminaremos todos los objetos que agregamos en nuestros posts anteriores dejando el room completamente limpio, nuestro siguiente paso sera modificar el tamaño de nuestro room para ello debemos ir al room editor, en las propiedades del room y cambiaremos el ancho (width) actual por 2048 y el alto (height) por 348, les dejo una pantalla de donde tienen que hacerlo

Con esto modificaremos nuestro room para que sea gigante pero esto es algo que arreglaremos muy pronto, nuestro siguiente paso sera establecer un fondo de pantalla si tienen alguno pueden utilizarlo sino pueden utilizar este que les dejo

Una vez descargado el archivo seguiremos con nuestro proyecto, nuestro siguiente paso sera crear el fondo de pantalla y para ello debemos crear un nuevo sprite al cual llamaremos spr_Fondo y le asignaremos el archivo que usaremos de fondo de pantalla, una vez establecido volvemos al room editor, debemos seleccionar Background en la seccion Layers de room, paneles en la izquierda de la pantalla, una vez seleccionado nos aparecera una nueva opcion para elegir un sprite y en esta seleccionaremos el que creamos recien debera quedar de la siguiente manera

Como pueden ver tenemos un fondo para nuestro jugador en su nivel o room pero esto seria practicamente imposible porque no todos tienen un monitor con la capacidad de mostrar todo, aqui entraran en accion los views o vistas, para ellos debemos ir a las propiedades del room

En esta seccion debemos seleccionar Viewports and Cameras, esto nos desplegara las siguientes opciones

Antes de comenzar con esto debemos dejar unos conceptos claros, cuando hablamos de views, vistas o viewports, estamos hablando de la parte que sera visible en pantalla, en general siempre va a ser mas chica que el room, esto nos brinda dos posibilidades: la primera es que nos permite tener elementos cargados pero invisibles para el jugador y por otro lado evitaremos tener elementos muy chiquitos en pantalla, con esto aclarado vamos a crear nuestro viewport, primero deben seleccionar a Enable viewports, luego iremos a Viewport 0 y lo desplegaremos, despues modificaremos las opciones internas de la siguiente manera:

Camera Properties

• X-Pos: 0
• Y-Pos: 0
• Width: 512
• Height: 348

En este caso setearemos los valores de la camara, es decir la parte que mostraremos de todo el room, observen que ponemos las posiciones de X e Y en 0, equivalen al left y top que vinimos usando hasta ahora y le establecimos un ancho (width) de 512 por un alto (height) de 348, obviamente estos son valores de ejemplo y pueden probar con otros valores para ver como trabaja, un detalle que ocurrira despues de establecido es que aparecera un recuadro donde nos dara una idea de como se ve nuestra «camara», veamos las siguientes propiedades que modificaremos:

Viewport Properties

• x-Pos: 0
• Y-Pos: 0
• Width: 512
• Height: 348

Esto equivale a establecer el tamaño de nuestra pantalla, se pueden establecer otros valores pero estos influiran en lo que veremos en pantalla ya que estrechara o afinara las imagenes dependiendo de las diferencias pero es muy similar al anterior lo mas recomendable es que coincidan con los parametros anteriores, veamos los siguientes:

Object Following

• Objeto: obj_Jugador
• Horizontal Border: 80
• Vertical Border: 80
• Horizontal Speed: -1
• Vertical Speed: -1

En estas propiedades estableceremos a que objeto debemos seguir, para nuestro proyecto seguiremos al jugador por eso lo seleccionamos despues tanto Horizontal Border como Vertical Border seran para establecer en cual momento que el objeto se acerque deberemos mover la camara, pueden probar con otros valores si lo desean pero 80 es un valor optimo, luego Horizontal Speed y Vertical Speed seran el valor de velocidad de nuestro viewport, si dejamos el valor de -1 estos parametros utilizaran la velocidad del objeto pero se pueden probar con otros valores para ver que sucede, con esto ya tenemos nuestro «scroll» realizado solo nos resta volver a agregar las plataformas para ver como funciona, les dejo un ejemplo de como lo hice

Con todo esto realizado podemos compilar nuestro juego y probar como funciona hasta ahora mediante el siguiente video

En el video vemos como ahora tenemos nuestra camara que no muestra todo el room sino una porcion de el mismos, tambien vemos como avanza y como retrocede funcionando perfectamente, este es el tema mas facil que hemos visto en este curso y tambien nos lo facilita cuando no existe este tipo de metodo para trabajar y debemos crearlo nosotros, una de las facilidades que provee los game engine.

En resumen, hoy hemos visto como poder ver una porcion del room, hemos hablado sobre que es un view o viewport, hemos visto como crearla, como definimos una camara, el tamaño de la ventana por medio del viewport, tambien hemos visto como es el resultado final con gran facilidad, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.