99. [game] Анимация персонажа

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/
Серия статей на тему использования анимации персонажей в коде ActionScript 3.0
  1. Анимация персонажа
  2. Анимация персонажа. Продолжение
  3. Управление анимацией персонажа с помощью клавиатуры
  4. Управление анимацией персонажа с помощью сенсорного экрана. Создаем мультиплатформенное приложение
  5. Взаимодействия юнитов на игровом поле. GameController и UnitActions
  6. Хочу продолжение > хочу
Update 29.03.2015
По просьбам трудящихся, выкладываю этот пример реализованный в редакторе Flash Professional CS5, скачать можно здесь.
В этом примере НЕ используется загрузка юнита из отдельного swf файла. Юнит берется прямо из библиотеки Flash.

Мы не будем рисовать анимацию в данной статье. Все таки блог посвящен программированию. Поэтому я расскажу вам как можно использовать в играх анимацию персонажа созданную дизайнерами/аниматорами в редакторе Adobe Flash. Я расскажу вам как нужно рисовать анимации(указание аниматорам) и как потом эту анимацию использовать в играх. Конечно есть масса различных способов реализации поставленной задачи, мы не будем здесь сравнивать методы, я просто покажу вам один из вариантов.

Давайте сперва определимся какие анимации должны быть у персонажа. Вот список стандартных анимации для типичной Flash игрушки:

  • Стойка на месте(idle) – персонаж стоит на месте и двигается, пускает пар из ушей, ковыряется в носу…
  • Хотьба(walk) – перемещение, двигает ножками
  • Атака(attack) – персонаж атакует
  • Получение удара(wound) – персонаж получает удар
  • Блокировка(block) – персонаж блокирует удар
  • Умирание(die) – анимация умирание персонажа

Метки анимации

Так вот для того что бы управлять в игре персонажем с таким набором анимаций, необходимо создать MovieClip в котором на Timeline лежат все эти анимации, при чем там где начинается очередная анимация необходимо поставить метку на кадре. Например там где начинается анимация Стойки, необходимо поставить метку idle и т.д. После окончания одной анимации на Timeline, сразу должна начинаться другая анимация, таким образом мы сможем определить начало и конец каждой конкретной анимации (как это сделать в коде – расскажу чуть позже в этой статье). Что бы указать метку(label) на кадре, выделите кадр мышкой и откройте панель Properties(Свойства), выбрав пункт меню Window->Properties. В появившемся окне раскройте вкладку Label, и укажите название метки в поле Name, как показано на скриншоте:
unit-animation-1

Итак, у вас должен получиться MovieClip который содержит анимации(метки) idle, attack, wound, block, walk, и die. Последовательность анимаций не важна. Посмотреть готовый пример с анимациями можно здесь. В этом примере в библиотеке есть MovieClip с именем unit на таймлайне которого лежит первый слой с именем labels, на этом слое нет ничего кроме названия меток анимаций.

Пишем классы для управления анимацией

И так, файл с анимацией у нас готов, как теперь это использовать в коде? Задайте созданному клипу имя класс, и загрузите swf в свое приложение. У объекта MovieClip есть замечательное свойство currentLabels, содержащее объекты класса FrameLabel, эти объекты имеют два свойства:

  1. name:String – имя метки
  2. frame:int – номер кадра, где лежит метка

Для работы с анимациями нам этого не достаточно, т.к. надо знать еще и номер кадра, где заканчивается анимация. Поэтому мы для начала создадим класс AnimationData, который будет хранить название метки и номера кадров начала/конца. Создайте каталог unit, мы будем создавать в этом каталоге все наши классы для работы с анимациями. В каталоге unit создайте класс AnimationData:

Вот как будет выглядеть класс UnitView для загрузки и отображения анимации:

Ну и собственно главный класс приложения, для отображения анимации:

У вас должна получиться вот такая вот флешка:

Здесь должна быть флешка. Установите Flash Player

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

Update 29.03.2015
По просьбам трудящихся, выкладываю этот пример реализованный в редакторе Flash Professional CS5, скачать можно здесь.
В этом примере НЕ используется загрузка юнита из отдельного swf файла. Юнит берется прямо из библиотеки Flash.
Серия статей на тему использования анимации персонажей в коде ActionScript 3.0
  1. Анимация персонажа
  2. Анимация персонажа. Продолжение
  3. Управление анимацией персонажа с помощью клавиатуры
  4. Управление анимацией персонажа с помощью сенсорного экрана. Создаем мультиплатформенное приложение
  5. Взаимодействия юнитов на игровом поле. GameController и UnitActions
  6. Хочу продолжение > хочу
Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

Да прeбудет с вами Flash.
Serious Sam

Эту статью прочитали 6229 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. Уведомление: Анимация персонажа. Продолжение | FlashPress.ru - Создание игр на ActionScript 3.0

  2. Дмитрий

    Объясните пожалуйста зачем этот код в конструкторе AnimationData
    this.endFrame = startFrame;
    И зачем нам вообще знать окончание кадра, нельзя ли просто в конце анимации в последнем кадре прописывать stop();

    1. Serious Sam Автор записи

      Метка конца анимации нужна для того чтобы получить событие, когда анимация завершится. Если вы просто вставите код stop(); или gotoAndPlay(‘idle’); в не сможете в коде узнать когда анимация завершилась.