LookApp.ru - обзоры программ и игр для iPhone

Dashcode — еще один инструмент Apple iPhone SDK, предназначенный для создания простых приложений. В этом уроке на его примере мы рассмотрим анимацию и интерактивность (подразумевается знакомство с JavaScript и CSS).

В качестве примера возьмем фреймворк игры типа “космические пришельцы”: внизу экрана находится космический корабль, перемещаемый касаниями к экрану.

Создайте новый проект, воспользовавшись шаблоном “Custom“.

Создаем папку “Local Deploy”

Чтобы импортировать изображение корабля, проекту необходимо присвоить статус “Share“, — тогда Dashcode создаст папку размещения. Щелкните по пиктограмме “Share“.

Появится запрос на место сохранения/размещения.

Выберите “Save To Disk…” и укажите нужную папку (желательно, не на рабочем столе).

Импортируем изображения

С помощью кнопки “View” на панели инструментов перейдите в режим “Files“, чтобы увидеть файлы проекта.

Выше представлен мой проект. В папке “Images” есть дополнительный файл “player.png“, который я уже успел импортировать.

Для добавления файлов к проекту щелкните правой кнопкой мыши на папке “Images” и выберите “Add File…“. В данном случае нужно добавить объект, который будет играть роль космического корабля (свой, соответственно, я назвал “player.png“).

Добавление изображений к интерфейсу

Все очень просто: щелкаете на файле из списка “Files” и перетаскиваете его в представление приложения. Если представления не видно, щелкните на слове “content” в дереве документов (на рис. прямо под элементом “Untitled“).

Итак, внизу появился корабль.

Альтернативный способ добавления изображений

Добавить изображения к интерфейсу можно и другим способом: перетащите файл в представление из Finder — и он автоматически добавится к проекту.

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

В качестве фона я добавил еще одно изображение, перетащив его с рабочего стола. Файл автоматически появляется в списке “Files“.

Масштабирование изображений и работа со слоями

Для изменения размеров изображения выделите его в окне представления и воспользуйтесь голубыми манипуляторами по углам. Фон закрывает корабль? Выделив его, выполните “Arrange->Send Backward“.

Чтобы при перемещении изображений интерфейс не менялся, потребуется позиционирование в абсолютной системе отсчета. Командой “Window->Show Inspector” откройте окно инспектора, перейдите на четвертую вкладку (с линейкой) и из раскрывающегося списка “Layout” выберите опцию “Absolute“.

Выделив изображения корабля, в окне инспектора перейдите на первую вкладку “Attributes“, изменив опцию “ID” на “playerShip“. Значимое имя существенно упростит последующие операции с программным кодом.

Ту же операцию проделайте и для фона, присвоив ему имя “background“.

Внедряем события касания

Для перемещения корабля нам нужно фиксировать касания к экрану iPhone. У приложений iPhone теперь есть ряд новых уникальных событий. Подробно на них мы останавливаться не будем: полный список есть на вкладке “Events” (последняя вкладка с синей коробочкой в окне инспектора).

Событие “ontouchmove” активируется при перемещении пальца вдоль экрана. “ontouchstart” вызывается в момент начала касания экрана пользователем. Для перемещения корабля воспользуемся обработчиком “ontouchmove“. Дополнительно обрабатываться будет и “ontouchstart“, поскольку в противном случае вызывается обработчик по умолчанию (масштабирующий изображение на экране).

Обработка событий

Приступаем к самому интересному — к анимации. Наша задача — заставить корабль перемещаться за касанием пользователя. Вопрос в том, где обрабатывать “ontouchmove” — в “playerShip” или в “background“. Ответ зависит от целей. Если нужно, чтобы пользователь, щелкнув по кораблю, перетаскивал его, то обрабатывать событие будет только “playerShip“. В данном случае я хочу, чтобы игрок мог щелкнуть по любой точке экрана, поэтому обрабатывать событие будут и “playerShip“, и “background“.

В окне представления выделите изображение фона, после чего дважды щелкните по “ontouchmove” в списке событий. В качестве имени обработчика укажите функцию “onTouchMoveHandler“.

Выполнив двойной щелчок по “ontouchstart“, в качестве функции выберите “onTouchStartHandler“. Dashcode автоматически создаст обе функции в “main.js” и предупредительно откроет файл прямо под интерфейсом.

Если по какой-либо причине файл автоматически не открылся, воспользуйтесь списком в режиме “Files” (см. раздел “Импортируем изображения“).

Перемещаем корабль

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

Запускайте приложение: корабль должен перемещаться вслед за касающимся экрана пальцем (на симуляторе нажимайте кнопку мыши с последующим перетаскиванием).

Подробнее о событиях касания можно прочесть тут.

Чтобы предотвратить странные эффекты из-за обработчиков явлений по умолчанию, например, всплывающие окна при касании ниже точки фона, в “onTouchStartHandler” добавим “preventDefault()“.

На этом пока все.

P.S. Если корабль не двигается, первым делом проверяйте “main.css“. Убедитесь, что для объекта задано позиционирование по абсолютным, а не относительным координатам, и удалите все поля. Результат должен напоминать представленный ниже:

Все! Удачи, пишите каменты.

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

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

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