Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Графика для игр на iOS

Для любой игры графика – едва ли не самое главное. И при разработке игры вы должны быть уверены, что и на iPhone, и на iPad она будет выглядеть шикарно. Кстати, один из секретов популярности Angry Birds – это именно изумительная графика.

Как подготовить графику для игры?

  1. Нарисовать самому. Это зависит от ваших художественных способностей и потребностей игры.
  2. Купить. Сайтов со стоковыми иллюстрациями и фотографиями, таких как www.istockphoto.com и www.shutterstock.com, очень много. Этот вариант будет проще, дешевле и быстрее, чем нанимать художника и рисовать с нуля. Кроме того, на стоках действительно много хороших материалов, которые при небольшой доработке становятся уникальными.
  3. Заплатить художнику. Это максимально затратный и долгий способ. Важно сразу оговорить, что вам нужны оригинальные файлы, чтобы в дальнейшем их можно было редактировать, так как мелкие изменения (корректирование прозрачности, изменение формата или размеров) обычно проще вносить самостоятельно. Если у вас дедлайн, обязательно сообщите об этом дизайнеру и убедитесь, что он пунктуален. Проработка дизайна включает много мелочей, и если у вас почасовая оплата, то работа обойдется в приличную сумму.
  4. Провести художественный конкурс. Вариант хорош для логотипов и ярлыков. Обязательно составьте подробное описание требований к рисунку. Процесс интересный, а результат часто очень хорош.
  5. Сотрудничество со студентами графического дизайна из местного учебного заведения. Вы сэкономите бюджет и, вполне вероятно, получите хороший дизайн, а студент попробует свои силы в настоящем проекте, получит реальную работу в портфолио и оплату.

В любом случае лучше предварительно определиться с концепцией и базовым дизайном, а уже на него накладывать детали. Мы рассмотрим первый способ создания дизайна – своими силами.

Графика для игр на iOS
Графика для игр на iOS

Введение

Сегодня существует множество графических инструментов – платных (Illustrator, Fireworks, Photoshop) или в свободном доступе (Gimp, Inkscape). В целом функции и концепции у большинства графических редакторов идентичны, но большинство дизайнеров работают именно с продуктами Adobe, и даже если вы не будете создавать дизайн сами, то всегда сможете поправить файл, заказанный у дизайнера, в том же формате.

Одна из лучших программ – Adobe Fireworks. У нее простой интерфейс и много функций из Adobe Photoshop и Adobe Illustrator. Чтобы протестировать программу, бесплатно скачайте с сайта Adobe полнофункциональную пробную версию.

Растровая и векторная

Adobe Fireworks поддерживает редактирование и растровых, и векторных форматов. Разница между ними в том, что растровая графика представляет сетку из пикселов, каждый из которых имеет уникальный цвет. Вектор – это математическое тождество для описания фигуры (контура), поэтому при масштабировании фигуры качество (разрешение) не страдает. Это заметно, если взять два одинаковых рисунка в разных форматах и масштабировать их. Кроме того, векторные файлы проще редактировать.

Графика для игр на iOS

Экран iPhone — это по сути прямоугольная сетка пикселов, поэтому в iOS-приложениях используют только растровые изображения. Но хранить рисунок лучше в векторном формате – так его легко масштабировать, экспортировать и редактировать, а при необходимости преобразовать в растровый формат, а вот наоборот сделать сложнее.

Появление Retina-дисплеев еще раз доказало, что исходники изображений должны быть векторными. Технологии идут дальше, и чтобы не перерисовывать игру каждый раз под новый дисплей и разрешение, храните все в векторе.

И кстати, это одна из причин, почему стоит использовать векторные графические редакторы — Adobe Illustrator или Fireworks. Если вам понадобятся реальные фотографии, сразу создавайте или покупайте файлы намного большего размера, чем вам нужно – уменьшить растровые изображения всегда проще, чем увеличить.

Форматы изображений

