data/manual/mapas_y_plataformas/index.html
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapas y plataformas - pilas-engine</title>
<link rel="shortcut icon" href="../img/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/theme.css" type="text/css" />
<link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
<link rel="stylesheet" href="../css/highlight.css">
<script>
// Current page data
var mkdocs_page_name = "Mapas y plataformas";
var mkdocs_page_input_path = "mapas_y_plataformas.md";
var mkdocs_page_url = "/mapas_y_plataformas/";
</script>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="../js/highlight.pack.js"></script>
<script src="../js/theme.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
<div class="wy-side-nav-search">
<a href=".." class="icon icon-home"> pilas-engine</a>
<div role="search">
<form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul class="current">
<li>
<li class="toctree-l1 ">
<a class="" href="..">Principal</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../que_juegos/">Tipos de juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../instalacion/">Instalación</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../about/">Acerca de ...</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../empezando/">Empezando y los primeros pasos con pilas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores/">Actores</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores_personalizados/">Actores personalizados</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../grupos/">Grupos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../colisiones/">Colisiones</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../etiquetas/">Etiquetas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../fisica/">Fisica</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../controles/">Controles</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../joystick/">Joystick</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../imagen/">Imagen</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../sonidos/">Audio: Sonidos y Música</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_simple_en_pantalla/">Dibujado simple en pantalla</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_avanzado_con_superficies/">Dibujado avanzado con Superficies</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../tareas/">Manejo de tiempo con tareas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../interpolacion/">Interpolaciones</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../controlando_la_pantalla/">Controlando la pantalla</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../comportamientos/">Comportamientos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../escenas/">Escenas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../interfaz/">Interfaz de usuario</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../menu/">Cómo crear menúes para tu juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 current">
<a class="current" href="./">Mapas y plataformas</a>
<ul>
<li class="toctree-l3"><a href="#mapas-y-plataformas">Mapas y plataformas</a></li>
<li><a class="toctree-l4" href="#presentando-el-actor-mapa">Presentando el actor Mapa</a></li>
<li><a class="toctree-l4" href="#colisiones-con-el-escenario">Colisiones con el escenario</a></li>
<li><a class="toctree-l4" href="#creando-mapas-con-el-programa-tiled">Creando mapas con el programa tiled</a></li>
<li><a class="toctree-l4" href="#creando-bloques-solidos-con-tiled">Creando bloques sólidos con tiled</a></li>
<li><a class="toctree-l4" href="#un-ejemplo-completo">Un ejemplo completo</a></li>
</ul>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dialogos/">Diálogos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../camara/">Manejo de Cámara</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../eventos/">Eventos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../texto/">Textos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../habilidades/">Habilidades</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../depurando/">Depurando</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../como_funciona_pilas_por_dentro/">¿Cómo funciona pilas por dentro?</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../complementos/">Complementos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../desarrolladores/">Guía para desarrolladores</a>
</li>
<li>
</ul>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="..">pilas-engine</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="..">Docs</a> »</li>
<li>Mapas y plataformas</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="mapas-y-plataformas">Mapas y plataformas</h1>
<p>En los años 80 uno de los géneros de videojuegos mas
celebrados ha sido el genero de plataformas.</p>
<p>En los juegos de este género el protagonista de la
aventura estaba en un escenario armado de bloques y
plataformas en donde podía saltar.</p>
<p>Uno de los juegos mas populares de esos días era
Super Mario Bros.</p>
<p>Pilas incluye un actor llamado <code>Mapa</code> que te permite
hacer juegos de plataformas fácilmente.</p>
<h2 id="presentando-el-actor-mapa">Presentando el actor <code>Mapa</code></h2>
<p>El <code>Mapa</code> representa un escenario compuesto de bloques
que pueden ser plataformas, muros o simplemente adornos
del escenario.</p>
<p>Para crear un <code>Mapa</code> necesitas una grilla de gráficos con los bloques
que se usarán en el escenario. Luego puedes crear el <code>Mapa</code>:</p>
<pre><code>grilla = pilas.imagenes.cargar_grilla("grillas/plataformas_10_10.png", 10, 10)
mapa = pilas.actores.Mapa(grilla)
</code></pre>
<p>Una vez que ejecutas esas sentencias no observarás cambios
en la ventana, el mapa está, pero no tiene bloques aún.</p>
<p>Si quieres dibujar bloques solo tienes que indicar un
índice de bloque y la posición en pantalla a dibujar.</p>
<p>Por ejemplo, un bloque cerca del centro de la ventana es
la posición (8, 10):</p>
<pre><code>mapa.pintar_bloque(8, 10, 1)
</code></pre>
<p><img alt="" src="../imagenes/mapas_y_plataformas/mapa_un_bloque.jpg" /></p>
<p>Otro ejemplo: si queremos dibujar en la parte inferior de la
ventana, podemos llamar muchas veces al método <code>pintar_bloque</code>, una
vez por cada bloque que necesitamos:</p>
<pre><code>for columna in range(20):
mapa.pintar_bloque(14, columna, 1)
</code></pre>
<p>El primer y segundo argumento del método <code>pintar_bloque</code> indica
la posición en donde vamos a dibujar el bloque. En este caso la
fila será 14 y la columna será 0, 1, 2, 3, 4.. etc</p>
<p>El tercer argumento será el índice de la grilla que indicamos
anteriormente.</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/mapa_muchos_bloques.jpg" /></p>
<h2 id="colisiones-con-el-escenario">Colisiones con el escenario</h2>
<p>En los juegos de plataformas es muy importante que los bloques
puedan interactuar con los jugadores. Por ejemplo habrá bloques
que sirvan como plataformas y otros impedirán que avancemos como
si se trataran de muros.</p>
<p>Los mapas de pilas te permiten crear esta interacción de manera
sencilla. El método que usamos antes <code>pintar_bloque</code>, le
dice al mapa que dibuje el bloque, pero a la vez te permite
indicar si ese bloque es sólido o no.</p>
<p>Diremos que un bloque es sólido cuando un personaje no puede
pasar a través de él. Por ejemplo, una plataforma es un bloque
sólido.</p>
<p>Entonces, cada vez que invocas al método <code>pintar_bloque</code> tienes
la posibilidad de indicar si el bloque es sólido o no:</p>
<pre><code>mapa.pintar_bloque(14, 10, 1, es_bloque_solido=True)
mapa.pintar_bloque(14, 10, 1, es_bloque_solido=False)
</code></pre>
<p>Y ten en cuenta que si no especificas el último parámetro, pilas
asumirá que el bloque debe ser sólido.</p>
<p>Por cierto, los bloques "no sólidos" son útiles para representar
adornos del escenario, como nubes o agua. Incluso en algunos
juegos se usan para crear pasadizos secretos entre muros o
plataformas...</p>
<h2 id="creando-mapas-con-el-programa-tiled">Creando mapas con el programa tiled</h2>
<p>Crear los mapas directamente desde el código está bien, pero
si tienes que hacer muchos mapas te llevará un montón de tiempo.</p>
<p>Una buena alternativa a esto es usar un software de diseño
de escenarios, crear un archivo con todo el escenario y
luego cargarlo desde pilas.</p>
<p>El software que te recomiendo para esta tarea se llama <code>tiled</code>
(ver http://www.mapeditor.org).</p>
<p>Veamos como usar tiled para crear un escenario sencillo, primero
tienes que crear un mapa desde el menú <code>File</code>, se le solicitará
indicar el tamaño del escenario:</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled2.png" /></p>
<p>Usa los valores por defecto, al menos por esta vez.</p>
<p>Luego tienes que ir al menú <code>Map</code> y luego <code>New tileset</code> para
indicar cual es la grilla de imágenes que usarás en los bloques. Te
recomiendo usar la imagen <code>batalhao.png</code> (de Silveins Neto), que
está en la carpeta de ejemplos de pilas:</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled3.png" /></p>
<p>Ahora, lo mas divertido, comienza a dibujar sobre el escenario
seleccionando bloques. Observa que el programa tiene varias herramientas
para hacer que esto sea mucho mas sencillo:</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled4.png" /></p>
<p>Luego, asegúrate de que el programa guarda todos los datos en formato CSV, esto
es importante para que se pueda vincular con pilas. Para esto tienes
que abrir el menú <code>Edit</code> y luego <code>Preferences</code>, la pantalla de opciones
te tiene que quedar así:</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled5.png" /></p>
<p>Listo, ahora solamente hay que guardar el mapa en un archivo. Ve al menú
<code>File</code> y luego selecciona <code>Save as</code>, tienes que darle un nombre
al archivo <code>.tmx</code>.</p>
<p>Luego, desde pilas, es muy simple, solamente tienes que crear
el actor mapa indicando el nombre del archivo <code>.tmx</code> que has
generado con el programa <strong>tiled</strong>:</p>
<pre><code>import pilas
pilas.iniciar()
mapa_desde_archivo = pilas.actores.MapaTiled("archivo.tmx")
</code></pre>
<h2 id="creando-bloques-solidos-con-tiled">Creando bloques sólidos con tiled</h2>
<p>Si quieres hacer bloques sólidos desde <strong>tiled</strong> solamente
tienes que crear una capa especial. Si una de las capas comienza
con el nombre "solido" entonces pilas hará que cada uno
de los bloques sea interpretado como un bloque sólido.</p>
<p>Por ejemplo, en el escenario anterior, sería interesante colocar
los bloques de pasto y la ruta en la capa que he llamado "suelo"
y el resto de los objetos en otras capas que serán sólidas,
en este caso "solido obstáculos" y "solido paredes":</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled6.png" /></p>
<h2 id="un-ejemplo-completo">Un ejemplo completo</h2>
<p>Te recomiendo que observes el ejemplo <code>mapa_desde_archivo.py</code> del
directorio de ejemplos de pilas, podrás observar un escenario
muy simple con obstáculos y un personaje que se puede mover
con el teclado:</p>
<p><img alt="" src="../imagenes/mapas_y_plataformas/tiled8.png" /></p>
<p>O bien, el ejemplo <code>plataformas</code>.</p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../dialogos/" class="btn btn-neutral float-right" title="Diálogos"/>Siguiente <span class="icon icon-circle-arrow-right"></span></a>
<a href="../menu/" class="btn btn-neutral" title="Cómo crear menúes para tu juegos"><span class="icon icon-circle-arrow-left"></span> Anterior</a>
</div>
<hr/>
<div role="contentinfo">
<p>
<!-- Copyright etc -->
</p>
</div>
Creado con <em>MkDocs</em>.
<script>
$(document).ready(function() {
$('img').each(function(elemento) {
if (this.src.indexOf('github.io') > 0) {
this.src = this.src.replace('github.io/imagenes', 'github.io/pilas-manual/imagenes');
}
});
});
</script>
<script>
$(document).ready(function() {
String.prototype.endsWith = function(suffix){
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
$('a').each(function(){
var x=this.href;
if (!this.href.endsWith('html') && this.href.indexOf('#') < 0 && this.href.indexOf('http://') === -1 && this.href.indexOf('https://') === -1) {
if (this.href.endsWith('/')) {
this.href = this.href + "index.html";
} else {
this.href = this.href + "/index.html";
}
}
});
});
</script>
<script>
function alternar_menu() {
var sidebar = document.querySelectorAll(".wy-nav-side")[0];
var left = sidebar.style.left;
if (left === "-300px") {
sidebar.style.left = "0px";
} else {
if (left === "0px") {
sidebar.style.left = "-300px";
} else {
sidebar.style.left = "0px";
}
}
}
$(document).ready(function() {
document.querySelector('ul.wy-breadcrumbs>li>a').onclick = function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (w < 768) {
alternar_menu();
return false;
} else {
return true;
}
}
});
</script>
<style>
.rst-versions {
border: 0 !important;
}
.wy-nav-side {
padding-bottom: 50px;
}
.wy-nav-content-wrap {
background-color: white !important;
}
.wy-nav-content {
background-color: white !important;
}
.star {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background-image: url('/imagenes/star.png');
margin-bottom: -2px;
margin-left: 4px;
}
</style>
</footer>
<script type="text/javascript">
var dentro_de_pilas_engine = (document.location.href.indexOf('file://') === 0);
// Ocultando la barra de búsqueda
if (dentro_de_pilas_engine) {
var b = document.getElementsByName('q');
b[0].style.display = "none"
}
</script>
<style media="screen">
code {
font-size: 15px !important;
}
</style>
<style>
img {
width: auto !important;
}
pre {
padding: 0px !important;
}
.hljs {
font-size: 15px;
}
td {
padding: 15px;
text-align: center;
}
.wy-menu-vertical li.current {
background: #0B0B0B;
}
.wy-menu-vertical li.on a, .wy-menu-vertical li.current>a {
color: #FFFFFF;
padding: 0.4045em 1.618em;
font-weight: bold;
position: relative;
background: #6C6C6C;
border: none;
border-bottom: none;
border-top: none;
padding-left: 1.618em -4px;
}
.wy-menu-vertical li.current a {
color: rgb(186, 186, 186);
}
.wy-menu-vertical li.current a:hover {
background: #444444;
}
</pre>
</div>
</div>
</section>
</div>
<div class="rst-versions" role="note" style="cursor: pointer">
<span class="rst-current-version" data-toggle="rst-current-version">
<span><a href="../menu/" style="color: #fcfcfc;">« Previous</a></span>
<span style="margin-left: 15px"><a href="../dialogos/" style="color: #fcfcfc">Next »</a></span>
</span>
</div>
</body>
</html>