Vsevolod Shmyrov, Senior Software Developer, Yandex There are a lot of engines for game development in browser without any external plugins (HTML5 game engines) – Construct 2, Phaser, pixi.js and lots of others. They can’t exist without a range of web specifications. At this talk, Vsevolod will touch on the question of web specification. He will tell you about graphic-reflection, touch input, the use of gamepad, ways of data storage and lots of other abilities that browsers can provide.

1. Играем в браузере
Всеволод Шмыров

2. Кто я такой?
• Меня зовут Сева

3. Кто я такой?
• Меня зовут Сева
• Разработчик интерфейсов в Яндексе

4. Кто я такой?
• Меня зовут Сева
• Разработчик интерфейсов в Яндексе
• В прошлом flash-разработчик игр

5. Кто я такой?
• Меня зовут Сева
• Разработчик интерфейсов в Яндексе
• В прошлом flash-разработчик игр
• Игры - мое хобби

6. Почему такая тема?
• Внешние плагины вымирают

7. Почему такая тема?
• Внешние плагины вымирают
• Больше возможностей в браузерах

9. Что будет в докладе?
• WEB-спецификации

10. Что будет в докладе?
• WEB-спецификации
• Живые примеры!

11. Что будет в докладе?
• WEB-спецификации
• Живые примеры!
• Совсем чуть-чуть кода

12. Что будет в докладе?
• WEB-спецификации
• Живые примеры!
• Совсем чуть-чуть кода
• 2D

13. Немного теории

14. Game loop

15. requestAnimationFrame (RAF)
function tick (timestamp) {
/* recalculate & redraw */
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

16. Example time!
clck.ru/B9LbZ

17. requestAnimationFrame
// ...
gameObject.update(
timestamp - lastTimeValue
);
// ...

18. requestAnimationFrame
// ...
position[0] += (timeDelta * speed) *
direction[0];
// ...

19. Графика

20. HTML & CSS
• position: absolute
• image & background-image: url()
• transform & filters
• transition & animation

21. CSS трансорфмации
transform: scaleY(0.5);
transform: rotate(45deg);

22. requestAnimationFrame
animation: play 0.5s steps(6) infinite;

23. Example time!
clck.ru/B9Lbu

24. Canvas
• "Честный" API отображения графики
• Больший контроль

25. Dirty Rectangles

26. Dirty Rectangles

27. Canvas буфер

28. Несколько слоев

29. WebGL
• Низкоуровневое API работы с графикой
• 3D в браузере

30. 2D через WebGL

32. Активные области

33. SVG
• Подходит для любого DPR

34. SVG
• Подходит для любого DPR
• Меньший объем данных

35. SVG
• Подходит для любого DPR
• Меньший объем данных
• Невысокая производительность

36. Растрезация вектора

37. Растрезация вектора

38. Example time!
clck.ru/B9LcG

39. Fullscreen API
• Разворачивает элемент во весь экран

40. Fullscreen API
• Разворачивает элемент во весь экран
• Различия в реализации

41. Fullscreen API
• Разворачивает элемент во весь экран
• Различия в реализации
• Только по действию пользователя

42. Управление

43. Управление
• Клавиатура и мышь

44. Управление
• Клавиатура и мышь
• Сенсорные касания

45. Управление
• Клавиатура и мышь
• Сенсорные касания
• Геймпад

46. Сенсорные касания
Touch Events Pointer Events

47. Example time!
clck.ru/B9LcY

48. Gamepad API
• Получение состояние геймпадов

49. Gamepad API
• Получение состояние геймпадов
• Нажатие кнопок, положение стиков

50. Gamepad API
• Получение состояние геймпадов
• Нажатие кнопок, положение стиков
• Странный интерфейс

51. Example time!
clck.ru/B9Lcn

52. Gamepad API
var gp = navigator.getGamepads()[0];
var button0 = gp.buttons[0]; /* 0-16 */
var axe0 = gp.axes[0]; /* 0-3 */

53. PointerLock API
• Никак не связан с Pointer Events

54. PointerLock API
• Никак не связан с Pointer Events
• Очень похож на Fullscreen API

55. PointerLock API
• Никак не связан с Pointer Events
• Очень похож на Fullscreen API
• Но работает с курсором

56. Звук

57. Звук
var audio = new Audio("sound_asset.mp3");
audio.play();

58. Звук
var audio = new Audio("sound_asset.mp3");
audio.play();

59. Звук
// Текущее положение в аудиофайле
myaudio.currentTime
// Громкость
myaudio.volume

60. Звук
// Текущее положение в аудиофайле
myaudio.currentTime
// Громкость
myaudio.volume

61. Example time!
clck.ru/B9LdR

62. Web audio API
• API для обработки потокового звука

63. Web audio API
• API для обработки потокового звука
• Позволяет генерировать звук

64. Web audio API
• API для обработки потокового звука
• Позволяет генерировать звук
• Очень большая спецификация

65. Данные

66. Данные
• Локальные хранилища
– localStorage, indexedDB
• Обращение к серверу
– XHR, fetch

67. Данные
• Локальные хранилища
– localStorage, indexedDB
• Обращение к серверу
– XHR, fetch

68. slither.io

69. Web Socket
• Постоянное соединение

70. Web Socket
• Постоянное соединение
• Двухсторонняя связь

71. Web Socket
• Постоянное соединение
• Двухсторонняя связь
• Множество готовы решений

72. Будущее

73. А что дальше?
• Web animation API
• WebRTC
• Payment Request API
• Web VR API
• Bluetooth API

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

75. Полезные материалы
Примеры из доклада
clck.ru/B9L9v
vsesh.me