Utopia: Дневник Разработки 4 - Одежда и Ткань ⁠ ⁠

Дневник разработки проекта Утопия номер 4 готов! Это короткое видео посвящено использованию программы Marvelous Designer для создания одежды, ткани и тряпок в целом в проекте Утопия.

Приятного просмотра и до новых встреч!

4.9K постов 20K подписчиков

ОБЩИЕ ПРАВИЛА:

- Уважайте чужой труд и используйте конструктивную критику

- Не занимайтесь саморекламой, пишите качественные и интересные посты

СТОИТ ПУБЛИКОВАТЬ:

- Посты о Вашей игре с историей её разработки и описанием полученного опыта

- Обучающие материалы, туториалы

- Интервью с опытными разработчиками

- Анонсы бесплатных мероприятий для разработчиков и истории их посещения;- Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе

НЕ СТОИТ ПУБЛИКОВАТЬ:

- Только гифки/арты/скриншоты из игры. Такие материалы могут сопровождать рассказ об игре или обучающий туториал, но не должны являться основой поста

- Посты, содержащие только идею игры

- Посты, единственная цель которых - набор команды для разработки игры

- Посты, не относящиеся к тематике сообщества

Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.

ЗАПРЕЩЕНО:

- Публиковать бессодержательные посты с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции

- Выдавать чужой труд за свой

Подобные посты будут перемещены из сообщества в общую ленту, а их авторы по решению администрации могут быть внесены в игнор-лист сообщества.

О РАЗМЕЩЕНИИ ССЫЛОК:

Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:

- Пост должен быть содержательным и интересным для пользователей, нести пользу для сообщества

- Ссылка должна размещаться непосредственно в начале или конце поста и только один раз

- Cсылка размещается в формате: "Страница игры в Steam: URL"

Да, нынче очень много инструментов, которые могут позволить нарисовать объекты с фотореалистичным качеством графики. Раньше эту ткань пришлось бы лепить в ZBrush, и нормально она бы смотрелась реалистично только если тот, кто лепил - это художник. А еще раньше такую штуку приходилось бы моделировать в Максе, дергая за вершины, вот там был бы ад. Чтобы сделать такой мешок с барахлом, приходилось бы часов 20 сидеть только в Максе.

А сейчас - куски барахла из простейших объектов в любом 3D-инструменте, ткань в Marvelous Designer-е, а тектсурку в паинтере в три клика. Итого времени на мешок - пол часа работы, если не будешь плутать в интерфейсах.

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

Чел, я тебе как тридешник тридешнику говорю) - тут ты признания не найдешь, эта публика не проникнется той охуенностью которая в ролике. Марвелоус рулит!)

