En el anterior tutorial aprendimos como crear una página web y definimos HTML, CSS, W3C y AcidTest.

También aprendimos la sintaxis del HTML y su estructura básica. Finalmente aprendimos dónde escribir ésta estructura y la guardamos para poder copiarla e ir más rápida. Para seguir los tutoriales de aquí, recomiendo tenerlos todos en una carpeta que sepamos dónde está para organizarnos mejor.

Vale. Ahora copiaremos el archivo con la estructura básica y lo pegaremos en la carpeta con el nombre de parte2.html . También le podemos cambiar el título por Parte 2 (lo que hay entre <title> y </title>).

Lo ideal sería ir siguiendo todos los códigos que voy mencionando aquí e ir poniéndolos en el archivo que hemos creado para probar por nosotros mismos ya que, aunque aquí ya mostraré como queda, lo mejor es ir copiando a mano los elementos para ir aprendiendo al ritmo que lees.

Empecemos:

Títulos

En HTML tenemos hasta 6 títulos diferentes según la importancia.

Son éstos:

<h1>Título1</h1>
<h2>Subtítulo</h2>
<h3>Subsubtítulo</h3>
<h4>Subsubsubtítulo</h4>
<h5>Subsubsubsubtítulo</h5>
<h6>Subsubsubsubsubtítulo</h6>

Cada título es más importante que sus inferiores. El H1 suele usarse para el título de toda la página (y del sitio web en general). Por ejemplo, en Barail el h1 sería Barail.

El código que hemos mostrado anteriormente queda más o menos así:

Párrafos

En HTML además de títulos tenemos, por supuesto, párrafos.

Los párrafos se escriben así:

<p>Hola, soy un párrafo</p>

Para ver como quedan… sólo tenéis que fijaros en el texto normal de éste artículo. Son todo párrafos.

Ahora que ya conocemos los títulos y los párrafos me gustaría añadir una cosa: todo texto en HTML debe ir dentro de un elemento de título o párrafo (o código, que los aprenderemos quizá más adelante), no podemos dejar suelto un texto normal directamente en el body.

Líneas horizontales

En HTML podemos insertar líneas horizontales con una “tag vacía” de ésta manera:

<hr />

Y quedan más o menos de la siguiente manera:

En HTML podemos insertar un salto de línea sin tener que insertar dos párrafos distintos. Atención: Los saltos de línea no sirven para sustituir a los párrafos. Sólo se deben usar si son estrictamente necesarios:

Se escriben de la siguiente manera, en otra “tag vacía”:

<br />

El resultado que dan es bastante previsible. Aun así voy a mostrar un ejemplo:

Hola.
Hola. Yo estoy debajo porque me han puesto un salto de línea.

Formateando el texto

Hay muchas maneras de formatear un texto en HTML. Nótese que éstos elementos, ya que actúan sobre un texto, deben estar dentro de un párrafo (o título…):

<p><strong>Texto fuerte</strong></p>
<p><em>Texto con énfasis</em></p>
<p>H<sub>2</sub>O</p>
<p>3<sup>2</sup> = 9</p>
<p>He <del>borrado</del> un texto para <ins>insertar</ins> otro</p>
<p><abbr title="Loud of laughs">LOL</abbr></p>
<p><q>Soy una cita</q></p>

Ésto muestra:

Texto fuerte

Texto con énfasis

H₂O

3² = 9

He borrado un texto para insertar otro.

LOL

Soy una cita

Más bloques de texto

Hasta ahora hemos visto los párrafos y los títulos como bloques de texto. Pero hay más:

<pre>Soy un código</pre>
<address>Soy una dirección</address>
<blockquote>Soy una cita en bloque de texto</blockquote>

Ésto quedaría así:

Soy un código

Al ser éstos bloques de texto, no deben estar en ningún párrafo ya que un párrafo es también un bloque de texto.

Enlaces

En HTML podemos diferenciar tres tipos de enlaces: los enlaces absolutos, los enlaces relativos al documento y los puntos de fijación. Todos los tres tipos de enlace se escriben con la misma etiqueta: <a>.

Los primeros, los enlaces absolutos, nos pueden enviar a cualquier documento de la red. Son aquellos que empiezan con http:// y contienen toda la dirección web en sí. Los relativos al documento son enlaces a otros documentos de nuestro mismo servidor, y se escriben usando de principio a nuestro documento. Por ejemplo, si queremos enlazar a un html llamado “acerca-de.html” escribiremos el enlace a “acerca-de.html”. Si está en la carpeta “informacion”, podemos escribir “informacion/acerca-de.html”. Si está en una carpeta al exterior de la carpeta que contiene nuestro documento (por ejemplo, si nuestro documento es acerca-de.html y queremos enlazar al documento anterior), escribiremos “../documento.html”. Estos ../ podemos escribirlos tantas veces como queramos para situarnos a carpetas más lejanas a la nuestra, de la misma manera que podemos acceder a carpetas que están dentro de carpetas dentro de carpetas que están dentro de carpetas (…) dentro de la carpeta dónde está nuestro documento.

Finalmente tenemos los enlaces al mismo documento. Éstos enlaces funcionan de una manera curiosa. Primero tenemos que crear una referencia en nuestro documento, por ejemplo “conclusión” dentro de una página muy larga en el lugar dónde está nuestra conclusión. Después podríamos escribir un enlace a “#conclusión” y cuándo se pulsase, se bajaría la scrollbar de la página hasta llegar a la conclusión.

Para los primeros dos, los absolutos y los relativos los escribiremos en el atributo href. Por ejemplo: href=”http://www.google.es/” llevaría en una ruta absoluta a Google. De la misma manera, podemos enlazar a una ruta relativa sin el http, como hemos aprendido antres.

Para hacer los últimos podemos hacer lo siguiente. La referencia se crea rodeando a la sección a la que nos referiremos con a y un atributo name para darle nombre a la sección. Después, para acceder allí hacemos un a href normal con “#nombre-sección”

Imágenes

Las imágenes se insertan con la etiqueta vacía <img />. Para decirle dónde se encuentra la imagen que queremos insertar podemos utilizar dos de los tipos de rutas que utilizamos con los enlaces: rutas absolutas o relativas al documento y las insertaremos en el atributo src. También debemos insertar una descripción de la imagen con el atributo alt que se mostrará si la imagen no puede cargarse o el navegador las tiene deshabilitadas.

Hasta aquí hemos aprendidos suficientes elementos de HTML para hoy.

Mañana aprenderemos a insertar tablas, listas y formularios. También aprenderemos acerca de las “entities” y elementos que podemos añadir al “head”, como por ejemplo las “META”. ¡Hasta la parte 3!

Visita la parte 1 de éste tutorial

Por fin, al final del último tutorial, terminamos nuestro sistema base de plataformas… así que, ¿qué nos toca hacer hoy?

Pues hoy nos toca algo más difícil aparentemente, aunque sólo hay que perderle el miedo en el caso de que nunca hayas usado código. Vamos a aprender GML, ya sabéis, Game Maker Language.

Este lenguaje nos va a servir para programar en Game Maker con más posibilidades y más rapidez, y también para aprender a programar con código si nunca lo hemos hecho.

Lo que vamos a hacer con GML es exactamente lo mismo que en los anteriores tutoriales… pero esta vez lo haremos de otra manera, usando GML.

Explicaré cómo ejecutar un código GML dentro de un evento. Es como ejecutar cualquier otra acción, con un bloque, pero usaremos un bloque específico, que se encuentra en la pestaña control y se llama Execute Code.

Cuando lo pongamos, nos saldrá una pantallita como esta:

Bueno, aquí es donde escribiremos nuestro código, y le daremos al icono del tick verde para guardarlo. Una vez sabemos hacer esto, podemos empezar a sustituir Drag & Drop por GML.

Abrimos el objeto del personaje, vamos a cambiarlo evento por evento. El primero que tenemos es Create, que es donde especificamos algunas variables.

Teníamos lo siguiente: Set variable salto to 0; Set the gravity to 1 in direction 270.

En GML sería así:

salto = 0
gravity = 1
gravity_direction = 270

