Я заметил, что многим играм в 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. Удачи в программировании!
Исходный код скачать можно [здесь]
Текст оригинальной статьи на английском языке [здесь]
Уважаемые читатели, данный материал был переведен и подготовлен к публикации проектом LookApp.ru, при публикации на другом сайте ссылка на LookApp.ru обязательна.
В этом уроке мы рассмотрим основы считывания из буфера обмена и записи в него.
Загрузка ...
Нет комментариев »
Приходилось ли вам задумываться над тем, как вводить данные пользователю, если текстовое поле расположено в нижней части представления? Появляющаяся при щелчке на текстовом поле клавиатура будет его скрывать. Решение очевидно — анимировать текстовое поле, сместив его вверх.
(2 голосов, средний: 4.50 из 5)
В первой части посвященной SDK iPhone 3.0 серии мы рассмотрели принцип внедрения в приложения iPhone менеджера отмены действий “NSUndoManager” и собственно отмену/повтор с помощью встряски.
Поздравляем всех с выходом iPhone 3.0!
Последние комментарии
Подскажите пожалуйста… Вот...
Код не открывает страницы по простой причине -...
можно было бы использовать сглаживание MSAA, графика была бы на...