data/manual/dibujado_simple_en_pantalla/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>Dibujado simple en pantalla - 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 = "Dibujado simple en pantalla";
var mkdocs_page_input_path = "dibujado_simple_en_pantalla.md";
var mkdocs_page_url = "/dibujado_simple_en_pantalla/";
</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 current">
<a class="current" href="./">Dibujado simple en pantalla</a>
<ul>
<li class="toctree-l3"><a href="#dibujado-simple-en-pantalla">Dibujado simple en pantalla</a></li>
<li><a class="toctree-l4" href="#usando-la-tortuga-para-dibujar">Usando la Tortuga para dibujar</a></li>
<li><a class="toctree-l4" href="#inspeccionando-a-la-tortuga">Inspeccionando a la tortuga</a></li>
<li><a class="toctree-l4" href="#usando-una-pizarra">Usando una Pizarra</a></li>
<li><a class="toctree-l4" href="#pintando-imagenes">Pintando imágenes</a></li>
<li><a class="toctree-l4" href="#pintando-porciones-de-imagenes">Pintando porciones de imágenes</a></li>
<li><a class="toctree-l4" href="#dibujando-grillas">Dibujando grillas</a></li>
<li><a class="toctree-l4" href="#la-pizarra-como-actor">La pizarra como actor</a></li>
</ul>
</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 ">
<a class="" href="../mapas_y_plataformas/">Mapas y plataformas</a>
</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>Dibujado simple en pantalla</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="dibujado-simple-en-pantalla">Dibujado simple en pantalla</h1>
<p>Hasta ahora hemos mostrado en la pantalla
fondos y actores que originalmente estaban
almacenados en el disco de la computadora
cómo imágenes.</p>
<p>En esta sección veremos como dibujar libremente, ya
sean lineas, círculos, texto etc..</p>
<p>Comenzaremos con una forma de dibujado muy
sencilla, y luego veremos algunas alternativas
que ofrecen mas flexibilidad.</p>
<p>Ten en cuenta que el dibujo avanzado y mas flexible
lo vamos a ver en el siguiente capítulo <strong>Dibujo avanzado
con Superficies</strong>.</p>
<h2 id="usando-la-tortuga-para-dibujar">Usando la Tortuga para dibujar</h2>
<p>El actor <code>Tortuga</code> está inspirado en una de
las actividades mas divertidas, didácticas y simbólicas
del lenguaje de programación <strong>logo</strong>, creado
por <strong>Seymour Papert</strong>.</p>
<p>La <code>Tortuga</code> básicamente es un actor que sabe
dibujar sobre la ventana de pilas. Para ello el
programador tiene que indicarle a la tortuga qué
movimiento debe realizar.</p>
<p>La siguiente imagen muestra lo que podría
dibujar la tortuga con algunas sentencias de
movimientos:</p>
<p><img alt="" src="../imagenes/dibujado_simple_en_pantalla/tortuga_dibuja_triangulo.png" /></p>
<p>La imagen no alcanza a mostrar por completo el
concepto, pero en pocas palabras se puede sintetizar
lo que realmente hace.</p>
<p>El dibujo de la imagen anterior es una traza que
va dibujando la tortuga a partir de su movimiento.</p>
<p>El siguiente código es el que se utilizó para
dibujar esa linea de dos colores:</p>
<pre><code class="python">import pilasengine
pilas = pilasengine.iniciar()
tortuga = pilas.actores.Tortuga()
tortuga.avanzar(30)
tortuga.color = pilas.colores.azul
tortuga.avanzar(200)
</code></pre>
<p>Algo muy valioso en términos didácticos, es que
uno podría animarse a realizar dibujos simples cómo
una casa, un hexágono o cualquier otra figura diseñando una estrategia
de movimiento para la tortuga.</p>
<h2 id="inspeccionando-a-la-tortuga">Inspeccionando a la tortuga</h2>
<p>Para manejar a este actor tienes varios comandos
inspirados en logo.</p>
<p>Esta es una lista de los comandos mas utilizados:</p>
<table>
<thead>
<tr>
<th>Método completo</th>
<th>nombre corto</th>
<th>ejemplo</th>
<th>¿que hace?</th>
</tr>
</thead>
<tbody>
<tr>
<td>avanzar</td>
<td>av</td>
<td><code>tortuga.av(10)</code></td>
<td>avanza en dirección a donde mira la tortuga.</td>
</tr>
<tr>
<td>giraderecha</td>
<td>gd</td>
<td><code>tortuga.gd(45)</code></td>
<td>gira hacia la derecha los grados indicados.</td>
</tr>
<tr>
<td>giraizquierda</td>
<td>gi</td>
<td><code>tortuga.gi(45)</code></td>
<td>gira hacia la izquierda los grados indicados.</td>
</tr>
<tr>
<td>subelapiz</td>
<td>sl</td>
<td><code>tortuga.sl()</code></td>
<td>deja de dibujar cuando se mueve la tortuga.</td>
</tr>
<tr>
<td>bajalapiz</td>
<td>bl</td>
<td><code>tortuga.bl()</code></td>
<td>comienza a dibujar cuando la tortuga se mueve.</td>
</tr>
<tr>
<td>pon_color</td>
<td>pc</td>
<td><code>tortuga.pc(pilas.colores.rojo)</code></td>
<td>dibuja con el color indicado.</td>
</tr>
<tr>
<td>pintar</td>
<td>pintar</td>
<td><code>tortuga.pintar(pilas.colores.blanco)</code></td>
<td>pinta toda la pantala del mismo color.</td>
</tr>
</tbody>
</table>
<p>Por supuesto hay algunos mas, pero esos quedan para
investigar en la clase propiamente dicha. Recuerda que
el auto-completado del intérprete de python es bastante
útil para estas cosas.</p>
<h2 id="usando-una-pizarra">Usando una Pizarra</h2>
<p>Si quieres dibujar sobre la pantalla pero
de forma inmediata y con algunas posibilidades mas
elaboradas, puedes
usar un actor llamado <code>Pizarra</code>. Esta no es la
forma mas avanzada, pero es el siguiente paso después
de dominar al actor <code>Tortuga</code>.</p>
<p>Este actor <code>Pizarra</code> es cómo un lienzo invisible sobre
el que podemos pintar imágenes, figuras
geométricas y trazos de cualquier tipo. De hecho, el actor
<code>Tortuga</code> que vimos antes, en realidad estaba
dibujando sobre una pizarra, solo que lo hacía con
animaciones y algo lento.</p>
<p>Comencemos con algo sencillo: para crear la pizarra y
dibujar un punto en el centro de la
pantalla se puede usar el siguiente
código:</p>
<pre><code class="python">pizarra = pilas.actores.Pizarra()
pizarra.dibujar_punto(0, 0)
</code></pre>
<p>incluso podrías usar el argumento opcional <code>color</code>
si prefieres otro color, o trazar una linea:</p>
<pre><code class="python">pizarra.linea(0, 0, 200, 200, pilas.colores.verdeoscuro, grosor=5)
</code></pre>
<p><img alt="" src="../imagenes/dibujado_simple_en_pantalla/linea.jpg" /></p>
<h2 id="pintando-imagenes">Pintando imágenes</h2>
<p>Las pizarras también pueden dibujar imágenes sobre la superficie,
y esto es útil cuando quieras crear pinceles especiales sobre
la pizarra o construir un escenario usando bloques tipo
ladrillos.</p>
<p>Para pintar una imagen solo tienes que cargarla e
indicarla a la pizarra que la dibuje en una posicion determinada.</p>
<pre><code>imagen = pilas.imagenes.cargar("pelota.png")
pizarra.pintar_imagen(imagen, 0, 0)
</code></pre>
<p>Así se verá:</p>
<p><img alt="" src="../imagenes/dibujado_simple_en_pantalla/pizarra_imagen.jpg" /></p>
<p>Ten en cuenta que en estos casos, cuando estamos dibujando
una imagen sobre otra, el punto destino (x, y) siempre indica
la esquina superior izquierda de la imagen, no el centro u
otra posición relativa como en el caso de los actores.</p>
<h2 id="pintando-porciones-de-imagenes">Pintando porciones de imágenes</h2>
<p>Hay ocasiones en las que te resultará útil poder
pintar solamente porciones de una imagen sobre otra. Para
estos casos está el método <code>pintar_parte_de_imagen</code>.</p>
<p>Veamos la definición del método::</p>
<pre><code>def pintar_parte_de_imagen(self, imagen, origen_x, origen_y, ancho, alto, x, y):
</code></pre>
<h2 id="dibujando-grillas">Dibujando grillas</h2>
<p>De manera similar a las imágenes normales, sobre las pizarras
también se pueden pintar grillas.</p>
<p>Solamente tenemos que crear la grilla, seleccionar el
cuadro de animación y después decirle a la pizarra
que pinte el cuadro actual de la grilla:</p>
<pre><code>grilla = pilas.imagenes.cargar_grilla("pingu.png", 10)
pizarra.pintar_grilla(grilla, 0, 0)
</code></pre>
<p>Así se verá:</p>
<p><img alt="" src="../imagenes/dibujado_simple_en_pantalla/pizarra_grilla.jpg" /></p>
<p>Esto es útil cuando se quieren pintar bloques de un escenario
completo, por ejemplo podríamos tener una grilla con distintos
tipos de suelos (pasto, piedra, tierra) y luego ir
imprimiendo sobre una pizarra para formar un escenario completo.</p>
<h2 id="la-pizarra-como-actor">La pizarra como actor</h2>
<p>Recuerda que la pizarra también es un actor, así que puedes enseñarle
habilidades, cambiar su posición, rotación o lo que quieras.</p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../dibujado_avanzado_con_superficies/" class="btn btn-neutral float-right" title="Dibujado avanzado con Superficies"/>Siguiente <span class="icon icon-circle-arrow-right"></span></a>
<a href="../sonidos/" class="btn btn-neutral" title="Audio: Sonidos y Música"><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="../sonidos/" style="color: #fcfcfc;">« Previous</a></span>
<span style="margin-left: 15px"><a href="../dibujado_avanzado_con_superficies/" style="color: #fcfcfc">Next »</a></span>
</span>
</div>
</body>
</html>