Usando doble barra ( // ) podemos poner comentarios, que no son interpretados en el código, así que sirven para anotaciones, explicaciones, etcétera.

salto = 0 // Creamos una variable llamada salto con valor inicial 0
gravity = 1 // Gravedad. Esta variable ya viene con Game Maker, le estamos dando de valor 1
gravity_direction = 270 // Esta otra variable es la dirección de la gravedad y también viene con Game Maker

Por ahora es muy simple, aquí hemos asignado valores a algunas variables. “variable = valor“. Una vez hemos guardado el bloque Execute Code, hay que borrar los demás, para no ejecutar las acciones dos veces.

Ahora vamos con el evento de colisión con Muro, uno más difícil, en el que vamos a ver condiciones y funciones.

Sería algo así:

if !place_free(x,y+vspeed){ // La llave ( { ) equivale a Start of a Block
if vspeed > 0{ // > significa mayor que.
salto = 0
move_contact_solid(270,vspeed)} // Cerrar llave ( } ) equivale a End of a Block
else{ //Esto es igual que el bloque Else
move_contact_solid(90,-vspeed)}
vspeed = 0}

Recordad que el texto después de “//” no se ejecuta, son comentarios.

Lo que vemos aquí son las condiciones, que se indican con la sentencia “if“. Tras ella se suele poner una variable y un valor, pero también vemos “!place_free(x,y+vspeed)”. Es la función place_free, negada (El símbolo de exclamación “!” sirve para negar. Por ejemplo, “variable != 0″ significa que la variable no es 0).

Luego hay un paréntesis que contiene los argumentos. Los argumentos son datos que se proporcionan a la función para especificar lo que tiene que hacer. Son distintos para cada función y se separan con coma. Por ejemplo, en place_free, los argumentos son x,y. En este caso el primer argumento está asignado a x, por lo cuál la x será la misma que la del objeto. El segundo argumento, y, está asignado a y+vspeed, por lo que la y será la y del objeto más su velocidad vertical.

Otra función es move_contact_solid, cuyo primer argumento es la dirección. En el segundo, se indica la distancia máxima (nosotros pondremos vspeed).

Lo demás es lo mismo, aplicar lo que hemos aprendido. Lo que puede dar dificultad es conocer las funciones que hay que usar, pero son fáciles de adivinar.

Por ejemplo, queremos saber la función para ir a la siguiente room. Entonces, en el editor de código escribimos “room“. Dejamos el cursor quieto un rato, y nos aparecerá un pop-up con las funciones, variables o constantes que empiecen por room. Ahí, si sabemos algo de inglés, podremos encontrar la apropiada… room_goto_next. A propósito, esta función no tiene argumentos, las funciones sin argumentos no se dejan tal cuál, sino que se pone al final un paréntesis vación, “()”.

Sería:

room_goto_next()

Podría explicar más cosas, pero sería redundante, ya hemos visto variables, condiciones y funciones… con esto basta para pasar todas las acciones de nuestro juego a GML. ¡Ya sabéis qué toca! Ago

Pero por si acaso… aquí está el ejemplo terminado, con algún pequeño añadido. Debería funcionar perfectamente, así que si tenéis algún problema os ruego que me lo comuniquéis. Descárgalo aquí.

Y el próximo día podría ser un buen momento para poner en nuestro juego…

¡Bueno, lo dejaré como una sorpresa!

¡Saludos!

¿Alguna vez has deseado crear tu propia página web? ¿Quizá para enseñarla a tus amigos, o puede que algo más serio? Dan igual las razones. ¡En este artículo te enseñaré a crear tu propia página web!… ¡¡y de manera muy simple!!

Primero, un poco de conceptos.

¿Cómo la vamos a crear?

Primero de todo necesitamos saber cómo crearemos nuestra página web. Bien, usaremos HTML para el contenido y la estructura y CSS para la presentación. Más específicamente, las versiones 4 y 2 de éstos lenguajes respectivamente.

¿HTML?

HTML (HyperText Markup Language o Lenguaje de marcado de hipertexto) es el lenguaje de marcado (lenguaje de marcado es una forma de codificar el texto que, junto con el texto en sí, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación) predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

¿CSS?

CSS (Cascading Style Sheets o hojas de estilo en cascada) es un lenguaje usado para definir la presentación de un documento estructurado en HTML (y otros).

La razón principal de la existencia del CSS es separar la estructura de un texto de su presentación.

Creo que ya están definidos los términos más básicos a los que nos referiremos en éste tutorial. Sin embargo, creo que definir a los estándares y al W3C es también primordial.

El W3C y sus estándares

El W3C (World Wide Web Consortium – consorcio para la web) es un consorcio internacional que produce recomendaciones para la WWW (World Wide Web) o simplemente web. Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol – Protocolo de transferencia de hipertexto) y HTML que son las principales tecnologías sobre las que se basa la Web.

El W3C tiene unos estándares (o recomendaciones) que son una serie de reglas para HTML, CSS, etc. y que sirven para que todas las web estén escritas con los mismos elementos y para que todos los navegadores visualizen una web de la misma manera (Internet Explorer de Windows es famoso por no cumplirlos. Los otros navegadores los cumplen todos o casi todos).

AcidTest

Por último, como extra acerca de los estándares, os mencionaré el AcidTest. El AcidTest es un test que prueba la capacidad que tiene un navegador para cumplir los estándares. Existen tres de ellos: el 1, el 2 y el 3. Todos los navegadores intentan ser los que pasen los tests con una puntuación del 100%. Actualmente, en el último test solo alcanzan un 100% los navegadores basados en WebKit, como Safari o Google Chrome.

¡Desafía a tu navegador!

Finalmente, creo que ya conocemos todos los conceptos necesarios para crear una web en HTML. Ahora voy a explicaros cómo organizaré el tutorial: Primero explicaré HTML y después le añadiremos CSS.

Bien, empecemos!

Objetos de HTML

HTML está compuesto por objetos (de hecho, no sé como llamarlos) muy básicos. Los elementos y los atributos.

Los elementos se definen con etiquetas. Por ejemplo: <strong>Hola</strong>. Hola sería un elemento de negrita. Los elementos siempre empiezan con una etiqueta de principio y una de fin. La etiqueta de principio es <nombredelaetiqueta> y la de fin </nombredelaetiqueta>. El contenido del elemento será lo que está entre éstas dos etiquetas.

Algunos elementos no tienen contenido, como por ejemplo las imagenes, ya que es ilogico que haya algún contenido. En éste caso se escriben así: <nombredelaetiqueta /> (con el espacio antes de la barra de fin).

También tenemos los atributos. Los atributos establecen propiedades en los elementos. Por ejemplo: <a href=”http://www.barail.es”>Barail</a>. A significa enlace. Con esta etiqueta, estamos diciendo que Barail es un enlace. Además, tiene un atributo que es href. El atributo href significa dónde dirige el enlace. Aquí vemos como se escribe un atributo:

<nombredelaetiqueta atributo=”valor”>Contenido</nombredelaetiqueta>.

Como podemos comprobar, los atributos se definen sólo a la etiqueta del principio.

Ya sabemos qué objetos tiene un archivo HTML.

Estructura básica de un documento HTML

Todo documento HTML tiene una estructura básica, una serie de elementos obligatorios que forman los cimientos dónde vamos a trabajar.

Ésta estructura, en HTML 4, es (en otras versiones cambia sólo la primera línea):

1
2
3
4
5
6
7
8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Título</title>
	</head>
	<body>
	</body>
</html>

Vamos a explicar los elementos que podemos ver aquí.

El primer elemento, el tal DOCTYPE es especial. Lo único que debemos saber de él junto con sus contenidos es que nos dice que el archivo está escrito en HTML4 estricto (estricto significa que los elementos definidos como deprecated [no-usados o algo así sería la traducción] no se pueden usar [a diferencia de Transitional]).

El elemento html, que es el que viene a continuación, significa que lo de dentro es html. Por supuesto es obligatorio.

Después viene el head. En el head se establecerá la información de la página que no se muestra en su contenido. El único elemento obligatorio del head es el título de la página. El título es el texto que se muestra en cada pestaña de tu navegador o en el título de la ventana.

Después del head se encuentra el body. Es dónde irá el contenido que se ve en una página.

¿Dónde y cómo escribiremos ésta estructura?

Ésta estructura debe ser escribida como archivo HTML (archivo con extensión .html). Para escribir archivos de éstos podemos hacerlo con cualquier editor de código fuente. Una vez hemos guardado el archivo, se puede abrir con un navegador para mostrarlo en forma de página web.

Para finalizar, guardaremos ésta estructura en un lugar accesible. La copiaremos siempre que querramos hacer una nueva página HTML: nos ahorrará tiempo.

Hasta aquí la primera parte del tutorial. En la siguiente empezaremos a revisar algunos elementos HTML. ¡Hasta la próxima!

Hace un tiempo escribí un artículo en este mismo blog, que hablaba sobre Javascript y su papel en el Internet de estos últimos años. En ese artículo definí los conceptos de web 2.0 y AJAX, aunque no los desarrollé en profundidad. Y me siento en la obligación de hacerlo ahora, ya que me parecen muy importantes. No comentaré en profundidad los conceptos relativos a Internet, ya los he desarrollado en el artículo sobre Javascript, y no quiero repetirme en exceso.

