SlideShare a Scribd company logo
Опыт создания Real-time игры на WebGL, Angular,
Socket.io и Node.js
Михальчук Егор
megor.ru
1
Мягкий состав нашего ПК
Программы Игры
2
READ
3
slash
&
Realtime игра
4
Realtime игра
5
События в Realtime играх
6
Локальные
Многопользовательские
Глобальные
Локально-глобальные
Шлюз для общения участников
7
Socket.ioAJAXFlash WebRTC
События, проходящие через сервер 8
9
Средства визуализации игры в вебе
Flash CanvasDOM
10
Даешь фреймворки трудящимся!
11
Phaser THREE.js
А еще pixi.js / melonJS / kiwi.js / Crafty / PhysicsJS / stage.js / playcanvas /
lycheeJS / Babylon.js / panda-engine и многие другие. Ссылки вот тут
12
Пусть звучит из всех колонок
13
SoundManager2 / SoundJS / Buzz / Howler.js / audio.js / timbre.js / Fifer / Create.
js / p5.js и много других. Вот тут их реально много
Псс, парень...Работа со звуком
14
Математика? А я гуманитарий...
Используйте готовые решения
Вспоминайте школу и университет
Читайте хорошие книжки
Гуглите!
Расчеты в играх
15
Готовьте много иконок
Рисуйте спрайты, меняйте позицию в зависимости от ситуации
Пишите шейдеры
Анимация и графика
16
Angular и почему он решает проблемы
Хорошая связанность данных
Удобный роутинг
Хорошо тестируется
Не нужно через селекторы работать с DOM
Шикарная модульность
Большое сообщество
17
Серверная часть игры на Node.js
Это JavaScript
Socket.io для node.js
Асинхронный
18
За кулисами: редактор
Хранить игру можно и в JSON
Но для правки нужен редактор
Тестирование должно быть мгновенным
Любой чайник должен понять
19
Упаковка в исполняемые пакеты для Steam
Упаковка node версии игры в пакет
Пакеты для всех основных ОС
Огромное API для работы с ОС
node-webkit (NW.js)
20
Упаковка для мобильных устройств
Быстро
Почти без боли
Кроссплатформенно (iOS, Android, WP)
Нативненько так
Apache Cordova
21
Вот и всё!
Делайте хорошие игры, не изменяя джаваскрипту своей души
Михальчук Егор
megor.ru
Ad

Recommended

CodeFest 2012. Шергин Д. — Разработка мульти-платформенных 3D-игр
CodeFest 2012. Шергин Д. — Разработка мульти-платформенных 3D-игр
CodeFest
 
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Yandex
 
Desktop app based on node js and html5
Desktop app based on node js and html5
Provectus
 
Вячеслав Олиянчук — Яндекс.Авто 2.0 на Node.js
Вячеслав Олиянчук — Яндекс.Авто 2.0 на Node.js
Yandex
 
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
Kirill Danilov
 
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
MoscowJS
 
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24
MoscowJS
 
Ci на базе docker
Ci на базе docker
Ivan Grishaev
 
Использование Vagrant и docker при разработке в 1с
Использование Vagrant и docker при разработке в 1с
Евгений Сосна
 
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Yandex
 
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Yandex
 
Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"
Yandex
 
the workflow of a systems administrator
the workflow of a systems administrator
Andrew Pantyukhin
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.js
Kirill Danilov
 
Leechcraft modular linux internet client
Leechcraft modular linux internet client
Транслируем.бел
 
1k speedup
1k speedup
Антон Плешивцев
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
Yandex
 
E-com UI Team workflow
E-com UI Team workflow
Aleksey Tabakman
 
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
yaevents
 
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
Омские ИТ-субботники
 
State of the Standardized Web
State of the Standardized Web
Yandex
 
Allods Team: All you wanted to know about level design, but never dared to ask
Allods Team: All you wanted to know about level design, but never dared to ask
DevGAMM Conference
 
PHP daemons into social games
PHP daemons into social games
Alexandre Kalendarev
 
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Dev_Party
 
игра тренажёр
игра тренажёр
Larisa Levchenko
 
Say Perl на весь мир
Say Perl на весь мир
Andrew Shitov
 
#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
JSib
 
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Ontico
 
Angular vs Angular 2 vs React. Сергей Александров
Angular vs Angular 2 vs React. Сергей Александров
EatDog
 

More Related Content

What's hot (19)

Использование Vagrant и docker при разработке в 1с
Использование Vagrant и docker при разработке в 1с
Евгений Сосна
 
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Yandex
 
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Yandex
 
Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"
Yandex
 
