Создание 2D-игр с Tiniest2D
Спрайты и анимация
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
Создание активов
Активы — это элементы, которые использует ваша игра: изображения, сцены, звуки и объекты. В Tiniest2D вы создаете большинство активов, записывая переменную в скрипте. Редактор замечает конструкции, такие как Sprite(), и позволяет вам редактировать актив визуально.

Спрайты
Спрайты — это изображения в пиксельной графике. Они используются для персонажей, стен, монет, кнопок, пуль, фонов и всего остального, что нужно нарисовать. Спрайт может быть одним изображением или маленькой анимацией, состоящей из нескольких кадров.
Чтобы создать спрайт, объявите переменную с помощью конструктора Sprite():
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
Числа — это ширина и высота в пикселях. После сохранения вы увидите имя переменной, обернутое в темный блок — это указывает на то, что это актив спрайта.
Чтобы отредактировать спрайт:
- Ctrl+Click на имени переменной спрайта
- Откроется Редактор спрайтов
Элементы управления редактора спрайтов

Редактор спрайтов — это место, где вы рисуете изображение пиксель за пикселем. Если вы новичок в пиксельной графике, начинайте с малого: спрайты 8x8 или 16x16 легче читать, редактировать и анимировать.
| Элемент управления | Действие |
|---|---|
| Левый клик | Нарисовать пиксель текущим цветом |
| Правый клик | Стереть пиксель (прозрачный) |
| Перетаскивание средней кнопкой мыши | Переместить вид |
| Скролл мыши | Увеличить/уменьшить масштаб |
| Палитра цветов | Щелкните, чтобы выбрать цвет |
| Ширина/Высота +/- | Изменить размер спрайта |
| Переключатель коллайдера | Включить/выключить границы столкновения |
| Смещения коллайдера | Настроить внутренние отступы коллайдера слева/сверху/справа/снизу |
| Показать коллайдер | Предварительный просмотр границ столкновения |
| Пробел | Переключить предварительный просмотр анимации |
| Стрелки влево/вправо | Навигировать между кадрами |
| Escape | Вернуться к редактору скриптов |
Панель анимации
Анимация создается путем быстрого показа нескольких кадров спрайта подряд. Например, у персонажа, который идет, может быть один кадр с левой ногой впереди и другой с правой ногой впереди.

Панель анимации (в левом боковом меню) позволяет управлять кадрами спрайтов:
| Элемент управления | Действие |
|---|---|
| FPS +/- | Настроить скорость анимации (кадры в секунду) |
| Добавить кадр | Добавить новый пустой кадр в конец |
| Копировать кадр | Дублировать текущий кадр (вставляется после текущего) |
| Удалить кадр | Удалить текущий кадр (только если больше одного кадра) |
| Полоса кадров | Щелкните миниатюры внизу, чтобы выбрать кадры |
Когда у спрайта есть несколько кадров, объекты, использующие его, будут автоматически анимироваться во время выполнения. Каждый объект отслеживает свое собственное состояние анимации независимо.