RPG Maker MZ: урок №4. Тайлсеты и их устройство. Добавление графики⁠⁠

Суровые годы уходят

В борьбе за свободу страны

За ними другие приходят

Они будут тоже трудны

(псевдореволюционная песня из х/ф «Собачье Сердце»)

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

По традиции есть и видео версия:

Лично я использую Adobe Photoshop CC 2017 (до выхода MZ вообще сидел на CS5),так что объяснять буду на примере этой программы, а уж если вы принадлежите к адептам ГИМПа, Пайнт Нета или знаете толк в Пайнт Шоп Про, то придется вам гуглить, как сделать тоже самое в данных прогах.

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

Обратите внимание, например, на первые пять кнопок поля Графика, а именно А1, А2 и так далее, вплоть до А5. Дело в том, что вкладка А является сложносоставной, а эти кнопки как раз и отвечают за выбор файлов, которые ее формируют.

А1 (Анимация): анимированные автотайлы, верхние два ряда тайлов вкладки А. Размер листа 768x576 пикселей. Как правило это вода, лава, болота, водопады и детали к ним.

А2 (Земля): автотайлы поверхности, следующие четыре ряда вкладки А. Размер листа такой же - 768x576 пикселей. Земля, низкая трава, пол, высокая трава, заборчики, трещины в земле, провалы в полу и т.п.

А3 (Строения): автотайлы стен домов и их крыш, следующие четыре ряда вкладки А. Размер листа - 768x384 пикселей.

А4 (Стены): автотайлы стен и плоских крыш, либо верхушек этих стен, следующие шесть рядов вкладки А. Размер листа - 768x720 пикселей.

А5 (Стандарт): обычные тайлы пола, ступенек и уродских квадратных возвышенностей. Отличаются тем, что по умолчанию ложатся на первый слой (можно вручную расположить на любом другом) и тем, что почти всегда позволяют мостить собой дорожки, площади и т.д. не являясь автотайлами. Размер листа 384x768 пикселей.

Какие-то листы, пиксели, автотайлы, не автотайлы… Что это вообще и зачем?

Чтобы въехать в суть обратимся к пресвятому Фотошопу и откроем в нем любой лист с тайлами. Например, Outside_B, который лежит по следующему пути:

Выбранный при создании нового проекта каталог (см. урок №1) -> Папка с игрой -> img -> tilesets -> Outside_B.png

Открыли? Теперь нужно наложить на него сетку 48х48 пикселей. Кто знает как – тот молодца, а остальные запоминайте: Ctrl+K -> Направляющие сетка и фрагменты -> раздел «Сетка» -> Линии через каждые: -> ставим 48 пикс., в графе Внутреннее деление на: ставим 1. Цвет ставим какой-нибудь яркий, например красный, как у меня.

Жмякаем ОК, окно настроек закрывается, и включаем отображение сетки сочетанием клавиш Ctrl+Э (или Ctrl+’ если вам так больше нравится, просто пока этот апостроф найдешь на клавиатуре…)

Теперь у нас в ФШ настроена стандартная мукерская сетка.

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

Давайте не будем откладывать в долгий ящик добавление сторонней графики в проект!

Где брать графику? У вас четыре варианта:

1. Если мы делаем некоммерческий проект, который не пойдет дальше друзей/знакомых/форумов и соцсетей, то достаточно будет вбить в гугл что-то типа «rpg maker mz tilesets», врубить поиск по картинкам и выбирать то, что вам понравилось. Традиционно всем плевать, что и откуда вы спиратили до тех пор, пока появляется заработок с этого. Но, нужно помнить, что все-таки подобная деятельность незаконна.

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

3. Использовать графику, помеченную как free for commercial, которую создал какой-то человек и раздал бесплатно. Но в этом случае возможна ситуация, когда у вас потребуют доказать право на использование этой графики. Придется искать автора и брать у него письменное разрешение. По факту я о таких случаях не слышал, обычно всем пофигу, что вы юзаете в своей игре до тех пор, пока кто-нибудь из правообладателей не предъявит претензию. А если вы честно взяли то, что раздавалось бесплатно, то и претензий не будет.

Бесплатной графики можно пошукать на официальном форуме движка:

forums.rpgmakerweb.com

Или в гугле, переходя по понравившимся картинкам и читая, на каких условиях они выложены.

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

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

К рисованию мы обратимся в расширенном курсе по мукеру, поэтому давайте пока воспользуемся тем, что гугл пошлет! Отворяем браузер и забиваем в строку поиска, например «rpg maker mz forest tileset» – ну вот не нравятся мне стандартные деревья, хоть ты тресни. Хочу маппить леса нормальные, красивые, чтобы прям ух!

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

