Как сделать сетку в юнити

В гугле нашёл много чего. Кое чего попробовал, но всё это не то.

Задача: Нарисовать сетку из квадратиков определённого размера и цвета.
Важное условие, чтобы это всё дело рисовалось не поверх всего экрана, а, так скажем, в середине этого бутерброда.

А по простому, Image в Canvas не пробовал? Или прям суперпроизводительность нужна?

рендерить 3мя камерами с альфой?

Aleskeus
> рендерить 3мя камерами с альфой?
вы, батенька, знаете толк в извращениях 🙂

Можно и совместить канвас с мешами. Но это уже задачу нужно знать подробнее.

Можно и без канваса подобное сделать, через SpriteRenderer. Можно вообще спрайт сгенерить динамически и вывести только один, а можно каждый квадратик отдельный спрайт/текстура

Lucasito
> А по простому, Image в Canvas не пробовал? Или прям суперпроизводительность нужна?
Супер производительность не нужна однако, не очень понимаю зачем Канвас. Я его буду использовать только для UI.

destract
> Command buffer
Почитал что это такое. Не думаю что Command Buffer сможет отделить отрисовку Бэка от отрисовки игровых объектов. Если я не прав, пожалуйста поправьте меня ибо я не силён в данной теме. Сделал выводы исходя из того что прочитал здесь

Lucasito
> Можно и без канваса подобное сделать, через SpriteRenderer. Можно вообще спрайт
> сгенерить динамически и вывести только один, а можно каждый квадратик отдельный
> спрайт/текстура
Можно конечно многое, и хоть я и сказал что супер производительность не нужна, но всё же она немаловажна. Рисовать дополнительно 10к-15к спрайтов даст по FPS значительно.

Gladiator
> Супер производительность не нужна однако, не очень понимаю зачем Канвас. Я его
> буду использовать только для UI.
Ну и зря. На нем можно целиком игры делать

Gladiator
> Можно конечно многое, и хоть я и сказал что супер производительность не нужна,
> но всё же она немаловажна. Рисовать дополнительно 10к-15к спрайтов даст по FPS
> значительно.
Пробовал? Или теория?

Lucasito
> Ну и зря. На нем можно целиком игры делать
Это интересная тема, которую можно вынести в отдельный топик и поговорить, но не сейчас 🙂 Сказать честно, я не знаю какой подход лучше и чем лучше один подход перед другим. Я как-то пробовал подход с канвасом только, для разработки прототипа карточной игры. Были свои подводные камни. В частности, у меня была карта как в Hearthstone, на которой располагались элементы и при движении эти элементы дёргались. Я попробовал тоже самое повторить просто через спрайт дёрганий не было. Но это было давно, так что не знаю. Хочу попробовать сделать через обычные спрайты.

Lucasito
> Пробовал? Или теория?
Теория. Но подкреплённая практикой разработки(хоть и не на юнити).

Спасибо ребята! У меня всё получилось. Рендерю в текстуру и вывожу текстуру на экран. Пока полёт нормальный 🙂

Источник

Как сделать сетку в юнити

Главная » Введение в новую систему 2D-тайловых карт Unity

Введение в новую систему 2D-тайловых карт Unity

Система двумерных тайловых карт юнити открывает прекрасную возможность для начинающих инди-разработчкиков и игровых студий по всему миру сэкономить время на прототипировании и создании качественных 2D-игр. В этом уроке вы будете использовать простую двумерную игру на основе тайлов, чтобы узнать больше о тайловых картах в Unity.

Версия: C# 6, Unity 2017.x, Unity

Без этой системы вы потратили бы дни, а возможно даже недели программируя свою собственную систему тайловых карт или настраивая что-то еще, чтобы все заработало. И это всего лишь часть программирования — а как насчет редактора тайловых карт!?

Новая система бесплатная и встроена напрямую в редактор Unity, и предоставляет множество функций, которые мы рассмотрим в этом уроке.

В данном уроке вы будете использовать простую двумерную игру на основе тайлов, чтобы узнать:

Фух! Это огромный список. Но не бойтесь; вы увидите, как легко освоить эти инструменты, как только начнете.

Примечание. В этом уроке предполагается, что вы имеете достаточные знания для работы в редакторе Unity. Если вы считаете, что не можете выполнить это требование, то для продолжения работы с этим уроком ознакомьтесь с уроком «Введение в Unity». Наконец, убедитесь, что используете версию Unity 2017.3 или выше.