У каждого графического формата есть свои особенности. Сравним два наиболее популярных.

JPEG PNG
Работа с фотографиями Работа с иллюстрациями и спрайтами
Не поддерживает прозрачность Поддерживает прозрачность, позволяет не отрисовывать некоторые фрагменты растровых изображений
Меньше объем файла Больше объем файла
Формат с потерей качества Формат без потери качества
Хорош для уменьшения размера фотографий, изображений с жестко заданным предельным размером Подходит для любых размеров изображения

И все же самый используемый формат на платформе iOS – это PNG. Кроме того, сама платформа ускоряет обработку этих файлов, и следовательно, они быстрее отрисовываются.

Графика для игр на iOS

Retina-дисплей

В июне 2010 года Apple выпустил iPhone 4 с ультрасовременной дисплейной технологией. Размер экрана остался 3,5 дюйма, но на нем разместили в 4 раза больше пикселов. 960×640 пикселов с разрешением 326 ppi вместо 320×480 пикселов с разрешением 163 ppi.

Эту технологию назвали Retina Display (retina – сетчатка), так как при таком высоком разрешении человеческий глаз не различает отдельные пикселы. Правда это или нет, но дисплей выглядит действительно шикарно.

Устройство Книжная ориентация, пикселы Альбомная ориентация, пикселы Пикселов на дюйм (ppi)
iPhone 4, iPhone 4S и iPod touch четвертого поколения 640 × 960 960 × 640 326
iPad и iPad 2 768 × 1024 1024 × 768 132
Старые модели iPhone и iPod touch 320 × 480 320 × 480 163

Когда iPhone 4 вышел на рынок, в App Store уже было около 200 тысяч приложений, которые нужно было адаптировать под новый дисплей. Apple нашел простое и гениальное решение. Разработчики, которые хотели обеспечить поддержку программы на Retina-дисплее, обновляли ее. Для остальных приложений iOS просто масштабировал графику, увеличивая ее в 2 раза, то есть удваивал число пикселов на экране. Так, программа заполняла весь экран без ущерба для качества и технических качеств.

Для этого Apple просто изменили размерность экрана с 320×480 пикселов на 320×480 точек. На старых устройствах одной точке соответствует один пиксел, а на дисплеях с высоким разрешением – двум пикселам. Одинаковые параметры обеспечивают совместимость между всеми приложениями в App Store.

Как использовать преимущества, которые дает дисплей высокой четкости? Apple предложил добавлять к программе дополнительное изображение (в два раза больше исходного), которое используется при работе приложения на Retina Display. Например, если у вас есть элемент размером 50×50, нужно добавить в программу такое же изображение с разрешением 100×100, а для полноэкранного изображения 320×480 добавляем 640×960. Чтобы проверять наличие изображений с высоким разрешением, платформа была модифицирована. Для этого используйте простое соглашение об именах файлов.

Изображение Формат
Со стандартным разрешением <ImageName><device_modifier>. <filename_extension>
С высоким разрешением <ImageName>@2x<device_modifier>. <filename_extension>

<ImageName> и <filename_extension> — это обычные элементы для называния файлов изображений. Фрагмент <device_modifier> опционален и может содержать запись ~ipad или ~iphone. Так можно подготовить разные версии одного изображения для iPhone и iPad — это особенно важно при создании универсального приложения для разных устройств. Включая модификатор @2x, мы указываем изображение с разрешением в 2 раза больше стандартного.

Например, вы загрузили изображение с размером 320×480 и Title@2x.png размером 640×960 с разрешением в два раза выше. При загрузке на устройство с обычным разрешением будет использован стандартный файл Title.png. Для устройств с Retina-дисплеем проводится проверка на наличие файла Title@2x.png и загрузка именно его. Если такого изображения нет, то оригинальный файл увеличивается путем масштабирования. Все это происходят в iOS автоматически, без вашего участия, и не требует дополнительного кода.