Как сделать флеш-игру: 4 шага (с картинками)

Оглавление:

Как сделать флеш-игру: 4 шага (с картинками)
Как сделать флеш-игру: 4 шага (с картинками)
Anonim

Flash - популярный формат для браузерных видеоигр, который можно увидеть на таких сайтах, как Newgrounds и Kongregate. Хотя формат Flash постепенно становится все менее используемым в связи с ростом числа мобильных приложений, многие качественные игры все еще создаются с его использованием. Flash использует ActionScript, простой в освоении язык, который дает вам контроль над объектами на экране. Из этой статьи на wikiHow вы узнаете, как создать простую флеш-игру.

Шаги

Часть 1 из 3: Запуск процесса

381698 1
381698 1

Шаг 1. Создайте свою игру

Прежде чем вы начнете кодировать, это поможет получить общее представление о том, что вы хотите от игры. Flash лучше всего подходит для простых игр, поэтому сосредоточьтесь на создании игры, в которой игроку нужно беспокоиться только о нескольких механиках. Прежде чем приступить к созданию прототипа, постарайтесь иметь в виду базовый жанр и некоторую механику. См. Это руководство для получения дополнительных сведений о этапах планирования разработки видеоигр. Общие флеш-игры включают в себя:

  • Бесконечные бегуны: эти игры автоматически перемещают персонажа, и игрок несет ответственность за перепрыгивание через препятствия или иное взаимодействие с игрой. Когда дело доходит до элементов управления, у игрока обычно есть только один или два варианта.
  • Драки: обычно это боковая прокрутка, в которой игроку нужно побеждать врагов, чтобы продвигаться вперед. У персонажа игрока часто есть несколько ходов, которые он может выполнить, чтобы победить врагов.
  • Головоломки: в этих играх игроку предлагается разгадывать головоломки, чтобы пройти каждый уровень. Они могут варьироваться от стиля Match-3, такого как Bejeweled, до более сложных головоломок, которые обычно встречаются в приключенческих играх.
  • Ролевые игры: эти игры сосредоточены на развитии и прогрессе персонажа, и в них игрок перемещается через несколько сред с различными типами врагов. Боевая механика сильно различается от RPG к RPG, но многие из них пошаговые. Ролевые игры может быть значительно сложнее кодировать, чем простую игру в жанре экшн.
381698 2
381698 2

Шаг 2. Узнайте, чем отличается Flash

Flash лучше всего подходит для 2D-игр. Во Flash можно создавать 3D-игры, но это очень продвинуто и требует значительных знаний языка. Почти каждая успешная флеш-игра была двухмерной.

Flash-игры также лучше всего подходят для быстрых сессий. Это связано с тем, что большинство игроков в Flash-игры играют, когда у них есть немного свободного времени, например, в перерывах, то есть игровые сессии обычно составляют 15 минут или меньше

381698 3
381698 3

Шаг 3. Ознакомьтесь с языком ActionScript3 (AS3)

Флэш-игры программируются в AS3, и вам необходимо иметь некоторое базовое представление о том, как это работает, чтобы успешно создать игру. Вы можете создать простую игру с элементарным пониманием того, как кодировать в AS3.

Есть несколько книг по ActionScript, доступных на Amazon и в других магазинах, а также большое количество учебных пособий и примеров в Интернете

381698 4
381698 4

Шаг 4. Загрузите Flash Professional

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

Flash Professional - единственная программа, которая вам понадобится для создания игр

Часть 2 из 3: написание базовой игры

381698 5
381698 5

Шаг 1. Изучите основные строительные блоки кода AS3

