96. [game] Создаем игровое меню

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/
junior – серия статей для начинающих ActionScript-разработчиков.
Все статьи серии:
http://flashpress.ru/blog/category/junior/

В этом уроке мы с вами создадим флешовое меню, пример которого можно увидеть во флешке (нажмите на открытый пункт меню, что бы открыть следующий):

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

Исходные данные

Для реализации нам понадобятся следующие картинки:
Фоновая картинка:
Фоновая картинка для меню

И картинки четырех состояний кнопок меню:

По умолчанию:
Картинка для кнопки меню
При наведении мыши:
Картинка для кнопки меню
При нажатии мыши:
Картинка для кнопки меню
Кнопка заблокирована:
Картинка для кнопки меню

Создаем файл с графикой

Создайте каталог menu, в нем мы будем создавать наши классы для будущего компонента меню. Создадим класс которые будет отвечать за получение графики, т.е. картинок для фона и для кнопок. У этого класса все методы и свойства будут статичные (static). Прежде чем создать класс MenuGraph, создайтей каталог images внутри каталога menu, и скопируйте туда все необходимые картинки(см. выше). Вот как выглядит класс MenuGraph.as:

Зачем нужен этот класс? Все очень просто, этот класс необходим для того что бы использовать компонент меню в проекте FlashBuilder(FlashDevelop), если же вы используете это меню в проекте Adobe Flash Professional, тогда вам надо будет только слегка поменять этот класс, а классы меню останутся без изменений. Как будет выглядеть класс MenuGraph для проекта Adobe Flash Professional я покажу чуть ниже.

Обратите внимание на одну важную деталь: методы defaultState, overState, downState и disabledState возвращают значения типа DisplayObject, хотя на самом деле можно было бы написать Bitmap, т.к. конструкции new ButtonOut() возвращают именно Bitmap. Использовать DisplayObject необходимо для того что бы в следующей части этого урока, мы смогли быстро заменить класс MenuGraph так, что бы у нас кнопки были анимированые, т.е. у нас будут отображаться не Bitmap-ы а MovieClip-ы с анимацией. Т.к. Bitmap и MovieClip имеют одного предка DisplayObject, можно задать именно этот базовый тип данных.

Посмотрите на строчку:

Что она делает? Ответ прост – возвращает объект типа Bitmap, внутри которого уже лежит объект BitmapData который хранит картинку из файла. Т.к. у нас кнопок может быть много, получается что для каждой кнопки меню создается отдельный экземпляр Bitmap и BitmapData, и как следствие расходуется оперативная память. Конечно же в этом примере расход будет не таким большим что бы об этом беспокоиться, но(!) стоит взять в привычку заботиться об этой проблеме, которая очень часто встает ребром при разработке более сложных игровых компонентов. Как же нам исправить эту проблему? Можно один раз создать экземпляр класса BitmapData и потом его уже раздавать всем экземплярам Bitmap. Если вы плохо представляете чем отличаются классы Bitmap и BitmapData – советую почитать статью Чем отличаются Bitmap и BitmapData?. Вот как будет выглядеть исправленный класс MenuGraph:

Если вы разрабатываете свою игры в редакторе Adobe Flash Profesisonal, вам придется немного переделать класс MenuGraph, что бы можно было использовать картинки заданные в библиотеке Flash IDE. Для этого вам надо задать картинкам в библиотеке соответствующие значения в поле Class в меню Свойства(Properties):

  • menuBackground – фоновая картинка
  • menuButtonOut – картинка по умолчанию
  • menuButtonOver – картинка отображаемая при наведении мыши
  • menuButtonDown – картинка отображаемая при нажатии мыши
  • menuButtonDisabled – картинка отображаемая на заблокированных кнопках

Вот как будет выглядеть класс для проекта Flash Professional:
(Кликните что бы развернуть код)


Закрыть MenuGraph для IDE

Создаем кнопку меню

Теперь создадим кнопку для меню:

Здесь стоит обратить внимание на следующие фрагменты кода: в конструкторе создается stateCont:Sprite(строки 45-46), который является контейнером для состояний, которые будут менять при активных действиях мыши. В строчках 50-52 создаем состояния(объекты класса DisplayObject), эти состояния будут отображаться в зависимости от активности мыши по отношению к этой кнопке. Далее в строчках 55-57 мы запоминаем текущее состояние(defaultState) и отображаем его. В строчках 62-71 создаем текстовое поле для отображение номера(уровня) кнопки меню. После создается состояние которое показывает что кнопка заблокирована, это состояние должно быть поверх всех остальных и поверх текстового поля, поэтому мы его создаем самым последним. Состояние disabledState по умолчанию не видно(строчка 80). И для создания анимации плавного появления и исчезновения состояния disabledState, мы создаем объект tween(строка 85) из библиотеки FPTweenLib, подробнее о библиотеке FPTweenLib читайте в серии статей . В строчках 89-95 создаем объект сенсор, который необходим для прослушки мышиных событий. Конечно мы могли бы слушать события у объекта this, только в этом случае кнопка номер 6 перекрывала бы кнопку 1 (во флешке меню в начале урока). Что бы этого не произошло, мы создаем сенсор в виде овала, который чуть меньше размеров картинки, и вешаем события на этот объект(строки 100-104).

Очень важно здесь понять для чего нужны строки 106-108. Они нужны для того что бы ниже лежащие кнопки не перекрывали верхние своими антенами. Попробуйте поэксперементировать со значениями этих свойств, что бы понять как они влияют на конечный результат. Подробнее про назначение свойств mouseEnabled и mouseChildren, а так же чем они отличаются, читайте в статье.

Т.к. у нас событие клика слушается на объекте sensor, который является дочерним внутри класса MenuButton, поэтому в строке 202 для блокировки кнопок мы используем свойство mouseChildren=false, это свойство сделаем не доступным для мыши все дочерние элементы, в том числе и sensor.

Создаем событие MenuEvent

При срабатывании события клика мыши, в обработчике clickHandler мы создаем собственное событие MenuEvent и передаем в него номер текущей кнопки. Вот как выглядит класс событие MenuEvent:

Данное событие имеет только одну константу SELECT, и это событие срабатывает при клике на кнопку. В конструкторе события мы задаем задаем параметры bubbles и cancelable значениями true (в строке 14). Если вы не знаете как работают собственные события в языке ActionScript, читайте серию статей посвященных работе с событиями, про назначение параметра bubbles читайте в статье Event Part2. Три фазы события ActionScript. useCapture, а про cancelable – здесь Event Part4. Отмена события на полпути. stopPropagation, stopImmediatePropagation.

Основной класс Меню

Вот собственно основной класс компонента, который создает меню:

У этого класса один приватный метод create, который создает кнопки меню. И один публичный метод set level который задает текущий уровень, в этом методе мы блокируем все кнпоки меню, чей индекс меньше чем заданный уровень(level).

Использование компонента MenuView

Для проектов FlashBuilder и Flash IDE, код использования компонента меню будет выглядеть немного по разному. Ниже приведен код для обоих редакторов:

FlashBuilderFlashIDE
Код для редактора Adobe FlashBuilder
Код для редактора Adobe Flash CS Professional

Исходники:

Полезные ссылки:

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 4506 раз

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

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


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




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




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