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

Версия от 17:28, 7 октября 2018; Popstop (обсуждение | вклад) (Новая страница: «Пример спрайтового изображения CSS позволяет применять в себе атла…»)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Версия от 17:28, 7 октября 2018; Popstop (обсуждение | вклад) (Новая страница: «Пример спрайтового изображения CSS позволяет применять в себе атла…»)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Пример спрайтового изображения

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

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

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

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

  • 512x512 (32х32) — для любых Grid изображений.
  • 256x256 (16х16) — для плоских изображений, обычно используются в шаблонах навигации.

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

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

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

Шаг 1

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

Шаг 2

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

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

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

Шаг 3

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

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

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

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

Шаг 1

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

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

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

Шаг 2

Теперь остаётся только задать позиции. Ниже в таблице есть содержимое для копирования.

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

См. также