Блог xyz school
Как процедурная генерация помогает создавать открытые миры
Современные открытые миры в играх — это огромные пространства с реалистичными лесами и полями, городами и деревнями, тропинками и многополосными шоссе. Зачастую они выглядят настолько впечатляюще, что игроки всерьёз любуются виртуальными пространствами и делают десятки скриншотов. Фотографируя очередную поляну в рассветных лучах, игрок может и не догадываться, что она была сгенерирована автоматически.
Мы изучили доклады и презентации специалистов по генерации открытых миров, а также пообщались с программистом AAA-игр Александром Балакшиным, и теперь рассказываем, как работают эти алгоритмы, кому они могут пригодиться, и как их использовали в разработке The Witcher 3: Wild Hunt, Horizon Zero Dawn, The Sinking City и Spider-Man 2018-года.
Автор: Юрий Кулагин
Кому и зачем нужна генерация
Процедурная генерация в игровой индустрии используется давно. В Rogue, прародителе жанра roguelike, при помощи генерации создавали обширные уровни, — в дальнейшем этот подход стал стандартом для подобных игр. Diablo уже выстраивала с помощью алгоритмов целые многоуровневые катакомбы.
А разработчики The Elder Scrolls II: Daggerfall в 1996 году использовали процедурную генерацию, чтобы собрать из заготовленных частей пять тысяч городов. Разработчики доказали, что автоматизировать создание локаций возможно, — правда результат может получиться довольно однообразным.
The Elder Scrolls II: Daggerfall
Сейчас открытые миры стали настолько большими и проработанными, что создавать их вручную очень долго и дорого. Многие студии, стараясь избежать срыва сроков и внеплановых расширений штата, используют процедурную генерацию. В отличие от примитивных алгоритмов Daggerfall, современная процедурная генерация — это сложная система с множеством условий и параметров. А чтобы результат выглядел убедительно, эта система всегда контролируется живым человеком.
Александр Балакшин, геймплей-программист:
«Убедительность окружения зависит от самого генератора, — насколько тот подключает человека к работе, на каких правилах обучается, какой набор параметров использует. С определённой степенью проработки может получиться достаточно достоверный результат, который на глаз не отличить от работы художника.»
Разработчикам не стоит бояться массового пришествия процедурных алгоритмов. Логику генерации нужно настраивать вручную, а её результат всё же лучше пропустить через руки профессионалов, чтобы те могли переставить, убрать или добавить отдельные элементы.
Иногда процедурную генерацию использует лишь для создания наброска, на основе которого художники будут создавать локацию. В других случаях ей на откуп отдают большие, но однообразные пространства, ручная проработка которых превратилась бы в рутину.
Александр Балакшин, геймплей-программист:
«Работая с процедурной генерацией, нужно понимать, что ручную работу никто не отменял. Художники могут взять сгенерированный кадр и сказать: «Всё, конечно, хорошо, но отсюда это смотрится паршиво, оттуда — неестественно, а там вообще какая-то дичь». И они начнут потихоньку это исправлять. Так что генерация облегчает работу, но не заменяет соответствующих специалистов.»
Художники не останутся без работы ещё и потому, что в открытых мирах отлично работает принцип Парето — игрок активно изучает только 20% локации, а оставшиеся 80% служат фоном. Так что логичным шагом будет отдать проработку и заполнение этого фона на откуп алгоритмам, и дать художникам больше времени на проработку того, на что игрок обратит внимание.
Процедурная генерация облегчает работу не только художников по окружению. Многие современные алгоритмы используют итеративный подход, поэтому их можно применять на ранних этапах разработки. Левел-дизайнеры могут использовать итеративную генерацию для создания наглядных блокаутов, геймдизайнеры — чтобы проверять механики, на ходу добавляя новые.
Александр Балакшин, геймплей-программист:
«Процедурная генерация упрощает жизнь левел-артистам. Да и левел-дизайнерам, — поскольку они часто работают бок о бок. У них пропадает необходимость высаживать каждое дерево, многое можно сразу сгенерировать.
А с точки зрения геймплея не нужно ставить какой-то дикий грейбокс, чтобы обозначить лес, — он же вообще не будет отражать окончательный вариант. Одно дело — использовать грейбокс для здания, совсем другое — когда такой же кубик берут для леса.»
Ещё одно полезное свойство процедурной генерации, которым часто пользуются разработчики — экономия места. При размещении вручную каждый объект на карте получает свою координату, и в сумме эти значения могут занять много ресурсов. Сгенерированная растительность сохраняется в виде отдельной карты и занимает меньше места.
Кисти для процедурной растительности
Для The Witcher 3 разработчикам из CD Projekt RED нужно было создать мир, который в 35 раз превышал бы размер локаций второго «Ведьмака». Людей с опытом работы над полностью открытым миром не хватало, а приступить к созданию локаций нужно было как можно скорее.
Выход из ситуации нашла ответственная за движок команда, которая как раз искала необычные технические решения для своего инструментария. Вместо нескольких десятков художников фундамент для открытого мира «Дикой охоты» создали всего пять человек во главе с ведущим программистом Марчином Голлентом.
Александр Балакшин, геймплей-программист:
«На проектах всегда есть tools-инженеры, которые создают инструменты, облегчающие жизнь именно художникам, дизайнерам, левел-дизайнерам. Стоимость создания таких генераторов — зарплата этих инженеров. Но взамен студия освобождает много десятков человек, художников, часов — в больших компания это делается просто ради экономии времени и денег.»
Команда Голлента разработала систему, которая позволяла легко создавать огромные лесные пространства, на ходу смешивая текстуры и расставляя ассеты. Например, алгоритм умел создавать плавные переходы между материалами: на стыках двух поверхностей использовали сразу две текстуры, с которыми система работала индивидуально.
Программисты обучили алгоритм распознавать два типа поверхностей: к природным система относила почву, песок, каменистую местность, а к рукотворным — кирпич, брусчатку, бревенчатые стены. Это помогало по-разному накладывать эффекты на разные типы материалов — например, на стене дома снег выглядел не так, как на земле. Благодаря этому и получались плавные переходы — по краям дороги генератор складывал рукотворную текстуру брусчатки и природную текстуру земли так, что оставались видны контуры отдельных булыжников.
Процедурная генерация также распределяла по поверхности текстур небольшие объекты — камни или траву. Художникам потребовалось нарисовать всего десять видов травы, а алгоритмы подкрашивали их под цвет земли. Для этого левел-артисты использовали пигментную карту — текстуру локации с видом сверху в низком разрешении. Цвет конкретного поля или луга накладывался на траву градиентом, чтобы ближе к корням растительность была цвета земли, а выше сохранялся оригинальный цвет и не нарушался оттенок плодов и соцветий.
При этом в «Ведьмаке» процедурно сгенерированная трава не перекрывает детали исходной текстуры, а подчёркивает их. Для этого программу научили выделять на текстуре только те места, где что-то может расти. Например, если на вымощенной булыжником старой дороге местами проступает текстура земли, то трава вырастает только на этих участках.
В процессе генерации художники могли настраивать густоту травы. Этот параметр работал на двух уровнях. С одной стороны, он определял, насколько плоская текстура травы перекрывала исходную. С другой, настраивала непосредственно количество и высоту растительности. В зависимости от значений этого параметра художники могли легко создать и целиком заросший холм, и почти голую скалу с одинокими травинками.
Марчин Голлент, ведущий программист графики CD Projekt RED:
«Недостаточно просто добавить в движок генерацию текстур: всегда нужно прорабатывать и связанный с ней инстурментарий. Художникам нужна возможность отключать конкретные компоненты инструмента и управлять отдельными параметрами.» Источник
Для создания деревьев и кустарников художники CDPR использовали другой инструмент — кисти с набором растительности. Их можно было настраивать под конкретную локацию, указывая насыщенность местности водой, освещённость и даже направление, в котором могут распространятся семена.
Алгоритмы кистей распознавали особенности рельефа. Например, они учитывали, в каких местах вода во время дождя стекает по склонам в долины — там лес вырастал более густым. В процессе система сравнивала выбранный рельеф с рельефом соседних локаций, чтобы просчитать траекторию солнца и вычислить, сколько местность получает света.
Все собранные данные сравнивались с типами растительности, которые художники закладывали в кисть. Набор деревьев в кисти густого северного леса сильно отличался от кистей для светлых рощ на юге, а те, в свою очередь, от инструмента, рассчитанного на горную растительность.
Если для конкретного дерева не хватало воды или солнца, то кисть исключала этот тип из локации. Но даже если ресурсов было достаточно, объект всё равно сравнивался с заданными «идеальными условиями», и его размер менялся соответственно. Поэтому одна и та же кисть, применённая на долину у озера и на скалистый засушливый холм, выдавала разный результат.
Также эти кисти давали разный результат при разном количестве применений. Если художник использовал кисть на конкретном участке один раз, у него получался лёгкий подлесок: кустарник, отдельно стоящие деревья. Но если он повторял приём, эффект становился заметнее — кустарники разрастались, деревьев становилось больше, а сами они росли выше.
Марчин Голлент, ведущий программист графики CD Projekt RED:
«Представьте себе, что итерации — это такой дождь. Во время дождя вода падает с неба и стекает в низины, копится там, постепенно поднимаясь. То же самое и с итерациями — чем больше будет применений у нашего инструмента, тем пышнее получится растительность. Трава будет забираться вверх по холмам, вместо неё начнут появляться кусты, и так далее.» Источник
Your browser does not support the video tag.
Слои для процедурных биомов
Работая над Horizon Zero Dawn, программисты Guerrilla Games тоже использовали процедурную генерацию. Художники студии привыкли контролировать каждую деталь на локации ещё во времена работы над серией Killzone. Поэтому и в новой игре они хотели иметь возможность поменять результат генерации — например, передвинуть гору, которую алгоритм поставил неправильно
В результате студия разработала систему, которая поддавалась тонкой настройке и редко ошибалась с размещением объектов. В основе этой системы лежали слои.
Александр Балакшин, геймплей-программист:
«В Horizon: Zero Dawn художники создали карты дорог, высот, рек и растительности. В зависимости от биома между этими картами выстраивается определённая логика взаимодействия. В них хранится информация о плотности: чёрные значения означают, что в конкретной точке не может быть растительности, белые — что в ней должно быть максимальное количество растительности.»
Главным слоём служила карта растительности, на которой художники отмечали, где должен расти лес и насколько густым он должен быть. Эта карта накладывалась на другие карты местности, после чего алгоритм сравнивал значения в конкретных точках. Если даже через очень густой лес проходила дорога или река, система сама изменяла параметры так, чтобы под водой не росла трава, а кусты постепенно редел на подходах к тропинке.
Чтобы сгенерированные локации не просто работали, но и выглядели разнообразно, художникам студии потребовалось создать множество ассетов и шаблонов растительности, — но это всё равно оказалось быстрее и выгоднее, чем ручная проработка мира. Три человека в Guerrilla Games нарисовали 500 типов растений, а шаблонами занимался один технический художник.
Настроив параметры генерации один раз, художники студии могли легко создавать определённые сочетания растительности в разных частях локации. Алгоритм одинаково успешно работал и с густыми лесами, и с состоящими из травы и кустарника полями.
Your browser does not support the video tag.
Чтобы модели растительности не мешали друг другу, для каждой указывался footprint — отпечаток, задающий минимальное расстояние между объектами одного типа. А чтобы результат не выглядел искусственно, художники настраивали отдельный параметр, который хаотично разбрасывал цифры и менял логику размещения. Зачастую локацию потом отдавали художникам, чтобы те могли вручную её отредактировать.
Александр Балакшин, геймплей-программист:
«Практика показывает, что живым людям всё равно приходится смотреть на результат генерации и дорабатывать его, чтобы всё было идеально. Хотя если какой-то кусок сгенерированной локации прошёл все плейтесты и не вызвал нареканий, то его лишний раз трогать, конечно, не будут.»
В Horizon: Zero Dawn игрок исследует множество разных биомов, — от среднеевропейских лесов до заснеженной тундры. Сами разработчики называли их «экотопами»: с точки зрения инструмента генерации это были просто наборы настроек для создания локации.
Параметры биомов затрагивали не только типы ассетов, но и их распределение, а также погоду, визуальные и звуковые эффекты. Поэтому результат генерации двух разных экотопов даже на одной локации выглядел по-разному — джунгли на конкретной горе сильно отличались от обычного леса в той же локации и по типам растений, и по их распределению.
Система работала и с геймплейными элементами. Например, при помощи отдельного инструмента художники могли размещать на локации специальный «стелс-кустарник», в котором игрок прятался от врагов. Его расстановка и логика тоже подчинялись общим правилам — в воде или на дороге кусты не генерировались.
Причём этот инструмент не закреплял объекты на локации намертво. Сгенерированная растительность автоматически подстраивалась под изменения, которые вносили художники. Это упрощало ручную правку локации — если переместить или изменить тропу в лесу, растительность вокруг неё изменялась сама.
Яаап ван Мюжден, старший технический программист Guerrilla Games:
«Процедурную генерацию в Horizon Zero Dawn мы использовали везде, где только могли — для ассетов, эффектов, даже геймплейных элементов. И результат выглядел очень здорово: он полностью вписывался в видение арт-директора.
Даже те локации, до которых не добирались руки наших художников, выглядели полностью готовыми — их можно было брать и сразу вставлять в финальную версию игры.» Источник
Your browser does not support the video tag.
Сетка для процедурного города
Чтобы построить большой и реалистичный город в The Sinking City, студия Frogwares создала инструмент процедурной генерации для Unreal Engine 4. По словам Константина Якушенко, который возглавляет в компании команду tools-инженеров, разработчики вдохновлялись конструктором Ubisoft, с помощью которого создавали здания и улицы в Assassin's Creed Unity и Syndicate.
Процедурная генерация в города в The Sinking City начиналась с ручной работы. Художники создавали «сетку», — макет основных улиц и ориентиров — и указывали, какие типы домов могут находиться в том или ином районе. А ландшафт, рельеф и ширина улиц определялись лишь предварительно.
Только когда «сетка» была завершена, в дело вступала процедурная генерация. Инструмент расставлял вдоль улиц объекты архитектуры, собирая их из созданных художникам ассетов. Ассеты делились на категории: конкретные окна могли относиться только к богатому или, наоборот, бедному дому, а материал стен — к целому или разрушенному. Алгоритм брал за основу данные о улицах, которые задавали художники, и создавал постройки на их основе.
Так как инструмент не создавал новые модели, а собирал их сочетания, художники могли свободно редактировать результат. Если в ходе разработки создавались новые материалы, окна или вывески,то их можно было быстро добавить в уже созданное на уровне здание.
Your browser does not support the video tag.
Константин Якушенко, главный tools-инженер Frogwares:
«Моделер выбирает архитектурный стиль, высоту и ширину здания, нажимает кнопочку и редактор собирает дом. Потом моделер может внести правки — поменять стену, использовать другое окно, увеличить этажность или ширину, добавить деталей.
Самое приятное, что ему не нужно для этого создавать ничего нового или работать с контент-браузером — всё делается по щелчку мышки.» Источник
Когда все правки были внесены, редактор объединял детали здания в четыре фасада, которые сохранял по отдельности. Фрагментированное хранение зданий потом помогло разработчикам оптимизировать игру.
Your browser does not support the video tag.
Алгоритмы для процедурных улиц
В Spider-Man большая часть 18 квадратных километров виртуального Манхэттена создана процедурной генерацией. В Insomniac Games стремились к тому, чтобы не менее 80% работы алгоритмов попало в финальную игру, и поэтому прорабатывали систему генерации особенно тщательно.
Как и Frogwares, разработчики начали работу над процедурным городом с разметки. На первом этапе создания мира на карту наносились основные улицы, границы локаций и места для сюжетных миссий. На втором в дело вступала уже непосредственно процедурная генерация: система сама расставляла по улицам здания и украшала их деталями. На третьем этапе художники дорабатывали отдельные места вручную.
Процедурная генерация в Spider-Man использовалась не только для создания улиц и архитектуры. Ей доверили также создание реалистичного трафика, пешеходов, звуков и мелких деталей на локации.
Со зданиями алгоритм работал поэтапно. Сначала из простых форм (кубов, цилиндров) генерация расставляла простые болванки вдоль улиц, опираясь на заданные художниками этажность и размеры. Затем, используя ассеты для нужного района или типа строения, система размещала на «коробках» внешний декор — вывески, окна и лестницы.
Результат проверяли художники и, если комбинация элементов выглядела неестественно, переставляли их вручную. Например, очень часто дизайнеры переделывали крыши — поверхность, которая регулярно попадает в поле зрения игрока.
Александр Балакшин, геймплей-программист:
«Как и у любой программы, ошибки у генераторов случаются. Это зависит от того, как долго технология находится в обороте у студии, сколько людей над ней работают, сколько ошибок уже поймано. Могут встречаться и висящие в воздухе деревья, и кусты под землёй, и всё что угодно.
Это скорее исключение, чем правило, но это исключение обязательно найдут игроки. Поэтому и нужны люди, которые проверяют результат работы генератора и следят за качеством.»
С автомобильным движением генерация работала по-другому — тут у алгоритма было больше свободы. Так как художники наносили на карту только самые узнаваемые проспекты и улицы реального Нью-Йорка, создание небольших переулков ложилось на плечи системы.
Алгоритм использовал заданные художниками параметры: ширину дорог, количество полос, направление движения по ним. На их основе он создавал новые улицы в тех местах, где это было бы логично с точки зрения транспортной проходимости. При этом тихие улочки оставались тихими, а большие проспекты — шумными и загруженными.
Дэвид Сантьяго, ведущий технический художник Insomniac Games:
«Изначально мы задали параметры только для больших проспектов, а процедурная система выстроила остальные улицы, настроив полосы движения и разметку.
Мы могли этим управлять — например, задать параметры в духе «хотим, чтобы 70% улиц были односторонними, а 70% от них — с одной полосой для движения и одной — для парковки». И система бы просто прошлась по всему городу и создала реалистичный трафик по заданным параметрам.» Источник
Генерация управляла не только прокладыванием новых улиц, но и количеством машин на них. Алгоритм учитывал возможные объезды, правила парковки, фазы светофора и многое другое, чтобы создать реалистичное автомобильное движение и атмосферно гудящие пробки.
Пешеходы тоже были частью этой системы. Генерация распределяла их так, что многие прохожие оказались практически статичными объектами — они могли перемещаться только в небольшом радиусе от точки появления, поэтому на общий трафик не влияли. Динамичные же пешеходы активно перемещались по городу и взаимодействовали с транспортом — пропускали машины, пользовались переходами.
Процедурные алгоритмы в Spider-Man умели создавать не только статичные элементы окружения, такие как канализационные люки, клумбы и заборы. Используя данные о пешеходах и транспорте, система создавала и динамичный декор. Она расставляла светофоры там, где движение было наиболее плотным, а фонари — на тех улицах, где ночью было темнее всего. Все эти элементы включались, выключались и активно взаимодействовали с окружением.
Система генерации помогала и с игровыми механиками. Алгоритмы следили, чтобы на локациях всегда хватало интерактивных объектов, которые главный герой мог бы швырять в противников. Также система процедурно размещала на карте побочные задания: алгоритм проверял, достаточно ли в конкретной точке места для события и для сражения, после чего генерировал всё необходимое.
Дэвид Сантьяго, ведущий технический художник Insomniac Games:
«Например, если в задании участвуют противники с реактивными ранцами, алгоритм должен найти в городе подходящую крышу, чтобы на ней было минимум 64 квадратных метра свободного пространства. А примерно в сорока метрах от неё обязательно должны быть ещё две крыши такого же размера, отличающиеся на пару метров по высоте. Система проходилась по всей карте, учитывала плотность событий и доступные маршруты для противников, а потом расставляла в подходящих местах побочные задания.» Источник
Тесная связь разных систем генерации оказалось и одной из проблем разработки Spider-Man, — она создавала эффект домино. На ранних этапах создания мира у геймдизайнеров был готов лишь ограниченный набор механик, а акробатика была добавлена лишь частично. Сюжет игры тоже регулярно дополняли и переписывали, из-за чего менялись важные для истории локации.
Изменения на этих этапах вносились регулярно, а сгенерированный мир умел сам к ним адаптироваться. Но связанные подсистемы генерации меняли сразу слишком много всего: добавленный для сюжетной миссии переулок изменял размеры соседнего здания, из-за этого алгоритмы переставляли парковки и тротуары, а уже из-за них менялось расположение светофоров и переходов на нескольких соседних улицах.
Чтобы свести подобные случаи к минимуму, tools-инженерам студии пришлось переработать генерацию. Новый вариант работал модульно и слабее связывал разные элементы локации. Поменяв тот же переулок в новой системе, художники могли столкнуться с изменённой планировкой квартала, но никак не переработкой целого района.
Дэвид Сантьяго, ведущий технический художник Insomniac Games:
«Мы быстро поняли, что чёткие алгоритмы это хорошо, но гибкость разработки — ещё лучше. Поэтому мы создали иерархию для всего процедурного контента в игре, чтобы уменьшить связь между разными уровнями генерации. Ассеты одного типа — например, светофоры и фонари, — группировались в модуль, которому присваивались свои связи и иерархия. Благодаря этому мы точно знали, что если мы поставим лишний светофор, то он не поменяет нам всю улицу.» Источник
Также пришлось продумать и изменить сам пайплайн создания открытого мира. Художники Insomniac Games хотели тонко контролировать сюжетные задания и основные локации в игре. Они регулярно добавляли новые элементы, текстуры и декоративные объекты, которые генерация подхватывала и распределяла по уже готовой локации.
Чтобы сделанная вручную часть окружения не страдала от подобных изменений, её «замораживали» — после того, как художники и дизайнеры вносили все необходимые правки, алгоритму запрещали доступ к конкретному участку. Причём вместе с, например, зданием, «замораживался» и ближайший к нему тротуар и улица, — чтобы последующие изменения не создали новых конфликтов.
С чего начать
Процедурная генерация — не привилегия больших студий и огромных бюджетов. Ей вполне могут пользоваться и небольшие команды, и даже независимые разработчики. Весь вопрос — в масштабах.
Сгенерировать небольшую рощу или деревню на десять жителей сможет любой современный компьютер. Преимущество больших студий в том, что у них хватает вычислительных мощностей на создание огромных лесов и городов. Даже у очень мощной системы такая задача может занять несколько часов.
Если небольшой команде всё же нужно сгенерировать большое пространство, тут можно использовать несколько уловок. Систему генерации можно запускать на так называемых «ночных билдах», когда офисные компьютеры всё равно простаивают. Десяти часов хватит на создание большой локации, и к утру версия мира будет готова для тестирования. Минус этого подхода в том, что новые версии можно будет создавать не чаще, чем раз в день.
Your browser does not support the video tag.
Также открытый мир можно разбить на отдельные ячейки и генерировать их по отдельности. Логика генерации и основные алгоритмы в этом случае всё равно задаются один раз на всю карту, но создание каждого участка происходит индивидуально. Это позволяет распределить процесс между несколькими компьютерами, но может создать неаккуратные переходы между ячейками.
Студиям необязательно разрабатывать собственные инструменты для процедурной генерации с нуля. Существуют уже готовые решения, которые пользуются спросом не только в игровой, но и в киноиндустрии. Например, разработчики из Guerilla Games сначала создали рельеф мира для Horizon Zero Dawn в процедурном генераторе World Machine, после чего импортировали результат в свой движок и уже там применяли разработанные инструменты.
Стандартом в индустрии считаются World Machine и World Creator. World Machine использует только за счёт процессора, не подключая ресурсы видеокарты. World Creator считается удачным выбором для новичков, так как предлагает дружелюбный интерфейс, но страдает от нехватки глубоких настроек.
В 2019 году вышел процедурный генератор QuadSpinner Gaea, который не уступает по мощности и проработке своим аналогам, а также предлагает умные алгоритмы и инструменты. Архитектура программы позволяет удобно работать с рельефом в реальном времени, а структура похожа на привычный для многих разработчиков Unreal Engine.
Начинающим разработчикам стоит обратить внимание и на отдельные инструменты для движков. И для Unreal Engine, и для Unity есть специальные генераторы и плагины, позволяющие создавать убедительную растительность, не выходя из привычной рабочей среды. А система Houdini сразу включает в себя и 3D-редактор, и програмную среду, и генераторы рельефа и растительности.
Александр Балакшин, геймплей-программист:
«Генерация рельефа, городов и лесов — это пройденный этап. Будущее за генерацией окружения, домов и комнат, то есть за счёт более проработанной генерации — той самой, пришествия которой так боятся левел-артисты.»А это примерно то, что показывает Promethean AI.
Promethean AI — это интеллектуальная палитра и процедурный генератор, совмещённые в одной программе. Её создаёт бывший технический арт-директор Sony Interactive и Naughty Dog Андрей Максимов, а его основная цель — исключить рутину из творческого процесса художников по окружению.
В основе Promethean AI лежит распознавание типа ассетов. Система понимает, какой объект в неё добавлен, в каком стиле он выполнен и для чего используется. После чего сравнивает собранную информацию с поставленной задачей и решает, подойдёт ли элемент локации или нет. Размещением объектов тоже занимается алгоритм — он, например, следит, чтобы настольная лампа стояла на столе, а одеяло лежало на кровати.
Художник может сам «обучать» эти алгоритмы. Для этого нужно расположить несколько объектов в сцене и задать общий стиль, — а остальное пространство достроит генерация. При этом навыков программирования не требуется — система специально создаётся так, чтобы её могли использовать разработчики любых специальностей.
Александр Балакшин, геймплей-программист:
«Promethean AI — это своего рода искусственный интеллект, который использует классификацию ассетов. Он создаёт интеллектуальную базу данных, по которой художник может делать произвольные выборки. Например, можно сказать: «Покажи мне все жёлтые стулья, в которых больше миллиона треугольников». И система покажет только нужные объекты.»
Promethean AI ещё находится в разработке, но ходят слухи, что им уже начинают пользоваться некоторые крупные студии. Прежде чем программа официально выйдет, её создателям нужно ещё отточить интеллект алгоритмов и обучить систему на множестве объектов — чем больше примеров узнает Promethean AI на этапе разработки, тем лучше будут его результаты после релиза.
Your browser does not support the video tag.
Программы для процедурной генерации постепенно становятся умнее. Tools-инженеры крупных студий и находчивые инди-разработчики развивают и углубляют соответствующие инструменты, экспериментируя с разными подходами. Генерация рельефа, растительности и улиц уже стала стандартом индустрии, созданием интерьеров через несколько лет тоже никого не получиться удивить.
Всё это ведёт к тому, что процедурные алгоритмы смогут легко и быстро «закрашивать» огромные пространства. А чем убедительнее они будут это делать, тем больше времени и сил останется у человека на проработку самых важных деталей и локаций.
Хочешь получать лучшие статьи
от XyZ раз в неделю?
Подпишись на рассылку XyZ
Нажимая на кнопку, вы соглашаетесь с условиями обработки данных
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="google-site-verification" content="3W5japOowboLNjQ8sge1sGCJaL2OOmBZVhLGCNoRjlw" /> <meta name="yandex-verification" content="007f18c3f91cd6ed" /> <!--metatextblock--> <title>Как процедурная генерация помогает создавать открытые миры. Алгоритмы генерации.</title> <meta name="description" content="Программист ААА-проектов рассказывает как создаются игры с процедурно-генерируемым миром. Какие алгоритмы и программы помогут сгенерировать небольшую деревню или целый город." /> <meta name="keywords" content="процедурная генерация в играх, генерация открытых миров в играх, александр балакшин, процедурная генерация мира, процедурная генерация города, игры с процедурной генерацией, генерация игрового мира, игры с процедурно-генерируемым миром, как используют про" /> <meta property="og:url" content="https://www.school-xyz.com/blog/kak-procedurnaya-generaciya-pomogaet-sozdavat-otkrytye-miry" /> <meta property="og:title" content="Как процедурная генерация помогает создавать открытые миры. Алгоритмы генерации." /> <meta property="og:description" content="Программист ААА-проектов рассказывает как создаются игры с процедурно-генерируемым миром. Какие алгоритмы и программы помогут сгенерировать небольшую деревню или целый город." /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild6234-3161-4530-b566-306664313033/Cover-1.png" /> <link rel="canonical" href="https://www.school-xyz.com/blog/kak-procedurnaya-generaciya-pomogaet-sozdavat-otkrytye-miry"> <!--/metatextblock--> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://ws.tildacdn.com"> <link rel="dns-prefetch" href="https://static.tildacdn.com"> <link rel="shortcut icon" href="https://static.tildacdn.com/tild6462-6438-4164-b332-316331666365/favicon.ico" type="image/x-icon" /> <!-- Assets --> <script src="https://neo.tildacdn.com/js/tilda-fallback-1.0.min.js" async charset="utf-8"></script> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"/> <link rel="stylesheet" href="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page12619389.min.css?t=1772097604" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-animation-2.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-cover-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-forms-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" type="text/css" href="https://ws.tildacdn.com/project1006203/custom.css?t=1772097604"> <script nomodule src="https://static.tildacdn.com/js/tilda-polyfill-1.0.min.js" charset="utf-8"></script> <script type="text/javascript">function t_onReady(func) {if(document.readyState!='loading') {func();} else {document.addEventListener('DOMContentLoaded',func);}}
function t_onFuncLoad(funcName,okFunc,time) {if(typeof window[funcName]==='function') {okFunc();} else {setTimeout(function() {t_onFuncLoad(funcName,okFunc,time);},(time||100));}}function t_throttle(fn,threshhold,scope) {return function() {fn.apply(scope||this,arguments);};}function t396_initialScale(t){var e=document.getElementById("rec"+t);if(e){var i=e.querySelector(".t396__artboard");if(i){window.tn_scale_initial_window_width||(window.tn_scale_initial_window_width=document.documentElement.clientWidth);var a=window.tn_scale_initial_window_width,r=[],n,l=i.getAttribute("data-artboard-screens");if(l){l=l.split(",");for(var o=0;o<l.length;o++)r[o]=parseInt(l[o],10)}else r=[320,480,640,960,1200];for(var o=0;o<r.length;o++){var d=r[o];a>=d&&(n=d)}var _="edit"===window.allrecords.getAttribute("data-tilda-mode"),c="center"===t396_getFieldValue(i,"valign",n,r),s="grid"===t396_getFieldValue(i,"upscale",n,r),w=t396_getFieldValue(i,"height_vh",n,r),g=t396_getFieldValue(i,"height",n,r),u=!!window.opr&&!!window.opr.addons||!!window.opera||-1!==navigator.userAgent.indexOf(" OPR/");if(!_&&c&&!s&&!w&&g&&!u){var h=parseFloat((a/n).toFixed(3)),f=[i,i.querySelector(".t396__carrier"),i.querySelector(".t396__filter")],v=Math.floor(parseInt(g,10)*h)+"px",p;i.style.setProperty("--initial-scale-height",v);for(var o=0;o<f.length;o++)f[o].style.setProperty("height","var(--initial-scale-height)");t396_scaleInitial__getElementsToScale(i).forEach((function(t){t.style.zoom=h}))}}}}function t396_scaleInitial__getElementsToScale(t){return t?Array.prototype.slice.call(t.children).filter((function(t){return t&&(t.classList.contains("t396__elem")||t.classList.contains("t396__group"))})):[]}function t396_getFieldValue(t,e,i,a){var r,n=a[a.length-1];if(!(r=i===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+i)))for(var l=0;l<a.length;l++){var o=a[l];if(!(o<=i)&&(r=o===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+o)))break}return r}window.TN_SCALE_INITIAL_VER="1.0",window.tn_scale_initial_window_width=null;</script> <script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js" charset="utf-8" defer onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page12619389.min.js?t=1772097604" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-lazyload-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-animation-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-cover-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-vote-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-popup-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zoom-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-scale-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-events-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <!-- nominify begin --><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Курс геймдев",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 5.0,
"ratingCount": 3719,
"reviewCount": 3828
}
}
</script> <script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "XYZ",
"item": "https://www.school-xyz.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Курсы",
"item": "https://www.school-xyz.com/courses"
},
{
"@type": "ListItem",
"position": 3,
"name": "💥Скидки до 50%",
"item": "https://www.school-xyz.com/courses#all"
}
]
}
</script> <script>
// скрипт для стилизации попапов с работами студентов при переходе по прямой ссылке на этот попап
if (window.location.pathname.includes('/tpost')) {
$('head').append('<link rel="stylesheet" href="https://landing-cdn.school-xyz.com/tpostTildaStyle.css?v=1" type="text/css">');
}
</script> <script>
document.addEventListener('DOMContentLoaded', function() {
var allRec = document.getElementById('allrecords');
if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
});
</script> <script type="text/javascript" id="advcakeAsync">
(function (a) {
var b = a.createElement("script");
b.async = 1;
b.src = "//0gs25f.ru/";
a=a.getElementsByTagName("script")[0]; a.parentNode.insertBefore(b,a)
})(document);
</script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/promosTildaScript.js?v=4"></script> --> <!-- отвечает за работу промобара --> <!-- <link rel="stylesheet" href="https://learn.school-xyz.com/tilda-static/public/promosTildaStyle.css?v=7"> --> <!-- стили для промобара --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/saveUrlGetParamsTildaScript.js"></script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsSubmittionTildaScript.js"></script> --> <!-- что-то про регистрацию на интро курсы --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/platformDataAutoFillTildaScript.js?v=8"></script> <!-- автоматизация цен, рассрочка, даты, скидка... --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/preValidatePhoneTildaScript.js"></script> <!-- валидация телефонного номера для любых форм на страницах --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsAutoFillTildaScript.js"></script> <!-- автозаполнение форм, только имя и почта --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formValidateYmClientTildaScript.js"></script> <!-- модуль CPA-интеграций https://t.me/dmitmix --> <script>
const script = document.createElement('script');
script.src = `https://landing-cdn.school-xyz.com/js/xyzCpa.js?v=${Date.now()}`;
document.head.appendChild(script);
</script> <!-- Solo Start --> <script src="https://sologpt.ru/xyz_integration/sologpt.iife.js" defer></script> <!-- Solo End --> <!-- Carrot quest BEGIN --> <script type="text/javascript">
!function(){function t(t,e){return function(){window.carrotquestasync.push(t,arguments)}}if("undefined"==typeof carrotquest){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.carrotquest.app/api.min.js",document.getElementsByTagName("head")[0].appendChild(e),window.carrotquest={},window.carrotquestasync=[],carrotquest.settings={};for(var n=["connect","track","identify","auth","onReady","addCallback","removeCallback","trackMessageInteraction"],a=0;a<n.length;a++)carrotquest[n[a]]=t(n[a])}}(),carrotquest.connect("68058-4eec889da0f5c5a357581273a3");
</script> <!-- Carrot quest END --> <!-- UE admin BEGIN --> <link rel="stylesheet" href="https://tilda.ultimate.education/styles.css"> <script type="text/javascript" src="https://tilda.ultimate.education/index.js" apiUrl="https://product.it.ultimate.education" id="replacer" school="XYZ" currency="RUB" apiVersion="v3"></script> <!-- UE admin END --> <script>
/* привязка виджета чата к скролу, чтобы не было наложения с промобаром */
function findChatWidget() {
let chatWidget = $('#carrotquest-messenger-collapsed-container');
let promoBar = document.querySelector('.uc-promobar');
if (chatWidget.length == 1 && promoBar !== null) {
console.log('виджет чата и промобар найдены!');
if (promoBar.clientHeight != 0) {
let promobarHeight = promoBar.clientHeight + 8;
console.log('Высота промобара: ' + promobarHeight);
document.querySelector('.t-body').style.setProperty('--dynamic-bottom', ' ' + promobarHeight + 'px');
$('.promobar__hide-btn').on('click', function() {
$('.t-body').addClass('hide-promobar');
});
let scrolledAmo = $(document).scrollTop();
let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) {
$('.t-body').addClass('show-promobar');
} else {
$('.t-body').removeClass('show-promobar');
}
$(document).scroll(function() {
let scrolledAmo = $(document).scrollTop();
let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) {
$('.t-body').addClass('show-promobar');
} else {
$('.t-body').removeClass('show-promobar');
}
});
}
} else {
setTimeout(function() {
console.log('виджет чата и/или промобар не найдены');
findChatWidget();
}, 1000);
}
}
findChatWidget();
/* end привязка виджета чата к скролу, чтобы не было наложения с промобаром */
</script> <!-- Pixel victorycorp --> <script type="text/javascript">
(function (d, w) {
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://victorycorp.ru/index.php?ref="+d.referrer+"&page=" + encodeURIComponent(w.location.href);
n.parentNode.insertBefore(s, n);
})(document, window);
</script> <!-- /Pixel victorycorp --><!-- nominify end --><script type="text/javascript">window.dataLayer=window.dataLayer||[];</script> <!-- Google Tag Manager --> <script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KTCCH4H');</script> <!-- End Google Tag Manager --> <script type="text/javascript">(function() {if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false&&typeof(sessionStorage)!='undefined'&&sessionStorage.getItem('visited')!=='y'&&document.visibilityState){var style=document.createElement('style');style.type='text/css';style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';document.getElementsByTagName('head')[0].appendChild(style);function t_setvisRecs(){var alr=document.querySelectorAll('.t-records');Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_animated");});setTimeout(function() {Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_visible");});sessionStorage.setItem("visited","y");},400);}
document.addEventListener('DOMContentLoaded',t_setvisRecs);}})();</script></head> <body class="t-body" style="margin:0;"> <!--allrecords--> <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="12619389" data-tilda-page-alias="blog/kak-procedurnaya-generaciya-pomogaet-sozdavat-otkrytye-miry" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <!--header--> <header id="t-header" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="20568317" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec1229679181" class="r t-rec" style=" " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- НОВЫЙ ХЕДЕР от 15.08.25 --> <!-- 17.09.25 замена всех иконок и картинки в блоке с тестом. Удаление пункта меню Вебинары --> <!-- 19.12.25 заменил пункт меню Бесплатные курсы на Вводный урок с консультантом --> <div class="header__overlay" style="display: none"></div> <header class="header__container"> <div class="header__wrapper"> <a href="/" class="header__logo"> <img class="header__logo_dark" src="https://static.tildacdn.com/tild3538-3936-4030-a562-643962313938/Logo-dark.svg" alt="XYZ School logo"> </a> <nav class="header__items-container"> <ul class="header__items-wrapper"> <li class="header__item header__item-all-courses"> <div class="header__item-link">Все курсы</div> </li> <li class="header__item"> <a href="https://www.school-xyz.com/trial-lesson" class="header__item-link">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </nav> <div class="menu burger-btn"> <div class="icon-left"></div> <div class="icon-right"></div> </div> </div> <div class="menu__wrapper"> <div class="menu-left"> <nav class="menu-left__course-direction"> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/courses" class="menu-left__course-direction-link" data-direction-name="all-courses"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3434-6264-4637-a535-373532313833/Frame_2087329259_1.jpg" alt="Иконка направления Все курсы"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Все курсы</div> <div class="menu-left__course-direction-quontity-courses">37 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/3d-modelirovanie" class="menu-left__course-direction-link" data-direction-name="3d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6632-3831-4331-a264-636330373331/3D-_1.jpg" alt="Иконка направления 3D-моделирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">3D-моделирование</div> <div class="menu-left__course-direction-quontity-courses">15 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/2d-illyustraciya" class="menu-left__course-direction-link" data-direction-name="2d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3830-3537-4234-b833-633466333735/2D-_1.jpg" alt="Иконка направления 2D-иллюстрация"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">2D-иллюстрация</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/geymdizayn" class="menu-left__course-direction-link" data-direction-name="gamedesign"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3461-3239-4635-a138-383032306664/gamedesign_1.jpg" alt="Иконка направления Геймдизайн"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Геймдизайн</div> <div class="menu-left__course-direction-quontity-courses">4 курса</div> </div> </a> </li> </ul> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/programmirovanie" class="menu-left__course-direction-link" data-direction-name="gamecode"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6533-3234-4231-a361-356136613038/_1.jpg" alt="Иконка направления Программирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Программирование</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/video-i-speceffekty" class="menu-left__course-direction-link" data-direction-name="vfx"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6562-3931-4937-b035-363239373230/___1.jpg" alt="Иконка направления Видео и спецэффекты"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Видео и спецэффекты</div> <div class="menu-left__course-direction-quontity-courses">3 курса</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/menedzhement" class="menu-left__course-direction-link" data-direction-name="business"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3165-6365-4236-b463-643730363733/management_1.jpg" alt="Иконка направления Менеджмент"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Менеджмент</div> <div class="menu-left__course-direction-quontity-courses">1 курс</div> </div> </a> </li> </ul> </nav> </div> <div class="menu-right"> <div class="menu-right__test-tags-wrap"> <div class="menu-right__test-tag">Тест</div> <div class="menu-right__test-tag">5 минут</div> </div> <h3 class="menu-right__test-heading">Какая профессия тебе подходит?</h3> <a href="https://www.school-xyz.com/proforientaciya" class="menu-right__test-button">Пройти тест</a> </div> <div class="menu-left__bottom-info"> <ul class="menu-left__bottom-info-list"> <li class="menu-left__bottom-info-link"> <a href="https://www.school-xyz.com/trial-lesson" target="_blank">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </div> </div> </header> <style>
:root header {
font-family: 'BebasRoboto';
--color-bg: #17171b;
--color-bg-menu-open: #23232A;
--color-text: #fff;
--color-bg-lk-btn: #2b2b34;
--color-text-opacity: rgb(206 206 222 / 50%);
--color-accent: #8e8eff;
--color-black: #17171b;
--color-border: #373742;
--color-burger-line: #fff;
--color-burger-bg: #22222e;
--color-button: #6060ff;
}
#allrecords header ul {
padding-left: 0;
margin-bottom: 0;
}
#allrecords header a {
color: inherit;
}
.header__overlay {
position: fixed;
inset: 0;
cursor: pointer;
z-index: 998;
background: rgb(0 0 0 / 50%);
-webkit-tap-highlight-color: transparent;
}
/* Бургер меню */
.burger-btn {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
top: 0;
left: 0;
transition-duration: 0.5s;
border-radius: 22px;
cursor: pointer;
transform: scale(0.8);
visibility: visible;
opacity: 1;
}
.burger-btn.open {
background: var(--color-burger-bg);
visibility: visible;
opacity: 1;
}
.burger-btn .icon-left {
transition-duration: 0.5s;
position: absolute;
width: 12px;
height: 2px;
top: 19px;
background-color: var(--color-burger-line);
left: 9px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left {
transition-duration: 0.3s;
background: transparent;
}
.burger-btn .icon-left:before {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: -8px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left:before {
transform: rotateZ(45deg) scaleX(1.1) translate(2.5px, 2px);
}
.burger-btn .icon-left:after {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: 8px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left:after {
transform: rotateZ(-45deg) scaleX(1.1) translate(2.5px, -2px);
}
.burger-btn .icon-right {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
top: 19px;
background-color: var(--color-burger-line);
left: 21px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right {
transition-duration: 0.3s;
background: transparent;
}
.burger-btn .icon-right:before {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: -8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right:before {
transform: rotateZ(-45deg) scaleX(1.1) translate(-3.5px, 1px);
}
.burger-btn .icon-right:after {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right:after {
transform: rotateZ(45deg) scaleX(1.1) translate(-3.5px, -1px);
}
/* Конец бургер меню */
header.header__container {
position: fixed;
background: transparent;
width: 100%;
z-index: 999;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: border-radius 0.3s ease, background 0.3s ease 0.3s, transform 0.3s ease;
overflow: hidden;
box-sizing: border-box;
}
header.header__container.open {
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background: var(--color-bg-menu-open);
transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}
header.header__container.main-header--bg_scroll {
background: var(--color-bg);
transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}
header.header__container.main-header--bg_scroll.open {
background: var(--color-bg-menu-open);
}
header.header__container.out {
transform: translateY(-100%);
}
header.header__container.open.out {
transform: none;
}
header a {
color: inherit;
text-decoration: none;
}
header ul {
list-style: none;
}
.header__wrapper {
position: relative;
display: flex;
max-width: 1160px;
margin: 0 auto;
padding: 20px 0;
}
.header__wrapper:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: var(--color-border);
opacity: 0;
}
.header__container.open .header__wrapper:after {
opacity: 1;
transition: .3s ease;
}
a.header__logo {
display: flex;
margin-right: 48px;
}
.header__items-container {
display: flex;
justify-content: space-between;
width: 100%;
margin-right: 10px;
}
ul.header__items-wrapper {
display: flex;
align-items: center;
column-gap: 40px;
}
li.header__item {
position: relative;
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: var(--color-text);
transition: .3s ease;
}
li.header__item.header__item-all-courses_open {
color: var(--color-accent);
}
a.header__item-link, .header__item-link {
display: block;
}
ul.header__items-wrapper li.header__item-all-courses {
cursor: pointer;
}
ul.header__items-wrapper li.header__item-all-courses .header__item-link::after {
content: '';
display: inline-block;
position: relative;
vertical-align: middle;
width: 6px;
height: 6px;
margin-left: 10px;
transition: .3s ease;
border-width: 0 0 1.5px 1.5px;
border-color: var(--color-text);
border-style: solid;
transform: rotateZ(315deg) translate(1px, -2px);
}
ul.header__items-wrapper li.header__item-all-courses_open .header__item-link::after {
transform: rotateZ(135deg) translate(1px, -1px);
border-color: var(--color-accent);
}
#allrecords a.header__members-btn {
display: flex;
align-items: center;
width: fit-content;
font-size: 14px;
font-weight: 400;
line-height: 24px;
background: var(--color-bg-lk-btn);
border: 0;
border-radius: 30px;
padding: 8px 24px;
color: var(--color-text);
text-decoration: none;
transition: .2s ease;
}
#allrecords .header__container.open .header__members-btn {
background: var(--color-bg-lk-btn);
}
#allrecords a.header__members-btn:hover {
background: var(--color-button);
color: #fff;
}
#allrecords .header__container.open .header__members-btn:hover {
background: var(--color-button);
}
.menu__wrapper {
display: flex;
column-gap: 16px;
max-width: 1160px;
margin: 0 auto;
opacity: 0;
visibility: hidden;
max-height: 0;
padding: 0;
transition: .3s ease;
overflow: hidden;
box-sizing: border-box;
}
.menu__wrapper.menu__wrapper_active {
opacity: 1;
visibility: visible;
max-height: 100vh;
padding: 32px 0;
}
.menu-left {
width: 100%;
max-width: 572px;
}
nav.menu-left__course-direction {
display: flex;
column-gap: 16px;
}
ul.menu-left__course-direction-list {
display: flex;
flex-direction: column;
row-gap: 16px;
width: 100%;
}
li.menu-left__course-direction-item {
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
}
a.menu-left__course-direction-link {
display: flex;
flex-wrap: wrap;
column-gap: 12px;
height: 64px;
padding: 8px;
border-radius: 16px;
transition: .2s ease;
box-sizing: border-box;
}
@media (hover: hover) {
#allrecords a.menu-left__course-direction-link:hover {
background-color: #2b2b35;
}
}
.menu-left__course-direction-icon {
height: 100%;
border-radius: 8px;
}
.menu-left__course-direction-quontity-courses {
font-size: 14px;
color: var(--color-text-opacity);
}
.menu-left__bottom-info {
width: 100%;
}
ul.menu-left__bottom-info-list {
display: flex;
flex-direction: row;
column-gap: 30px;
}
#allrecords ul.menu-left__bottom-info-list {
margin-bottom: 0;
}
li.menu-left__bottom-info-link {
font-size: 14px;
line-height: 30px;
color: var(--color-text);
}
li.menu-left__bottom-info-link a {
transition: .2s ease;
}
#allrecords li.menu-left__bottom-info-link a:hover {
color: var(--color-accent);
}
#allrecords .menu-left__bottom-info a.header__members-btn {
display: none;
}
.menu-right {
position: relative;
display: flex;
flex-direction: column;
row-gap: 16px;
width: 100%;
max-width: 572px;
background-color: #2b2b35;
background-image: url(https://static.tildacdn.com/tild3264-3531-4533-b066-653232386336/Desktop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
padding: 24px;
border-radius: 16px;
color: var(--color-text);
box-sizing: border-box;
}
.menu-right__test-tags-wrap {
display: flex;
column-gap: 8px;
}
.menu-right__test-tag {
font-size: 12px;
line-height: 1.5;
font-weight: 400;
padding: 4px 12px;
background: #3b3b47;
border-radius: 30px;
color: var(--color-text);
}
.menu-right__test-heading {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
width: 184px;
}
.menu-right__test-button {
width: fit-content;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
background: var(--color-button);
padding: 10px 24px;
margin-top: auto;
border-radius: 50px;
transition: .2s ease;
}
#allrecords .menu-right__test-button:hover {
background: var(--color-text);
color: var(--color-black);
}
@media screen and (min-width: 1200px) {
.header__items-container {
margin-right: 0;
}
.burger-btn {
display: none;
}
li.header__item:hover {
color: var(--color-accent);
}
ul.header__items-wrapper li.header__item-all-courses:hover .header__item-link::after {
border-color: var(--color-accent);
}
}
@media screen and (min-width: 960px) {
.menu-left__bottom-info {
display: none;
}
}
@media (min-width: 960px) and (max-width: 1199px) {
.menu-right {
background-image: url(https://static.tildacdn.com/tild6438-6533-4036-a435-623266623239/Tablet_Horizontal.jpg);
}
}
@media screen and (max-width: 1199px) {
.t-body.open-menu {
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
header.header__container.open {
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
}
.header__wrapper {
max-width: 940px;
padding: 12px 0;
}
.header__wrapper:after {
width: 100%;
}
.menu__wrapper {
max-width: 940px;
padding: 0;
}
.menu-left {
max-width: 544px;
}
.menu-left__course-direction-link {
display: block;
width: fit-content;
}
.menu-right {
max-width: 380px;
}
}
@media screen and (max-width: 959px) {
header.header__container {
position: fixed;
overflow: auto;
}
header.header__container.open {
height: fit-content;
max-height: 100%;
/*background: var(--color-bg);*/
transition: border-radius 0.3s ease, background 0s ease 0s, transform 0.3s ease;
}
.header__wrapper {
position: sticky;
top: 0;
justify-content: space-between;
max-width: 620px;
padding: 12px 0;
/*background: var(--color-bg);*/
transition: .3s ease;
z-index: 99;
box-sizing: border-box;
}
.header__wrapper:after {
width: 100%;
}
header.header__container.open .header__wrapper {
background: var(--color-bg-menu-open);
/*transition: none;*/
}
nav.header__items-container {
justify-content: end;
}
.header__items-container .header__items-wrapper {
display: none;
}
.menu__wrapper {
flex-wrap: wrap;
max-width: 620px;
padding: 0;
}
.menu__wrapper.menu__wrapper_active {
max-height: fit-content;
padding: 20px 0 32px;
row-gap: 24px;
}
.menu-left {
max-width: 100%;
height: max-content;
}
ul.menu-left__course-direction-list {
width: 50%;
}
.menu-left__course-direction-link {
width: 100%;
}
.menu-left__bottom-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
row-gap: 32px;
}
ul.menu-left__bottom-info-list {
row-gap: 8px;
}
#allrecords ul.menu-left__bottom-info-list {
align-items: start;
flex-direction: column;
}
.menu-right {
max-width: 100%;
height: 292px;
margin-bottom: 8px;
/*background-position-y: -134px;*/
}
}
@media screen and (max-width: 639px) {
header.header__container {
height: 58px;
}
header.header__container.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 100%;
}
.header__wrapper {
padding: 9px 10px;
}
.header__logo img {
width: 28px;
}
.header__wrapper:after {
width: calc(100% - 20px);
}
.header__items-container {
display: none;
}
.menu__wrapper {
align-content: flex-start;
padding: 0 10px;
}
.menu__wrapper.menu__wrapper_active {
padding: 16px 10px 48px;
}
nav.menu-left__course-direction {
flex-direction: column;
row-gap: 8px;
}
ul.menu-left__course-direction-list {
width: 100%;
row-gap: 8px;
}
li.menu-left__course-direction-item {
font-size: 14px;
}
.menu-left__bottom-info {
row-gap: 16px;
}
#allrecords .menu-left__bottom-info a.header__members-btn {
display: block;
}
.menu-right {
height: 232px;
padding: 16px;
margin-bottom: 0;
row-gap: 12px;
/*background-position: -106px center;*/
/*background-size: 138%;*/
background-image: url(https://static.tildacdn.com/tild3930-6233-4836-b332-636433393662/Mobile.jpg);
}
.menu-right__test-tags-wrap {
column-gap: 4px;
}
.menu-right__test-tag {
font-size: 10px;
line-height: 1.6;
}
.menu-right__test-heading {
font-size: 14px;
width: 134px;
}
.menu-right__test-button {
font-size: 14px;
line-height: 1.2;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
// добавляем фон хедеру, если страница прокручена больше чем на 50 пикселей
setTimeout(function() {
if (document.documentElement.scrollTop > 50) {
$('.header__container').addClass('main-header--bg_scroll');
}
}, 2000);
$(window).scroll(function() {
let offsetTopByHeader = 50;
let classBgHeader = 'main-header--bg_scroll';
let header = $('.header__container');
if ($(this).scrollTop() >= offsetTopByHeader) {
header.addClass(classBgHeader);
} else {
header.removeClass(classBgHeader);
}
});
// скрываем/показываем хедер по скролу
const header = $('.header__container');
let scrollPrev = 0;
$(window).scroll(function() {
const scrolled = $(window).scrollTop();
if (scrolled > 550 && scrolled > scrollPrev) {
header.addClass('out');
} else {
header.removeClass('out');
}
scrollPrev = scrolled;
});
$('.menu-left__bottom-info-link a').click(function() {
$('.menu').trigger('click');
});
if (document.documentElement.clientWidth >= 1200) {
$('.header__item-all-courses').mouseenter(function() {
$('.header__item-all-courses').addClass('header__item-all-courses_open');
$('.menu__wrapper').addClass('menu__wrapper_active');
$('.header__overlay').fadeIn('linear');
$('.menu').addClass('open');
$('.header__container').addClass('open');
$('.t-body').addClass('open-menu');
});
$('.header__container').mouseleave(function() {
$('.header__item-all-courses').removeClass('header__item-all-courses_open');
$('.menu__wrapper').removeClass('menu__wrapper_active');
$('.header__overlay').fadeOut('linear');
$('.menu').removeClass('open');
$('.header__container').removeClass('open');
$('.t-body').removeClass('open-menu');
});
}
if (document.documentElement.clientWidth < 1200) {
$('.header__item-all-courses, .header__overlay, .menu').click(function() {
$('.header__item-all-courses').toggleClass('header__item-all-courses_open');
$('.menu__wrapper').toggleClass('menu__wrapper_active');
$('.header__overlay').fadeToggle('linear');
$('.menu').toggleClass('open');
$('.header__container').toggleClass('open');
$('.t-body').toggleClass('open-menu');
});
}
});
</script> <!-- nominify end --> </div> </div> </div> </div> </header> <!--/header--> <div id="rec210538163" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-animationappear="off" data-record-type="18"> <!-- cover --> <div class="t-cover" id="recorddiv210538163"bgimgfield="img"style="height:100vh;background-image:url('https://thb.tildacdn.com/tild3536-6461-4330-a364-343736383134/-/resize/20x/Cover-2.png');"> <div class="t-cover__carrier" id="coverCarry210538163"data-content-cover-id="210538163"data-content-cover-bg="https://static.tildacdn.com/tild3536-6461-4330-a364-343736383134/Cover-2.png"data-display-changed="true"data-content-cover-height="100vh"data-content-cover-parallax="fixed"data-content-use-image-for-mobile-cover=""style="height:100vh; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild3536-6461-4330-a364-343736383134/Cover-2.png"></div> <div class="t-cover__filter" style="height:100vh;background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:100vh;"> <div class="t001 t-align_center"> <div class="t001__wrapper" data-hook-content="covercontent"> <div class="t001__uptitle t-uptitle t-uptitle_sm" field="subtitle">Блог xyz school</div> <h1 class="t001__title t-title t-title_xl" field="title">Как процедурная генерация помогает создавать открытые миры <br /></h1> <span class="space"></span> </div> </div> </div> </div> </div> </div> <style> #rec210538163 .t001__uptitle{text-transform:uppercase;}</style> </div> <div id="rec210538165" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Современные открытые миры в играх — это огромные пространства с реалистичными лесами и полями, городами и деревнями, тропинками и многополосными шоссе. Зачастую они выглядят настолько впечатляюще, что игроки всерьёз любуются виртуальными пространствами и делают десятки скриншотов. Фотографируя очередную поляну в рассветных лучах, игрок может и не догадываться, что она была сгенерирована автоматически. <br /><br /> Мы изучили доклады и презентации специалистов по генерации открытых миров, а также пообщались с программистом AAA-игр Александром Балакшиным, и теперь рассказываем, как работают эти алгоритмы, кому они могут пригодиться, и как их использовали в разработке The Witcher 3: Wild Hunt, Horizon Zero Dawn, The Sinking City и Spider-Man 2018-года. <br /><br /> <em>Автор: <a href="https://vk.com/id_ysio">Юрий Кулагин</a></em> <br /></div></div> </div> </div> </div> <style> #rec210538165 .t-text{color:#ffffff;}</style> </div> <div id="rec210538167" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3934-3038-4965-b064-376264366532/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3934-3038-4965-b064-376264366532/-/empty/image.png" data-original="https://static.tildacdn.com/tild3934-3038-4965-b064-376264366532/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3934-3038-4965-b064-376264366532/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes">Horizon Zero Dawn</div></div></div> </div> </div> </div> </div> <div id="rec210538168" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 26px;">Кому и зачем нужна генерация <br /></span></strong><br /> Процедурная генерация в игровой индустрии используется давно. В Rogue, прародителе жанра roguelike, при помощи генерации создавали обширные уровни, — в дальнейшем этот подход стал стандартом для подобных игр. Diablo уже выстраивала с помощью алгоритмов целые многоуровневые катакомбы. <br /><br /> А разработчики The Elder Scrolls II: Daggerfall в 1996 году использовали процедурную генерацию, чтобы собрать из заготовленных частей пять тысяч городов. Разработчики доказали, что автоматизировать создание локаций возможно, — правда результат может получиться довольно однообразным.<br /> </div></div> </div> </div> </div> <style> #rec210538168 .t-text{color:#ffffff;}</style> </div> <div id="rec210538169" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3062-6262-4634-b830-376436633864/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3062-6262-4634-b830-376436633864/-/empty/image.png" data-original="https://static.tildacdn.com/tild3062-6262-4634-b830-376436633864/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3062-6262-4634-b830-376436633864/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes">The Elder Scrolls II: Daggerfall</div></div></div> </div> </div> </div> </div> <div id="rec210538170" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes"> Сейчас открытые миры стали настолько большими и проработанными, что создавать их вручную очень долго и дорого. Многие студии, стараясь избежать срыва сроков и внеплановых расширений штата, используют процедурную генерацию. В отличие от примитивных алгоритмов Daggerfall, современная процедурная генерация — это сложная система с множеством условий и параметров. А чтобы результат выглядел убедительно, эта система всегда контролируется живым человеком. <br /><br /> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Убедительность окружения зависит от самого генератора, — насколько тот подключает человека к работе, на каких правилах обучается, какой набор параметров использует. С определённой степенью проработки может получиться достаточно достоверный результат, который на глаз не отличить от работы художника.»</em><br /><br />Разработчикам не стоит бояться массового пришествия процедурных алгоритмов. Логику генерации нужно настраивать вручную, а её результат всё же лучше пропустить через руки профессионалов, чтобы те могли переставить, убрать или добавить отдельные элементы.<br /></div></div> </div> </div> </div> <style> #rec210538170 .t-text{color:#ffffff;}</style> </div> <div id="rec210538171" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6237-6538-4331-a539-643938646333/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6237-6538-4331-a539-643938646333/-/empty/image.png" data-original="https://static.tildacdn.com/tild6237-6538-4331-a539-643938646333/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6237-6538-4331-a539-643938646333/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes"><a href="https://forums.unrealengine.com/development-discussion/content-creation/40735-wm-to-ue4-tiled-world" style="">Источник</a></div></div></div> </div> </div> </div> </div> <div id="rec210538172" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes"> Иногда процедурную генерацию использует лишь для создания наброска, на основе которого художники будут создавать локацию. В других случаях ей на откуп отдают большие, но однообразные пространства, ручная проработка которых превратилась бы в рутину. <br /><br /> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Работая с процедурной генерацией, нужно понимать, что ручную работу никто не отменял. Художники могут взять сгенерированный кадр и сказать: «Всё, конечно, хорошо, но отсюда это смотрится паршиво, оттуда — неестественно, а там вообще какая-то дичь». И они начнут потихоньку это исправлять. Так что генерация облегчает работу, но не заменяет соответствующих специалистов.»</em><br /><br />Художники не останутся без работы ещё и потому, что в открытых мирах отлично работает принцип Парето — игрок активно изучает только 20% локации, а оставшиеся 80% служат фоном. Так что логичным шагом будет отдать проработку и заполнение этого фона на откуп алгоритмам, и дать художникам больше времени на проработку того, на что игрок обратит внимание.<br /></div></div> </div> </div> </div> <style> #rec210538172 .t-text{color:#ffffff;}</style> </div> <div id="rec210538173" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3630-6631-4230-b537-343634356335/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3630-6631-4230-b537-343634356335/-/empty/image.png" data-original="https://static.tildacdn.com/tild3630-6631-4230-b537-343634356335/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3630-6631-4230-b537-343634356335/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes">Spider-Man (2018)</div></div></div> </div> </div> </div> </div> <div id="rec210538174" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Процедурная генерация облегчает работу не только художников по окружению. Многие современные алгоритмы используют итеративный подход, поэтому их можно применять на ранних этапах разработки. Левел-дизайнеры могут использовать итеративную генерацию для создания наглядных блокаутов, геймдизайнеры — чтобы проверять механики, на ходу добавляя новые. <br /><br /> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Процедурная генерация упрощает жизнь левел-артистам. Да и левел-дизайнерам, — поскольку они часто работают бок о бок. У них пропадает необходимость высаживать каждое дерево, многое можно сразу сгенерировать.</em> <br /><br /><em>А с точки зрения геймплея не нужно ставить какой-то дикий грейбокс, чтобы обозначить лес, — он же вообще не будет отражать окончательный вариант. Одно дело — использовать грейбокс для здания, совсем другое — когда такой же кубик берут для леса.»</em><br /><br />Ещё одно полезное свойство процедурной генерации, которым часто пользуются разработчики — экономия места. При размещении вручную каждый объект на карте получает свою координату, и в сумме эти значения могут занять много ресурсов. Сгенерированная растительность сохраняется в виде отдельной карты и занимает меньше места.<br /></div></div> </div> </div> </div> <style> #rec210538174 .t-text{color:#ffffff;}</style> </div> <div id="rec210538175" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3039-6338-4265-a630-383964333863/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3039-6338-4265-a630-383964333863/-/empty/image.png" data-original="https://static.tildacdn.com/tild3039-6338-4265-a630-383964333863/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3039-6338-4265-a630-383964333863/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes"><a href="https://docs.quadspinner.com/Guide/Interface/Getting-around.html" style="">Источник</a></div></div></div> </div> </div> </div> </div> <div id="rec210538176" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 26px;">Кисти для процедурной растительности <br /></span></strong><br /> Для The Witcher 3 разработчикам из CD Projekt RED нужно было создать мир, который в 35 раз превышал бы размер локаций второго «Ведьмака». Людей с опытом работы над полностью открытым миром не хватало, а приступить к созданию локаций нужно было как можно скорее. <br /><br /> Выход из ситуации нашла ответственная за движок команда, которая как раз искала необычные технические решения для своего инструментария. Вместо нескольких десятков художников фундамент для открытого мира «Дикой охоты» создали всего пять человек во главе с ведущим программистом Марчином Голлентом.<br /></div></div> </div> </div> </div> <style> #rec210538176 .t-text{color:#ffffff;}</style> </div> <div id="rec210538177" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3336-6439-4265-b138-663939313538/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3336-6439-4265-b138-663939313538/-/empty/image.png" data-original="https://static.tildacdn.com/tild3336-6439-4265-b138-663939313538/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3336-6439-4265-b138-663939313538/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes">The Witcher 3: Wild Hunt</div></div></div> </div> </div> </div> </div> <div id="rec210538178" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«На проектах всегда есть tools-инженеры, которые создают инструменты, облегчающие жизнь именно художникам, дизайнерам, левел-дизайнерам. Стоимость создания таких генераторов — зарплата этих инженеров. Но взамен студия освобождает много десятков человек, художников, часов — в больших компания это делается просто ради экономии времени и денег.»</em> <br /><br />Команда Голлента <a href="https://www.gdcvault.com/play/1020197/Landscape-Creation-and-Rendering-in" style="nofollow noopener">разработала</a> систему, которая позволяла легко создавать огромные лесные пространства, на ходу смешивая текстуры и расставляя ассеты. Например, алгоритм умел создавать плавные переходы между материалами: на стыках двух поверхностей использовали сразу две текстуры, с которыми система работала индивидуально. <br /><br /> Программисты обучили алгоритм распознавать два типа поверхностей: к природным система относила почву, песок, каменистую местность, а к рукотворным — кирпич, брусчатку, бревенчатые стены. Это помогало по-разному накладывать эффекты на разные типы материалов — например, на стене дома снег выглядел не так, как на земле. Благодаря этому и получались плавные переходы — по краям дороги генератор складывал рукотворную текстуру брусчатки и природную текстуру земли так, что оставались видны контуры отдельных булыжников.<br /></div></div> </div> </div> </div> <style> #rec210538178 .t-text{color:#ffffff;}</style> </div> <div id="rec210538180" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3437-3636-4930-a333-623961333064/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3437-3636-4930-a333-623961333064/-/empty/image.png" data-original="https://static.tildacdn.com/tild3437-3636-4930-a333-623961333064/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3437-3636-4930-a333-623961333064/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://archive.org/details/GDC2014Gollent" style="">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210538181" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Процедурная генерация также <a href="https://archive.org/details/GDC2014Gollent" style="nofollow noopener">распределяла</a> по поверхности текстур небольшие объекты — камни или траву. Художникам потребовалось нарисовать всего десять видов травы, а алгоритмы подкрашивали их под цвет земли. Для этого левел-артисты использовали пигментную карту — текстуру локации с видом сверху в низком разрешении. Цвет конкретного поля или луга накладывался на траву градиентом, чтобы ближе к корням растительность была цвета земли, а выше сохранялся оригинальный цвет и не нарушался оттенок плодов и соцветий. <br /><br /> При этом в «Ведьмаке» процедурно сгенерированная трава не перекрывает детали исходной текстуры, а подчёркивает их. Для этого программу научили выделять на текстуре только те места, где что-то может расти. Например, если на вымощенной булыжником старой дороге местами проступает текстура земли, то трава вырастает только на этих участках.<br /></div></div> </div> </div> </div> <style> #rec210538181 .t-text{color:#ffffff;}</style> </div> <div id="rec210538182" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3461-3738-4231-a561-393039653533/-/empty/image.png" data-original="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes"><a href="https://archive.org/details/GDC2014Gollent" style="">Источник</a></div></div></div> </div> </div> </div> </div> <div id="rec210538183" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> В процессе генерации художники могли настраивать густоту травы. Этот параметр работал на двух уровнях. С одной стороны, он определял, насколько плоская текстура травы перекрывала исходную. С другой, настраивала непосредственно количество и высоту растительности. В зависимости от значений этого параметра художники могли легко создать и целиком заросший холм, и почти голую скалу с одинокими травинками. <br /><br /> <strong>Марчин Голлент,</strong> ведущий программист графики CD Projekt RED: <br /><br /> <em>«Недостаточно просто добавить в движок генерацию текстур: всегда нужно прорабатывать и связанный с ней инстурментарий. Художникам нужна возможность отключать конкретные компоненты инструмента и управлять отдельными параметрами.»</em> <em><a href="https://archive.org/details/GDC2014Gollent" style="nofollow noopener">Источник</a></em> <br /><br />Для создания деревьев и кустарников художники CDPR использовали другой инструмент — кисти с набором растительности. Их можно было настраивать под конкретную локацию, указывая насыщенность местности водой, освещённость и даже направление, в котором могут распространятся семена.<br /></div></div> </div> </div> </div> <style> #rec210538183 .t-text{color:#ffffff;}</style> </div> <div id="rec210542443" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3461-3738-4231-a561-393039653533/-/empty/image.png" data-original="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-3738-4231-a561-393039653533/image.png" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><div style="color:#999999;" data-customstyle="yes"><a href="https://archive.org/details/GDC2014Gollent" style="">Источник</a></div></div></div> </div> </div> </div> </div> <div id="rec210645962" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Алгоритмы кистей распознавали особенности рельефа. Например, они учитывали, в каких местах вода во время дождя стекает по склонам в долины — там лес вырастал более густым. В процессе система сравнивала выбранный рельеф с рельефом соседних локаций, чтобы просчитать траекторию солнца и вычислить, сколько местность получает света. <br /><br /> Все собранные данные сравнивались с типами растительности, которые художники закладывали в кисть. Набор деревьев в кисти густого северного леса сильно отличался от кистей для светлых рощ на юге, а те, в свою очередь, от инструмента, рассчитанного на горную растительность. <br /></div></div> </div> </div> </div> <style> #rec210645962 .t-text{color:#ffffff;}</style> </div> <div id="rec210646103" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3033-6630-4065-a361-343364353465/rYEB2BgsUl8.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3033-6630-4065-a361-343364353465/-/empty/rYEB2BgsUl8.jpg" data-original="https://static.tildacdn.com/tild3033-6630-4065-a361-343364353465/rYEB2BgsUl8.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3033-6630-4065-a361-343364353465/rYEB2BgsUl8.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">The Witcher 3: Wild Hunt</div></div> </div> </div> </div> </div> <div id="rec210646399" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Если для конкретного дерева не хватало воды или солнца, то кисть исключала этот тип из локации. Но даже если ресурсов было достаточно, объект всё равно сравнивался с заданными «идеальными условиями», и его размер менялся соответственно. Поэтому одна и та же кисть, применённая на долину у озера и на скалистый засушливый холм, выдавала разный результат. <br /><br /> Также эти кисти давали разный результат при разном количестве применений. Если художник использовал кисть на конкретном участке один раз, у него получался лёгкий подлесок: кустарник, отдельно стоящие деревья. Но если он повторял приём, эффект становился заметнее — кустарники разрастались, деревьев становилось больше, а сами они росли выше. <br /><br /> <strong>Марчин Голлент</strong>, ведущий программист графики CD Projekt RED: <br /><br /> <em>«Представьте себе, что итерации — это такой дождь. Во время дождя вода падает с неба и стекает в низины, копится там, постепенно поднимаясь. То же самое и с итерациями — чем больше будет применений у нашего инструмента, тем пышнее получится растительность. Трава будет забираться вверх по холмам, вместо неё начнут появляться кусты, и так далее.»</em> <em><a href="https://archive.org/details/GDC2014Gollent" style="nofollow noopener">Источник</a></em><br /></div></div> </div> </div> </div> <style> #rec210646399 .t-text{color:#ffffff;}</style> </div> <div id="rec210647800" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210647800" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1OQIDC84EFnkOmMx3vdiAoxmMkMJ7i8G3" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1OQIDC84EFnkOmMx3vdiAoxmMkMJ7i8G3" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210647800');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210647952" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://archive.org/details/GDC2014Gollent" style="nofollow noopener">Источник</a><em></em><br /></div></div> </div> </div> </div> <style> #rec210647952 .t-text{color:#ffffff;}</style> </div> <div id="rec210648182" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><span style="font-size: 30px;"><strong>Слои для процедурных биомов </strong></span><br /><br /> Работая над Horizon Zero Dawn, программисты Guerrilla Games тоже использовали процедурную генерацию. Художники студии привыкли контролировать каждую деталь на локации ещё во времена работы над серией Killzone. Поэтому и в новой игре они хотели иметь возможность поменять результат генерации — например, передвинуть гору, которую алгоритм поставил неправильно <br /><br /> В результате студия разработала систему, которая поддавалась тонкой настройке и редко ошибалась с размещением объектов. В основе этой системы <a href="https://80.lv/articles/the-procedural-nature-of-the-horizon-zero-dawn/" style="nofollow noopener">лежали</a> слои. <br /></div></div> </div> </div> </div> <style> #rec210648182 .t-text{color:#ffffff;}</style> </div> <div id="rec210648453" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-3034-4130-a632-316366633339/NivJgLSTJlY.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3461-3034-4130-a632-316366633339/-/empty/NivJgLSTJlY.jpg" data-original="https://static.tildacdn.com/tild3461-3034-4130-a632-316366633339/NivJgLSTJlY.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-3034-4130-a632-316366633339/NivJgLSTJlY.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Horizon Zero Dawn</div></div> </div> </div> </div> </div> <div id="rec210648496" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«В Horizon: Zero Dawn художники создали карты дорог, высот, рек и растительности. В зависимости от биома между этими картами выстраивается определённая логика взаимодействия. В них хранится информация о плотности: чёрные значения означают, что в конкретной точке не может быть растительности, белые — что в ней должно быть максимальное количество растительности.»</em><br /><br />Главным слоём служила карта растительности, на которой художники отмечали, где должен расти лес и насколько густым он должен быть. Эта карта накладывалась на другие карты местности, после чего алгоритм сравнивал значения в конкретных точках. Если даже через очень густой лес проходила дорога или река, система сама изменяла параметры так, чтобы под водой не росла трава, а кусты постепенно редел на подходах к тропинке. <br /></div></div> </div> </div> </div> <style> #rec210648496 .t-text{color:#ffffff;}</style> </div> <div id="rec210648734" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6465-6235-4565-b264-376132323764/hC-GHO4XPQ0.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6465-6235-4565-b264-376132323764/-/empty/hC-GHO4XPQ0.jpg" data-original="https://static.tildacdn.com/tild6465-6235-4565-b264-376132323764/hC-GHO4XPQ0.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6465-6235-4565-b264-376132323764/hC-GHO4XPQ0.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://80.lv/articles/the-procedural-nature-of-the-horizon-zero-dawn/" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210648878" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><a href="https://www.youtube.com/watch?v=ToCozpl1sYY&t=25s" style="nofollow noopener">Чтобы</a> сгенерированные локации не просто работали, но и выглядели разнообразно, художникам студии потребовалось создать множество ассетов и шаблонов растительности, — но это всё равно оказалось быстрее и выгоднее, чем ручная проработка мира. Три человека в Guerrilla Games нарисовали 500 типов растений, а шаблонами занимался один технический художник. <br /><br /> Настроив параметры генерации один раз, художники студии могли легко создавать определённые сочетания растительности в разных частях локации. Алгоритм одинаково успешно работал и с густыми лесами, и с состоящими из травы и кустарника полями. <br /></div></div> </div> </div> </div> <style> #rec210648878 .t-text{color:#ffffff;}</style> </div> <div id="rec210650286" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210650286" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1EbYMzOzqZ3jMB3btqSBSAhNBHiTqkbnr" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1EbYMzOzqZ3jMB3btqSBSAhNBHiTqkbnr" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210650286');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210650453" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://www.youtube.com/watch?v=ToCozpl1sYY&t=25s" style="nofollow noopener">Источник</a><em></em><br /></div></div> </div> </div> </div> <style> #rec210650453 .t-text{color:#ffffff;}</style> </div> <div id="rec210650561" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes">Чтобы модели растительности не мешали друг другу, для каждой указывался footprint — отпечаток, задающий минимальное расстояние между объектами одного типа. А чтобы результат не выглядел искусственно, художники настраивали отдельный параметр, который хаотично разбрасывал цифры и менял логику размещения. Зачастую локацию потом отдавали художникам, чтобы те могли вручную её отредактировать.<br /><br /> <strong>Александр Балакшин</strong>, геймплей-программист:<br /><br /><em>«Практика показывает, что живым людям всё равно приходится смотреть на результат генерации и дорабатывать его, чтобы всё было идеально. Хотя если какой-то кусок сгенерированной локации прошёл все плейтесты и не вызвал нареканий, то его лишний раз трогать, конечно, не будут.»</em><br /><br /> В Horizon: Zero Dawn игрок исследует множество разных биомов, — от среднеевропейских лесов до заснеженной тундры. Сами разработчики называли их «экотопами»: с точки зрения инструмента генерации это были просто наборы настроек для создания локации.<br /></div></div> </div> </div> </div> <style> #rec210650561 .t-text{color:#ffffff;}</style> </div> <div id="rec210650796" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3563-3737-4564-a261-353765313164/tM7oiW7jsYo.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3563-3737-4564-a261-353765313164/-/empty/tM7oiW7jsYo.jpg" data-original="https://static.tildacdn.com/tild3563-3737-4564-a261-353765313164/tM7oiW7jsYo.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3563-3737-4564-a261-353765313164/tM7oiW7jsYo.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Horizon Zero Dawn</div></div> </div> </div> </div> </div> <div id="rec210650902" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Параметры биомов затрагивали не только типы ассетов, но и их распределение, а также погоду, визуальные и звуковые эффекты. Поэтому результат генерации двух разных экотопов даже на одной локации выглядел по-разному — джунгли на конкретной горе сильно отличались от обычного леса в той же локации и по типам растений, и по их распределению. <br /><br /> Система работала и с геймплейными элементами. Например, при помощи отдельного инструмента художники могли размещать на локации специальный «стелс-кустарник», в котором игрок прятался от врагов. Его расстановка и логика тоже подчинялись общим правилам — в воде или на дороге кусты не генерировались. <br /></div></div> </div> </div> </div> <style> #rec210650902 .t-text{color:#ffffff;}</style> </div> <div id="rec210651030" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6235-6261-4137-a438-633337333534/LqIkYMFCfaQ.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6235-6261-4137-a438-633337333534/-/empty/LqIkYMFCfaQ.jpg" data-original="https://static.tildacdn.com/tild6235-6261-4137-a438-633337333534/LqIkYMFCfaQ.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6235-6261-4137-a438-633337333534/LqIkYMFCfaQ.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Horizon Zero Dawn</div></div> </div> </div> </div> </div> <div id="rec210651124" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Причём этот инструмент не закреплял объекты на локации намертво. Сгенерированная растительность автоматически подстраивалась под изменения, которые вносили художники. Это упрощало ручную правку локации — если переместить или изменить тропу в лесу, растительность вокруг неё изменялась сама. <br /><br /> Яаап ван Мюжден, старший технический программист Guerrilla Games: <br /><br /> <em>«Процедурную генерацию в Horizon Zero Dawn мы использовали везде, где только могли — для ассетов, эффектов, даже геймплейных элементов. И результат выглядел очень здорово: он полностью вписывался в видение арт-директора.</em> <br /><br /><em>Даже те локации, до которых не добирались руки наших художников, выглядели полностью готовыми — их можно было брать и сразу вставлять в финальную версию игры.»</em> <em><a href="https://www.youtube.com/watch?v=ToCozpl1sYY&t=25s" style="nofollow noopener">Источник</a></em><br /></div></div> </div> </div> </div> <style> #rec210651124 .t-text{color:#ffffff;}</style> </div> <div id="rec210651773" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210651773" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1VhzzTW3GuVJlmWROCXbmnifPMwW0eWkb" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1VhzzTW3GuVJlmWROCXbmnifPMwW0eWkb" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210651773');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210651823" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://www.youtube.com/watch?v=ToCozpl1sYY&t=25s" style="nofollow noopener">Источник</a><em></em><br /></div></div> </div> </div> </div> <style> #rec210651823 .t-text{color:#ffffff;}</style> </div> <div id="rec210651924" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><span style="font-size: 30px;"><strong>Сетка для процедурного города </strong></span><br /><br /> Чтобы построить большой и реалистичный город в The Sinking City, студия Frogwares создала инструмент процедурной генерации для Unreal Engine 4. По словам Константина Якушенко, который возглавляет в компании команду tools-инженеров, разработчики вдохновлялись конструктором Ubisoft, с помощью которого <a href="https://www.youtube.com/watch?v=k7sizxMamls" style="nofollow noopener">создавали</a> здания и улицы в Assassin's Creed Unity и Syndicate. <br /><br /> Процедурная генерация в города в The Sinking City начиналась с ручной работы. Художники <a href="https://www.youtube.com/watch?v=kSMcvSIFyUg" style="nofollow noopener">создавали</a> «сетку», — макет основных улиц и ориентиров — и указывали, какие типы домов могут находиться в том или ином районе. А ландшафт, рельеф и ширина улиц определялись лишь предварительно. <br /></div></div> </div> </div> </div> <style> #rec210651924 .t-text{color:#ffffff;}</style> </div> <div id="rec210652459" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3233-3030-4663-b133-376366336164/4BLUQWdnni8.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3233-3030-4663-b133-376366336164/-/empty/4BLUQWdnni8.jpg" data-original="https://static.tildacdn.com/tild3233-3030-4663-b133-376366336164/4BLUQWdnni8.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3233-3030-4663-b133-376366336164/4BLUQWdnni8.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">The Sinking City</div></div> </div> </div> </div> </div> <div id="rec210652569" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Только когда «сетка» была завершена, в дело вступала процедурная генерация. Инструмент расставлял вдоль улиц объекты архитектуры, собирая их из созданных художникам ассетов. Ассеты делились на категории: конкретные окна могли <a href="https://www.youtube.com/watch?v=b5AIpncO_9I" style="nofollow noopener">относиться</a> только к богатому или, наоборот, бедному дому, а материал стен — к целому или разрушенному. Алгоритм брал за основу данные о улицах, которые задавали художники, и создавал постройки на их основе. <br /><br /> Так как инструмент не создавал новые модели, а собирал их сочетания, художники могли свободно редактировать результат. Если в ходе разработки создавались новые материалы, окна или вывески,то их можно было быстро добавить в уже созданное на уровне здание. <br /></div></div> </div> </div> </div> <style> #rec210652569 .t-text{color:#ffffff;}</style> </div> <div id="rec210652793" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210652793" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1HxxoekxCbrYqQQigalMQj3tmk54uDXra" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1HxxoekxCbrYqQQigalMQj3tmk54uDXra" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210652793');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210652875" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://www.youtube.com/watch?v=b5AIpncO_9I" style="nofollow noopener">Источник</a><em></em><br /></div></div> </div> </div> </div> <style> #rec210652875 .t-text{color:#ffffff;}</style> </div> <div id="rec210652993" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> <strong>Константин Якушенко</strong>, главный tools-инженер Frogwares: <br /><br /> <em>«Моделер выбирает архитектурный стиль, высоту и ширину здания, нажимает кнопочку и редактор собирает дом. Потом моделер может внести правки — поменять стену, использовать другое окно, увеличить этажность или ширину, добавить деталей.</em> <br /><br /><em>Самое приятное, что ему не нужно для этого создавать ничего нового или работать с контент-браузером — всё делается по щелчку мышки.»</em> <em><a href="https://vk.com/away.php?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6jiDP1XUmpE&cc_key=" style="nofollow noopener">Источник</a></em> <br /><br />Когда все правки были внесены, редактор объединял детали здания в четыре фасада, которые сохранял по отдельности. Фрагментированное хранение зданий потом помогло разработчикам оптимизировать игру. <br /></div></div> </div> </div> </div> <style> #rec210652993 .t-text{color:#ffffff;}</style> </div> <div id="rec210653625" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210653625" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1VBTHXVLLJlI7L5qcPnbzxprxyvADDqQL" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1VBTHXVLLJlI7L5qcPnbzxprxyvADDqQL" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210653625');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210653730" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://www.youtube.com/watch?v=b5AIpncO_9I" style="nofollow noopener">Источник</a><em></em><br /></div></div> </div> </div> </div> <style> #rec210653730 .t-text{color:#ffffff;}</style> </div> <div id="rec210653770" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><span style="font-size: 30px;"><strong>Алгоритмы для процедурных улиц </strong></span><br /><br /> В Spider-Man большая часть 18 квадратных километров виртуального Манхэттена создана процедурной генерацией. В Insomniac Games стремились к тому, чтобы не менее 80% работы алгоритмов попало в финальную игру, и поэтому <a href="https://www.youtube.com/watch?v=4aw9uyj9MAE">прорабатывали</a> систему генерации особенно тщательно. <br /><br /> Как и Frogwares, разработчики начали работу над процедурным городом с разметки. На первом этапе создания мира на карту наносились основные улицы, границы локаций и места для сюжетных миссий. На втором в дело вступала уже непосредственно процедурная генерация: система сама расставляла по улицам здания и украшала их деталями. На третьем этапе художники дорабатывали отдельные места вручную. <br /></div></div> </div> </div> </div> <style> #rec210653770 .t-text{color:#ffffff;}</style> </div> <div id="rec210654013" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3164-3031-4339-b131-663166343139/eNldOTqdH-Y.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3164-3031-4339-b131-663166343139/-/empty/eNldOTqdH-Y.jpg" data-original="https://static.tildacdn.com/tild3164-3031-4339-b131-663166343139/eNldOTqdH-Y.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3164-3031-4339-b131-663166343139/eNldOTqdH-Y.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Spider-Man (2018)</div></div> </div> </div> </div> </div> <div id="rec210654137" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Процедурная генерация в Spider-Man использовалась не только для создания улиц и архитектуры. Ей доверили также создание реалистичного трафика, пешеходов, звуков и мелких деталей на локации. <br /><br /> Со зданиями алгоритм работал поэтапно. Сначала из простых форм (кубов, цилиндров) генерация расставляла простые болванки вдоль улиц, опираясь на заданные художниками этажность и размеры. Затем, используя ассеты для нужного района или типа строения, система размещала на «коробках» внешний декор — вывески, окна и лестницы. <br /><br /> Результат проверяли художники и, если комбинация элементов выглядела неестественно, переставляли их вручную. Например, очень часто дизайнеры переделывали крыши — поверхность, которая регулярно попадает в поле зрения игрока. <br /></div></div> </div> </div> </div> <style> #rec210654137 .t-text{color:#ffffff;}</style> </div> <div id="rec210661217" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3236-6230-4332-b437-313737313339/20hq9eyuvlU.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3236-6230-4332-b437-313737313339/-/empty/20hq9eyuvlU.jpg" data-original="https://static.tildacdn.com/tild3236-6230-4332-b437-313737313339/20hq9eyuvlU.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3236-6230-4332-b437-313737313339/20hq9eyuvlU.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.youtube.com/watch?v=4aw9uyj9MAE" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210661361" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Как и у любой программы, ошибки у генераторов случаются. Это зависит от того, как долго технология находится в обороте у студии, сколько людей над ней работают, сколько ошибок уже поймано. Могут встречаться и висящие в воздухе деревья, и кусты под землёй, и всё что угодно.</em> <br /><br /><em>Это скорее исключение, чем правило, но это исключение обязательно найдут игроки. Поэтому и нужны люди, которые проверяют результат работы генератора и следят за качеством.»</em> <br /><br />С автомобильным движением генерация работала по-другому — тут у алгоритма было больше свободы. Так как художники наносили на карту только самые узнаваемые проспекты и улицы реального Нью-Йорка, создание небольших переулков ложилось на плечи системы. <br /><br /> Алгоритм использовал заданные художниками параметры: ширину дорог, количество полос, направление движения по ним. На их основе он создавал новые улицы в тех местах, где это было бы логично с точки зрения транспортной проходимости. При этом тихие улочки оставались тихими, а большие проспекты — шумными и загруженными. <br /></div></div> </div> </div> </div> <style> #rec210661361 .t-text{color:#ffffff;}</style> </div> <div id="rec210661686" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3164-6437-4963-b738-626336646637/efWe3hu4qa0.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3164-6437-4963-b738-626336646637/-/empty/efWe3hu4qa0.jpg" data-original="https://static.tildacdn.com/tild3164-6437-4963-b738-626336646637/efWe3hu4qa0.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3164-6437-4963-b738-626336646637/efWe3hu4qa0.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.youtube.com/watch?v=4aw9uyj9MAE" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210661953" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Дэвид Сантьяго, ведущий технический художник Insomniac Games: <br /><br /> <em>«Изначально мы задали параметры только для больших проспектов, а процедурная система выстроила остальные улицы, настроив полосы движения и разметку.</em> <br /><br /><em>Мы могли этим управлять — например, задать параметры в духе «хотим, чтобы 70% улиц были односторонними, а 70% от них — с одной полосой для движения и одной — для парковки». И система бы просто прошлась по всему городу и создала реалистичный трафик по заданным параметрам.»</em> <em><a href="https://vk.com/away.php?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4aw9uyj9MAE&cc_key=" style="nofollow noopener">Источник</a></em> <br /><br />Генерация управляла не только прокладыванием новых улиц, но и количеством машин на них. Алгоритм учитывал возможные объезды, правила парковки, фазы светофора и многое другое, чтобы создать реалистичное автомобильное движение и атмосферно гудящие пробки. <br /><br /> Пешеходы тоже были частью этой системы. Генерация распределяла их так, что многие прохожие оказались практически статичными объектами — они могли перемещаться только в небольшом радиусе от точки появления, поэтому на общий трафик не влияли. Динамичные же пешеходы активно перемещались по городу и взаимодействовали с транспортом — пропускали машины, пользовались переходами. <br /></div></div> </div> </div> </div> <style> #rec210661953 .t-text{color:#ffffff;}</style> </div> <div id="rec210667778" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3862-3531-4465-b438-626463323265/3b7yy2Adx1s.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3862-3531-4465-b438-626463323265/-/empty/3b7yy2Adx1s.jpg" data-original="https://static.tildacdn.com/tild3862-3531-4465-b438-626463323265/3b7yy2Adx1s.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3862-3531-4465-b438-626463323265/3b7yy2Adx1s.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Spider-Man (2018)</div></div> </div> </div> </div> </div> <div id="rec210667875" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Процедурные алгоритмы в Spider-Man умели создавать не только статичные элементы окружения, такие как канализационные люки, клумбы и заборы. Используя данные о пешеходах и транспорте, система создавала и динамичный декор. Она расставляла светофоры там, где движение было наиболее плотным, а фонари — на тех улицах, где ночью было темнее всего. Все эти элементы включались, выключались и активно взаимодействовали с окружением. <br /><br /> Система генерации помогала и с игровыми механиками. Алгоритмы следили, чтобы на локациях всегда хватало интерактивных объектов, которые главный герой мог бы швырять в противников. Также система процедурно размещала на карте побочные задания: алгоритм проверял, достаточно ли в конкретной точке места для события и для сражения, после чего генерировал всё необходимое. <br /><br /> <strong>Дэвид Сантьяго</strong>, ведущий технический художник Insomniac Games: <br /><br /> <em>«Например, если в задании участвуют противники с реактивными ранцами, алгоритм должен найти в городе подходящую крышу, чтобы на ней было минимум 64 квадратных метра свободного пространства. А примерно в сорока метрах от неё обязательно должны быть ещё две крыши такого же размера, отличающиеся на пару метров по высоте. Система проходилась по всей карте, учитывала плотность событий и доступные маршруты для противников, а потом расставляла в подходящих местах побочные задания.»</em> <em><a href="https://www.youtube.com/watch?v=4aw9uyj9MAE" style="nofollow noopener">Источник</a></em></div></div> </div> </div> </div> <style> #rec210667875 .t-text{color:#ffffff;}</style> </div> <div id="rec210668060" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3936-3338-4333-a137-336637343132/Ul_TCkYBQzc.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3936-3338-4333-a137-336637343132/-/empty/Ul_TCkYBQzc.jpg" data-original="https://static.tildacdn.com/tild3936-3338-4333-a137-336637343132/Ul_TCkYBQzc.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3936-3338-4333-a137-336637343132/Ul_TCkYBQzc.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Spider-Man (2018)</div></div> </div> </div> </div> </div> <div id="rec210669399" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Тесная связь разных систем генерации оказалось и одной из проблем разработки Spider-Man, — она создавала эффект домино. На ранних этапах создания мира у геймдизайнеров был готов лишь ограниченный набор механик, а акробатика была добавлена лишь частично. Сюжет игры тоже регулярно дополняли и переписывали, из-за чего менялись важные для истории локации. <br /><br /> Изменения на этих этапах вносились регулярно, а сгенерированный мир умел сам к ним адаптироваться. Но связанные подсистемы генерации меняли сразу слишком много всего: добавленный для сюжетной миссии переулок изменял размеры соседнего здания, из-за этого алгоритмы переставляли парковки и тротуары, а уже из-за них менялось расположение светофоров и переходов на нескольких соседних улицах. <br /><em></em></div></div> </div> </div> </div> <style> #rec210669399 .t-text{color:#ffffff;}</style> </div> <div id="rec210669476" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3635-6662-4363-b533-366536383738/f-RDUli_0ww.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3635-6662-4363-b533-366536383738/-/empty/f-RDUli_0ww.jpg" data-original="https://static.tildacdn.com/tild3635-6662-4363-b533-366536383738/f-RDUli_0ww.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3635-6662-4363-b533-366536383738/f-RDUli_0ww.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.gdcvault.com/play/1026415/Procedurally-Crafting-Manhattan-for-Marvel" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210669780" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Чтобы свести подобные случаи к минимуму, tools-инженерам студии пришлось переработать генерацию. Новый вариант работал модульно и слабее связывал разные элементы локации. Поменяв тот же переулок в новой системе, художники могли столкнуться с изменённой планировкой квартала, но никак не переработкой целого района. <br /><br /> <strong>Дэвид Сантьяго</strong>, ведущий технический художник Insomniac Games: <br /><br /> <em>«Мы быстро поняли, что чёткие алгоритмы это хорошо, но гибкость разработки — ещё лучше. Поэтому мы создали иерархию для всего процедурного контента в игре, чтобы уменьшить связь между разными уровнями генерации. Ассеты одного типа — например, светофоры и фонари, — группировались в модуль, которому присваивались свои связи и иерархия. Благодаря этому мы точно знали, что если мы поставим лишний светофор, то он не поменяет нам всю улицу.»</em> <em><a href="https://vk.com/away.php?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4aw9uyj9MAE&cc_key=" style="nofollow noopener">Источник</a></em><br /><em></em></div></div> </div> </div> </div> <style> #rec210669780 .t-text{color:#ffffff;}</style> </div> <div id="rec210670014" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3862-3732-4561-a165-356361363130/JCzU1i5341U.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3862-3732-4561-a165-356361363130/-/empty/JCzU1i5341U.jpg" data-original="https://static.tildacdn.com/tild3862-3732-4561-a165-356361363130/JCzU1i5341U.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3862-3732-4561-a165-356361363130/JCzU1i5341U.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.gdcvault.com/play/1026415/Procedurally-Crafting-Manhattan-for-Marvel" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210670134" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Также пришлось продумать и изменить сам пайплайн создания открытого мира. Художники Insomniac Games хотели тонко контролировать сюжетные задания и основные локации в игре. Они регулярно добавляли новые элементы, текстуры и декоративные объекты, которые генерация подхватывала и распределяла по уже готовой локации. <br /><br /> Чтобы сделанная вручную часть окружения не страдала от подобных изменений, её «замораживали» — после того, как художники и дизайнеры вносили все необходимые правки, алгоритму запрещали доступ к конкретному участку. Причём вместе с, например, зданием, «замораживался» и ближайший к нему тротуар и улица, — чтобы последующие изменения не создали новых конфликтов. <br /><em></em></div></div> </div> </div> </div> <style> #rec210670134 .t-text{color:#ffffff;}</style> </div> <div id="rec210670242" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3633-6334-4939-b766-376530633938/B9rGMQpfltQ.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3633-6334-4939-b766-376530633938/-/empty/B9rGMQpfltQ.jpg" data-original="https://static.tildacdn.com/tild3633-6334-4939-b766-376530633938/B9rGMQpfltQ.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3633-6334-4939-b766-376530633938/B9rGMQpfltQ.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.gdcvault.com/play/1026415/Procedurally-Crafting-Manhattan-for-Marvel" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210670548" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"><span style="font-size: 30px;"><strong>С чего начать </strong></span><br /><br /> Процедурная генерация — не привилегия больших студий и огромных бюджетов. Ей вполне могут пользоваться и небольшие команды, и даже независимые разработчики. Весь вопрос — в масштабах. <br /><br /> Сгенерировать небольшую рощу или деревню на десять жителей сможет любой современный компьютер. Преимущество больших студий в том, что у них хватает вычислительных мощностей на создание огромных лесов и городов. Даже у очень мощной системы такая задача может занять несколько часов. <br /><br /> Если небольшой команде всё же нужно сгенерировать большое пространство, тут можно использовать несколько уловок. Систему генерации можно запускать на так называемых «ночных билдах», когда офисные компьютеры всё равно простаивают. Десяти часов хватит на создание большой локации, и к утру версия мира будет готова для тестирования. Минус этого подхода в том, что новые версии можно будет создавать не чаще, чем раз в день. <br /><em></em></div></div> </div> </div> </div> <style> #rec210670548 .t-text{color:#ffffff;}</style> </div> <div id="rec210671322" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210671322" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=11HjfBIK7xFiKaSx2QR3Ii2Pfb_49EnxY" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=11HjfBIK7xFiKaSx2QR3Ii2Pfb_49EnxY" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210671322');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210671469" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"><a href="https://www.youtube.com/watch?v=b5AIpncO_9I" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> <style> #rec210671469 .t-text{color:#ffffff;}</style> </div> <div id="rec210671637" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Также открытый мир можно разбить на отдельные ячейки и генерировать их по отдельности. Логика генерации и основные алгоритмы в этом случае всё равно задаются один раз на всю карту, но создание каждого участка происходит индивидуально. Это позволяет распределить процесс между несколькими компьютерами, но может создать неаккуратные переходы между ячейками. <br /><br /> Студиям необязательно разрабатывать собственные инструменты для процедурной генерации с нуля. Существуют уже готовые решения, которые пользуются спросом не только в игровой, но и в киноиндустрии. Например, разработчики из Guerilla Games сначала создали рельеф мира для Horizon Zero Dawn в процедурном генераторе World Machine, после чего импортировали результат в свой движок и уже там применяли разработанные инструменты. <br /><em></em></div></div> </div> </div> </div> <style> #rec210671637 .t-text{color:#ffffff;}</style> </div> <div id="rec210671697" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3734-6338-4130-b163-336337353033/4I2kvATHv2k.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3734-6338-4130-b163-336337353033/-/empty/4I2kvATHv2k.jpg" data-original="https://static.tildacdn.com/tild3734-6338-4130-b163-336337353033/4I2kvATHv2k.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3734-6338-4130-b163-336337353033/4I2kvATHv2k.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Horizon Zero Dawn</div></div> </div> </div> </div> </div> <div id="rec210671758" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Стандартом в индустрии считаются World Machine и World Creator. World Machine использует только за счёт процессора, не подключая ресурсы видеокарты. World Creator считается удачным выбором для новичков, так как предлагает дружелюбный интерфейс, но страдает от нехватки глубоких настроек. <br /><br /> В 2019 году вышел процедурный генератор QuadSpinner Gaea, который не уступает по мощности и проработке своим аналогам, а также предлагает умные алгоритмы и инструменты. Архитектура программы позволяет удобно работать с рельефом в реальном времени, а структура похожа на привычный для многих разработчиков Unreal Engine. <br /><br /> Начинающим разработчикам стоит обратить внимание и на отдельные инструменты для движков. И для Unreal Engine, и для Unity есть специальные генераторы и плагины, позволяющие создавать убедительную растительность, не выходя из привычной рабочей среды. А система Houdini сразу включает в себя и 3D-редактор, и програмную среду, и генераторы рельефа и растительности. <br /><em></em></div></div> </div> </div> </div> <style> #rec210671758 .t-text{color:#ffffff;}</style> </div> <div id="rec210671972" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3731-3933-4133-b565-663161646337/video_11.gif"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3731-3933-4133-b565-663161646337/-/empty/video_11.gif" data-original="https://static.tildacdn.com/tild3731-3933-4133-b565-663161646337/video_11.gif"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3731-3933-4133-b565-663161646337/video_11.gif" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://vk.com/away.php?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dc8g4AYPm2XA&cc_key=" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210672268" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Генерация рельефа, городов и лесов — это пройденный этап. Будущее за генерацией окружения, домов и комнат, то есть за счёт более проработанной генерации — той самой, пришествия которой так боятся левел-артисты.»<br /><br />А это примерно то, что показывает Promethean AI.</em> Promethean AI — это интеллектуальная палитра и процедурный генератор, совмещённые в одной программе. Её создаёт бывший технический арт-директор Sony Interactive и Naughty Dog Андрей Максимов, а его основная цель — исключить рутину из творческого процесса художников по окружению. <br /><br /> В основе Promethean AI лежит распознавание типа ассетов. Система понимает, какой объект в неё добавлен, в каком стиле он выполнен и для чего используется. После чего сравнивает собранную информацию с поставленной задачей и решает, подойдёт ли элемент локации или нет. Размещением объектов тоже занимается алгоритм — он, например, следит, чтобы настольная лампа стояла на столе, а одеяло лежало на кровати. <br /><em></em></div></div> </div> </div> </div> <style> #rec210672268 .t-text{color:#ffffff;}</style> </div> <div id="rec210672663" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6431-3331-4631-b832-663534353235/tBPPhne0HSE.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6431-3331-4631-b832-663534353235/-/empty/tBPPhne0HSE.jpg" data-original="https://static.tildacdn.com/tild6431-3331-4631-b832-663534353235/tBPPhne0HSE.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6431-3331-4631-b832-663534353235/tBPPhne0HSE.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><a href="https://www.prometheanai.com/" style="nofollow noopener">Источник</a></div></div> </div> </div> </div> </div> <div id="rec210672867" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Художник может сам «обучать» эти алгоритмы. Для этого нужно расположить несколько объектов в сцене и задать общий стиль, — а остальное пространство достроит генерация. При этом навыков программирования не требуется — система специально создаётся так, чтобы её могли использовать разработчики любых специальностей. <br /><br /> <strong>Александр Балакшин</strong>, геймплей-программист: <br /><br /> <em>«Promethean AI — это своего рода искусственный интеллект, который использует классификацию ассетов. Он создаёт интеллектуальную базу данных, по которой художник может делать произвольные выборки. Например, можно сказать: «Покажи мне все жёлтые стулья, в которых больше миллиона треугольников». И система покажет только нужные объекты.»</em> <br /><br />Promethean AI ещё находится в разработке, но ходят слухи, что им уже начинают пользоваться некоторые крупные студии. Прежде чем программа официально выйдет, её создателям нужно ещё отточить интеллект алгоритмов и обучить систему на множестве объектов — чем больше примеров узнает Promethean AI на этапе разработки, тем лучше будут его результаты после релиза. <br /><em></em></div></div> </div> </div> </div> <style> #rec210672867 .t-text{color:#ffffff;}</style> </div> <div id="rec210673256" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="16" data-bg-color="#0d0d0d"> <!-- T212 --> <div class="t212"> <center> <div class="t-width t-width_10"> <video id="html5video210673256" width="100%" height="520" controls style=""> <source src="https://drive.google.com/uc?export=view&id=1Iq_r_0mg00mQidUG_VrcMMnyGL4HPxPh" type="video/mp4"> <source src="https://drive.google.com/uc?export=view&id=1Iq_r_0mg00mQidUG_VrcMMnyGL4HPxPh" type="video/webm"> Your browser does not support the video tag.
</video> </div> </center> </div> <script>var video=document.querySelector('#html5video210673256');if(video) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';window.addEventListener('resize',t_throttle(function() {if(video.offsetWidth>0) {var height=video.offsetWidth*0.5625;video.style.height=height + 'px';video.parentElement.style.height=height + 'px';}}));var height=video.offsetHeight;video.parentElement.style.height=height + 'px';};</script> </div> <div id="rec210673399" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:center;color:#999999;" data-customstyle="yes"> <a href="https://www.youtube.com/watch?time_continue=1&v=N5O-PDad2Ts&feature=emb_title" style="nofollow noopener">Источник</a><br /><em></em></div></div> </div> </div> </div> <style> #rec210673399 .t-text{color:#ffffff;}</style> </div> <div id="rec210673641" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="line-height:32px;text-align:left;color:#999999;" data-customstyle="yes"> Программы для процедурной генерации постепенно становятся умнее. Tools-инженеры крупных студий и находчивые инди-разработчики развивают и углубляют соответствующие инструменты, экспериментируя с разными подходами. Генерация рельефа, растительности и улиц уже стала стандартом индустрии, созданием интерьеров через несколько лет тоже никого не получиться удивить. <br /><br /> Всё это ведёт к тому, что процедурные алгоритмы смогут легко и быстро «закрашивать» огромные пространства. А чем убедительнее они будут это делать, тем больше времени и сил останется у человека на проработку самых важных деталей и локаций. <br /><em></em></div></div> </div> </div> </div> <style> #rec210673641 .t-text{color:#ffffff;}</style> </div> <div id="rec210538184" class="r t-rec t-rec_pt_15 t-rec_pb_30" style="padding-top:15px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3561-3363-4630-b231-373461643131/-/empty/1.png" data-original="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec210538185" class="r t-rec t-rec_pt_15 t-rec_pb_90" style="padding-top:15px;padding-bottom:90px;background-color:#0d0d0d; " data-record-type="797" data-bg-color="#0d0d0d"> <!-- t797 --> <div class="t797"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3 t-align_center"> <div class="t797__wrapper t797__wrapper_padding" style="background-color:#efefef;"> <div class="t794__title t-descr t-descr_md t-animate" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" field="title">Понравилась статья?</div> <div class="t797__answers t-vote" style="margin-top:-20px" data-vote-type="single" data-vote-id="210538185" data-vote-visibility="onclick"> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1512750238069" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3165-3530-4532-b731-646435653837/-/empty/Poop_Emoji_2.png" data-original="https://static.tildacdn.com/tild3165-3530-4532-b731-646435653837/Poop_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1512750238069"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513680765900" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3564-3630-4239-a563-323339636564/-/empty/Slightly_Smiling_Emo.png" data-original="https://static.tildacdn.com/tild3564-3630-4239-a563-323339636564/Slightly_Smiling_Emo.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513680765900"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513669611253" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild6130-3965-4463-a332-343937336430/-/empty/Heart_Eyes_Emoji_2.png" data-original="https://static.tildacdn.com/tild6130-3965-4463-a332-343937336430/Heart_Eyes_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513669611253"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t797_init',function() {t797_init(210538185);});});</script> <style> #rec210538185 .t797__wrapper{border-radius:10px;}</style> </div> <div id="rec210538186" class="r t-rec" style=" " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec210538186 .t396__artboard {height:460px;background-color:#0D0D0D;}#rec210538186 .t396__filter {height:460px;}#rec210538186 .t396__carrier{height:460px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec210538186 .t396__artboard,#rec210538186 .t396__filter,#rec210538186 .t396__carrier {}#rec210538186 .t396__filter {}#rec210538186 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec210538186 .t396__artboard,#rec210538186 .t396__filter,#rec210538186 .t396__carrier {height:440px;}#rec210538186 .t396__filter {}#rec210538186 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec210538186 .t396__artboard,#rec210538186 .t396__filter,#rec210538186 .t396__carrier {}#rec210538186 .t396__filter {}#rec210538186 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec210538186 .t396__artboard,#rec210538186 .t396__filter,#rec210538186 .t396__carrier {height:480px;}#rec210538186 .t396__filter {}#rec210538186 .t396__carrier {background-attachment:scroll;}}#rec210538186 .tn-elem[data-elem-id="1564554044037"]{color:#ffffff;text-align:center;z-index:1;top:100px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1564554044037"] .tn-atom{color:#ffffff;font-size:32px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.2;font-weight:700;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec210538186 .tn-elem[data-elem-id="1564554044037"]{top:100px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec210538186 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec210538186 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 240px + 40px);;width:400px;height:auto;}}@media screen and (max-width:479px){#rec210538186 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}}#rec210538186 .tn-elem[data-elem-id="1564554130456"]{color:#999;text-align:center;z-index:2;top:185px;;left:calc(50% - 600px + 415px);;width:370px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec210538186 .tn-elem[data-elem-id="1564554130456"]{top:185px;;left:calc(50% - 480px + 295px);;height:auto;}}@media screen and (max-width:959px){#rec210538186 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 320px + 135px);;height:auto;}}@media screen and (max-width:639px){#rec210538186 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 240px + 55px);;height:auto;}}@media screen and (max-width:479px){#rec210538186 .tn-elem[data-elem-id="1564554130456"]{top:195px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;color:#999999;}#rec210538186 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999999;background-size:cover;}}#rec210538186 .tn-elem[data-elem-id="1564554178466"]{z-index:3;top:258px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1564554178466"] .tn-atom{background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec210538186 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec210538186 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec210538186 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 240px + 10px);;width:460px;height:auto;}}@media screen and (max-width:479px){#rec210538186 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 160px + 30px);;width:200px;height:auto;}}#rec210538186 .tn-elem[data-elem-id="1564876573371"]{color:#666666;text-align:center;z-index:4;top:330px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1564876573371"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec210538186 .tn-elem[data-elem-id="1564876573371"]{top:335px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec210538186 .tn-elem[data-elem-id="1564876573371"]{top:315px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec210538186 .tn-elem[data-elem-id="1564876573371"]{top:310px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec210538186 .tn-elem[data-elem-id="1564876573371"]{top:375px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1564876573371"] .tn-atom{font-size:14px;background-size:cover;}}#rec210538186 .tn-elem[data-elem-id="1565701393805"]{color:#666666;text-align:center;z-index:5;top:375px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1565701393805"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec210538186 .tn-elem[data-elem-id="1565701393805"]{top:380px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec210538186 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec210538186 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec210538186 .tn-elem[data-elem-id="1565701393805"]{top:420px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec210538186 .tn-elem[data-elem-id="1565701393805"] .tn-atom{font-size:14px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="210538186" data-artboard-screens="320,480,640,960,1200" data-artboard-height="460" data-artboard-valign="center" data-artboard-height-res-320="480" data-artboard-height-res-640="440"> <div class="t396__carrier" data-artboard-recid="210538186"></div> <div class="t396__filter" data-artboard-recid="210538186"></div> <div class='t396__elem tn-elem tn-elem__2105381861564554044037' data-elem-id='1564554044037' data-elem-type='text' data-field-top-value="100" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="32" data-field-top-res-320-value="70" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="70" data-field-left-res-480-value="40" data-field-width-res-480-value="400" data-field-top-res-640-value="70" data-field-left-res-640-value="40" data-field-top-res-960-value="100" data-field-left-res-960-value="200"> <div class='tn-atom'field='tn_text_1564554044037'>Хочешь получать лучшие статьи<br>от XyZ раз в неделю?</div> </div> <div class='t396__elem tn-elem tn-elem__2105381861564554130456' data-elem-id='1564554130456' data-elem-type='text' data-field-top-value="185" data-field-left-value="415" data-field-width-value="370" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="195" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="155" data-field-left-res-480-value="55" data-field-top-res-640-value="155" data-field-left-res-640-value="135" data-field-top-res-960-value="185" data-field-left-res-960-value="295"> <div class='tn-atom'field='tn_text_1564554130456'>Подпишись на рассылку XyZ</div> </div> <div class='t396__elem tn-elem tn-elem__2105381861564554178466' data-elem-id='1564554178466' data-elem-type='form' data-field-top-value="258" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-top-res-320-value="248" data-field-left-res-320-value="30" data-field-width-res-320-value="200" data-field-top-res-480-value="228" data-field-left-res-480-value="10" data-field-width-res-480-value="460" data-field-top-res-640-value="228" data-field-left-res-640-value="40" data-field-top-res-960-value="248" data-field-left-res-960-value="200" data-field-inputpos-value="h" data-field-inputfontfamily-value="Arial" data-field-inputfontsize-value="16" data-field-inputfontweight-value="400" data-field-inputcolor-value="#666" data-field-inputbordercolor-value="#666" data-field-inputbordersize-value="1" data-field-inputradius-value="7" data-field-inputheight-value="40" data-field-inputmargbottom-value="20" data-field-inputmargright-value="10" data-field-inputtitlefontsize-value="16" data-field-inputtitlefontweight-value="400" data-field-inputtitlecolor-value="#000" data-field-inputtitlemargbottom-value="5" data-field-inputelsfontweight-value="400" data-field-inputelsfontsize-value="14" data-field-buttontitle-value="Подписаться" data-field-buttoncolor-value="#fff" data-field-buttonbgcolor-value="#38b0cd" data-field-buttonbordercolor-value="#666" data-field-buttonradius-value="7" data-field-buttonwidth-value="200" data-field-buttonheight-value="40" data-field-buttonfontfamily-value="BebasRoboto" data-field-buttonfontsize-value="16" data-field-buttonfontweight-value="600" data-field-receivers-value="3a18b021f43e61a277b0babc9a16a84c,164a3b8e9611cc7ecc538151418a854a,d2ad269d53b8517d6f011d8452411a9b,24dadee303ff10af9effec771b8b4e6f,935c4708c0542e69b9c954810f75a47f,808290b07baffee2037d44c1adc9f960,7cb71ac814cf5f11b74e7aff35c39e83,9bd20a80f92aba4c9d1823f2d1339add,3106d7f849cc37cf58f92ca54a12b20d,473bfe0c466b0830324330245ec4f856,22b6124b7d1e8c12b1bfe44591394ad1,4e149223d2a1c89490c6886635e128b1,432ab6b299e9d3b4712f0d8b851a69ca,ede885f6bf92f8aa63caaa2019930c27,ddce5c970ee590f09521887d2c815328,e8e971129be626609ea9f5eacb531712,529d776f47525813dd4c7439d5e2957d,79efdc56002e2fb9160ff9fc91750f61,9349cade6ff136590942028e6ee8bdd0" data-field-inputpos-res-320-value="v" data-field-inputmargbottom-res-320-value="10" data-field-buttonwidth-res-320-value="260"> <div class='tn-atom tn-atom__form'></div> <!--googleoff: all--> <!--noindex--> <div data-nosnippet="true" class="tn-atom__inputs-wrapp" style="display:none;"> <textarea class="tn-atom__inputs-textarea">[{"lid":"1531306540094","ls":"10","loff":"","li_type":"em","li_ph":"Email","li_req":"y","li_nm":"Email"}]</textarea> </div> <!-- Form export deps: https://static.tildacdn.com/css/tilda-zero-form-errorbox.min.css https://static.tildacdn.com/css/tilda-zero-form-horizontal.min.css https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js https://static.tildacdn.com/css/tilda-date-picker-1.0.min.css https://static.tildacdn.com/js/tilda-date-picker-1.0.min.js https://static.tildacdn.com/js/tilda-calc-1.0.min.js https://static.tildacdn.com/js/tilda-upwidget-1.1.min.js https://static.tildacdn.com/js/uploadcare-3.x.full.min.js https://static.tildacdn.com/js/uploadcare-3.x.min.js https://static.tildacdn.com/js/tilda-range-1.0.min.js https://static.tildacdn.com/css/tilda-range-1.0.min.css https://static.tildacdn.com/js/tilda-img-select-1.0.min.js https://static.tildacdn.com/css/tilda-img-select-1.0.min.css --> <!--/noindex--> <!--googleon: all--> </div> <div class='t396__elem tn-elem tn-elem__2105381861564876573371' data-elem-id='1564876573371' data-elem-type='text' data-field-top-value="330" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="375" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="310" data-field-left-res-480-value="85" data-field-top-res-640-value="315" data-field-left-res-640-value="165" data-field-top-res-960-value="335" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1564876573371'>Нажимая на кнопку, вы соглашаетесь с условиями обработки данных<br></div> </div> <div class='t396__elem tn-elem tn-elem__2105381861565701393805' data-elem-id='1565701393805' data-elem-type='text' data-field-top-value="375" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="420" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="360" data-field-left-res-480-value="85" data-field-top-res-640-value="360" data-field-left-res-640-value="165" data-field-top-res-960-value="380" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1565701393805'><u><a href="https://school-xyz.com/privacy" style="color: rgb(102, 102, 102);" data-redactor-tag="a">Политика конфеденциальности</a></u><br></div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('210538186');});});</script> <!-- /T396 --> </div> <div id="rec210538187" class="r t-rec" style=" " data-animationappear="off" data-record-type="142"> <!-- T132 --> <div class="t132"> <div class="t-container_100"> <div class="t132__box t-bgimg" data-original="https://static.tildacdn.com/tild3865-6430-4161-b535-343130393438/Cover_17.jpg" data-lazy-rule="comm:resize,round:100"
style="background-image: url('https://thb.tildacdn.com/tild3865-6430-4161-b535-343130393438/-/resizeb/20x/Cover_17.jpg');"> <div class="t132__wrappper" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"> <a href="/blog/kak-v-igrah-ogranichivayut-otkrytyy-mir"> <div class="t132__textwrapper "> <span> <div class="t132__title t-title t-title_xxs">Как в играх ограничивают открытый мир</div> <div class="t132__descr t-descr t-descr_xs">Невидимые стены, в которые утыкаешься, добежав до края карты, не нравятся никому. Но есть и более удачные способы ограничить открытый мир — границу можно вписать в...</div> </span> </div> <img class="t132__wire " src="data:image/gif;base64,R0lGODlh6ANYAvcAAP///wAAAAICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEAAAAALAAAAADoA1gCAAj/AAEIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNr3sy5s+fPoEOLHk26tOnTqFOrXs26tevXsGPLnk27tu3buHPr3s27t+/fwIMLH068uPHjyJMrX868ufPn0KNLn069uvXr2LNr3869u/fv4MOL/x9Pvrz58+jTq1/Pvr379/Djy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWGap5ZZcdunll2CGKeaYZJZp5plopqnmmmy26eabcMYp55x01mnnnXjmqeeefPbp55+ABirooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxv8q66y01mrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNuvss9BGK+201FZr7bXYZqvtttx26+234IYr7rjklmvuueimq+667Lbr7rvwxivvvPTWa++9+Oar77789uvvvwAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRhnrPHGHHfs8ccghyzyyCSXbPLJKKes8sost+zyyzDHLPPMNNds880456zzzjz37PPPQAct9NBEF2300UgnrfTSTDft9NNQRy311FRXbfXVWGet9dZcd+3112CHLfbYZJdt9tlop6322my37fbbcMct99x012333XjnrffefPf/7fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlmGeu+eacd+7556CHLvropJdu+umop6766qy37vrrsMcu++y012777bjnrvvuvPfu++/ABy/88MQXb/zxyCev/PLMN+/889BHL/301Fdv/fXYZ6/99tx37/334Icv/vjkl2/++einr/767Lfv/vvwxy///PTXb//9+Oev//789+///wAMoAAHSMACGvCACEygAhfIwAY68IEQjKAEJ0jBClrwghjMoAY3yMEOevCDIAyhCEdIwhKa8IQoTKEKV8jCFrrwhTCMoQxnSMMa2vCGOMyhDnfIwx768IdADKIQ/4dIxCIa8YhITKISl8jEJjrxiVCMohSnSMUqWvGKWMyiFrfIxS568YtgDKMYx0jGMprxjGhMoxrXyMY2uvGNcIyjHOdIxzra8Y54zKMe98jHPvrxj4AMpCAHSchCGvKQiEykIhfJyEY68pGQjKQkJ0nJSlrykpjMpCY3yclOevKToAylKEdJylKa8pSoTKUqV8nKVrrylbCMpSxnScta2vKWuMylLnfJy1768pfADKYwh0nMYhrzmMhMpjKXycxmOvOZ0IymNKdJzWpa85rYzKY2t8nNbnrzm+AMpzjHSc5ymvOc6EynOtfJzna6853wjKc850nPetrznvjMpz73yWrPfvrznwANqEAHStCCGvSgCE2oQhfK0IY69KEQjahEJ0rRilr0ohjNqEY3ytGOevSjIA2pSEdK0pKa9KQoTalKV8rSlrr0pTCNqUxnStOa2vSmOM2pTnfK05769KdADapQh0rUohp1oQEBADs="> </a> </div> </div> <div class="t132__box t-bgimg" data-original="https://static.tildacdn.com/tild6430-6261-4866-b564-396163653639/sitebeidj.png" data-lazy-rule="comm:resize,round:100"
style="background-image: url('https://thb.tildacdn.com/tild6430-6261-4866-b564-396163653639/-/resizeb/20x/sitebeidj.png');"> <div class="t132__wrappper" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"> <a href="/blog/kak-rasskazat-istoriyu-cherez-prostranstvo-v-igrah"> <div class="t132__textwrapper "> <span> <div class="t132__title t-title t-title_xxs">Как рассказать историю через пространство в играх</div> <div class="t132__descr t-descr t-descr_xs">В новом видео: как подойти к художественному воплощению локации, чтобы рассказать историю и не разрушить погружение.</div> </span> </div> <img class="t132__wire " src="data:image/gif;base64,R0lGODlh6ANYAvcAAP///wAAAAICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEAAAAALAAAAADoA1gCAAj/AAEIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNr3sy5s+fPoEOLHk26tOnTqFOrXs26tevXsGPLnk27tu3buHPr3s27t+/fwIMLH068uPHjyJMrX868ufPn0KNLn069uvXr2LNr3869u/fv4MOL/x9Pvrz58+jTq1/Pvr379/Djy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWGap5ZZcdunll2CGKeaYZJZp5plopqnmmmy26eabcMYp55x01mnnnXjmqeeefPbp55+ABirooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxv8q66y01mrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNuvss9BGK+201FZr7bXYZqvtttx26+234IYr7rjklmvuueimq+667Lbr7rvwxivvvPTWa++9+Oar77789uvvvwAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRhnrPHGHHfs8ccghyzyyCSXbPLJKKes8sost+zyyzDHLPPMNNds880456zzzjz37PPPQAct9NBEF2300UgnrfTSTDft9NNQRy311FRXbfXVWGet9dZcd+3112CHLfbYZJdt9tlop6322my37fbbcMct99x012333XjnrffefPf/7fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlmGeu+eacd+7556CHLvropJdu+umop6766qy37vrrsMcu++y012777bjnrvvuvPfu++/ABy/88MQXb/zxyCev/PLMN+/889BHL/301Fdv/fXYZ6/99tx37/334Icv/vjkl2/++einr/767Lfv/vvwxy///PTXb//9+Oev//789+///wAMoAAHSMACGvCACEygAhfIwAY68IEQjKAEJ0jBClrwghjMoAY3yMEOevCDIAyhCEdIwhKa8IQoTKEKV8jCFrrwhTCMoQxnSMMa2vCGOMyhDnfIwx768IdADKIQ/4dIxCIa8YhITKISl8jEJjrxiVCMohSnSMUqWvGKWMyiFrfIxS568YtgDKMYx0jGMprxjGhMoxrXyMY2uvGNcIyjHOdIxzra8Y54zKMe98jHPvrxj4AMpCAHSchCGvKQiEykIhfJyEY68pGQjKQkJ0nJSlrykpjMpCY3yclOevKToAylKEdJylKa8pSoTKUqV8nKVrrylbCMpSxnScta2vKWuMylLnfJy1768pfADKYwh0nMYhrzmMhMpjKXycxmOvOZ0IymNKdJzWpa85rYzKY2t8nNbnrzm+AMpzjHSc5ymvOc6EynOtfJzna6853wjKc850nPetrznvjMpz73yWrPfvrznwANqEAHStCCGvSgCE2oQhfK0IY69KEQjahEJ0rRilr0ohjNqEY3ytGOevSjIA2pSEdK0pKa9KQoTalKV8rSlrr0pTCNqUxnStOa2vSmOM2pTnfK05769KdADapQh0rUohp1oQEBADs="> </a> </div> </div> </div> </div> <script>var images=document.querySelectorAll('.t132 img.wire');Array.prototype.forEach.call(images,function(image) {image.addEventListener('load',function() {t132_unifyHeights();});});window.addEventListener('resize',function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});});t_onReady(function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});if(typeof jQuery!=='undefined') {$('.t132').bind('displayChanged',function() {t132_unifyHeights();});} else {var rec=document.getElementById('rec210538187');if(!rec) return;var wrapperBlock=rec.querySelector('.t132');if(wrapperBlock) {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});wrapperBlock.addEventListener("displayChanged",function() {t132_unifyHeights();});}}});</script> </div> <!--footer--> <footer id="t-footer" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="4312269" data-tilda-page-alias="footer" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec517261770" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- автоматизация промобара для курсов и профессий --> <script>
$(function() {
// текст для промобара
$('.heading-1 .tn-atom').html('Учись играючи и со скидкой до 55%'); // заголовок
$('.descr-1 .tn-atom').html('При покупке этого курса ты получишь в подарок любую игру до 2000 ₽ в Steam'); // описание
// описание для сайта Pro
$('.descr-pro .tn-atom').html('Дарим игры: любую до 2000 ₽ в Steam — при покупке курса, Resident Evil Requiem — при покупке профессии');
let currentDate = new Date();
function daysInMonth (month, year) {
return new Date(year, month + 1, 0).getDate();
}
let daysInMonthQuantity = daysInMonth(currentDate.getMonth(), currentDate.getYear());
let numOfMonth = currentDate.getDate();
let numOfMonthFormatted;
let currentMonth = currentDate.getMonth() + 1;
let currentMonthFormatted = currentMonth >= 10 ? currentMonth : '0' + currentMonth;
function setDateEnd(additionalDays) {
if (numOfMonth + additionalDays > daysInMonthQuantity) {
numOfMonthFormatted = '0' + (numOfMonth + additionalDays - daysInMonthQuantity);
currentMonthFormatted = currentMonth + 1 >= 10 ? currentMonth + 1 : '0' + (currentMonth + 1);
} else {
numOfMonthFormatted = numOfMonth + additionalDays >= 10 ? numOfMonth + additionalDays : '0' + (numOfMonth + additionalDays);
}
}
/* указываем дату окончания акции в промобаре */
if (currentDate.getDay() == 1) { // если сегодня понедельник
setDateEnd(3);
} else if (currentDate.getDay() == 2) { // если сегодня вторник
setDateEnd(2);
} else if (currentDate.getDay() == 3) { // если сегодня среда
setDateEnd(1);
} else if (currentDate.getDay() == 4) { // если сегодня четверг
setDateEnd(0);
} else if (currentDate.getDay() == 5) { // если сегодня пятница
setDateEnd(2);
} else if (currentDate.getDay() == 6) { // если сегодня суббота
setDateEnd(1);
} else if (currentDate.getDay() == 0) { // если сегодня воскресенье
setDateEnd(0);
}
if (document.querySelector('.promobar__date-end .tn-atom')) {
document.querySelector('.promobar__date-end .tn-atom').textContent = `до ${numOfMonthFormatted}.${currentMonthFormatted}`;
// document.querySelector('.promobar__date-end .tn-atom').textContent = `до 25.02`;
}
/* end указываем дату окончания акции в промобаре на продуктовых страницах */
});
</script> <style>
.descr-1 .tn-atom {
text-wrap-style: balance;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec521328895" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- скрыть/показать блок с акцией на курсах и профессиях --> <style>
/* блок с акцией */
#rec1123441821 {
/*display: none;*/
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec703641300" class="r t-rec uc-popup-grant" style=" " data-animationappear="off" data-record-type="702"> <!-- T702 --> <div class="t702"> <div
class="t-popup" data-tooltip-hook="#popup:get-consult" data-track-popup='/tilda/popup/rec703641300/opened' role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Запишись на демо-урок" style="background-color: rgba(0,0,0,0.80);"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <style>@media screen and (max-width:560px){#rec703641300 .t-popup__close-icon g{fill:#ffffff !important;}}</style> <style> #rec703641300 .t-popup__container{border-radius:24px;overflow:hidden;}@media (max-width:480px){#rec703641300 .t-popup__container{border-radius:16px;overflow:hidden;}}</style> <div class="t-popup__container t-width t-width_6"
style="background-color:#23232a;" data-popup-type="702"> <img class="t702__img t-img"
src="https://thb.tildacdn.com/tild3831-3666-4563-b734-333035633330/-/empty/_1.jpg" data-original="https://static.tildacdn.com/tild3831-3666-4563-b734-333035633330/_1.jpg"
imgfield="img"
alt=""> <div class="t702__wrapper"> <div class="t702__text-wrapper t-align_left"> <div class="t702__title t-title t-title_xxs" id="popuptitle_703641300">Запишись на демо-урок</div> <div class="t702__descr t-descr t-descr_xs">Зачем записываться?<br /><ul><li data-list="bullet">Познакомим тебя с платформой и процессом обучения.</li><li data-list="bullet">Подарим 1 из 9 курсов на выбор.</li><li data-list="bullet">Получишь доступ к пробной части курса и полную программу.</li></ul></div> </div> <form
id="form703641300" name='form703641300' role="form" action='' method='POST' data-formactiontype="2" data-inputbox=".t-input-group" class="t-form js-form-proccess t-form_inputs-total_5 " data-success-callback="t702_onSuccess"> <input type="hidden" name="formservices[]" value="d19077112a38917a19ec3d0d3a0d2542" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="79efdc56002e2fb9160ff9fc91750f61" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="9349cade6ff136590942028e6ee8bdd0" class="js-formaction-services"> <input type="hidden" name="tildaspec-formname" tabindex="-1" value="Заявка на бесплатный демо-урок"> <!-- @classes t-title t-text t-btn --> <div class="js-successbox t-form__successbox t-text t-text_md"
aria-live="polite"
style="display:none;"></div> <div
class="t-form__inputsbox
t-form__inputsbox_vertical-form t-form__inputsbox_inrow "> <div
class="t-input-group t-input-group_nm " data-input-lid="3316997753180" data-field-type="nm" data-field-name="name"> <div class="t-input-block " style="border-radius:16px;"> <input
type="text"
autocomplete="name"
name="name"
id="input_3316997753180"
class="t-input js-tilda-rule"
value=""
placeholder="Как тебя зовут?" data-tilda-req="1" aria-required="true" data-tilda-rule="name"
aria-describedby="error_3316997753180"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_3316997753180"></div> </div> <div
class="t-input-group t-input-group_em " data-input-lid="1016997753181" data-field-type="em" data-field-name="email"> <div class="t-input-block " style="border-radius:16px;"> <input
type="email"
autocomplete="email"
name="email"
id="input_1016997753181"
class="t-input js-tilda-rule"
value=""
placeholder="Твоя почта" data-tilda-req="1" aria-required="true" data-tilda-rule="email"
aria-describedby="error_1016997753181"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753181"></div> </div> <div
class="t-input-group t-input-group_ph " data-input-lid="1016997753182" data-field-async="true" data-field-type="ph" data-field-name="phone"> <div class="t-input-block " style="border-radius:16px;"> <input
type="tel"
autocomplete="tel"
name="phone"
id="input_1016997753182" data-phonemask-init="no" data-phonemask-id="703641300" data-phonemask-lid="1016997753182" data-phonemask-maskcountry="RU" class="t-input js-phonemask-input js-tilda-rule"
value=""
placeholder="+7(000)000-0000" data-tilda-req="1" aria-required="true" aria-describedby="error_1016997753182"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_loadJsFile',function() {t_loadJsFile('https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js',function() {t_onFuncLoad('t_form_phonemask_load',function() {var phoneMasks=document.querySelectorAll('#rec703641300 [data-phonemask-lid="1016997753182"]');t_form_phonemask_load(phoneMasks);});})})});</script> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753182"></div> </div> <input type="hidden" name="519683" tabindex="-1" value="true"> <input type="hidden" name="519697" tabindex="-1" value="Консультация"> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753185" data-field-type="cb" data-field-name="privacy" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="privacy"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я согласен с <a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Политикой обработки персональных данных, Согласием Пользователя сайта на обработку персональных данных</a> и <a href="https://school-xyz.com/agreement" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">договором публичной оферты</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753185"></div> </div> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753186" data-field-type="cb" data-field-name="check" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="check"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я согласен получать рекламную рассылку и ознакомился с <a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Согласием на получение рекламной рассылки</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753186"></div> </div> <input type="hidden" name="526133" tabindex="-1" value="Заявка на бесплатный демо-урок"> <div class="t-form__errorbox-middle"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> <div class="t-form__submit"> <button
class="t-submit t-btnflex t-btnflex_type_submit t-btnflex_md"
type="submit"><span class="t-btnflex__text">Отправить</span> <style>#rec703641300 .t-btnflex.t-btnflex_type_submit {color:#ffffff;background-color:#6060ff;--border-width:0px;border-style:none !important;border-radius:50px;box-shadow:none !important;font-family:BebasRoboto;font-weight:400;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):hover {color:#17171b !important;background-color:#ffffff !important;}#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):focus-visible {color:#17171b !important;background-color:#ffffff !important;}}</style></button> </div> </div> <div class="t-form__errorbox-bottom"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> </form> <style>#rec703641300 input::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 input:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input:-ms-input-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea:-ms-input-placeholder{color:#ffffff;opacity:0.5;}</style> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t702_initPopup',function() {t702_initPopup('703641300');});});</script> <style> #rec703641300 .t702__title{color:#ffffff;font-family:'BebasRoboto';font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec703641300 .t702__title{font-size:40px;line-height:1;}}@media screen and (min-width:480px) and (max-width:900px){#rec703641300 .t702__title{font-size:32px;}}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__title{font-size:32px;line-height:1;}}#rec703641300 .t702__descr{font-size:16px;line-height:1.6;color:#ffffff;font-weight:400;}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__descr{font-size:14px;line-height:1.6;}}</style> </div> <div id="rec684407761" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стили для #popup:get-consult --> <style>
.uc-popup-grant .t-popup__close {
top: 20px;
right: 20px !important;
width: 40px;
height: 40px;
/*background: rgb(255 255 255 / 20%);*/
background: #23232a;
border-radius: 50px;
}
.uc-popup-grant .t-popup__block-close-button {
width: 16px;
padding: 12px;
}
.uc-popup-grant .t-popup__close-icon {
width: 16px;
height: 16px;
}
.uc-popup-grant .t702 .t-popup__container {
padding: 8px;
box-sizing: border-box;
}
.uc-popup-grant .t702 .t702__img {
border-radius: 16px;
}
.uc-popup-grant .t702 .t702__wrapper {
padding: 24px;
}
/* градиент для заголовка */
.uc-popup-grant .t702__title {
/*background: linear-gradient(#FFEBA9, #D9B339 100%);*/
/*-webkit-background-clip: text;*/
/*-webkit-text-fill-color: transparent;*/
display: inline-block;
}
.uc-popup-grant .t-descr {
display: inline-block;
}
.uc-popup-grant .t-form__inputsbox {
display: flex;
flex-direction: column;
}
.uc-popup-grant .t702 .t-input-group {
margin-bottom: 8px;
}
.uc-popup-grant .t702 .t-input {
border-color: rgb(255 255 255 / 10%) !important;
}
/* стилизация чекбоксов в зеро формах */
.uc-popup-grant .t-checkbox__control {
display: flex;
column-gap: 8px;
}
.uc-popup-grant .t-checkbox__indicator {
width: 24px;
height: 24px;
margin-right: 0;
border: 2px solid rgb(255 255 255 / 50%) !important;
border-radius: 4px;
}
.uc-popup-grant .t702 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
border-color: rgb(255 255 255 / 50%) !important;
background: transparent;
}
.uc-popup-grant .t-checkbox__indicator:after {
width: 5px;
height: 11px;
left: 7px;
top: 1px;
border-width: 0 2px 2px 0;
border-color: rgb(255 255 255 / 50%) !important;
}
/* конец стилизация чекбоксов в зеро формах */
.uc-popup-grant .t-input-group_cb {
order: 5;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
color: rgb(255 255 255 / 50%) !important;
font-size: 12px !important;
line-height: 1.2;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] :is(span, a) {
color: rgb(255 255 255 / 50%) !important;
border-color: rgb(255 255 255 / 50%) !important;
}
.uc-popup-grant .t702 .t-form__submit {
margin-top: 8px;
margin-bottom: 16px;
}
.uc-popup-grant .t702 .t702__form-bottom-text {
margin-top: 24px;
}
/* стилизация кнопки Телеграм */
.uc-popup-grant .t702__form-bottom-text a {
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
height: 54px;
background: #fff;
border-radius: 50px;
color: #17171b !important;
transition: .2s ease;
}
.uc-popup-grant .t702__form-bottom-text a:hover {
background: #f5f5f5;
}
.uc-popup-grant .t702__form-bottom-text a:before {
content: '';
width: 1.5em;
aspect-ratio: 1;
background: url(https://static.tildacdn.com/tild3738-3936-4437-b162-383836343233/Artboard.svg);
background-size: contain;
background-repeat: no-repeat;
}
/* end стилизация кнопки Телеграм */
@media (max-width: 639px) {
.uc-popup-grant .t-popup {
padding: 0 10px;
}
.uc-popup-grant .t-popup[style="display: block;"] {
display: flex !important;
flex-wrap: wrap;
align-items: center;
}
.uc-popup-grant .t-popup .t-popup__container {
flex-wrap: wrap;
min-height: fit-content;
/*padding: 0;*/
margin: 24px 0;
overflow: hidden;
}
.uc-popup-grant .t702 .t702__img {
border-radius: 10px;
}
.uc-popup-grant .t-popup .t-popup__container .t702__wrapper {
background: inherit;
-webkit-transform: none;
-o-transform: none;
transform: none;
padding: 24px 8px 8px;
}
.uc-popup-grant .t-popup__close {
/*top: 16px;*/
/*right: 16px !important;*/
left: auto;
padding: 0;
align-items: center;
justify-content: center;
zoom: 0.7;
}
.uc-popup-grant .t-popup__block-close-button {
margin-right: 0;
}
.uc-popup-grant .t702 .t-input-group {
margin-bottom: 8px;
}
.uc-popup-grant .t702 .t-input {
border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
font-size: 12px !important;
}
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
$('.uc-popup-grant .t-popup').each(function() {
$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Форма для новой версии футера ▼</strong> --> <div id="rec1221022041" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- новая версия футера от 12.08.25 --> <footer> <div class="footer__wrap"> <div class="footer__navigation"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">О школе</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://www.school-xyz.com/license">Лицензия</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/feedback">Отзывы студентов</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/raboty-studentov">Работы студентов</a></li>--> <!--<li class="footer__list-link"><a href="https://school-xyz.com/rassrochka">Рассрочка</a></li>--> <li class="footer__list-link"><a href="#popup:rec">Реквизиты</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/certificate">Подарочный сертификат</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/adminform">Оставить отзыв руководству</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/info-about-it-activities">Об IT деятельности</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/lms">Об обучающей платформе</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/career-xyz">Вакансии</a></li>--> <li class="footer__list-link"><a href="https://career-center.ultimate-education.ru" target="_blank">Карьерный центр</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Направления</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://school-xyz.com/3d-modelirovanie">3D-моделирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/geymdizayn">Геймдизайн</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/2d-illyustraciya">2D-иллюстрация</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/programmirovanie">Программирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/menedzhement">Менеджмент</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/video-i-speceffekty">Видео и спецэффекты</a></li> <!--<li class="footer__list-link"><a href="https://www.school-xyz.com/courses/3ds-max">3ds Max: курсы и профессии</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/courses">Все курсы</a></li> </ul> </nav> </div> <div class="footer__chapter-links-wrapper"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Сотрудничество</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <!--<li class="footer__list-link"><a href="https://school-xyz.com/b2b">Корпоративное обучение</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/we-are-looking-for-new-teachers">Вакансии для экспертов</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/partners">Партнёрская программа</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Проекты</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://media-xyz.com/">XYZ Media</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/mentorstvo-s-gamedev-magistrami">Менторство в геймдеве</a></li> <li class="footer__list-link"><a href="https://thecreativity.ru/plus">Креативити</a></li> </ul> </nav> </div> </div> <div class="footer__contacts-container"> <div class="footer__contacts-wrap"> <a href="tel:+74996474926" class="">+7 (499) 647-49-26</a> <a href="tel:+74993030408" class="">+7 (499) 303-04-08</a> <a href="mailto:hello@school-xyz.com" class="footer__contacts-email">hello@school-xyz.com</a> </div> <div class="footer__social-links"> <a href="https://artstation.com/xyzschool" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6138-6134-4835-a431-326434353061/artstation.svg" class="artstation" alt="Иконка Artstation"> </a> <a href="https://vk.com/xyz_gamedev" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3933-6261-4533-b566-626135393434/vk.svg" class="vk" alt="Иконка VK"> </a> <a href="https://youtube.com/channel/UCtJsE0SDhyS4ib2evb5k3gg/videos" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6539-3932-4764-b961-663633393636/youtube.svg" class="youtube" alt="Иконка Youtube"> </a> <a href="https://t.me/xyz_cg" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3461-3738-4566-b931-323833326538/telegram.svg" class="telegram" alt="Иконка Telegram"> </a> </div> </div> </div> <div class="footer__other-info"> <div class="footer__other-info-left-side"> <p>©2026, XYZ</p> <div class="footer__awards"> <img src="" class="footer__runet-icon" alt="Иконка Рунет"> <a href="https://vk.com/wall-124560669_50286">Премия Рунета 2020, Игровая индустрия</a> </div> <div class="footer__awards"> <img src="" class="footer__skolkovo-icon" alt="Иконка Сколково"> <a href="https://navigator.sk.ru/?q=N4IgZiBcoC4IYHMDOB9GBPADgUyiA9gE4gC%2BANCEngLQC22tARtoSkgJYB2AxrhZlACMJIA">Участник Сколково</a> </div> </div> <div class="footer__legal-info"> <a href="https://www.school-xyz.com/sitemap">Карта сайта</a> <a href="https://school-xyz.com/info-about-educational-organization">Сведения об образовательной организации</a> <a href="https://school-xyz.com/privacy-policy">Обработка персональных данных</a> <a href="https://school-xyz.com/agreement">Оферта</a> <a href="#popup:sout">СОУТ</a> </div> </div> </div> </footer> <style>
:root {
font-family: 'BebasRoboto';
--color-bg: #17171b;
--color-text: #fff;
--color-text-opacity: rgba(255, 255, 255, 0.5);
--color-accent: #6060ff;
--color-border: #373742;
--color-bg-contacts: #2B2A37;
--color-bg-input: #212127;
--color-social-icon: var(--color-accent);
--color-bg-social-icon: #2B2B34;
--url-runet-icon: url(https://static.tildacdn.com/tild6136-3933-4465-b933-613637353637/runet-icon-dark.svg);
--url-skolkovo-icon: url(https://static.tildacdn.com/tild3235-3332-4635-a537-396662353164/skolkovo-icon-dark.svg);
--url-arrow-down: url(https://static.tildacdn.com/tild6663-3965-4735-b337-393062313665/arrow-down-dark.svg);
}
:root .light-theme {
--color-bg: #fff;
--color-text: #17171b;
--color-text-opacity: rgba(23, 23, 27, 0.4);
--color-border: #EDEDED;
--color-bg-contacts: #f5f5f5;
--color-bg-input: #fff;
--color-bg-social-icon: #fff;
--url-runet-icon: url(https://static.tildacdn.com/tild6133-3337-4530-b063-336537643538/runet-icon-light_1.svg);
--url-skolkovo-icon: url(https://static.tildacdn.com/tild3737-3331-4464-a437-613336636531/skolkovo-icon-light.svg);
--url-arrow-down: url(https://static.tildacdn.com/tild3737-3062-4562-b662-623536383335/arrow-down-light.svg);
}
.t123 footer {
position: relative;
background: var(--color-bg);
width: 100%;
will-change: transform;
-webkit-transform: translateZ(0);
padding-top: 112px;
}
.footer__wrap {
display: flex;
max-width: 1160px;
margin: 0 auto;
box-sizing: border-box;
flex-wrap: wrap;
column-gap: 16px;
}
.footer__navigation {
display: flex;
flex-wrap: wrap;
width: 100%;
column-gap: 16px;
padding-bottom: 64px;
margin-bottom: 40px;
border-bottom: 1px solid var(--color-border);
}
.footer__chapter-links-wrapper {
display: flex;
flex-direction: column;
row-gap: 32px;
}
.footer__chapter-links {
width: 278px;
flex-shrink: 0;
}
.footer__chapter-links:last-child {
flex-shrink: 1;
}
#allrecords .footer__chapter-links-list {
display: flex;
flex-direction: column;
row-gap: 8px;
list-style-type: none;
padding-top: 16px;
padding-left: 0;
margin-bottom: 0;
}
.footer__chapter-links-heading {
font-weight: 600;
font-size: 24px;
line-height: 130%;
color: var(--color-text);
}
.footer__list-link {
font-weight: 400;
font-size: 14px;
line-height: 160%;
}
#allrecords .footer__list-link a {
text-decoration: none;
transition: .2s ease;
color: var(--color-text);
}
#allrecords .footer__list-link a:hover {
color: var(--color-accent);
}
.footer__contacts-container {
display: flex;
align-items: flex-start;
flex-direction: column;
row-gap: 24px;
width: 278px;
box-sizing: border-box;
}
.footer__contacts-wrap {
display: flex;
flex-direction: column;
row-gap: 4px;
}
#allrecords .footer__contacts-wrap a {
font-weight: 600;
font-size: 24px;
line-height: 130%;
color: var(--color-text);
text-decoration: none;
transition: .2s ease;
}
#allrecords .footer__contacts-wrap a:hover {
color: var(--color-accent);
}
#allrecords a.footer__contacts-email {
font-weight: 400;
font-size: 18px;
line-height: 160%;
color: var(--color-accent);
transition: .2s ease;
}
#allrecords a.footer__contacts-email:hover {
color: var(--color-text);
}
.footer__social-links {
display: flex;
column-gap: 8px;
}
.footer__social-links a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
transition: .2s ease;
}
.footer__social-icon:hover {
transform: translateY(-4px);
}
.footer__other-info {
display: flex;
justify-content: space-between;
column-gap: 24px;
padding-bottom: 40px;
width: 100%;
}
.footer__other-info-left-side {
display: flex;
align-items: center;
column-gap: 32px;
}
.footer__other-info p {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
}
.footer__awards {
display: flex;
align-items: center;
column-gap: 10px;
max-width: 160px;
}
#allrecords .footer__awards a {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
text-decoration: none;
}
.footer__runet-icon {
content: var(--url-runet-icon);
font-size: 10px;
}
.footer__skolkovo-icon {
content: var(--url-skolkovo-icon);
font-size: 10px;
}
.footer__skolkovo-icon + a {
width: min-content;
}
.footer__legal-info {
display: flex;
align-items: center;
column-gap: 16px;
}
#allrecords .footer__legal-info a {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
text-decoration: none;
transition: .2s ease;
}
#allrecords .footer__legal-info a:hover {
color: var(--color-text);
}
@media screen and (max-width: 1199px) {
.t123 footer {
padding-top: 96px;
}
.footer__wrap {
max-width: 940px;
}
.footer__contacts-container {
width: fit-content;
}
.footer__navigation {
row-gap: 32px;
padding-bottom: 40px;
}
.footer__chapter-links-wrapper {
flex-direction: row;
column-gap: 16px;
order: 4;
}
.footer__chapter-links {
width: 304px;
}
.footer__other-info {
flex-direction: column;
row-gap: 16px;
}
.footer__other-info-left-side {
column-gap: 24px;
}
.footer__legal-info {
column-gap: 16px;
}
}
@media screen and (max-width: 959px) {
.t123 footer {
padding-top: 88px;
}
.footer__wrap {
max-width: 620px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.footer__navigation {
flex-direction: column;
row-gap: 16px;
width: 100%;
}
.footer__chapter-links {
width: 100%;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.footer__chapter-links-wrapper {
order: 3;
flex-direction: column;
row-gap: 16px;
}
.footer__chapter-links-heading {
position: relative;
display: flex;
align-items: center;
will-change: transform;
}
.footer__chapter-links-heading::after {
content: ' ';
background-image: var(--url-arrow-down);
width: 24px;
height: 24px;
position: absolute;
right: 0;
transition: .4s ease;
}
.footer__chapter-links-heading.open::after {
transform: rotateX(180deg);
}
.footer__chapter-links-wrap {
display: none;
}
.footer__contacts-container {
width: 620px;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
height: fit-content;
row-gap: 32px;
padding-top: 24px;
order: 4;
}
.footer__other-info {
flex-wrap: wrap;
justify-content: flex-start;
}
.footer__other-info p {
order: 2;
}
.footer__awards {
order: 3;
}
.footer__legal-info {
flex-wrap: wrap;
order: 1;
max-width: 100%;
width: 100%;
column-gap: 24px;
row-gap: 8px;
}
}
@media screen and (max-width: 639px) {
.t123 footer {
padding-top: 72px;
}
.footer__wrap {
max-width: calc(100% - 24px);
}
.footer__chapter-links-heading {
font-size: 16px;
}
.footer__list-link {
font-size: 12px;
}
.footer__contacts-container {
width: 100%;
row-gap: 16px;
padding-top: 16px;
}
#allrecords .footer__contacts-wrap a {
font-size: 16px;
}
#allrecords a.footer__contacts-email {
font-size: 12px;
}
.footer__social-links {
width: fit-content;
}
.footer__navigation {
padding-bottom: 32px;
margin-bottom: 32px;
}
.footer__other-info {
row-gap: 24px;
justify-content: flex-start;
padding-bottom: 32px;
}
.footer__other-info p {
order: 3;
text-align: center;
font-size: 10px;
width: 100%;
}
.footer__other-info-left-side {
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 16px;
}
.footer__awards {
order: 2;
margin-bottom: 8px;
max-width: 142px;
}
#allrecords .footer__awards a {
font-size: 10px;
}
.footer__legal-info {
align-items: flex-start;
}
#allrecords .footer__legal-info a {
font-size: 10px;
line-height: 16px;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
if (document.documentElement.clientWidth < 960) {
$('.footer__chapter-links-heading').click(function() {
$(this).siblings('.footer__chapter-links-wrap').slideToggle();
$(this).toggleClass('open');
});
}
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec958878116" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация новых чекбоксов от 15.04.25 --> <style>
.t-input-group.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb:has(input[name="privacy"]) {
margin-bottom: 0 !important;
}
/* скрываем чекбокс у согласия с политикой и оффертой */
.t-input-group_cb[data-field-name="privacy"] :is(.t-checkbox, .t-checkbox__indicator),
.t-input-group_cb input[name="privacy"], .t-input-group_cb input[name="privacy"] + .t-checkbox__indicator {
display: none;
}
.t-input-group_cb[data-field-name="privacy"] .t-checkbox__labeltext,
.t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext {
margin-left: 0;
}
.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb .t-checkbox__control:has([name="privacy"]) {
pointer-events: none;
}
.t-input-group_cb[data-field-name="privacy"] a, .t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext a {
pointer-events: auto;
}
.t-input-group.t-input-group_cb[data-field-name="check"], .t-input-group_cb:has(input[name="check"]) {
margin-top: 16px;
margin-bottom: 0 !important;
}
.t-input-group.t-input-group_cb[data-field-name="check"] .t-checkbox__control {
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Мини-футер ▼</strong> --> <div id="rec216668598" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec216668598 .t396__artboard {height:530px;}#rec216668598 .t396__filter {height:530px;}#rec216668598 .t396__carrier{height:530px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:522px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:490px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:649px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}#rec216668598 .tn-elem[data-elem-id="1564645816905"]{z-index:3;top:0px;;left:0px;;width:760px;height:530px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{border-radius:24px 24px 24px 24px;background-color:#17171b;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:522px;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:490px;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:300px;height:649px;border-radius:16px 16px 16px 16px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{background-size:cover;border-radius:16px 16px 16px 16px;}}#rec216668598 .tn-elem[data-elem-id="1596205809432"]{color:#ffffff;z-index:4;top:144px;;left:40px;;width:310px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:136px;;left:40px;;width:300px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:112px;;left:32px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:80px;;left:16px;;width:230px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206009249"]{color:#ffffff;z-index:5;top:144px;;left:350px;;width:280px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:136px;;left:340px;;width:188px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:112px;;left:322px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:324px;;left:16px;;width:240px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206049927"]{color:#ffffff;z-index:6;top:40px;;left:40px;;width:418px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:80px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1;font-weight:500;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:40px;;left:40px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:72px;background-size:cover;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:32px;;left:32px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:56px;background-size:cover;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:24px;;left:16px;;width:202px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:40px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1607933466856"]{color:#ffffff;z-index:7;top:424px;;left:40px;;width:440px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:416px;;left:40px;;width:434px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:392px;;left:32px;;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:549px;;left:16px;;width:268px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;white-space:normal;font-size:12px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="216668598" data-artboard-screens="320,640,960,1200" data-artboard-height="530" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-heightmode="hug" data-artboard-height-res-320="649" data-artboard-height-res-640="490" data-artboard-height-res-960="522"> <div class="t396__carrier" data-artboard-recid="216668598"></div> <div class="t396__filter" data-artboard-recid="216668598"></div> <div class='t396__elem tn-elem requisites-bg tn-elem__2166685981564645816905' data-elem-id='1564645816905' data-elem-type='shape' data-field-top-value="0" data-field-left-value="0" data-field-height-value="530" data-field-width-value="760" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-heightmode-value="fixed" data-field-top-res-320-value="0" data-field-left-res-320-value="0" data-field-height-res-320-value="649" data-field-width-res-320-value="300" data-field-widthmode-res-320-value="fixed" data-field-heightmode-res-320-value="fixed" data-field-top-res-640-value="0" data-field-left-res-640-value="0" data-field-height-res-640-value="490" data-field-width-res-640-value="620" data-field-axisx-res-640-value="left" data-field-heightmode-res-640-value="fixed" data-field-top-res-960-value="0" data-field-left-res-960-value="0" data-field-height-res-960-value="522" data-field-width-res-960-value="620" data-field-heightmode-res-960-value="fixed"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596205809432' data-elem-id='1596205809432' data-elem-type='text' data-field-top-value="144" data-field-left-value="40" data-field-height-value="264" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="80" data-field-left-res-320-value="16" data-field-width-res-320-value="230" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="32" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="40" data-field-width-res-960-value="300"> <div class='tn-atom'field='tn_text_1596205809432'><span style="color: rgb(115, 115, 115);">Наименование</span><br>ООО "ИКС ВАЙ ЗЕТ НЕТВОРК" <br><br><span style="color: rgb(115, 115, 115);">ИНН</span><br>9705150153 <br><br><span style="color: rgb(115, 115, 115);">КПП</span> <br>770501001 <br><br><span style="color: rgb(115, 115, 115);">Счёт (₽) </span><br>40702810902500083750<br>1207700448361 ОГРН</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206009249' data-elem-id='1596206009249' data-elem-type='text' data-field-top-value="144" data-field-left-value="350" data-field-height-value="242" data-field-width-value="280" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="324" data-field-left-res-320-value="16" data-field-width-res-320-value="240" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="322" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="340" data-field-width-res-960-value="188"> <div class='tn-atom'field='tn_text_1596206009249'><span style="color: rgb(115, 115, 115);">Банк получателя</span><br> "ООО "Банк Точка" "<br><br><span style="color: rgb(115, 115, 115);">Город </span><br>Москва<br><br><span style="color: rgb(115, 115, 115);">БИК </span><br>044525104<br><br><span style="color: rgb(115, 115, 115);">Корр. счёт </span><br>30101810745374525104</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206049927' data-elem-id='1596206049927' data-elem-type='text' data-field-top-value="40" data-field-left-value="40" data-field-height-value="140" data-field-width-value="418" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="80" data-field-top-res-320-value="24" data-field-left-res-320-value="16" data-field-width-res-320-value="202" data-field-fontsize-res-320-value="40" data-field-top-res-640-value="32" data-field-left-res-640-value="32" data-field-fontsize-res-640-value="56" data-field-top-res-960-value="40" data-field-left-res-960-value="40" data-field-fontsize-res-960-value="72"> <div class='tn-atom'field='tn_text_1596206049927'>РЕКВИЗИТЫ</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981607933466856' data-elem-id='1607933466856' data-elem-type='text' data-field-top-value="424" data-field-left-value="40" data-field-height-value="66" data-field-width-value="440" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="549" data-field-left-res-320-value="16" data-field-width-res-320-value="268" data-field-heightunits-res-320-value="px" data-field-textfit-res-320-value="autoheight" data-field-widthmode-res-320-value="fixed" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="392" data-field-left-res-640-value="32" data-field-top-res-960-value="416" data-field-left-res-960-value="40" data-field-width-res-960-value="434"> <div class='tn-atom'field='tn_text_1607933466856'><span style="color: rgb(115, 115, 115);">Юридический адрес</span><br>115184, г. Москва, вн.тер.г. муниципальный округ Замоскворечье, ул Бахрушина, д. 10, стр. 2</div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('216668598');});});</script> <!-- /T396 --> </div> <div id="rec216668599" class="r t-rec uc-requisites" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:rec"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec216668599');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('216668599');});});</script> </div> <div id="rec216668601" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа Реквизиты --> <style>
.shirina {
background: none !important;
right: 0 !important;
left: 0 !important;
}
.parpadding {
padding: 0 !important;
}
:is(.uc-requisites, .t390, .t331) .t-popup__close {
top: 24px;
right: 24px !important;
width: 44px;
height: 44px;
background: rgb(255 255 255 / 20%);
border-radius: 30px;
zoom: 0.8;
}
.t-popup__block-close-button {
width: 18px;
padding: 13px;
}
.t-popup__close-icon {
display: block;
width: 18px;
height: 18px;
}
@media (max-width: 639px) {
.uc-requisites .t-popup {
background: rgb(0 0 0 / 40%);
}
.uc-requisites .t-popup__container.t-popup__container-static {
margin: 24px auto;
}
:is(.uc-requisites, .t390) .t-popup__close {
position: absolute;
top: 16px;
right: 16px !important;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
var ZeroPopID = '#rec216668598'; //Прописываем ID Zero
var PopWindID = '#rec216668599'; //Прописываем ID PopUp окна BF503
//Переносим ZeroBlock в POPup + Добавляем новый клас в POPup
$(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID));
$(PopWindID + " .t-popup__container").parent(".t-popup").addClass("parpadding");
// перемещаем крестик внутрь попапа
$('.uc-requisites').each(function() {
$(this).find('.requisites-bg').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec577164264" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:license"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_6"> <div class="t390__wrapper t-align_center"> <div class="t390__descr t-descr t-descr_xs">Лицензия на образовательную деятельность рег. номер <span style="font-weight: 700;">Л035−1 298−77/179 677</span> от 22 февраля 2022</div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec577164264');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('577164264');});});</script> <style> #rec577164264 .t390__descr{color:#17171b;}</style> </div> <div id="rec586447967" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:sout"
role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Результаты СОУТ"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> <div class="t390__wrapper t-align_left"> <div class="t390__title t-heading t-heading_lg" id="popuptitle_586447967">Результаты СОУТ</div> <div class="t390__descr t-descr t-descr_xs">В декабре 2022 года в соответствии с действующим законодательством Российской Федерации в ООО «ИКС ВАЙ ЗЕТ НЕТВОРК» была проведена специальная оценка условий труда.<br /><br />С учётом требований законодательства Российской Федерации о персональных данных и законодательства Российской Федерации о государственной и об иной охраняемой законом тайне публикуем:<br /><ul><li style="color: rgb(23, 23, 27);"><a href="https://drive.google.com/file/d/1Hf0P73TIs0gn8ZB2SeQOeCdK0y1RaYP_/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">сводную ведомость специальной оценки условий труда</a></li><li><a href="https://drive.google.com/file/d/1msPYwdLZh2h88eb6Jrz-xDyERfamTmQc/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">перечень мероприятий по улучшению условий и охраны труда работников</a>, на рабочих местах которых проводилась специальная оценка условий труда.</li></ul></div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec586447967');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('586447967');});});</script> <style> #rec586447967 .t390__title{color:#17171b;font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec586447967 .t390__title{font-size:60px;line-height:1;}}#rec586447967 .t390__descr{font-size:14px;line-height:1.6;color:#17171b;}</style> </div> <div id="rec577164294" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа с лицензией и СОУТ --> <style>
.uc-license-popup .t-popup__container {
border-radius: 20px;
}
.uc-license-popup .t-popup__close {
zoom: 0.8;
background: #F0F0F0;
border-radius: 30px;
width: 44px;
height: 44px;
}
.uc-license-popup .t-popup__block-close-button {
width: 18px;
padding: 13px;
}
.uc-license-popup .t-popup__close-icon {
display: block;
width: 18px;
height: 18px;
}
@media screen and (max-width: 1199px) {
.uc-license-popup .t390__title {
font-size: 52px !important;
}
}
@media screen and (max-width: 959px) {
.uc-license-popup .t390__title {
font-size: 48px !important;
}
}
@media screen and (max-width: 639px) {
.uc-license-popup .t-popup__close {
zoom: 0.6;
top: 16px;
right: 16px;
}
.uc-license-popup .t390__wrapper {
padding: 32px 40px;
}
.uc-license-popup .t390__title {
font-size: 28px !important;
}
.uc-license-popup .t390__descr {
font-size: 10px !important;
}
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
$('.uc-license-popup .t-popup').each(function() {
$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec602614066" class="r t-rec" style=" " data-animationappear="off" data-record-type="886"> <!-- T886 --> <div class="t886 t886_closed" data-storage-item="t886cookiename_1006203" style=""> <div class="t886__wrapper" style="background-color:#ffffff; width:740px;"> <div class="t886__text t-text t-text_xs t-valign_middle" field="text">Пользуясь нашим сайтом, ты соглашаешься с тем, что мы <u style="color: rgb(128, 128, 255);"><a href="https://www.school-xyz.com/privacy-policy" style="box-shadow: none; text-decoration: none; border-bottom-style: solid; border-bottom-color: rgb(128, 128, 255); color: rgb(128, 128, 255);">используем cookies</a></u>.</div> <div
class="t-btn t-btnflex t-btnflex_type_button t-btnflex_sm t886__btn"
type="button"><span class="t-btnflex__text">Принять</span> <style>#rec602614066 .t-btnflex.t-btnflex_type_button {color:#ffffff;background-color:#6060ff;border-style:solid !important;border-color:#6060ff !important;--border-width:1px;border-radius:50px;box-shadow:none !important;font-weight:400;padding:9px 24px 9px 24px;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):hover {color:#ffffff !important;background-color:#6060ff !important;}#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):focus-visible {color:#ffffff !important;background-color:#6060ff !important;}}</style></div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t886_init',function() {t886_init('602614066');});});</script> <style>#rec602614066 .t886__text{text-align:left;}</style> <style> #rec602614066 .t886__text{line-height:1.6;color:#17171b;}</style> <style>#rec602614066 .t886__wrapper {box-shadow:0px 0px 4px rgba(0,0,0,0.1);}</style> <style> #rec602614066 .t886__wrapper{border-radius:16px;}@media (max-width:480px){#rec602614066 .t886__wrapper{border-radius:8px;}}</style> </div> <div id="rec602637647" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация виджета cookie --> <style>
.t886 {
width: 100%;
z-index: 1000000001;
transition: .3s ease;
}
.t-body.show-promobar:not(.hide-promobar) .t886 {
bottom: calc(var(--dynamic-bottom) + 20px) !important;
}
.t886__wrapper {
display: flex;
padding: 12px 24px;
margin: 0 auto;
gap: 16px;
}
.t886__text {
font-size: 14px;
padding-right: 0 !important;
}
.t886__btn {
font-size: 14px;
line-height: 1.6;
}
@media screen and (max-width: 980px) {
.t886 {
width: calc(100% - 20px) !important;
left: 10px !important;
bottom: unset !important;
top: 14px !important;
}
.t886__wrapper {
border-radius: 8px !important;
padding: 8px 16px;
gap: 20px;
}
}
@media (max-width: 639px) {
.t886__text {
font-size: 10px;
}
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec368502560" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- плагин интеграции amo crm -> yandex metrika --> <script type="text/javascript">
(function(){
var ya_counter_id = '65640406';
var ya_client_id = '';
var setYaClientId = function (){
var intervalYaClientId = setInterval(function(){
try {
if (typeof window['yaCounter'+ya_counter_id] !== "undefined" && typeof window['yaCounter'+ya_counter_id].getClientID !== "undefined") {
ya_client_id = window['yaCounter'+ya_counter_id].getClientID();
if (!ya_client_id)
return;
var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++) {
var input = document.createElement("INPUT");
input.type = "hidden";
input.name = "YMClientID";
input.value = ya_client_id;
forms[i].appendChild(input);
}
clearInterval(intervalYaClientId);
}
} catch(err) {
}
}, 1000);
};
setYaClientId();
})();
</script> <!-- nominify end --> </div> </div> </div> </div> </footer> <!--/footer--> </div> <!--/allrecords--> <!-- Stat --> <!-- Yandex.Metrika counter 65640406 --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");window.mainMetrikaId='65640406';ym(window.mainMetrikaId,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true,params:{__ym:{"ymCms":{"cms":"tilda","cmsVersion":"1.0"}}},ecommerce:"dataLayer"});},2000);</script> <noscript><div><img src="https://mc.yandex.ru/watch/65640406" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <script type="text/javascript">if(!window.mainTracker) {window.mainTracker='tilda';}
window.tildastatscroll='yes';setTimeout(function(){(function(d,w,k,o,g) {var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.key=k;s.id="tildastatscript";s.src=g;if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,'46f1ce95aad41ac8b0d98605c4e04383','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');},2000);</script> <!-- Rating Mail.ru counter --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){var _tmr=window._tmr||(window._tmr=[]);_tmr.push({id:"3737289",type:"pageView",start:(new Date()).getTime()});window.mainMailruId='3737289';(function(d,w,id) {if(d.getElementById(id)) {return;}
var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function() {var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,"topmailru-code");},2000);</script> <noscript><img src="https://top-fwz1.mail.ru/counter?id=3737289;js=na" style="border:0;position:absolute;left:-9999px;width:1px;height:1px" alt="Top.Mail.Ru" /></noscript> <!-- //Rating Mail.ru counter --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCCH4H" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html>