Процедурная генерация HTML5

Всем привет! Я начинающий разработчик веб игр и параллельно решил попробовать свои силы в написании полезных статей. Надеюсь материал будет вам полезен. Начнем с “Процедурной генерации”

Процедурная генерация HTML5

Процедурная генерация - это важный элемент в геймдизайне. С его помощью сегодня разрабатываются большие виртуальные миры. К примеру, в No Man’s Sky, Minecraft. Можно создавать качественные карты.

Данный инструмент может использоваться в разработке HTML5 игр. Данный язык программирования выделяется новым подходом к разметке. Мультимедийный контент здесь описывается самими средствами HTML5. Язык представляет собой мощную платформу для создания игр, которые можно запускать во всех современных браузерах.

Чтобы объяснить принцип гендерной генерации, нужно представить колоду таро. Из нее по правилам достаются карты. Так вы процедурно получите определенное предсказание. То же самое можно сказать об игровых мирах. Они генерируются из фрагментов одинакового размера.

Часто тайтлы используются при разработке карт для стратегий. Элементы могут имитировать разные типы ландшафта. Результат должен генерироваться случайным числом. Код необходимо "скормить" алгоритму, а он выдает карту как результат.

Какие еще способы процедурной генерации существуют?

Тайтлы - это не единственный способ, которым могут воспользоваться разработчики. Сегодня часто применяется шум Перлина. Изначально его использовали для создания достоверных текстур поверхностей. Здесь светлые участки принимаются за возвышенности. Далее мир наполняется прочими объектами:

  • персонажами;
  • флорой;
  • фауной.

Как работать осуществляется процедурная генерация в HTML5?

Существуют проверенные инструменты, которые выделяются высокой эффективностью. Среди простых и новых решений можно выделить Village Generation. С помощью такого ПО вы сможете генерировать деревню. Полученные изображения разрешается использовать по своему усмотрению. При разработке инструмента использовался Haxe и OpenFL.

Разработчики периодически совершенствуют свой продукт. К примеру, со временем были добавлены пруды, улучшились участки рядом с домами. Появилась возможность создавать карты сложной формы (не только квадратной), изолированные деревни.

Инструмент идеально подходит для тех, кто хочет познакомиться с тем, как работает процедурная генерация в HTML5. Со временем здесь появляются новые деревни и здания.

Если вы хотите сгенерировать планировку средневекового города. От вас требуется просто выбрать определенный размер. Здесь используются произвольные методы генерации. Цель заключается в создании красивой карты, а не точной модели. Чтобы открыть контекстное меню, нужно кликнуть правой кнопкой мыши.

Чтобы посмотреть трехмерную модель города, нужно экспортировать ее как файл в формате JSON. Импорт следует осуществлять в City Viewer. Полученные карты можно использовать по своему усмотрению. К примеру, при разработке HTML5 игр.

Для создания гористой местности существует инструмент Perlious Shores. Он сделан на OpenFL и Haxe. Разработчики особое внимание уделили геометрии объектов. После этого поработали над точками зрения и прочими визуальными особенностями. Также вы отметите высокое качество создаваемых лесных массивов.

Более продвинутое решение

Для создания городов можно использовать Procedural City Generator. К плюсам этого инструмента следует отнести возможность использования загруженных трехмерных моделей и изображений. Также ПО поддерживает:

  • файлы в форматах png, svg, svl;
  • псевдо 3D-зданий;
  • несколько цветовых тем (как у реальных карт) и рисованных стилей.

Чтобы разобраться в функционале, придется потратить много времени. Можно выбрать один из вариантов в папке "Стили". Если вы включите "zoomBuildings", то здания будут видны только при увеличении. К плюсам приложения относится то, что оно адаптировано под экраны с высоким показателем DPI. Для увеличения разрешения холста выберите в "Параметрах" пункт "highDPI".

Генерирование производится с применением тензорного поля. Вы можете редактировать его и просматривать готовые результаты. Удаляйте и добавляйте определенные элементы сетки. Можно генерировать здания, дороги, воду, анимации. В случае с последними элементами вам придется идти на компромисс между временем генерации и FPS.

Процедурная генерация HTML5

Надеюсь было интересно и понятно, всем спасибо!

22
Начать дискуссию