ТЕМА: [RMMV] Пишем плагин для отображения портретов

Всем привет!

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

Изыскивать мы сегодня будем как с помощью нескольких изменений, вывести на экран большие аватарки. На подобии «Message busts» от Galv. Стой лишь разницей, что у него скрипт написан для VX Ace, ну а мы соответственно будем изыскивать для RPG Maker MV.



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



Затем, находим место где выводится на экран аватарка. Изменяем скрипт на то что нам нужно, а именно выбрать картинку из папки img\bigfaces\ загрузить её вместо стандартной и вуаля, всё готово. На практике оказалось не всё так просто. Дело в том, что размеры окна (в данном случае с текстом сообщения) жестко задают границы и если попробовать загрузить другую (большую) картинку, то всё что попадает за пределы окна попросту обрезается.

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

Мдяя,… как говорится, а праздник был близко. Ну что ж, мы не отчаиваемся и самое время перестать маяться дурью и наконец посмотреть, а как же эту проблему решает Galv в своём скрипте? Всё оказалось просто. Скрипт который выводит обычную аватарку убирается, а вместо него с помощью Sprite спокойно отображается картинка поверх всех окошек. Алллилуйя! Вот оно!

Итак идея ясна, осталось только всё сделать.

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




Начало нашего скрипта:
Прочитаем в переменную avatarWidth ширину нашей большой картинки, или точнее сколько нам отступать.

Далее подготовим несколько переменных. spr это собственно наш спрайт с которым мы будем работать дальше. bitmap — сюда мы будем загружать нашу большую картинку и затем копировать в спрайт. А sprPosX это положение нашего спрайта на экране. Забегая немного вперёд скажу, что мне захотелось не просто вывести картинку на экран — БАМЦ! а что бы она плавно выезжала из-за края экрана. Но обо всём по порядку.

Здесь мы указываем наш отступ для текста, если аватар не указан, то отступ равен 0. В противном случает отступ для текста устанавливается из нашей переменной avatarWidth.

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

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

Если имя не задано, то просто ничего не делаем.

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

Далее мы загружаем картинку. 'img/bigfaces/' — место где лежат наши большие аватарки. faceName это название файла с 8ю маленькими аватарками, который мы использовали при составлении текста. Но в данном случае это будет ещё одна папка, где будут лежать наши 8 больших картинок с номерами от 1 до 8. faceIndex+1 это собственно уже название нашей картинки которую мы хотим загрузить. +1 потому что счёт у них не с 1, а 0. и ".png" не нужно добавлять, так как система сама это сделает за нас.



Как видно из рисунка, «Тест» название нашего проекта «img\bigfaces» это где хранятся наши картинки «Package1» одноимённое название файла с аватарами и дальше собственно от 1 до 8 картинки.

Об этом чуть ниже.

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

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

Затем копируем загруженную картинку bitmap в спрайт spr. Первые два числа (0,0) это координаты в нашей картинке, например если мы хотим скопировать не всю, а только часть. Далее два числа (bitmap.width, bitmap.height) это собственно размер нашей копируемой картинки. Ну и последние два нуля это место куда мы хотим вставить нашу картинку в спрайт.

Здесь мы указываем начальную координату X для нашего спрайта. Как уже сказано выше, у меня есть задумка сделать так, что бы спрайт появлялся не сразу на экране, а выезжал из-за границы экрана. Поэтому тут отрицательное число равное ширине нашей загруженной картинки.

Здесь задаётся вертикальное положение на экране, координата Y. Координата 0, как может показаться это не верхний левый угол экрана, а координата относительно нашего окна с текстом. Поэтому для того, что бы «выскочить» за его границы нам так же нужно задать отрицательное число. Для этого берём высоту нашей картинки, уменьшаем её на высоту обычной аватарки и зададим координату Y.

Ну и теперь главный момент. Собственно надо «прикрепить» наш спрайт к окну с сообщением. Возможно есть способ лучше, и EvilCat меня поправит, но ничено лучше мне не пришло в голову. По идеи здесь должно быть написано было this.addChildToBack, но поскольку this у нас внутри нашей функции уже указывает на bitmap, то мы получим ошибку. Поэтому тут как бы такая вот странная конструкция, мы сохраняем в face наш стрый this на окошко, а затем просим систему добавить к нему спрайт.

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

