Уроки iPhone SDK: Переход с исчезновением изображения Уроки iPhone SDK: Устанавливаем Xcode и iPhone SDK
Июн 04

Уроки iPhone SDK: (Часть 1) Перемещение и вращение изображений.

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

В данной статье будут рассмотрены следующие темы:

  • Работа с трансформацией
  • Работа с “UIImageView“
  • Установка интервала для анимации
  • Привязка изображения к объектам
  • Создание производного класса от “UIImageView“

Шаг 1

Командой “New Project” создайте новый проект. Выполните “iPhone OS Application -> View-Based Application” и присвойте проекту имя “Ball“.

Шаг 2

Импортируйте изображение в группу “Resources“. При работе с прозрачным png-файлом прозрачность будет сохранена. Я выбрал веселый мяч из [подборки].

Теперь окно проекта должно выглядеть так:

iphoneballprojectview

Проще всего загрузить изображение через класс “UIImageView“. Это можно сделать, добавив “UIImageView” в редакторе Interface Builder, либо вручную создать “UIImageView” и прикрепить к нему изображение. Мы попробуем оба способа — просто для практики. Для начала перейдем к первому методу — загрузке изображения через редактор IB.

Шаг 3

Создайте производный класс от “UIImageView“. Почему вместо “UIImageView” нужна производная? Потому что мы добавим представлению дополнительные свойства, включая скорость и вращение. Выполнив “File->New File“, выберите “Cocoa Touches Classes” и присвойте файлу имя “Ball.m“. Чтобы получить “Ball” из “UIImageView“, отредактируйте “Ball.h“, как показано ниже:

1
2
3
4
5
6
7
8
9
10
#import

@interface Ball : UIImageView {
int mXSpeed;
int mYSpeed;
float mAngle;
}
- (void)move;
- (void)setSpeedX:(int)xSpeed Y:(int)ySpeed;
@end

Для анимации изображения будет задействовано три новых переменных.

Шаг 4

В файл “Ball.m” добавьте представленный ниже код. Функция “setSpeed” устанавливает скорость объекта “Ball“. Для анимации таймер будет вызывать функцию “move“.Кроме того, мы будем проверять границы, меняя направление движения при ударе мяча о край экрана и вращая затем изображение с помощью метода “CGAffineTransformMakeRotation“.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#import "Ball.h"

@implementation Ball

- (void)setSpeedX:(int)xSpeed Y:(int)ySpeed {

mXSpeed=xSpeed;
mYSpeed=ySpeed;
}

- (void)move {
self.center=CGPointMake(self.center.x + mXSpeed, self.center.y + mYSpeed);
if (!CGRectContainsRect(self.superview.frame, self.frame))
{
if (self.frame.origin.x mXSpeed=abs(mXSpeed);
if (self.frame.origin.x>self.superview.frame.size.width-self.frame.size.width)
mXSpeed=-abs(mXSpeed);
if (self.frame.origin.y<0)//self.superview.frame.origin.y)
mYSpeed=abs(mYSpeed);
if (self.frame.origin.y>self.superview.frame.size.height-self.frame.size.height)
mYSpeed=-abs(mYSpeed);
//mYSpeed=-mYSpeed;

}
self.transform=CGAffineTransformMakeRotation (mAngle);
mAngle+=0.1;
}
@end

“superview” является родителем текущего представления и членом “UIView“.

Шаг 5

Нужно создать экземпляр объекта “Ball” в основном объекте представления, т.е. в “BallViewController.h“. Откройте файл и внесите в него представленный ниже код:

1
2
3
4
5
6
7
8
9
10
#import

@class Ball;

@interface BallViewController : UIViewController {
IBOutlet Ball* mBall;
}
@property(retain, nonatomic) IBOutlet Ball* mBall;

@end

Спецификатор IBOutlet сообщает редактору Interface Builder о планирующейся привязке к переменной “mBall“.

Шаг 6

Двойным щелчком на файле “BallViewController.xib” откройте его в редакторе IB.

Шаг 7

В редакторе нам предстоит связать “mImage” с “ImageView“.

Перетащите “Image View” (в действительности объект “UIImageView“) из окна библиотеки в окно представления “View“.

iphoneballdragimageview

Шаг 8

Выполните “Tools->Inspector“, а затем перечисленные ниже шаги.

a) В поле “Image” выберите импортированный в шаге 2 файл.
b) Для опции “Mode” укажите значение “Aspect Fit“.
c) С помощью голубых манипуляторов вокруг изображения отредактируйте его размер, чтобы оно не было слишком большим (если манипуляторов не видно, выделите изображение в окне “View“).

