Как делать персонажей для игр — и что для этого нужно

После курса · Обновлено 4 ноября 2026 · 14 мин чтения

Персонаж в игре — это картинка, место на сцене и число, которое меняется при нажатии. Всё остальное — надстройки. Разбираем, что уже есть в курсе, чего пока нет, где заканчиваются интерфейсы и начинается геймдев, и что делать в первые тридцать дней.

Из чего состоит персонаж

Обратите внимание: рисование стоит только в первой строке. Всё остальное — работа с картинкой, а не «умение рисовать в коде». Поэтому человек, который не умеет рисовать, вполне может собрать персонажа: он возьмёт готовый спрайт.

Что вы уже умеете после модуля «Персонаж и движение»

1. Вставить персонажа и не растянуть его на весь экран — спрайт и карточка героя: ширина, круглая рамка, описание alt.
2. Поставить героя в нужную точку сцены — сцена и координаты: relative у сцены, absolute у героя, left и bottom, слои.
3. Оживить его без JavaScript — transform и @keyframes: покачивание, плавность, «дыхание» тени.
4. Научить его ходить — кнопки и координата: шаг, край сцены, число на экране.
5. Собрать управляемого персонажа — проект модуля: ходит, поворачивается, не уезжает за край.
6. Показать шаг кадрами — спрайт-лист: четыре кадра в одном файле, переключение фоном и пауза, когда герой стоит.
7. Заметить столкновение — монета и шип: пересечение двух прямоугольников, хитбокс и флаг «уже случилось».
8. Найти ошибку в сцене — разбор сцены: три слоя сцены, четыре частые поломки и поиск причины по цепочке «объявил → изменил → показал».

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

Спрайт: главное про картинку

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

Когда персонаж должен идти, одного файла мало: нужны несколько кадров. Их складывают в один файл — спрайт-лист — и показывают по одному, сдвигая фон. Так устроены и старые игры, и многие современные: один файл, несколько кадров, переключение по номеру.

Размер кадра задают стилями: width и height у блока, а background-size растягивает спрайт-лист так, чтобы в окне помещался ровно один кадр. Для пиксельной графики добавляют image-rendering: pixelated — иначе браузер размывает её при увеличении.

Движение: три уровня

1. CSS. Анимация по сценарию @keyframes и плавность через transition. Работает без JavaScript, подходит для покачивания, пульса, появления, вращения. Этого хватает для «живой» сцены.
2. JavaScript и координата. Число-состояние (x, y), обработчики нажатий или клавиш, перерисовка через style.left. Так персонаж начинает слушаться игрока. Для плавного движения каждый кадр вызывают requestAnimationFrame — это как «следующий кадр фильма», а не «подожди 16 миллисекунд».
3. Canvas и движок. Когда объектов десятки, а нужны столкновения, гравитация и камера, DOM перестаёт быть удобным: каждый элемент — это узел страницы. Тогда рисуют на canvas или берут движок — Phaser и PixiJS для браузера, Unity, Unreal и Godot для больших игр.

Граница проходит не по «сложности кода», а по количеству правил. Один персонаж, который ходит по сцене, — это CSS и немного JavaScript. Двадцать врагов, пули, платформы и камера — это уже движок: иначе вы напишете свой, только хуже.

Столкновение: одно правило, а не физика

В игре герой всё время с чем-то сталкивается: монета, шип, дверь, враг. Кажется, что за этим стоит отдельная «физика», но в простом случае это проверка, пересеклись ли два прямоугольника. У каждого объекта есть левый край и ширина, и накладываются они, когда левый край одного левее правого края другого — и наоборот. Два условия, и правило готово: подобрать предмет, отнять здоровье, открыть дверь.

Второе, без чего правило ломается, — память о том, что событие уже случилось. Без флага здоровье тает на каждом шаге, пока герой стоит рядом с шипом, а монета засчитывается бесконечно. Флаг — обычная переменная, такая же, как координата. Обе вещи разобраны в уроке про столкновения.

Персонаж — это данные

Когда герой двигается, упирается в край, подбирает монету и теряет здоровье, на экране меняется картинка. Но меняется она потому, что меняются данные: координата, число монет, здоровье, флаг «монета уже взята». Понять это стоит до того, как браться за движок: любая игра — это данные плюс правила, которые их меняют.

В учебной сцене это пять отдельных переменных — так проще увидеть каждую. В настоящей игре герой, монеты и враги хранятся одинаково: список записей, у каждой свои поля. Тогда добавить второго врага — это добавить запись, а не копировать код. Именно поэтому [базы данных](word:База данных) и таблицы нужны не «большим компаниям», а любой игре, где объектов больше одного.

