Подготовка и форматы графики

Материал из wiki.appsalutecreator.com
Версия от 07:11, 23 сентября 2013; Avereskun (обсуждение | вклад) (Форматы файлов)
Перейти к: навигация, поиск

Введение

Screen1.png

При разработке дизайна следует учитывать, что существует множество устройств с различными характеристиками экранов. Самое сложное это подготовить один набор графики, который можно использовать на всех устройствах без дополнительной переделки. Хотя возможна подготовка и использование нескольких наборов графики, в этом случае будет автоматически выбираться лейаут наиболее близкий по размерам.
Это хорошо понятно на приложениях для iOS где один пакет .ipa может запускаться на iPad (1024х768) соотношение сторон 3:4 и iPhone (1136х640) 16:9.
На изображении хорошо видно, что только центральная часть будет активна на этих устройствах, а "уши" обрежутся и не будут видны. Следовательно все активные игровые элементы должны быть расположены в активной зоне.
. . .

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

На графике приведены основные разрешения экранов и показаны их пропорции сторон

источник http://en.wikipedia.org/wiki/File:Vector_Video_Standards5.svg

Подготовка графики

Res.png

Основными шаги при разработке графики для игр является:

  • выбрать базовое разрешение в котором художники будут формировать исходные файлы
  • определить активную игровую область
  • определить целевые устройства параметры сжатия графики для них

При выборе базового разрешения необходимо учитывать что разрешения экранов постоянно растут и понимать что игра с разрешением графики 800х600 была недавно стандартом для PC, теперь можно только выкинуть.
Распространение экранов с большой плотность пикселей и большим разрешением также необходимо брать во внимание iPad Retina 2048x1536 pix, Google Nexus 10 2560х1600 pix и др.

Также следует помнить об ограничениях в оперативной памяти на мобильных устройствах и объеме памяти которое занимает каждое дополнительное изображение. Так к примеру картинка размером 2560х1600 на некоторых устройствах будет занимать ~40 Mb в памяти при доступных ~ 100 Mb

Итак выбираем целевое соотношение сторон для которого мы хотим разработать графику.
Предположим 16:9, теперь необходимо определить разрешение в пикселях 2774*1536 pix

Таблица с права отображает часть устройств для которых мы будем разрабатывать графику (список поддерживаемых устройств не ограничен)


TableGraph.png

Существует возможность непропорционального скалирования экранов (лейаут) для максимального использования активной области. Естественно это можно делать,есть позволяют интерфейсные элементы (нет круглых кнопок, они приварятся в овалы)
Таблица отображает некоторые параметры которые необходимо настраивать при сборке исполняемого файла
Примечпние: Следует знать, что к примеру, расположение интерфейсных элементов можно настраивать с помощью параметра align Это означает что элемент будет находится всегда на заданном расстоянии от карая экрана
Align.png

Форматы файлов

AppSalute Сreator использует растровую графику.
Форматы файлов доступные для использования:

  • .png
  • .jpg - основное применение для бекграундов и изображений без альфа канала

PVR текстуры

Пример подготовки графики

Рассмотрим на примере подготовки графики для интерактивных книг

Анимация
Анимация, задействованная в интерактивных книгах, разделяется на:

  • фреймовая;
  • скелетная.

Соответственно с этим, графика может быть:

  • в виде полной/частичной перерисовки объектов;
51.png
52.png


  • с порезкой на отдельные запчасти и их дальнейшим анимированием.
43.png
42.png
41.png

При подготовке графики следует учесть что она подразделяется на:

  • статический цельный фоновый рисунок (в формате jpeg/png);
  • отдельные объекты, используемые в анимации (должны иметь прозрачность, в формате png).

У нас имеется статический фон (поляна, замок, небо) и отдельный объект облако, которое может двигаться слева-направо (или наоборот). Целесообразнее было бы соединить замок, поляну и небо в один слой. Но так как облако должно пролетать за замком, то небо должно быть отдельным слоем. В итоге получаем: отдельно замок

32.png
31.png


  • отдельно небо (в виде градиентной полосы, которую будем растягивать модификатором)
61.png


  • отдельно облако
21.png


  • При анимировании рук графика плеча и предплечья в основании сгибов должна быть скругленной и заходить за объект прятания. Контуры у основания сгиба обрывистые.
Pic12.png
Pic11.png