Принципы построения игровых интерфейсов в мобильных...

Developing interfaces in

our games.

(c) Zeptolab, 2013

{ }

IOS:

1. iPhone: sd, retina, 5.

2. iPad: sd, retina, mini.

Android:

1. Android phones

2. Android tablets

3. Built-in systems

Possible ports to other platforms

Список устройств

IOS Resolutions list

Android resolutions list

Проблема:

Как создать универсальное приложение?

Мы хотим:

Написать код и нарисовать картинки один

раз.

Проблема:

Как создать универсальное приложение?

Решение:

Приложение работает в неизменном

логическом разрешении.

Проблема:

Как создать универсальное приложение?

Решение:

Приложение работает в неизменном

логическом разрешении.

Приложение размещается на полном экране

с сохранением пропорций.

Варианты размещения

Варианты размещения

1. В оригинальном размере - попадаем

пиксель-в-пиксель.

Варианты размещения

2. Растягиваемся на весь экран.

Варианты размещения

3. Скейлимся по внутреннему краю.

Варианты размещения

4. Скейлимся по наружнему краю.

Варианты размещения

5. Разумное размещение (например,

заполняем пустые области чем-то).

Проблема:

Как создать универсальное приложение?

Решение:

1. Приложение работает в неизменном

логическом разрешении.

2. Приложение скейлится на полный экран с

сохранением пропорций.

3. Неиспользуемые области хитро

заполняются.

ZFramework layout

SCREE_WIDTH x

SCREEN_HEIGHT

-SCREEN_OFFSET_Y

SCREEN_OFFSET_Y

SCREE_WIDTH x

SCREEN_HEIGHT - S

CR

EE

N_

OF

FS

ET

_X

SC

RE

EN

_O

FF

SE

T_

X

Следствия

1. Игровые координаты не обязательно

совпадают с реальными пикселями.

Следствия

1. Игровые координаты не обязательно

совпадают с реальными пикселями.

2. Графика почти всегда скейлится.

Следствия

1. Игровые координаты не обязательно

совпадают с реальными пикселями.

2. Графика почти всегда скейлится.

3. Тачи не совпадают - надо

преобразовывать.

Следствия

1. Игровые координаты не обязательно

совпадают с реальными пикселями.

2. Графика почти всегда скейлится.

3. Тачи не совпадают - надо

преобразовывать.

4. FPS больше не постоянный - физика и

случайные процессы должны учитывать

временной интерввал: переход от

увеличения координаты к скорости, от

вероятности - к плотности вероятности.

Отделение логики от размера

экрана: Google Nexus 4

Отделение логики от размера

экрана: Acer Iconia Smart

Возврат к конкретным

устройствам.

Возврат к конкретным

устройствам.

1. Свайпы.

Как сделать так, чтобы свайп был

одинаковый?

Возврат к конкретным

устройствам.

1. Свайпы.

Как сделать так, чтобы свайп был

одинаковый?

Подсказка: использовать то, что не

меняется от устройства к устройству.

Возврат к конкретным

устройствам.

1. Свайпы.

Как сделать так, чтобы свайп был

одинаковый?

Подсказка: использовать то, что не

меняется от устройства к устройству

(палец).

Возврат к конкретным

устройствам.

1. Свайпы.

NPixL = NPixPh * K

K = SCR_W_L / SCR_W_Ph

NPixPh = Dist / pph

Возврат к конкретным

устройствам.

2. Попадание пиксель-в-пиксель.

Возврат к конкретным

устройствам.

2. Попадание пиксель-в-пиксель.

• Скейл.

• Позиционирование.

Попадание пиксель-в-пиксель

• Скейл.

Попадание пиксель-в-пиксель

• Позиция.

Попадание пиксель-в-пиксель

• Позиция.

Попадание пиксель-в-пиксель

• Позиция.

Попадание пиксель-в-пиксель

• Хорошо: для статичных шрифтов.

• Плохо: для анимации.

Возврат к конкретным

устройствам.

3. Разделение: планшет / телефон.

Как это сделать?

Возврат к конкретным

устройствам.

3. Разделение: планшет / телефон.

Ответ: никак.

Устройств гораздо больше; надо

использовать информацию о размере и

плотности экрана вместо этого.

Спасибо за внимание.