Últimas entradas

Tutorial de Ray casting 3: Falso 3D

Escrito por el 12 noviembre, 2017 | Sin comentarios

En los tutoriales anteriores habíamos creado un juego basado en tiles, lo habíamos renderizado en un mini mapa, y le habíamos metido un primitivo pero funcional sistema de casteo de rayos. Es el momento de usarlo, para simular el render 3D.

Podeis ver el código en github aquí, y probar el juego con este enlace.

» Leer la entrada entera

Tutorial de Ray casting 2: Rayos y retruécanos

Escrito por el 8 noviembre, 2017 | Sin comentarios

Pues aquí estamos otra fría tarde de noviembre par continuar programando nuestro propio wolfenstein. Hasta el momento, teníamos una primera versión donde únicamente podíamos movernos por el mapa y chocar alegremente con las paredes, y todo aliñado con una vista cenital del mapa al estilo del tutorial de tiles que hice cuando aún era mas joven, feliz, e incluso tenía mas pelo. Lo que pretendo conseguir hoy es llegar a esta versión:

Como viene siendo habitual, aquí teneis el enlace para probar esta versión, y aquí su correspondiente código en github.

» Leer la entrada entera

Etiquetas: , ,

Tutorial de Ray casting 1: Creando nuestro propio framework.

Escrito por el 5 noviembre, 2017 | Un comentario

Escribí el último tutorial hace 4 años, tiempo que he desperdiciado en un montón de causas sin que ninguna me haya hecho millonario, como es mi sueño. Así que retomaré el camino de experimentar en la web haciendo tutoriales mientras aprendo nuevas chorradas que nunca podré aplicar en mi trabajo. Al menos hace bonito en el currículum.

Bueno, sin mas preámbulos, el objetivo de este tan ansiado tutorial que me ha llevado cuatro años preparar, es el de modelar un motor gráfico pseudo 3D, como el de aquél afamado videojuego de Id Software, llamado Wolfenstein 3D, y que yo nunca jugué, porque por edad, estoy mas próximo al primer Half-Life (y en el que aún estoy un poco verde para plagiar con javascript, pero todo se andará). Éste es el aspecto que tenía aquél mito del mundo del videojuego, que si bien no fue el primer FPS de la historia, sí que fue por influencia, el padre del género.

Y esta imagen es nuestro particular homenaje. No se le parece mucho, pero todo se andará.

El objetivo de este primer tutorial es hechar a andar este juego. Como novedad, ahora he metido el código en github. El personaje se menea con las típicas teclas WASD.

» Leer la entrada entera

Etiquetas: , ,

Tutorial de algoritmos en javascript, minimax: Tres en raya

Escrito por el 26 septiembre, 2013 | 16 comentarios

Tras un largo periodo vacacional, aquí estamos de nuevo para explicar un nuevo tipo de algoritmo básico que nos ayudará con la IA de cierto tipo de juegos: Algoritmo minimax.

El juego donde vamos a usar este tipo de algoritmo será el tres en raya, también conocido como tres en línea, o tic tac toe en la pérfida Albión. El juego se juega típicamente con bolígrafo y papel, y consiste en rellenar tres celdas consecutivas de un tablero de 3 x 3 formando una línea vertical, horizontal o diagonal. Se juega por turnos, y normalmente se usan los símbolos “X” para el primer jugador y “O” para el segundo.

13915155-tic-tac-toe-simbolo

Para probar el juego, pincha aquí. Está hecho en HTML4 para representar el tablero y por supuesto javascript. No debería tener ningún problema en ejecutarse en cualquier tipo de máquina

» Leer la entrada entera

Etiquetas: , , , ,

Tutorial de algoritmos en javascript, backtracking recursivo: Cifras y letras

Escrito por el 13 mayo, 2013 | 6 comentarios

En el último tutorial de Pong sobre IA hablé de algunos algoritmos útiles para encontrar soluciones. En esta nueva serie de tutoriales sobre algoritmos útiles, pretendo escribir un poco sobre varios de ellos, programando algún código donde haga uso de ellos a modo de ejemplo práctico. En esta primera lección, he pensado comenzar por ejemplo con el más sencillo de entender de todos, pero a costa de ser menos eficientes que otros algoritmos inteligentes.

Estos algoritmos se diseñaron para resolver problemas, pero también pueden ser usados para programar IAs de videojuegos, todo depende de la imaginación y capacidad de abstracción del programador. En este tutorial no pretendo hacer un análisis académico de la técnica backtracking, así que es posible que cometa algunos errores o mi implementación no sea la más eficiente de todas.

El código que va a servir de ejemplo es un algoritmo que resolverá la prueba de cifras de aquél gran concurso de televisión llamado “Cifras y Letras”, que daba por la segunda cadena de la televisión pública española hace la tira de años, y que actualmente aún sobrevive a nivel regional en algunas cadenas de televisión autonómicas.

