Для любой игры графика – едва ли не самое главное. И при разработке игры вы должны быть уверены, что и на iPhone, и на iPad она будет выглядеть шикарно. Кстати, один из секретов популярности Angry Birds – это именно изумительная графика.
Как подготовить графику для игры?
- Нарисовать самому. Это зависит от ваших художественных способностей и потребностей игры.
- Купить. Сайтов со стоковыми иллюстрациями и фотографиями, таких как www.istockphoto.com и www.shutterstock.com, очень много. Этот вариант будет проще, дешевле и быстрее, чем нанимать художника и рисовать с нуля. Кроме того, на стоках действительно много хороших материалов, которые при небольшой доработке становятся уникальными.
- Заплатить художнику. Это максимально затратный и долгий способ. Важно сразу оговорить, что вам нужны оригинальные файлы, чтобы в дальнейшем их можно было редактировать, так как мелкие изменения (корректирование прозрачности, изменение формата или размеров) обычно проще вносить самостоятельно. Если у вас дедлайн, обязательно сообщите об этом дизайнеру и убедитесь, что он пунктуален. Проработка дизайна включает много мелочей, и если у вас почасовая оплата, то работа обойдется в приличную сумму.
- Провести художественный конкурс. Вариант хорош для логотипов и ярлыков. Обязательно составьте подробное описание требований к рисунку. Процесс интересный, а результат часто очень хорош.
- Сотрудничество со студентами графического дизайна из местного учебного заведения. Вы сэкономите бюджет и, вполне вероятно, получите хороший дизайн, а студент попробует свои силы в настоящем проекте, получит реальную работу в портфолио и оплату.
В любом случае лучше предварительно определиться с концепцией и базовым дизайном, а уже на него накладывать детали. Мы рассмотрим первый способ создания дизайна – своими силами.
Введение
Сегодня существует множество графических инструментов – платных (Illustrator, Fireworks, Photoshop) или в свободном доступе (Gimp, Inkscape). В целом функции и концепции у большинства графических редакторов идентичны, но большинство дизайнеров работают именно с продуктами Adobe, и даже если вы не будете создавать дизайн сами, то всегда сможете поправить файл, заказанный у дизайнера, в том же формате.
Одна из лучших программ – Adobe Fireworks. У нее простой интерфейс и много функций из Adobe Photoshop и Adobe Illustrator. Чтобы протестировать программу, бесплатно скачайте с сайта Adobe полнофункциональную пробную версию.
Растровая и векторная
Adobe Fireworks поддерживает редактирование и растровых, и векторных форматов. Разница между ними в том, что растровая графика представляет сетку из пикселов, каждый из которых имеет уникальный цвет. Вектор – это математическое тождество для описания фигуры (контура), поэтому при масштабировании фигуры качество (разрешение) не страдает. Это заметно, если взять два одинаковых рисунка в разных форматах и масштабировать их. Кроме того, векторные файлы проще редактировать.
Экран iPhone — это по сути прямоугольная сетка пикселов, поэтому в iOS-приложениях используют только растровые изображения. Но хранить рисунок лучше в векторном формате – так его легко масштабировать, экспортировать и редактировать, а при необходимости преобразовать в растровый формат, а вот наоборот сделать сложнее.
Появление Retina-дисплеев еще раз доказало, что исходники изображений должны быть векторными. Технологии идут дальше, и чтобы не перерисовывать игру каждый раз под новый дисплей и разрешение, храните все в векторе.
И кстати, это одна из причин, почему стоит использовать векторные графические редакторы — Adobe Illustrator или Fireworks. Если вам понадобятся реальные фотографии, сразу создавайте или покупайте файлы намного большего размера, чем вам нужно – уменьшить растровые изображения всегда проще, чем увеличить.
Форматы изображений
У каждого графического формата есть свои особенности. Сравним два наиболее популярных.
JPEG | PNG |
---|---|
Работа с фотографиями | Работа с иллюстрациями и спрайтами |
Не поддерживает прозрачность | Поддерживает прозрачность, позволяет не отрисовывать некоторые фрагменты растровых изображений |
Меньше объем файла | Больше объем файла |
Формат с потерей качества | Формат без потери качества |
Хорош для уменьшения размера фотографий, изображений с жестко заданным предельным размером | Подходит для любых размеров изображения |
И все же самый используемый формат на платформе iOS – это PNG. Кроме того, сама платформа ускоряет обработку этих файлов, и следовательно, они быстрее отрисовываются.
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 автоматически, без вашего участия, и не требует дополнительного кода.