Blog de Metlivi

Cómo mantener una escala coherente entre los sprites del supramundo y los de batalla

Para que un personaje aparente tener el mismo tamaño en las escenas del supramundo y en las de batalla, compare la altura del diseño tal como se renderiza en pantalla, no solo las dimensiones de la imagen de origen. Elija un objetivo compartido de altura en píxeles para el personaje, establezca una escala del mundo y una densidad de píxeles coherentes y, a continuación, compare ambas escenas con la misma escala de cámara. Alinee los pies del personaje con una línea de base común y compruebe el resultado en los tamaños de pantalla previstos para el juego. Si alguna de las escenas utiliza deliberadamente una cámara o composición diferente, documente esa excepción en lugar de cambiar la escala del sprite sin dejar constancia.

15 de octubre de 2026Lectura de 8 minPor Metlivi Editorial Team
Sección 1

Decida qué significa «misma escala» para su juego

Comience por definir un objetivo cuantificable. Por ejemplo, podría decidir que el personaje ocupe 32 píxeles de pantalla desde la planta del pie hasta la parte superior de la cabeza en ambas escenas dentro de la vista de cámara de referencia. Se trata de un objetivo ilustrativo, no de un tamaño universal recomendado: elija uno que se adapte a la resolución de su juego y al nivel de detalle de su arte.

Mida el personaje visible, no un rectángulo de imagen transparente. El sprite del supramundo puede incluir una sombra, un arma, una antena o márgenes vacíos, mientras que el sprite de batalla puede tener una pose diferente. Decida si su objetivo medirá la silueta del cuerpo de la cabeza a los pies o la totalidad del arte visible, y aplique esa misma regla en ambos casos. Mantenga una pequeña hoja de referencia con la altura objetivo, la resolución de referencia, la línea de suelo prevista y cualquier diferencia intencionada específica de la escena.

Esta definición es fundamental porque un lienzo de origen más grande no significa automáticamente que el personaje se verá más grande en pantalla. Las dimensiones del lienzo describen el área de la imagen; los ajustes de importación del motor, la escala del objeto y la cámara determinan cuántos píxeles de pantalla ocupa esa área. Aseprite distingue entre cambiar el tamaño del lienzo y cambiar el tamaño del contenido del sprite, así que compruebe qué operación necesita antes de modificar el diseño.Aseprite: Sprite Size

Sección 2

Compare el arte real dentro de cada lienzo

Abra las imágenes del supramundo y de batalla a su escala de píxeles nativa y cuente los píxeles según la medida elegida. Registre la altura visible del personaje y la distancia entre los pies y el borde del lienzo. Si el personaje de batalla mide 48 píxeles visibles de alto y el del supramundo mide 32, las proporciones de su arte difieren en 1,5:1 antes de que el motor aplique cualquier escalado de escena.

Cuando las proporciones son idénticas en los demás aspectos, un cálculo inicial sencillo es: altura renderizada deseada ÷ altura renderizada actual = factor de ajuste. Si un sprite se renderiza actualmente con una altura de 24 píxeles y debería renderizarse a 32, el factor es 32 ÷ 24 = 1,33. Utilice eso como una estimación diagnóstica y, a continuación, inspeccione el arte y la configuración de la escena. Se trata de un cálculo ilustrativo; asume que no hay diferencias de cámara, recorte o transformación.

No cambie el tamaño simplemente para que los archivos de imagen coincidan en anchura y altura. Una pose puede ser más ancha, o una animación de batalla puede incluir un brazo levantado. Conserve la forma deseada y compare los mismos puntos de referencia anatómicos. Si los sprites presentan una anatomía o una perspectiva visiblemente diferentes, hacer coincidir la altura en píxeles podría no hacer que se sientan idénticos; ajuste el diseño o acuerde una excepción específica para la escena.

Sección 3

Establezca una densidad de píxeles y una escala del mundo compartidas

En Unity, configure los sprites del supramundo y de batalla con el mismo valor de Pixels Per Unit (PPU) y haga coincidir el ajuste Asset Pixels Per Unit de la Pixel Perfect Camera con ese valor. Unity define PPU como el número de píxeles que componen una unidad de escena, y su guía sobre Pixel Perfect Camera recomienda utilizar un valor compartido entre los sprites de la escena.Unity: 2D Pixel Perfect Por ejemplo, si el proyecto utiliza 16 píxeles por unidad, un sprite de 32 píxeles de alto ocupará 2 unidades del mundo antes del escalado del objeto.

Compruebe también la escala de la transformación de cada objeto de personaje. Hacer coincidir las PPU no compensará que un objeto de la escena esté escalado a 0,8 y otro a 1,0. Dé preferencia a unos ajustes de importación y transformación coherentes, y ajuste el arte o aplique una escala específica de la escena claramente documentada solo cuando la composición lo requiera.

En otro motor, localice los controles equivalentes: cuántos píxeles de origen se asignan a una unidad del mundo, la escala del nodo u objeto y la vista o el zoom de la cámara. La ruta de renderizado 2D de Godot incluye transformaciones de lienzo y de viewport, incluida una transformación de estiramiento utilizada al redimensionar la pantalla; por lo tanto, las dimensiones de una imagen de origen por sí solas no pueden determinar su tamaño final en pantalla.Godot: Viewport and canvas transforms

Sección 4

Alinee los pies con un pivote definido conscientemente