Закрываем нашу проверку пустого имени и собственно всей функции.

Этот кусочек не менее важен чем другие и отнял у меня тоже достаточно много времени. Дело в том, что когда мы загружаем картинки постепенно по мере открытия новых диалогов, всё красиво и прекрасно. Но если обратится к НПЦ ещё раз, на доли секунды на экране появляется старая (последняя) картинка, прежде чем успевает загрузится новая. Это не очень красиво, и логично было бы удалять наш спрайт с экрана, после закрытия окна с текстом.

Думаю комментарии тут излишни. Так же как и в первом уроке мы «дублируем» основную функцию системы Window_Base.prototype.close и добавляем после всех основных команд системы, команду удалить наш спрайт с экрана this.removeChild(spr).

Ну и осталась ещё одна функция, которая будет двигать наш спрайт из-за экрана до тех пор пока координата X не будет равна 0.

Так же как и с предыдущей функцией, мы делаем «дубликат» системной функции Window_Base.prototype.update. После того как отработает система, мы проверяем координату X нашего спрайта, и если она меньше 0, то увеличиваем её на 5 точек. Никаких дополнительных действий для загрузки изображения не требуется, достаточно обновить координату спрайта spr.x и оно сместиться на новое место автоматически.

На этом всё, закрываем основную функцию нашего плагина и отправляемся тестировать .



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



то при выборе, например экипировки:



уже выглядит не столь оптимистично.

Понятно, что все эти нюансы ещё стоит учесть. Но минимальную задачу мы на сегодня выполнили. Разобрались как устроен вывод аватарок. Как загрузить свою картинку в спрайт и вывести на экран. И собственно как сделать минимальную анимацию (выезд картинки из-за края экрана).

На этом всё. Всем спасибо за внимание и до новых встреч. В следующий раз думаю мы ещё что-нибудь интересное расковыряем Удачи!

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

Автоматизация же и упращение

vinurd пишет:
И будет выглядеть это как-то так:

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

и в дополнение ещё текст который будет залазить на аватарки

У меня тоже в своё время манипуляции с bind попили много крови... Это связано с интересной и вообще-то очень удобной особенностью Яваскрипта, которая просто оказывается неожиданной для новичков (я начала изучать Яваскрипт прошлым летом). Когда происходит вызов метода, скажем, a.b(arg1, arg2), то будет ли в этом методе this (контекстный объект) и каким он будет? Вы скажете - это будет объект a, которому принадлежит метод. И будете правы наполовину. Это действительно будет объект a, но потому, что он стоит слева от точки.

Если мы сделаем так:

То this в методе будет пустым! Потому что он вызывается не через точку, и слева от точки, следовательно, ничего нет. А если мы сделаем так:

В этот раз в this будет объект callbacks, хотя метод как будто бы отобрали у объекта a и он скорее всего предназначен работать с его данными и товарищами по объекту.

Этот эффект называется "потеря this" или "потеря контекста". Казалось бы, нафиг такое в языке? Особенно в языке, одно из основных действий которого - это передача функции как аргумента, например, когда инициируешь загрузку файла и подписываешь вызов метода на момент, когда загрузка будет завершена. Методы и функции, передаваемые таким образом, называются callback'ами.

Эта фишка была рассчитана на то, что в Яваскрипте можно конструировать любой объект на лету, не прибегая к классам и даже прототипам. Соответственно, ты можешь любому объекту приделать одну и ту же функцию: obj1.some_method=obj2.some_method=function() { alert('Я '+this.constructor.name); } - и получить вразумительный ответ "Я Object", "Я Sprite" и так далее, опрашивая их с помощью obj1.some_method(), obj2.some_method(). В плагинах вы увидите задание метода через присваивание фукнции повсюду. Однако в Руби и ряде других языков для это реализуется через специальные подходы: в Руби, в PHP... а то и вовсе не реализовано.

