Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6OdessaFrontend
Есть ситуации, когда все файлы и картинки минимизированы, Tree Shaking убирает неиспользуемый код и всё это на хостинге с HTTP/2 загружается недостаточно быстро. Ведь время — деньги, с каждой лишней секундой при открытии страницы уменьшается число клиентов. Андрей Михайлов рассказывает как уменьшить время ожидания путем отрисовки контента на сервере, сохраняя все преимущества работы с js фреймворками, а так же про подводные камни и тонкости, которые следует учитывать.
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...Pavel Dovbush
История развития проекта с точки зрения клиентских технологий - от веб-сайта к появлению мобильных клиентов и смещению фокуса к mobile-first разработке. Общие черты нашей архитектуры и их отличия от стандартных решений.
Единый протокол общения с приложениями iOS/Android/WindowsMobile/MobileWeb/Web и особенности реализации для JavaScript платформ (десктопные и мобильные браузеры).
Изменение процесса разработки и подходов к реализации нового функционала для переключения на mobile-first стратегию.
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...Ontico
° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.
Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6OdessaFrontend
Есть ситуации, когда все файлы и картинки минимизированы, Tree Shaking убирает неиспользуемый код и всё это на хостинге с HTTP/2 загружается недостаточно быстро. Ведь время — деньги, с каждой лишней секундой при открытии страницы уменьшается число клиентов. Андрей Михайлов рассказывает как уменьшить время ожидания путем отрисовки контента на сервере, сохраняя все преимущества работы с js фреймворками, а так же про подводные камни и тонкости, которые следует учитывать.
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...Pavel Dovbush
История развития проекта с точки зрения клиентских технологий - от веб-сайта к появлению мобильных клиентов и смещению фокуса к mobile-first разработке. Общие черты нашей архитектуры и их отличия от стандартных решений.
Единый протокол общения с приложениями iOS/Android/WindowsMobile/MobileWeb/Web и особенности реализации для JavaScript платформ (десктопные и мобильные браузеры).
Изменение процесса разработки и подходов к реализации нового функционала для переключения на mobile-first стратегию.
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...Ontico
° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.
Визитной карточкой наших игр является превосходная графика. Мы с большим вниманием относимся к этой составляющей игры и готовы поделиться своим опытом, рассказав обо всех этапах изготовления спрайтовой графики. Мы затронем все аспекты – от концепта и анимации до вставки графики в игру.
Поговорим о технических особенностях и способах оптимизации графического контента, расскажем об инструментарии, а также об отличиях в работе над различными типами объектов, над персонажами и игровыми локациями. В основе доклада лежит опыт создания проекта “Осада!”.
Докладчиками будут описаны тонкости в процессе создания социальной игры “Зомби Ферма”: как преодолевались трудности, которые возникали в процессе разработки продукта. Как устранялись проблемы, касающиеся обслуживания игры. Как велась работа над оптимизацией и усовершенствованием некоторых процессов. Какие технологии помогли поднять игру в ТОПы и привлечь внимание более 14 000 000 пользователей не только русскоязычных, но и зарубежных социальных сетей. Каким методом была создана та самая “технология успеха”
Доклад будет рассказывать о современных подходах проектирования ПО. Основной темой будет построение компонентных архитектур на примере архитектуры сцены 3D движка. Будет рассмотрен классический объектно-ориентированный подход организации сцены, его плюсы и минусы, и в качестве альтернативы будет показан компонентно ориентированный подход организации сцены. Доклад позволит слушателям понять, как разрабатывать сложные системы, которые впоследствии можно легко поддерживать.
Alexey Savchenko, Epic Games
This report will highlight the most recent changes in the version of the technology with reference to specific developments. We will take a look at best practices of development for PC, mobile and web games, also touch upon prospects for the development of applications and games for the VR.
Character creation pipeline for Age of Magic (3D mobile)DevGAMM Conference
Daniil Kozlovsky, Art Lead, Playkot
Anton Ivichev, Playkot
Dmitry Lebedev, Playkot
Step-by-step description of the process of creating characters for a 3D mobile game in the fantasy setting. Good and bad solutions that the Age of Magic team tried while solving the problem of building an efficient and scalable production pipeline. #MadeWithUnity
зомби ферма. как это сделано - Виктор и Андрей Кузьмины - Vizor interactiveSociality Rocks!
В докладе будет рассказано, как создавалась топовая социальная онлайн игра "Зомби Ферма", в которую играет уже более 8 000 000 пользователей не только русскоязычных, но и зарубежных социальных сетей.
С какими трудностями пришлось столкнуться в процессе разработки и дальнейшей поддержки игры.
Какие проблемы возникали и какими путями они устранялись.
Какие решения позволили поднять игру на более высокий уровень в техническом плане. Как оптимизировалась работа движка и как усовершенствовалась серверная база.
Почему для нас не проблема DAU в 5 000 000.
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
Видео+Конференция 2013. Перспективные инновации в обработке видеосигналов. Ко...TrueConf
Уже стало традицией, что каждую весну и осень мы проводим конференции и семинары. На Видео+Конференции 2013 мы:
На конференции мы:
- поделились последними новостями мира видеоконференцсвязи;
- рассказали, как обеспечить безопасность ВКС системы;
- и как оборудовать конференц-залы и обеспечить качественную интеграцию с внешним оборудованием;
- представили доклады о масштабных внедрениях ВКС систем в здравоохранении и образовании;
- провели практическую демонстрацию работы профессионального оборудования для видеоконференцсвязи и последних новинок в сфере ВКС.
Подробнее на http://trueconf.ru/company/news-events/videoconferencing-seminar/
C++ в играх, больших и не очень, Игорь Лобанчиков
С++, являясь прямым потомком C - одновременно гибкий и эффективный с точки зрения производительности язык. За счет оптимизирующего компилятора любой красиво и правильно написанный код будет быстрым, стабильным и безопасным. Ну, или нам бы этого очень хотелось.
На простых примерах из жизни мы рассмотрим благие намерения, куда они нас заводят и почему так получается.
Видео + Конференция. Как получить правильное изображение? Константин СмирновTrueConf__
Уже стало традицией, что каждую весну и осень мы проводим семинары. На прошедшем семинаре мы говорили о:
- применяемых сегодня технологиях и архитектурах ВКС систем.
- тонкостях работы ВКС систем на сетевом уровне.
- продемонстрировали новые возможности в области унифицированных коммуникаций.
- оптимальной настроитке аудио- и видеоподсистемы, а так же выбрать периферийное оборудование.
Провели практическую демонстрацию различных вариантов оборудования рабочих мест и конференц-залов.
Подробнее на http://trueconf.ru/company/news-events/videoconferencing-seminar/
Визитной карточкой наших игр является превосходная графика. Мы с большим вниманием относимся к этой составляющей игры и готовы поделиться своим опытом, рассказав обо всех этапах изготовления спрайтовой графики. Мы затронем все аспекты – от концепта и анимации до вставки графики в игру.
Поговорим о технических особенностях и способах оптимизации графического контента, расскажем об инструментарии, а также об отличиях в работе над различными типами объектов, над персонажами и игровыми локациями. В основе доклада лежит опыт создания проекта “Осада!”.
Докладчиками будут описаны тонкости в процессе создания социальной игры “Зомби Ферма”: как преодолевались трудности, которые возникали в процессе разработки продукта. Как устранялись проблемы, касающиеся обслуживания игры. Как велась работа над оптимизацией и усовершенствованием некоторых процессов. Какие технологии помогли поднять игру в ТОПы и привлечь внимание более 14 000 000 пользователей не только русскоязычных, но и зарубежных социальных сетей. Каким методом была создана та самая “технология успеха”
Доклад будет рассказывать о современных подходах проектирования ПО. Основной темой будет построение компонентных архитектур на примере архитектуры сцены 3D движка. Будет рассмотрен классический объектно-ориентированный подход организации сцены, его плюсы и минусы, и в качестве альтернативы будет показан компонентно ориентированный подход организации сцены. Доклад позволит слушателям понять, как разрабатывать сложные системы, которые впоследствии можно легко поддерживать.
Alexey Savchenko, Epic Games
This report will highlight the most recent changes in the version of the technology with reference to specific developments. We will take a look at best practices of development for PC, mobile and web games, also touch upon prospects for the development of applications and games for the VR.
Character creation pipeline for Age of Magic (3D mobile)DevGAMM Conference
Daniil Kozlovsky, Art Lead, Playkot
Anton Ivichev, Playkot
Dmitry Lebedev, Playkot
Step-by-step description of the process of creating characters for a 3D mobile game in the fantasy setting. Good and bad solutions that the Age of Magic team tried while solving the problem of building an efficient and scalable production pipeline. #MadeWithUnity
зомби ферма. как это сделано - Виктор и Андрей Кузьмины - Vizor interactiveSociality Rocks!
В докладе будет рассказано, как создавалась топовая социальная онлайн игра "Зомби Ферма", в которую играет уже более 8 000 000 пользователей не только русскоязычных, но и зарубежных социальных сетей.
С какими трудностями пришлось столкнуться в процессе разработки и дальнейшей поддержки игры.
Какие проблемы возникали и какими путями они устранялись.
Какие решения позволили поднять игру на более высокий уровень в техническом плане. Как оптимизировалась работа движка и как усовершенствовалась серверная база.
Почему для нас не проблема DAU в 5 000 000.
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
Видео+Конференция 2013. Перспективные инновации в обработке видеосигналов. Ко...TrueConf
Уже стало традицией, что каждую весну и осень мы проводим конференции и семинары. На Видео+Конференции 2013 мы:
На конференции мы:
- поделились последними новостями мира видеоконференцсвязи;
- рассказали, как обеспечить безопасность ВКС системы;
- и как оборудовать конференц-залы и обеспечить качественную интеграцию с внешним оборудованием;
- представили доклады о масштабных внедрениях ВКС систем в здравоохранении и образовании;
- провели практическую демонстрацию работы профессионального оборудования для видеоконференцсвязи и последних новинок в сфере ВКС.
Подробнее на http://trueconf.ru/company/news-events/videoconferencing-seminar/
C++ в играх, больших и не очень, Игорь Лобанчиков
С++, являясь прямым потомком C - одновременно гибкий и эффективный с точки зрения производительности язык. За счет оптимизирующего компилятора любой красиво и правильно написанный код будет быстрым, стабильным и безопасным. Ну, или нам бы этого очень хотелось.
На простых примерах из жизни мы рассмотрим благие намерения, куда они нас заводят и почему так получается.
Видео + Конференция. Как получить правильное изображение? Константин СмирновTrueConf__
Уже стало традицией, что каждую весну и осень мы проводим семинары. На прошедшем семинаре мы говорили о:
- применяемых сегодня технологиях и архитектурах ВКС систем.
- тонкостях работы ВКС систем на сетевом уровне.
- продемонстрировали новые возможности в области унифицированных коммуникаций.
- оптимальной настроитке аудио- и видеоподсистемы, а так же выбрать периферийное оборудование.
Провели практическую демонстрацию различных вариантов оборудования рабочих мест и конференц-залов.
Подробнее на http://trueconf.ru/company/news-events/videoconferencing-seminar/
Работа с графической подсистемой (Lecture 10 – Graphics)
2.5D игры и особенности разработки многопользовательских игр
1. 2.5D игры и особенности
разработки
многопользовательских игр
Полушкин Глеб (SM&Partners)
2. Клиентские платформы
●
Adobe Flash Platform (Adobe Flash player)
●
Unity3D (Unity Web player)
●
Adobe Director (Adobe Shockwave player)
●
Microsoft WPF (Microsoft SilverLight).
3. Выбор для 2.5D игр
Обычно для многопользовательских 2.5D браузерных игр выбирается Flash
Platform. C её хорошими характеристиками и транспортом - http, XMLSockets,
RTMP* протоколы
4. Серверу оставьте транспорт сообщений и данных
Остальное отдавайте клиенту:
●
Построение сцен 2.5D и сортировки объектов на сцене
●
Поиск пути
●
Логика игры
Распределение логики между
клиентом и сервером
6. Упрощения графики игрового мира
●
Упрощайте всё что можно
●
Следите за количеством точек в векторной графике
●
Используйте оптимизацию растра
7. Упрощения допустимые для
редактирования
Игровой мир сталкивается с самым непредсказуемым создателем –
пользователем:
●
Пользователь захочет выставить все доступные вещи
●
Пользователь обязательно будет ставить вещи мешающие другим
●
Пользователь обязательно найдёт все баги
10. Кто наш пользователь?
Можно узнать это из:
●
его профиля, с персональными данными,
●
профилирующих тестов
●
теста производительности его компьютера
●
GeoIP
●
анализа поведения пользователя внутри игры
11. Способы обоснованного обмана
1. Отвлечение внимания
2. Уговоры и юмор
3. Поощрение
4. Скрытие подробностей
5. Безграничные возможности
6. Введение третьего властного лица в игру
7. Красивые персонажи
14. Оценка способов сборки персонажей
Что такое миллион персонажей?
- по 8 вариантов вещей на место получаем 2пола*5мест^8вещей = 781250
уникальных персонажей ~1 миллион
- по 9 вариантов вещей на место получаем 2пола*5мест^9вещей = 3906250
уникальных персонажей ~3 миллионов
15. Критерии выбора способа сборки
Качественные характеристики:
- Качество персонажа
- Реалистичность и плавность движений персонажа
Количественные характеристики:
- Количество классов/полов/рас
- Насколько живой персонаж - как много у него движений
- Скорость интернета потенциального пользователя игры
16. Ручная сборка
Отрисовка каждого варианта персонажа руками в отдельности
●
Плохие количественные характеристики
●
Хорошие качественные характеристики
●
Подходит только для игр с совсем небольшим количеством вариантов
персонажей. Иначе способ даёт огромные объёмы рутины для художников и
аниматоров
17. Клиентская сборка векторного
персонажа
Отрисовка руками скелетной анимации и каждой вещи в векторе. Далее клиентом
натягивание векторных вещей на скелет
●
Хорошие количественные характеристики
●
Средние качественные характеристики
●
Чем сложнее скелетная анимация, тем меньше клиент может позволить себе
одновременных анимаций
18. Серверная сборка векторного
персонажа
Отрисовка руками скелетной анимации и каждой вещи в векторе. Далее сервером
натягивание векторных вещей на скелет
●
Хорошие количественные характеристики
●
Средние качественные характеристики
●
Чем сложнее скелетная анимация, тем меньше клиент может позволить себе
одновременных анимаций, но больше чем при клиентской сборке
19. Клиентская сборка растрового
персонажа
Отрисовка руками скелетной анимации и каждой вещи в растре. Далее клиентом
натягивание растровых вещей на скелет
●
Хорошие количественные характеристики
●
Плохие качественные характеристики
●
Чем сложнее скелетная анимация, тем меньше клиент может позволить себе
одновременных анимаций
20. Серверная сборка растрового
персонажа
Моделинг 3D художником и аниматором персонажа с одетыми вещами. Сервером
выбирается нужные вещи, рендерится и клиенту выдаётся нужный персонаж
●
Хорошие количественные характеристики
●
Лучшие качественные характеристики
●
При проигрывании анимации большого числа персонажей мы теряем только
оперативную память. Процессор занят проигрыванием только обычных кадров
анимации без особых нагрузок - сменой картинок.
21. Дешевая серверная растровая
сборка
●
Модель – 3DMax
●
Конвертер в blender – max2blender
●
Серверный рендер – blender+cmb-render, на выходе cmb файл c покадровай
растровой анимацией вещи с картой высот
●
Сборщик – smtool + cmb-combine, на выходе анимация swf из нужных вещей и
кадров
22. Увеличение количества вещей:
сводится к изменению blender модели
Плюсы:
- Производительность
Сборка новой незакешированной swf - 1 секунда на 100 кадров, при 5ти одетых
вещах
- Стоимость- 4 недели системного разработчика
Минусы:
- blender использует рендер без какой либо аппаратной графической поддержки -
рендер cmb долгий процесс.
23. Выбор метода сборки
●
Малое количество вещей – ручная сборка
●
Несложные, с малым количеством деталей персонажи – клиентская векторная
сборка
●
На сложных персонажах выбираем серверную растровую сбоку. Мы жертвуем
скоростью загрузку в пользу реалистичности.
24. Масштабируемость
серверной части
Игровой сервер? Разрабатывать свой или использовать готовый? Вопрос
рентабельности и масштабности проекта. В любом случае нам нужен сервер с
высокими показателями стабильности и масштабируемости. Мы рассматриваем
игровой сервер, как некий уже рабочий отлаженный программный продукт.
25. Общие возможности SmartFoxServer
по нагрузкам
Создание комнаты:
●
Одновременных подключений: 5000
●
Скорость подключений пользователей: 10 клиентов в секунду
●
Создано комнат: 1000
●
Загрузка канала: 55-60Мбит/с
●
Загрузка процессора: 5-6%
●
Потеряных сообщений: 0
26. Создание комнаты 2 - критическая нагрузка:
●
Одновременных подключений: 7500
●
Скорость подключений пользователей: 10 клиентов в секунду
●
Создано комнат: 1500
●
Загрузка канала: ~86Мб/с
●
Загрузка процессора: 18-20%
●
Потеряных сообщений: ~12К
31. Решение — сетевая оперативная память
Дополнительная информация:
http://www.smartfoxserver.com/download/SmartFoxServer-Clustering.pdf
http://en.wikipedia.org/wiki/Terracotta_Cluster
http://www.infoq.com/articles/open-terracotta-intro
32. SmartFoxServer Amazon EC2 AMI
У SmartFoxServer есть образ слепок системы Ubuntu 7.04 с предустановленным
SmartFoxServer PRO 1.6.3 с разработческой лицензией под Amazon EC2.
Данные по слепку системы
●
http://www.smartfoxserver.com/labs/ami/
●
http://developer.amazonwebservices.com/connect/entry.jspa?
externalID=1903&categoryID=101