Что такое игра на основе тайловой карты?

Видеоигра на основе двухмерной тайловой карты — это любая игра, в которой уровни или игровые области состоят из множества небольших фигур на основе тайлов, которые вместе образуют сетку тайлов. Иногда различие между каждым тайлом может быть очевидным, но также может быть незаметным и неузнаваемым для игроков.

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

Тайлы обычно квадратные, как вы увидите в этом уроке. Но они бывают и других форм, таких как прямоугольники, параллелограммы или шестиугольники. В играх обычно используется вид с перспективой сверху вниз или сбоку, в играх на основе тайлов также есть опция 2.5D.

Возможно, вы уже знакомы с двумя хорошо известными играми, в которых используется система тайловых карт: Starbound и Terraria.

Приступая к работе

Запустите редактор Unity и загрузите проект Rayzor-starter из распакованного пакета материалов проекта.

Вот с чем вы будете работать в проекте:

Построение игры

Откройте сцену Game из папки Scenes.

Нажмите на кнопку Play в редакторе, чтобы запустить игру. В окне Game используйте кнопки WASD или кнопки стрелки на клавиатуре, чтобы двигать героя.

В настоящее время персонаж блуждает, казалось бы, по бесконечному фону камеры темного цвета в игре.

Чтобы исправить это, вам понадобятся инструменты 2D-тайлов для построения интересных уровней и игровых механик. Если бы только Unity предлагала эту функцию…

Скажите привет моей маленькой тайловой палитре

Это окно теперь является одним из ваших лучших друзей, когда вы работаете над игрой с тайловыми картами в Unity.

Нажмите Create New Palette и назовите палитру RoguelikeCave. Оставьте параметры сетки и ячеек по умолчанию.

Нажмите на Create, и при запросе выберите сохранение новой палитры в папку проекта Assets\Palettes. В этой директории создайте папку с именем RoguelikeCave и сохраните палитру тайлов.

Теперь вы должны увидеть следующую структуру папок в файлах проекта:

В окне редактора Tile palette должно быть выбрано RoguelikeCave; на этом этапе у вас все еще не будет тайлов.

Как можно ожидать от художника создания шедевров, когда нет материалов для рисования!

С открытым окном Tile Palette выберите папку проекта Sprites/roguelike-cave-pack, а затем разверните ассет roguelikeDungeon transparent.png. Далее, выделите все спрайты в таблице спрайтов: выберите первый спрайт, зажмите клавишу shift, затем выберите последний спрайт.

Перетащите все выбранные спрайты в окно палитры тайлов RoguelikeCave

После того, как вы поместите спрайты в окно палитры тайлов, используйте окно запроса о сохранении файлов Unity, чтобы выбрать место для хранения тайлов-ассетов.

Создайте новую папку с именем Tiles ниже Assets/Palettes/RoguelikeCave и выберите эту папку в качестве местоположения:

Unity сгенерирует тайловый ассет для каждого спрайта, добавленного из таблицы спрайтов. Подождите пока это завершится, затем измените размер окна палитры тайлов и полюбуйтесь блестящими новыми тайлами, аккуратно выложенными на палитре RoguelikeCave:

Повторите вышеописанный процесс создания палитры тайлов с помощью окна Tile Palette, но на этот раз назовите новую палитру RoguelikeCustom.

Поместите вновь созданную палитру в новую папку. Назовите RoguelikeCustom и поместите ниже папки проекта Assets/Palettes.

На этот раз, следуя тем же шагам, что и выше, используйте спрайты из таблицы спрайтов Assets/Sprites/roguelike-custom/roguelike-normal-cutdown-sheet.png, чтобы заполнить тайлы в новой палитре. Создайте папку Tiles в папке с палитрой RoguelikeCustom и поместите туда тайлы-ассеты:

Похлопайте себя по плечу, ведь теперь вы хорошо разбираетесь в изящном искусстве создания палитры тайлов!

Создайте сетку тайловой карты

Используя меню GameObject в верхней части редактора Unity — или строку меню Unity, если вы работаете в MacOS — нажмите 2D Object, а затем Tilemap, чтобы создать новую сетку Tilemap:

Вы увидите игровой объект Grid, добавленный в иерархию сцены. Разверните его и выберите вложенный игровой объект Tilemap.

