Aseprite как копировать рисунок

Aseprite как копировать рисунок

K eyboard shortcuts are a great way to increase the speed and efficiency of a software program. This post discusses the usage of keyboard shortcuts with Aseprite.

Table of contents

Introduction

Computer shortcuts (aka hotkeys) are keys, or a combination of keys, on a computer keyboard that, when pressed, perform a task. As with any popular image editor, Aseprite offers the use of keyboard shortcuts to increase the speed and efficiency at which projects can be completed.

Microsoft Windows, and other GUI operating systems, make it easy to use a traditional mouse to choose, select and take control of each of aspect of Aseprite, but by using the keyboard with your other hand, many of its Tools and settings can be chosen without having to move the mouse pointer away from the actual workspace.

Keyboard shortcuts are either in the way of pressing single keys or by pressing a combination of keys – usually starting with the Alt , Ctrl and/or the Shift keys.

Sponsored links

Please support us by using these links — they come at no additional cost to you, but we get a little commission each time they are used. These and others are available from Amazon.com and BangGood.

We have tested most of these products ourselves. Other selection criteria include affordability, quality, availability and average user rating and popularity by other buyers.

Links will open in a new window. (Dead or old links can be reported in the comments section below.)

Aseprite’s default keyboard shortcuts

Aseprite’s default keyboard shortcut keys can be viewed in one of four ways:

• Each main menu item and its options on the top right section of Aseprite will have an underlined letter. These, as with any Windows program, can be accessed by holding down the Alt key while pressing the underlined letter. The next item inside a menu item can be selected by simply pressing its corresponding underlined letter. For example, by pressing Alt + F will open the File menu, and while still inside the file menu, by pressing S , the Save option will be selected.

• Main menu item option keyboard shortcuts will be indicated on the right of each option. By pressing these keyboard shortcut keys, the corresponding option can be selected without having to go into the menu item first. For example, the keyboard shortcut for Save is Ctrl + S .
• The third way to get the shortcut keys is by hovering the mouse over its area. This is mainly the case with, for example, the tools.
• All the shortcut keys can also be viewed by using Aseprite’s Keyboard Shortcuts section (see below).

Viewing & mapping keyboard shortcuts in Aseprite

Artists using more than one software package, e.g. Adobe Photoshop, can become heavily dependant on each software package’s shortcut keys. It can be quite frustrating to have to use different shortcut keys to do similar tasks in another package. With Aseprite, custom keyboard shortcuts can be viewed and/or altered using the Keyboard Shortcuts section. This section is situated under the Edit menu under Keyboard shortcuts… It can also be accessed by pressing the Crtl + Alt + Shift + K keys on the keyboard.

The Keyboard Shortcuts section shows the keyboard shortcuts (Key) that are assigned to its corresponding Action. The keyboard shortcuts are grouped by Menus, Commands, Tools, Action Modifiers and Mouse Wheel. The keyboard shortcut for a specific function can also be obtained by using the search bar on top of the Keyboard Shortcuts section.

Here, new or additional shortcuts can be created or can be changed. By simply hovering over the Action or Key with the mouse pointer, options will appear.

By choosing Add , a new shortcut can be assigned to the Action and by choosing X the shortcut will be removed. Similarly to Add , by choosing the assigned key, the shortcut key(s) can be altered.

The modifier is the key that needs to be pressed in combination with the key. Aseprite will also show to which key the current shortcut is assigned to for in case there is a conflict.

Importing and exporting keyboard shortcuts

Aseprite keyboard shortcuts can also be exported, imported or be reset to the defaults. In the case where changes were made to the default Aseprite keyboard shortcuts, it can either be reverted back to the default by using the Reset button, or Exported to an “aseprite-keys” file where it can be shared or stored. Aseprite-key files can also be Imported.

SGDK. Импорт палитры.

Благодаря уроку SGDK. Создание изображения, мы уже знаем как импортировать изображение в SGDK. Сначала рисуем изображение в paint.net, затем урезаем палитру до 16-ти цветов. У данного способа есть существенный минус, а именно, для каждой картинки создается отдельная палитра. А, количество палитр ограничено 4-мя палитрами, поэтому нужно умело использовать одни и те же палитры в разных изображениях.

Для работы нам потребуется Aseprite.

Рисуем изображение в Aseprite для SGDK.

Создайте новое изображение, в графе Color Mode выберите Indexed и нажмите OK.