Когда вы создаете базовую игру, вы будете использовать несколько различных структур кода. Любой код AS3 состоит из трех основных частей:

  • Переменные - так хранятся ваши данные. Данные могут быть числами, словами (строками), объектами и т. Д. Переменные определяются кодом var и должны состоять из одного слова.

    var playerHealth: Number = 100; // «var» означает, что вы определяете переменную. // «playerHealth» - это имя переменной. // «Число» - это тип данных. // «100» - это значение, присвоенное переменной. // Все строки ActionScript заканчиваются на ";"

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

    addEventListener (MouseEvent. CLICK, swingSword); // «addEventListener ()» определяет обработчик события. // «MouseEvent» - это категория ввода, которая прослушивается. // «. CLICK» - это конкретное событие в категории MouseEvent. // "swingSword" - это функция, которая вызывается при возникновении события.

  • Функция - фрагменты кода, назначенные ключевому слову, которые могут быть вызваны позже. Функции обрабатывают основную часть программирования вашей игры, сложные игры могут иметь сотни функций, тогда как более простые игры могут иметь лишь несколько. Они могут располагаться в любом порядке, поскольку работают только тогда, когда к ним обращаются.

    функция swingSword (e: MouseEvent): void; {// Здесь идет ваш код} // «функция» - это ключевое слово, которое появляется в начале каждой функции. // "swingSword" - это имя функции. // «e: MouseEvent» - это добавленный параметр, показывающий, что функция // вызывается из прослушивателя событий. // ": void" - это значение, возвращаемое функцией. Если значение // не возвращается, используйте: void.

381698 6
381698 6

Шаг 2. Создайте объект

ActionScript используется для воздействия на объекты во Flash. Чтобы создать игру, вам нужно будет создать объекты, с которыми игрок будет взаимодействовать. В зависимости от руководств, которые вы читаете, объекты могут называться спрайтами, актерами или фрагментами роликов. В этой простой игре вы создадите прямоугольник.

  • Откройте Flash Professional, если вы еще этого не сделали. Создайте новый проект ActionScript 3.
  • Щелкните инструмент рисования «Прямоугольник» на панели «Инструменты». Эта панель может находиться в разных местах в зависимости от конфигурации Flash Professional. Нарисуйте прямоугольник в окне сцены.
  • Выделите прямоугольник с помощью инструмента «Выделение».
381698 7
381698 7

Шаг 3. Назначьте объекту свойства

Выделив только что созданный прямоугольник, откройте меню «Изменить» и выберите «Преобразовать в символ». Вы также можете нажать F8 как ярлык. В окне «Преобразовать в символ» дайте объекту легко узнаваемое имя, например «враг».

  • Найдите окно "Свойства". При наведении курсора в верхней части окна появляется пустое текстовое поле с надписью «Имя экземпляра». Назовите его так же, как вы преобразовали его в символ («враг»). Это создает уникальное имя, с которым можно взаимодействовать через код AS3.
  • Каждый «экземпляр» - это отдельный объект, на который может воздействовать код. Вы можете скопировать уже созданный экземпляр несколько раз, щелкнув вкладку «Библиотека» и перетащив экземпляр на сцену. Каждый раз, когда вы добавляете объект, его имя будет изменяться, чтобы указать, что это отдельный объект («враг», «враг1», «враг2» и т. Д.).
  • Когда вы ссылаетесь на объекты в коде, вам просто нужно использовать имя экземпляра, в данном случае «враг».
381698 8
381698 8

Шаг 4. Узнайте, как изменить свойства экземпляра

Создав экземпляр, вы можете настроить его свойства через AS3. Это может позволить вам перемещать объект по экрану, изменять его размер и т. Д. Вы можете настроить свойства, введя экземпляр, за которым следует точка ".", За которым следует свойство, за которым следует значение:

  • Враг.x = 150; Это влияет на положение вражеского объекта по оси X.
  • Враг.y = 150; Это влияет на положение вражеского объекта по оси Y. Ось Y отсчитывается от верхней части сцены.
  • Враг.rotation = 45; Поворачивает вражеский объект на 45 ° по часовой стрелке.
  • Враг.scaleX = 3; Увеличивает ширину вражеского объекта в 3 раза. Число (-) переворачивает объект.
  • Враг.scaleY = 0,5; Сдавливает объект до половины его высоты.
381698 9
381698 9

Шаг 5. Изучите команду trace ()

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

381698 10
381698 10

Шаг 6. Создайте простую игру, используя приведенную выше информацию

Теперь, когда у вас есть базовое представление об основных функциях, вы можете создать игру, в которой противник меняет размер каждый раз, когда вы нажимаете на него, пока у него не кончится здоровье.

вар врагаHP: Number = 100; // устанавливает HP (здоровье) врага на 100 в начале. var playerAttack: Number = 10; // устанавливает силу атаки игроков при нажатии. Враг.addEventListener (MouseEvent. CLICK, attackEnemy); // Добавляя эту функцию непосредственно к вражескому объекту, // функция выполняется только при щелчке // по самому объекту, а не при щелчке в любом месте экрана. setEnemyLocation (); // Это вызывает следующую функцию для размещения // врага на экране. Это происходит при запуске игры. функция setEnemyLocation (): void {противник.x = 200; // перемещает врага на 200 пикселей от левого края экрана врага.y = 150; // перемещает врага вниз на 150 пикселей от верхнего края экрана врага.rotation = 45; // поворачивает врага на 45 градусов по часовой стрелке trace ("x-value врага", "own.x", "y-value" для врага ", own.y); // Отображает текущую позицию врага для отладки} function attackEnemy (e: MouseEvent): void // Это создает функцию атаки, когда врага щелкают по врагу. // Вычитает значение атаки из значения HP, // в результате получается новое значение HP. вражеский.scaleX = вражескийHP / 100; // Изменяет ширину в зависимости от нового значения HP. // Делится на 100, чтобы превратить его в десятичную дробь. вражеский.scaleY = вражескийHP / 100; // Изменяет высоту на основе новой трассировки значения HP («У врага есть», enemyHP, «HP осталось»); // Выводим сколько здоровья осталось у врага}

381698 11
381698 11

Шаг 7. Попробуйте

Создав код, вы можете протестировать свою новую игру. Щелкните меню «Управление» и выберите «Тестировать ролик». Ваша игра начнется, и вы можете щелкнуть объект противника, чтобы изменить его размер. Ваши результаты трассировки будут отображаться в окне вывода.

Часть 3 из 3: Изучение продвинутых методов

381698 12
381698 12

Шаг 1. Узнайте, как работают пакеты

ActionScript основан на Java и использует очень похожую систему пакетов. Пакеты позволяют хранить переменные, константы, функции и другую информацию в отдельных файлах, а затем импортировать эти файлы в вашу программу. Они особенно полезны, если вы хотите использовать разработанный кем-то другой пакет, который упростит создание вашей игры.

См. Это руководство для получения дополнительных сведений о том, как пакеты работают в Java

381698 13
381698 13

Шаг 2. Создайте папки проекта

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

  • Создайте базовую папку для вашего проекта. В базовой папке у вас должна быть папка «img» для всех ваших художественных ресурсов, папка «snd» для всех ваших звуковых ресурсов и папка «src» для всех ваших игровых пакетов и кода.
  • Создайте папку «Game» в папке «src» для хранения файла констант.
  • В этой конкретной структуре нет необходимости, но это простой способ организовать вашу работу и материалы, особенно для более крупных проектов. Для простой игры, описанной выше, вам не нужно создавать какие-либо каталоги.
381698 14
381698 14

Шаг 3. Добавьте звук в вашу игру

Игра без звука и музыки быстро наскучит игроку. Вы можете добавить звук к объектам во Flash с помощью инструмента «Слои». См. Это руководство для получения более подробной информации.

381698 15
381698 15

Шаг 4. Создайте файл констант

Если в вашей игре много значений, которые будут оставаться неизменными на протяжении всей игры, вы можете создать файл констант, чтобы хранить их все в одном месте, чтобы вы могли легко их вызывать. Константы могут включать такие значения, как гравитация, скорость игрока и любые другие значения, которые могут потребоваться повторно.

  • Если вы создаете файл констант, его нужно будет поместить в папку в вашем проекте, а затем импортировать как пакет. Например, предположим, что вы создали файл Constants.as и поместили его в каталог игры. Чтобы импортировать его, вы должны использовать следующий код:

    package {import Game. *; }

381698 16
381698 16

Шаг 5. Посмотрите на чужие игры

Хотя многие разработчики не раскрывают код своих игр, существует множество руководств по проектам и других открытых проектов, которые позволят вам увидеть код и то, как он взаимодействует с игровыми объектами. Это отличный способ изучить некоторые продвинутые приемы, которые помогут вашей игре выделиться.

Рекомендуемые: