Привет. В этой статье я хочу рассказать, как я буду воплощать на
Флэше свою версию классики из мира головоломок – «Пятнашки».
Хотя это будет даже не одна статья, а целых три. В первой мы
с помощью Adobe Flash
создадим нехитрую графику, во второй статье мы напишем код для нашей игры, ну а
в третьей статье попробуем портировать нашу мегаголоволомку на Android.
Итак, начнём с графики.
Первым делом создадим концепт, чтобы наглядно представить, как
будет выглядеть будущая игра. После чего «нарежем» наш концепт на отдельные
элементы, которые в дальнейшем будем использовать при написании кода. Стиль
графики я подсмотрел в моей любимой игре «2048».
Открыв наш любимый Адоуб Флэш (я пользуюсь версией ЦэЭс
нумер 6), мы создадим новый документ размером 288 х 400 пикселей, версия ActionScript 3.0.
Начнём с фона. Создадим прямоугольник размером 288 х 400,
без рамки, цвет заливки #CECECE, и расположим его на монтажном столе. Затем
преобразуем наш прямоугольник в символ (выделить и нажать F8), задав ему следующие параметры:
·
Имя: Fon_mc
·
Тип:
Фрагмент ролика
·
Базовый класс: flash.display.Shape
Переходим к игровым плиткам. Создадим на временной шкале
новый слой и нарисуем прямоугольник с закруглёнными концами. Размер 64 х 64 px, цвет заливки - #FFFFE8,
рамки - нет, радиус закругления углов – 10 px.
Затем добавим на плитку текстовое поле, например с цифрой «1». Размер поля должен быть таким, чтобы в него помещались две цифры. Выравнивание текста необходимо указать "по центру". В свойствах зададим экземпляру этого поля имя «Number_field». В будущем будем управлять этим полем
программными методами.
Затем выделяем плитку и текстовое поле, и преобразуем в
символ. Имя зададим как «Tile_mc», базовый класс ActionScript - flash.display.MovieClip.
Теперь немного доработаем нашу плитку. Дважды щёлкнем на ней, чтобы приступить к
редактированию символа Tile_mc. На временной шкале
клавишей F6 добавим второй
кадр, который будет копией первого кадра. На втором кадре удалим с плитки текстовое
поле, а цвет заливки плитки изменим на #CCFFFF
(светло голубой).
В итоге у нас получится, что в первом кадре отображаться сама
плитка и её номер, а на втором кадре «пустое пространство» или «отсутствие плитки».
Выходим из режима редактирование мувиклипа.
Теперь перейдём к интерфейсу. Он будет состоять из кнопки «Рестарт»
и счетчика ходов. Сделаем их в одном стиле.
Нарисуем кнопку «Рестарт» по аналогии с плиткой: создадим
прямоугольник с закруглёнными углами (10 рх) размером 50 х 50 рх, цвет заливки #333333.
На прямоугольнике я символически изобразил «рестарт». Затем преобразуем всё это
дело в символ. Имя «Restart_btn», тип «Кнопка», базовый класс «flash.display.SimpleButton».
Далее создадим счетчик ходов. Нарисуем прямоугольник как в
кнопке «Рестарт». Затем наложим на него
два текстовых поля, как на скриншоте. В верхнем поле напишем «moves». В нижнем поле поставим «0»,
зададим в свойствах имя «Count_field» и сделаем выравнивание
текста по центру.
Теперь преобразуем
весь наш счетчик в символ. Имя «Count_mc», тип «Фрагмент ролика», базовый
класс «flash.display.Sprite».
В итоге в библиотеке символов у нас должно быть четыре
символа.
После того как все графические элементы созданы, мы можем
собрать из них макет игры, чтобы увидеть как это будет выглядеть. Для
наглядности, я задал всем плиткам числовые значения и нарисовал отдельное «пустое»
поле.
Последним шагом будет экспорт графических элементов в
библиотеку SWC. Нажимаем меню Файл -> Параметры
публикации. В диалоговом окне, в списке
слева ставим галочку только на строчке SWC. В строке «Выходной файл» выбираем путь, куда сохранить
библиотеку. Нажимаем кнопку «Опубликовать».
Всё графика готова и упакована в библиотеку. Можно
приступать к написанию кода. Но об этом в следующей статье. До скорых встреч!
Комментариев нет:
Отправить комментарий