Entradas archivadas en Aprender

3 comentarios

Jueves, 4 de Septiembre del 2008

El primer PONG (incluye vídeo)

Hace ya casi un año publiqué tres capítulos de una guía para aprender a crear videojuegos. Desde cero. Se llamaba “Quiero ser como Will (Wright)” y gustó mucho; sobretodo por la forma tan original que tiene de explicar las cosas (no creo que haya muchos más tutoriales así). De hecho, todavía hoy tiene bastantes visitas (están entre las entradas más visitadas del blog) y de vez en cuando recibo correos de gente preguntando dudas y diciéndome lo mucho que les está ayudando la guía.

Pero el caso es que uno de esos principiantes, Nacho Rozas, se ha tomado la molestia de grabar su primer juego en un vídeo, y me lo ha enviado al correo. Y me ha hecho mucha ilusión. Tanta ilusión que lo he subido a YouTube (con su permiso, logicamente):

Imagen de previsualización de YouTube

Sí, ya sé que no es nada espectacular, pero es su primer juego (¡su primer juego!). ¿Recordáis vuestro primer juego? Es más… ¿Habéis hecho alguna vez un juego? Además, me ha encantado porque lo ha hecho suyo. Ha cambiado algunos detalles del juego, le ha añadido colores (fijaros en el detalle de la pelota cambiando de color) y ha creado varios niveles de dificultad. No está nada mal…

También, quiero aprovechar para animar a aquellos que hayáis seguido la guía y aún me leáis (si es que hay alguien) a que grabéis vuestras versiones del PONG. Si alguien más lo hace, iré actualizando esta entrada.

Y para los que no hayáis hecho un juego nunca y tengáis curiosidad aquí os dejo los enlaces a los tres capítulos de la guía. Os aseguro que, al menos el primer capítulo, está hecho para gente que no sabe nada… Hasta un mono podría seguir esa guía xD

Capítulos publicados hasta el momento

La pena es que no he tenido tiempo de completar la guía (¡me queda solo un capítulo!) y se ha quedado un poco desfasada porque algunos enlaces ya no funcionan y habría que adaptarla al Windows Vista, también. Me fastidia, porque todo el mundo se queda ahí a medias, pero es que escribir un capítulo de esos me lleva un montón de tiempo, y eso es algo que no me sobra ahora mismo.
6 comentarios

Martes, 2 de Septiembre del 2008

Cinco cosas avanzadas que debes saber sobre CSS

Ahora que ya has aprendido lo más básico de CSS y que ya has profundizado con cinco cosas menos básicas que debes saber sobre CSS ya puedes dar el paso y empezar a jugar con los “pros” en esto del CSS.

Archivos de ejemplo

Como en el artículo anterior, he preparado un pequeño archivo de ejemplo para que podáis verlos ejemplos en vivo y para que podáis toquetear con el código más facilmente.
Descargar ejemplocss_avanzado.zip

1. Pseudo elementos

Los pseudo elementos son una de esas cosas menos conocidas de CSS, pero que a veces acaban siendo muy útiles. Existen cuatro de estos pseudo elementos:

1.1. Modificador de primera línea (:first-line)

Gracias al pseudo elemento :first-line podemos modificar la primera línea del texto contenido en un elemento de bloque. El siguiente ejemplo quizás lo aclare un poco más.

RESULTADO:

HTML:

<p id="firstLine">A este texto le aplicamos un estilo solo a la primera línea.
El resto de líneas se dibujaran de forma normal. Y ahora tengo que
rellenar con este texto para que podáis comprobar que efectivamente
funciona tal y como digo. Este tipo de selectores se usan muy poco, pero a veces vienen
muy bien, y mucha gente no los conoce.</p>

CSS:

p#firstLine:first-line
{
color: red;
font-size: large;
background-color: pink;
}

El único uso que he dado alguna vez a este elemento fué para destacar la primera línea de un texto que quería que llamara la atención.

