Руководство по aseprite

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

Но если бы вы могли упростить процесс создания, не так ли? В этом суть спора, когда художники спорят о том, какая творческая программа лучше. Пиксельные художники, мы здесь, чтобы объяснить, почему Aseprite лучше всех и почему вам не нужно рассматривать другие альтернативы.

Что такое Асепрайт?

Aseprite – это анимированный редактор спрайтов и инструмент для пиксельной графики для Windows, Mac и Linux, который был разработан Igara Studio, а именно Дэвидом Капелло, Гаспаром Капелло и Мартином Капелло (согласно файлу «прочтите меня» на GitHub Aseprite).

С Aseprite у вас есть доступ к библиотеке инструментов для рисования и манипулирования пикселями, предназначенных для помощи в создании 2D-спрайтов и анимации для искусства, видеоигр и многого другого. Вы можете скачать Aseprite прямо с официального сайта после покупки или выбрать его в Steam .

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

Официальная учетная запись Aseprite в Twitter ( @aseprite ) также имеет цепочку советов и руководств, сделанных ее пользователями, прикрепленных к верхней части его профиля.

Скачать: Aseprite (19,99 долларов США, доступна бесплатная пробная версия )

Зачем вам нужен специальный редактор Pixel Art

Вы можете подумать: «Ну, я могу создавать пиксельную графику в таких программах, как Photoshop, GIMP и Krita! Зачем мне использовать другой редактор, если у меня уже есть тот, который может выполнить эту работу?»

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

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

В специальном редакторе пиксельной графики будет все необходимое, а также некоторые функции, которые особенно полезны для художников-пиксельных художников. У Aseprite, например, есть такие средства для экономии времени:

• Режимы симметрии, как вертикальные, так и горизонтальные
• Режим мозаики (для узорчатых или повторяющихся изображений)
• Заполнение несмежного ведра
• Импорт / экспорт листов плитки и цветовой палитры
• Снятие шкуры с лука и предварительный просмотр анимации в реальном времени

Мы думаем, что именно эти вещи, в дополнение к чистому и легкому для понимания интерфейсу Aseprite , позволяют программе опередить своих современников, таких как Pyxel Edit и GraphicsGale .

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

Карандаш (B)

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

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

Ластик (клавиша E)

Ластик делает именно то, что вы ожидаете: стирает уже размещенные вами пиксели. То есть если щелкнуть левой кнопкой мыши. Щелчок правой кнопкой мыши вместо этого заменит цвет переднего плана на холсте на цвет фона, который вы выбрали.

Как и карандаш Aseprite, ластик можно масштабировать до 64 пикселей, круглого или квадратного.

Пипетка (I)

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

Ведро с краской (G)

Ведро с краской заполняет пустую область одним сплошным цветом. Обычно эта область определяется замкнутыми формами. Aseprite дает вам возможность отключить эту «непрерывную» заливку.

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

Выберите Инструменты

У большинства программ есть несколько различных инструментов выбора, и Aseprite не исключение. Вот пять инструментов выбора:

• Прямоугольная область (M): выделяет пиксели в прямоугольной области.
• Эллиптическая область (Shift + M): выделяет пиксели в области в форме эллипса.
• Лассо (Q): выделяет пиксели в области, которую вы рисуете от руки.
• Многоугольное лассо (Shift + Q): выделяет пиксели в области в форме многоугольника.
• Magic Wand (W): выбирает пиксели одного цвета в области

Aseprite: все, что вам нужно, в небольшой упаковке

Aseprite – это любовное письмо к ретро-графике и эпохе 8-бит / 16-бит, и, безусловно, лучший редактор пиксельной графики, доступный прямо сейчас. Мы даже не коснулись покадровой анимации, пользовательских скриптов или цветовых палитр.

Программа может предложить так много всего. Независимо от того, являетесь ли вы новым художником по пикселям или уже создали миллион спрайтов, мы настоятельно рекомендуем вам попробовать Aseprite на себе.

Помните, что это руководство является скорее рекомендацией, чем чем-либо еще, так что не говорите мне, как я заставляю вас что-то делать. Спасибо!

Настройка и прочее

Ну это очень просто, но сначала ; я бы пошел в Файл > Сохранить как >*имя файла*.ase, Асепрайт вылетает редко, но все равно перестраховывайся, никогда не узнаешь. 😉