Думайте об этом объекте Tilemap как об одном слое — потенциально многих — в вашей игре. Вы можете добавлять их, чтобы создать больше слоев Tilemap.

В окне Inspector вы увидите два компонента, которые редактор Unity автоматически добавил в этот игровой объект:

Переименуйте игровой объект Tilemap в BaseLayer.

Использование различных инструментов рисования палитры плиток

Переключитесь в режим просмотра сцены в редакторе.

Пока окно палитры тайлов все еще открыто, убедитесь, что у вас выбрана палитра RoguelikeCave, затем выберите инструмент brush (или нажмите B). Выберите песчаный тайл, как показано ниже:

В окне сцены наведите курсор мыши на сетку рядом с игроком. Кисть для песчаного тайла прикрепится к сетке.

Нажмите и удерживайте левую кнопку мыши, и нарисуйте прямоугольную область вокруг игрока. Это закрасит слой BaseLayer Tilemap:

Рисование больших областей может быть утомительным, поэтому есть кисть Filled Box, которую вы можете использовать для рисования больших участков. В окне Tile Palette щелкните значок квадратной кисти (или нажмите U).

Вернитесь в редактор и нарисуйте прямоугольник большего размера вокруг игрока, нажав и удерживая левую кнопку мыши в верхнем левом углу и потянув вниз в правый нижний угол, а затем отпустив кнопку мыши:

Хотя вы добавили красок в свою игру, этот песчаный пол подземелья скучен. Пора добавить разнообразие!

Используя окно Tile Palette, переключите в настройке Active Tilemap на слой DungeonFloorDecoration:

Убедитесь, что вы выбрали инструмент кисть (B), а затем используйте окно сцены, чтобы закрасить ряд случайных гранжевых элементов:

Отключите, а затем снова включите игровой объект DungeonFloorDecoration в Иерархии, чтобы увидеть, как рисование с помощью активной карты тайлов изменило слой DungeonFloorDecoration, гарантируя, что все недавно окрашенные тайлы попали на этот новый слой:

Переключите выбор Active Tilemap в окне Tile Palette на Collideable. Убедитесь, что выбран инструмент кисть (B), затем закрасьте следующие фрагменты тайлов, чтобы создать основную темницу или стену, похожую на шахту, вокруг игровой зоны, которая у вас есть. Красные области ниже — это новые элементы, которые вам нужно добавить:

Смотрите скриншот с окном Tile Palette ниже, чтобы понять, где найти тайлы, которые нужно будет выбирать при построении. Не забывайте, что вы можете использовать CTRL-Z или CMD-Z, чтобы отменить или стереть с помощью текущей кисти (удерживая Shift), если хотите исправить ошибки:

Запустите игру в редакторе и попробуйте пройти сквозь стену:

Кто включил режим noclip?

Это не то, чего вы ожидали?

Проблема в том, что вы только что нарисовали стандартные плитки и еще не применили магическую физику Unity к слою Tilemap.

Выбрав игровой объект Collideable, добавьте новый компонент, нажав кнопку Add Component в окне инспектора; в поле поиска введите Tilemap Collider 2D:

Этот компонент был создан специально для игр Unity 2D Tilemap, и он умело применяет форму физического коллайдера вокруг всех тайлов на слое, к которому он добавлен, без какой-либо другой работы.

Снова запустите игру, и на этот раз попробуйте пробежать сквозь стену. В доступе отказано!

Примечание. Иногда при движении камеры между некоторыми плитками можно заметить маленькие черные линии. Кажется, это проблема с перемещением камеры в настройках системы Unity 2D Tilemap. В основном это смягчается отключением сглаживания в настройках графики. Однако даже после того, как это сделано в стартовом проекте, это все равно немного заметно. Решением этой проблемы должно быть добавление собственного скрипта движения камеры со смещением пикселей. Здесь есть хорошее обсуждение этого вопроса.

Столкновения работают хорошо, и вы можете подумать, что этого достаточно. Но сейчас коллайдеры не оптимизированы эффективно. Используя окно сцены, увеличьте масштаб участка стены и посмотрите на контуры коллайдера:

Вокруг каждого тайла размещен коллайдер. Средние части этих стен не нуждаются в этих дополнительных формах коллайдера.

Не снимая выделения с игрового объекта Collideable, добавьте компонент Composite Collider 2D. Это также автоматически добавит RigidBody2D.