1.2. Modificador de primera letra (:first-letter)

El pseudo elemento :first-letter permite dar un estilo diferente a la primera letra de un párrafo.

RESULTADO:

HTML:

<p id="firstLetter">Este párrafo tiene aplicado un estilo a su primera letra, unicamente. Esto
se usa muchas veces para crear efectos tipográficos similares a los que se usa en muchas publicaciones
impresas.</p>

CSS:

p#firstLetter:first-letter
{
color: blue;
font-size: xx-large;
font-weight: bold;
}

Este elemento se suele utilizar para crear efectos tipográficos habituales en las publicaciones impresas.

1.3. Modificadores :before y :after

Los modificadores :before y :after permiten añadir contenido desde el CSS al final o al principio de un elemento de bloque.

RESULTADO:

HTML:

<p id="beforeandafter">Estos dos selectores son practicamente desconocidos y realmente curiosos.
Permiten añadir cierto contenido (en este caso, el texto en rojo) justo al principio o al final
del que ya le des tú al elemento. Nunca los he llegado a usar en la práctica, pero nunca se sabe...</p>

CSS:

p#beforeandafter:before
{
content: "[PRINCIPIO] - ";
color: red; font-weight: bold;
}
p#beforeandafter:after
{
content: " - [FINAL]";
color: red; font-weight: bold;
}

Uno de los pocos usos que se me ocurren para estos pseudo elementos son los de añadir un icono al principio o al final de un texto, por ejemplo.

Leer el resto de esta entrada »

0 comentarios

Jueves, 12 de Junio del 2008

[Actionscript 3.0] – Extender la clase ‘Event’ mola

Perdón por republicar esta entrada

Es que borré la original sin querer (¡WordPress ni siquiera me pidió confirmación!). Por suerte la pude recuperar (gracias a Dios Google).

Sé que últimamente somos muchos los que nos estamos metiendo en la programación para Flash, en Actionscript 3.0. Y no me extraña porque, como ya dije hace poco, flash está empezando a ser algo muy interesante. Por eso, he decidido que voy a intentar ir enseñando las cosas más interesantes que vaya aprendiendo sobre AS 3.0. Quizás ayude a alguien.

Extender la clase Event:

Para empezar, he elegido algo sencillo pero muy útil: Extender la clase Event que tanto se usa en Actionscript.

¿Para qué?

Para muchísimas cosas: Si ya estás habituado a programar en Actionscript 3.0, te habrás dado cuenta de la enorme importancia e utilidad que tienen los eventos. Pues imagínate que necesitas pasar cierta información adicional junto al evento cuando lo lanzas (unas coordenadas indicando dónde se produjo, un texto explicando qué ha ocurrido, etc…). Eso se consigue extendiendo la clase Event.

¿Cómo?

Pues no puede ser más sencillo. Simplemente tenemos que extender la clase, igual que haríamos para conseguir una herencia entre dos clases normales. Lo único en lo que debemos fijarnos es en que sobreescribimos la función clone() de la clase Event.

Y ya está. Con eso ya tenemos nuestro propio tipo de eventos que podemos lanzar como se hace siempre:

dispatchEvent(new MyEvent(EVENTO));

¿Algún ejemplo?

Desde luego. A continuación un ejemplo muy sencillo para que veas qué tipo de cosas se pueden hacer.
Leer el resto de esta entrada »

9 comentarios

Jueves, 22 de Mayo del 2008

Cinco cosas (menos básicas) que debes saber sobre CSS

Ahora que ya dominas lo más básico de CSS estás listo para aprender a hacer cosas un poco más avanzadas. Pero solo un poco más.

Archivos de ejemplo

Esta vez he preparado un pequeño ejemplo de cada una de las cinco cosas que intento enseñaros en esta entrada. Os será útil para ver los resultados en directo y para entender mejor como funcionan.

Descargar ejemploscss.zip

