Videotutorial Game Maker 3D 28: Pantalla Dividida

Hola a todos, este es un nuevo video sobre 3D que he publicado en formato de vídeo, después de este comenzaré con la lista de videos sobre Shaders en Game Maker:

Saludos

Anuncios

Videotutorial Game Maker 3D 27: Importando Modelos

Hola a todos, ha pasado algo de tiempo desde mi ultima actualización pero aquí va, la semana pasada comencé un nuevo proyecto de tutoriales en formato de video, se harán al rededor de 10 videotutoriales sobre temas 3D y Shaders con Game Maker, el primer tutorial es sobre 3D y trata sobre exportar modelos desde blender hacia Game Maker:

Aquí está el video, pronto publicare el siguiente que será sobre Pantalla dividida en 3D.

Saludos

Tutorial Game Maker 3D 11: Transformaciones

Vamos a comenzar con un nuevo tema el cual es medio difícil pero será muy importante para la mayoría de juegos que vayamos a realizar en 3D, las transformaciones son modos en los que podemos rotar, mover y escalar los ejes sobre los que trabajamos, por ejemplo supongamos que tenemos en típico sistema de coordenadas x,y:

Ahora vamos a rotarlo 45° aplicando una transformación, el resultado sería el siguiente:

Como podemos ver el sistema de coordenadas ha sido rotado, quiere decir que si movemos nuestro objeto en el eje X en ambos sistemas de coordenadas el resultado sería que en el sistema sin rotar el objeto pareciera que se ha movido horizontalmente mientras que en el eje rotado el objeto pareciera que se ha movido en ambas coordenadas:

Si quitamos las lineas guías vemos que el resultado es que pareciera que mientras movimos al objeto en el eje X este se hubiera movido en ambos ejes:

Por lo general este no es el resultado que necesitamos (salvo algunos casos) lo que vamos a querer es primero rotar nuestro objeto sobre su propio eje (o punto de giro) y seguirlo moviendo en nuestro sistema de coordenadas normal:

para lograr esto debemos seguir una serie de pasos, lo primero que vamos a hacer es mover a nuestro objeto, luego lo que necesitamos hacer es mover el eje de coordenadas a el punto de referencia de nuestro objeto (esta transformación se llama traslación), luego debemos rotar a nuestro objeto y por ultimo restaurar el eje de coordenadas para que nuestro objeto quede en su posición correcta.

Vamos a ver como funciona la trasformación de traslación:

Traslación

En anteriores ejemplos hemos rotado nuestro eje de coordenadas y luego movimos a nuestro objeto en el eje X (lo que causo el efecto de que se moviera en ambos ejes), ahora bien, el ejemplo anterior tomaba como referencia que nuestro objeto se encontraba en el origen (el centro de las coordenadas x,y (0,0)) por lo cual al rotar nuestro objeto este rotaba sobre su centro, pero si tuviéramos nuestro objeto en otro lugar del mapa (por ejemplo x=100, y=0) el efecto al rotarlo sería el siguiente:

Pareciera que hubiéramos no solo rotado el objeto sino también que lo movimos. Para evitar esto debemos mover el sistema de coordenadas a la posición de nuestro objeto, una vez hecho esto podemos rotar nuestro objeto en su propio eje (no necesariamente tiene que ser en el centro del objeto):

Aplicando ambos conceptos que acabamos de ver entonces tendríamos que para mover un objeto y luego rotarlo en su propio eje (sin que parezca que se ha movido en otros ejes) lo que debemos hacer es: primero mover el objeto, luego debemos cambiar el eje de coordenadas a su punto de giro (en el centro para la mayoría pero hay otros objetos como puertas que tienen su punto de giro en un costado), luego debemos girar nuestro objeto y por último restaurar el eje de coordenadas a su punto original:

Esto sería todo por ahora, en el próximo tutorial veremos como aplicar esto en GML3D y haremos un objeto que se pueda mover y rotar en su propio eje.

Tutorial Game Maker 3D 10: Primitivas pt3

Este será el ultimo tutorial sobre primitivas (por el momento) en este cubriremos como añadir texturas a nuestros modelos, el proceso es muy sencillo y nos permitirá crear por ejemplo cubos con diferentes texturas por cada cara.

