51. Puzzle Part2. Flash-игра Пазл. Разрезаем картинку на кусочки

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/
Создаем flash-игру Пазл(Puzzle-game):
  1. Puzzle Part1. Генерируем сетку пазла
  2. Puzzle Part2. Разрезаем картинку на кусочки
  3. Puzzle Part3. Прикручиваем игровую логику
  4. Puzzle Part4. Создаем игровое меню
  5. Puzzle Part5. Добавляем уровни сложности (скоро)
  6. Хочу продолжение > хочу

В предыдущей статье Puzzle Part1. Flash-игра Пазл. Генерируем сетку пазла, мы с вами создали следующие классы:

  • PuzzleApp.as – главный класс приложения
  • PuzzleElement.as – элемент пазла
  • PuzzleGrid.as – сетка пазла

В этой статье мы научимся с помощью сетки PuzzleGrid резать исходную картинку на куски пазла. Для этого над надо загрузить в приложение картинку. В прошлой статье мы использовали библиотеку ресурсов SWC что бы использовать в приложении куски элемента пазла. Для простоты добавим в эту же SWC библиотеку картинку и зададим ей имя класcа image. Скачать FLA-файл библиотеки можно здесь.

Начнем с класса PuzzleGrid. Напишем функцию которая получает извне картинку(BitmapData), режет её на кусочки и раздает всем элементам пазла:

В методе set Image класса PuzzleGrid в самом начале мы вычисляем процент отношений длин и высот картинки и сетки: xscale и yscale(строки 65-66). Т.к. у нас элементы пазла векторные, мы можем изменять их размер как угодно, поэтому нам надо подогнать размер сетки под размер полученной картинки. Далее мы проходим циклом по всем элементам пазла и в первую очередь применяем проценты xscale и yscale к элементам пазла: методе UpdateScale(строка 78). Затем создаем пустой BitmapData по размеру совпадающему с размером элемента пазла(строка 81). Далее определяем координаты и размеры прямоугольника для отрезания куска из исходной картинки(строки 83-87). Для определения координат, откуда начать отрезание кусочка пазла, мы используем текущие координаты элемента пазла и статический(static) параметр PuzzleElement.Convexsity. PuzzleElement.Convexsity – это размер выпуклой части элемента пазла, вычиляется он внутри класса PuzzleElement. Поговорим о нем позже. После определения прямоугольника, копируем из исходной картинки кусок в наш созданный пустой приямоугольник, используя метод copyPixels(строка 89).

Здесь очень важно использовать именно copyPixels, а не метод draw, который делает тоже самое, но гораздо медленее(!!!).

Ну и вконце передаем созданный кусок элементу пазла используя метод set Image (строка 91).

В данный момент ваш билдер должен ругаться ошибкой, о том что функций UpdateScale и set Image у класса PuzzleElement нет. Давайте напишем эти методы:

Что же нового мы написали в этом классе. Ну во первых мы создали статический(static) параметр Convexity(строки 31-38 и 49-50) – это размер выпуклой части элемента пазла. Вычисляется он в методе getSize, т.е. там же где мы в прошлый раз вычисляли длину и высоту элемента пазла. Для вычисления размера выпуклой части элемента пазла в методе getSize мы создали два элемента пазла, квадратный(все грани ровные) и с одной выпуклой стороной(справа). Далее мы считаем разницу в ширине этих элементов, это и будет Convexisty.

Далее мы добавили переменную bitmap(строка 63), это будет котейнер для полученного куска картинки. После создания переменной bitmap(строка 80), мы сдвинули её влево и вверх на величину Convexity(строки 85-86). Это необходимо для того что бы правильно отобразить элемент пазла с выпуклостями слева и сверху (напоминаю что в классе PuzzleGrid в строчках 84 и 85 мы текущиие координаты элемента пазла уменьшили на величину Convexity, и теперь что бы компенсировать это уменьшение в отображении, необходимо сдвинуть bitmap влево и вверх на эту же велечину) .

В конце конструктора(строки 95-97) мы создали два фильтра: Белая обводка и Тень. Что бы наши куски пазла лучше смотрелись на фоне друг друга.

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

Метод set Image отображает полученный кусок картинки(строка 142) и применяет маску к этой картинке(строка 144). Маска в данном случаем – это созданный нами элемент пазла в виде спрайта cont.

Вот как должен выглядеть главный класс нашего приложения PuzzleApp.as:

Здесь все максимально просто, создаем bitmapData из картинки которая у нас должна лежать в библиотеке ресурсов под именем image(строка 34). Слушаем клик на кнопке(строка 28), и после каждого клика – создаем новую сетку пазла(строки 50-55), предварительно удалив старую сетку, если она есть (строка 47).

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

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

Скачать исходники можно здесь.

Продолжение урока читайте здесь Puzzle Part3. Прикручиваем игровую логику
Создаем flash-игру Пазл(Puzzle-game):
  1. Puzzle Part1. Генерируем сетку пазла
  2. Puzzle Part2. Разрезаем картинку на кусочки
  3. Puzzle Part3. Прикручиваем игровую логику
  4. Puzzle Part4. Создаем игровое меню
  5. Puzzle Part5. Добавляем уровни сложности (скоро)
  6. Хочу продолжение > хочу

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

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

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


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




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




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


  1. Мария

    В первом пункте выходит ошибка
    Тип не найден или не является константой времени компиляции: BitmapData

      1. Мария

        Точно, спасибо) вышло ещё 4 ошибки в 1-ом пункте:
        строка 78, ошибка 1061: Обращение к возможно неопределенному методу UpdateScale через ссылку статического типа puzzle.view.grid:PuzzleElement .
        строка 84, ошибка 1119: Обращение возможно неопределенного свойства Convexity через ссылку со статическим типом Class .
        и ещё две ошибки 1119, строки 85 и 91.