Ungoliante : Josepzin

Pixels, juegos, viajes, libros, código libre y algunas cosas más…

domingo 5 de julio de 2009

¿Que hacía de los antiguos juegos de plataformas 2D algo genial?

Fenris78 ha traducido este interesantísimo artículo sobre los juegos de plataformas.


El artículo original está en inglés (What made those old, 2D platformers so great?) y Fenris lo ha separado en 3 partes: [Parte I], [Parte II] y [Parte III], a continuación copio la traducción completa:


juegos de plataformas

¿Que hacía de los antiguos plataformas 2D algo genial?


[...] En los próximos párrafos hay una lista de tres aspectos comunes en muchos juegos clásicos. Estas características no son las únicas que hacen que estos juegos sean buenos, pero son una base común que aparece una y otra vez.


1). El set de movimiento


Super Mario Bros 3

Nadie subió estos escalones uno a uno, pero la posibilidad de hacerlo, siempre estuvo allí.

El set de movimiento es un término nebuloso que armoniza las habilidades y propiedades del personaje. Este set incluye los estándares correr y saltar, pero también otras mecánicas como deslizarse, o el "spin-dash" - la famosa bolita de Sonic -, y las reglas de varios comportamientos, como por ejemplo, cuánto tiempo toma acelerar a la máxima velocidad, cómo reacciona el personaje cuando es golpeado, etc. Los "powerups" temporales, como la invencibilidad de Mario y los modificadores permanentes, como las armas de Mega Man, se encuentran también englobados bajo este mismo concepto.


¿Qué hace un buen set de movimiento?


Bien, comencemos desde el principio. En primer lugar - y es difícil de creer que haya que decirlo explícitamente - el set de movimiento debe ser limpio y preciso.

No hay nada peor que correr sobre un ítem y no cogerlo. Bueno, quizás el ser golpeado por un enemigo que claramente no te está tocando. Esta clase de cosas son increíblemente frustrantes, y hace que el jugador se sienta engañado por el juego.


Sonic CD

Sonic CD mostraba la adición del movimiento de deslizamiento. Esto dejaba a Sonic más vulnerable que con su "spin dash", pero duraba más tiempo y resultaba una buena forma de adquirir velocidad.

Tan pronto como nos aseguremos de que no estamos fastidiando a la audiencia, podemos construir una conexión entre el jugador y el juego en sí.


Para comenzar, el interfaz necesita ser rápido y sensible, las entradas deben tener un efecto inmediato en el personaje en orden de transmitir la sensación de control total. La granularidad y las diferentes técnicas de control, como presionar o sostener, también son importantes, ya que proveen de precisión al movimiento.


Mega Man

En Mega Man, el deslizamiento por las paredes y la posibilidad de apoyarse y saltar entre ellas, añade elementos de jugabilidad.

Es importante apreciar que la mayoría de los juegos de 8 y 16 bits, corrían a 60 frames por segundo. Muchas de las animaciones solo tenían 2-3 frames, pero el movimiento de los sprites era muy suave. Esto no solo ayudaba a la física, sino que añadía un sentido de movimiento muy dinámico.


Ahora, la precisión en los juegos de plataformas está asociada a menudo con saltos "pixel-perfect" que -si no son ejecutados apropiadamente- resultan en la muerte del juego. Mientras que este a veces es el caso, la precisión es una faceta siempre presente en estos títulos, como por ejemplo saltar a una plataforma móvil, deslizarse a través de un túnel estrecho, disparar a enemigos flotantes, etc.


Yoshi's Island

"Yoshi's Island" posee uno de mis sets de movimiento preferidos

¿Así que como podemos hacer un set de movimiento divertido?


Bien, aquí hay algo que decir sobre cómo conseguir la sensación de velocidad, como los ágiles ninjas que realizan maniobras que no pueden hacerse en la vida real. Sin embargo, lo que considero aun más importante que el factor de diversión es la integración del set de movimiento con las diferentes facetas del diseño del nivel.