Pero primero, recordemos que es lo que teníamos:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 32,0,0,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//SEGUNDO TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 0,0,32,c_blue,1);
d3d_model_vertex_color(model, 32,0,0,c_green,1);

//TERCER TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 0,0,32,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//CUARTO TRIANGULO
d3d_model_vertex_color(model, 0,0,32,c_red,1);
d3d_model_vertex_color(model, 32,0,0,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

Este código dibujaba un pequeño triangulo con 3 colores los cuales se combinaban entre vertices, el proceso para añadir una textura no es muy diferente de hecho, lo primero que vamos a hacer es cambiar nuestra función de “d3d_model_vertex_color” por “d3d_model_vertex_texture”

//d3d_model_vertex_color(ind, x, y, z, color, alpha);
d3d_model_vertex_texture(ind, x, y, z, xtex, ytex);

Como podemos observar, el cambio está simplemente en que en vez de añadir un color y un alpha, ahora añadimos unas coordenadas de textura.

Coordenadas de textura

Ahora bien, las coordenadas de texturas funcionan de una manera muy sencilla, supongamos que tenemos una textura como la siguiente:

Esta imagen mide 128px por 128px, pero los valores de coordenadas solo van de 0 a 1, el valor 0,0 pertenece a la parte superior izquierda de la imagen, la coordenada 1,0 pertenece a la parte superior derecha de la imagen, la coordenada 1,1 pertenece en la parte inferior derecha, la coordenada 0.5,0.5 es el centro de la imagen.

Ahora bien, si queremos, podemos añadir valores superiores a 1 y de este modo haremos que la textura se repita, veamos este ejemplo mejor con la siguiente imagen.

Entonces, si queremos texturizar nuestro triangulo, podemos aplicar las siguientes coordenadas:

Ahora, antes de adaptarlo a nuestro objeto, vamos a modificarlo un poco para convertirlo en una pirámide:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 32,0,0,c_blue,1);
d3d_model_vertex_color(model, 16,16,32,c_green,1);

//SEGUNDO TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 0,32,0,c_blue,1);
d3d_model_vertex_color(model, 16,16,32,c_green,1);

//TERCER TRIANGULO
d3d_model_vertex_color(model, 32,32,0,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_red,1);
d3d_model_vertex_color(model, 16,16,32,c_green,1);

//CUARTO TRIANGULO
d3d_model_vertex_color(model, 32,0,0,c_red,1);
d3d_model_vertex_color(model, 32,32,0,c_blue,1);
d3d_model_vertex_color(model, 16,16,32,c_green,1);

//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

y ahora vamos a aplicarle las coordenadas de la textura:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex_texture(model, 0,0,0,1,1);
d3d_model_vertex_texture(model, 32,0,0,0,1);
d3d_model_vertex_texture(model, 16,16,32,0.5,0);

//SEGUNDO TRIANGULO
d3d_model_vertex_texture(model, 0,0,0,0,1);
d3d_model_vertex_texture(model, 0,32,0,1,1);
d3d_model_vertex_texture(model, 16,16,32,0.5,0);

//TERCER TRIANGULO
d3d_model_vertex_texture(model, 32,32,0,1,1);
d3d_model_vertex_texture(model, 0,32,0,0,1);
d3d_model_vertex_texture(model, 16,16,32,0.5,0);

//CUARTO TRIANGULO
d3d_model_vertex_texture(model, 32,0,0,1,1);
d3d_model_vertex_texture(model, 32,32,0,0,1);
d3d_model_vertex_texture(model, 16,16,32,0.5,0);

//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

Ahora solo nos queda dibujarlo, añadiéndole una textura y ver el resultado:

tex = background_get_texture(texMuro);
d3d_draw_model(model,x,y,z,tex);

Y eso sería todo por ahora, en el próximo tutorial veremos lo que son las transformaciones.

Tutorial Game Maker 3D 9: Primitivas pt2