La prueba de letras consistía en formar una palabra a partir de las 9 letras (vocales y consonantes) aleatorioas de las que disponían. Habían 3 condiciones: La palabra debía aparecer en el diccionario, no valían plurales, y no valían conjugaciones verbales a excepción del infinitivo, gerundio y participio (por ejemplo, jugar, jugando, jugado).

La prueba de cifras era parecida, pero con números. Disponían de 6 números de entre (1 al 9, 10, 25, 50, 75 y 100) con los que se podían realizar de dos en dos las siguientes operaciones: Sumar, restar, multiplicar y dividir. Los resultados siempre debían ser enteros positivos (la división tenía que ser exacta, y la resta siempre positiva), y esos resultados obtenidos podían usarse también para seguir haciendo operaciones. El objetivo era calcular un número lo más cercano posible, o el exacto, a otro número dado de 3 cifras.

Para el que no se acuerde, aquí van dos de los mejores concursantes de cifras de la historia:

Y en este link, el código que resuelve el problema, para que lo pruebes. He usado programación estructurada en vez de POO, porque la sencillez del código no requería un nivel de abstracción mayor.
» Leer la entrada entera

Etiquetas: , , ,

Tutorial de Pong en JavaScript II: Una IA más avanzada.

Escrito por el 30 abril, 2013 | 5 comentarios

En el tutorial anterior expliqué cómo programar el juego Pong en JavaScript utilizando vectores, lo que me permitía hacer que la pelota modificara su ángulo de salida según la zona de la pala por donde le pegaba a la pelota. Esto hacía que las partidas fueran mucho más interesantes y divertidas porque la pelota ahora tiene un comportamiento un poco menos predecible.

También le metí una IA mu básica, excesívamente fácil de vencer, donde la pala manejada por la CPU únicamente perseguía la pelota. Lo que vamos a hacer en este tutorial es explicar los fundamentos básicos para programar una primera IA funcional que le complique la vida al jugador.

pong

Aquí teneis un enlace para poder probarlo online, y aquí está el zip con todo el código necesario para descargarlo y jugar en local. Las palas se mueven con W y S para el jugador 1 y los cursores para el jugador 2, siempre que los checkbox correspondientes estén desactivados.

» Leer la entrada entera

Etiquetas: , ,

Uso práctico de vectores: Pong (y un poco de sonido)

Escrito por el 10 abril, 2013 | 3 comentarios

Tengo pendientes de realizar tutoriales sobre un juego estilo shooter en 2D y otro de carreras de coches, pero ví que hacía un intensivo uso de vectores en ellos, asi que rebusqué entre los muchos experimentos que tengo hechos desde hace tiempo buscando algún minijuego con el que poder hacer una introducción al mundo de los vectores, y lo encontré: Un Pong sencillito. Y éste es el resultado:
pong

Aquí teneis un enlace para poder probarlo online, y aquí está el zip con todo el código necesario para descargarlo y jugar en local. Las palas se mueven con W y S, y los cursores.

Con éste famoso minijuego aprenderemos a usar vectores (matemáticos) orientados a los videojuegos, y su increíble utilidad para posicionar, rotar y mover entidades por el mundo, entre otras muchas funciones. Y ya que estamos, veremos cómo meter sonidos en nuestros juegos javascript usando el nuevo elemento AUDIO de HTML5. Y por si mis queridos lectores no tuvieran hermanos ni amigos con los que jugar, también incluiremos una inteligencia artificial tan estúpida que podría llegar fácilmente a presidente del gobierno.

» Leer la entrada entera

Etiquetas: , , , , , ,

Three.js Tutorial 3 – Texturas, iluminación y transparencias.

Escrito por el 5 abril, 2013 | 3 comentarios

Seguimos con el tercer tutorial de la serie para Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En este tutorial uniremos lo que vimos en el tutorial 6, 7 y 8 de la serie de WebGL puro, debido a que los cambios no tienen mucha chicha.
» Leer la entrada entera

Etiquetas: , , , ,

Three.js Tutorial 2 – Colores, movimientos y 3D

Escrito por el 6 marzo, 2013 | 12 comentarios

Damos paso al segundo tutorial de la nueva serie centrada en Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En este tutorial uniremos lo que vimos en el tutorial 2, 3 y 4 de la serie de WebGL puro, debido a la sencillez de los cambios.
» Leer la entrada entera

Etiquetas: , , , ,

Three.js Tutorial 1 – El retorno del triángulo y el cuadrado

Escrito por el 4 marzo, 2013 | 10 comentarios

Bienvenidos al primer tutorial de la nueva serie centrada en Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En concreto, para este tutorial inicial, haremos lo mismo que hicímos en el viejo tutorial del triángulo y el cuadrado en WebGL.

Éste es el resultado de lo que se verá en un navegador que soporte webGL:

Abre este enlace para ver el Ejemplo en vivo de Three.js. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome.
» Leer la entrada entera

Etiquetas: , , , ,

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)