50. Puzzle Part1. 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. Хочу продолжение > хочу

Наверняка каждый из нас играл в игру пазл. Эта игра интересна не только детям, но и взрослым. Почему бы нам не научиться делать такую игру на языке ActionScript 3.0, и доставить радость многим детям и их родителям :) . Давайте сделаем это. Закончив игру, вы с легкостью сможете портировать её на мобильные платформы(iOS, Android). В этой статье мы с вами научимся генерировать случайную сетку пазла.

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

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

  • Ровная сторона
  • Выпукалая сторона
  • Вогнутая сторона

Для программного(рандомного) создания элементов пазлов, необходимы векторные мувиклипы с кусочками как показано на рисунке:
puzzle-part1-1

С помощью таких кусочков можно создать любой элемент пазла:
puzzle-part1-2

Скачать кусочки для пазла можно здесь.

Создайте проект FlashBuilder и подключите библиотеку ресурсов SWC, созданную из FLA-файла, указанного выше. В этом FLA-файле должны быть три МувиКлипа с именами классов:

  • part0 – кусок с ровной стороной
  • part1 – кусок с выпуклой стороной
  • part2 – кусок с вогнутой стороной

Начало координат этих MovieClip-ов должны лежать внизу по середине. Там где нижний острый угол. Это нужно что бы можно было без проблем создавать элементы пазла путем поворачивания кусков на 90, 180 градусов

Как создать библиотеку ресурсов SWC и как её пдключить в проект FlashBuilder читайте в статье Embed Part3. Создание библиотеки ресурсов SWC

Мы будем писать полноценное ActionScript-приложение, и поэтому все классы сразу будем создавать в соответствующих пакетах. Пакет – это каталог в котором лежат классы и другие ресурсы приложения. Базовый пакет нашего приложения будет puzzle. Когда вы создаете проект FlashBuilder(или FlashDevelop) у вас автоматически создается запускаемый файл.as. Создайте рядом с этим файлом каталог с именем puzzle и создайте в этом каталоге базовый класс нашего приложения PuzzleApp.as:

А затем поменяйте класс от которого наследуется ваш запускаемый класс, так что бы он наследовался от класса PuzzleApp:

Создание элемента пазла – PuzzleElement.as

В каталоге puzzle создайте каталог view, в этом каталоге у нас будут все визуальные компоненты приложения. В каталоге view создайте каталог grid, здесь будут лежать классы компонента Сетка. В каталоге puzzle/view/grid создайте класс PuzzleElement. Это класс который создает и отображает на экране элемент пазла. Конструктор этого класса будет принимать 4 параметра типа int:

  • left – левая сторона
  • top – верхняя сторона
  • right – правая сторона
  • bot – нижняя сторона

, эти параметры будут характиризовать все 4 стороны нашего элемента. Параметры могут принимать одно из значений:

  • 0 – сторона ровная
  • 1 – сторона выпуклая
  • 2 – сторона вогнутая

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

Теперь откройте класс PuzzleApp и напишите там код создания элемента пазла с помощью класса PuzzleElement:

У вас должен получиться элемент пазла как на указанном скриншоте:
puzzle-part1-3

Создание Сетки пазла – PuzzleGrid.as

В каталоге puzzle/view/grid создайте класс PuzzleGrid.as, который будет хранить сетку элементов пазла. Этот класс в конструкторе принимает два значения – это количество элементов по ширине и высоте:

А теперь подправим наш главный класс PuzzleApp.as что бы увидеть сетку:

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

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

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

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

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

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

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


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




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




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


  1. Zimbis

    Добрый день. Интересная серия уроков. Но непонятен один момент:
    var top:int = topElement == null ? 0 : 3-topElement.bot;
    Не могли бы вы подробней его объяснить, откуда взялось значение 3 и почему мы отнимаем елемент topElement.bot? И такой же вопрос по рандомному получению значений
    right = Math.random() < 0.5 ? 2 : 1;
    Спасибо.

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

      Приветствую! У нас переменная topElement.bot может принимать значения 1 и 2, и нам необходимо сделать так что бы в переменной top было противоположное значение. Т.е. если bot=1, то top=2, а если bot=2, то top=1. Можно написать это с помощью if … а можно написать top=3-bot, и мы получим значение противоположное значению bot (только при условии что bot может принимать значения 1 и 2)

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

      На счет рандома, запись:

      аналогична следующей:

      Т.к. Math.random() возвращает случайное значение от 0 до 1, поэтому вероятность того что значение будет меньше 0.5, равно примерно 50%.

      1. Zimbis

        Большое спасибо за ответы, и еще один вопрос:
        right = Math.round(Math.random()*2)
        аналогично вашей записи или в моей “2″ будет чаще получаться?

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

          В вашем варианте, вы получите в равных пропорциях значения 0, 1, 2. Если написать Math.floor(Math.random()*2), то получите значения 0,1, что бы получить значения 1 и 2, можно написать так:

  2. Vr

    Здравствуйте!
    Не могу понять вот эти записи:
    leftElement = grid[(i - 1) + 'x' + j];

    topElement = grid[i + 'x' + (j - 1)];

    Как догадаться что нужно вписать:’(i – 1) + ‘x’ + j’ и ‘i + ‘x’ + (j – 1)’?

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

      Обратите внимание на строчку:
      grid[i+'x'+j] = newElement;
      В это строке мы сохраняем ссылки на элементы по ключу i+’x'+j, а потом пытаемся получить левый элемент с помощью строки grid[(i-1)+'x'+j], т.е. мы берем элементы с индексами i-1 и j

  3. Мария

    У меня в последнем пункте выдается куча ошибок, начиная с
    import fl.controls.Button;
    import fl.controls.TextInput;

    Не удалось найти import Button
    Не удалось найти import fl

  4. Василий

    Добрый день! При генерации сетки с определёнными значениями(например 5х8) видны линии на стыках частей. Можно ли от этого избавиться?