Размеры приложений на андроид – Какой размер брать для дизайна мобильных приложений? — Хабр Q&A
Полезные советы новичкам в дизайне под Android / Habr
Этот пост послужит своеобразным началом серии публикаций на тему «как я учусь дизайну под Android». Никогда не уделял гайдлайнам достаточно внимания, считая их скучными и неинтересными, но все изменилось. Сейчас я начинаю понимать, платформа достигла своей зрелости и предлагает ряд интересных решений.Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту.
Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).
Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.
От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.
Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.
В Android есть своеобразный способ масштабирования графических ресурсов, который не похож на CSS. 9-slicing позволяет вам указать, какую именно часть картинки вы хотите масштабировать. Остальная часть, такая как закругленные углы, остается фиксированного размера даже при масштабировании всего ресурса. Для этого в файле картинки необходимо нарисовать черные линии шириной в 1px в следующих областях:
- Top: область, которая может быть растянута по горизонтали.
- Left: аналогично по вертикали
- Right: Область по вертикали, в которой будет расположено содержимое. Этот параметр может использоваться для задания отступов.
- Bottom: аналогично по вертикали
В отличие от iPhone, где название обычно находится в середине заголовка, на Android название в левом верхнем углу, рядом с логотипом приложения. Нажатие на логотип обычно вызывает боковое меню или возвращает вас “назад”, к предыдущему экрану.
Под названием приложения порой можно заметить треугольную стрелочку, благодаря ей возможна навигации внутри приложения. Прямо как в сети интернет, очень частый способ отображения выпадающего меню на Android.
Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.
Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах.
Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS.
Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве. Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.
habr.com
Дизайн для Android: Основы
Статья проплачена кошками — всемирно известными производителями котят.
Если статья вам понравилась, то можете поддержать проект.
На данный момент Android поддерживает следующие параметры: ldpi, mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi.
Базовой является плотность mdpi, когда 1px = 1dp. Остальные являются множителями:
- ldpi (0.75x)
- mdpi (1x)
- hdpi (1.5x)
- xhdpi (2.0x)
- xxhdpi (3.0x)
- xxxhdpi (4.0x)
Как уже я сказал, MDPI является базовой точкой отсчёта и соответствует размеру экрана 320х480 пикселей. Для HDPI — 480×720, XHDPI — 640×960.
Размер устройства в DP вычисляется по формуле: разрешение экрана делим на множитель, указанный выше.
Например, устройство с разрешением экрана 240х320px соответствуют 320х426.66dp (240 / 0.75 = 320; 320 / 0.75 = 426.66).
Соответственно, устройство с экраном 1080х1920 (Samsung S5) соответствует типу XXHDPI — 360x640dp (1080 / 3 = 360; 1920 / 3 = 640dp)
Дизайнер должен подготовить ресурсы для всех основных типов экрана и разместить их в соответствующих папках, а система сама выберет нужный ресурс из нужной папки.
Что будет, если подготовить одну картинку? Есть два варианта. Допустим, вы приготовили картинку для базового размера во весь экран. На современных телефонах картинка растянется в 3-4 раза и будет размыта. Хорошо, пойдём от обратного и подготовим картинку для самого большого экрана. Тут нас может ожидать другая неприятность — нехватка памяти. Большая картинка может занимать размер от 2Мб и выше. Маленькие экраны физически не смогут показать такое изображение, но будут при этом потреблять в 3-4 раза больше памяти, которой может не хватить для приложения.
Также следует учитывать, что размеры экрана у разных устройств увеличиваются/уменьшаются непропорционально по ширине и высоте. Поэтому дизайн экрана приложения должен быть достаточно гибким.
Обычно создаётся дизайн сверху вниз. Вначале наибольший размер, который будет поддерживаться приложением, а потом постепенно уменьшают все ресурсы для других разрешений.
Для фона экрана приложения используются следующие типы ресурсов:
- Color
- Gradient
- 9-patch Drawable
- Повторяющие фрагменты
- Картинка на весь экран
Выше объяснялось, почему не стоит использовать последний вариант. Если ли приходится работать с этим вариантом, то используйте следующую технику. Допустим, дизайнером была подготовлена очень большая картинка на весь экран в альбомном режиме. На телефоне можно применить кадрирование и показать только центральную часть.
У компонента ImageView есть атрибут scaleType с значением CENTER_CROP.
Также можно поместить изображение в центр и добавить цветную или градиентную рамку вокруг него.
Используйте в этом случае scaleType = CENTER_INSIDE.
Если фон однородный и его можно растянуть без ущерба качеству, то воспользуйтесь scaleType = FIT_XY.
Использованные материалы
Tips for designers: from a developer for Android | Vinsol
Реклама
developer.alexanderklimov.ru
почему мы работаем в @1x / Rambler Group corporate blog / Habr
В одной из предыдущих статей наши коллеги описали требования по передаче проекта от дизайнеров разработчикам мобильных приложений. Эти требования мы, как отдел дизайна в Rambler Digital Solutions, должны соблюдать.
В этот раз хотелось бы рассказать о некотором нюансе разработки дизайна приложений, который облегчает нам жизнь — о разрешении дизайн-макетов и о плюсах и минусах выбора того или иного исходного разрешения.
Чем мы пользуемся
Sketch и плагины:
Adobe Photoshop и скрипт Size Marks от Романа Шамина.
Заметим, что Photoshop для дизайна мобильных приложений используем все реже и реже — в работе мы активно внедряем Sketch и продвигаем его среди разработчиков, дабы они могли в случае трудностей сами посмотреть нужный размер или ресурс в исходнике, не отвлекая дизайнера от важных дизайнерских дел.
Несмотря на то, что описанное ниже сильно «завязано» на Sketch, приемы возможно применять и в Photoshop, хотя это несколько сложнее.
О разрешениях макетов
Итак, как мы знаем, iOS имеет на данный момент следующие разрешения ресурсных изображений: @1x, @2x и @3x; а Android: mdpi(1x), hdpi(1,5x), xhdpi(2x), xxhdpi(3x), xxxhdpi(4x) — это основные, ldpi и tvdpi в рассчёт брать не будем.
Как известно из гайдлайнов, 1x и mdpi являются базовыми разрешениями на устройстве с соотношением пикселя к поинту 1 к 1. Подробнее об этом почитать можно тут.
Если рассматривать форм-фактор телефонов, то для простоты вычислений размеров, а так же последующей подготовки спецификации, проще взять следующие разрешения макетов:
iOS
- 320×480 (iPhone 4/4s)
- 320×568 (iPhone 5/5c/5s)
- 375×667 (iPhone 6)
- 414×736 (iPhone 6 Plus).
У Android это 360×640 (конечно же есть и меньшие разрешения, и чуть большие, но следуя гайдлайнам это будет эталонным для Android L). Планшеты сейчас рассматривать не будем, но будем помнить о них.
За основные разрешения мы выбираем 320×568 для iOS ( @1x) и 360×640 для Android (mdpi), так как девайсов с этими форм-факторами сейчас наибольшее количество.
Так почему же именно @1x и mdpi?
Проектирование и отрисовка
На этапах проектирования и дизайна выбранные нами @1x и mdpi дают возможность быстро «накидать» прототип из стандартных элементов Sketch и не думать о чётности размеров элементов и отступов, так как все они будут только увеличиваться в случае нашего желания посмотреть большие разрешения.
Кроме того, это никак не мешает нам смотреть макеты на устройствах с помощью плагина Sketсh Preview (работает в связке с приложением Skala и Skala Preview), у плагина есть настройки, которые дают возможность увеличивать макет до нужного для просмотра разрешения, причем как на iOS устройствах, так и на Android.
Настройки плагина Sketch Preview
Главным требованием является кратность разрешения у устройства к разрешению исходника, например, наш исходник iOS 320×568, нормально смотреть его можно только на iPhone 5/5s/5c, а исходник Android 360×640 мы смотрим на Nexus 5 c разрешением в 3 раза больше 1080×1920 (xxhdpi).
Единственным, для кого-то существенным, минусом является желание видеть однопиксельные разделители на высоких разрешениях. Это значит, что если мы хотим увидеть на экране iPhone 5 линию толщиной в 1px, то в макете она должна быть 0,5px. Так как создавать в макете 0,5px линии не круто, решение этой проблемы может быть иным: создаём 2px прозрачную линию на месте разделителя с внутренней тенью с значением 0,5. Если же это Android макет, то 0,33-0,35 (для просмотра на Nexus 5).
Пример разделителя 0,35 установленного с помощью внутренней тени в Android приложении
Но в большинстве случаев мы просто останавливаемся на разделителях в 1px в макете, а в спецификации для разработчиков прописываем этот момент словами.
Выбранные нами самые малые разрешения позволяют легко экспортировать ресурсы из Sketch с помощью встроенного экспорта для iOS и с помощью плагина Sketch Android Assets для Android, который ещё и по нужным папкам всё раскладывает.
Так как мы выбрали самое малое разрешение, то можем не беспокоиться за «мыло» (искажения и нечёткость) в ресурсах для iOS, изначально мы рисуем все элементы с привязкой к пиксельной сетке (очень редко без) и получаем чёткие иконки в @2x и в @3х. Очевидно преимущество в случае появления в проекте iPad-версии приложения, так как в этом случае проработанные @1x ресурсы нам понадобятся.
Пример нарезки для iOS из @1x(верхняя строка — нормальный размер иконок, нижняя — увеличенный, для детального просмотра)
В случае же с Android, наш выбор mdpi даёт отличный результат в xhdpi/xxhdpi/xxxhdpi и, возможно, «мыло» в hdpi.
Пример автоматической нарезки для Android из mdpi
Очевидным решением проблемы является проработка hdpi ресурсов руками, либо сильное соблюдение чётности в mdpi(как видно на картинке с верхней линией самолётика получилось, а вот с линией в обведённой области — нет).
Замечание: Всегда и везде лучше перепроверять автоматический экспорт ресурсов.
Спецификация
Разработчики просят отдавать им спецификацию в pt и dp, для iOS и Android соответственно. Тут выбранные нами разрешения также нам помогают, не надо думать и делить размеры на какие-то числа и так далее…
Достаточно с помощью lite measure или просто measure расставить нужные размеры. Здесь можно возразить, что плагин умеет пересчитывать размеры из тех что есть в нужные, но не многие об этом знают, да и вообще не многие знают, что размеры надо отдавать в pt и dp.
Замечание: У автора была старая версия плагина Sketch Measure, новую изрядно поменяли.
Такой способ может помочь при желании разработчика посмотреть какой-то размер в исходнике, ему не надо будет дергать дизайнера или что-то считать опять же.
Здесь же можно вспомнить про Photoshop и скрипт Size Marks, который при наших разрешениях даст нужные разработке размеры (но только в px, к сожалению).
Пример работы скрипта Size Marks
Думаем о других
Важным моментом, на наш взгляд, является передача проекта от одного дизайнера к другому. Если новый дизайнер получит xxhdpi-проект (а он не привык к этому или вообще новичок), то ему понадобится уйма времени на изучение и понимание исходника, а также постоянный пересчёт с делением на 3 (что не так просто, как кажется). Если же он получит mdpi проект, то легко сможет соотнести его с гайдлайнами и скорее приступит к решению задачи.
В случае с iOS и передачей макетов в @2x дело обстоит чуть проще, так как делить на 2 умеет даже гуманитарий. Но иногда встречаются исходники в @2x для iPhone 6, и опять вместо работы начинаются пересчёты и размышления.
Лирика
Некоторые дизайнеры выбирают в исходной точке сразу xxhdpi, и это понятно, но только при использовании Photoshop и желании постоянно смотреть макет на устройстве, так как Photoshop не умеет сам масштабировать изображение при просмотре.
Но так как не каждый экран надо проверять, то вполне можно работать и в mdpi — просто увеличивать исходник и смотреть на устройстве.
Руководствуясь вышеизложенными размышлениями, наша дизайн-команда мобильных приложений выбрала путь работы с @1x и mdpi макетами.
Небольшой опрос
habr.com
Требования к иконкам для приложения для Android \ AndDev \ Сообщество разработчиков для Android
Помните, что изменения происходят достаточно часто с каждым крупным релизом, так что всегда стоит проверять текущие гайдлайны
Плотность экрана
Для иконок существует пять различных значений плотности экрана. Иконки с более низким разрешением создаются от базовой.
| mdpi (baseline) | 160 dpi | 1× |
| hdpi | 240 dpi | 1.5× |
| xhdpi | 320 dpi | 2× |
| xxhdpi | 490 dpi | 3× |
| xxxhdpi | 640 dpi | 4× |
Иконки приложения (Launcher icons)
| 48 × 48 (mdpi) | Формат файла .png | Трехмерная, вид спереди, с небольшим перспективой , если смотреть сверху, пользователи должны воспринимать глубину. |
| 72 × 72 (hdpi) | ||
| 96 × 96 (xhdpi) | ||
| 144 × 144 (xxhdpi) | ||
| 192 × 192 (xxxhdpi) | ||
| 512 × 512 (Google Play store) |
Иконки в ActionBar, Dialog и Tab
| 24 × 24 размещенная в 32 × 32 (mdpi) | Формат файла .png | Эти иконки используются в меню ActionBar. Первый размер — размер иконки, второй — размер изображения. |
| 36 × 36 размещенная в 48 × 48 (hdpi) | ||
| 48 × 48 размещенная в 64 × 64 (xhdpi) | ||
| 72 × 72 размещенная в 96 × 96 (xxhdpi) | ||
| 96 × 96 размещенная в 128 × 128 (xxxhdpi) |
Иконки контекстного меню (Small Contextual Icons)
| 16 × 16 (mdpi) | Формат файла .png | Маленькие иконки, использующиеся в контекстных меню или отображающие статус специфичных действий. Например в приложении GMail каждое сообщение имеет иконку звездочки, которая помечает письмо как важное. |
| 24 × 24 (hdpi) | ||
| 32 × 32 (xhdpi) | ||
| 48 × 48 (xxhdpi) | ||
| 64 × 64 (xxxhdpi) |
Иконки уведомлений (Notification icons)
| 22 × 22 размещенная в 24 × 24 (mdpi) | Формат файла .png | Используется для уведомлений приложения в строке состояния. Должны быть плоскими (без градиента), белыми и без перспективы. |
| 33 × 33 размещенная в 36 × 36 (hdpi) | ||
| 44 × 44 размещенная в 48 × 48 (xhdpi) | ||
| 66 × 66 размещенная в 72 × 72 (xxhdpi) | ||
| 88 × 88 размещенная в 96 × 96 (xxxhdpi) |
Большую коллекцию иконок в стиле Material Design вы можете найти здесь
anddev.ru
Размеры изображения для Android-приложения Oh! Android
Выбирайте цели устройства перед собой и придерживайтесь его. Посмотрите, что сегодня является самым популярным на рынке самым популярным устройством (samsung galaxy s4 (1080p), nexus 7 (1080p), nexus 10 (2560 × 1600) и т. Д.).
Сделайте ваши проекты / графику в самом большом разрешении, доступном на физическом устройстве.
Существует 3 вида изображений:
- Может быть сделано в 9patch (спросите себя..может ли это быть сделано в xml? Если оно сделано только из простых форм, просто переделайте его в xml)
- Может быть переделан в xml drawables (градиенты, фигуры вообще)
- Можно масштабировать или обрезать (например, фотографию)
Работа с 9 патчами – это боль в заднице, и ИМХО следует избегать любой ценой. Даже если вы сделаете очень приятный 9patch, вам все равно придется масштабировать его до любого возможного разрешения, которое вы хотите поддержать, что увеличит размер apk. С xml-файлами вам не нужно это делать, и вы будете совместимы с переходом, когда кто-то вводит в будущем более мощное устройство разрешения (они будут).
Пример:
Простой диалог диалога градиента (разрешение 100×400 в xhdpi) во всех разрешениях, поддерживаемых в приложении, над которым я работаю (l, m, h, xhdpi), составляет 20 КБ. В xml это будет <1Kb.
Но да, если вы все еще хотите использовать 9 патчей, просто сделайте это один раз в самом большом разрешении, о котором вы беспокоитесь (xhdpi), и используйте инструмент resizer, чтобы получить все остальные разрешения. Он создаст правильную структуру папок для вас!
О номере 3:
Таким образом, у вас есть некоторые изображения, которые нельзя переделать в xml, а также не могут быть отправлены 9. Даже если у вас есть всего несколько (2-3) полноэкранных изображений (фоны), у вас не хватит памяти. Есть некоторые инструменты, которые могут помочь в этом, например, универсальный загрузчик изображений . Конечно, если у вас есть только маленькие изображения, вы, вероятно, безопасны.
В eclipse в редакторе макетов есть хорошая функция предварительного просмотра, настройте его правильно, чтобы вы всегда могли видеть все разрешения и пропорции, которые вас волнуют.
Подводя итог, расскажите своему дизайнеру о том, чтобы сделать разные проекты для телефонов, 7-дюймовые планшеты, 10-дюймовые планшеты только в самом большом доступном разрешении, которое сегодня имеет устройство (в этой категории) на рынке. Кроме того, узнайте, как использовать xml-чертежи.
Вообще, чтобы сделать desgn идеальным, попросите вашего дизайнера использовать .9.png, означает 9 патч-изображений. 9 изображений патчей могут растягиваться в соответствии с вашими требованиями.
Другим способом является то, что вашему дизайнеру необходимо рассчитать абсолютное значение размеров экрана. Это означает, что у нас есть 4 стандартных размера в соответствии с Android, указанными нами, то есть 320X426, 320X470, 480X720, 720X960. Поэтому, если вам нужно создать графический дизайнер, нужно вычислить экраны с необходимым изображением.
Т.е. если ширина экрана равна ldpi-320, то сколько пространства будет выделено для определенного размера изображения, поэтому после этих вычислений он найдет 4 изображения разных размеров.
Очень важно проверить на реальных устройствах, что ваши макеты и ресурсы, зависящие от экрана и плотности, ведут себя так, как вы намереваетесь. Также важно проверить поведение своего приложения на устройствах, на которых не поддерживаются экраны, зависящие от размера и плотности, и убедитесь, что ваше приложение выглядит и ведет себя приемлемо по умолчанию по умолчанию Android. Изображения выглядят лучше, если вы зададите размеры изображений в следующем порядке.
ldpi = 120px mdpi = 160px hdpi = 240px xhdpi = 320px xxhdpi = 440px xxxhdpi = 560px www.ohandroid.com
Размеры иконок для Android-приложений
Иконка — это графическое изображение, которое занимает небольшую часть экрана и обеспечивает быстрый, интуитивно понятное представление действия, статуса, или приложения.
При проектировании иконки для вашего приложения, важно иметь в виду, что ваше приложение может быть установлено на различных устройствах, которые предлагают диапазон плотностей пикселей, как описано в разделе Устройства и дисплеи. Но вы можете заставить ваши иконки отлично смотреться на всех устройствах, предоставляя каждый значок в нескольких размерах. Когда ваше приложение работает, Android проверяет характеристики экрана устройства и загружает ресурсы для вашего приложения соответствующие плотности экрана.
Т.к. вы будете поставлять каждый значок в нескольких размерах, чтобы поддержать различные плотности, руководство дизайна приведенное ниже опирается на размеры иконок в независимых от плотности пикселях ( dp ), которые основаны на размерах в пикселях экрана средней плотности (MDPI).
Таким образом, чтобы создать иконку для различных плотностей, вы должны следовать отношению масштабирования 2:3:4:6:8 между пятью главными плотностями (medium, high, x-high, xx-high, и xxx-high соответственно). Например, предположим, что размер для значка запуска должен быть 48×48 dp. Это означает, что базовой плотности (MDPI) размер будет 48×48 px (пикселей), и высокой плотности (HDPI) размер должен быть 1.5x от базового — 72×72 точек, и x-high плотности (XHDPI) размер должен быть 2x от базового — 96×96 точек, и т.д..
Примечание: Android также поддерживает экраны низкой плотности (LDPI), но вам обычно не нужно создавать собственные наборы для таких размеров, потому что Android эффективно уменьшает ресурсы HDPI на 1/2, чтобы соответствовать ожидаемому размеру.
И напоследок, вот ряд размеров иконок в пикселях, для иконок запуска (Launcher Icons):
- ldpi 32 x 32
- mdpi 48 x 48
- hdpi 72 x 72
- xhdpi 96 x 96
- xxhdpi 144 x 144
webhamster.ru
Размеры экранов игры на android — как я поступил / Sandbox / Habr
Перед тем, как начать разрабатывать игры на андроид, я долгое время делал браузерные flash игры. Там все легко, задал размер 700*525 и все. Когда столкнулся с андроидами, то и дело натыкался на слова, — «Размер экрана на андроид — это целая наука». Да, это наука. Но мы сегодня разберем на практике один пример. Я не сказал бы что он идеален, но практика показала, что он работает,хоть и не устойчиво. Но я им пользуюсь.
Для начала грубо берем:
— самый маленький размер экрана 480*800
— самый большой размер экрана 1300*1920
… и создаем средний размер, у меня это 720*1280:
Теперь у нас есть 3-и размера экрана: x1, x2, x3.
Далее нам нужно узнать, какой у нас размер экрана, на котором запущена игра (все это делаем, в самом начале игры)? Во flash на языке as3 это:
var m_stageW:int = flash.system.Capabilities.screenResolutionX;
var m_stageH:int = flash.system.Capabilities.screenResolutionY;
После узнаем размера экрана в иксах:
var m_sizeStageX:int;
if (m_stageH<= 800)
{
m_sizeStageX = 1;
}
else
if (m_stageH> 1280)
{
m_sizeStageX = 3;
}
else
{
m_sizeStageX = 2;
}
У меня 7-ми дюймовый планшет. Размер экрана 600*1024. (У меня переменная m_stageH = 1024). Значит для меня m_sizeStageX = 2; Игра будет использовать для моего планшета графику размера x2.
Что такое рабочая зона?
Рабочая зона есть только в x2, x3. Она обозначена зеленым цветом:
Все что находится в рабочей зелёной зоне x3 должно влазить в рабочею зелёную зону x2:
Все что находится в рабочей зелёной зоне x2 должно влазить в экран x1:
Я использовал 3-и размера графики, что бы не было потери качества. Вся графика рисовалась под самый большой размер экрана x3. А после я ручками уменьшал для всех остальных экранов с отношением:
x2 = 70%
x1 = 50%
Например, кнопка выхода в меню. На самом большом экране она имеет размер 100*100 пикселей. Значит для экрана x2 уменьшаем картинку до 70% и получаем 70*70 пикселей. Для экрана x1 получится 50*50 пикселей. И в итоге у Вас получится три кнопки. По каждой для каждого экрана.
Грубо говоря, Вы делаете не одну игру, а сразу три. Ведь каждый объект игры нужно сделать трижды. Но это рационально для объектов, которые нужно выделить. Которые на переднем плане, с которыми игрок взаимодействует.
Давайте разберем меню игры. Красными стрелочками я обозначил те объекты, которые я сделал для всех размеров экранов:
— название игры;
— парень с девушкой;
— кнопки меню;
Эти объекты будут супер качественные. А все остальное: небо, дом, земля, хмарки будут размыты. Потому что я буду изменять их размер под каждый экран обычным растягиванием. А при растягивании, качество картинки теряется:
Все объекты сцены выставляются программно, желательно от центра экрана. Или берется соотношения сторон. Например, как я выставлял кнопки меню на предыдущем рисунке? Кнопку Play я поставил по центру. Кнопку перехода на сайт (та что слева) — это левая половина экрана разделена на 2. Правая кнопка (стереть прогресс) аналогично левой.
Вывод:
Поначалу дико неудобно, но со временем привыкаешь. Сейчас разрабатываю вторую часть игры Building cubes2, но уже на юнити. Flash в доску задолбал меня своими тормозами.
Всем спасибо, кто дочитал до конца. Пытался вкратце описывать, не растягивать скучными буквами. До нового скила.
habr.com