2.) Los niveles


[...] En un sentido ampliamente estético, es de gran ayuda que el juego esté compuesto en varias zonas con un aspecto único. Por supuesto, esta singularidad a menudo se encuentra acompañada de numerosos objetos interactivos que añaden variedad y ayudan con el ritmo, pero existe un pequeño detalle que a veces se nos escapa: la separación entre fondo y primer plano.


Donkey Kong Country

"Donkey Kong Country" ha levantado algo de polémica a lo largo de los años, sin embargo se trataba de un gran plataformas con niveles claramente definidos.

Esto puede parecer un tema relativamente poco importante, pero que si no se trata correctamente, confunde y frustra al jugador. La confusión raras veces es algo bueno y un buen apartado gráfico es una pobre consolación por saltar sobre plataformas invisibles.


Ahora bien, en lo que respecta al entorno, no es una coincidencia que se encuentren repletos de toda clase de pendientes, puentes, trampolines, escaleras, etc. En cierto modo, son simplemente campos de juego para el jugador, tanto en sentido literal como figurado. Atienden a las posibilidades que otorga el set de movimiento, y mejoran el flujo del juego.


Bonk's Adventure

"Bonk's Adventure" tenía un flujo relativamente lento y simple, pero poseía algunos niveles realmente bizarros y entretenidos.

Los niveles elegantes y pulidos también hacen que el jugador se concentre en utilizar varias de sus habilidades. De nuevo, se provee un amplio espectro de experiencias utilizando todos los recursos existentes. El enfoque puede ser sutil -indicando el camino a través de una serie de ítems para recoger- o forzado -requiriendo que el jugador escale una pared para poder seguir adelante-.


Akumajō Dracula X

Un gran ejemplo de elementos de juego orgánicos, aparece en Akumajō Dracula X. La gran caída de agua termina en un salto a tierra seca, seguido rápidamente por un paseo en barca con el barquero.

Cuando se diseñan niveles, una aproximación guiada también ayuda creando modos en los que un jugador puede entrar y salir de un área en particular. Un camino de ítems para recoger pueden llevarte a un lugar aislado donde conseguir un poderoso powerup. Llegar allí puede requerir de una serie de saltos y maniobras sobre muros que lleven al jugador a través del camino de ítems para depositarlo en el destino deseado. En el camino de vuelta, los ítems ya no estarán. Esto elimina la necesidad de seguir exactamente los mismos pasos, haciendo el regreso a tierra algo más sencillo y divertido.


Super Mario Bros 3

Un buen ejemplo de enfoque a través de incentivos lo podemos encontrar en Super Mario Bros 3. Después de recoger un powerup de tipo "Hoja voladora", aparece una ruta recta que termina en un camino de monedas que te conducen hacia el cielo, donde te esperan más ítems que recoger.

3.) Los estados


[...]Figurate esta escena: tu personaje esta saltando por el aire, un enemigo se aproxima hacia el, persiguiéndolo mientras un misil explota contra una pared y la destruye. Una captura de esta escena revela múltiples estados: salto, persecución, explosión y derrumbamiento.


Mega Man

Cada juego de Mega Man esta repleto de enemigos que tienen un comportamiento único conducido por estados.

Los estados son básicamente denominaciones lógicas que abarcan comportamientos y propiedades de los objetos de un juego. Otorgan a los enemigos y jefes de una inteligencia rudimentaria, y retan al jugador a descifrar y explotar sus patrones de comportamiento. Les infunde personalidad, y alienta a utilizar diferentes técnicas para derrotarlos.


Por esto, los estados son tan importantes como los niveles y sus habitantes. Incluso si resulta sencillo separar visualmente enemigos y objetos interactivos, son básicamente lo mismo. Muelles, cintas transportadoras, paredes rompibles... etc. Llenan todo el escenario y hacen el difícil trabajo de convertir una imagen estática en un entorno lleno de vida.


Sonic

