Персонаж — это картинка с прозрачным фоном

Урок 7.1 · Интерфейсы и сайты с нуля · Модуль 7. Персонаж и движение · Бесплатно

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

Нужно знать заранее: Урок 3.1

Объяснение

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

Как это работает: Персонажа рисуют отдельным файлом и называют его спрайт. Спрайт — это картинка, подготовленная для игры: прозрачный фон, ровные края и небольшой размер. Формат имеет значение. PNG и SVG умеют прозрачность, JPG — нет никогда. Поэтому спрайт сохраняют в PNG или SVG: иначе вокруг героя останется белый прямоугольник, и на траве он будет выглядеть как наклейка. Вставляется картинка тем же тегом, что и фотография: <img src="geroy.png" alt="Герой с посохом" />. Здесь src — откуда взять файл, а alt — описание словами для тех, кто картинку не видит. Размер задаёт CSS: width: 140px. Картинка уменьшится целиком, пропорции сохранятся сами — высоту указывать не нужно. Круглая рамка — это border-radius: 50% у квадратной картинки: углы скругляются до круга, и получается портрет.

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

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

Важно: Спрайт — не «картинка вообще», а картинка, подготовленная для игры. Художник рисует её в графическом редакторе (Figma, Inkscape, Aseprite) или её генерируют, а потом убирают фон. У картинки в задании фон ровный белый — так бывает, когда спрайт ещё не вырезали. Поэтому в стилях стоит mix-blend-mode: multiply: белое смешивается с подложкой и становится незаметным. Настоящий спрайт этого не требует — у него прозрачность уже внутри файла.

Итог: Персонаж — это файл, размер и место на сцене. Файл и размер у нас есть; место — в следующем уроке.

.hero-photo {
  width: 140px;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

Уроки модуля 7

• 7.1 Персонаж — это картинка с прозрачным фоном — вы здесь (бесплатно)
• 7.2 Сцена: поставить персонажа туда, куда нужно (по подписке)
• 7.3 Движение без JavaScript: transform и @keyframes (по подписке)
• 7.4 Кнопки и клавиши: персонаж идёт (по подписке)
• 7.5 Проект: свой персонаж на сцене (по подписке)
• 7.6 Спрайт-лист: шаг вместо переворачивания (по подписке)
• 7.7 Столкновение: монета и шип (по подписке)
• 7.8 Разбор сцены: что не так (по подписке)