Когда вы закончите, перейдите к Файл> Сохранить(или «Сохранить как», если вы проигнорировали первый процесс)>*имя файла*. Gif, Почему я не могу просто сохранить его как другой файл? Для того, чтобы: GIF (анимированное изображение) — единственный способ сохранить его как указанную анимацию.

Совет первый:Не делайте все сразу.

(ВАЖНАЯ ИНФОРМАЦИЯ : убедитесь, что у вас есть луковая шелуха, прежде чем вы начнете анимировать, это упрощает анимацию, и если вы не знаете, как это сделать, перейдите к Хэтти руководство, чтобы увидеть, как включить его)

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

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

Во-вторых, не думайте, что когда вы впервые взглянете на свою анимацию (анимации), она будет идеальной, все не идеально в первый раз, когда она существует. В основном это должно выглядеть так:

(примечание: не обязательно смотреть точно, нравится то, что показано; твой скилл, твоя анимация)

В-третьих, будьте в порядке с тем, что вы получаете, радуйтесь тому, что вы ввязываетесь в такие вещи, в которые большинство людей обычно не вникают. Быть гордым!

Если бы вы просто сделали тест, это было бы здорово!

Совет второй:Редактирование скорости вашей анимации.

Это несколько важно, поскольку это небольшой совет, так что это спорно.

Вот где быстрое движение и обычное движение приходят на место, внимательно посмотрите на анимации, которые я делаю в этом руководстве, они имеют нормальную скорость, нет, но она идет со средней скоростью ‘100’, это то, что он включает скорость всех анимаций. Если это недостаточно быстро для ваших стандартов или вашей анимации, я бы порекомендовал сделать это.

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

1) Выберите кадры. Для этого просто перетащите курсор на кадры, и он будет выглядеть примерно так:

Когда это будет сделано, щелкните его правой кнопкой мыши, затем нажмите «Свойства».

2) Настройка — там будет что-то под названием «Длительность (миллисекунды)», а настройки — «100» (средняя скорость), если изменить, чтобы идти быстрее, установите его на любое число меньше 100. И чтобы он работал медленнее, установите его на любое число больше 100.

(Примечание: я знаю, когда щелкаю правой кнопкой мыши «
” вы получаете набор скоростей, но это только для настройки того, насколько быстро это должно быть, если вы хотите сделать его общедоступным, вместо этого следуйте этому)

3) Идеальные кадры — это та часть, о которой я говорил, для этих идеальных кадров. В основном это бесполезно, потому что большинство кадров должны оставаться с одинаковой скоростью, но я продолжу. Это как ‘1)’ но перетаскивая его по кадрам, вы хотите замедлить / ускорить. Не большая разница, если честно.

Это в основном все для этого совета, а также приветствие http://steamcommunity.com/id/sonicbomb77 за помощь в решении этой проблемы. Спасибо, ◢ Крис ◤!

Часть первая :Начните с простого

Часть первая: Начни с простого» title=»Aseprite — Руководство по созданию анимации в игре в 2021 году — Часть первая : Начните с простого» alt=»Aseprite — создание анимации в руководстве по игре в 2021 году″ title=»Aseprite — создание анимации в руководстве по игре в 2021 году» />
Первый шаг ; Нарисуйте тело (Кроме того, оно не должно быть таким):

Шаг второй ; Начните анимировать ноги; просто нарисуйте линии, они не должны быть идеальными (извините за неровности):

Шаг третий; Начните анимировать руки; это важный процесс его создания (Примечание: убедитесь, что он течет вместе с ноги, нормальное телодвижение, если это можно так назвать) :

Шаг четвертый; Чтобы убедиться, что он действительно выглядит так, как будто он ходит. Итак, добавьте немного прыжка к нему (Примечание: не делайте это в обычное время, убедитесь, что это происходит, когда второй он вылетает на прогулку, а также, это не очень важно, но вы можете добавить приземление (обычно на следующем кадре из это), переместив его голову на 1 пиксель вниз [0х, 1г] ) :

Часть вторая :Expressions

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

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

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

Я думаю, что это может быть лучшим примером того, что я действительно говорю:

Часть третья :Для пожарных

НЕТ, БИЛЛИ, ОТОЙДИ ОТ ЕЛКИ… ой, подожди, это огонь, который ты оживляешь, так или иначе, давай сделаем это.

(Примечание: я бы порекомендовал, если вы сначала нарисуете основу, это сделает Шаг второй намного проще, а основа — фиолетовая часть)

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