Los bloques que cuelgan del techo se caen y forman un puente según Sonic se aproxima hace ellos.

En las primeras partidas, los estados incentivan la experimentación e improvisación. A pesar del hecho de que son previsibles, también incentivan la rejugabilidad. Aprender las mecánicas y patrones de comportamiento de un juego, garantiza que el jugador -al menos hasta cierto punto- mejorara continuamente al jugarlo. En algunos casos, esto puede llevar a la creación de carreras de velocidad.


Si quieres comprobar cuan vibrante puede ser un juego mediante el uso de estados, echarle un vistazo a este vídeo:






Tan pronto como comiences a unir estos tres principios, es probable que tambien fomentes esas situaciones intencionadas que el jugador tiende a recordar.


¿Qué situaciones exactamente?


Bien, son cosas como utilizar los "bumpers" de pinball para desplazarte en Sonic, mientras evitas los ataques del jefe. También pueden ser situaciones como la exploración de nuevas cavernas subterráneas en Super Metroid gracias a una habilidad especial. Es correr a través de un nivel de Super Mario, sin detenernos mientras las pirañas saltan sobre nosotros pero sin llegar a tocarnos...


El flujo creado a traves de combinar inteligentemente los sets de movimiento, niveles y mecánicas de estado es buena parte de lo que hace de un plataformas un juego divertido.


Super Mario

Es momento de un salto ocasional, y puede que pasemos a través de este nivel a la máxima velocidad.

Y como un punto final, la combinación de estos tres aspectos puede ser visto en la introducción de Indiana Jones en Los cazadores del arca perdida.





martes 26 de mayo de 2009

Solución completa del WonderBoy arcade en video

Desde el artículo sobre WonderBoy en los orígenes de este blog, muchísima gente pregunta cómo pasar tal o cual nivel, gracias a los comentarios de los visitantes de esta web se han ido revelando muchos secretos e información.

Finalmente decidí buscar un poco y crear la secuencia completa de todo el juego, desde el area 1-1 hasta el 8-4, donde rescata a la princesa (o a su novia o amiga, no sé :P).

Los videos estan divididos en 10 partes, aunque no los he visto completos parece que están todos los niveles, sinceramente por lo que vi mientras controlaba que no falte ningún area, ¡no entiendo como puede un humano llegar al final! :D ¡Hay partes dificilísimas!

Un tema a responder, es sobre el famoso nivel secreto al juntar todas las muñecas, que a estas alturas ya pienso que se trata de una leyenda urbana :D

Bueno, ¡que los disfruteis!

Video 1: desde Area 1-1 hasta 2-1




Video 2: desde Area 2-3 hasta 3-2




Video 3: desde Area 4-1 hasta 4-4




Video 4: desde Area 4-4 hasta 5-3




Video 5: Area 5-4




Video 6: desde Area 6-1 hasta 6-2




Video 7: desde Area 6-3 hasta 7-1




Video 8: desde Area 7-2 hasta 7-4




Video 9: desde Area 7-4 hasta 8-2




Video 10: desde Area 8-3 hasta 8-4 (final)




Relacionados:

sábado 23 de mayo de 2009

Código Assembler del algoritmo de Bresenham

Revisando (muy) antiguos proyectos encontré este trocito de código en ensamblador (o assembler) que hice (o copié, ya no recuerdo) alrededor de 1992, para el juego Defender, que en realidad es un remake de Command Comander, sólo que no sabíamos que se llamaba así... :P

El código en ensamblador es para procesadores 80286, las famosas PC AT 286. Y pinta el pixel en el modo gráfico #13 de las VGA (320x200 pixeles y 256 colores).

Está preparado para funcionar dentro del código fuente del Turbo Pascal, por eso está declarado como una función, con parámetros de coordenada X/Y de inicio y fin, el color a pintar y otro parámetro que no sé que es :D

No tengo idea si esto le será de utilidad a alguien, espero que sí.

