Справка:Создание спрайтов

Пример спрайтового изображения

CSS позволяет применять в себе атласы спрайтов. Несколько изображений располагаются в одном графическом файле. Далее, чтобы разложить его на несколько изображений, применяется ограничение размеров изображения по размеру одного спрайта в атласе, и сдвиг background-position атласа на значение, кратное высоте изображения. Таким образом, один файл может обеспечить иконками весь сайт. CSS-спрайты экономят трафик и ускоряют загрузку — браузеру потребуется запрашивать меньше файлов.
Википедия

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

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

Размер изображения

Создание спрайта

Процесс создания спрайта разделен на два этапа, первый это создание самого спрайтового изображения, второй загрузка спрайтового изображения на Minecraft Wiki и обозначение позиций объектов.

Создание изображения

Шаг 1

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

Шаг 2

Пример ячеек с розовым фоном

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

В случае если у элементов остались дыры они станут заметны, если всё в порядке то можно приступать к вырезанию. Обратите внимание на то что вырезать нужно изображение с розовым фоном размером ровно 32х32, прозрачный фон не допустим так как предмет или блок имеет свое позиционирование в слоте, а с прозрачным объектом вам не удастся правильно выставить Grid изображение в спрайте.

Шаг 3

Пример результата с вырезанными элементами спрайта

Пример результата без фона у элементов и с отключенной сеткой

Теперь можно приступить непосредственно к вырезанию Grid изображений. Создайте новый документ нужного размера залейте его фоном серого цвета в шахматном порядке пример фона. Не забудьте поставить на первую позицию изображение по умолчанию. Его вариант в формате PNG размером 32х32.

После вырезки и размещения всех элементов следует объединить слои с элементами в один и удалить розовый фон. Также необходимо отключить отображение слоя с серым фоном в шахматном порядке. Экспортируйте изображение в формате PNG. При загрузке файла на Minecraft Wiki файл следует именовать следующим образом Название файлаCSS.png Также необходимо добавить файл в категорию спрайтовые изображения. Пример созданного файла.

Настройка спрайта

Шаг 1

В качестве примера можно руководствоваться другими спрайтами. Параметры всех спрайтов можно найти в навигационном шаблоне {{Спрайт/Навигация}}. Также необходимо будет добавить ваш спрайт к списку этого навигационного шаблона который вызывается на страницах документации каждой страницы которая так или иначе относится напрямую к работе вашего спрайта, например это модуль с идентификаторами, списком параметров и шаблон спрайта.

Ниже в таблице приведён список страниц и их назначение. В качестве примера указанны ссылки на спрайт с Grid изображениями для модификации Iron Chests.

Название Описание Имя страницы
Параметры Содержит такие параметры как размер изображения, размер одного элемента, изображение спрайта и др. Модуль:ИнвСпрайт/Iron Chests
Список идентификаторов Содержит список позиций и названий. Список идентификаторов
Шаблон спрайта Для Grid изображений не имеет функционала, так как спрайт вызывается через шаблон {{Слот}}. На странице документации шаблона спрайта находится список всех доступных объектов. Шаблон:ИнвСпрайт/Iron Chests

Шаг 2

Теперь остаётся только задать позиции. Ниже в таблице есть содержимое для копирования.
Название Содержимое
Параметры
return { ["имя"] = "Iron Chests", ["IDы"] = "ИнвСпрайт/Iron Chests/ID", ["изобр"] = "IronChestsCSS.png", ["формат"] = 512, ["разм"] = 32, ["таблстилей"] = false }
Список идентификаторов
return { ["разделы"] = { {"Некатегоризованные", ["ID"] = 1}, }, ["IDы"] = { [""] = {["поз"] = 2, ["раздел"] = 1}, } }
Шаблон
<includeonly>{{#invoke: Спрайт | sprite | настройки = ИнвСпрайт/Iron Chests}}</includeonly><noinclude>{{Документация}}</noinclude>

См. также

В данной статье используются материалы из статьи «Справка:Создание спрайтов» с вики-сайта Minecraft Wiki, расположенного на Фэндоме, и они распространяются согласно лицензии Creative Commons Attribution-NonCommercial-ShareAlike 3.0. Авторы статьи.