En el anterior tutorial vimos como crear un modelo a partir de vertices pero terminamos con un modelo de un solo color (blanco), este será un tutorial muy corto vamos a ver como añadirle color a nuestro modelo y en el próximo veremos como ponerle una textura.

Primero recordemos el modelo que habíamos hecho antes:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 32,0,0);
d3d_model_vertex(model, 0,32,0);

//SEGUNDO TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 32,0,0);

//TERCER TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 0,32,0);

//CUARTO TRIANGULO
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 32,0,0);
d3d_model_vertex(model, 0,32,0);

//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

Lo primero que vamos a hacer es un pequeño cambio y es que ya no vamos a trabajar con d3d_model_vertex sino con d3d_model_vertex_color

d3d_model_vertex(modelId,x,y,z);
d3d_model_vertex_color(modelId,x,y,z,color,alpha);

Como podemos ver los parámetros son muy similares, solo se añaden 2 nuevos: color (sea un color preestablecido o creado) y alpha (transparencia del vertice)

La lista de los colores preestablecidos es la siguiente:

//Colores
c_aqua
c_black
c_blue
c_dkgray
c_fuchsia
c_gray
c_green
c_lime
c_ltgray
c_maroon
c_navy
c_olive
c_orange
c_purple
c_red
c_silver
c_teal
c_white
c_yellow

También podemos crear un color rgb utilizando la función make_color_rgb

color = make_color_rgb(255,0,0); //Rojo
color = make_color_rgb(0,255,0); //Verde
color = make_color_rgb(0,0,255); //Azul
color = make_color_rgb(255,0,255); //Morado
color = make_color_rgb(255,255,0); //Amarillo

Hay otros modos mas para crear colores pero no los veremos ya que con estos dos métodos será mas que suficiente. El parámetro de alpha (transparencia) indica si el modelo debe estar transparente (0), opaco (1) o un valor intermedio (0.5 es medio transparente)

Si juntamos y reemplazamos el modelo con estos nuevos métodos tendríamos lo siguiente:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 32,0,0,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//SEGUNDO TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 0,0,32,c_blue,1);
d3d_model_vertex_color(model, 32,0,0,c_green,1);

