hugoruscitti/pilas

{
    "content": "<h1 id=\"dibujado-avanzado-con-superficies\">Dibujado avanzado con Superficies</h1>\n<p>Anteriormente vimos que los actores pod\u00edan\ntener un aspecto visual, ya sea gracias a\nuna imagen completa, una grilla o un dibujo\nde pizarra.</p>\n<p>Pero hay situaciones donde realmente necesitamos\nalgo mas. En muchas ocasiones necesitamos que\nlos actores puedan tener una apariencia que\nconstruimos program\u00e1ticamente (si existe la palabra...).</p>\n<p>Por ejemplo, imagina que queremos hacer un indicador\nde energ\u00eda, un cron\u00f3metro, un indicador de vidas, un\nbot\u00f3n etc...</p>\n<h2 id=\"dibujando-sobre-superficies\">Dibujando sobre superficies</h2>\n<p>En pilas una superficie es una imagen, pero que no\nse carga directamente desde el disco, sino que se\nconstruye en memoria de la computadora, se puede\ndibujar sobre ella y luego se le puede aplicar\na un actor como apariencia.</p>\n<p>Comencemos con un ejemplo sencillo, imagina que\nqueremos hacer un actor muy feo, de color \"verde\"\ny con dos ojitos. Lo primero que tenemos que hacer\nes crear una superficie, dibujar sobre ella, y luego\ncrear un actor con esa apariencia:</p>\n<pre><code class=\"python\">import pilasengine\n\npilas = pilasengine.iniciar()\n\nsuperficie = pilas.imagenes.cargar_superficie(100, 100)\n\n# dibujamos el cuerpo\nsuperficie.circulo(50, 50, 40, color=pilas.colores.verdeoscuro, relleno=True)\n\n# un ojo\nsuperficie.circulo(35, 35, 10, color=pilas.colores.blanco, relleno=True)\nsuperficie.circulo(32, 35, 5, color=pilas.colores.negro, relleno=True)\n\n# el otro ojo\nsuperficie.circulo(67, 35, 10, color=pilas.colores.blanco, relleno=True)\nsuperficie.circulo(64, 35, 5, color=pilas.colores.negro, relleno=True)\n\npilas.actores.Actor(superficie)\n\npilas.ejecutar() # Necesario al ejecutar en scripts.\n</code></pre>\n\n<p>Es decir, una vez que creamos la superficie, en realidad lo que obtenemos\nes un objeto que se comporta c\u00f3mo una imagen, pero con la diferencia\nque podemos dibujar sobre ella libremente y crear desde el c\u00f3digo la\nimagen que queramos:</p>\n<p><img alt=\"\" src=\"../imagenes/dibujo_avanzado/carita.png\" /></p>\n<p>Ten en cuenta que tambi\u00e9n estamos mostrando la superficie gracias a un\nactor, as\u00ed que si rotamos el actor o cambiamos su escala la superficie\nse observar\u00e1 de forma transformada.</p>\n<p>Vamos a ver con mas detalle este recurso de pilas, porque ofrece muchas\nmas funcionalidades de las que vemos en este ejemplo.</p>\n<h2 id=\"creacion-de-una-superficie\">Creaci\u00f3n de una superficie</h2>\n<p>Para crear una superficie tenemos que invocar a la funci\u00f3n <code>pilas.imagenes.cargar_superficie</code>\ncomo vimos mas arriba. Esta funci\u00f3n admite dos par\u00e1metros que indican\nel ancho y el alto de la superficie.</p>\n<p>A partir de ese momento, la superficie ser\u00e1 completamente transparente, y lo\nque dibujemos sobre ella har\u00e1 que no se note que en realidad es\nun rect\u00e1ngulo. Vale aclarar que efectivamente todas las im\u00e1genes de los videojuegos\nson rectangulares aunque se disimule...</p>\n<h2 id=\"coordenadas-de-las-superficies\">Coordenadas de las superficies</h2>\n<p>Las coordenadas que se tienen que especificar para dibujar\nsobre una superficie son diferentes a las coordenadas cartesianas\nque usamos en la ventana de pilas.</p>\n<p>El motivo de este cambio es que las superficies est\u00e1n en la memoria\nde la computadora, y es mas sencillo tratar con ellas si usamos\nel mismo sistema de coordenadas que se usa en casi todas las aplicaciones\ngr\u00e1ficas. Ten en cuenta que estas son funciones avanzadas y\nque generalmente se trabaja sobre estas funciones unas pocas veces\npara lograr lo que ya no est\u00e1 implementado como un actor...</p>\n<p>El sistema de coordenadas de las superficies tiene su origen\nen la esquina superior izquierda <code>(0, 0)</code>, luego el eje <code>x</code> crece\nhacia la derecha y el eje <code>y</code> crece hacia abajo.</p>\n<h2 id=\"metodos-para-dibujar\">M\u00e9todos para dibujar</h2>\n<h3 id=\"pintar\">Pintar</h3>\n<p>Originalmente cuando creamos una superficie es completamente\ntransparente. Si queremos cambiar esto y pintar toda la superficie\nde un color plano, podemos usar el siguiente m\u00e9todo::</p>\n<pre><code>superficie.pintar(color)\n</code></pre>\n<p>Donde el argumento color puede ser algo c\u00f3mo <code>pilas.colores.rojo</code> o\nun color personalizado indicando las componentes de color\n<code>rojo</code>, <code>verde</code> y <code>azul</code>. Por ejemplo::</p>\n<pre><code>superficie.pintar(pilas.colores.Color(100, 255, 0))\n</code></pre>\n<h3 id=\"circulo\">Circulo</h3>\n<p>Para pintar c\u00edrculos podemos usar el m\u00e9todo <code>circulo</code>. Indicando la\nposici\u00f3n del c\u00edrculo, su radio y el color.</p>\n<p>Ten en cuenta que tambi\u00e9n debemos indicar si queremos un c\u00edrculo completamente\ns\u00f3lido y pintado o solamente un borde.</p>\n<p>Esta es la definici\u00f3n del m\u00e9todo:</p>\n<pre><code>def circulo(self, x, y, radio, color=colores.negro, relleno=False, grosor=1):\n</code></pre>\n<p>Si invocamos a la funci\u00f3n solamente con sus argumentos principales, obtendremos\nuna silueta de circunferencia sin relleno, por ejemplo::</p>\n<pre><code>figura.circulo(50, 50, 100)\n</code></pre>\n<p>o si queremos un trazo mas grueso:</p>\n<pre><code>figura.circulo(50, 50, 100, grosor=5)\n</code></pre>\n<p>aunque tambi\u00e9n podemos indicarle que la circunferencia tiene que\nestar pintada y con otro color:</p>\n<pre><code>figura.circulo(50, 50, 100, pilas.colores.rojo, relleno=True)\n</code></pre>\n<h3 id=\"rectangulo\">Rect\u00e1ngulo</h3>\n<p>El dibujo de rect\u00e1ngulos es muy similar al de c\u00edrculos, solo que aqu\u00ed\ntenemos que indicar la coordenada de la esquina superior izquierda\ndel rect\u00e1ngulo y el tama\u00f1o, en ancho y alto.</p>\n<p>Esta es la definici\u00f3n del m\u00e9todo:</p>\n<pre><code>def rectangulo(self, x, y, ancho, alto, color=colores.negro, relleno=False, grosor=1):\n</code></pre>\n<h3 id=\"linea\">Linea</h3>\n<p>Una linea se compone obligatoriamente de puntos, los que marcan el\nprincipio y el final de la linea. Para esto se tienen que usar\n4 n\u00fameros, dos para cada punto.</p>\n<p>Por ejemplo, el siguiente c\u00f3digo dibuja una linea diagonal\nde color rojo y con 3 p\u00edxeles de grosor:</p>\n<pre><code>superficie.linea(20, 20, 50, 50, pilas.colores.rojo, 3)\n</code></pre>\n<h3 id=\"texto\">Texto</h3>\n<p>El dibujo de texto se realiza siempre a partir de una cadena\nde texto. Y opcionalmente se pueden especificar otros\npar\u00e1metros c\u00f3mo la posici\u00f3n del texto, el color, el tama\u00f1o de\nlas letras y la tipograf\u00eda.</p>\n<p>Este es un ejemplo sencillo que imprime un texto de color\nazul:</p>\n<pre><code>superficie.texto(\"Hola mundo\", magnitud=20, fuente=\"Courrier\", color=pilas.colores.azul)\n</code></pre>\n<p>Ten en cuenta que la fuente se indica como una cadena, y\nel valor que podemos poner ah\u00ed es el de cualquiera de nuestras\nfuentes del sistema. Si nuestro sistema no tiene la fuente que le\nsolicitamos, se imprimir\u00e1 usando una tipograf\u00eda por defecto.</p>\n", 
    "url": "/dibujado_avanzado_con_superficies/", 
    "language": "en", 
    "title": "Dibujado avanzado con Superficies"
}