¿Qué software debo usar para crear gráficos de juegos nítidos para juegos de iOS?

Yo uso Illustrator para eso. Si la plataforma que va a utilizar es compatible con SVG, hágalo. De lo contrario, aquí hay algunas ideas sobre cómo crear elementos de interfaz de usuario de trama nítidos usando AI (JPG, PNG, etc.). Eso sí, soy un selector de píxeles y un poco obsesivo.

• Asegúrese de crear un documento que sea RGB para comenzar (a diferencia de CMYK) para que pueda ver los colores de la misma manera que se verán cuando exporte los archivos compatibles con la web.

• Asegúrese de estar familiarizado con la forma en que funciona "Alinear con cuadrícula de píxeles". Si esta opción está activa para una forma, todos sus controladores se ajustarán a la cuadrícula de píxeles (es decir, a un píxel exacto, no a uno fraccionario). Esto podría crear artefactos desconcertantes (o deseados). Si está inactivo, tiene la libertad de colocar la forma en píxeles fraccionarios y hacer que sus dimensiones también sean fraccionarias. Prefiero esta opción desactivada por defecto teniendo la libertad de activarla cuando la necesite.

  • Para activar/desactivar la opción al crear un documento, asegúrese de que esté activada/desactivada en la parte inferior de la sección Avanzar en la ventana Nuevo documento. Tenga en cuenta que los perfiles web predeterminados, que se recomiendan para imágenes RGB, tienen esto marcado de forma predeterminada.

  • Para activarlo/desactivarlo para una forma específica, seleccione la forma, abra la ventana Transformar (expanda las opciones si es necesario) y márquelo o no en la parte inferior.

  • Para cambiar el valor predeterminado de un documento que ya se ha creado, haga clic en la esquina de la ventana Transformar para expandir el menú de opciones y marque/desmarque Align new objects to pixel grid. La nueva opción predeterminada se aplicará a los objetos futuros. Los objetos que ya existen en el documento mantendrán su configuración.

• Tenga en cuenta que las coordenadas pueden ser relativas a cualquiera de las esquinas o al centro de las formas (origen). Use esto a su favor, pero recuerde (o verifique dos veces) lo que selecciona si el ancho o la altura de su forma es impar. En este caso, si selecciona uno de los 4 centros, puede terminar colocando las formas en píxeles fraccionarios (0,5 traslaciones). Para cambiar el origen de las coordenadas de una forma, use la esquina superior izquierda de la ventana Transformar

  

• Tenga en cuenta cómo los píxeles fraccionarios afectarán su resultado. Los píxeles fraccionarios serán suavizados (representados como colores más claros) cuando se guarden para la web, creando la ilusión de ser fraccionarios. Por ejemplo, una línea negra de 1 px de ancho se representará como una serie de píxeles negros. Pero si hace que su ancho sea de 0,5 px, se representará como una serie de píxeles grises más claros que crean la ilusión de una línea más delgada. Lo mismo sucederá con las formas que no estén alineadas en un píxel exacto. Mire estos dos cuadrados, uno alineado con la codicia de píxeles y el otro movido 0.5 hacia la izquierda y hacia abajo. Esta imagen está ampliada.

  

• No tengas miedo de los píxeles fraccionarios. Las formas angulares, como los rectángulos, se ven mejor cuando están alineadas con la cuadrícula de píxeles. Por otro lado, encuentro que los círculos se ven mejor cuando se desplazan 0.5 tanto en X como en Y.

• Ahora que conoces el truco, úsalo a tu favor. Hacer que una línea de 1 px tenga un color más claro hará que se vea más delgada en el resultado final, incluso si no usa píxeles fraccionarios.

• Active la vista previa de píxeles (todo el tiempo o con frecuencia) ( View->Pixel Previewo Alt++ Ctr) Ypara que pueda ver cómo se verán los gráficos cuando los guarde y evitar sorpresas tardías. Los gráficos siguen siendo vectoriales, por lo que podrá estirarlos y reducirlos sin perder resolución, pero se ven de la forma en que se representarán en las dimensiones de píxeles específicas. Esto es particularmente útil para las formas que no están alineadas con la cuadrícula de píxeles o con dimensiones fraccionarias de píxeles. Echa un vistazo a esta imagen, ampliada.

