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

Июл 29

iPhone SDK - Уроки | Автор Artem Add comments

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

Получится вот так!

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

1. Создание приложения на основе представления

Без комментариев…

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” приведенный ниже код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

- (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;

ryuJump.animationDuration = 1.1;

ryuJump.contentMode = UIViewContentModeBottomLeft;

[self.view addSubview:ryuJump];

[ryuJump startAnimating];

}

Для всех программистов 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“.

1
2
3
4

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

// Return YES for supported orientations

return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft);

}

Конец…

На этот раз по анимации все. Код к уроку можно загрузить здесь http://icodeblog.com/wp-content/uploads/2009/07/AnimationApp.zip. Удачи в программировании!