Принципы построения игровых интерфейсов в мобильных играх. Виктор Корсун, ZeptoLab

1. Developing interfaces in
our games.
(c) Zeptolab, 2013
{ }

2. 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
Список устройств

3. IOS Resolutions list

4. Android resolutions list

5. Проблема:
Как создать универсальное приложение?
Мы хотим:
Написать код и нарисовать картинки один
раз.

6. Проблема:
Как создать универсальное приложение?
Решение:
Приложение работает в неизменном
логическом разрешении.

7. Проблема:
Как создать универсальное приложение?
Решение:
Приложение работает в неизменном
логическом разрешении.
Приложение размещается на полном экране
с сохранением пропорций.

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

9. Варианты размещения
1. В оригинальном размере - попадаем
пиксель-в-пиксель.

10. Варианты размещения
2. Растягиваемся на весь экран.

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

12. Варианты размещения
4. Скейлимся по наружнему краю.

13. Варианты размещения
5. Разумное размещение (например,
заполняем пустые области чем-то).

14. Проблема:
Как создать универсальное приложение?
Решение:
1. Приложение работает в неизменном
логическом разрешении.
2. Приложение скейлится на полный экран с
сохранением пропорций.
3. Неиспользуемые области хитро
заполняются.

15. ZFramework layout
SCREE_WIDTH x
SCREEN_HEIGHT
-SCREEN_OFFSET_Y
SCREEN_OFFSET_Y
SCREE_WIDTH x
SCREEN_HEIGHT
-SCREEN_OFFSET_X
SCREEN_OFFSET_X

16. Следствия
1. Игровые координаты не обязательно
совпадают с реальными пикселями.

17. Следствия
1. Игровые координаты не обязательно
совпадают с реальными пикселями.
2. Графика почти всегда скейлится.

18. Следствия
1. Игровые координаты не обязательно
совпадают с реальными пикселями.
2. Графика почти всегда скейлится.
3. Тачи не совпадают - надо
преобразовывать.

19. Следствия
1. Игровые координаты не обязательно
совпадают с реальными пикселями.
2. Графика почти всегда скейлится.
3. Тачи не совпадают - надо
преобразовывать.
4. FPS больше не постоянный - физика и
случайные процессы должны учитывать
временной интерввал: переход от
увеличения координаты к скорости, от
вероятности - к плотности вероятности.

20. Отделение логики от размера
экрана: Google Nexus 4

21. Отделение логики от размера
экрана: Acer Iconia Smart

22. Возврат к конкретным
устройствам.

23. Возврат к конкретным
устройствам.
1. Свайпы.
Как сделать так, чтобы свайп был
одинаковый?

24. Возврат к конкретным
устройствам.
1. Свайпы.
Как сделать так, чтобы свайп был
одинаковый?
Подсказка: использовать то, что не
меняется от устройства к устройству.

25. Возврат к конкретным
устройствам.
1. Свайпы.
Как сделать так, чтобы свайп был
одинаковый?
Подсказка: использовать то, что не
меняется от устройства к устройству
(палец).

26. Возврат к конкретным
устройствам.
1. Свайпы.
NPixL = NPixPh * K
K = SCR_W_L / SCR_W_Ph
NPixPh = Dist / pph

27. Возврат к конкретным
устройствам.
2. Попадание пиксель-в-пиксель.

28. Возврат к конкретным
устройствам.
2. Попадание пиксель-в-пиксель.
• Скейл.
• Позиционирование.

29. Попадание пиксель-в-пиксель
• Скейл.

30. Попадание пиксель-в-пиксель
• Позиция.

31. Попадание пиксель-в-пиксель
• Позиция.

32. Попадание пиксель-в-пиксель
• Позиция.

33. Попадание пиксель-в-пиксель
• Хорошо: для статичных шрифтов.
• Плохо: для анимации.

34. Возврат к конкретным
устройствам.
3. Разделение: планшет / телефон.
Как это сделать?

35. Возврат к конкретным
устройствам.
3. Разделение: планшет / телефон.
Ответ: никак.
Устройств гораздо больше; надо
использовать информацию о размере и
плотности экрана вместо этого.

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