6.1 Графический движок cover41

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

Как обычно используется

- Динамические обложки (пользователи с конца списка, кто крайний присоединился к группе, или ТОП-ы рейтинга)

- Периодические отчёты о состоянии счёта пользователя с его аватаркой

- Настольные игры (аватар пользователя отрисовывается в разных частях игрового поля в зависимости от значения ресурса)

- РПГ-образные игры, персонажи или элементы экипировки рисуются на основном фоне, в зависимости от наличия ресурса

- Именные сертификаты (в фирменный бланк подставляется имя и аватарка пользователя)

- Графический прогресс-бар (картинка движется линейно по полю в зависимости от количества ресурса)

С чего начать

Начать стоит с создания хранилища из готового шаблона "cover41", он создаст первичную структуру, в которой вы начнёте редактировать поля. Запомните ID созданного хранилища, оно пригодится. Затем, когда картинка будет готова, достаточно будет вставить её в сообщение в виде ссылки {http://activeusers.ru/viz/ID.viz} , где ID - номер этого хранилища.

Описание полей

Фон - ссылка на основное изображение, на которое будут накладываться картинки

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

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

Объекты - вот тут начинаются спрайты, текстовые или графические элементы, которые будут накладываться на фон.

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

Картинка - ссылка на картинку или переменная, которая эту ссылку сформирует, например на аватар (см. примеры ниже)

z-index - может принимать положительные или отрицательные значения, при отрицательных спрайт будет накладываться ПОД фоном. Это может быть удобно, например, если фон имеет прозрачную область и за ним надо что-то показать. Например, аватар пользователя в необычном обрамлении, с рваными краями.

Ширина, Высота - параметры картинки, в которых она будет наложена на основной фон. Лучше всего использовать оригинальные, или максимально близкие к ним. Но если всё таки необходимо менять ширину и высоту - предпочтительнее уменьшать, чем увеличивать, чтобы не ухудшать качество картинки. Например, должна быть аватарка размером 150 пикселей. Мы берём максимально близкий следующий размер 200x200 и уменьшаем до 150.

Куда X, Куда Y - координаты верхнего левого угла спрайта на основном изображении, в пикселях. Удобнее всего устанавливать их в режиме разметки (кнопка справа вверху), но можно скорректировать до точных значения отсюда.

Текст - если у спрайта задан текст, то ссылка на картинку будет игнорироваться, и он будет показан как текстовый.

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

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

Режим разметки

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

Переменные

В поля формы для ссылок на картинки и текстов можно подставлять обычные ссылки и тексты или переменные.

Переменные заключаются в фигурные скобки {}, рассмотрим несколько примеров:

{user.4803497.first_name} - это имя пользователя id4803497. Вы также можете использовать вместо first_name следующие поля:
city.title - город
country.title - страна,
last_name - фамилия,
photo_50 - аватарка квадратнаx 50x50px,
photo_100 - аватарка 100х100px,
sex - 1 женский, 2 мужской,
bdate - дата рождения,
online - онлайн прямо сейчас, site - сайт,
relation - семейное положение,
screen_name - адрес странички,
contacts - контактные данные,
is_closed - 1 если страничка закрыта

{rate.55.sum} - сумма всех баллов в рейтинге #55

{rate.55.items.1.count} - количество очков у пользователя ТОП-1 в рейтинге #55

{rate.55.items.1.uid} - ID пользователя ТОП-1 в рейтинге #55. Переменные, возвращающие UID можно вкладывать в другие переменные:

{user.{rate.55.items.1.uid}.first_name} - имя пользователя ТОП-1 в рейтинге #55

{user.{rate.55.items.1.uid}|full_name} - имя и фамилия одной строкой этого пользователя. Обратите внимание на вертикальную черту перед full_name - это модификатор, склеивающий имя с фамилией через пробел, о них пойдёт речь ниже.

{rate.55.users.4803497.place} - место в рейтинге #55 пользователя id4803497

{rate.55.users.4803497.rank} - звание пользователя в рейтинге

{rate.55.users.4803497.count} - количество баллов рейтинге #55 у пользователя id4803497

{list.10.count} - количество пользователей в списке #10

{list.10.items.2.uid} - UID второго пользователя в списке

{list.10.items.2.time} - время добавления второго пользователя в списке

{list.10.items.-1.uid} - первый с конца пользователь в списке (последний добавившийся)

{res.14.title} - название ресурса #14

{res.14.icon} - относительный путь к изображению ресурса

{res.14.users.4803497.count} - количество ресурса #14 у пользователя id4803497

{res.18.users.4803497.val} - текстовое значение ресурса #18 у пользователя id4803497. count приводит значения ресурса к числу, а val выдаёт их в чистом виде.

{user.{uid}|full_name} - полное имя текущего юзера (обратите внимание на значок вертикальной черты)

{user.{uid}|name_case:acc} - имя текущего юзера в винительном падеже. Возможные значения: именительный – nom, родительный – gen, дательный – dat, винительный – acc, творительный – ins, предложный – abl. По умолчанию nom.

{user.{uid}.photo_100} - фото текущего юзера 100x100

{user.{res.14.users.{uid}.count}.photo_100} - фото пользователя 100x100, ID которого является значением ресурса #14 у текущего пользователя

{user.{uid}.photo_100}|circle - сделать аватарку круглой

{user.{uid}.photo_100}|circle:5 - скруглить края аватарки на 5 пикселей

{res.14.users.{uid}.count} == 10 - (для условий) количество ресурса #14 для текущего пользователя равно 10

{res.14.users.{uid}.count} + 20|calc - (для координат X и Y), прибавить 20 к количеству ресурса #14 у текущего юзера. calc - модификатор, который посчитает строку 10 + 20 как выражение равное 30.

{storage.52.data.image_base} - текстовое значение поля image_base из хранилища #52

{storage.52.data.log|list} - вывести в столбик текстовые строчки из массива log в хранилище #52

{storage.52.data.log|reverse|slice:1:16|list} - перевернуть массив лог, выбрать из него первые 16 позиций (на самом деле они последние, массив же перевёрнут) и разместить в столбик.

({res.14.users.{uid}.count} > 10) && ({res.14.users.{uid}.count} < 20) - (для условий), покажет спрайт, если количество ресурса #14 у текущего пользователя больше 10 и меньше 20

{storage.52.data.1.text} - первая текстовая строка из хранилища #52 с массивом строк

{storage.52.data.{|rand:1:3}.text} - случайный выбор одной из первых 4-х строк (отсчёт начинается с единицы) из из хранилища #52 с массивом строк

Модификаторы

В примерах выше - вы можете заметить, что некоторые конструкции используют вертикальную черту. Она означает применение модификатора к тому, что находится перед ним. Например

{user.{uid}.first_name|str_upper} - имя текущего пользователя будет преобразовано в ВЕРХНИЙ регистр.

Или даже несколько модификаторов сразу
{user.{uid}|name_case:acc|str_upper} - имя текущего пользователя в винительном падеже и в верхнем регистре. "acc" здесь - параметр модификатора, пишется пишется через двоеточие с именем модификатора. Обратите внимание, он работает не со строкой first_name, а со всем массивом данных пользователя {user.{uid}}

Вы можете использовать следующие модификаторы:

rand:a:b - случайное число от a до b

date:a - преобразование даты в формате timestamp в понятный формат, вид будет зависеть от a: 0 - 2020-01-01 12:00:01, 1 - 01.01.20 (только дата), 2 - 12:00 (только время). Нужны ещё форматы - дайте знать.

str_lower - в нижний регистр

str_upper - в верхний регистр

str_pad:len:str - дополнить строку слева до заданной длины, например, чтобы красиво показать в столбик. len - длина, str - чем дополнить.

full_name - полное имя пользователя. Модификатор применяется к массиву данных пользователя, из-за чего его иногда путают с ".first_name".

name_case:acc - имя текущего юзера в винительном падеже. Возможные значения: именительный – nom, родительный – gen, дательный – dat, винительный – acc, творительный – ins, предложный – abl. По умолчанию nom.

calc - посчитать выражение. Например прибавить 100 к значению ресурса можно вот так: {res.14.users.{uid}.count} + 100|calc Это может быть полезно, если вы хотите задать координату положения спрайта на картинке в зависимости от значения ресурса (чем больше очков - тем дальше уехала машинка и т.д.)

int - преобразование в целое число.

last - последний элемент массива. Применяется, разумеется, к массиву.

list - элементы одномерного массива в список, разделённый переносами строк

arrval:name - превратить двухмерный массив в одномерный (например для list), взяв в качестве значения поле с именем name.

number_format - расставить разделители разрядов в числе, 2000000 станет 2 000 000

Энергия

Движок потребляет 10 единиц энергии на одну сформированную картинку + по 3 на каждый показанный спрайт.