Evgenii Legotckoi
Evgenii LegotckoiOct. 17, 2015, 6:42 a.m.

How to draw a sprite sheet in the Adobe Illustrator

I'm tired of testing GameDev processes with triangles and rectangles. It's boring and uninteresting, so it's time to blow something up. But where do you start? - you ask. And my answer is, you need to draw a sprite explosion, to be precise, then draw a sprite sheet for the explosion, which will represent the explosion animation.

But how to do that? - I was puzzled by this question. After studying several forums and video tutorials, I decided to collect the information received into one lesson on my website. So we have the following technical task for this lesson:

  1. Draw some sprite pictures, from which we will make a sprite sheet for the explosion animation;
  2. Build the sprite sheet itself and save it as a PNG file;
  3. Do it all using Adove Illustrator software.

Draw sprite pictures step by step

Note. Also, if you are not interested in reading the step-by-step manual, then I suggest immediately referring to the video tutorial at the end of the article, everything is clearly described, shown and explained.

Step one

Create a canvas file for sprite images with parameters 20 x 20 pixels. These are the pictures we will use in the next tutorials on GameDev in Qt to implement bullet explosions. We will draw explosions.

Step two

Now create a rectangular mesh on the canvas that will separate our pixels. In this case, it is necessary to set the grid parameters such that its width and height will be equal to the width and height of the sprite, and the number of vertical and horizontal dividers should be made to the number of pixels in height and width, respectively. Also, don't forget to remove the stroke and make the background transparent, we don't need an extra white color in the sprite image.

Step three

Select the Live Paint Bucket tool and left-click a Live Paint Fill group from a rectangular grid. Live Paint fills with the selected color the area bounded by separators, as well as an outline or stroke. Since the grid divides the canvas pixel by pixel, each rectangle will be one pixel, which we will fill with color using Fast Fill.

Step four

After we draw all 15 sprite images, create a new project in Adobe Illustrator. Which will contain all 15 sprite images and will be 15 images wide and one image high. That is, we will draw all the pictures in one row. We will also place the rectangle on the entire canvas. Don't forget to remove the stroke and make the background transparent.

Step five

Next, create a contour mesh in the Rectangle, consisting of one row and 15 columns for all sprite images.

Step six

And now, by going to the File menu item, using the "Place" item, add all the prepared sprites to the project.

Step seven

Now we finish creating the sprite sheet by saving it as a PNG image with a transparent background. After saving the resulting image, let's check it how it looks in a regular image viewer.

Also, the entire lesson is presented in the following video tutorial below.

Video tutorial

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

Comments

Only authorized users can post comments.
Please, Log in or Sign up
B

C++ - Test 002. Constants

  • Result:16points,
  • Rating points-10
B

C++ - Test 001. The first program and data types

  • Result:46points,
  • Rating points-6
FL

C++ - Test 006. Enumerations

  • Result:80points,
  • Rating points4
Last comments
k
kmssrFeb. 9, 2024, 5:43 a.m.
Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVADec. 25, 2023, 9:30 p.m.
Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJoDec. 25, 2023, 7:38 p.m.
Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
GvozdikDec. 19, 2023, 8:01 a.m.
Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Now discuss on the forum
AC
Alexandru CodreanuJan. 19, 2024, 10:57 p.m.
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCTDec. 27, 2023, 7:57 p.m.
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
ДмитрийJan. 10, 2024, 3:18 p.m.
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii LegotckoiDec. 12, 2023, 5:48 p.m.
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Follow us in social networks