Un paso mas

Antes de ponerme a meter cachos y cachos de código por aquí y hacer esto una locura voy a tomar un camino más razonable.

En primer lugar voy a abrirme una cuenta en SourceForge y hacer un repositorio, luego subiré el código y los ejecutables que vaya generando con TortoiseSVN.

Para ello una vez abierta la cuenta y que nos den espacio para el proyecto debemos obtener la URL del repositorio pulsamos con el botón derecho del ratón en la carpeta que tenemos el código y aparece la opción SVN Checkout... una vez aquí metemos la URL, luego el login y password. Finalmente botón derecho otra vez en la carpeta, submenu TortoiseSVN e Import... Voila! Fácil y rápido... ya tenemos todo subido.

Con esto se tendrá un acceso bastante simple al código. Bueno lo que llevo hecho se puede ver en este enlace. Ya explicaré en otras entradas de que va todo esto, intentaré hacer los diagramas y no liarme mucho explicando... tenedme paciencia.

El objetivo de todo esto es aprender o al menos sacar algo... no se si finalmente se llegará a algo curioso, espero que sí. Por lo menos espero divertirme en el proceso y si alguien más puede disfrutarlo pues mejor que mejor.

Para terminar pongo una frase que me gusta mucho:

"Focus on the journey, not the destination. Joy is found not in finishing an activity but in doing it" - Greg Anderson

El bucle de juego

Si señor/a, veamos lo que es esto del bucle de juego.

La forma de programar un juego se reduce a un bucle en el que se repite una secuencia básica. Esta que tenenmos aquí.

La cosa se puede complicar más o menos añadiendo más pasos pero básicamente es esto.

En un primer paso capturamos los eventos y entradas del usuario, es decir, vemos que ha hecho nuestro jugador. Una vez tenemos esto tratamos la lógica interna del juego que consiste en calcular la nueva posición del jugador, mover los enemigos y disparos, colisiones, ver la posición del mapa, sumar la puntuación, etc.. en resumen, todas las acciones que marcan un paso en la evolución del juego.

Finalmente queda mostrar todo lo anterior al usuario por pantalla y vuelta a empezar.

Así de sencillo parece, pero la cosa se puede complicar muchisimo.

Bueno, ya se que poco código ha habido aquí hasta ahora... pero para el siguiente pondré una primera aproximación (porque es de la primera forma que se me ha ocurrido) a una implementación de como mostrar

un Sprite animado en pantalla a ver que tal.

Por cierto, el diagrama de la imagén esta hecho con Dia Diagram Editor que no esta nada mal... he probado algun otro pero este resulta muy sencillo de manejar.

Siguiente Secuencia

Vamos con otra secuencia, en esta nuestro bichito se pone en posición para empezar a andar. Cada frame esta hecho con el GraphicsGale que la verdad ha sido todo un descubrimiento, hace el tratamiento pixel a pixel supersencillo... 100% recomendado, además aunque se me da fatal el dibujo me hace menos tediosa esta parte.

Ahora que lo veo creo que me esta quedando algo grandote pero bueno ya me ha salido así y me da pereza hacerlo más chico, a ver que tal queda al final. La secuencia animada quedaría así.

Lo siguiente será que de unos pasitos y salte, luego seguiré con los ojitos. Más adelante, si la cosa marcha y es necesario, le meteré más frames a las animaciones para hacerlas más fluidas.

Algo de código

Tanto dibujo me come la moral (sobre todo por lo torpe que soy en este tema), no hay nada más frustrante que hacer toda una secuencia y darte cuenta que a la mitad has deformado sin querer un poco la imagen y al ponerlo todo junto hace cosas raras... ahora ponte a arreglar todos los frames desde el error... es exasperarte.

Vamos con otro tema, la elección del IDE... de cabeza me fui para Eclipse pero por desgracia en estos momentos no dispongo de un PC y estoy tirando de un Netbook conectado a la tele que es más bien modestito... así que me mordí la lengua y me fui a un Dev-C++ que no se come el Netbook pero en este caso no me gusta como trata las tabulaciones y otras cosas (manias mias) y me decidí finalmente por Code::Blocks, el cual tira muy bien y además es supersencillo de usar.

