RPG Maker MZ: урок №12. Работа с изображениями⁠⁠

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

Разумеется, для ценителей есть и видео версия:

Поле «Изображение» находится на второй странице списка команд ивента и содержит в себе пять этих самых команд:

«Показать изображение» - выводит на экран любую картинку в формате png (мукер работает только с такими) согласно координатам заданным в поле «Позиция». Координаты могут быть заданы как вручную, так и взяты из переменных. Координатная сетка задана в пикселях относительно выбранного размера окна игры, а не карты, где нулевой точкой будет верхний левый угол. Положительные значения оси Х расположены справа от нуля, а положительные Y – ниже нуля. Т.е., как и в случае с тайловой сеткой, мы имеем «перевернутую» ось Y.

Размер окна игры по умолчанию: 816x624 пикселей, что может быть изменено в Базе Данных, но мы позже до этого доберемся. В MV размер окна средствами движка не изменяется, но для этого существуют специальные плагины.

Сложна, нипанятна! Давайте на практике рассмотрим – будет понятнее.

У нас есть НПС и диалоги с ними. Допустим, мы желаем видеть не эти маленькие фейсы в окне сообщения, а полноценные изображения персонажей по пояс. Возьмем Любителя Опят, удалим его фейс из окна сообщения и перед командой вывода этого сообщения добавим команду «Показать изображение»:

Выбираем из списка «Изображение» нужную картинку, в данном случае это будет Actor1_7. Как мы видим, каждому изображению можно присвоить соответствующий номер, причем, чем больше число в номере, тем выше приоритет отображения картинки, т.е. картинка 2 будет показана поверх картинки 1, например.

Ниже мы можем задать точку «начала координат картинки». Не путать с точкой начала координат экрана! Она всегда в левом верхнем углу! Имеется ввиду точка, положение которой будет задаваться координатами. Т.е. при выборе «Верхний левый угол», координаты, заданные нами ниже, будут определять местоположение верхнего левого угла картинки. Ну, и вариант «центр» означает позицию геометрического центра картинки.

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

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

Как же нам понять, какие координаты следует вводить, чтобы наша картинка оказалась, например, по центру экрана?

Есть два способа – дефолтный и лайвфпсчхакерский.

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

Сперва выберем в поле «Позиция» вариант центр.

Мы знаем, что размер окна 816х624 пикселя. Делим ширину пополам и получаем 408 – это будет координата по Х.

С игреком сложнее. Если мы зададим координаты Y=624, то у нас нижняя половина чувака скроется за нижней границей экрана. Поэтому берем размеры картинки (330х350) и высоту делим на 2. Получаем 175 и из 624 отнимаем эти 175. Получаем Y=449

Итого Х = 408, а Y = 449. Вносим, сохраняем и проверяем.

Так себе, да? Диалоговое окно хоть и имеет прозрачность, но все равно портит вид. Выход – картинку надо поднять еще выше. Как понять насколько выше? Можно, конечно, заскринить и тупо измерить в том же ФШ, но я и так скажу – примерно 170 пикселей. Как я определил? Да по тайлам. Сетка тайловая 48 пикселей, окно закрывает три с половиной тайла. Это примерно 170 пикселей и будет. 449-170=279

Давайте проверим штоле:

Уже лучшее, но я бы еще поднял пикселей на 5-8. Впрочем, это уже детали, нас данный геморройный метод интересует исключительно с академической точки зрения. Хотя бы потому, что таким извращением с высчитыванием координат никто не занимается.

Метод второй - лайфпсчнхак

Создаем в ФШ пустой лист размером 816х624. Делаем скриншот окна игры с открытым диалогом, например сочетанием Win+Shift+S или простым PrintScreen. Помещаем скрин на этот лист (Ctrl+V), только аккуратно, чтобы границы окна совпали с границами листа:

Теперь находим нашу картинку – Папка Проекта -> img -> pictures. Открываем в ФШ и перетаскиваем на первый лист.

А теперь просто скрываем нижний слой со скрином (нажать на иконку глаза в списке слоев, список вызывается нажатием на F7) и сохраняем в Папка Проекта-> img -> pictures, можно даже прямо с заменой исходного Actor1_7, только соседнюю вкладку с этой картинкой в ФШ закройте, а то он ругаться будет.

