Уроки iPhone SDK: Анимация спрайта в играх

Я заметил, что многим играм в App Store не хватает анимации. Само собой, это не относится к компаниям формата Sega и PopCap, а как насчет независимых разработчиков?

Apple позаботилась о том, чтобы анимация никаких проблем не представляла, но, по-моему, рассмотренным здесь методом часто пренебрегают. В считанных строках кода я представлю вам полную анимацию изображений в игре на примере простого приложения. За основу мы возьмем анимацию наносящего удары персонажа Ryu из игры Steet Fighter.

1. Создание приложения на основе представления
Без комментариев… Если вы уже на данном этапе столкнулись с определенными проблемами, то, скорее всего, вам будет гораздо проще создать свое приложение, используя специализированный инструментарий - например, Flipabit.

2. Добавление изображений в папку “Resources”
Загрузив архив, распакуйте его и перетащите файлы в папку “Resources“. Обратите внимание: спрайт загружен с http://panelmonkey.org/. Файл включает 12 изображений Ryu из игры Street Fighter плюс фон из сцены Blanca для эффектности.

3. Создание фона
Потребности в данном шаге нет — он здесь просто для порядка.

Двойным щелчком на файле “whateveryoucalledyourapplicationViewController.xib” откройте его в редакторе Interface Builder. Поверните представление, щелкнув на кнопке со стрелкой.

Перетащите на экран “UIImageView” и растяните его по размерам экрана “iPhone“. В окне инспектора свойств выберите “sfst-blanka.jpg“. Проверьте, чтобы режим был установлен на “Center“, так как у изображения слишком низкое разрешение. Получившийся результат должен выглядеть примерно так (я добавил черный фон).


4. Создание анимации
Открыв файл “yourApplicationViewController.m“, добавьте к методу “viewDidLoad” приведенный ниже код:

- (void)viewDidLoad {
[super viewDidLoad];
NSArray * imageArray  = [[NSArray alloc] initWithObjects:
[UIImage imageNamed:@"1.png"],
[UIImage imageNamed:@"2.png"],
[UIImage imageNamed:@"3.png"],
[UIImage imageNamed:@"4.png"],
[UIImage imageNamed:@"5.png"],
[UIImage imageNamed:@"6.png"],
[UIImage imageNamed:@"7.png"],
[UIImage imageNamed:@"8.png"],
[UIImage imageNamed:@"9.png"],
[UIImage imageNamed:@"10.png"],
[UIImage imageNamed:@"11.png"],
[UIImage imageNamed:@"12.png"],
nil];
UIImageView * ryuJump = [[UIImageView alloc] initWithFrame:
CGRectMake(100, 125, 150, 130)];
ryuJump.animationImages = imageArray;

Для всех программистов 1337, которые опубликуют здесь комментарии с фразой “А почему бы для загрузки изображений не воспользоваться циклом?“, сразу отвечаю (изрядно занудным голосом): “Я делаю так, чтобы все было предельно ясно. Моя задача — показать, что массив нужно заполнить изображениями“.

Вот что, собственно, происходит в коде.

Сначала создаем массив из объектов “UIImage“. А затем начинается волшебство…. Apple предоставила в наше распоряжение свойство “UIImageView“, являющееся массивом изображений. Класс “UIImageView” располагает встроенной функцией, позволяющей циклически чередовать изображения с заданным временным интервалом (т.е. анимировать их).

Следующая переменная — длительность анимации, или количество секунд, за которые поочередно сменятся все изображения. По умолчанию это число изображений, умноженное на 1/30, т.е. скорость в 30 фреймов в сек. Поскольку у нас не 30 изображений, а только 12, с таким показателем анимация воина будет выглядеть весьма странно.

Установим по умолчанию 12 * (1/30) = 4, замедлив до 1.1. По окончании работы с анимацией можете поэкспериментировать с этим числом.

Очередная переменная — “contentMode“. Данный режим определяет, как именно изображение будет заполнять фрейм “UIImageView“. Поскольку изображения в анимации разного размера, мы откорректируем размеры фрейма под самое больше из них и установим “contentMode” на “UIViewContentModeBottomLeft“. Это означает, что прорисованное без масштабирования изображение будет помещено в левый нижний угол представления “UIImageView“. Чтобы понять, какой именно вариант будет верен для конкретного приложения, прочтите подробную информацию по режиму “contentMode“.

Последним шагом добавляем к основному представлению “UIImageView” и вызываем для него метод “startAnimating“, запуская анимацию для изображений. Есть и другие методы, которые могут оказаться весьма полезными при анимации, включая “stopAnimating” и “isAnimating“.

5. Убедитесь, что устройство запускается в альбомном режиме
Пример подразумевает работу устройства в альбомном режиме. Необходимо внести в файл “info.plist” данные о начальном положении интерфейса, добавив соответствующий код в файл “viewController.m“

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft);
}

Конец… На этот раз по анимации все. Удачи в программировании! Ну а если после прочтения данной статьи анимация в iOS-приложениях для вас так и осталась "темным лесом", спешу познакомить вас с сайтом https://flipab.it/. С его помощью вы сможете очень быстро и максимально просто создать нативное приложение любой сложности.