0. Подготовка к работе
1. Введение
2. Загрузка ресурсов
3. Создание игрового мира [Вы тут]
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи
Пришло время создать маленький мир для нашего платформера, чтобы главному герою было где жить и его существование имело хоть какой-то смысл.
Не забывайте читать комментарии в коде, они важны!
Весь код, как и в прошлый раз, лежит в Github репозитории с тегом part-3.
Сегодня в 19:00 по московскому времени в офисе Superjob состоится встреча JavaScript-разработчиков «MoscowJS». Присоединяйтесь к прямой трансляции!
0. Подготовка к работе
1. Введение
2. Загрузка ресурсов [Вы тут]
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи
Продолжим серию уроков, посвященных использованию Phaser в связке с TypeScript. В этом уроке, мы рассмотрим загрузку ресурсов в Phaser, а также немного "причешем" код из предыдущей части.
Как и в прошлых статьях, не пропускайте комментарии в коде.
Полный код, написанный в этой статье, вы найдете в Github репозитории с тегом part-2.
Приступим!
0. Подготовка к работе
1. Введение [Вы тут]
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи
Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).
Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.
0. Подготовка к работе [Вы тут]
1. Введение
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи
Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.
Новый стандарт WebGL 2 стал недавно доступен в последних версиях Firefox и Chrome, так что возникло желание опробовать некоторые новые возможности. Одна из наиболее полезных и востребованных функций WebGL 2 (и OpenGL ES 3.0, на котором он основан) это дублирование геометрии (англ. instanced rendering). Эта фича позволяет уменьшить количество вызовов отрисовки (draw calls) путем многократной отрисовки одной и той же геометрии с измененными параметрами. Эта функция присутствовала и в некоторых реализациях WebGL 1, но требовала наличия определенного расширения. Наиболее часто эта функция применяется для создания систем частиц и растительности, но также довольно часто она используется для симуляции меха.
Умение писать графические шейдеры открывает перед вами всю мощь современных GPU, которые сегодня уже содержат в себе тысячи ядер, способных выполнять ваш код быстро и параллельно. Программирование шейдеров требует несколько иного взгляда на некоторые вещи, но открывающийся потенциал стоит некоторых затрат времени на его изучение.
Практически каждая современная графическая сцена являет собой результат работы некоторого кода, написанного специально для GPU — от реалистичных эффектов освещения в новейших ААА-играх до 2D-эффектов и симуляции жидкости.
Сцена в Minecraft до и после применения нескольких шейдеров.
Программирование шейдеров иногда кажется загадочной черной магией. Тут и там можно встретить отдельные куски кода шейдеров, которые обещают вам невероятные эффекты и, возможно, вправду способны их обеспечить — но при этом совершенно не объясняют, что именно они делают и как добиваются столь впечатляющих результатов. Данная статья попробует закрыть этот пробел. Я сфокусируюсь на базовых вещах и терминах, касающихся написания и понимания шейдерного кода, так что впоследствии вы сами сможете менять код шейдеров, комбинировать их или писать свои собственные с нуля.
Читать полностью »
Данная статья является четвертой в цикле про качественную разработку VR-проектов. Ранее мы уже изучили основы работы со звуком в статье «Звуковые эффекты в виртуальных мирах». Ссылки на другие материалы можно найти в обзорной статье.
User Interface — это прямое взаимодействие между человеком и машиной. Это средство, с помощью которого компьютер оповещает нас о возможностях, а мы передаем ему свои намерения.
Качество и предсказуемость общения в значительной степени влияют на то, как мы воспринимаем ПО и как быстро достигаем целей.
User Interface (UI) очень важен, и при разработке наших VR-проектов мы должны уделять внимание этому аспекту.
Особенно интересны в разработке виртуальной реальности новые способы взаимодействия: положение головы, направление взгляда и контроллеры движения на руках. Они предлагают нам, как разработчикам, новые варианты реализации интерфейса.
Но также возникают и новые проблемы, так как взаимодействие с этими устройствами намного сложнее — к примеру, клик мышкой намного проще распознать нежели неявный жест на контроллере.
Идеальный UI должен быть понятным, неброским и интуитивным, чтобы действия сами напрашивались. Как достичь этой высокой цели в VR-разработке, мы рассмотрим далее более подробно.
Данная статья является третьей в цикле про качественную разработку VR-проектов. Ранее мы уже изучили принципы оптимизации в статье «Рендеринг и оптимизация в VR-разработке». Ссылки на другие материалы можно найти в обзорной статье.
До сих пор звуковые эффекты играли при разработке ПО второстепенную роль и едва ли были заметны. Но при VR-разработке они становятся неотъемлемой составляющей проекта.
Правильное звуковое сопровождение VR-проекта значительно повышает погружение пользователя и усиливает эмоции.
Хороший VR-проект переносит нас в виртуальные миры и позволяет ощутить эту смоделированную реальность на эмоциональном уровне. Однако существуют определенные ожидания и, если наши проекты не смогут им соответствовать, погружение и правдоподобность пропадут.
Один из аспектов этих ожиданий — звуковые эффекты, которые возникают в реальной жизни. Когда стакан ставят на деревянный стол, нажимают на дверную ручку или проводят рукой по креслу — во всех этих ситуациях возникают звуки, которые мы, несомненно, ожидаем.
В классических играх или приложениях мы принимаем не такое большое участие, поэтому отсутствие звука беспокоит нас не так сильно. Но в VR все не так. Поэтому появляется новая проблема, но также и шанс перенести впечатления на новый уровень.
Тут нам пригодится тот факт, что мы знаем точное положение, и поворот головы, и, например, в случае Vive также положение рук по отношению к голове. О том, какие классные эффекты можно внедрить в свой проект, опираясь на эти данные, мы рассмотрим в конце статьи.
Сначала пробежимся по аппаратному и программному обеспечению и узнаем, почему даже сегодня при симуляции звука прибегают к обману.
Читать полностью »
Нынче в интернетах только и говорят об облаках, как они бесконечны и прекрасны… о серверах, которые они там видели… А ты? Вот и я решил поделиться с читателями своим опытом разработки онлайн сервиса проектирования помещений и интерьеров в 3D. Здесь я постараюсь рассказать об архитектуре проекта в целом и о деталях реализации.