Путь дурака. Игра на Unity с нуля до выпуска. Часть 2 - Как сделать главное меню игры (пост #1)⁠ ⁠

В прошлой части мы скачали Unity, подготовились к работе, создали проект, первую сцену и на ней объекты Canvas и Background. В этот раз мы создадим главное меню нашей игры.

Для начало запомните важную вещь - в 2D игре интерфейс построен на слоях. Одно поверх другого. А также связь Parent - Child (Children) - когда один объект находится в другом и свойства родительского объекта влияют на свойства потомка. Именно по этим принципам мы и будем строить наше меню. Давайте попробуем визуально представить как его можно расположить на экране.

Левый блок - это будет объект mainMenu. Он будет родителем для объектов "название игры", "пункты меню" и "ваше лого". Они тоже будут содержать в себе объекты. Начнем.

Создайте пустой объект (Empty Object) и сделайте его дочерним объекта Canvas (в иерархии перетяните один объект на другой). Другой вариант - клик ПКМ по объекту Canvas и затем выбор создания пустого объекта. Так он автоматически станет дочерним. Переименуйте его в mainMenu.

Чтобы mainMenu стало видно на экране, ему нужно добавить компонент Image через меню Add Component в инспекторе (как добавлять компонент я рассказывал в прошлом посте). Так, ну и где же он?

Чтобы придать нашему меню нужное положение, воспользуемся его компонентом Rect Transform. В разделе Anchors устанавливаем:

Затем Left, Right, Top, Bottom ставим по нулям.

Теперь установим нашему меню вместо белого пятна приятный глазу цвет. В компоненте Image нажмите на поле Color и установите:

- R - 0.012 (красный)

- G - 0.012 (зеленый)

- A - 0.7 (альфа-канал или прозрачность)

Для закрепления материала по размещению объекта на экране создадим два декоративных элемента - две полоски по бокам от плашки меню.

1. Создаём два пустых объекта как Child объекта mainMenu - line1 и line2

2. Назначаем Anchors для line1

3. Назначаем Anchors для line2

4. Устанавливаем обоим объектам цвет как у mainMenu

Теперь можно похвалить себя и подышать свежим воздухом. Далее нам нужно создать объекты для названия игры, пунктов меню и логотипа. Делаем мы это по тому же принципу - создаем дочерние объекты в mainMenu - top, middle и bottom. Для наглядности сразу добавляем им компонент Image с белым цветом (потом изменим).

Аккуратно распределяем объекты на объекте mainMenu, расставляя значения Anchors.

Top --> X: (0, 1) Y: (0.8, 0.96)

Middle --> X: (0, 1) Y: (0.15, 0.8)

Bottom --> X: (0, 1) Y: (0.04, 0.15)

Для создания небольших отступов или точного корректирования положения объекта можно задавать значения Left, Right, Top, Bottom в компоненте Rect Transform. Попробуйте поставить всем трем объектам эти значения по 2 пикселя. Главное не злоупотреблять этим, а то может верстка перестать быть стабильной.

Итак, мы нашли хорошее расположение для блоков и теперь можем удалить у них компоненты Image и Canvas Renderer, так как больше они нам не понадобятся.

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

Откроем Фотошоп и создадим в нём новый файл размером 1000х1000 пикселей.

Затем добавим название игры.

Нарисуем декоративную линию.

Добавьте слоган внизу, затем подрежьте инструментом "Рамка" лист по самые края логотипа.

Далее удаляем слой фона, чтобы сделать логотип прозрачным. Затем устанавливаем размер изображения с шириной в 1000 пикселей. После этого нам очень важно сделать так, чтобы каждая сторона изображения была кратна 4 - это необходимо для применения алгоритмов сжатия, чтобы уменьшить вес игры. Так как обрезать уже нечего, то через "Размер холста" делаем высоту 212 пикселей. Итоговый размер 1000х212.

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

Сохраните полученое изображение в формате PNG и положите его в папку проекта Assets/Resources/Images (создайте её). Сам исходный файл PSD сохраните в отдельной папке вне проекта, где вы будете хранить исходники графики.

Самое время добавить созданное название в игру! Создаем для top дочерний объект gameName, добавляем ему компонент Image и выравниваем на экране. Для того, чтобы изображение не искажалось, в компоненте Image активируем Preserve Aspect - эта функция позволит сохранить пропорции.

Отлично! Гейб Ньюэлл вами был бы доволен.

Теперь займёмся объектом middle и сделаем в нем несколько кнопок, которые будут вести в нужное место - "Новая игра", "Загрузить игру", "Настройки", "Об игре", "Выход".

Нам пригодится полезный компонент под названием Vertical Layout Group. Он выравнивает дочерние объекты по вертикали, регулирует их высоту, ширину и отступы. Это означает, что нам не придётся вручную устанавливать размеры и положение кнопок. Его можно сразу добавить к объекту middle.

Таким же образом добавьте еще 4 кнопки и настройте Vertical Layout Group у объекта middle.

Padding - это отступы всего списка кнопок относительно объекта.

Spacing - это отступы между кнопок.

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

Обратите внимание на иерархию - у каждой кнопки есть дочерний объект Text. Это такой же объект, как и все, только с прикрепленным компонентом Text. В нем можно вписать текст объекта, указать шрифт, размер, начертание, цвет, выравнивание. Этих настроек вполне достаточно для нашей игры. Установите размер шрифта 24 пикселя.

Теперь можно нажать кнопку Play вверху рабочего стола и потыкать по кнопкам.

У каждой кнопки есть компонент Button, у которого есть целый ворох настроек как кнопка будет меняться при нажатии, наведении курсора итд. Однако, для мобильных платформ, где не мышка, а тачскрин, это не нужно. Поэтому отключите эту функцию, поставив Trasition --> none.

Далее можно удалить у кнопок компонент Image - для такого минималистичного дизайна он не нужен. Цвет текста сделайте белым.

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

Пришло время для правой части меню - не забыли про неё? Для начала определимся, что будет делать каждая кнопка.

Новая игра - выдает список слотов сохранений, при нажатии на который запустится новая игра и автоматически сохранится в этот слот.

Загрузка игры - аналогично, только загружает сохранение.

Настройки - выбор языка игры, громкости звука и музыки.

Дополнительно - авторы, ссылки, благодарности и прочая второстепенная информация.

Выход - закрывает приложение.

Сделаем на каждую кнопку кроме "Выход" своё поле с информацией, которое будет активироваться при нажатии. Создайте в Canvas дочерний объект newGameList, скопируйте для него компонент Image из объекта mainMenu и установите Anchors --> X: (0.31, 0.9) Y: (0, 1).

В нем создайте 6 кнопок для слотов сохранений и назовите их game_0, game_1, game_2, game_3, game_4, game_5. В этот раз мы не будем распределять их с помощью Vertical Layout Group, но сделаем их с небольшой графикой.

Для начала распределите их равномерно по объекту newGameList, используя Anchors.

Теперь создайте в Фотошопе новое изображение размером 400х400 пикселей. Нарисуйте в нем прямоугольник с границей, но без заливки, как показано на скриншоте.

А затем нарисуйте прямоугольник поменьше, но с заливкой.

Удалите слой фона, сделайте прямоугольники белого цвета и сохраните как PNG в папку Assets/Resources/Images под именем frame_1.

В Unity нам потребуется отредактировать границы спрайта изображения, для того чтобы мы могли его без искажений растягивать в разные стороны. В дереве проекта выберите наше новое изображение frame_1, нажмите в инспекторе Sprite Editor и в открывшемся окне установите Border (границы) на 12 пикселей. Именно в этих местах спрайти будет растягиваться, подгоняясь под размеры кнопки. Закройте это окно и нажмите Save.

Примените новый спрайт ко всем кнопкам и в компоненте Image установите Image Type на Sliced. Надо поправить цвет кнопок.

- R - 0.012 (красный)

- G - 0.012 (зеленый)

- A - 0.7 (альфа-канал или прозрачность)

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

Цвет текста кнопок так же меняем на белый.

Так как нам нужно точно такое же поле для раздела "Загрузка игры", мы можем просто скопировать это. Деактивируйте объект newGameList, нажав на галочку возле его имени в инспекторе, затем в иерархии щёлкните по нему ПКМ и нажмите Duplicate. Теперь нужно только его переименовать в loadGameList, чтобы не путаться. Деактивируйте его, чтобы не мешался.

Раздел "Настройки". Создайте такое же поле, но только без кнопок. Этот раздел посложнее предыдущего, поэтому сделаем для начала небольшие намётки.

Первым сделаем блок выбора языка с выпадающим списком. Нужно создать объект language внутри optionsList и установить ему Anchors X: (0.03, 0.97) Y (0.85, 0.95). Внутри language создаем объект header, устанавливаем Anchors X: (0, 0.48) Y (0, 1), добавляем ему компонент Text с размером шрифта 24 и выравниванием по правому краю и по центру.

Теперь нам нужно сделать выпадающий список. В Unity уже есть готовое решение - нам нужно только правильно его настроить. Добавьте в language объект UI -> Dropdown и устанвите ему Anchors X: (0.5, 1) Y (0, 1). Сразу же можно установить ему почти чёрный цвет с прозрачностью 0.78.

В нём достаточно много дочерних объектов. Разверните его полностью и внимательно поменяйте настройки. По шаблону "Объект: Компонент --> настройки".

- Dropdown: Dropdown --> Transition "none", список Options - поменять Option A итд на названия языков игры.

- Label: Text --> Русский, размер шрифта 24, цвет белый.

- Arrow: Rect Transform --> PosX -20, Wigth 40, Height 40.

- Template: Rect Transform --> Height 450; цвет сделать как у объекта Dropdown

- Content: Rect Transform --> Height 80.

- Item: Rect Transform --> Height 80; Toggle --> Transition "none"

- Item Background: цвет сделать как у объекта Dropdown

- Item Checkmark: Rect Transform --> PosY -5

- Item Label: Rect Transform --> Left 25, Top 15; Text --> размер шрифта 24, цвет белый.

Если ничего не пропустить, то результат будет как на видео ниже.

По аналогии с языковой панелью делаем объект music, размещаем в нём объект header с компонентом Text (пишем "Громкость музыки"). Нам понадобится слайдер - добавляем его UI/Slider с Anchors X: (0.5, 1) Y (0.3, 0.7).

В компоненте Slider отключаем Transition.

В дочернем объекте Background делаем черный цвет.

Таким же образом создаём слайдер для "Громкости звуков".

Готово! Вы - великолепны!

Лимит картинок опять исчерпан, поэтому продолжим в следующий раз.

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

Программирование и игрострой. Путь дурака. Пролог⁠ ⁠

Господа! Я уже столь давно на Пикабу, что кажется, что я целую жизнь прожил в этом сообществе *слезы потерянного времени*.

Однажды я решил, что путь общепита приведёт меня в перманентную жопу, и вознамерился создать игру. Да-да, стать, мать его, разработчиком. Основная проблема любой новой деятельности - ты не знаешь с чего начать. Когда-то, когда я увлекался 3D, я нашел очуменный туториал по Blender и неделю втыкал в него как наркоман. И благодаря ему я смог освоить инструменты "легко и непринужденно".

Мне стало интересно - я может ли такой тупарь и гуманитарий как я освоить программирование? И знаете что? (вы знаете. Ведь если бы был другой вариант ответа, я бы это полотно не писал)

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

Я расскажу вам как из уровня "очень круто, но них*я не понятно" добраться до уровня "я выпустил игру - как мне дальше жить". Это будет туториал - самый настоящий и честный - мы просто пройдём с вами мой путь по дороге из коричневого кирпича и напишем игру. Точнее - мы напишем мою игру заново и все вместе, потому что я честно хочу поделиться этим опытом.

Я потратил около двух лет, чтобы хоть немного понять смысл программирования и игростроя. Надеюсь, мои статьи помогут вам сократить это время.

Если вы заинтересованы пройти "путём дурака", то скачайте Unity и мы потихоньку начнём. Первую статью я оформлю за недельку, я думаю.

Конечно же, тут понадобится небольшой дисклеймер:

1. Мне всё равно, что вы думаете, но я прислушиваюсь к вашему мнению

2. Я ничего не обещаю и не гарантирую - я такой же нуб как и вы

3. Я буду писать текст так, как обычно обучаю новых сотрудников на работе

4. Я буду класть большой ржавый болт на попытки высера :)

Ну и немного скринов на затравку (с разных этапов разработки и в разном формате)