(Примечание: конечно, это не должно быть похоже на мой огонь)

Шаг второй ; Убедитесь, что он движется ненормально (начнем с 7 кадры)

(Примечание: опять же, не обязательно должно быть похоже на мое)

Шаг третий; Это выглядит слишком по-детски, чтобы быть огнем, давайте добавим к нему небольшой переход. Как? Это просто, когда большое пламя идет вниз, давайте оторвем его от кончика.

Если вы все еще в замешательстве, позвольте мне помочь с этим!

Шаг четвертый; Если вы добавите еще несколько переходов, вы в основном закончите с этим.

Часть четвертая:Мигание (лицевая анимация 1 / 2)

Это больше объясняется само по себе, поэтому я не буду подробно объяснять это.

Итак, с этим бесполезным вступлением к этому обновлению руководства, давайте перейдем к анимации.

Линия глаз

Это больше похоже на это изображение:

Как вы это делаете, легко! Сначала нам нужно начать с идеальных 3 x 1 пикселей. линия (вертикальный ; | ) (Примечание: когда я говорю «3 х 1» или число, близко объясненное к этому, это означает ‘высота х ширина’, теперь, когда мы получили это Прямо *БУД-ДУМ АВАРИЙ*), после того, как мы это сделали, сделайте его размером 1 x 2 пикселя. линия (горизонтальный ; — ). Теперь все, что вам нужно сделать, это вернуть его к нормальному размеру 3 x 1 пиксель. линию, но добавьте еще 1 пиксель вверх (4 х 1 пикс.).

Если это не «совпадает» с вашими глазами, есть и другие, шаг второй и one процесс не нужно менять, просто сделайте шаг третий добавил на 1 пиксель выше, вот и все.

И если вы не хотите читать то, что выше, просто посмотрите на это;

Часть пятая:Быстрое движение(движение 1 / 3)

Это то, что делает все более плавным/плавным, чем обычное движение, и делает его более приятным для глаз, ну, по крайней мере, на мой взгляд. Взглянем! :

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

Вот покадрово:

(Примечание: мигающая часть необязательный)

Вы видите перетаскивание кадров на Рамка 3 и Рамка 7? Это по драматизированным причинам, но объяснимым. Это в основном для того, чтобы оно казалось привлекательным, а не простое движение вперед и назад, потому что это сделает вашу анимацию намного лучше. Но, это не всегда можно сказать, это имеет значение по ситуации.

Часть шестая:Дым

Честно говоря, это на самом деле самое сложное для меня, это надоедливый дым. Я бы не рекомендовал вам делать это, если это необходимо, кроме этого, было бы хорошо попрактиковаться в этом.

Итак, начнем.

Я бы начал с создания хорошей основы для анимации, и, как я уже сказал, Внимание or Заметка на полях, это не должно выглядеть так.

Это почти то же самое, что и огонь, но за исключением того, это не просто маленькая деталь, это целое. Итак, с учетом сказанного, я думаю, я мог бы объяснить, как это сделать.

Прежде чем мы перейдем к части анимации, я бы порекомендовал, чтобы она не была серой, она должна быть такого цвета/цвета, который делает ее лучше видимой, а также убедитесь, что у вас есть Луковая кожура включен для этой анимации, это сделает ее намного проще.

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

Когда частицы дыма начинают исчезать, вы видите, как они движутся по-другому? Позвольте мне показать вам разницу:

Более медленная версия:             

Синии – 11 кадров – Он течет вниз с небольшим завихрением

Red — 4 ~ 10 кадров — Он просто течет вверх

Pink – 4 ~ 9 кадров – Течет вверх и быстро исчезает

Апельсин — 9~10 кадров — Просто исчезает

–

Как только вы закончите с этим, просто покрасьте его в серый цвет, и все готово!

Часть седьмая:Быстрое движение(движение 2 / 3)

Давайте еще раз посмотрим на это замечательное использование анимации, Я бы порекомендовал вам сначала посмотреть часть 1, прежде чем это. Если вы читали или не читали, так тому и быть.

Это для строк, в частности, ничего больше. Так что это может быть вам неинтересно. В любом случае :

(Примечание: я буду использовать числа для пикселей, которые они увеличивают/увеличивают, а также 8 кадров)

–

Зелёная – http://1 , +2 , +3 , +4 , +3 , +2 , +1

