Aseprite

Aseprite

130 ratings
Как быстро нарисовать анимацию и экспортировать как Sprite
By LiPoWeRaD
В этом руководстве мы быстро создадим анимацию и выведем её по кадрово в формате png. Другими словами, создадим Sprite.
2
3
4
   
Award
Favorite
Favorited
Unfavorite
Создание анимации
Первый шаг - создать новый файл

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

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


Шаг четвёртый - Нарисуем первый кадр

Первым делом я изменю цвет фона:
  1. Для этого надо выбрать в правой панели инструмент Paint Bucket Tool или нажать клавишу G на клавиатуре

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

  3. Затем выберите нужный слой и кадр
    *Как видите выбранный нами слой и кадр выделяется синей рамкой

  4. Теперь нам нужно щёлкнуть выбранной ранее клавишей мыши по рабочему пространству и цвет фона изменится

Теперь я добавлю новый слой:
  • Для этого вы можете нажать на любой слой правой кнопкой мыши и выбрать 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:
    • Первый вариант по горизонтали
    • Второй вариант по вертикали
    • Третий вариант вы выбираете сколько будет кадров в одной линии по вертикали
    • Четвёртый вариант вы выбираете сколько будет кадров в одной линии по горизонтали

  3. Если поставить галочку около Padding, можно будет настроить отступы между кадрами

  4. Если поставить галочку около Trim, то при экспорте не будет происходить обрезка пустого пространства

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

  6. Теперь в Frames нужно выбрать кадры для экспотра:
    • Первый вариант будут экспортироваться все кадры
    • Второй вариант будут экспортироваться только выбранные кадры

  7. Теперь нужно поставить галочку рядом с Output File и выбрать путь куда сохранить файл

  8. Галочка рядом с JSON Data позволяет сохраниться файл в формате Json

  9. Галочка рядом с Open generated sprite sheet открывает спрайт сразу после экспорта

  10. Когда все значения выставлены и введены, нажимаем кнопку Export

  11. Должно получиться, что-то наподобие этого
В завершении...
Если заметите ошибки или недочёты, а так же если у вас есть предложения по добавлению, то пишите мне.
В общем это всё, спасибо за внимание :D
19 Comments
Art 24 May, 2023 @ 5:40am 
Спасибо, как раз начал первую пиксельную игру делать))
💜vVvirtuzZz💜 17 Mar, 2023 @ 10:21am 
Благодарю
LiPoWeRaD  [author] 17 Mar, 2023 @ 10:14am 
Compression: None Поставить попробуйте
💜vVvirtuzZz💜 17 Mar, 2023 @ 9:38am 
Я заметил, что у меня некоторые спрайты, которые были сделаны 16 на 16 или 32 на 32 не смазываются, а вот фон 320 на 180 смазывается( Может быть дело в формате спрайта? Настройки применяю, которые вы написали
LiPoWeRaD  [author] 17 Mar, 2023 @ 9:32am 
В Unity3d

Filter mode: Point(no filter)
Format: RGBA 32 bit
Sprite Mode: Multiple
Эти опции в настройках спрайта
Если не поможет, сами попробуйте другие настройки.
💜vVvirtuzZz💜 17 Mar, 2023 @ 7:37am 
Подскажите пожалуйста, при использовании спрайтов в юнити, размывает картинку. При установке некоторых настроек выдает что-то вроде "Неприменимые настройки" или чет такое. Как быть?)
dorshov71𒉭 11 Jan, 2023 @ 12:31am 
а как задиркой продирать типо убрать 1 блока я то пытаюсь убрать а не получается
SqAss 13 May, 2022 @ 5:12am 
зайди в раздел File потом нажми на Export и там выбери не 100% а 1000% или поменьше
14 Mar, 2022 @ 12:16pm 
почему у меня гифка в очень плохом качестве?
porschelover 5 Feb, 2022 @ 7:51am 
Спасибо