Теперь, выберите любую 16-ти цветовую палитру. Я выбрал PICO-8, потому-что она яркая.

И начните рисовать. Обратите внимание, 1-ый цвет палитры, полностью прозрачный. В сеге, он тоже будет прозрачным.

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

Подгоняем изображение под палитру.

Перетащите изображение в окно Aseprite

Открывшееся изображение, выделите и скопируйте.

И перенесите его в изображение с 16-ти цветной палитрой, созданной ранее.

Палитра изображения уменьшиться до 16-ти цветов.

Автоматизируем процесс урезания палитры.

Aseprite может урезать палитру и может подгонять изображение под палитру.

А еще, он может запускаться из консоли, не открывая окно программы. Этим мы и воспользуемся.

Но сначала, нужно прописать путь до aseprite.exe в переменную PATH. Что-бы можно было открыть Aseprite из любого места, через консоль.

1. В проводнике, нажмите ПКМ по Этот компьютер->Свойства
2. Далее, Дополнительные параметры среды.
3. Потом, Параметры среды.
4. И Path -> Изменить.

Создайте новую переменную среды, прописав в неё путь до папки с Aseprite.

Нажмите OK, что-бы сохранить результат.

Теперь, введите Aseprite в консоли, и нажмите ENTER. Если вы все сделали правильно, Aseprite запустится.

Ниже я привел полезную комманду.

Переводим изображение в режим indexed.

путь_до_изображения — замените на свой.

-b — значит что окно программы открываться не будет.

Подробно про аргументы aseprite тут.

Данная комманда, переводит изображение в режим indexed, что необходимо для сохранения прозрачности. Используйте её тогда, когда вам нужна уникальная палитра и когда вы уверены что палитра изображения содержит меньше 16-ти цветов.

Подобную операцию, можно провести в Python, тем самым, автоматизировав данное действие.

Уменьшаем палитру изображения до 16-ти цветов.

Установите библиотеки Pillow и libimagequant, введя в консоли следующие комманды.

Далее, скачайте скрипт урезания палитры с MEGA.

Внутри скрипта, замените image_url на свой путь до изображения. И запустите скрипт.

Удивительно качественная картинка, для 16-ти цветного изображения. Достигается такое за счет dithering, подробнее здесь.

Я, в скрипте его выставил на максимум, но если его отключить.

result.dithering_level = 0.0

То, картинка лишится множества деталей, что не очень хорошо.

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

Подгоняем изображение под палитру.

Если хотите подогнать изображение под свою палтиру, используйте эту комманду.

Данная комманда, урезает палитру изображения путь_до_картинки до палитры путь_до_картинки_палитра. Используйте её для entity, т.к. их много на экране, и под каждого entity заводить свои палитру, попросту не выйдет.

В конце, оставлю собственный пример использования данного подхода.

Итоговый результат.

Фрагмент из моей игры на SGDK. Кружка и монетки, используют одну и ту же палитру PICO-8, когда как BG_A и BG_B, используют уникальную палитру.

Aseprite compilation guide (руководство по сборке) ⁠ ⁠

Aseprite очень популярная программы для работы с пиксельной графикой. Работает в операционных системах: Windows, Mac OS и Linux. Стоит программа $15. Исходный код программы открыт на GitHub и разработчики подсказывают нам, что если мы сможем сами скомпилировать программу из исходных кодов, то она будет бесплатной. Отлично! Сейчас мы попробуем пройти все этапы компиляции, чтобы заполучить желаемую вкусняшку.

Собирать программу мы будем под Windows, потому что в Linux она уже доступна в большинстве репозиториев в собранном виде или с готовым рецептом по сборке.

Aseprite успешно собирается в Windows 7, 8, 10 x86 или x64.

Этапы компиляции Aseprite:

Скачиваем именно Aseprite-v(последняя версия)-Source.zip архив!

Распаковываем в папку C:\Aseprite-Source

Во время установки выбираем следующие компоненты: «Разработка классических приложений на C++» и «Пакет SDK для Windows 10«.

Скачиваем и устанавливаем последнюю версию CMake (кроссплатформенная система автоматизации сборки программного обеспечения из исходного кода).

После установки CMake убедиться, что в системной переменной PATH прописан путь до папки bin с cmake.exe (пример: C:\Program Files\CMake\bin).