Red – http://1 , +1 , +2 , +2 , +2 , +1 , +1

Синии – http://1 , +1 , +1 , +2 , +2 , +2 , +1 , +1

Purple – http://1 , +1 , +1 , +1 , +2 , +2 , +1

Pink – http://1 , +1 , +1 , +1 , +1 , +2 , +1

Жёлтая – http://1 , +1 , +1 , +1 , +1 , +1

–

Ну, это просто для того, чтобы это выглядело плавно, а не мускулисто (отстающий/опережающий), просто для лучшего качества анимации или для других вещей, о которых я понятия не имею. Как Часть 1.

Как видите, я замедлил его в конце, сделав то, с чего он начинался:

Это будет так, начинается с: http://1 , +2 , +3 , +4 …
Затем он закончится тем, но все еще идет вверх: http://… +3 , +2 , +1 , +1

И это работает со всеми из них (кроме Жёлтая один). Подумайте об этом: это происходит в быстром темпе, и было бы лучше остановиться внезапно или остановиться с небольшим торможением?

Это все.

Кредиты и знания.

IrriNinja – Создатель этого руководства

Hatty — Помощь в создании этого руководства

◢ kris ◤ — Помощь с Совет второй.

Значения слов;

клишеhttp://klee – shey

1)
(в искусстве, литературе, драме и т. д.) банальный или избитый сюжет, развитие персонажей, использование цвета, музыкальное выражение и т. д.

2)
все, что стало банальным или обычным из-за чрезмерного использования.

Это все об Aseprite — руководстве по созданию анимации в игре в 2021 году; Надеюсь, вам понравится читать Руководство! Если вы считаете, что мы должны добавить больше информации или мы забываем/ошибаемся, сообщите нам об этом в комментариях ниже, и спасибо! До скорой встречи!

Layers

One sprite can be separated in several layers. You can see them in the timeline:

Each layer has several options:

Layer Name: Text to identify this layer. You can change the layer name double-clicking the layer, or from Layer > Properties menu ( Shift+P key).

Cels: A set of cels, frames that contain something visible for this specific layer in the specific frame.

Visible: It indicates if the layer is visible or hidden . You can switch the layer visibility using Layer > Visible menu or Shift+X key.

Locked: If the layer is locked , you cannot draw on it. By default all layers are unlocked/editable .

Continuous: This option is used to indicate what kind of cels you prefer when they are created for this specific layer. See the Continuous Layers section for more information.

Common Operations

Background Layer

The background layer is an opaque layer (without alpha/transparent component) that cannot be moved. It’s created by default when you select an opaque color in the File > New window, or when you open a file (e.g. a .png file) that doesn’t contain the alpha component.

A sprite can contain only one background layer and it’s always at the bottom of the layers stack in the timeline.

When you select a portion of the background layer and clear it (using Edit > Clear menu), the selection will be cleared with the active background color.

Transparent Layers

All layers with an alpha channel are called transparent layers. You can have several of these kind of layers in the same sprite. You can stack them as you want using the timeline. And you can displace these layers using the Move tool ).

When you select a portion of a transparent layer and clear it (using Edit > Clear menu), the selection will be cleared with transparent color.

You can use Layer > New > New Layer menu or Shift+N to create a new transparent layer.

Background from Layer

If there is no background layer, you can convert any transparent layer to the background using the Layer > Convert To > Background menu. All transparent pixels will be filled with the active background color.

Previously, on Aseprite v1.2 the option was Layer > Background from Layer

Layer from Background

If you want to convert the background to a transparent layer (e.g. because you want to move it with the Move tool ), you can use the Layer > Convert To > Layer menu.

Previously, on Aseprite v1.2 the option was Layer > Layer from Background

Layer Group

You can group layers to handle a set of layers as one unity.

Tilemap Layer

Since Aseprite v1.3, you can create tilemap layers from Layer > New > New Tilemap Layer menu or using Space+N . You can also use Layer > Convert To > Tilemap from any regular transparent layer (the tiles will be created from the active grid settings).

Как быстро нарисовать анимацию и экспортировать как Sprite

В этом руководстве мы быстро создадим анимацию и выведем её по кадрово в формате png. Другими словами, создадим Sprite.

Создание анимации

Для этого выберите в верхней панели File-New или используйте комбинацию клавиш Ctrl+N