Procedure LineaASM( x1_,y1_,x2_,y2_:Integer; Color_,Poner_:Byte); assembler;
var
x1,
y1,
x2,
y2,
delp,
delr,
delrx,
delry,
deldx,
deldy,
delre,
delde :Word;

asm

{ tomar parametros }

mov ax,x1_
mov x1,ax { X1 }

mov ax,y1_
mov y1,ax { Y1 }

mov ax,x2_
mov x2,ax { X2 }

mov ax,y2_
mov y2,ax { Y2 }

{ inc de perder todo }
mov si,1
mov di,1

{ calcular /x2-/y1/ }
mov dx,y2_
sub dx,y1_
jge @almay
neg di
neg dx
@almay:
mov deldy,di

{ calcular /x2-x1/ }
mov cx,x2
sub cx,x1
jge @almax
neg si
neg cx
@almax:
mov deldx,si

{ clasificar /y2-y1/ y /x2-x1/ }
cmp cx,dx
jge @mover
mov si,0
xchg cx,dx
jmp @alma

@mover:
mov di,0

{ almacenar delr,delp,delrx y delry }
@alma:
mov delr,cx
mov delp,dx
mov delrx,si
mov delry,di

{ obtener valores iniciales para x e y }
mov si,x1
mov di,y1

{ calcular valor inicial e incrementos para la funcion de error }
mov ax,delp
sal ax,1
mov delre,ax

sub ax,cx
mov bx,ax

sub ax,cx
mov delde,ax

{ ajustar contador }
inc cx
{ ------------------------------ }
{ estructura del bucle principal }
{ ------------------------------ }

@bucle:
{ dibujar punto en (x,y) }

push bx
push ax
push cx
push es


mov BX,SI { si=x }
mov AX,DI { di=y }

{ PQLL: AX = coordenada y (0-199)
; BX = coordenada x (399)
;
; Devuelve: BX = desplazamiento de byte en el buffer
; ES = segmento del buffer de v¡deo}

xchg ah,al { AX := 256 * y }
add bx,ax { BX := 256 * y + x }
shr ax,1
shr ax,1 { AX := 64 * y }
add bx,ax { BX := 320 * y + x }

mov ax, $A000
mov es,ax { ES:BX := direcci¢n de byte del pixel }


{ pone el punto }
mov al,Color_ { Color }
mov es:[bx],al

pop es
pop cx
pop ax
pop bx

cmp bx,0
jge @diagonal

{ caso linea recta }
@recta:
add si,delrx
add di,delry
add bx,delre
loop @bucle
jmp @fin

{ caso linea diagonal }
@diagonal:
add si,deldx
add di,deldy
add bx,delde
loop @bucle

{ restaurar registros afectados }
@fin:
end;



Relacionados:
- Código Assembler del algoritmo de Bresenham
- El algoritmo de Bresenham


Un interesante aporte: Proyectos robóticos
En esta web se pueden encontrar programas con ejemplos del Algoritmo de Bresenham para 2D, 3D... hasta 6D. Este algoritmo no sólo sirve para hacer líneas. En mi caso lo uso para coordinar los movimientos de un simulador de Brazo Robot de 5 grados de libertad (la mano no se cuenta como grado de libertad). Todo el brazo se mueve a la vez para la realización de cualquier trayectorias. En mis simuladores el brazo robor llega a dibujar. Para esta tarea uso los ficheros de extensión ".PLT" (HPGL).

Los ejemplos están escrito en FreeBasic y en este caso compatibles con QBasic. Las variables están declaras en tipo, así que es bien fácil traducirlo a cualquier lenguaje de programación.

miércoles 25 de febrero de 2009

Adiós a Internet Explorer 6

IE6 a la papelera... basura

Hace un tiempo vi un código javascript que detecta IE6 y muestra un aviso que nos anima a actualizar el explorador o usar una alternativa mejor.

Ahora he visto una nueva versión de este aviso, pero sin javascript, cosa que me gusta más.