1. Aplicar varias clases a un mismo objeto

Es posible aplicar más de un estilo a un mismo elemento. Esto se consigue poniendo los nombres de las clases separadas por un espacio.

<p class="marcado grande">Texto marcado y grande</p>

En el CSS no hay que hacer nada raro.

.grande{
font-size: x-large;
}
.marcado{
background: #ffff86;
}

Leer el resto de esta entrada »

8 comentarios

Miércoles, 30 de Abril del 2008

Cinco cosas básicas que debes saber sobre CSS (aprende CSS en 5 pasos)

AVISO: Entrada para principiantes.

Esta entrada va dirigida a gente sin conocimientos de CSS. Si ya estás minimamente familiarizado con el uso de hojas de estilo, puede que esto no te interese.

Aún así, quien sabe, quizás aprendas algo que se te había pasado por alto. O, mejor aún, igual puedes aportar algo a través de los comentarios.

1. Qué es CSS

CSS son las siglas de Cascading Style Sheets, que traducido al español sería algo así como Hojas de estilo en cascada. Analicemos ese nombre:

Son hojas de estilo:

CSS son hojas de estilos. Esto quiere decir que son unos documentos (de extensión .css) que contendrán información acerca del estilo de una página web. Por “estilo” se debe entender todo aquello que afecta a la apariencia de lo que se ve en pantalla (colores, tamaños, posiciones, etc…).

Por ejemplo:

p /* Esto da un color gris oscuro a todos los párrafos de una página web */
{
color: #222222;
}

Son en cascada:

Las CSS son hojas de estilo en cascada. Lo de cascada viene por la forma en que se aplican los estilos de forma jerárquica y hereditaria. Basicamente quiere decir que, aprovechando que las páginas web se programan de forma jerárquica, los estilos se irán heredando desde los elementos más importantes hacia los que se van anidando dentro de ellos.

Por ejemplo:

<div id="contenedor" class="estilo">
Esto hereda el estilo del contenedor por estar anidado en él.
</div>

Separar el contenido de su representación

La gran ventaja de las hojas de estilo CSS es que permiten separar el contenido de su apariencia. Esto se puede ver muy claramente en CSS Zen Garden. Ahí podéis ver un mismo archivo html (el contenido) que cambia completamente su apariencia según qué css se le aplique (el estilo).

2. Cómo cargar una hoja de estilos.

Lo primero de todo es saber cómo se carga una hoja de estilos en la página web para que se empiecen a aplicar. Es muy sencillo; solo hay que añadir una línea en el head de la página:


...
<!-- Así cargamos y aplicamos la hoja de estilos 'estilo.css' -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
...

Leer el resto de esta entrada »

14 comentarios

Viernes, 1 de Febrero del 2008

Tercer capítulo de la guía “Quiero Ser Como Will (Wright)”

Tras tres meses desde el anterior capítulo de la guía “Quiero Ser Como Will (Wright)”, aquí está la tercera entrega de esta serie, que pretende ser un punto de partida para aquellos que quieren iniciarse en el mundo del desarrollo de videojuegos.

Siendo sincero, tengo que decir que no estoy completamente contento con el resultado, básicamente porque ahora tengo menos tiempo que cuando escribí el primer capítulo y no he podido repasar con calma todo (de hecho ni siquiera lo he releído). Por eso, agradecería a aquellos que lo lean los primeros que me avisen de cualquier tipo de problema o error que haya en la guía, para poder corregirlo rapidamente. En los dos capítulos anteriores, vuestra ayuda ha sido fundamental para dejarlas sin fallos.

Descargar el capítulo (pdf)

QSCWW – Capítulo 3
(es necesario completar el segundo capítulo antes que este para poder seguirlo)

Resumen del capítulo:

En este segundo capítulo, titulado “Colisiones”, continúa el desarrollo del juego de scroll vertical que se comenzaba en el anterior capítulo. Al final de este, se llegará a tener una primera versión “jugable” en la que se puede disparar contra los enemigos que avanzan en dirección opuesta.