Я буду использовать размер 32×32(Ширина и Высота), тип палитры RGBA и фон белого цвета(в дальнейшем поменяем для удобства), также в расширенных настройках можно выбрать соотношение сторон, но мы это трогать не будем
Когда всё было введено и выбрано, нажимаем кнопку OK

Первым делом я изменю цвет фона:

1. Для этого надо выбрать в правой панели инструмент Paint Bucket Tool или нажать клавишу G на клавиатуре
2. Затем нужно назначить цвет на желаемую клавишу мыши, для этого в палитре цветов или в правой нижней панели, нажмите нужной клавишей мыши по цвету
3. Затем выберите нужный слой и кадр
   *Как видите выбранный нами слой и кадр выделяется синей рамкой

Теперь я добавлю новый слой:

• Для этого вы можете нажать на любой слой правой кнопкой мыши и выбрать New Layer или выполнить комбинацию Shift+N
• Для удобство переименуем наш слой дважды щёлкнув по нему и введя имя в поле Name

Пора начинать рисовать:

1. Для этого надо выбрать кисть карандаш(Pencil Tool) в правой панели или нажать клавишу B на клавиатуре
2. Затем я нарисую самого простого персонажа

• Чтобы создать новый кадр надо кликнуть правой клавишей мыши по нужному нам для копирования кадра(его номеру) или любому другому, если хотим создать кадр пустым
• Затем для копирования всего на новый кадр нужно выбрать New Frame или для создания пустого кадра выбрать New Empty Frame

*Можно использовать комбинации ALT+N и ALT+B

• Первый кадр
• Второй кадр
• Третий кадр
• Четвёртый кадр

Для этого в окне Preview(По умолчанию в правом нижнем углу, если нет, то нажмите клавишу F7) я обычно ставлю скорость проигрывания анимации на минимум:

1. Нажав на иконку Play правой клавишей мыши
2. Затем выбираю Speed x0.25

Теперь можно нажать на иконку Play левой клавишей мыши.
*Проигрывать анимацию можно и во время рисования кадров

Экспорт по кадрам в формате png(Проще говоря создаём Sprite)

1. Нажимаем в верхней панели File и выбираем Export Sprite Sheet или используем комбинацию Ctrl+E
2. Теперь нужно выбрать как будут располагаться наши кадры в Sheet type:
   • Первый вариант по горизонтали
   • Второй вариант по вертикали
   • Третий вариант вы выбираете сколько будет кадров в одной линии по вертикали
   • Четвёртый вариант вы выбираете сколько будет кадров в одной линии по горизонтали

• Первый вариант будут экспортироваться все выдимые слои
• Второй вариант будут экспортироваться все выбранные слои
• Остальные варианты это название слоя для экспорта

• Первый вариант будут экспортироваться все кадры
• Второй вариант будут экспортироваться только выбранные кадры

В завершении…

Если заметите ошибки или недочёты, а так же если у вас есть предложения по добавлению, то пишите мне.
В общем это всё, спасибо за внимание ��

Как создать собственную тему, чтобы настроить эстетику aseprite по своему усмотрению.

Начало работы

Здравствуйте и добро пожаловать в мое руководство по настройке темы в aseprite.

В темах Aseprite определите внешний вид программы, с помощью этого руководства вы сможете персонализировать aseprite для своего стиль. Темы не влияют на цвета, используемые на холсте, такие как шахматная доска, указывающая на прозрачный фон и сетку, которые можно настроить в отдельных разделах в меню «Настройки». Вам понадобится программа, такая как Winrar, для создания Zip-файлов. Я тупица в любом виде кодирования, так что это в основном просто учебник типа «замените это число другим числом для этого эффекта», ничего особенного.

В любом случае, сначала для создания вашей собственной темы мы просто сделаем копию темы aseprite по умолчанию. Самый простой способ сделать это — перейти в меню «Темы» (Правка->Настройки->Темы), затем выбрать «по умолчанию» и нажать «Открыть папку».

Скопируйте все файлы, затем перейдите в какое-нибудь доступное место, например документы/загрузки/изображения. Там вы создадите свою собственную папку, вы можете назвать ее как угодно, хотя я рекомендую придерживаться схемы именования, которая, по-видимому, есть в aseprite («nameoftheme-theme»).