Hasta hace unos años, visitar una página web significaba leer sus contenidos y saltar a otras páginas mediante hipervínculos (links). Era la Web. Pero los internautas empezaron a cansarse de eso, las empresas de e-comercio veían descender sus beneficios, hacía falta un nuevo enfoque de la Web.

Ese enfoque se llamó Web 2.0. Una Web más orientada a los usuarios, una Web en la que, en muchas ocasiones, los usuarios tienen más importancia que el propio webmaster. Ejemplos de ello son los blogs, los foros… permiten al usuario hacer algo más que leer artículos y saltar de una página a otra, algo impensable hace unos años. Tal vez el ejemplo más ilustrativo sea la Wikipedia, frente a una enciclopedia tradicional. Youtube, del.icio.us, Digg… nacen sitios en los que los internautas son los protagonistas. Las redes sociales (Facebook, Tuenti) o los gestores de contenido (Wordpress, MyBB) son otros ejemplos en los que el usuario, sin necesidad de conocimientos de programación, puede hacerse un hueco en Internet y compartir su opinión con el mundo.

La Web 2.0 no es una nueva versión, si no un nuevo enfoque de la concepción de la Web. Se pretendió, además, mejorar la experiencia del usuario, utilizando tecnologías como Javascript, Flash, AJAX…

AJAX (Asynchronous JavaScript And XML, Javascript Asíncrono Y XML) es una fusión de tecnologías ya existentes, utilizadas en conjunto para mejorar la experiencia del usuario.

Empezaré por explicar cada una de sus tecnologías:

HTML en cualquiera de sus variantes, para mostrar la página web.

Javascript, para lograr una interactividad con el usuario sin necesidad de recargar la página. Por ejemplo, un menú desplegable, una tabla que cambia de color al pasar el ratón por encima, etc…

El objeto XMLHttpRequest. Este objeto de Javascript permite comunicarse con el servidor sin necesidad de regargar la página. Me explico: Normalmente, para enviar nuestros datos al servidor, por ejemplo, rellenamos un campo de texto, lo enviamos (normalmente pulsando un botón), un programa lo procesa en el servidor y nos devuelve una página HTML con el texto “Datos introducidos correctamente” (por ejemplo). Bueno, pues lo que hace AJAX es enviar el texto, recibir la respuesta del servidor y hacer lo que se quiera con ella (por ejemplo, mostrarla por pantalla), todo eso de forma totalmente transparente al usuario, sin recargar la página.

Ésta tecnología es la parte más importante, la que define AJAX. Es la primera “A” (Asíncrono). Como su propio nombre indica, la ejecución de la página no se detiene mientras se envía la información al servidor y se espera su respuesta. No aparece una ventana totalmente en blanco, el usuario puede seguir leyendo esa página o apretando botones, en lugar de esperar con los brazos cruzados a que el servidor responda su petición. Antes de esta tecnología, cada vez que el usuario hacía “algo” en una página web, que requiriese que unos datos se enviasen al servidor (o que necesitase pedir datos al servidor), la página se quedaba en blanco durante un tiempo (escasos segundos) hasta que el servidor respondía. Esto conducía a una pequeña frustración, ya que el usuario está acostumbrado a las aplicaciones de escritorio, en lo que todo es instantáneo o al menos, si no lo es, se disimula. Pero no hay forma de disimular una página en blanco durante 1 segundo.

XML: es un lenguaje a base de etiquetas que se usa fundamentalmente para estructurar la información. En este caso, el mensaje devuelto por el servidor suele estar estructurado en XML.

AJAX permite, por ejemplo, que se pueda abrir un mensaje de correo electrónico desde la bandeja de entrada de una forma muy cómoda. Sí, sigue siendo necesario esperar un poco (recordemos que nuestro correo electrónico atraviesa medio mundo), pero mientras se carga el mensaje, la página puede mostrar un pequeño mensaje de “Cargando…”, o preparar la zona donde se va a mostrar el mensaje. Con las velocidades que tiene hoy en día Internet, prácticamente cuando la página termine de acomodar su estructura para mostrar adecuadamente el mensaje, éste ya habrá llegado.

AJAX ofrece otra ventaja muy importante. En una página web tradicional, cuando se envía una petición al servidor, la página en la que nos encontrabamos se descarta totalmente. Así pues, el servidor, en su respuesta, tiene que enviarnos una página completamente nueva. Esto incluye, por ejemplo (estoy pensando en abrir un mensaje en GMail) la barra lateral, las imágenes, la estructura general de la página, etc. Esto acentúa más el tiempo de espera, ya que se tiene que enviar más información a través de un simple cable de cobre (lo sé, algunos de vosotros tenéis fibra óptica, bien por vosotros, pero no me lo recordéis -.-). Sin embargo, cuando queremos abrir un mensaje en GMail, lo único que necesitamos conocer es eso, el mensaje. El resto de elementos de la página YA ESTÁN AHÍ. Así que… ¿por qué no mantenerse en la misma página, modificar un poco su estructura, esperar a que el servidor nos envíe su respuesta (que consistirá únicamente en el mensaje, lo que nos interesa), y entonces se muestre en la página? Sería maravilloso, ¿verdad? Bienvenidos al futuro, a AJAX y la Web 2.0.

Bien, creo que ha quedado todo claro. Así pues, lo que consigue AJAX es comunicarse con el servidor de forma transparente al usuario, simulando una aplicación de escritorio, a las que estamos más acostumbrados. Y desde luego, consigue un efecto mucho mejor, más comodo que simplemente usar links y saltar de una página a otra. Si alguno de vosotros utilizáis Flikr o GMail, entre otros, sabréis a lo que me refiero. Ahora que ha quedado todo claro (si no, levantad la mano y preguntad ^^), unos pensamientos finales:

¿AJAX es una parte de la Web 2.0? ¿La Web 2.0 surgió a partir de AJAX? Sí y no, respectivamente. La Web 2.0 en realidad surgió antes que AJAX. Blogs, foros, etc… ya existían antes de que Javascript fuese utilizado masivamente (antes incluso de que AJAX existiese). Sin embargo, AJAX ha contribuido a que la Web 2.0 sea más “cool”, más agradable de utilizar. Y, dado que la Web 2.0 consiste en que los usuarios escriban, que creen contenido, que se sientan cómodos es bastante importante.

AJAX es una parte importante de la Web 2.0. No es, ni mucho menos, la única tecnología importante que permitió su aparición (también están los lenguajes de servidor, por ejemplo).

Tal vez todos los artículos que escribo sobre Internet os parezcan iguales, pero es que todo está relacionado. Internet es una misma realidad, lo único que intento es mirarlo desde distintos puntos de vista. El Cloud Computing es uno de ellos. A su vez, el Cloud Computing se ve potenciado por las aplicaciones web, que utilizan masivamente Javascript y AJAX. Y todo ello, en contraposición con las simples páginas HTML, forma una nueva concepción de la Web, que es lo que en conjunto es llamado “Web 2.0″.

Sí, ésta vez mi artículo sobre tecnología termina sin especular sobre el futuro. En este caso, el presente me parece tan asombroso que creo que tenemos para unos cuantos años. Aunque no será así, ya que la tecnología nunca descansa, y Internet aún menos.

En el último tutorial, nos quedamos un poco cortados, teníamos un objeto que caía, y lo podíamos mover. Como eso hay que terminarlo, aquí está la segunda parte del tutorial. En ésta vamos a crear un suelo, paredes, techo… hacer que el personaje salte… y también la meta, que nos lleva al siguiente nivel. Sí, haremos dos niveles, de distinto tamaño… ¡ya lo veréis!

[Continúa desde la primera parte del tutorial]

4.- El suelo, las paredes y el techo

Ahora toca crear otro sprite, de 16×16, que servirá para el objeto de los muros. No voy a deciros de nuevo cómo crear el sprite, es hora de que pongáis un poco en práctica lo que habéis aprendido hasta ahora. Al sprite lo llamé Spr_Muro. Ahora, como antes, creamos un objeto y le asignamos de sprite Spr_Muro. También marcaremos la casilla solid, será importante más adelante.

A lo mejor te parece que con tener un objeto sólido ya tenemos hecho el muro, pero nada más lejos de la realidad, porque estamos ante la parte más complicada de esta entrega del tutorial…

Abriremos el objeto del personaje y crearemos el evento Collision > objeto del muro. Este evento se ejecuta cuando la instancia del objeto entra en contacto con una instancia del objeto que seleccionemos (en este caso, el muro). Aquí haremos las colisiones con el techo y con el suelo (que serán el mismo objeto, pero en condiciones diferentes).

Colisión con el suelo:

Como el evento es grandecillo, os mostraré una imagen. Los bloques usados en este se encuentran todos en las pestañas move y control.

Explico los bloques de este evento, uno por uno:

• If a position is collision free (Si una posición está sin colisiones): Sirve para comprobar si una posición específica provocará o no una colisión. Ahora manejaremos coordenadas (x = ancho, y = alto) y una nueva variable llamada vspeed, o velocidad vertical. Primero colocaremos un bloque llamado Check Empty que se encuentra en la pestaña control. Este bloque es una condición (como todos los bloques octogonales), por lo que puede cumplirse o no. Y lo que condiciona es que no haya una colisión con objetos en cierto punto de la room. Aquí entran las coordenadas. De X, pondremos 0, y de Y, la variable vspeed (escribimos vspeed en el cuadro de texto). Importante marcar las casillas Relative y NOT. Como marcamos la casilla NOT, se ejecutará si el lugar especificado (0,vspeed) tiene colisión. Es decir, si llegamos al suelo.
• Start of a block (Comienzo de un bloque): Es una casilla especial que sirve para la ejecución de condiciones. Las acciones que se ejecutan si la condición se cumple van después de esto.
• If vspeed is larger than 0 (Si vspeed es mayor que 0): Esto comprueba que estemos cayendo, es decir, que vayamos hacia el suelo. vspeed y 0 se ponen en los campos variable y value, respectivamente.
• Start of a block (Comienzo de un bloque): Como hay una condición dentro de la anterior condición, abrimos otra vez con esta casilla. El programa nos indenta los bloques automáticamente, así que es difícil perderse.
• Move to contact in direction 270 (mover y contactar en dirección 270): Este sirve para que nuestro personaje caiga al suelo correctamente y no se quede atascado. Como sabéis ya, 270º equivale a una dirección hacia abajo.
• End of a block (fin de un bloque): Cerramos la condición de que la vspeed sea mayor que 0.
• Set the vertical speed (Establecer velocidad vertical): Todo muy bonito hasta ahora, pero necesitamos parar al caer al suelo. Para ello ponemos este bloque tan majo, y establecemos la vspeed en 0, con lo cuál el personaje se detendrá.
• End of a block (fin de un bloque): Como había dos condiciones, cerramos dos veces. Esta vez es la primera condición que pusimos.

Por ahora, el evento se queda así. Si os fijáis, lo que hace es detener al personaje si está cayendo al suelo. Y pensaréis… ¿para qué tanta condición? Pues porque hay que distinguir que es el caso del suelo, porque usaremos el mismo objeto para suelo, paredes y techo.

Hecho esto, podemos probarlo si queremos, antes habrá que añadir unas cuántas instancias del muro a la room.

Y si todo está bien, ya podemos pasar al salto. ¡Porque os habréis dado cuenta de que aún no está hecho el salto! Este apartado lo incluyo en suelo, porque en el suelo hay una parte importante del salto.

Salto

Primero planteemos el problema. Queremos que el personaje pueda saltar al pulsar un botón. Pero no puede saltar todo el rato, sólo cuando ha caído al suelo. Para esto usaremos a nuestras amigas, las variables. Bueno, una sola. Y con sólo dos valores distintos, 0 y 1 (o false y true). Estas variables de 0/1, false/true se llaman variables Booleanas.

Para declarar una variable, lo primero es usar, en el evento Create, el bloque Set Variable, ponerle un nombre en variable y un valor inicial en value. Y nosotros la llamaremos salto, y su valor inicial será 1. Es decir, que al principio contará como que el personaje está saltando. Pero esto no es para siempre, ¿y cuándo deja de saltar? Pues al tocar el suelo. De modo que vamos al evento del suelo y añadimos otro Set Variable, esta vez poniendo la variable salto en 0. Atención, no irá al final del evento, sino justo después del segundo Start of a Block.

Pero estas variables por sí solas no hacen nada. Crearemos un evento nuevo, Keyboard > Up, siempre sin salir de nuestro objeto del personaje. El contenido de dentro será simple:

• If salto is equal to 0 (si salto es igual a 0): Obviamente, es otra condición. Comprueba que la variable salto sea 0.
• Start of a block: Ya sabéis, después de una condición…
• Set the vertical speed: Ahora pondremos una vspeed negativa, para ir hacia arriba. -10 es buena idea.
• Set variable salto to 1: Como estamos saltando, la variable salto está activada (salto=1)
• End of a block: Abrimos un block, ahora hay que cerrarlo.

Esta vez he explicado menos, porque confío en que hayáis aprendido un poco del anterior evento ^^ Lo que hace este evento es comprobar si estamos saltando, y si no estamos saltando, saltamos. Cuando volvamos a caer al suelo podremos volver a saltar.

¿Lo probamos? ¡Síii! Y de paso aprovechamos para guardar. Hemos de hacerlo a menudo… Si no, nos podemos llevar un disgusto con un corte de luz o un bloqueo del PC, y mejor no arriesgarse.

Si vemos que funciona, podemos pasar a hacer las paredes, y finalmente el techo. Luego terminaremos, con cosas relacionadas con rooms.

Paredes

Las paredes no las programaremos en el evento de colisión con Muro, sino en los propios eventos Keyboard Left y Keyboard Right, ya que, en principio, no podemos topar con una pared si no estamos pulsando una de estas dos teclas…

Los dos eventos tienen los mismos bloques, pero variarán algunos valores. Trabajaremos sobre el evento que teníamos, que servía para movernos… Agregaremos una condición y un bloque nuevo, explicaré para qué sirve.

• If there’s a collision at a position (Si hay colisión en una posición): Pestaña control. Otro elemento como el que usamos antes, pero hace justo lo contrario. De todas maneras, marcaremos la casilla NOT (y Relative, también), como antes. Lo que comprobará es que no haya colisión en una posición… y esa posición es diferente en los eventos Right y Left. En el evento Right, X = 4, Y = 0. En el evento Left, X = -4, Y=0. Y esto es porque las X negativas son hacia la izquierda, y las positivas hacia la derecha.
• Start of a block
• Set the horizontal speed: Esto es lo que teníamos antes. No lo explicaré de nuevo, lo dejamos como está.
• Change sprite into…: También estaba antes, y lo dejamos tal como está.
• End of a Block
• Else (si no): Este es el elemento nuevo del que hablé antes, está en la pestaña control. Funciona como una condición, pero de manera diferente. Hay que ponerlo en algún sitio después de otra condición, y define las acciones que se ejecutarán si esa condición no se cumple. Por tanto… ahora será lo que se ejecute cuando no haya espacio libre.
• Start of a Block: Sí, funciona como una condición, hay que poner el Start of a Block, y también cerrarlo.
• Set the horizontal speed: ¿Y qué vamos a hacer cuando no haya espacio? Pararnos, por supuesto, así que pondremos que la hspeed sea igual a 0.
• End of a Block

Y ya están terminadas las paredes. Lo que cambia de un evento a otro (Left~Right) es sólo el valor de la X en la condición inicial. Si queremos, ya podemos poner algunas paredes en nuestro nivel, guardar, y probar.

En el caso de que todo funcione correctamente, sigue leyendo. Ahora vamos a hacer el techo y dar por finalizada la programación del objeto del personaje.

Techo

Para esto, aplicaremos lo que hemos aprendido, en el mismo evento que programamos el suelo. Es decir, en Collision > Muro. Lo que añadiremos será un bloque Else, debajo del primer End of a Block, y bajo él lo siguiente:

• Start of a Block: Como siempre con las condiciones.
• Move to contact in direction 90: Nos moveremos esta vez hacia arriba hasta tocar el techo.
• End of a Block

Y tenemos el techo terminado. Y con esto la dura tarea de programar nuestro personaje… O quizás no. Guarda el juego y pruébalo. Para ello puedes encerrar al personaje dentro de bloques muro, con algo de espacio pero que se puedan probar las colisiones por los cuatro lados. Si todo está en orden… sigamos.

5.- Creando la meta

Ahora tenemos un personaje controlable del todo, que anda, salta, choca con paredes y techo… Pero no vamos a hacer un juego de un sólo nivel, ¿no? Para cambiar de nivel, vamos a crear un objeto que actúe como meta.

Nuestro objeto se activará al colisionar el personaje con él, y nos llevará a la siguiente room, a no ser que estemos en la última… en tal caso, nos mostraría un mensaje de felicitación y cerraría el juego. Esto lo haremos con una condición y un Else.

Como siempre, creamos un objeto. También sería práctico hacer un nuevo sprite para la meta, para que se distinga. Lo mejor es hacerlo de 16×16 para que encaje en nuestra rejilla. Luego, se lo asignamos al objeto Meta.

En el objeto Meta no habrá eventos… los pondremos en el objeto del personaje. Bueno, dije que quizás no estaba terminado. Abrimos pues el objeto Personaje, y creamos un evento de colisión con Meta.

Dentro de él, lo dicho:

• If next room exists (Si existe una siguiente room): Es una condición simple que se encuentra en la pestaña main1. Comprueba que exista la siguiente room.
• Start of a Block
• Go to next room (Ir a siguiente room): Nos lleva a la siguiente room, simplemente. Podemos elegir un efecto de transición, hay muchos.
• End of a Block
• Else: Ahora ponemos lo que pasará si no existe la siguiente room.
• Start of a Block
• Display a Message (Mostrar un mensaje): Pestaña main2. Muestra una ventanita con un texto. Podemos poner algo del estilo de “Felicidades, has completado el juego”.
• End the game (Finalizar el juego): Es eso, un elemento que cierra el juego. Está en main2.
• End of a Block

Con esto terminamos la programación de la meta, y ahora sí, el objeto del personaje. En esta entrega ya no tocaremos más los objetos, vamos con las rooms.

Lo primero, pondremos una instancia de la meta, o más de una, en el primer nivel. Alcanzable, para poder pasar el nivel, si no no tiene mucho sentido. Ahora podemos probarla si queremos, como no hay otra room, nos mostrará el mensaje. Pero vamos a crear otra room, a la que he llamado Segundo Nivel.

6.- Las views

Ahora que ya sabemos modificar rooms, lo haremos con más soltura. Vamos a dejar la room con el tamaño por defecto, 640×480. La rejilla, de 16×16, y la speed de 40 (así la puse yo). Bueno… pongamos los muros, el personaje, y las metas. Ahora pulsaremos en esa pestaña que pone views. Sirve para establecer las “cámaras” que funcionarán en esa room. Nosotros usamos una ventana de 320×240, así que tenemos que usar una view que siga al personaje.

En esta screen verás cómo configurarla para tal misión.

Marcamos las casillas de Enable views y Visible when room starts. Ahora pasamos a esos cuadros con campos de texto, View in room, Port on Screen y Object Following.

• View in room: Establece qué parte de la pantalla muestra la cámara. X e Y los dejamos con 0, pero en W ponemos 320, y en H, 240.
• Port on Screen: Establece el tamaño de la ventana de juego. Ponemos los mismos valores que antes en View in Room, porque será a tamaño real.
• Object Following: Esto es lo que más nos interesa, sirve para configurar el seguimiento a un objeto. Seleccionaremos el objeto del personaje. Hbor y Vbor son los bordes que se mantendrán alrededor del objeto, yo puse 160 y 96, respectivamente.

Ahora sí, podemos decir que el motor de nuestro juego está terminado. Podemos probarlo. ¡Recuerda guardarlo! Si quieres, puedes compartirlo con los demás lectores en los comentarios de la entrada.

“Tengo problemas con el tutorial. ¿Qué puedo hacer?”

Revisa que tengas todo tal como dice el tutorial. Si no consigues arreglarlo, puedes preguntar en los comentarios, podría ser que el tutorial esté mal. Otra opción, tal vez más eficaz, sea descargar el ejemplo que he hecho y comparar, para ver dónde está el error.

“¿Está terminado el tutorial?”

El motor básico sí… pero pocos juegos de plataformas tienen sólo estas funciones… así que habrá más tutoriales en los que haremos otras cosas. Una de ellas será aprender a programar con GML, que terminará siendo más rápido, más potente e incluso más fácil.

Bueno, espero que os haya gustado este tutorial. Cualquier duda, aquí en los comentarios

“Hay algo que no entiendo…”

Lo mejor es descargar el ejemplo y ver todo por ti mismo, porque yo no puedo subir demasiadas imágenes… y puede que algo se te trabe.

¡Saludos!

• Rolpege: http://sticknote.no-ip.org (va algo lento, paciencia, está en el ordenador de su casa).
• Daniel: No he podido terminar a tiempo.

El código de la aplicación de Rolpege será liberado próximamente (tenemos que acordar detalles como la licencia).

Estas son nuestras valoraciones sobre el desafío:

Rolpege:

StickNote… aún recuerdo cómo empezó. Hace un mes. Daniel y yo, nos propusimos el desafío por MSN, y desde entonces no he podido parar de programar. La primera semana me la reservé para mí. Sí, Ruby ya me lo conocía un poco gracias a RGSS/2, pero no había tenido mi primer contacto con Ruby on Rails.

Empezé a aprender gracias al libro de “Agile Web Development with Ruby on Rails”. Después realicé una mini-aplicación web para probar lo que había aprendido: esto fue el fin de semana de la primera semana. Acabé satisfactoriamente una web de chistes en un día.

Las siguientes tres semanas las he pasado gracias a Ryan Bates y sus maravillosos Railscasts. La primera hice el sistema base: la gestión de usuarios. Las otras dos me las pasé haciendo el sistema de amigos, el de notas, el de comentarios… mientras mis queridos betatesters iban probando y comentando todo lo que hice.

Vale, ahora las impresiones en sí. Éste mes ha sido uno de los mejores meses de mi vida. Es genial ver cuándo empiezas una cosa desde el principio y luchas y luchas hasta poder tenerlo terminado. O almenos presentable. Es genial ver cómo vas evolucionando poco a poco a nivel de aprendizaje, en éste caso de Ruby on Rails… Ha sido una experiencia enormemente fructífera, y estoy muy feliz de haber aceptado el desafío.

Daniel:

No puedo más que quedarme impresionado ante lo que ha hecho Rolpege. Me he quedado con cara de tonto. Tenía 4 semanas, y no he sabido aprovecharlas bien. Tenía pensado aprender todo lo necesario durante la primera semana, sin embargo, aprender a utilizar Closure (y eso que creo que aún no lo domino) me llevó casi 3 semanas. Así pues, no me quedó apenas tiempo para realizar la interfaz, más aún teniendo en cuenta que era Semana Santa y no podría dedicar todo mi tiempo libre a programar.

En resumen: sabor agridulce en esta competición, me habría gustado estar al nivel de Rolpege, me gustaría haber terminado algo, al menos la votación sería más interesante. Sin embargo, bueno, se trataba de estar entretenido, y eso lo he conseguido. La única conclusión que puedo sacar es que para la próxima vez utilizaré un lenguaje de programación (o librería) que YA conozca. Y que trataré de organizar mejor mi tiempo.

Esto no termina aquí, ni mucho menos. Yo (Daniel) voy a terminar mi versión de StickNote, y después liberaré el código (si alguien prefiere que libere el código ahora mismo, que lo diga, aunque está sin documentar). Además, tal y como se especificaba en las bases del “concurso”, Rolpege y yo continuaremos desarrollando la versión ganadora (la suya).

En éste artículo veremos por encima qué es Ruby on Rails (y por supuesto, qué es Ruby) y las facilidades que ofrece entorno a PHP.

¿Qué es Ruby?

Ruby es un lenguaje de programación orientado a objetos e interpretado creado por el japonés Yukihiro Matsumoto. Está bajo las licencias libres y de código abierto GPL y Licencia Pública Ruby.

Ruby tiene una sintaxis muy simple, ideal para los que se adentran a los lenguajes de programación y tampoco es mala para los ya experimentados.

¿Qué es Ruby on Rails?

Una de las mejores razones para usar Ruby es Ruby on Rails. Ruby on Rails, conocido también como Rails a secas o RoR es un framework (conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular) de aplicaciones web y de código abierto.

Ruby on Rails es bastante sencillo de utilizar, en gran parte gracias a que Ruby es bastante sencillo de utilizar también. Pero también lo es gracias a su arquitectura MVC: Modelo Vista Controlador.

Está pensado para emfatizar Convention over Configuration (CoC) y Don’t Repeat Yourself (DRY).

Lo primero quiere decir que el programador solo necesitará establecer configuraciones para aspectos extraordinarios de su aplicación. Por ejemplo, si creamos un modelo “Usuario”, la correspondiente tabla en la base de datos se llamará “usuarios” y el programador no tendrá que especificarlo.

Don’t Repeat Yourself significa que una pieza de código dentro de una aplicación nunca debería repetirse, facilitando así la modificación posterior del código. Por ejemplo, si queremos que varias clases dentro de nuestra aplicación redireccionen a alguna página determinada y muestran un mensaje, podríamos crear una función accesible para todas las clases que la quieren usar que se encarga de esto, aceptando como parámetros el mensaje a dar y el lugar dónde redireccionar. Incluso, si varias páginas redireccionan al índice, podríamos crear otra función que llama a la función de redireccionar y mostrar mensaje con los parámetros de lugar a redireccionar establecidos como índice y aceptando únicamente el mensaje a dar.

¿Qué es la arquitectura MVC?

Lo siento si antes os habéis quedado con las ganas de saber qué era la arquitectura MVC, pero creo que se merece otra sección a parte.