iphoneballimage

Тем, у кого возникли проблемы, советую обратиться к уроку [Hello World]

Шаг 9

Теперь нам нужно связать “UIImageView” с классом “Ball“. Выполнив “Tools->Identity” и не снимая выделения с изображения, выберите “Ball” из раскрывающегося списка “Class” в диалоговом окне “Identity“.

iphoneballidentity

Тем самым мы сообщаем коду, что создаваемый объект “UIImageView” вместо стандартного класса “UIImageView” станет экземпляром класса “Ball” (производного от “UIImageView“).

Шаг 10

Теперь нужно, чтобы код связал переменную “mBall” с данным экземпляром “Ball“. Почему? Потому что теоретически в игру могут вступить несколько таких объектов.

Выполнив “Tools->Connection Inspector“, проделайте перечисленные ниже шаги.
a) Убедитесь, что выбран объект “ImageView” (изображение мяча).
b) Щелкнув, перетащите кружок рядом с “New Referencing Outlet” к надписи “BallViewController” в окне с именем “BallViewController.xib“.
c) В открывшемся небольшом окне должна присутствовать переменная “mBall“. Чтобы привязать к ней изображение, выделите “mBall“.

iphoneballoutlet

Нажмите для увеличения

Шаг 11

Закройте редактор IB, сохранитесь и, вернувшись в Xcode, выполните “Build and Run“. Ошибок быть не должно, а результат предположительно будет выглядеть так, как показано ниже:

iphoneballpreview1

Шаг 12

Отредактируйте “BallViewController.m“. На этот раз зададим скорость “mBall” и настроим таймер с помощью “scheduledTimerWithTimeInterval” для перемещения мяча. Используемое значение 1/30 соответствует 30 футам в секунду. Функция “moveBall” вызывается в каждом интервале.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#import "BallViewController.h"
#import "Ball.h"

@implementation BallViewController
@synthesize mBall;

// Внедряем viewDidLoad для дополнительной настройки после загрузки представления, как правило, из nib-файла.
- (void)viewDidLoad {
[super viewDidLoad];
[NSTimer scheduledTimerWithTimeInterval:1.0/30.0 target:self
selector:@selector(moveBall) userInfo:nil repeats:YES];
[mBall setSpeedX:5 Y:5];
}

-(void)moveBall
{
[mBall move];
}

- (void)dealloc {
[super dealloc];
[mBall dealloc];
}

@end

Запустив приложение, понаблюдайте за скачками и вращением мяча.

Исходный код скачать можно [здесь]

Текст оригинальной статьи на английском языке [здесь]

Уважаемые читатели, данный материал был переведен и подготовлен к публикации проектом LookApp.ru, при публикации на другом сайте ссылка на LookApp.ru обязательна.

1 звезда2 звезд3 звезд4 звезд5 звезд (2 голосов, средний: 5.00 из 5)
Загрузка ... Загрузка ...

2 Pings to “Уроки iPhone SDK: (Часть 1) Перемещение и вращение изображений.”

  1. Уроки iPhone SDK:(Часть 2) Перемещение и вращение изображений | LookApp.ru - обзоры программ и игр для iPhone Says:
    Июнь 6th, 2009 at 12:11

    [...] В продолжении статьи, первую часть которой можно найти здесь. [...]

  2. Уроки iPhone SDK: (Часть 3) Перемещение и вращение изображения. Базовые звуки. | LookApp.ru - обзоры программ и игр для iPhone Says:
    Июнь 9th, 2009 at 10:51

    [...] продолжение темы, рассмотренной в частях 1 и 2, мы будем и дальше работать с созданным ранее [...]


2 Responses to “Уроки iPhone SDK: (Часть 1) Перемещение и вращение изображений.”

  1. 1. KAGEdev Says:
    Сентябрь 17th, 2009 at 04:24

    Это не “веселый мяч” =)
    “Dango” на яп. означает “булка”.
    Это тема из одной популярной аниме Clannad.

  2. 2. Artem Says:
    Сентябрь 17th, 2009 at 23:59

    KAGEdev, сделать то получилось? :)

Оставьте комментарий