Итак, в Яваскрипте все функции не привязаны к объектам и содержание this определяется при вызове... Но что тогда делать с потерей контекста? Раньше прибегали к хитростям, которые теперь интересны только любителям истории, но как-то раз авторы библиотеки Prototype.js (раньше вообще было много библиотек, добавляющих в Яваскрипт недостающие возможности, отсюда его дурная слава как неполноценного языка) изобрели метод bind. Теперь метод bind есть в стандарте Яваскрипта.

Метод bind есть у любой функции. Он создаёт вызов, у которого уже прописано this и, если надо, аргументы!

Например:

В результате будет вызван искомый метод, и в this у него будет объект obj, а в аргументах - 'meow' и 'woof' (именно в таком порядке). В качестве callback'а почти всегда передаётся результат bind(this), если только функция не предельно простая.

Подробнее о bind.

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

Спасибо огромное за разъяснение. Хотя конечно что было понять придётся перечитать твой ответ и ещё не раз.

В двух словах: когда передаёте метод, имеющий this в теле своего кода (а не вызываете его через точку у родного объекта), то добавляйте в конце .bind(obj), где obj - объект-"владелец", иначе this внутри метода будет непредсказуемым.

EvilCat пишет:
Если я правильно тебя понимаю, можно написать было:

Тогда получается внутри у нас this будет указывать на bitmap, а в face будет то что было в this до вызова? Или так нельзя?

ух ты, круто! Но перенесла тему в раздел Академии и переименовала более информативно, а то будет потом сложно найти, если в заголовке не отражена суть плагина, а только его номер

AnnTenna пишет:
Хорошо, буду более информативно называть темы Кстати не пойму немного где создавать такие темы на будущее?

Спасибо! Здорово, что еще будут подобные уроки. Кстати, можно номеровать, как Урок1 урок2 , чтоб оставить эту нумерацию.


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

AnnTenna пишет:
Ну уроки это ты уж слишком круто взяла это так скорее просто шаги.

AnnTenna пишет:
Хорошо, буду знать.

Mur пишет:
Абсолютно верно.

EvilCat пишет:
Суууууупер!

Небольшое обновление. Мой ляп.

Для того, что бы большие аватарки показывались только в сообщениях, собственно и нужно «трогать» только функцию сообщений, а не вообще всех аватарок.

Поэтому вместо кусочка:

Перед «if (faceName != '') {» надо написать:

Вот теперь будут заменяться аватарки только в сообщениях.

Исправленная версия ниже:

Доброго времени суток! Нашла Ваш скрип недавно!
Вопрос такой - как сделать аватарку за текстовым сообщением (оно не на весь экран)?
И как задать ей положение на экране (допустим по х и по у я хочу сделать отступы 5 пикселей)

Спасибо за скрипт и урок!

Ну это можно и прямо в диалогах сделать , с помощью изображений . Но ... ГДЕ ты достала такие классные изображения то ?!

BlackLevel пишет:
это ДЛС Cover Art Characters которое шло по пред заказу MV, теперь его можно купить store.steampowered.com/app/403870/RPG_Ma...Art_Characters_Pack/
ну или же найти тут где ни будь в разделе графика, возможно в общем облаке графики на майле

ReyKa пишет:
Ну оно как бы и так за «текстовым сообщением», или имеется в виду за оформлением окна?

ReyKa пишет:
Для этого нужно немного доработать скрипт. По хорошему конечно бы эти параметры нужно вынести в секцию настроек, но в качестве урока пока можно оставить и так.

Создадим две переменные pX и pY, сразу после:

Значение pX будет указывать, что мы хотим выводить аватарку со смещением по оси X (и в данном случае это будет на 155 точек левее), а значение pY соответственно будет указывать смещение по оси Y и будет равняться 50.

Теперь нужно поменять пару строк в блоке Window_Message.prototype.drawMessageFace:

Заменим:на
А в фунции Window_Base.prototype.update, заменим условие проверки:на
А так же, чуть ниже, окончательно положение аватарки:на
Вот собственно и всё. Получается вот такая вот картинка:




Ну и в архиве готовый (доработанный) вариант.

ReyKa пишет:
Всегда пожалуйста.