Установите для RigidBody2D BodyType значение Static и установите флажок Used by Composite в компоненте Tilemap Collider 2D:

Как только вы это сделаете, вы заметите, что ненужные квадратные формы коллайдера в середине ваших стен исчезают.

Доделайте стены, выстраивая их вверх и перекрывая вверху — примерно на 16 тайлов в длину вверх. Не забудьте оставить Collideable выбранным в качестве активной тайловой карты в окне палитры тайлов:

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

Чтобы нарисовать полы в коридоре, вы воспользуетесь специальной кистью для тайлов, которая называется Rule Tile. Как вы видели в начале этого урока, пользовательские скрипты тайлов были добавлены в проект уже из репозитория Unity 2D Extras на Github. Один из них — Rule Tile.

Rule Tile позволяет вам устанавливать правила относительно того, какие тайлы будут закрашены в зависимости от других тайлов, прилегающих к тайлу, который вы устанавливаете. Довольно умный!

Используя инструмент box fill brush (B) в окне Tile Palette, и, убедившись, что выбран слой BaseLayer Tilemap, нарисуйте сплошной участок мрамора. Нужно, чтобы он покрывал всю пустую в данный момент площадь пола.

Обратите внимание, что при этом слой покрывает сталкивающиеся плитки стен, потому что порядок слоев еще не установлен. Это легко исправить, выбрав игровой объект Collideable и изменив порядок в слое в компоненте Tilemap Renderer на более высокое значение (5 должно быть как раз):

Вернитесь в папку проекта Prefabs и с открытым окном Tile Palette и выбранной палитрой RoguelikeCave перетащите MarbleFloorRuleTile в пустое место на палитре:

Используйте кисть для заливки квадратов и новый тайл с правилом, чтобы закрасить декоративный мраморный пол в коридоре:

Обратите внимание, как ваш настроенный тайл с правилом гарантирует, что после того, как тайл будет полностью окружен по всем краям и углам, тайл станет тайлом с декоративной текстурой (спрайт, который вы выбрали в редакторе Tiling Rules).

Это ловушка!

Нет, вы не будете представлять адмирала Акбара как игрового персонажа. Вместо этого вы создадите префаб тайловой кисти для ловушки, который сможете использовать, чтобы закрасить вращающиеся ловушки, стреляющие лезвиями!

Создайте новый пустой игровой объект в окне Иерархии и назовите его ShootingTrap. Создайте пустой дочерний игровой объект под ShootingTrap. Назовите его Sprite:

Выберите Sprite и добавьте к нему компонент Sprite Renderer. Установите для слоя сортировки значение Player и для параметра Order in Layer значение 1, чтобы обеспечить рендеринг поверх других слоев. Выберите поле Sprite и выберите roguelikeDungeon_transparent_180 в качестве спрайта.

Теперь поверните Transform игрового объекта Sprite на -90 по оси Z:

Затем вернитесь к игровому объекту ShootingTrap и добавьте новый компонент с помощью окна Inspector. В поиске найдите Shooting Trap и прикрепите этот скрипт.

Этот сценарий включен в загруженные вами файлы проекта; по сути, каждые 2 секунды он запускает сопрограмму, которая создает префаб вращающейся пилы (или любой другой префаб в этом отношении) в текущей позиции ловушки.

Установите для Item to Shoot Prefab в компоненте Shooting Trap значение Projectile (префаб находится в /Assets/Prefabs):

Снова запустите игру в редакторе и используйте окно сцены, чтобы найти ловушку. Все работает!

Перетащите копию ShootingTrap из окна Иерархии в папку проекта /Assets/Prefabs, чтобы создать префаб. Удалите ShootingTrap из иерархии.

Вы воспользуетесь еще одним настраиваемым скриптом тайловой кисти под названием PrefabBrush, чтобы создать кисть, которая закрашивает префабы слоев тайловой карты.

Используйте Inspector, чтобы установить параметр Prefabs Size на 1 на PrefabBrush, и установите Element 0 на ShootingTrap.

Создайте новый слой Tilemap под названием Traps под Grid и откройте окно Tile Palette.

Выберите обычную тайловую кисть (B) и в нижней части окна Tile Palette используйте раскрывающийся список, чтобы выбрать PrefabBrush. Убедитесь, что ваш слой Active Tilemap установлен на Traps, и используйте окно Scene, чтобы нарисовать несколько настраиваемых префабов ловушек вдоль левого края богато украшенной комнаты в коридоре.

