Разработка игр для Android — Sprite Animation

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

Давайте просто прибегнем к изучению ходьбы, которая сама по себе довольно сложна. Вообразите человека, пересекающего ваш путь (только в 2D). Вы заметите различные проявления тела. Левая нога впереди, правая рука впереди, в то время как задние конечности находятся сзади. Это медленно изменяется, так что левая нога остается позади, в то время как правая прогрессирует вместе с телом. Но в один прекрасный момент цикл повторяется. Если вы не закрываете глаза, вы видите, что человек прогрессирует плавно. Если вы закрываете глаза и немного закрываете их, а затем снова открываете, человек уже ушел и находится в другом положении. Попробуйте мигнуть довольно быстро, и вы увидите что-то вроде старых черно-белых комедий. Это низкая частота кадров. Подробнее о FPS здесь .

На самом деле мы хотим, чтобы этот урок шел с низкой частотой кадров, как это.

Ходьба, представленная выше, немного хитрая, но это сорванная версия спрайтов с острова обезьян. Она Элейн Марли.
Это называется спрайт . Это простое двухмерное изображение или анимация.
Чтобы иметь возможность воссоздать вышеупомянутую анимацию, нам нужен каждый кадр из цикла ходьбы.

Это изображение шириной 150 пикселей, каждый кадр шириной 30 пикселей.
Чтобы проиллюстрировать это лучше, проверьте следующее изображение.

Чтобы получить вышеуказанную анимацию в Android (или iPhone или в любой другой программе в этом отношении), нам нужно загрузить каждый кадр как отдельное изображение и отображать их через равные промежутки времени один за другим. ИЛИ мы можем загрузить большое изображение, содержащее все кадры, и использовать методы, предоставляемые android, нарезать и нарезать их на лету и отображать только соответствующий кадр.
Сделать это тривиально. Мы знаем, что у нас есть 5 кадров, и каждый кадр имеет ширину 30 пикселей. Мы определяем прямоугольник (это будет наш выбор), который имеет ширину одного кадра и высоту изображения.
На следующем рисунке показано, как я вырезал первые два кадра. Остальное нужно заполнить.

Зная все это, давайте приступим к созданию проекта. Мы будем использовать знания из предыдущих глав, прежде всего об игровом цикле и об отображении изображения (здесь мы настраиваем поток, который запускает рисование графического элемента в каждом кадре).

Нам понадобится объект для анимации. Мы используем Elaine с острова обезьян, поэтому я буду использовать класс ElaineAnimated.java .

Частные атрибуты комментируются, но стоит упомянуть некоторые.

• точечный рисунок — это файл png, содержащий все кадры. Второе изображение в этой статье.
• sourceRect — это прямоугольник выбора. Это синее окно на изображении выше. Прямоугольник перемещает каждый кадр на следующий.
• frameTicker это временная метка java последнего изменения кадра в последовательности ходьбы. Обратите внимание, что это не игровой FPS, а ходячий FPS. Если мы хотим, чтобы Элейн выполнила полный цикл ходьбы за секунду, мы устанавливаем частоту кадров для ходьбы 5, потому что у нас 5 кадров. Чтобы получить действительно плавную анимацию, нам нужно 30 кадров, но сейчас это не главное.
• framePeriod — это время в миллисекундах, которое представляет период времени, в течение которого отображается кадр. Если цикл завершается за 1 секунду, то есть для 5 кадров период составит 0,2 секунды. То есть каждый кадр будет отображаться в течение 0,2 секунды.

Конструктор выглядит следующим образом:

Я предполагаю, что рамки имеют одинаковую ширину, поэтому я рассчитываю ширину прямоугольника путем деления ширины изображения на количество кадров. Я также передаю fps, что опять же, кадры в секунду цикла ходьбы, а не FPS игры.