Вот это – заебись, богоугодная хуйня!

Прям ух нашелся почти сразу – это популярный лист с деревьями от PandaMaru. ПКМ-> открыть изображение в новой вкладке -> ПКМ -> Сохранить изображение как. Затем, находим этот файл у себя на компе и открываем с помощью фотошопа.

Как мы видим, в принципе, это и так лист 768х768. И мы можем его без проблем запихнуть в мукер и положить в любую вкладку от В до Е – формат уже соблюден и даже тайлы расставлены по сетке, спасибо Панде!

Но, для обучения этого нам мало. Давайте возьмем только часть графики с этого листа в наш проект.

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

Создадим чистый лист 768х768 пикселей и обзовем его Outside_E

Не забудьте в разделе Содержимое фона выставить Прозрачный фон.

Создали? Молодцы. Вот перед нами чистый лист. Теперь мы можем выделить что-то на том листе от Панды и перетащить это сюда.

Выделение областей в ФШ производится вторым сверху инструментом, который называется Прямоугольная Область. Удерживая Shift можно добавлять области к уже выделенным, а удерживая Alt – вырезать из них. Я выделю только три больших дерева. Мелкие мне не надо, а остальное пусть пока лежит, может после заберу.

Теперь выбираем инструмент Перемещение (самый верхний, с изображением стрелочек), наводим на любую часть выделенной области, заживаем ЛКМ и тянем. Двигается да? И выделение как бы обхватило тайлы. Не отпуская ЛКМ наводим курсор на вкладку с новым листом Outside_E, ФШ переключается на нее, опускаем курсор на лист (под ним появился значок +) и бросаем сцепление ЛКМ. Вуаля, как говорят французы! Деревья переместились на наш новый лист. Расположим их по сетке на глазок и сохраним файл в папку tilesets нашего проекта. Меню Файл -> Сохранить как. Сохраняем, разумеется в формате PNG, выбор формата будет внизу окошка.

Параметры PNG оставляем те, что предлагает ФШ, т.е. медленное сжатие со снятым выделением.

Перейдем в мукер и посмотрим, как оно там себя чувствует.

База Данных -> Тайлсеты -> Экстерьер -> вкладка Е и ищем наш лист. Пока еще я напоминаю вам путь до нужного места, хотя мы там уже были, но скоро перестану! Запоминайте!

Небольшая неувязка вышла, дерево разрезало пополам. Это произошло из-за того, о чем я говорил – лист 768х768 вкладок B, С, D, E редактор делит пополам и правую часть отображает в наборе внизу под левой. Это не страшно и дерево все равно можно будет использовать, но выделить целиком и поставить одним кликом уже не выйдет, что в конечном итоге порождает лишние движения и трату времени.

Вернемся в ФШ на наш лист и все исправим – просто выделим большое дерево и перенесем его в правую часть листа. Сохраняем, сняв галочку «Как копию» в окне сохранения, соглашаемся на замену файла и нажимаем ОК в Параметрах. Возвращаемся в базу и видим, что дерево теперь не разрублено, а полностью умещается в нижней части листа.

Если вы метнулись из базы в ФШ не закрывая ее, то для обновления информации придется в нее перезайти.

Проходимости расставите сами, подсказку я вам запечатлел на скриншоте.

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

С листами для вкладок от В до Е все просто и понятно. Но, как же быть с хитрой вкладкой А? Ох, уж мне эти автотайлы. Сейчас будет сложно, напрягите все, что можно напрячь!

Закроем в ФШ все, что наоткрывали (он предложит сохранить изменения в PSD – это пока необязательно) и откроем файл Outside_A2.

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

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

Левая половина листа А2 – располагается по умолчанию на слое 1 и не умеет в прозрачность! Тут могут быть ТОЛЬКО сплошные тайлы.

Правая половина А2 – располагается по умолчанию на слое 2 и прозрачность понимает. При этом, содержимое правой половины листа также воспринимается редактором, как автотайлы.

Устройство автотайлов

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

Возьмем один из автотайлов, выделим его целиком и по ПКМ скопируем на новый слой. Отображение списка слоев в ФШ включается клавишей F7 – рекомендую нафиг убрать все остальные вызываемые этой клавишей окна, так как для работы с мукером, нам ничего кроме списка слоев не потребуется. Открепляются окна друг от друга простым перетягиванием мышью за верхнюю полоску с названием, а потом можно их закрыть нажатием на крестик в углу.