Por otro lado, me decidí por usar las librerías de SDL porque son muy versatiles, estan muy extendidas, te dan portabilidad entre sistemas operativos y además (y sobre todo) son muy cómodas de usar.

¿Qué cogemos de la página de SDL?

Necesitamos las dos versiones de las librerias, la de desarrollo y la de ejecucion.

Simplemente tomamos la que sea de ejecucion, descomprimimos y guardamos las DLL en la carpeta System de Windows.

En Code::Blocks sobra con decir que quieres hacer un proyecto con SDL e indicarle donde esta las fuentes de la librería de desarrollo para empezar a trabajar, además te crea automáticamente un main con lo básico para sacar una ventana con una foto (de hecho es el logo de Code::Blocks).

En Dev-C++ hay que meter todo lo que este en la carpeta lib de la librería de desarrollo en la carpeta lib de  Dev-C++  y luego copiamos la carpeta SDL que esta dentro de include en la carpeta include de Dev-C++.

Con esto ya estaria todo puesto en su sitio. Si queremos añadir cualqueir librería adicional pues simplemente hacemos lo mismo. Es importante guardar los .h de la version de desarrollo dentro de la carpeta include/SDL del Dev-C++ y no directamente en la carpeta include.

Lo unico que queda es preparar el Dev-C++  para linkar todo correctamente, para ello vamos a Herramientas, Opciones del Compilador, marcamos la casilla que dice "Añadir estos comandos a la linea de comandos del linker" y escribimos -lmingw32 -lSDLmain -lSDL -mwindows.

Para cada librería auxiliar tendriamos que añadir su -l correspondiente,

Y ya esta todo listo, solo queda crear un nuevo proyecto que tiene que ser del tipo "Console Application" y a disfrutar.

En Eclipse no lo pongo porque como ya dije me va extremadamente lento, si el día de mañana puedo procurarme un PC decente (o normal) me pasaré a este IDE.

Animando a la criatura

Ahora toca una parte bastante pesada, hacer cada frame (digamos fotograma) de la animación. Copio la imagen inicial y voy haciendo pequeñas variaciones, en este caso, voy a moverle la cola (que mal suena eso...).

El proceso es siempre el mismo, copiar la imagen actual y hacerle una pequeña variación. Esto y jugar un poco con las capas y transparencias para tomar las referencias.

El problema más complicado es que el tamaño de cada cuadro tiene que ser del mismo tamaño y las partes que no se animen deben estar en la misma posición, de no ser así se ve como un bailecito raro al reproducirlas en secuencia.

Hice el giro de la cola en un sentido y luego lo reproduje en sentido contrario.

Hasta el momento he tirado del Photoshop y Paint pero creo que voy a probar otro programa que tiene muy buena pinta, se trata del GraphicsGale.

La verdad es que es una trabajada tremenda (será porque me cuesta muchisimo dibujar), pero verlo moverse resulta gratificante.

El glorioso arte del pixel

Resumiendo... en este punto tenemos una idea (mas o menos), el estado mental adecuado (mas o menos) y un primer dibujo. Ahora hay que llevarlo al mundo del juego y darle vida. Primer chocazo con la realidad... se me da fatal el dibujo... veamos que dice al respecto tito Google.

Me pongo a leer guías de esto de la pixelación de cosas y me doy cuenta que lo más complicado no es el código sino todo lo que le rodea. Y así llegamos al fantástico mundo del Pixel Art. En este mismo link a la Wiki hay unas guías muy buenas en enlaces externos, por supuesto otra fuente de información para estas cosas es deviantArt.

Es muy curioso como con poco se hace mucho y esto es un gran ejemplo. Con el Paint mismo se pueden hacer cosas chulas siempre y cuando se tenga el arte y la paciencia necesarios.

Parece que esta (como tantas otras cosas) no es una habilidad que se puede adquirir teóricamente... se necesita muchas practica, así que manos a la obra. Empiezo con el Paint ¿Por que no? ¿Que puede salir mal?

Pillo la imagen del post anterior y el primer problema es ese fondo gris horrible, así que empiezo a borrarlo y ya de paso perfilar los bordes de negro. Algo así:

Los bordes son muy importantes, hay que hacerlos superfinos e intentando que no tengan picos, por otro lado procurar que las curvas sean suaves. Cuestión de paciencia, aunque lo de las curvas no se me da muy bien.