Además, se descubrirá una sorpresa en la relación entre Olaya y Miguel, que sufre un cambio muy importante.

“Quiero Ser Como Will (Wright)”… ¿Qué es eso?

“Quiero Ser Como Will (Wright)” es una guía que trata de enseñar de una forma muy diferente a la habitual. Gracias a ella –y a tus ganas de aprender– podrás convertirte, sin aburrirte, en un desarrollador de videojuegos eficaz y con sentido común.

La guía se distancia muchas veces de los aspectos más técnicos o teóricos del desarrollo de videojuegos, y aprovecha su original formato para reflexionar y aconsejar sobre cuáles son las mejores prácticas a la hora de afrontar un proyecto de videojuego. Apuesta por la sencillez y la claridad del código, a la vez que propone un aprendizaje “paso a paso” al ir aumentando poco a poco la dificultad de los juegos desarrollados.

Capítulos publicados hasta el momento

41 comentarios

Jueves, 25 de Octubre del 2007

Segundo capítulo de la guía “Quiero Ser Como Will (Wright)”

Por fin he terminado el segundo capítulo de la guía “Quiero Ser Como Will (Wright). Se titula “En tu casa o en la mía” y en él se utiliza C++ con el Visual Studio y Allegro como librería para gráficos. A continuación la descripción que puse en su página de Colectivo Guma:

Os presento, por fin, el segundo capítulo de la guía que Quiero Ser Como Will (Wright) que te ayudará a convertirte en un desarrollador de videojuegos eficaz y con sentido común.

En este segundo capítulo, además de descubrir como evoluciona la relación entre los dos protagonistas, comenzarás el desarrollo de un juego de scroll vertical.

La verdad es que he tardado más de lo que me hubiera gustado en publicar este segundo capítulo por diferentes motivos (¡y ninguno de ellos fue la falta de ganas!), pero más vale tarde que nunca. También soy consciente de que el primer capítulo gustó mucho, y me conformaría simplemente con mantener el nivel.
Espero vuestro feedback y vuestros comentarios (eso es lo que me anima a escribir) y espero que os guste.

Descargar:

Querio Ser Como Will Wright – Capítulo 2

Capítulos publicados hasta el momento

34 comentarios

Sábado, 8 de Septiembre del 2007

Guía para aprender a crear videojuegos (Lee esto si quieres ser como Will Wright)

Bueno, no es que garantice que vayas a ser como Will Wright si lees esta guía que acabo de publicar en Colectivo Guma, pero lo que sí te puedo asegurar es que al final de este primer capítulo habrás terminado tu primer juego: Un sencillo PONG para dos jugadores en el mismo teclado. ¿Perfecto para vacilar con tus amigos, verdad?

Como podréis comprobar si lo leéis, está escrito en un formato totalmente diferente a lo habitual y, según lo que me viene diciendo la gente, es mucho más divertido de seguir que las guías tradicionales. Puede que hasta resulte divertido para algunos consumados desarrolladores.

Si alguna vez se os ha pasado por la cabeza lo de crear un juego o simplemente tenéis curiosidad, os lo recomiendo encarecidamente.

Quiero Ser Como Will Wright, Capítulo 1: La Primera Vez Mola

Capítulos publicados hasta el momento

1 comentarios

Lunes, 23 de Julio del 2007

Ochenta efectos de texto en photoshop (supercool!)

No acostumbro a poner enlaces a este tipo de recopilaciones que suelen encontrarse en internet, pero esta es realmente muy útil y muchos aficionados al photoshop me lo agradecerán. A continuación, una recopilación de ochenta efectos de texto en photoshop. No abuséis, y sed originales (xD)

The Best 80 Photoshop Text Effects on the Web >>

Texto Molón

The Best 80 Photoshop Text Effects on the Web >>

« Entradas Anteriores