Un personaje puede tener la altura correcta y seguir viéndose a una escala inconsistente si flota, se hunde o cambia de posición entre escenas. Sitúe el pivote en un punto de anclaje significativo, normalmente el punto de contacto con el suelo entre los pies, y luego alinee ese anclaje con la misma línea de suelo en ambas escenas. En el caso de los sprites cuyos pies se mueven durante una animación, ancle la raíz o el pivote de forma coherente y compruebe los fotogramas de contacto.

Evite asumir que el centro de cada imagen es un buen punto de anclaje. Los lienzos pueden tener diferentes cantidades de margen transparente y un pivote centrado puede situar el arte en una posición vertical diferente. El flujo de trabajo pixel-perfect de Unity admite pivotes personalizados medidos en píxeles y recomienda definir pivotes para cada sprite individual en una textura de múltiples sprites.Unity: 2D Pixel Perfect En Godot, Sprite2D está centrado por defecto; su documentación indica que el pixel art centrado puede verse deformado al posicionarse entre píxeles y describe la desactivación del centrado o la activación del ajuste a píxeles como opciones posibles.Godot: Sprite2D

Sección 5

Compruebe el filtrado, el ajuste a la cuadrícula y la escala de la cámara

Utilice el filtrado nearest o point para obtener un pixel art nítido y confirme que la compresión de texturas no esté alterando su aspecto. La guía de Unity recomienda específicamente el filtrado Point y ninguna compresión para los sprites utilizados con su Pixel Perfect Camera.Unity: 2D Pixel Perfect Estos ajustes preservan la claridad de los bordes; no hacen que dos sprites con escalas diferentes tengan el mismo tamaño.

A continuación, compare las escenas con sus cámaras configuradas en la misma vista de referencia o mediante una cámara de prueba compartida temporal. Una escena de batalla a menudo aplica zoom para dar dramatismo o énfasis. Si el zoom de la cámara se duplica, el personaje puede ocupar el doble de píxeles en pantalla aunque la escala del sprite en el mundo no haya cambiado. Decida si el requisito es un mismo tamaño en el mundo o el mismo protagonismo en pantalla: son objetivos diferentes. Si el encuadre de la batalla amplía deliberadamente al personaje, registre el zoom como una decisión de presentación y no utilice esa vista para juzgar la escala subyacente del sprite.

En el caso del pixel art, inspeccione tanto el movimiento como un fotograma estático. Las posiciones en subpíxeles o un ajuste a la cuadrícula inconsistente pueden hacer que los bordes parpadeen o parezcan irregulares a medida que el personaje se mueve. La Pixel Perfect Camera de Unity ofrece ajuste a la cuadrícula vinculado a las PPU de sus assets; Godot proporciona ajustes de ajuste a píxeles para vértices y transformaciones 2D.Unity: 2D Pixel Perfect Godot: Sprite2D Haga pruebas con los ajustes de cámara reales del proyecto, ya que el comportamiento del ajuste y del escalado depende de la configuración de renderizado.

Sección 6

Realice una rápida comprobación comparativa antes de modificar los assets

Cree una comparación visual lado a lado con la misma pose de personaje si es posible. Realice estas comprobaciones en orden:

  1. Compare la altura visible del cuerpo utilizando los mismos puntos de referencia y la misma regla de recuento de píxeles.
  2. Compare la línea de suelo de los pies y la posición del pivote o la raíz del sprite.
  3. Verifique las PPU o la densidad de importación equivalente, la escala del objeto y cualquier escala de elementos superiores (parents).
  4. Iguale el zoom de la cámara, la resolución de referencia, el escalado del viewport y el tamaño de visualización.
  5. Inspeccione a tamaño nativo y en movimiento para detectar desenfoques, ubicación irregular de píxeles o recortes.
  6. Vuelva a comprobar algunos fotogramas de animación, especialmente las poses más bajas y más altas.

Si las medidas del diseño coinciden pero el personaje sigue percibiéndose más grande en la batalla, investigue el encuadre de la cámara y los objetos circundantes antes de editar el sprite. Si la cámara y las transformaciones coinciden pero la altura de la silueta difiere, ajuste el arte o una escala controlada específica para la escena. Si los pies se desplazan pero la altura coincide, corrija el pivote, el relleno (padding) o el punto de anclaje. Este orden ayuda a aislar la causa en lugar de compensar un error con otro.

Sección 7

Mantenga una pequeña referencia de escala para futuros sprites

Registre la altura objetivo compartida, las PPU o equivalente, la resolución de referencia, la convención de pivotes y los ajustes de cámara previstos junto con los assets de los sprites. Las herramientas de lienzo de Aseprite pueden recortar los bordes transparentes, pero esto modifica los límites del lienzo; por tanto, compruebe que los pivotes, los cortes (slices) o los anclajes del motor sigan alineados después.Aseprite: Canvas Size Considere el recorte de bordes como una modificación de los assets que requiere una rápida verificación de la escena.

El estándar fiable es un personaje que coincida con la altura visible objetivo acordada, comparta un anclaje al suelo y se renderice de manera coherente bajo los ajustes previstos de cámara y filtrado. Mantenga las diferencias deliberadas de encuadre de la cámara como decisiones explícitas de presentación. Con estas comprobaciones registradas, las poses posteriores del supramundo y las animaciones de batalla se podrán comparar frente a la misma referencia práctica.

Sección 8

Fuentes

Lecturas relacionadas

Sigue explorando este tema