Файлы следующие: файл «ЛИЦЕНЗИЯ» — это текстовый файл, с которым вам не нужно возиться, если вы, вероятно, не планируете распространять/продавать свою тему. Файл «package» похож на информацию о проекте вашей темы. Файл «sheet.aseprite-data» — это файл, который генерирует aseprite, вам вообще не нужно возиться с этим, я считаю. Файл «лист» представляет собой изображение всех иконок/элементов пользовательского интерфейса, здесь все можно перекрасить или полностью перерисовать, как душе угодно! Затем, наконец, файл «темы» — это то, что вы используете для настройки цветов, размеров, шрифтов, размера значков/элементов пользовательского интерфейса, расположения значков/элементов пользовательского интерфейса в файле «листа» и их имена, и я уверен, что многое более. Прежде всего, мы должны сосредоточиться на файле «package», чтобы начать. Выберите его, затем щелкните правой кнопкой мыши и откройте с помощью Блокнота или его эквивалента. (специальный совет, вы можете настроить размер текста в блокноте, удерживая Ctrl и прокручивая)

Вас встретит какой-то код, но, к счастью, не очень. При изменении текста следите за тем, чтобы не удалять запятые и кавычки. К счастью, мы меняем копию файла по умолчанию, поэтому фактический файл по умолчанию всегда должен быть там, чтобы вернуться к нему. В любом случае сначала вы захотите переименовать «aseprite-theme» в имя папки, в которой находятся эти файлы. Затем «Aseprite Default Theme» в название вашей темы. Вы также можете настроить остальные вещи, но в основном они важны только в том случае, если вы распространяете или делитесь своей темой с другими. Наконец, вы увидите «по умолчанию» рядом со словами «id» и «путь», на самом деле это то, что вам нужно переименовать, измените его на имя вашей темы. Затем сохраните файл и выйдите.

Как добавить созданную вами тему в Aseprite

В любой момент вы можете сжать папку созданной вами темы в zip с помощью winrar и добавить ее в aseprite в качестве нового расширения/темы. Я рекомендую тестировать вашу тему очень часто, так как вы ее создаете, что может быть проблемой. Но это лучше, чем исправить что-то не так и не знать, что это было. Поэтому, прежде чем я продемонстрирую, как визуально настроить вашу тему, я покажу вам, как добавить вашу тему в aseprite, чтобы вы могли видеть, как она выглядит, когда вы ее создаете позже. Сначала вам нужно превратить его в ZIP, чтобы сжать его, просто щелкните правой кнопкой мыши папку с установленным winrar и нажмите «Добавить в архив…», все, что вам нужно сделать, это выбрать ZIP в формате архива. Это должно сделать ZIP-копию вашего проекта. Вам не нужно беспокоиться об имени ZIP-файла, поэтому, даже если он называется mytheme(19645), все будет в порядке из-за того, что мы настроили в файле «package».

После этого, чтобы установить тему в aseprite, перейдите в меню «Расширения» («Правка» -> «Настройки» -> «Расширения») и нажмите «Добавить расширение». Затем перейдите к легко находимой папке, в которую вы поместили папку ZIP/Project, и дважды щелкните ZIP-файл, чтобы добавить его в качестве расширения. Затем, чтобы применить свою тему, вы переключаетесь в меню «Тема» и дважды щелкаете по ней в списке (двойной щелчок очень важен, если вы выбираете тему и нажимаете «ОК» или «применить», это не изменит тему, эта маленькая причуда заставила меня думаю, я не правильно делал свою тему около часа). Затем не забудьте вернуться в меню расширений и удалить тему, если она не готова.

Редактирование шаблона темы по умолчанию

Теперь вы должны быть готовы изменить что-то для своей темы. Вернитесь к разархивированной версии вашего проекта. Сначала файл «лист», не открывайте этот файл в MS Paint, так как MS Paint не поддерживает прозрачность. Конечно, вы захотите настроить этот файл в aseprite! Во-первых, вы заметите множество линий, обозначающих срезы (если вы не хотите их видеть, вы можете перейти в view->show->Срезы). Создатель aseprite включил это для нас, и они показывают размер спрайтов для каждой иконки/9splice/ect. Старайтесь не выходить за рамки, указанные ими для простых тем перекрашивания. Вы также можете создать свой собственный лист спрайтов, и когда мы доберемся до файла «темы», вы можете перенаправить расположение того, что вы заменяете, на это изображение, а не на это. Вы, вероятно, узнаете большинство значков здесь, если вы много использовали aseprite, ищите что-нибудь с закругленными краями в пользовательском интерфейсе. Обратите внимание, что некоторые цвета имеют прозрачность, которая может плохо отображаться на серой шахматной доске aseprite по умолчанию.

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