• Asegúrese de que las mesas de trabajo estén alineadas con la cuadrícula de píxeles para evitar artefactos adicionales durante la vista previa de píxeles y sorpresas al guardar. Abra la ventana de la mesa de trabajo, haga doble clic en el icono a la derecha del nombre de la mesa de trabajo y asegúrese de que una de las esquinas y las dimensiones de la mesa de trabajo sean píxeles exactos.

• Asegúrese de estar familiarizado con las 3 formas en que puede alinear el trazo de una forma cerrada. Se puede alinear con el exterior de la forma, el interior de la forma o la mitad del trazo. De forma predeterminada, se alinean a la mitad del trazo. Por ejemplo, si tiene un cuadrado que está perfectamente alineado con la cuadrícula de píxeles y le agrega un trazo con ancho = 1 px, el trazo se alineará de forma predeterminada en el medio del trazo. Dado que el trazo tiene solo 1 px de ancho, terminará luciendo desplazado 0.5 píxeles tanto en la X como en la Y, agregando un trazo borroso alrededor de la forma cuando finalmente se renderice. Esto podría no ser lo que desea en algunos casos.

• Tenga en cuenta que las líneas verticales tienen un ancho impar (por ejemplo, 1 px), para que se alineen con la cuadrícula de píxeles (renderizadas sin suavizado) deben desplazarse 0,5 hacia la izquierda o hacia la derecha. Algo similar sucede con las líneas horizontales: deben desplazarse 0,5 hacia arriba o hacia abajo. Para ver esto en acción, seleccione una línea y seleccione "Alinear con la cuadrícula de píxeles" en la ventana Transformar. Luego fíjate en lo que sucede con sus coordenadas.

  • Para cambiar la alineación del trazo, abra la ventana Trazo, muestre las opciones si están ocultas y seleccione la opción deseada además de "Alinear trazo".

• Al guardar el arte final, tenga en cuenta las opciones "Arte optimizado" y "Tipo optimizado" en el cuadro de diálogo "Guardar para Web". Ajustarán un poco más el renderizado final dando preferencia a la opción que hayas seleccionado. En algunos casos he tenido que guardar dos opciones de la imagen (una optimizada para arte y otra optimizada para tipo) y luego componer una final usando Photoshop para lograr la imagen óptima.

• Solo tengo Retina cuando creo sitios web, no aplicaciones reales. Al menos para la web, dado que la retina tiene una densidad de píxeles más alta que la mayoría de las pantallas, siempre me aseguro de guardar las imágenes el doble del tamaño que necesitaré. Sin embargo, cuando especifico el tamaño en la página web, especifico el tamaño real, no el doble. Entonces, si necesito un ícono de 30px x 30px, me aseguro de guardarlo en 60px x 60px, pero cuando lo coloco en mi página web, indico que es de 30px x 30px. Buen truco, puede cambiar las dimensiones de la imagen final justo antes de guardarla, en la ventana Guardar para Web. Al ser imágenes vectoriales, se adaptarán perfectamente a la nueva dimensión. También puede ingresar un porcentaje, así que en mi flujo de trabajo ingreso 200% antes de guardar.

Si desea imágenes estáticas, Illustrator o Photoshop harán el trabajo. Si desea animaciones interactivas, entonces Flash o Edge Animate tienen esa capacidad.

Como mencioné en mi respuesta a la otra pregunta relacionada , debe obtener una suscripción a Adobe Creative Cloud para poder experimentar con todo el software de Adobe mencionado.

Una de las formas más fáciles de manejar pantallas de densidad múltiple (es decir, Retina) es usar formatos de archivo independientes de la resolución.

Para el desarrollo de iOS, SVG ideal. Un archivo SVG es un archivo vectorial, por lo que no importa el tamaño que lo escale o la densidad de píxeles de la pantalla, siempre tendrá la imagen 'más nítida' posible.

Esto también le ahorra la molestia de tener que crear varios conjuntos de imágenes para pantallas Retina y no Retina.

En cuanto a la animación, realmente necesita averiguar cuáles son las necesidades de la plataforma de desarrollo que está utilizando. Algunos querrán que importes imágenes individuales como marcos para la animación. A veces querrán hojas de sprites. A veces, la aplicación hará la interpolación por usted. Todo depende.