Так же я настроил себе однотонный фон, так как шашечки эти презираю – от них в глазах рябит. Если у вас тоже, то Ctrl+K -> Прозрачность и Цветовой Охват. Там это задается. Заодно поставьте в настройках сетки внутреннее разбиение на 2 – будет нагляднее.

Т

ак, скопировали тайл на новый слой, теперь скроем слой нижний нажатием на глаз (на иконку глаза в списке слоев, а не на свой глаз!) и перетянем тайл куда-нибудь в середину листа для удобства работы. Уф. Много действий, а ведь мы только начали…

Я выделил для вас составные части автотайла –

Синяя – используется для одиночного клика и миниатюры

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

Желтая – основная часть, используется для построения всего остального.

Рассмотрим подробнее каждую из частей, начиная с нижней, которую я выделил желтым.

Итак, нижняя большая часть автотайла состоит из центральной части (1), боковин (2) и углов (3). Причем, как я наглядно кривыми стрелками показал (лень планшет подключать), из углов(3) собрана верхняя правая часть.

Центральная часть(1) служит для заполнения области внутри автотайла. Достигается это за счет того, что ее стороны А1 и А2, а так же В1 и В2 способны продолжать друг-друга, т.е. по сути, этот квадрат является бесшовной текстурой.

Бесшовная текстура центрального квадрата, размноженная вручную.

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

Боковины, размноженные в линию вручную.

С углами (3) все более-менее ясно, я полагаю. Они нужны для отрисовки внешних углов автотайла, из них складывается одноклеточный автотайл, а так же миниматюра для редактора.

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

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

Дальше у нас проще. Посмотрим на автотайлы А4 (Стены), например файл Outside_A4

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

Важно понимать, что мейкер не разбирается в том, что изображено на картинке, а просто разбивает лист на области и применяет к ним соответствующие атрибуты рисования. Поэтому нельзя кинуть автотайл на лист как попало, а лишь только так же, как расставлено по дефолту. В этом отличие всех листов вкладки А (кроме А5), от прочих, где атрибут отрисовки один на весь лист – обычное копирование. Т.е. если на листе идет ряд верхушек стен, а под ним ряд самих стен, то нельзя кидать наоборот, все должно быть строго на своем месте, что бы корректно работать.

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

В любом файле части А3 (Строения) вы уже не увидите ничего нового. Два ряда, на одном крыши, на другом стены. Технически – оба ряда обладают одинаковыми атрибутами отрисовки и являются копией Стен из А4. Т.е. просто область заполнения с боковинами без углов.

В части А5 все совсем просто – это даже не автотайлы, это скорее центральные их части, т.е. бесшовные текстуры для заполнения вручную. Единственное, чем эти листы необычны – размером 384х768 пикселей. Сюда вы можете пихать что угодно и как угодно. Никаких особенных атрибутов эта часть не имеет, разве что по дефолту ставится на первый слой.

Остается у нас самое необычное – А1. Анимированные автотайлы. Открываем в ФШ файл Dungeon_A1 (потом объясню, почему именно его).

Впринципе, вы люди догадливые, и наверняка заметили, что это точно такие же автотайлы, просто их по три штуки каждого вида – как раз по количеству кадров, верно? Но смущают водопады… и прозрачность у второго тайла…

Даю схему:

1 – вода мелкая. Горизонтальная прокрутка кадров

2 – вода глубокая для 1 и только для него. Горизонтальная прокрутка кадров.

3 – прочие анимированные автотайлы. Горизонтальная прокрутка кадров

4 – дополнения к воде, в данном случае трава и кувшинки. Без анимации.

5 – водопады. Вертикальная прокрутка кадров

Сложности понимания могу возникнуть только с областями 1 и 2. 1 – это особый, привилегированный тайл, у которого есть дополнительный тайл глубины в области 2. Больше такого нет ни у одной области. Впрочем, никто не обязывает использовать эту фичу и в 2 можно положить обычный анимированный автотайл и использовать его отдельно. Просто 2 – умеет использовать прозрачность, а остальные нет. 4 тоже умеет, но не умеет в анимацию.

А теперь про разметку анимации для наглядности:

А что там в MV? А ничего особенного, все тоже самое. Тайлы, листы и тайлсеты из МV подходят для MZ и наоборот.

Уф. Ура. Ох. Мы разобрали устройство тайлсетов, посмотрели, как они работают в базе данных, а так же как они устроены сами по себе, внутри файлов! Это была действительно сложная тема, но не расслабляем булки – впереди ивенты!))