He decidido incluirlo en mis webs y al mismo tiempo también he decidido dejar de dar soporte a la versión 6 de Microsoft Internet Explorer. Demasiados quebraderos de cabeza he tenido ya con este tema. Además hace bastante que está funcionando la versión 7 y está por salir la versión IE8, no tiene sentido seguir dedicando (perdiendo) el tiempo para corregir los errores de visualización de IE6.

El mensaje que aparece con este código es muy discreto y fácilmente modificable para que se adapte a nuestro gusto. Sólo hace falta copiar un pequeño código HTML dentro de la plantilla de la web (yo lo puse después del <body>) y luego un par de lineas dentro de la hoja de estilos CSS.

Ambos códigos se pueden copiar desde aqui: Maestros del web: Aprendamos de los noruegos y digamos adiós al IE6

sábado 21 de febrero de 2009

Banners para Retro Invaders, mi planet de retro informática

He creado algunos banners para Retroinvaders.

Por si no sabes de que se trata: es una web donde se agrupan los blogs que tratan sobre ordenadores antiguos de 8 bits, 16 bits, Spectrum, Commodore 64, Amstrad, MSX, Amiga, Atari, Apple, PC XT, consolas Nintendo, Sega, Sony, Aquarius, Oddysey, Wonderswan, desarrollo de remakes, demakes, emuladores, análisis, noticias y un laguísimo etc. y genera una nueva semilla RSS para tener todos los artículos en un solo espacio.



En la página de suscripción del retro planet estan los correspondientes códigos HTML de cada uno y se pueden usar libremente.


Banner de Retro invaders

Banner de Retro invaders Banner de Retro invaders Banner de Retro invaders

Banner de Retro invaders

Banner de Retro invaders

Banner de Retro invaders Banner de Retro invaders

lunes 16 de febrero de 2009

Religulous, El documental del ridículo de la religión

Vía El retorno de los charlatanes me entero de Religulous, un documental del cómico Bill Maher.

El nombre (Religulous) es un juego de palabras juntando las palabras religión y ridículo en inglés, digamos que aunque me he reido mucho con este documental, muchas veces parece una tragicomedia...

Realmente qué ingenua que puede ser la gente siguiendo a tipos que son chantas de pies a cabeza. Luego los trucos para ¡¡saltarse el Sabbath son una risa!! y el cierre es muy bueno.

El objetivo de este documental es demostrar no sólo lo absurdo que son las creencias religiosas sino, sobre todo, su enorme peligro y el costo que están teniendo los fanatismos en vidas humanas, igual en Irak que en Madrid, Nueva York, Gaza, Israel, Londres, Holanda, etc.

Recomendable no sólo para ateos, sino para los que no lo son, especialmente si les ha parecido que el "bus ateo" es más ofensivo que la pederastia sacerdotal o los terroristas suicidas.




Para una buena calidad mejor descargarse la película directamente: Torrent Religulous subtitulado español), ya que el video que puse aquí tiene un problema que sólo permite ver unos 70 minutos... luego hay que esperar no se cuanto para seguir viendolo, pero yo volví a abrir el video en otra ventana y pude terminar de verlo.


Regiliculous, El documental del ridículo de la r eligión

sábado 14 de febrero de 2009

Cómo personalizar Blueprint CSS



Hace un tiempo hablé de Blueprint, y como dije en su día me resulta sumamente práctico usarlo para según qué proyectos.

Ahora estoy codificando el HTML y CSS en una web del tipo ideal para usar Blueprint, aunque me encontré un inconveniente ya que el diseño es de 980 pixels de ancho y Blueprint está pensado para un ancho de 960 pixels, así que tras una muy pequeña búsqueda llegué a una web que permite generar un "Blueprint a medida" y descargarlo.

Simplemente hay que ingresar el ancho de las columnas, margen, cantidad de columnas y la aplicación nos genera un nuevo juego de estilos de acuerdo a lo que necesitamos. Yo conseguí los 980 pixels usando 22 columnas de 35 pixels de ancho :)