//TERCER TRIANGULO
d3d_model_vertex_color(model, 0,0,0,c_red,1);
d3d_model_vertex_color(model, 0,0,32,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//CUARTO TRIANGULO
d3d_model_vertex_color(model, 0,0,32,c_red,1);
d3d_model_vertex_color(model, 32,0,0,c_blue,1);
d3d_model_vertex_color(model, 0,32,0,c_green,1);

//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

Y el resultado sería el siguiente:

Como se puede observar los colores se van combinando cuando se avanza de un vértice al otro con lo cual podemos crear modelos un poco interesantes.

Eso sería todo por este tutorial, en el próximo veremos sobre como añadirle texturas a nuestro modelo.

HOMEWORK TIME!

En algunos tutoriales de ahora en adelante incluiré una pequeña sección para que practiques lo que acabamos de ver. Ok, en este caso lo que vas a hacer es algo muy sencillo, vas a crear un cubo de colores utilizando la técnica que acabamos de utilizar (d3d_model_vertex_color), debes tener en cuenta ubicar los vertices en el orden especifco (que vimos en el tutorial anterior):

Si has hecho todo correctamente el resultado debe ser el siguiente:

Si necesitas ayuda o si quieres comparar respuestas aquí te dejo la solución en un archivo editable de Game Maker 8 (pero trata de hacerlo por tu cuenta)

Si se vence el link por favor avisar para reponerlo.

No siendo mas, te espero en el próximo tutorial.

Tull v2.0

Hola a todos, luego de un largo tiempo desde que lancé mi juego original Tull al final he logrado terminar la segunda versión de este juego, la he publicado en una URL diferente con el fin de conservar la versión original que participo en el concurso de Trials of Oryx intacto.

Esta nueva versión contiene:

  • El campo de visión ahora es mas oscuro con la distancia
  • Añadida una alerta de cuando hay pocas cantidades de comida
  • Las pociones cuando son desconocidas permanecen de color gris hasta que el jugador las pruebe
  • El dinero que es soltado por los enemigos se combina con dinero que estuviera previamente en esa posición
  • Manchas de sangre cuando se hace daño a un objetivo
  • Se ha cambiado la interfaz gráfica un poco
  • Se aumento ligeramente el tamaño del canvas
  • Ahora hay un progreso de días (aunque en esta versión no hay un propósito para el avance)
  • Se han añadido trampas
  • Se corrigieron varios bugs
  • Y lo mas importante, ahora se puede guardar/cargar el juego automáticamente cuando se duerme en el hotel.

Por último este es link del juego:

Aún no está terminado el juego, falta una nueva versión pero no se cuando estará lista, por ahora estoy ocupado en nuevos proyectos.

Saludos

Tutorial Game Maker 3D 8: Primitivas pt1

Ya hemos visto en un tutorial anterior las formas básicas que trae el Game Maker para dibujar objetos, estos son: cubo, esfera, cono, cilindro, suelo y muro, pero en ocasiones necesitamos otras formas especiales, mas complejas o simplemente para ahorrar un poco mas de memoria.

Crear nuestros propios modelos puede ser sencillo pero a la vez un poco mas largo que lo normal, para ello lo primero que debemos hacer es indicarle al Game Maker que queremos hacer un objeto. Podemos crear un script para ubicar el código e invocarlo desde el evento create de un objeto modelo:

//scrTriangulo
var model;

model = d3d_model_create();

Con esto simplemente hemos asignado un espacio de memoria para nuestro objeto y lo hemos guardado en una variable.

Lo siguiente que vamos a hacer es especificarle que tipo de modelo vamos a crear:

//scrTriangulo
var model;

model = d3d_model_create();
d3d_model_primitive_begin(model, pr_trianglelist);

Hay diferentes modos de interpretar la creación de los modelos, pero para la mayoría de casos estaremos utilizando el “pr_trianglelist” estos son los otros tipos:

pr_pointlist – Solo dibujará los puntos de los vértices
pr_linelist – Dibujará lineas por par de puntos
pr_linestrip – Conecta los dos últimos puntos por una linea (pero no el último con el primero)
pr_trianglelist – Crea un triangulo utilizando 3 puntos
pr_trianglestrip – El primer triangulo es con los 3 primeros puntos el resto es con los 2 ultimo y uno adicional
pr_trianglefan – Crea un triangulo con el primer punto y 2 adicionales

Ahora vamos a definir los vértices que debe llevar nuestro modelo, estos vértices se deben ubicar en un orden especifico y ese debe ser en sentido horario:

Ahora, vamos a crear un pequeño modelo 3d:

//scrTriangulo
var model;

//Creamos el modelo
model = d3d_model_create();

//Definimos el tipo de construcción para el modelo
d3d_model_primitive_begin(model, pr_trianglelist);

//Creamos los vertices en sentido horario

//PRIMER TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 32,0,0);
d3d_model_vertex(model, 0,32,0);

//SEGUNDO TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 32,0,0);

//TERCER TRIANGULO
d3d_model_vertex(model, 0,0,0);
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 0,32,0);

//CUARTO TRIANGULO
d3d_model_vertex(model, 0,0,32);
d3d_model_vertex(model, 32,0,0);
d3d_model_vertex(model, 0,32,0);

Por último le indicamos que terminamos de trabajar con ese modelo y lo retornamos (si estamos en un script)

//scrTriangulo
//Indicamos que terminamos de trabajar con el modelo
d3d_model_primitive_end(model);

return model;

Ya solo nos queda llamar ese script desde el evento create de algún objeto y dibujarlo con la función d3d_model_draw

//ev_Create: objModelo
model = scrTriangulo();
//ev_Draw: objModelo
d3d_model_draw(model, x, y, z, -1);

El último -1 es el argumento de la textura, pero como aún no le hemos indicado coordenadas de textura a nuestro objeto entonces lo dejaremos en -1 para que se dibuje con un color (por ejemplo blanco), si todo se ha hecho correctamente el resultado es el siguiente:

Ahora es solo cuestión de que experimentes un poco y logres crear tus modelos.

En el próximo tutorial veremos como añadir textura a nuestro modelo.