La arquitectura Modelo Vista Controlador es un estilo de arquitectura de software que separa los datos, la interfaz y la lógica que los controla en tres componentes distintos: el modelo, la vista y el controlador.

• Modelo: Es el encargado de proveer de datos al controlador. En Ruby on Rails, además, es el que tiene acceso a datos en la base de datos, usando el paradigma “ActiveRecord”
• Controlador: Responde a eventos, usualmente ocasionados por el usuario, y hace peticiones al modelo o a la vista según convenga.
• Vista: Presenta a un modelo, mediante el controlador, en un formato adecuado para interactuar. Normalmente es la interfaz del usuario.

Hasta aquí hemos aprendido qué es Ruby, Ruby on Rails, y la arquitectura MVC. Seguramente vuestras conclusiones serán que Ruby on Rails es utilizado para realizar aplicaciones web, de manera similar que con PHP. Así es. ¿Y si los comparamos un poco? No. PHP es un lenguaje, Ruby on Rails es un framework. Aún así, puedo deciros que PHP es más rápido y que Ruby on Rails es más productivo a la hora de programar, que los servers de PHP abundan mientras que uno de Ruby on Rails es bastante difícil de encontrar…

Espero que con ésta introducción a Ruby, Ruby on Rails y MVC os haya abierto el apetito a Rails, porque ahora estoy preparado para saciarlo.

Para empezar… Agile Web Development with Rails

Agile Web Development with Rails es una buena forma de empezar con Rails. La primera parte del libro te enseña a instalarlo a tu ordenador, y después te explican paso a paso como crear una aplicación de e-Commerce mediante Rails, mientras te van introduciendo al lenguaje.

La segunda parte del libro, te enseña ya TODO lo de Rails, y en los apéndices incluso un poco de Ruby si no sabes (aunque se recomienda saber Ruby para utilizar Ruby on Rails).

Para aprender Rails no es necesario del todo leerse la segunda parte, pero sí es beneficioso.

Una vez hemos empezado… ya podemos realizar nuestras aplicaciones tranquilamente, que ya lo sabemos todo. Pero quizá queramos un poco de ayudita. ¿Cómo creo un buscador? ¿Cómo cuelgo fotos mediante Rails? Aquí es donde entran los…

Railscasts

Los Railscasts son un conjunto de screencasts (videotutoriales) grabados todos por el magnífico Ryan Bates y que salen cada lunes por la mañana. Éstos screencasts te enseñan varias cosas muy útiles cómo crear un formulario de búsqueda, colgar fotos usando el plugin Paperclip, etc., etc., etc.

Además, puedes subscribirte a los Railscasts usando cualquier aplicación que soporte los podcasts, como por ejemplo iTunes.

Sé que hay muchos más recursos para Rails, pero éstos son los que más útiles me han sido a mí para realizar StickNote, y espero que os sean igual de útiles a vosotros! .

Saludos!

El otro día os enseñé el programa Game Maker y expliqué un poco su funcionamiento. También os prometí que os enseñaría a hacer un juego de plataformas con él…

Y así es, hoy vais a aprender a hacer, con Game Maker, un jueguito de una bola que se mueve y salta. Para ello os vendrán bien algunos conocimientos de inglés, ya que todo el programa está en inglés. Una vez hayáis descargado e instalado el programa, empezaremos con el tutorial:

1.- Creando un personaje

Primero, crearemos un sprite. Para ello pulsamos el botón con un Pac-Man/Comecocos rojo. Es el icono de los sprites en todo el programa. Al hacer clic, saldrá una ventana, estamos creando un sprite nuevo.

¿Qué formas tenemos de crear un sprite?

Pues bien, podemos hacer click en Load Sprite para cargar el sprite desde una imagen, o en Edit Sprite para hacer uno nuevo. Nosotros pulsaremos en Edit Sprite, y luego en el icono de una hoja con un símbolo de +. Así, crearemos un sprite. Como medidas, pondremos 16×16px.

Ahora podemos pinchar en la lupa para aumentar el zoom y dibujar mejor. Este será el sprite del personaje mirando a la derecha. No te preocupes si no se te da bien, con cualquier monigote basta, intenta que ocupe casi todo el espacio. Luego, guardamos el sprite y lo llamamos Spr_Pers_Der (así lo he llamado yo, pero en realidad da lo mismo).

A continuación, para crear el sprite del personaje mirando a la izquierda, haremos clic derecho en el que ya tenemos y pincharemos en Duplicate. Nos saldrá una réplica del sprite. Doble clic en él, luego vamos a Edit Sprite y pulsamos en Transform > Mirror/Flip (en el menú de arriba). Lo dejamos como está y le damos a Ok, se modificará el sprite y quedará mirando a la izquierda. Le pondremos de nombre Spr_Pers_Izq.

Bueno, ya tenemos todos los sprites del personaje, por ahora. ¿Qué falta? Crear su objeto. Para crear un objeto, pulsamos el icono de la bola azul. Saldrá en la parte izquierda con el nombre object0. Podemos cambiarlo, pero nos va a dar igual.

Para editar el objeto, hacemos doble clic en él. Ahora podemos seleccionar su sprite en el icono de lista desplegable, en la caja que pone Sprite. Seleccionamos un sprite del personaje, por ejemplo Spr_Pers_Der. ¡Bien! Ahora ya tenemos un objeto que pasará a ser nuestro personaje jugable. Y toca… darle vida. Esto lo haremos, hoy, por Drag & Drop, que es la vía fácil para los principiantes. En el próximo tutorial usaremos el GML, Game Maker Language.

2.- Movimiento básico del personaje

Vamos a empezar por darle gravedad al objeto. La gravedad es una aceleración del objeto, es decir, cada vez irá más rápido. Se puede elegir la dirección de la gravedad, nosotros la configuraremos hacia abajo.

Para ello, creamos el evento Create (Add Event > Create). Es el evento que se ejecuta cuando se crea el objeto, es decir, al inicio del nivel (en este caso). Sólo se ejecuta una vez, así que se usa para definir variables o establecer sentencias que se ejecuten desde que el objeto aparece. Dentro del evento, arrastramos el bloque de Set Gravity. Nos pedirá una dirección y una cantidad. La dirección se especifica en grados, 0 grados es derecha, 90 grados es arriba, 180 es izquierda y 270 es abajo. Sí, nosotros ponemos 270. Y de gravedad, por ejemplo, 1.

Con esto tenemos un objeto que cae. Muy jugable no es, precisamente, así que vamos a poner algo de interacción con el usuario, vamos a poner los movimientos a los lados.

Creamos un evento, como antes, pero esta vez en Keyboard > Right (¡Keyboard! No confundir con Keyboard Press. El evento Keyboard se ejecuta todo el rato mientras dure la pulsación de la tecla, el evento Keyboard Press sólo cuando empieza a ser pulsada). Aquí irán las acciones a ejecutar cuando se esté pulsando la tecla de dirección derecha. Por ahora, serán sólo dos bloques, aunque luego ampliaremos. Se trata del cambio de sprite y el movimiento en sí. El cambio de sprite es para que cuando nos movamos hacia la derecha, estemos mirando hacia la derecha, y el movimiento… es eso, el movimiento.

Cambio de Sprite: En la pestaña main1, arrastramos el bloque Change Sprite, que nos pedirá seleccionar un sprite (Spr_Pers_Der en este caso, ya que tiene que mirar a la derecha) y una velocidad, que dejamos como está, ya que sirve sólo en sprites animados (otro día hablaremos de ello).

Movimiento: Usaremos el bloque Speed Horizontal de la pestaña move, el cuál sirve para establecer la velocidad horizontal (hspeed) del objeto en cuestión, con un número. Las hspeed positivas mueven el objeto hacia la derecha, mientras que las negativas lo mueven hacia la izquierda. Por tanto, pondremos 4. Esto significa que en cada step, o frame, el objeto se moverá 4 píxeles a la derecha.

Vamos a realizar lo equivalente para la tecla izquierda. Esto será en el evento Keyboard > Left, y serán los mismos bloques, pero en el de Change Sprite seleccionaremos el sprite Spr_Pers_Izq, y la hspeed no será 4, sino -4 (4 píxeles a la izquierda en cada frame).

Finalmente, creamos dos eventos: Keyboard Release > Right y Keyboard Release > Left. En ambos irá un único bloque: Un Speed Horizontal que ponga la hspeed a 0. Es decir, que cuando soltemos la tecla, el personaje se parará.

El resultado de todo esto será un objeto que cae y que puede moverse a la izquierda y la derecha durante la caída…

Llegados a este punto, puede que queramos probarlo (o no, bueno… si no te atrae la idea del personaje que cae y se mueve, lo respetaré). Antes de darle al icono de Play/Run the game, hemos de crear una room.