Для проверки открываем консоль и вводим команду: cmake -version

Скачиваем и устанавливаем Python (высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода).

Для проверки открываем консоль и вводим команду: python -V

Скачиваем последнюю версию Ninja (небольшая и быстрая кроссплатформенная система сборки программного обеспечения).

Распаковать ninja-win.zip архив и скопировать ninja.exe в папку C:\Windows\System32

Для проверки открываем консоль и вводим команду: ninja —version

Если мы используем 32 битную систему Windows, то нам придётся собрать программу Ninja самостоятельно, потому что последние официальные версии Ninja собраны под 64 битные системы. Или скачать уже собранную мной: Ninja v1.8.2 x86

Скачиваем исходники последней версии Ninja. Распаковываем в папку C:\Ninja-Source

Открываем консоль разработчика Visual Studio 2017 (Пуск > Все программы > Visual Studio 2017 > Visual Studio Tools > Командная строка разработчика для VS 2017).

Переходим в папку с исходным кодом Ninja, командой в консоли: cd C:\Ninja-Source

Собираем Ninja, командой в консоли: python ./configure.py —bootstrap

После успешной сборки, копируем полученный файл ninja.exe в папку C:\Windows\System32

Для проверки открываем консоль и вводим команду: ninja —version

Также нам потребуется инструмент AWK (скриптовый язык построчного разбора и обработки входного потока).

Получить его можно из сборки инструментов MozillaBuild.

Или скачать уже собранный мной: AWK v3.1.7

Скопировать содержимое в папку C:\Windows\System32

Для проверки открываем консоль и вводим команду: awk -W version

Скачиваем и устанавливаем Git (распределённая система управления версиями).

Для проверки открываем консоль и вводим команду: git —version

Далее необходимо скачать и установить Google depot tools (набор инструментов для разработки Chromium).

Распаковываем полученный архив в папку C:\deps\depot_tools

Открываем консоль разработчика Visual Studio 2017 (Пуск > Все программы > Visual Studio 2017 > Visual Studio Tools > Командная строка разработчика для VS 2017).

В консоли вводим команды:

set PATH=C:\deps\depot_tools;%PATH%

cd C:\deps\depot_tools

gclient sync

(Последняя команда завершится с ошибкой «Error: client not configured; see ‘gclient config’». Просто игнорируем это.)

Далее в консоли вводим команды:

python tools/git-sync-deps

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

Теперь в консоли вводим команду:

gn gen out/Release —args=»is_official_build=true skia_use_system_expat=false skia_use_system_libjpeg_turbo=false skia_use_system_libpng=false skia_use_system_libwebp=false skia_use_system_zlib=false target_cpu=»»x86″» cc=2017″

Если она заканчивается ошибкой «ERROR at //gn/BUILDCONFIG.gn Could not find VC installation.«, то поправьте пути в файле C:\deps\skia\gn\BUILDCONFIG.gn

Если у вас 32-битная система Windows, то все пути «C:/Program Files (x86)/«, нужно изменить на «C:/Program Files/«

Затем снова повторить команду. Которая должна закончиться сообщением «Done.«

(Если у вас 32-битная система Windows, то замените файл ninja.exe в папке C:\deps\depot_tools файлом ninja.exe, который вы использовали на этапе 5.)

Теперь собираем библиотеку командой: ninja -C out/Release skia

(Skia — это 2D-графическая библиотека с открытым исходным кодом. Она служит графическим движком для Google Chrome, Android, Mozilla Firefox и многих других продуктов. Aseprite собранный с библиотекой Skia работает приемлемо быстро в отличие от библиотеки Allegro, которая предлагается по умолчанию.)

В консоли разработчика Visual Studio 2017 вводим команды:

cd C:\Aseprite-Source

mkdir build

cmake -DUSE_ALLEG4_BACKEND=OFF -DUSE_SKIA_BACKEND=ON -DSKIA_DIR=C:\deps\skia -DCMAKE_BUILD_TYPE=Release -DENABLE_UPDATER=OFF -G Ninja ..

ninja aseprite

После успешного завершения сборки, Aseprite будет находиться в папке C:\Aseprite-Source\build\bin

Из альтернативных программ для работы с пиксельной графикой можно отметить:

Как начать делать пиксель-арт. Часть 1

