Download to read offline
![requestAnimationFrame
// ...
position[0] += (timeDelta * speed) *
direction[0];
// ...](https://image.slidesharecdn.com/prez-170608152817/85/Playing-in-the-browser-18-320.jpg)
![Gamepad API
var gp = navigator.getGamepads()[0];
var button0 = gp.buttons[0]; /* 0-16 */
var axe0 = gp.axes[0]; /* 0-3 */](https://image.slidesharecdn.com/prez-170608152817/85/Playing-in-the-browser-52-320.jpg)
Uploaded byDevGAMM Conference
Playing in the browser
Доклад Всеволода Шмырова посвящен разработке игр в браузере, рассматривающий современные web-спецификации и технологии, такие как requestAnimationFrame и WebGL. Он также обсуждает возможности управления с помощью различных устройств, включая клавиатуру, мышь и геймпад, а также работу со звуком и данными. В заключение поднимется вопрос о будущих веб-технологиях, таких как Web Animation API и WebRTC.
![[JAM 1.2] Mobile Gamedesign (Boris Zapolsky)](https://cdn.slidesharecdn.com/ss_thumbnails/mobilegamedesign-110415022520-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Playing in the browser
- 1.
- 2. Кто я такой? •Меня зовут Сева
- 3. Кто я такой? •Меня зовут Сева • Разработчик интерфейсов в Яндексе
- 4. Кто я такой? •Меня зовут Сева • Разработчик интерфейсов в Яндексе • В прошлом flash-разработчик игр
- 5. Кто я такой? •Меня зовут Сева • Разработчик интерфейсов в Яндексе • В прошлом flash-разработчик игр • Игры - мое хобби
- 6. Почему такая тема? •Внешние плагины вымирают
- 7. Почему такая тема? •Внешние плагины вымирают • Больше возможностей в браузерах
- 9. Что будет вдокладе? • WEB-спецификации
- 10. Что будет вдокладе? • WEB-спецификации • Живые примеры!
- 11. Что будет вдокладе? • WEB-спецификации • Живые примеры! • Совсем чуть-чуть кода
- 12. Что будет вдокладе? • WEB-спецификации • Живые примеры! • Совсем чуть-чуть кода • 2D
- 13.
- 14.
- 15. requestAnimationFrame (RAF) function tick(timestamp) { /* recalculate & redraw */ requestAnimationFrame(tick); } requestAnimationFrame(tick);
- 16.
- 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.5ssteps(6) infinite;
- 23.
- 24. Canvas • "Честный" APIотображения графики • Больший контроль
- 25.
- 26.
- 27.
- 28.
- 29. WebGL • Низкоуровневое APIработы с графикой • 3D в браузере
- 30.
- 32.
- 33. SVG • Подходит длялюбого DPR
- 34. SVG • Подходит длялюбого DPR • Меньший объем данных
- 35. SVG • Подходит длялюбого DPR • Меньший объем данных • Невысокая производительность
- 36.
- 37.
- 38.
- 39. Fullscreen API • Разворачиваетэлемент во весь экран
- 40. Fullscreen API • Разворачиваетэлемент во весь экран • Различия в реализации
- 41. Fullscreen API • Разворачиваетэлемент во весь экран • Различия в реализации • Только по действию пользователя
- 42.
- 43.
- 44. Управление • Клавиатура имышь • Сенсорные касания
- 45. Управление • Клавиатура имышь • Сенсорные касания • Геймпад
- 46. Сенсорные касания Touch EventsPointer Events
- 47.
- 48. Gamepad API • Получениесостояние геймпадов
- 49. Gamepad API • Получениесостояние геймпадов • Нажатие кнопок, положение стиков
- 50. Gamepad API • Получениесостояние геймпадов • Нажатие кнопок, положение стиков • Странный интерфейс
- 51.
- 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.
- 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.
- 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