Разверните игровой объект Traps в Иерархии и поэкспериментируйте со значением Shoot Start Delay для каждого игрового объекта ShootingTrap, используя скрипт Shooting Trap в Инспекторе для каждого из них. Добавьте дополнительные 0,25 к значению для каждой ловушки, например:

Запустите игру и бросьте вызов, если осмелитесь …

Конечная цель

Цель этого мини-подземелья — куча золота. Слава и богатство ждут тех, кто сможет добраться до него, прежде чем он будет повержен.

Создайте новый слой Tilemap под названием Goal под игровым объектом Grid. Выберите Goal и измените порядок рендеринга тайловых карт в слое на 2:

Пока окно Tile Palette все еще открыто, убедитесь, что PrefabBrush все еще выбран. Измените Element 0, чтобы он ссылался на префаб Goal в папке проекта /Assets/Prefabs.

Используйте стандартную кисть для тайлов, чтобы закрасить один тайл-префаб goal сверху богато украшенной комнаты, которая находится за ловушками:

Спорим, вы не сможете достичь цели с первой попытки!

Последние штрихи

Это подземелье слишком светлое и просторное. Вы можете добавить ему настроение, переключив спрайты на использование материала 2D-спрайта, на который может воздействовать свет.

Выберите Player, Goal и все игровые объекты ShootingTrap Sprite и измените их параметр Material настройки Sprite Renderer на SpriteLightingMaterial:

Это материал с прикрепленным шейдером Sprite/Diffuse. Он позволяет освещению сцены воздействовать на спрайты.

Под игровым объектом Grid выберите игровые объекты BaseLayer, DungeonFloorDecoration, Collideable и Goal и с помощью окна Inspector измените их Материал для рендеринга тайловых карт также на SpriteLightingMaterial.

Затем выберите Directional light под игровым объектом Lights и измените параметр Light Intensity до 0.3.

Вы также можете заметить, что Игрок носит с собой точечный свет — я имею в виду, Фонарь.

Теперь, когда спрайты в игре используют соответствующий материал, освещение Unity влияет на все спрайты вокруг него.

Перетащите две копии префаба FlickerLight из папки проекта /Assets/Prefabs в сцену и поместите их под игровым объектом Lights.

Создайте новый слой Tilemap с именем WallsAndObjects и установите для параметра Tilemap Renderer Order in Layer значение 15 с помощью окна Inspector. Не забудьте также установить параметр Material на значение SpriteLightingMaterial.

Переключите кисть палитры тайлов обратно на кисть по умолчанию, а активную карту тайлов — на WallsAndObjects.

Используйте инструмент кисть (B), чтобы закрасить два тайла «фонаря» под каждым новым светом FlickerLight, который вы разместили в углах начальной области:

Время испытания

Посмотрите, сможете ли вы еще немного украсить подземелье. Используйте слой WallsAndObjects Tilemap, чтобы создать несколько книжных полок в верхней части коридора подземелья, используя другую созданную палитру тайлов под названием RoguelikeCustom. Положите также кусок стены или два с трещинами.

Вернитесь к слою DungeonFloorDecoration Tilemap и добавьте еще несколько фрагментов в мраморный коридор, например трещины на нескольких случайных тайлах:

Поздравляем с прохождением уровня поиска сокровищ в мини-подземелье! У вас должно получиться что-то вроде этого:

Куда двигаться дальше?

Если вы пропустили шаг, вы можете взглянуть на окончательный результат этого урока, открыв проект Unity Rayzor-final по ссылке «Скачать материалы урока» вверху страницы.

Из этого урока вы узнали:

В этом уроке мы охватили массу вопросов, но, как и во всем остальном, всегда есть чему еще поучиться!

Доступны интересные скрипты пользовательских кистей для тайлов, которые не были рассмотрены в этом уроке. Почитайте о них и посмотрите, сможете ли вы найти вариант использования.

Вы также можете взглянуть на создание анимированных тайлов: здесь.

Если у вас есть какие-либо вопросы по использованию тайловых карт в Unity, то присоединяйтесь к обсуждению в комментариях. Также добавляйте уроки в закладки социальных сетей (значки снизу), делайте репосты, чтобы поделиться с другими разработчиками игр.

Источник