Эта небольшая статья о том, как начать свой путь в пиксель-арт и нацелена она на тех, кто только начал или собирается начать. Я расскажу про самые базовые вещи – как создать файл, настройки холста и работа с ограниченной цветовой палитрой.
Статья была проспонсирована на моем Patreon! Если она вам понравилась, то вы даже можете поддержать меня малой денежкой =)
Также это 1-ая часть планируемой серии статей, всю серию читайте в Pixel Grimoire.

Перед Началом

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

Инструменты

Вам не нужно никаких изощрённых программ и инструментов для пиксель-арта, его можно даже делать при помощи мышки и бесплатного ПО. Моё рабочее место включает в себя маленький Вакомовский планшет, хорошую мышку с клавиатурой и мою любимую программу Aseprite, но вы можете использовать любую другую программу на своё усмотрение.
Вот примерный список ПО широко используемого для пиксель-арта:
• Aseprite: Отличный профессиональный редактор со многими ускоряющими работу функциями (платный)
• GraphicsGale: Классический, широко используемый во многих играх. Слегка сложноват, но у него много функций (бесплатный).
• Piskel: Бесплатный онлайн редактор
• Photoshop: Мощный редактор, изначально не создавался для создания пиксель-арта, но его тоже можно использовать (платный).

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

Создание Нового Файла

Просто нажмите “New File…” на стартовом окне или File > New File и можно начинать рисовать.
Давайте создадим новый файл. 16 на 16, наверное, будет выглядеть маловато, но думаю, что для начала сойдёт. Большее разрешение может отвлечь вас от главной задачи: понимания того, как пиксели взаимодействуют с другими пикселями по соседству.

Aseprite ‘New Sprite’ меню
Вы можете оставить цветовой режим в RGBA, он наиболее простой и понятный. Некоторые пиксель-арт художники любят работать в indexed палитре, которая даёт доступ к некоторым крутым цветовым приёмам, но и имеет определённые недостатки.
Оставьте фон прозрачным или белым для начала. Только убедитесь, что опция Advanced Options отключена (но не бойтесь поэкспериментировать с ней позже) и можно начинать!

Давайте Рисовать!

В интерфейсе очень много различных менюшек и тулбаров, но не волнуйтесь нам нужна лишь парочка кнопок для начала. Главный инструмент это Pencil, обычно следует сохранять ширину в 1 пиксель и именно при помощи него мы будем расставлять наши пиксели на холсте. Просто нажмите на иконку или на B и щелкните по холсту, чтобы поставить пиксель.

Aseprite рабочая область

Слева вы видите цветовую палитру, с цветами по умолчанию. Давайте изменим её на другую более простую. Щёлкните по третьей иконке в верху цветовой палитры (Pressets) и выберите ARQ4 (очень хорошую палитру сделанную Endesga), именно её мы будем использовать для нашего первого спрайта.
Теперь используя только 4 цвета сверху слева, попробуем нарисовать кружку.
Не стесняйтесь использовать мой пример в качестве вдохновения, но всё же постарайтесь сделать свой вариант. Если вы допустили ошибку, то нажмите alt+click на пустой области или в области за вашим рисунком, и вы сможете «выбрать» прозрачный цвет и использовать его для удаления неправильных пикселей. Иным вариантом может быть использование Eraser или хоткея Е для быстрого выбора.
Вы, наверное, заметите, что работа в таком низком разрешении кардинально отличается от обычного рисования. Всё должно быть просчитано и каждый пиксель имеет важное значение. Это то, к чему вы должны привыкнуть как можно раньше.

Вы также можете попробовать другие кнопки на меню инструментов. Многие из них имеют дополнительные опции, когда нажаты. Для начала старайтесь избегать использовать инструмент blur tool так как он добавляет дополнительные цвета, что нам сейчас совсем не нужно.
Ну а теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. На этот раз уже без моей работы как референса. Если вам кажется, что ваш спрайт не умещается в холст, то это абсолютно нормально, попробуйте свести часть деталей к одному пикселю. Работать на таком низком разрешении очень сложно и похоже на сбор мозаики или пазла. Я написал одну статью о работе на низком разрешении для Kano.
Если вам интересно, то вот мои версии тех спрайтов, только закончите свои перед тем как их смотреть [skull, sword and human face]
Это очень хорошее упражнение. Если вы хотите ещё попрактиковаться, то попробуйте сделать больше спрайтов с такими же ограничениями.

Сохраняем файл