Cuando iba más o menos por hay (y como me estaba empezando a desesperar) probé un poquito de Photoshopeo y entonces encontré el borrado mágico... en dos pulsaciones de ratón ya estaba todo limpio (aquí también puse cara de tonto por no probarlo antes).

Y llegados a ese punto en el que te dices a ti mismo que tiene que existir una forma más sencilla de hacer esto, me pregunté, ¿por qué hacer la imagen tan grande?. El perfilado se me estaba haciendo eterno, aunque el Photoshop tiene magnificos shortcuts. A redimensionar se ha dicho...

Resople satisfecho pero... esa boquita de piñón no me termina de gustar, una doble boca puede resultar grotescamente interesante pero... no se, no se... hice unos cambios a ver que tal.

Anda, no esta mal... me gusta. Quiero aclarar que lo de la cabeza no es una boca sino un parpado gigante.

Bueno... pues llegamos a la temida fase (temida por mi al menos) de dar color. Parece que la idea principal es usar pocos colores y una o dos variantes oscura y clara de los mismos para hacer el efecto de iluminación. Primero los colores planos, los de luz, digamos intermedia y... otro chocazo con la realidad, tengo menos gusto para el color que una alpargata en una cacerola... menos mal que mi Galeth esta ahí para rescatarme. Tras una elección molona de colores la cosa quedo así.

Lo siguiente, y muy importante, es elegir de donde viene la luz, pongamos arriba a la derecha. Al lio y con valor, variante oscura de los colores para las zonas menos expuestas a la luz, luego un color un poco menos oscuro (sin llegar al color "plano") para esos sitios con iluminación indirecta o en penumbra. Finalmente una variante muy clarita del color para las zona iluminadas directamente.

He leído que es más sencillo poner siempre primero las sombras y luego la luz, yo que no tengo ni idea de esto, y puedo demostrarlo, sigo este consejo sin discusión.

Y aquí esta nuestro pequeño a todo color. Hay una cosa que me di cuenta más tarde, todas las guías que leií recomiendan poner los detalles al final cosa que no hice (ya tenia sus manchitas desde el principio) pero buen... no quedo mal del todo (creo...) para ser el primero que hago.

Aun no tiene nombre... ya veremos que se me ocurre...

Un nuevo comienzo...

Siempre es bonito empezar algo nuevo pero aun más bonito es acabarlo y sentirse realizado con uno mismo. Esto es algo que muy pocas veces he experimentado. En esto estaba pensando un día tumbado en la cama bastante cansado después de otro aburrido día de frustrante trabajo... bueno, para ser sinceros ese día me habían salido bien varias cosas que corrían prisa y me sentía algo liberado, por lo que imagino que esa sensación liberadora me dejo tiempo para filosofar un rato antes de quedarme bien frito.

Tras despertar se me ocurrió... ya que conozco el arte de programar y me encantan los videojuegos ¿por qué no combinar ambas cosas? Genial, el objetivo seria entonces hacer un jueguecillo sencillo y de paso aprender cosas nuevas que siempre vienen bien.

En fin, todo esto esta muy bien pero lo primero de todo es la idea.

Le comente esto a mi niña preciosa (Galeth) y un tiempo después me hizo un simpático dibujito de un chaval visto de frente con los pelos de forma que le tapaban un ojo. Entonces se me ocurrió una cosa... un joven mago que tiene un ojo especial pero lo pierde por una cosa u otra y quiere recuperarlo, por el camino encuentra otros ojos que se puede poner que le dan distintos poderes, que simpático... muy simpático pero me parecía complicado para empezar.

Días después mi niña me sorprende con el dibujo siguiente.

Me encanta, si proyectamos la idea del mago a este bichito seguro que es más sencillo (aunque realmente no tiene porque pero bueno...).

La colita la usaría para coger cosas y la bocota (la del pecho) para comer... aunque no me termina de convencer la otra boquita y el hueco para los ojos intercambiables. Magnifico.

Y así comenzó todo...

Volviendo a la realidad y conociéndome llegará un momento que no siga o que me canse así que para evitarlo he abierto este blog... si, soy como las divas necesito que me adulen...

A ver a donde me lleva todo esto.