Это может быть трудно угадать, что и где находится на листе спрайтов, поэтому создание ослепляющих глаз цветов может немного помочь в устранении неполадок. Вы также можете заглянуть в раздел «Части» файла &#Theme&#, чтобы найти имена и координаты x/y верхнего левого угла каждого спрайта, но имена не всегда очень ясно показывают, что и где находится в aseprite.

Файл «тема» открывается аналогично файлу «пакет». Вы выбираете и открываете в Блокноте. В этом файле вы выполняете все остальные настройки, и он может быть очень сложным. Я сделаю все возможное, чтобы сломать его. Сначала вы можете настроить название вашей темы (в организационных целях) и масштабирование экрана & масштабирование пользовательского интерфейса. Я считаю, что масштабирование экрана настраивает холст, а масштабирование пользовательского интерфейса настраивает окно пользовательского интерфейса. То, что вы указываете здесь, сохраняется только как целые значения, а затем умножается на исходный масштаб… пример: Масштаб экрана 1 соответствует увеличению 100%, Масштаб экрана 1.9 соответствует увеличению 100%, масштаб экрана 2 соответствует увеличению 200%. . Не очень полезно для среднего монитора, но, вероятно, полезно, если вы используете проектор, лежа в постели и еще много чего. Затем еще одно место, где можно указать свое имя в знак признания заслуг в создании этой темы.

Затем возможность изменить шрифт, используемый в aseprite. Параметры шрифта по умолчанию, которые можно вставить сюда, ограничены, если вы хотите изменить шрифт, перейдите в папку шрифтов в папке данных aseprite (Asepritedatafonts). Там вы увидите 2 изображения, которые отображают пользовательский шрифт по умолчанию aseprite и файл под названием «шрифты». Открытие файла «шрифты» с помощью блокнота покажет вам параметры по умолчанию для того, на что вы можете изменить шрифт. Если его нет в этом списке, вы не можете использовать его в aseprite. Если вы полны решимости создать свой собственный шрифт, вы, вероятно, можете сделать копию спрайтов для пользовательского шрифта aseprite и использовать их в качестве руководства для создания нового шрифта. К сожалению, я не очень разбираюсь в создании пользовательских шрифтов. Чтобы добавить существующий установленный шрифт в этот список, просто скопируйте и вставьте запись Arial и замените &#Arial&# именем файла установленного шрифта в файле &#fonts&# вашей операционной системы, затем напишите имя шрифта в тема&# файл. Обязательно перезапустите aseprite, если вы установили шрифт с открытым aseprite.

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

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

К счастью, вы можете легко вычислить шестнадцатеричные коды цветов в aseprite и скопировать шестнадцатеричные коды оттуда в свой файл. > Вот список цветов по умолчанию в файле, чтобы помочь визуализировать, какие цвета вы можете поменять местами. Одна полезная вещь, которую я обнаружил, заключалась в том, чтобы нажать ctrl + F, чтобы открыть меню поиска в блокноте и выполнить поиск точных шестнадцатеричных цветов, если я хочу сказать, изменить все белые вещи на черные и все черные на белые. Наконец, очевидно, что существует схема именования, и области пользовательского интерфейса кажутся сгруппированными вместе. Лица похожи на цвет фона для разделов пользовательского интерфейса, а горячие лица, как я полагаю, кликабельны? Горячий текст — это текст, на который можно щелкнуть, радио относится к радиоменю, я полагаю, «выбранные» — это явно выбранные элементы пользовательского интерфейса, наведение курсора для цвета при наведении курсора и т. д.

Части — это все значки/элементы пользовательского интерфейса в файле «лист». Сначала он даст свои координаты x и y на листе спрайтов, где начинается значок, а затем задаст высоту и ширину в пикселях для этого значка. Это вы бы изменили, если бы сделали значки больше/меньше. Те, которые имеют несколько значений ширины и высоты, представляют собой сращенные значки/элементы (например, 9 сращиваний), вы определяете длину каждого раздела.

И, наконец, раздел стилей. Это решает, какие элементы куда поместить из того, что вы определили во всех других разделах. Это может быть полезно для выяснения того, куда идет цвет или часть. Здесь вы также можете настроить отступы, длину полей и выравнивание текста.