Где брать картинку персонажа

• Нарисовать самому. Figma и Inkscape — для векторных персонажей, Aseprite — для пиксельных. Начинать проще с простых форм: круг, прямоугольник, две точки-глаза. Узнаваемость важнее деталей.
• Сгенерировать и доработать. Картинка по описанию даёт основу, но фон обычно приходится убирать, а пропорции — править. Считайте это черновиком, а не готовым спрайтом.
• Взять готовый набор с лицензией. Есть бесплатные наборы спрайтов, где прямо написано, что можно использовать. Читайте условия: «бесплатно» не всегда значит «можно в свой проект».
• Не брать из чужих игр. Персонаж, вырезанный из известной игры, — это чужая работа. Для учебного проекта это выглядит безобидно, а для опубликованного — уже нарушение.

Что не нужно делать на старте

• Писать свой движок. Это годы работы и тысячи решённых чужих задач. Возьмите готовый — или обойдитесь CSS, пока игра маленькая.
• Делать физику с нуля. Гравитация, трение и отскоки выглядят просто, а ведут себя сложно. Для первой игры достаточно движения по клеткам или по прямой.
• Начинать с 3D. Три измерения добавляют камеру, освещение, модели и материалы. Персонаж на плоскости даёт тот же азарт и в десять раз меньше препятствий.
• Планировать «игру на сто часов». Первая законченная игра — это одна сцена, один герой и одно правило. Именно законченная, а не задуманная.
• Делать мультиплеер. Сеть — отдельная профессия: задержки, синхронизация, читеры. Она подождёт.

План на 30 дней

1. Неделя 1. Соберите сцену с одним персонажем: фон, земля, герой, подпись. Пока без движения — важно, чтобы он стоял там, где нужно, и на телефоне тоже.
2. Неделя 2. Добавьте движение кнопками и границы сцены. Добейтесь, чтобы персонаж никогда не уезжал за край и не «дёргался».
3. Неделя 3. Сделайте спрайт-лист из 4 кадров и переключайте кадры, пока герой идёт — это уже разобрано в уроке про спрайт-лист. Здесь появляется настоящая анимация, а не только покачивание.
4. Неделя 4. Добавьте второе правило: столкновение с предметом (подобрал монету) или с врагом (потерял здоровье). Одно правило, но работающее — это уже разобрано в уроке про столкновения.
5. В конце. Выложите сцену и покажите её: другу, в сообществе, в портфолио. Законченная маленькая работа учит больше, чем большая незаконченная.

Куда это ведёт

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

Что дальше

Практика — в модуле «Персонаж и движение» траектории «Интерфейсы и сайты с нуля»: восемь уроков от карточки героя до разбора сцены. Первый урок открыт без подписки — спрайт и карточка героя.

Вторая половина — в траектории «Программирование с нуля»: переменные, сравнения, ветвления и таблица как список одинаковых записей объясняют то же самое со стороны данных. Там же — поля, записи и ключ: как найти нужную строку, если объектов много.

Если вопрос шире — «куда расти после курса» — читайте «Куда расти дальше: уровни и треки» и «Как выбрать направление»: там профессии, навыки и первый шаг для каждого направления, включая интерфейсы.

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

Другие статьи раздела

• Что делать после курса — Курс пройден, уроки закрыты — и наступает самый неудобный вопрос: «и что теперь?» Ниже честный план на год: что сделать в первые три месяца, что добрать к полугоду и как выбрать одну нишу, чтобы не учиться бесконечно.
• Куда расти дальше — Разработка — не лестница с одной вершиной, а дерево: с любой ветки видно несколько следующих. Разбираем, что меняется по мере роста, какие есть пути кроме «стать старшим разработчиком» и как выбрать направление, если пока непонятно.
• Как это работает в жизни — В курсе код живёт в песочнице: написали строку — сразу видите результат. В жизни у программы есть место — файл на диске, папка проекта, сервер и адрес в интернете. Разница не в языке и не в сложности кода, а в окружении. Ниже — карта этого окружения, честные предупреждения, куда новичку лезть не нужно, и закон о персональных данных простыми словами.
• Почему сайты выглядят дорого — Красивый сайт — это не «вкус» и не количество украшений. Это иерархия, расстояния, ограниченная палитра и контраст. Разбираем, почему глаз видит одно раньше другого, что психология говорит про цвет и сочетания, как получился этот сайт — и как научиться делать так же.