data/manual/dibujado_avanzado_con_superficies/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 avanzado con Superficies - 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 avanzado con Superficies";
var mkdocs_page_input_path = "dibujado_avanzado_con_superficies.md";
var mkdocs_page_url = "/dibujado_avanzado_con_superficies/";
</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 current">
<a class="current" href="./">Dibujado avanzado con Superficies</a>
<ul>
<li class="toctree-l3"><a href="#dibujado-avanzado-con-superficies">Dibujado avanzado con Superficies</a></li>
<li><a class="toctree-l4" href="#dibujando-sobre-superficies">Dibujando sobre superficies</a></li>
<li><a class="toctree-l4" href="#creacion-de-una-superficie">Creación de una superficie</a></li>
<li><a class="toctree-l4" href="#coordenadas-de-las-superficies">Coordenadas de las superficies</a></li>
<li><a class="toctree-l4" href="#metodos-para-dibujar">Métodos para dibujar</a></li>
</ul>
</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 avanzado con Superficies</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="dibujado-avanzado-con-superficies">Dibujado avanzado con Superficies</h1>
<p>Anteriormente vimos que los actores podían
tener un aspecto visual, ya sea gracias a
una imagen completa, una grilla o un dibujo
de pizarra.</p>
<p>Pero hay situaciones donde realmente necesitamos
algo mas. En muchas ocasiones necesitamos que
los actores puedan tener una apariencia que
construimos programáticamente (si existe la palabra...).</p>
<p>Por ejemplo, imagina que queremos hacer un indicador
de energía, un cronómetro, un indicador de vidas, un
botón etc...</p>
<h2 id="dibujando-sobre-superficies">Dibujando sobre superficies</h2>
<p>En pilas una superficie es una imagen, pero que no
se carga directamente desde el disco, sino que se
construye en memoria de la computadora, se puede
dibujar sobre ella y luego se le puede aplicar
a un actor como apariencia.</p>
<p>Comencemos con un ejemplo sencillo, imagina que
queremos hacer un actor muy feo, de color "verde"
y con dos ojitos. Lo primero que tenemos que hacer
es crear una superficie, dibujar sobre ella, y luego
crear un actor con esa apariencia:</p>
<pre><code class="python">import pilasengine
pilas = pilasengine.iniciar()
superficie = pilas.imagenes.cargar_superficie(100, 100)
# dibujamos el cuerpo
superficie.circulo(50, 50, 40, color=pilas.colores.verdeoscuro, relleno=True)
# un ojo
superficie.circulo(35, 35, 10, color=pilas.colores.blanco, relleno=True)
superficie.circulo(32, 35, 5, color=pilas.colores.negro, relleno=True)
# el otro ojo
superficie.circulo(67, 35, 10, color=pilas.colores.blanco, relleno=True)
superficie.circulo(64, 35, 5, color=pilas.colores.negro, relleno=True)
pilas.actores.Actor(imagen=superficie)
pilas.ejecutar() # Necesario al ejecutar en scripts.
</code></pre>
<p>Es decir, una vez que creamos la superficie, en realidad lo que obtenemos
es un objeto que se comporta cómo una imagen, pero con la diferencia
que podemos dibujar sobre ella libremente y crear desde el código la
imagen que queramos:</p>
<p><img alt="" src="../imagenes/dibujo_avanzado/carita.png" /></p>
<p>Ten en cuenta que también estamos mostrando la superficie gracias a un
actor, así que si rotamos el actor o cambiamos su escala la superficie
se observará de forma transformada.</p>
<p>Vamos a ver con mas detalle este recurso de pilas, porque ofrece muchas
mas funcionalidades de las que vemos en este ejemplo.</p>
<h2 id="creacion-de-una-superficie">Creación de una superficie</h2>
<p>Para crear una superficie tenemos que invocar a la función <code>pilas.imagenes.cargar_superficie</code>
como vimos mas arriba. Esta función admite dos parámetros que indican
el ancho y el alto de la superficie.</p>
<p>A partir de ese momento, la superficie será completamente transparente, y lo
que dibujemos sobre ella hará que no se note que en realidad es
un rectángulo. Vale aclarar que efectivamente todas las imágenes de los videojuegos
son rectangulares aunque se disimule...</p>
<h2 id="coordenadas-de-las-superficies">Coordenadas de las superficies</h2>
<p>Las coordenadas que se tienen que especificar para dibujar
sobre una superficie son diferentes a las coordenadas cartesianas
que usamos en la ventana de pilas.</p>
<p>El motivo de este cambio es que las superficies están en la memoria
de la computadora, y es mas sencillo tratar con ellas si usamos
el mismo sistema de coordenadas que se usa en casi todas las aplicaciones
gráficas. Ten en cuenta que estas son funciones avanzadas y
que generalmente se trabaja sobre estas funciones unas pocas veces
para lograr lo que ya no está implementado como un actor...</p>
<p>El sistema de coordenadas de las superficies tiene su origen
en la esquina superior izquierda <code>(0, 0)</code>, luego el eje <code>x</code> crece
hacia la derecha y el eje <code>y</code> crece hacia abajo.</p>
<h2 id="metodos-para-dibujar">Métodos para dibujar</h2>
<h3 id="pintar">Pintar</h3>
<p>Originalmente cuando creamos una superficie es completamente
transparente. Si queremos cambiar esto y pintar toda la superficie
de un color plano, podemos usar el siguiente método::</p>
<pre><code>superficie.pintar(color)
</code></pre>
<p>Donde el argumento color puede ser algo cómo <code>pilas.colores.rojo</code> o
un color personalizado indicando las componentes de color
<code>rojo</code>, <code>verde</code> y <code>azul</code>. Por ejemplo::</p>
<pre><code>superficie.pintar(pilas.colores.Color(100, 255, 0))
</code></pre>
<h3 id="circulo">Circulo</h3>
<p>Para pintar círculos podemos usar el método <code>circulo</code>. Indicando la
posición del círculo, su radio y el color.</p>
<p>Ten en cuenta que también debemos indicar si queremos un círculo completamente
sólido y pintado o solamente un borde.</p>
<p>Esta es la definición del método:</p>
<pre><code>def circulo(self, x, y, radio, color=colores.negro, relleno=False, grosor=1):
</code></pre>
<p>Si invocamos a la función solamente con sus argumentos principales, obtendremos
una silueta de circunferencia sin relleno, por ejemplo::</p>
<pre><code>figura.circulo(50, 50, 100)
</code></pre>
<p>o si queremos un trazo mas grueso:</p>
<pre><code>figura.circulo(50, 50, 100, grosor=5)
</code></pre>
<p>aunque también podemos indicarle que la circunferencia tiene que
estar pintada y con otro color:</p>
<pre><code>figura.circulo(50, 50, 100, pilas.colores.rojo, relleno=True)
</code></pre>
<h3 id="rectangulo">Rectángulo</h3>
<p>El dibujo de rectángulos es muy similar al de círculos, solo que aquí
tenemos que indicar la coordenada de la esquina superior izquierda
del rectángulo y el tamaño, en ancho y alto.</p>
<p>Esta es la definición del método:</p>
<pre><code>def rectangulo(self, x, y, ancho, alto, color=colores.negro, relleno=False, grosor=1):
</code></pre>
<h3 id="linea">Linea</h3>
<p>Una linea se compone obligatoriamente de puntos, los que marcan el
principio y el final de la linea. Para esto se tienen que usar
4 números, dos para cada punto.</p>
<p>Por ejemplo, el siguiente código dibuja una linea diagonal
de color rojo y con 3 píxeles de grosor:</p>
<pre><code>superficie.linea(20, 20, 50, 50, pilas.colores.rojo, 3)
</code></pre>
<h3 id="texto">Texto</h3>
<p>El dibujo de texto se realiza siempre a partir de una cadena
de texto. Y opcionalmente se pueden especificar otros
parámetros cómo la posición del texto, el color, el tamaño de
las letras y la tipografía.</p>
<p>Este es un ejemplo sencillo que imprime un texto de color
azul:</p>
<pre><code>superficie.texto("Hola mundo", magnitud=20, fuente="Courrier", color=pilas.colores.azul)
</code></pre>
<p>Ten en cuenta que la fuente se indica como una cadena, y
el valor que podemos poner ahí es el de cualquiera de nuestras
fuentes del sistema. Si nuestro sistema no tiene la fuente que le
solicitamos, se imprimirá usando una tipografía por defecto.</p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../tareas/" class="btn btn-neutral float-right" title="Manejo de tiempo con tareas"/>Siguiente <span class="icon icon-circle-arrow-right"></span></a>
<a href="../dibujado_simple_en_pantalla/" class="btn btn-neutral" title="Dibujado simple en pantalla"><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="../dibujado_simple_en_pantalla/" style="color: #fcfcfc;">« Previous</a></span>
<span style="margin-left: 15px"><a href="../tareas/" style="color: #fcfcfc">Next »</a></span>
</span>
</div>
</body>
</html>