В итоге мы получаем лист размером с экран игры и теперь не нужно запариваться с координатами. Ставим в поле «Позиция» вариант «Верхний левый угол», а Х и Y у нас будут равны 0. И смотрим на результат:

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

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

Ну, почти никогда.

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

Для этого нам потребуется команда «Переместить изображение».

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

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

Выбрали самый верхний инструмент (Перемещение) навели на линейку у левого рабочей области ФШ и потянули вправо с зажатой ЛКМ. Появившуюся направляющую тащим до края рисунка:

Кстати, если забыли, то линейки можно включить в настройках ФШ по сочетанию Ctrl+K.

Фотошоп нам подсказывает, что координата края рисунка по Х = 245 пикселей. А по Y нам не надо, там останется без изменений, так как мы планируем смещение по горизонтали.

Таким образом, мы понимаем, что конечная точка смещения будет находиться по Х= -245 (отрицательное, так как смещаем влево, относительно начала координат) и Y=0

Поле «Изменение скорости» предлагает нам на выбор 4 варианта перемещения – с ними тоже все просто и ясно по названиям.

Поле «Продолжительность» задает время в кадрах, за которое должны произойти изменения. Я задам 30 кадров, так как полсекунды – вполне приемлемо, а вот секунда уже долго для диалога.

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

Теперь добавим ответ от лица героя.

Создаем сообщение, потом с помощью фотошопа делаем то же самое, что делали для изображения НПС, только с картинкой героя

Тут можно сразу прикинуть координаты смещения. На этот раз после сообщения мы будем смещать его вправо и тут чуточку сложнее. Вычисляем с помощью направляющей координаты крайней правой точки рисунка – 556 будет, вычитаем это значение из ширины экрана 816-556=260. Смещаем вправо, поэтому Х=260.

Сохраняем все это дело и создаем необходимые команды в мукере. Должно получится следующее:

Будьте внимательны с номерами изображений! 1 – это у нас картинка с НПС, а 2 будет с героем. Номера действительны до тех пор, пока изображения не удалены с экрана. Если под одним и тем же номером попытаться отобразить две картинки, то последующая удалит предыдущую.

Проверяем, что получилось!

Ну, так-то неплохо, но чего-то не хватает, верно? Не совсем понятно, кто из чуваков говорит. А уж если их диалог продолжится, то будет совсем плохо:

Что делать? На помощь придет команда «Оттенок изображения»

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

Чтобы вернуть изображение в исходное состояние, достаточно будет просто применить шаблон «Стандарт» в команде.

Не забудьте, что эта команда так же, работает с номерами изображений, как и предыдущие.

Вот такой код получился:

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

Смотрим на примере:

Ну, что? Более-менее понятно? Даже более-менее работает. Осталось лишь удалить картинки с экрана, так как они остаются висеть до тех пор, пока не получат команду на удаление. Команда максимально простая и требует лишь ввод номера картинки, с ней вы разберетесь сами.

Также самим вам я предлагаю разобраться с полями «Масштаб» и «Смешивание» в окошках показа изображения и его перемещения. Со смешиванием мы уже сталкивались, вы помните, что непрозрачность в мукере задается по шкале от 0 до 255, где 0 – невидимость, а 255 – отсутствие прозрачности. Режимы смешивания – это режимы вывода изображения на экран с учетом того, что было нарисовано на нем до этого. Их проще попробовать, чем заочно понять.

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

Кроме того, не буду я пристально рассматривать команду «Поворот изображения», потому как нечего там рассматривать. Две настройки – выбор номера картинки и скорость вращения относительно выбранной точки начала координат (верх-лево или центр). Если честно, то не припомню разумного и оправданного использования этой фичи.

Ах, да, чуть не забыл про то маленькое ДЗ, которое я дал на прошлом уроке!)

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

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

Хотел задать вам на этот урок HUD на картинках, чтобы количество собранных грибов отображалось на экране, но… боюсь, это будет слишком сложно. Сделаем попозже!

Сайгакора!