У Элейн будет собственный метод обновления, поскольку она является анимированным объектом, ей нужно хорошо выглядеть, и она отвечает за перетаскивание ног. Поскольку период цикла обновления игры и период Элейн могут отличаться (в данном случае), мы передаем фактическое время игры как переменную, поэтому мы знаем, когда нам нужно отобразить следующий кадр.
Например, игра работает очень быстро, и обновление вызывается каждые 20 миллисекунд, и нам нужно обновлять кадр каждые 200 мсек, тогда прогресс кадра будет происходить при каждом 10-м обновлении игры.

Вот код:

Обновление вызывается с главной игровой панели (проверьте предыдущие записи, как это работает). Это метод обновления класса MainGamePanel .

Метод обновления прост (Элейн). Он увеличивает кадр, если время передачи (то есть системное время, когда был вызван метод обновления) больше, чем в последний раз ( frameTicker ) обновления кадра, плюс период следующего обновления.
Если следующий кадр выходит за пределы последнего, мы сбрасываем цикл.

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

Вот и все. Мы устанавливаем целевой прямоугольник, где рисовать вырезанное изображение. Это в позиции Элейн (X и Y установлены в конструкторе).

говорит андроиду вырезать изображение, определенное sourceRect, из изображения, содержащегося в растровом изображении, и нарисовать его в прямоугольнике на холсте, определенном destRect .

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

MainGamePanel.java немного отличается от предыдущего раздела. Я избавился от всех дроидов и добавил только Элейн.

Элейн создается в конструкторе панели и получает начальное положение (X = 10, Y = 50). Я передаю ширину и высоту спрайта, но это все равно игнорируется, но вы можете изменить код.
FPS очень важен и количество кадров тоже. FPS говорит, сколько кадров нужно показать за одну секунду. Последний параметр — это количество кадров в цикле.

Классы потока и активности не изменились вообще. Вы можете найти их в загрузке, так как они достаточно длинные, чтобы их можно было вставить. Изображение называется walk_elaine.png, и оно было скопировано в / res / drawable-mdpi /, чтобы android мог его автоматически подобрать.

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

Элейн Уолкинг

усиление

Чтобы сделать некоторые аккуратные добавления, измените метод рисования Элейн, чтобы он отображал исходное изображение, содержащее спрайты, из которых извлечены кадры.

Это просто отображает изображение в (20, 150) и создает новый объект рисования, чтобы мы могли закрасить текущий кадр на исходном изображении.
Метод setARGB создает полупрозрачную зеленую краску. Первое значение 50, что означает, что оно прозрачно на 75%. 0 полностью прозрачен, а 255 полностью непрозрачен.
После того, как все было нарисовано, мы нарисуем прямоугольник размером с рамку на исходное изображение, чтобы вы увидели, какая рамка отображается в движении.

Ходьба с текущей рамой окрашены

Вот и все. Запустите его, и вы получите свою первую спрайт-анимацию.

Загрузите исходный код здесь (animation_walk.tar.gz)

Справка: Sprite Animation с Android от нашего партнера по JCG Тамаса Яно из блога « Против зерна ».

• Введение в разработку игр для Android Введение
• Разработка игр для Android — Идея игры
• Разработка игр для Android — Создать проект
• Разработка игр для Android — базовая игровая архитектура
• Разработка игр для Android — основной игровой цикл
• Разработка игр для Android — Отображение изображений с Android
• Разработка игр для Android — перемещение изображений на экране
• Разработка игр для Android — The Game Loop
• Разработка игр для Android — Измерение FPS
• Разработка игр для Android — Particle Explosion
• Разработка игр для Android — Дизайн игровых объектов — Стратегия
• Разработка игр для Android — Использование растровых шрифтов
• Разработка игр для Android — переход с Canvas на OpenGL ES
• Разработка игр для Android — отображение графических элементов (примитивов) с помощью OpenGL ES
• Разработка игр для Android — OpenGL Texture Mapping
• Разработка игр для Android — Дизайн игровых сущностей — Государственный паттерн
• Серия игр для Android