the workflow of a systems administrator
the workflow of a systems administrator
Andrew Pantyukhin
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.js
Kirill Danilov
 
Leechcraft modular linux internet client
Leechcraft modular linux internet client
Транслируем.бел
 
1k speedup
1k speedup
Антон Плешивцев
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
Yandex
 
E-com UI Team workflow
E-com UI Team workflow
Aleksey Tabakman
 
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
yaevents
 
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
Омские ИТ-субботники
 
State of the Standardized Web
State of the Standardized Web
Yandex
 
Allods Team: All you wanted to know about level design, but never dared to ask
Allods Team: All you wanted to know about level design, but never dared to ask
DevGAMM Conference
 
PHP daemons into social games
PHP daemons into social games
Alexandre Kalendarev
 
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Dev_Party
 
игра тренажёр
игра тренажёр
Larisa Levchenko
 
Say Perl на весь мир
Say Perl на весь мир
Andrew Shitov
 
Использование Vagrant и docker при разработке в 1с
Использование Vagrant и docker при разработке в 1с
Евгений Сосна
 
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Кир Белевич "Используем БЭМ для создания сайтов под iOS/Android"
Yandex
 
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Yandex
 
Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"
Yandex
 
the workflow of a systems administrator
the workflow of a systems administrator
Andrew Pantyukhin
 
Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.js
Kirill Danilov
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
Yandex
 
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
yaevents
 
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
2017-08-12 02 Антон Ковалев. Texture a.k.a AsyncDisplayKit
Омские ИТ-субботники
 
State of the Standardized Web
State of the Standardized Web
Yandex
 
Allods Team: All you wanted to know about level design, but never dared to ask
Allods Team: All you wanted to know about level design, but never dared to ask
DevGAMM Conference
 
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Анатолий Полицын, агентство интернет-маркетинга «Синапс» — Корпоративный хост...
Dev_Party
 
Say Perl на весь мир
Say Perl на весь мир
Andrew Shitov
 

Viewers also liked (6)

#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
JSib
 
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Ontico
 
Angular vs Angular 2 vs React. Сергей Александров
Angular vs Angular 2 vs React. Сергей Александров
EatDog
 
"Angular 2: Всех переиграл" Евгений Жарков
"Angular 2: Всех переиграл" Евгений Жарков
Fwdays
 
Актуальные технологии и тренды в веб-разработке
Актуальные технологии и тренды в веб-разработке
Denis Izmaylov
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
#9 "Chrome DevTools: отладка, консоль, профилирование" Роман Сальников
JSib
 
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Сайт Москвы за 6 месяцев / Игорь Цупко (Notamedia)
Ontico
 
Angular vs Angular 2 vs React. Сергей Александров
Angular vs Angular 2 vs React. Сергей Александров
EatDog
 
"Angular 2: Всех переиграл" Евгений Жарков
"Angular 2: Всех переиграл" Евгений Жарков
Fwdays
 
Актуальные технологии и тренды в веб-разработке
Актуальные технологии и тренды в веб-разработке
Denis Izmaylov
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
Ad

More from JSib (10)

#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман Сальников
JSib
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
JSib
 
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
JSib
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
JSib
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
JSib
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
JSib
 
#5 "React.js" Антон Артамонов
#5 "React.js" Антон Артамонов
JSib
 
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
JSib
 
#2 "Распространённые ошибки в JavaScript" Денис Речкунов
#2 "Распространённые ошибки в JavaScript" Денис Речкунов
JSib
 
#1 "JSib – Знакомство и амбициозные планы" Денис Речкунов
#1 "JSib – Знакомство и амбициозные планы" Денис Речкунов
JSib
 
#13 "Управление состоянием в Redux" Роман Сальников
#13 "Управление состоянием в Redux" Роман Сальников
JSib
 
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил Реенко
JSib
 
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
JSib
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
JSib
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
JSib
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
JSib
 
#5 "React.js" Антон Артамонов
#5 "React.js" Антон Артамонов
JSib
 
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
JSib
 
#2 "Распространённые ошибки в JavaScript" Денис Речкунов
#2 "Распространённые ошибки в JavaScript" Денис Речкунов
JSib
 
#1 "JSib – Знакомство и амбициозные планы" Денис Речкунов
#1 "JSib – Знакомство и амбициозные планы" Денис Речкунов
JSib
 
Ad

#10 "Опыт создания Real-time игры на WebGL, Angular, Socket.io и Node.js" Егор Михальчук