3.- Creando nuestro primer nivel

Para crear una room, pulsamos el icono de la ventana (el que está a la derecha del icono de crear objeto). Como con los objetos y los sprites, saldrá en la parte izquierda de la pantalla, podremos cambiar su nombre (yo le puse Primer nivel, por motivos obvios) y modificarlo haciendo doble clic.

Saldrá una nueva ventana con un gran área que muestra el nivel a la derecha, y muchas pestañas a la izquierda. Algo que llama la atención es la rejilla (grid). Se puede cambiar su tamaño en los cuadritos de Snap X y Snap Y, lo dejaremos en 16 en ambos lados.

Ahora cambiaremos el tamaño del nivel, para ello vamos a la pestaña settings. En dicha pestaña podemos cambiar el nombre de la room, su caption (el mensaje que sale en la ventana del juego mientras estés en esa room), el tamaño y la velocidad. De tamaño puse 320×240 (Ojo, mejor pon múltiplos de la rejilla, en este caso de 16. Así encajará. 320 = 16×20; 240 = 16×15), y de velocidad 40 (Son las frames o steps que habrá en cada segundo. Afecta a la velocidad del juego, viene por defecto 30. Pon como máximo 60, depende de lo rápido que quieras el juego).

Ahora volvemos a la pestaña objects y colocamos en un lugar alto el único objeto que tenemos, el personaje. Podemos poner más de uno. Es lo que se llama instancia, que no es lo mismo que objeto.

Para que lo entendáis mejor, imaginad que estamos en una fábrica de juguetes de plástico. Tenemos un único molde con la forma del juguete que vamos a construir, pero con él podemos crear muchos juguetes. Entonces, el molde sería el objeto, y los juguetes creados serían las instancias. Un sólo objeto da forma a todas las instancias suyas que queramos.

Volviendo al tema… una vez hayamos colocado una instancia del personaje, cerramos la room. Ahora pulsaremos en el icono del disquete para guardar nuestro juego, y… ¡Ya le podemos dar a Run the Game y probarlo! Y si todo ha ido bien, lo que veremos será… lo que dije, un objeto que cae y que podemos mover durante su caída. Puede que te hayas fijado en un pequeño inconveniente: no hay suelo. Para ello deberemos crear otro objeto y otro sprite, y es con lo que empezará la siguiente entrega de este tutorial. ¡Muy pronto en Barail!

]]> http://www.barail.es/software/platforms-game-tutorial-game-maker-1/feed/lang/es/ 0 http://www.barail.es/tecnologia/ways-technology-improve-soccer http://www.barail.es/tecnologia/ways-technology-improve-soccer#comments Thu, 25 Mar 2010 22:00:36 +0000 Daniel Rey http://www.barail.es/?p=658 El fútbol es un deporte extraño. Aún siendo el entretenimiento más popular en Europa y Sudamérica, y con las cifras cada vez más desorbitadas que se invierten en pagar a personas que golpean muy bien un trozo de cuero, no ha sabido adaptarse al siglo XXI, ni siquiera al siglo XX.

En el fútbol, por si vivís en Marte y no lo sabéis, hay un árbitro, que, ayudado por dos jueces de linea, se encargan de hacer cumplir las reglas del juego. Esto sucede en todos los deportes, en todos hay reglas, en todos hay uno o más árbitros. Pero en el fútbol no cuentan con ningún tipo de ayuda. Ni siquiera se les permite ver la repetición grabada de una jugada para decidir sobre ella. Lo único que ha aportado la tecnología al arbitraje del fútbol, son los micrófonos y auriculares que llevan los árbitros y jueces de línea para comunicarse entre ellos. Nada más.

En otros deportes, la tecnología ha mejorado sensiblemente su desempeño y su arbitraje, por ejemplo:

• Tenis: Si bien es cierto que hay una persona atenta a cada linea del campo, para comprobar si la pelota bota dentro o fuera, a veces se equivocan. En ese caso, si la pista es de tierra, el tenista puede reclamar, ya que se puede ver fácilmente dónde ha botado la pelota. Pero, ¿y si la pista es de hierba, o de cemento? Pues se recurre al Falcon Eye (ojo de halcón), que no es más que una serie de videocámaras dispuestas encima de la pista (como si fuesen halcones sobrevolándola). Cuando un jugador reclama, las imágenes de esas cámaras se procesan conjuntamente, formando un modelo 3-D de la pista y la bola en el momento que esta última botó. Entonces, el juez de silla sólo tiene que decir en voz alta lo que ese modelo 3-D le ha mostrado: la bola ha entrado, o ha salido.
• Baloncesto: En este deporte, los movimientos son mucho más rápidos y la cancha es mucho más pequeña, así que los jugadores están mucho más juntos. Por eso puede haber hasta 3 árbitros en la pista. Por si eso fuese poco, en la mesa de anotación (al lado de la cancha) hay un árbitro especial, llamado comisario, al que los árbitros pueden recurrir para decidir sobre jugadas polémicas. El comisario puede utilizar un invento de muy alta tecnología, llamado “vídeo“, que permite volver mágicamente atrás en el tiempo, para ver la última jugada a cámara lenta y desde distintos ángulos.

Estas son las formas en las que la tecnología de este siglo puede ayudar al fútbol:

1.- Repetición en video

Ésta es sin duda la forma más básica, y de lejos la más eficaz. Utilizando varias cámaras (de forma similar a las que utilizan las televisiones), se podría conseguir las repeticiones de las jugadas dudosas, y el árbitro, o un comisario similar al del baloncesto, podría decidir. También se podría utilizar de forma similar al Falcon Eye, es decir, que sólo se utilice si los jugadores protestan una jugada. Aunque eso exigiría un cambio drástico de actitud por su parte. Me parece increible que esta medida aún no se haya puesto en práctica.

2.- Cámaras en las líneas

Así es, cámaras en las lineas de banda y de fondo. De forma similar a como se colocan los árbitros de un partido de tenis, las cámaras se podrían colocar en los corners, a una cierta altura. Estas cámaras, bien orientadas y mediante un programa informático sencillo, podrían detectar cuándo un balón sale fuera de banda o de fondo.

3.- Cámaras en las porterías

Análogo a lo anterior, dos cámaras en los ángulos de las porterías podría dejar atrás el problema de los goles fantasma.

4.- Más cámaras

Pues sí, esa es mi solución para todo: cámaras de video unidas a programas informáticos de procesamiento de imágenes. Una cámara en lo alto del estadio, con inclinación similar a las de las cámaras de televisión, podría detectar cuándo un jugador está en fuera de juego, y advertir al juez de línea. Se ha presentado recientemente un programa así para el iPhone. Es decir, que funciona en un teléfono móvil, con una cámara mediocre y una capacidad de procesamiento mediocre. Y, en caso de que la FIFA no se fíe de ordenadores, siempre puede haber árbitros analizando las imágenes de esas cámaras, en las jugadas dudosas. Las posibilidades son infinitas, y los precios que conllevarían serían más que razonables, teniendo en cuenta los millones que se despilfarran en el mundo del fútbol.

5.- Balón inteligente

Ya existen varios prototipos perfectamente funcionales. Se trata de balones con determinados sensores. Uno, por ejemplo, utiliza algo parecido al GPS (utilizando antenas puestas en las esquinas del campo, y triangulando sus señales, es capaz de determinar en todo momento su posición). Si se consigue que tenga la suficiente precisión, se puede utilizar para comprobar si un gol es válido o no, o si el balón ha salido del campo. En cualquier caso, aunque no tuviese tanta precisión, se podría utilizar para que las cámaras de video se orientasen hacia el balón automáticamente, sin necesidad de operarios. Otro tipo de balones inteligentes tendrán otro tipo de sensores, pero todos persiguen un mismo objetivo: permitir detectar en todo momento la posición y velocidad del balón.

6.- Sensores en las botas

De forma similar al balón inteligente, unos chips GPS situados en las botas (o en cualquier parte del jugador, en realidad) de todos los jugadores, podría ayudar, y mucho. En conjunción con un balón inteligente, un programa informático, sin necesidad de utilizar ni siquiera cámaras, podría saber en todo momento dónde está el balón y los 22 jugadores. De esta forma, si la precisión fuese muy buena, podría incluso sustituir completamente a un árbitro humano (salvo por las faltas). Podría saber si un delantero está en fuera de juego, podría saber en todo momento qué jugador tiene controlado el balón, etc. Podéis pensar que es un derroche, o una exageración, pero estos chips ya se usan, se utilizan en todos los partidos en los que se ofrecen estadísticas sobre la distancia recorrida por cada jugador. No voy a decir la marca de botas que tienen esos chips, pero os puedo decir que empieza por “N” y termina por “ike”.

