hugoruscitti/pilas

View on GitHub
data/manual/mapas_y_plataformas/index.json

Summary

Maintainability
Test Coverage
{
    "content": "<h1 id=\"mapas-y-plataformas\">Mapas y plataformas</h1>\n<p>En los a\u00f1os 80 uno de los g\u00e9neros de videojuegos mas\ncelebrados ha sido el genero de plataformas.</p>\n<p>En los juegos de este g\u00e9nero el protagonista de la\naventura estaba en un escenario armado de bloques y\nplataformas en donde pod\u00eda saltar.</p>\n<p>Uno de los juegos mas populares de esos d\u00edas era\nSuper Mario Bros.</p>\n<p>Pilas incluye un actor llamado <code>Mapa</code> que te permite\nhacer juegos de plataformas f\u00e1cilmente.</p>\n<h2 id=\"presentando-el-actor-mapa\">Presentando el actor <code>Mapa</code></h2>\n<p>El <code>Mapa</code> representa un escenario compuesto de bloques\nque pueden ser plataformas, muros o simplemente adornos\ndel escenario.</p>\n<p>Para crear un <code>Mapa</code> necesitas una grilla de gr\u00e1ficos con los bloques\nque se usar\u00e1n en el escenario. Luego puedes crear el <code>Mapa</code>:</p>\n<pre><code>grilla = pilas.imagenes.cargar_grilla(\"grillas/plataformas_10_10.png\", 10, 10)\nmapa = pilas.actores.Mapa(grilla)\n</code></pre>\n<p>Una vez que ejecutas esas sentencias no observar\u00e1s cambios\nen la ventana, el mapa est\u00e1, pero no tiene bloques a\u00fan.</p>\n<p>Si quieres dibujar bloques solo tienes que indicar un\n\u00edndice de bloque y la posici\u00f3n en pantalla a dibujar.</p>\n<p>Por ejemplo, un bloque cerca del centro de la ventana es\nla posici\u00f3n (8, 10):</p>\n<pre><code>mapa.pintar_bloque(8, 10, 1)\n</code></pre>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/mapa_un_bloque.jpg\" /></p>\n<p>Otro ejemplo: si queremos dibujar en la parte inferior de la\nventana, podemos llamar muchas veces al m\u00e9todo <code>pintar_bloque</code>, una\nvez por cada bloque que necesitamos:</p>\n<pre><code>for columna in range(20):\n    mapa.pintar_bloque(14, columna, 1)\n</code></pre>\n<p>El primer y segundo argumento del m\u00e9todo <code>pintar_bloque</code> indica\nla posici\u00f3n en donde vamos a dibujar el bloque. En este caso la\nfila ser\u00e1 14 y la columna ser\u00e1 0, 1, 2, 3, 4.. etc</p>\n<p>El tercer argumento ser\u00e1 el \u00edndice de la grilla que indicamos\nanteriormente.</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/mapa_muchos_bloques.jpg\" /></p>\n<h2 id=\"colisiones-con-el-escenario\">Colisiones con el escenario</h2>\n<p>En los juegos de plataformas es muy importante que los bloques\npuedan interactuar con los jugadores. Por ejemplo habr\u00e1 bloques\nque sirvan como plataformas y otros impedir\u00e1n que avancemos como\nsi se trataran de muros.</p>\n<p>Los mapas de pilas te permiten crear esta interacci\u00f3n de manera\nsencilla. El m\u00e9todo que usamos antes <code>pintar_bloque</code>, le\ndice al mapa que dibuje el bloque, pero a la vez te permite\nindicar si ese bloque es s\u00f3lido o no.</p>\n<p>Diremos que un bloque es s\u00f3lido cuando un personaje no puede\npasar a trav\u00e9s de \u00e9l. Por ejemplo, una plataforma es un bloque\ns\u00f3lido.</p>\n<p>Entonces, cada vez que invocas al m\u00e9todo <code>pintar_bloque</code> tienes\nla posibilidad de indicar si el bloque es s\u00f3lido o no:</p>\n<pre><code>mapa.pintar_bloque(14, 10, 1, es_bloque_solido=True)\nmapa.pintar_bloque(14, 10, 1, es_bloque_solido=False)\n</code></pre>\n<p>Y ten en cuenta que si no especificas el \u00faltimo par\u00e1metro, pilas\nasumir\u00e1 que el bloque debe ser s\u00f3lido.</p>\n<p>Por cierto, los bloques \"no s\u00f3lidos\" son \u00fatiles para representar\nadornos del escenario, como nubes o agua. Incluso en algunos\njuegos se usan para crear pasadizos secretos entre muros o\nplataformas...</p>\n<h2 id=\"creando-mapas-con-el-programa-tiled\">Creando mapas con el programa tiled</h2>\n<p>Crear los mapas directamente desde el c\u00f3digo est\u00e1 bien, pero\nsi tienes que hacer muchos mapas te llevar\u00e1 un mont\u00f3n de tiempo.</p>\n<p>Una buena alternativa a esto es usar un software de dise\u00f1o\nde escenarios, crear un archivo con todo el escenario y\nluego cargarlo desde pilas.</p>\n<p>El software que te recomiendo para esta tarea se llama <code>tiled</code>\n(ver http://www.mapeditor.org).</p>\n<p>Veamos como usar tiled para crear un escenario sencillo, primero\ntienes que crear un mapa desde el men\u00fa <code>File</code>, se le solicitar\u00e1\nindicar el tama\u00f1o del escenario:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled2.png\" /></p>\n<p>Usa los valores por defecto, al menos por esta vez.</p>\n<p>Luego tienes que ir al men\u00fa <code>Map</code> y luego <code>New tileset</code> para\nindicar cual es la grilla de im\u00e1genes que usar\u00e1s en los bloques. Te\nrecomiendo usar la imagen <code>batalhao.png</code> (de Silveins Neto), que\nest\u00e1 en la carpeta de ejemplos de pilas:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled3.png\" /></p>\n<p>Ahora, lo mas divertido, comienza a dibujar sobre el escenario\nseleccionando bloques. Observa que el programa tiene varias herramientas\npara hacer que esto sea mucho mas sencillo:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled4.png\" /></p>\n<p>Luego, aseg\u00farate de que el programa guarda todos los datos en formato CSV, esto\nes importante para que se pueda vincular con pilas. Para esto tienes\nque abrir el men\u00fa <code>Edit</code> y luego <code>Preferences</code>, la pantalla de opciones\nte tiene que quedar as\u00ed:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled5.png\" /></p>\n<p>Listo, ahora solamente hay que guardar el mapa en un archivo. Ve al men\u00fa\n<code>File</code> y luego selecciona <code>Save as</code>, tienes que darle un nombre\nal archivo <code>.tmx</code>.</p>\n<p>Luego, desde pilas, es muy simple, solamente tienes que crear\nel actor mapa indicando el nombre del archivo <code>.tmx</code> que has\ngenerado con el programa <strong>tiled</strong>:</p>\n<pre><code>import pilas\npilas.iniciar()\nmapa_desde_archivo = pilas.actores.MapaTiled(\"archivo.tmx\")\n</code></pre>\n<h2 id=\"creando-bloques-solidos-con-tiled\">Creando bloques s\u00f3lidos con tiled</h2>\n<p>Si quieres hacer bloques s\u00f3lidos desde <strong>tiled</strong> solamente\ntienes que crear una capa especial. Si una de las capas comienza\ncon el nombre \"solido\" entonces pilas har\u00e1 que cada uno\nde los bloques sea interpretado como un bloque s\u00f3lido.</p>\n<p>Por ejemplo, en el escenario anterior, ser\u00eda interesante colocar\nlos bloques de pasto y la ruta en la capa que he llamado \"suelo\"\ny el resto de los objetos en otras capas que ser\u00e1n s\u00f3lidas,\nen este caso \"solido obst\u00e1culos\" y \"solido paredes\":</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled6.png\" /></p>\n<h2 id=\"un-ejemplo-completo\">Un ejemplo completo</h2>\n<p>Te recomiendo que observes el ejemplo <code>mapa_desde_archivo.py</code> del\ndirectorio de ejemplos de pilas, podr\u00e1s observar un escenario\nmuy simple con obst\u00e1culos y un personaje que se puede mover\ncon el teclado:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/tiled8.png\" /></p>\n<p>O bien, el ejemplo <code>plataformas</code>:</p>\n<p><img alt=\"\" src=\"../imagenes/mapas_y_plataformas/plataformas.png\" /></p>\n", 
    "url": "/mapas_y_plataformas/", 
    "language": "en", 
    "title": "Mapas y plataformas"
}