{"id":471,"date":"2015-09-01T18:37:51","date_gmt":"2015-09-01T17:37:51","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=471"},"modified":"2016-12-30T01:31:23","modified_gmt":"2016-12-30T00:31:23","slug":"como-suavizar-texturas-cuando-se-redimensionan-en-libgdx-filtros-i","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/tratamiento-imagenes\/como-suavizar-texturas-cuando-se-redimensionan-en-libgdx-filtros-i\/","title":{"rendered":"C\u00f3mo suavizar texturas cuando se redimensionan en LibGDX (filtros I)"},"content":{"rendered":"<p style=\"text-align: justify;\">Cuando trabajamos con LibGDX, normalmente usaremos un tama\u00f1o de pantalla \u00abvirtual\u00bb (ya sea mediante el uso de <a href=\"https:\/\/github.com\/libgdx\/libgdx\/wiki\/Viewports\" target=\"_blank\">Viewports<\/a> o con matrices de transformaci\u00f3n) con unas dimensiones determinadas, y todas nuestras texturas\u00a0\/\u00a0im\u00e1genes\u00a0tendr\u00e1n un tama\u00f1o en relaci\u00f3n a estas dimensiones.<\/p>\n<p style=\"text-align: justify;\">Si el tama\u00f1o del viewport coincide con el tama\u00f1o de la pantalla donde se ejecuta nuestro juego, las im\u00e1genes se muestran tal y como las hemos creado. Pero si el tama\u00f1o real de la pantalla no coincide con las dimensiones del Viewport, \u00e9ste ser\u00e1 escalado para coincidir con el ancho y el alto real de la pantalla (el escalado depende del tipo de viewport que usemos). Cuando ocurre esto, OpenGL\u00a0utiliza filtros de escalado, que b\u00e1sicamente determinan el algoritmo utilizado para escalar la imagen.<\/p>\n<h1 style=\"text-align: justify;\">Filtros de escalado<\/h1>\n<p style=\"text-align: justify;\">Se dar\u00e1 una explicaci\u00f3n m\u00e1s detallada del uso de filtros m\u00e1s adelante (en otro art\u00edculo). En esta ocasi\u00f3n\u00a0nos limitaremos a decir que existen b\u00e1sicamente dos tipos de escalado:<\/p>\n<ul>\n<li style=\"text-align: justify;\"><code>GL_NEAREST<\/code>. Para dibujar\u00a0cada p\u00edxel en pantalla, se utiliza el\u00a0p\u00edxel de la textura (tambi\u00e9n conocido como \u00ab<em>Texel<\/em>\u00ab) que mejor encaja con el\u00a0p\u00edxel que se dibuja en pantalla. Es el filtro utilizado por defecto. Al utilizar directamente un s\u00f3lo p\u00edxel, es un filtro que se aplica r\u00e1pido, y\u00a0el resultado es un escalado \u00abduro\u00bb (bordes m\u00e1s definidos).<\/li>\n<li style=\"text-align: justify;\"><code>GL_LINEAR<\/code>. Para calcular el color de cada p\u00edxel en pantalla, se utiliza una <a href=\"https:\/\/es.wikipedia.org\/wiki\/Interpolaci%C3%B3n_bilineal\" target=\"_blank\">interpolaci\u00f3n bilineal<\/a>\u00a0a partir de los cuatro p\u00edxeles de la textura original m\u00e1s cercanos al p\u00edxel que se quiere dibujar en pantalla. El resultado es un escalado mucho m\u00e1s suave. Si bien hay que tener en cuenta que el coste del procesado tambi\u00e9n es mayor.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">A continuaci\u00f3n, se muestra una imagen a su tama\u00f1o original (izquierda), un escalado con el\u00a0filtro por defecto <code>GL_NEAREST<\/code> (centro) y el mismo escalado aplicando el filtro <code>GL_LINEAR<\/code>\u00a0(derecha):<\/p>\n<div style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-514\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2015\/08\/original.png\" alt=\"original\" width=\"92\" height=\"112\" \/>\u00a0 <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-516\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2015\/08\/GL_NEAREST.png\" alt=\"GL_NEAREST\" width=\"178\" height=\"229\" \/>\u00a0 <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-515\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2015\/08\/GL_LINEAR.png\" alt=\"GL_LINEAR\" width=\"178\" height=\"229\" \/><\/div>\n<h2 style=\"text-align: justify;\">Aplicar filtros en texturas<\/h2>\n<p style=\"text-align: justify;\">Para aplicar un filtro a una determinada textura, basta con llamar al m\u00e9todo <code>setFilter()<\/code>\u00a0de dicha textura:<\/p>\n<pre lang=\"Java\">Texture myTexture = new Texture( Gdx.files.internal(\"texture.png\") );\r\nmyTexture.setFilter(Textue.TextureFilter.Linear, Textue.TextureFilter.Linear);<\/pre>\n<p style=\"text-align: justify;\">Estos filtros tambi\u00e9n se aplican cuando usamos texturas en Actores. Por ejemplo, en este caso cuando se redimensione el actor se aplicar\u00e1 el filtro indicado en la textura:<\/p>\n<pre lang=\"Java\">Texture actorTexture = new Texture( Gdx.files.internal(\"texture.png\") );\r\nactorTexture.setFilter(Textue.TextureFilter.Linear, Textue.TextureFilter.Linear);\r\nImage imageActor = new Image(actorTexture);<\/pre>\n<h2 style=\"text-align: justify;\">Aplicar filtros en atlas de im\u00e1genes<\/h2>\n<p style=\"text-align: justify;\">Si utilizamos atlas de im\u00e1genes, tambi\u00e9n podemos usar filtros. Lo haremos\u00a0indicando el filtro que queremos aplicar en la clave \u00ab<em>filter<\/em>\u00ab:<\/p>\n<pre>filter: Linear,Linear<\/pre>\n<h2 style=\"text-align: justify;\">Aclaraci\u00f3n<\/h2>\n<p style=\"text-align: justify;\">Cuando aplicamos filtros a una textura necesitamos indicar dos filtros. Sin entrar en m\u00e1s detalles (lo haremos m\u00e1s adelante), diremos que el primero de ellos se utiliza cuando la imagen se escala a un tama\u00f1o menor que la textura original, mientras el segundo filtro indicado se utiliza cuando la imagen se escala a un tama\u00f1o mayor que la textura original.<\/p>\n<h1 style=\"text-align: justify;\">Para terminar&#8230;<\/h1>\n<p style=\"text-align: justify;\">Aplicando el filtro <code>GL_LINEAR<\/code>\u00a0conseguimos que el escalado de nuestras texturas sea m\u00e1s suave. Sin embargo, hay ocasiones en las que no buscamos este efecto. Por ejemplo, pensemos un juego con est\u00e9tica pixelada. En esta ocasi\u00f3n, quiz\u00e1s es m\u00e1s interesante hacer el escalado con el filtro por defecto (<code>GL_NEAREST<\/code>)\u00a0para seguir manteniendo los p\u00edxeles perfectamente definidos. Es cuesti\u00f3n de probar distintos resultados\u00a0y decidir si nos conviene usarlos o no.<\/p>\n<p style=\"text-align: justify;\">Saludos,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando trabajamos con LibGDX, normalmente usaremos un tama\u00f1o de pantalla \u00abvirtual\u00bb (ya sea mediante el uso de Viewports o con matrices de transformaci\u00f3n) con unas dimensiones determinadas, y todas nuestras texturas\u00a0\/\u00a0im\u00e1genes\u00a0tendr\u00e1n un tama\u00f1o en relaci\u00f3n a estas dimensiones. Si el <a class=\"more-link\" href=\"https:\/\/www.pixnbgames.com\/blog\/tratamiento-imagenes\/como-suavizar-texturas-cuando-se-redimensionan-en-libgdx-filtros-i\/\">Seguir leyendo <span class=\"screen-reader-text\">  C\u00f3mo suavizar texturas cuando se redimensionan en LibGDX (filtros I)<\/span><span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[14,11],"tags":[15],"language":[5],"_links":{"self":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/471"}],"collection":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/comments?post=471"}],"version-history":[{"count":30,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/471\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/471\/revisions\/560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media\/515"}],"wp:attachment":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media?parent=471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=471"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}