Como veis, la tecnología existe, y desde luego, si algo sobra en el fútbol es dinero. Sin embargo, por alguna razón, lo unico que ha puesto en práctica la FIFA es darles a los árbitros unos micrófonos, para que puedan discutir si un balón ha sobrepasado una linea de cal que tienen a 30 metros de distancia, o si un jugador estaba un paso más adelantado que los demás en el preciso instante en que otro jugador dio el pase.

Mi opinión personal es que parte de la esencia del fútbol es crucificar a los árbitros, insultarlos para descargar la tensión acumulada de una dura semana de trabajo, o poder culpar a alguien si tu equipo, al que idolatras, ha perdido un partido. Me parece estúpido, pero es así. Otros deportes han sabido adaptarse, y por ejemplo, el baloncesto es el deporte más popular de la nación más poderosa del mundo, los EEUU. Allí no se critica a los árbitros, no se les culpa, y aún así, el deporte es popular.

Mientras la FIFA no abra los ojos, seguirá viendo como sus árbitros tendrán que salir escoltados de los partidos, y reciban amenazas de muerte, como si fuesen terroristas. Aunque bueno, los radicalismos en el fútbol, los ultras, los energúmenos que no se dan cuenta de que es un simple pasatiempo, los millones de personas que canalizan su ira y sus frustraciones sobre el mundo del fútbol, todo eso, es otro tema. Y no me corresponde a mí tratarlo. No podría ser imparcial.

Hoy en éste artículo haré un repaso a 3 editores de código fuente que personalmente me han gustado más. Pero antes…

¿Qué es un editor de código fuente?

Seguramente, si te has parado a leer este artículo es porque conoces más o menos bien el tema… pero nunca está de más explicar qué es lo que voy a recomendar. Un editor de código fuente, es un editor de texto (¡cuidado! No confundir editor de texto con procesador de textos. Un editor de texto no permite el formateo de textos, y por lo tanto al guardar sólo guarda el contenido y no la información de cómo éste debe mostrarse… característica indispensable para cualquier archivo con código de programación dentro. Un procesador de textos [Micrsofot Office Word o OpenOffice.org Writter lo son] en cambio, está especializado en formatear el texto de miles de maneras distintas y por lo tanto, guarda la información de formato junto al texto) diseñado específicamente para editar (o crear) el código fuente de un programa (siendo el código fuente de un programa un conjunto de instrucciones que debe realizar un ordenador al ejecutar el programa).

Los editores de código fuente pueden presentarse como aplicaciones individuales, o formando parte de un IDE (entorno de desarrollo integrado, en inglés Integrated Development Environment), tema que quizá extenderé en otra ocasión.

Éstos editores pueden especializarse en un solo lenguaje de programación o incluir un conjunto de ellos. Al estar especializados en la tarea de programar, los editores ofrecen características únicas que son muy útiles al usuario, siendo la más común y básica de ellas la syntax highlighting es decir, resaltador (o coloreado) de sintaxis, que se encarga de mostrar de distintos colores y tipografía los distintos elementos del código fuente de un programa, como pueden ser las variables, las constantes, las palabras reservadas, etc.

Una vez hemos definido qué es un editor de código fuente, voy a exponer los 3 que me gustan más. Debido a que algunas características pueden ser comunes en varios editores distintos, solo definiré cualquier característica la primera vez. Es decir, ya que ya he definido que es el resaltado de sintaxis no volveré a hacerlo. También me gustaría añadir que no están ordenados por orden de mejor a peor, preferencias, etc. si no en orden alfabético.

jEdit

Editando una hoja de estilos de StickNote

jEdit es un editor de código fuente escrito en Java. Es multiplataforma y tiene un sistema para incorporar montones de plugins en el programa.

El programa viene con un resaltador de sintaxis para más de 130 lenguajes de programación distintos y la posibilidad de añadir más con un simple archivo XML o incluso descargarlos. Nos ofrece una lista con múltiples plugins para instalarlos y ejecutarlos con un solo click, entre los cuales se encuentran, por exemplo, uno que convierte el código que estás viendo con jEdit (incluyendo los colores) a HTML, haciendo que puedas pegar tu código con los colores y todo en cualquier página web y permitir una mejor lectura de éste.

Voy a poneros el ejemplo de la hoja de estilos de StickNote aquí gracias al plugin (solo un pequeño fragmento):

 1 body
 2 {
 3   background: #13006a url('../images/body_bg.png') repeat-x fixed;
 4   font-family: Arial, Helvetica, sans-serif;
 5   font-size: 11pt;
 6   text-align: justify;
 7 }
 8 a img
 9 {
10   border: 0;
11 }
12 #container
13 {
14   background: #fff;
15   width: 95%;  
16   margin: 0px auto;
17   padding: 10px;
18 }

jEdit es muy configurable y personalizable y, como hemos visto, tiene gran cantidad de características, plugins y lenguajes de programación incorporados además de ser multi plataforma. Yo considero a jEdit una opción bastante recomendable.

Finalmente, aquí tenemos una lista más completa de todas las características que tiene incorporadas (en inglés): Lista de características de jEdit

Si os ha gustado éste programa, podéis descargarlo desde éste enlace. Tiene bastantes versiones para descargar ya compiladas, escoge la que se adecue a tu sistema operativo: Descargar jEdit

Notepad++

Captura de pantalla de Notepad++

Notepad++ es un editor de código fuente bastante completo que soporta varios lenguajes de programación, aunque solo se ejecuta en Windows, así que si no usas el sistema operativo de Microsoft ya te puedes ir olvidando de Notepad++.

Es de código abierto y tiene, como todos los editores de código fuente, resaltado de sintaxis, pudiendo personalizar los colores como extra.

Además, tiene autocompletado y puede editar varios documentos al mismo tiempo e incluso el mismo documento pero en varias partes distintas por ventana. (muy útil para LARGOS archivos CSS).

También posee de un gran sistema de plugins y macros.

En fin, si usas cualquier Windows para programar, el mejor editor de código fuente que puedas encontrar es Notepad++. Y puedes descargarlo aquí: Sitio web de Notepad++

TextMate

Editando la hoja de estilos de StickNote en TextMate

TextMate es definitivamente la mejor opción si estás usando un Mac (de hecho, me atrevería a decir que es el mejor editor de código fuente) ya que sólo funciona en los sistemas operativos de Apple.

Aún ser un programa de pago (con 30 días de prueba), vale la pena. Ofrece, como todos los editores de código fuente, la capacidad de resaltar la sintaxis.

Pero TextMate, además, nos permite abrir carpetas enteras y con ésto podremos explorarlas en una barrita lateral que nos sale al lado de la aplicación: muy útil si estás trabajando en un proyecto con varios archivos, ya que te lo abrirá todo en pestañas.

TextMate ofrece también un autocompletado que se activa con Tab (si escribes if cuándo estás editando en JavaScript y pulsas Tab, te sale ésto: “if (true) {};” seleccionándose el true para que a la que escribas algo se cambie). También ofrece grabación y reproducción de macros y un EXTENSO sistema de plugins con MUCHOS plugins. Ofrece tareas que se realizarían desde la terminal para muchos lenguajes con un simple click yendo a sus plugins (siendo la mayoría ya preinstalados), llamados Bundles en TextMate, a los cuales puedes acceder desde “Bundles -> {lenguaje} -> {bundle}” o con un acceso de teclado que previamente habrás configurado.

El programa es muy costumizable, pudiendo cambiar los temas entre varios de incluidos e incluso descargar más. Yo, por ejemplo, uso el tema de Railscasts (me enamoré de él cuándo lo vi) que se puede descargar aquí: Página “Acerca de” de Railscasts, tercer apartado “TextMate Theme”.

Las características que he repasado aquí son muy pocas comparando con las que lleva el programa, pero es que podría hablar de él en un artículo entero… En fin, si usáis Mac, no dudáis más y poneros TextMate.

¿Por qué no has incluido x o y editor de código fuente que me gusta más?

Es verdad. No he incluido emacs. Perdona mi pecado, señor Stallman. Pero… es que no encuentro Emacs intuitivo y no me gusta. Y aún me gusta menos hablar de cosas que no me gustan (y aún así hablo de Windows…). Tampoco he incluido vi por la misma razón.

¿Y Eclipse? ¿Por qué no has incluido a Eclipse? Hmm… Podría haber incluido a Eclipse, pero es que Eclipse es mucho más que un editor de código fuente, es un entorno de desarrollo integrado (IDE) y creo que se merecen un artículo a parte (quizá por mi parte).

La conclusión a la que puedo llegar fácilmente es:

• Si usas Linux ->jEdit o GEdit =P
• Si usas Windows -> Notepad++
• Si usas Mac -> TextMate

¡Espero que os haya gustado el artículo!