Как делать онлайн-игры (с картинками)

Оглавление:

Как делать онлайн-игры (с картинками)
Как делать онлайн-игры (с картинками)

Видео: Как делать онлайн-игры (с картинками)

Видео: Как делать онлайн-игры (с картинками)
Видео: Word. Вкладка "Вставка" 2024, Май
Anonim

Вы когда-нибудь играли в онлайн-игру и думали: «Хотел бы я сделать одну из них, у меня есть несколько отличных идей»? В прошлом необходимо было научиться программировать на ActionScript 3, языке, который поддерживает Flash. Однако благодаря некоторым программам для создания игр опыт программирования остался в прошлом. Вы можете создавать веселые, глубокие игры, манипулируя объектами и логикой, не касаясь ни строчки кода.

Шаги

Часть 1 из 4: Разработка игры

Сделайте онлайн-игры Шаг 1
Сделайте онлайн-игры Шаг 1

Шаг 1. Напишите основное описание

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

См. Это руководство для получения более подробной информации о написании документа по игровому дизайну

Сделайте онлайн-игры Шаг 2
Сделайте онлайн-игры Шаг 2

Шаг 2. Нарисуйте эскизы

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

Сделайте онлайн-игры Шаг 3
Сделайте онлайн-игры Шаг 3

Шаг 3. Выберите метод создания вашей игры

Традиционно для создания Flash-игр вам нужно было научиться программировать на ActionScript 3. Хотя вы все еще можете это сделать, существуют доступные программы, которые могут значительно упростить изучение создания игр и не требуют опыта программирования. Вот некоторые из самых популярных вариантов создания игр:

  • Stencyl - это более новый инструмент, который позволяет создавать игры с использованием объектов и логических скриптов. Затем эти игры можно преобразовать во Flash-проекты и загрузить на любой веб-сайт, поддерживающий Flash-игры.
  • Construct 2 - По мере того, как Flash становится старше, его начали заменять другими средствами создания игр. Один из новейших способов создания онлайн-игры - использование HTML5. Обычно для этого требуется много знаний в области программирования, но Construct 2 позволяет создавать игры с использованием объектов и сценариев, как и Stencyl.
  • Flash Builder - это традиционный метод создания Flash-игр. Для этого требуется изрядное количество знаний ActionScript, но это один из самых простых языков для изучения основ. Flash Builder стоит денег, но вы можете использовать программу FlashDevelop с открытым исходным кодом, чтобы получить большую часть тех же функций.

Часть 2 из 4: Использование Stencyl

Сделайте онлайн-игры Шаг 4
Сделайте онлайн-игры Шаг 4

Шаг 1. Загрузите и установите Stencyl

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

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

Сделайте онлайн-игры Шаг 5
Сделайте онлайн-игры Шаг 5

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

Когда вы запустите Stencyl, вам будет показан список ваших игр. В списке будет несколько примеров игр, на которые вы можете посмотреть, как они работают. Чтобы начать работу над собственной игрой, щелкните поле с пунктирной линией с надписью «Щелкните здесь, чтобы создать новую игру».

Сделайте онлайн-игры Шаг 6
Сделайте онлайн-игры Шаг 6

Шаг 3. Выберите комплект

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

Вы можете скачать наборы, созданные другими пользователями, в Интернете

Сделайте онлайн-игры Шаг 7
Сделайте онлайн-игры Шаг 7

Шаг 4. Введите информацию об игре

Прежде чем вы начнете создавать свою игру, вам нужно будет ввести несколько фрагментов информации.

  • Имя - это название вашей игры. Позже вы можете изменить это на все, что захотите.
  • Размер экрана - это размер экрана вашей игры, и он очень важен, так как он влияет на используемую вами графику. Поскольку люди, скорее всего, будут играть в вашу игру в своем веб-браузере, размер экрана не обязательно должен быть очень большим. Попробуйте Ширина: 640 пикселей, Высота: 480 пикселей. Это хороший размер для начала.
Сделайте онлайн-игры Шаг 8
Сделайте онлайн-игры Шаг 8

Шаг 5. Ознакомьтесь с макетом

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

  • Сцены - это главное окно панели инструментов, в котором отображается сама игра и все ресурсы. Ваша игра будет представлять собой набор сцен.
  • Ресурсы - это список всех объектов и активов в вашей игре. он включает актеров, фоны, шрифты, сцены, логику, звуки и наборы плиток. Ресурсы организованы в виде дерева в левой части экрана.
  • Настройки - параметры «Игра» и «Настройки» позволяют настроить работу механики игры, включая элементы управления, гравитацию, столкновения, загрузочные экраны и многое другое.
Сделайте онлайн-игры Шаг 9
Сделайте онлайн-игры Шаг 9

Шаг 6. Настройте актера

Актер - это любой объект, который движется или с которым можно взаимодействовать в игре (игрок, враг, двери и т. Д.). Вам нужно будет создать актера для каждого объекта в вашей игре. Чтобы создать актера, выберите опцию «Типы актеров» в меню «Ресурсы». Выберите нужного актера из списка (список определяется выбранной вами формой).

  • Назначьте актера в группу (Игрок, Враг). Это поможет определить коллизионные свойства актера. Выберите своего актера, чтобы открыть редактор актеров. Щелкните вкладку «Свойства», а затем выберите соответствующую группу в раскрывающемся меню.
  • Добавьте модели поведения (прыжки, топание, ходьба). Поведение - это то, что позволяет вашему актеру выполнять действия. Перейдите на вкладку «Поведение», а затем нажмите кнопку «+ Добавить поведение» в нижнем левом углу. Выберите поведение (например, «Ходьба») из списка, а затем нажмите «Выбрать».
  • Установите элементы управления. Если вы создаете персонажа игрока, вы, вероятно, захотите разрешить игроку его перемещать. Когда вы добавите поведение «Ходьба», вы попадете на экран атрибутов «Ходьба». Вы можете использовать раскрывающиеся меню, чтобы выбрать, какие клавиши будут перемещать актера влево и вправо. Вы также можете назначить анимацию, если комплект, который вы используете, содержит ее.
  • Вы можете добавить несколько вариантов поведения, чтобы настроить действия актера.
Сделайте онлайн-игры Шаг 10
Сделайте онлайн-игры Шаг 10

Шаг 7. Создайте сцену

Сцена - это то, что игрок видит во время игры. Это фон, а также любые видимые объекты и действующие лица. Чтобы создать новую сцену, выберите параметр «Сцены» в дереве ресурсов, а затем щелкните пунктирную рамку. Дайте вашей новой сцене имя, чтобы продолжить.

  • Фон - размер вашей сцены будет изменен автоматически, поэтому вам не нужно об этом сейчас беспокоиться. Вы можете использовать цвет в качестве фона, поверх которого будут размещены плитки. Вы можете выбрать сплошной цвет или градиент. По завершении нажмите «Создать». Это откроет конструктор сцен.
  • Размещение плиток - набор плиток, входящий в ваш набор, будет загружен в правой части окна. Щелкните инструмент «Карандаш» в левом меню, а затем щелкните плитку, которую хотите использовать. Затем вы можете разместить плитку на своей сцене. Щелкните и перетащите мышью, чтобы разместить несколько плиток.
  • Размещение актеров. Щелкните вкладку «Актеры» над плиткой, чтобы переключиться на доступных актеров. Вы должны были создать их ранее, чтобы они появились в этом списке. Щелкните актера, которого хотите разместить, а затем щелкните в том месте сцены, где он должен появиться. Если вы удерживаете ⇧ Shift, актер будет привязан к сетке.
  • Добавление силы тяжести - Щелкните вкладку «Физика» в верхней части окна, а затем введите значение в поле «Гравитация (по вертикали)». Ввод 85 будет имитировать реальную гравитацию.
Сделайте онлайн-игры Шаг 11
Сделайте онлайн-игры Шаг 11

Шаг 8. Протестируйте игру

После того, как вы создали сцену и разместили несколько актеров, вы можете протестировать игру. Нажмите кнопку «Проверить игру» вверху экрана, чтобы поиграть в то, что у вас есть. Вы можете использовать ключи, которые вы установили при создании своих актеров, чтобы управлять своим персонажем.

Найдите любые аспекты, которые не работают, и попытайтесь их исправить. Например, правильно ли ведут себя враги? Сможете ли вы победить своих врагов? Есть ли недостижимые платформы или пропасти, которые нельзя преодолеть? Вернитесь в соответствующую область редактора игры, чтобы исправить любую обнаруженную проблему. Это может занять некоторое время, но конечный результат будет намного более увлекательной и игровой

Сделайте онлайн-игры Шаг 12
Сделайте онлайн-игры Шаг 12

Шаг 9. Добавьте еще

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

Сделайте онлайн-игры Шаг 13
Сделайте онлайн-игры Шаг 13

Шаг 10. Сайт Заблокируйте игру

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

  • Откройте «Настройки игры» в дереве «Ресурсы». Выберите раздел «Загрузчик». Введите сайты, которые вы хотите разрешить, в поле «Site Lock», разделив их запятой без пробела. Например, newgrounds.com, kongregate.com.
  • Находясь на этом экране, введите свою домашнюю страницу в поле «Ваша домашняя страница», если она у вас есть. Это позволит игрокам, которые играют в вашу игру, ссылаться на ваш сайт.
Сделайте онлайн-игры Шаг 14
Сделайте онлайн-игры Шаг 14

Шаг 11. Экспортируйте игру как Flash

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

Сделайте онлайн-игры Шаг 15
Сделайте онлайн-игры Шаг 15

Шаг 12. Опубликуйте игру

Получив файл Flash (. SWF), вы можете загрузить его на выбранный вами хост. В Интернете есть множество сайтов, на которых размещены Flash-игры, и некоторые из них могут даже позволить вам зарабатывать деньги на доходах от рекламы с вашей игрой. Вы также можете загрузить свою игру на свой собственный веб-сайт, но вам нужно убедиться, что у вас есть пропускная способность для обслуживания игроков, если игра станет популярной.

  • См. Это руководство для загрузки игры на свой веб-сайт.
  • Если вы хотите загрузить свою игру на такой сайт, как Newgrounds или Kongregate, вам нужно будет создать учетную запись, а затем пройти процесс загрузки для сайта. Условия и положения будут отличаться от сайта к сайту.
  • Если вы хотите опубликовать свою игру в Stencyl Arcade, вы можете сделать это из программы Stencyl. Нажмите Публиковать выберите Stencyl, а затем нажмите Arcade. Игра будет загружена автоматически, поэтому убедитесь, что вам нравится название, прежде чем делать это. Stencyl Arcade имеет ограничение на размер файла 8 МБ.

Часть 3 из 4: Использование Construct 2

Сделайте онлайн-игры Шаг 16
Сделайте онлайн-игры Шаг 16

Шаг 1. Загрузите и установите Construct 2

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

Construct 2 бесплатен, хотя некоторые функции будут ограничены, если вы не обновитесь. Бесплатная версия не может публиковаться ни на каких других платформах, кроме HTML5

Сделайте онлайн-игры Шаг 17
Сделайте онлайн-игры Шаг 17

Шаг 2. Создайте новый проект

Когда вы впервые запустите Construct 2, вас встретит приветственное меню. Щелкните ссылку «Новый проект», чтобы начать новую игру. Есть также несколько включенных примеров, которые вы можете использовать, чтобы увидеть, как создаются базовые игры.

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

Сделайте онлайн-игры Шаг 18
Сделайте онлайн-игры Шаг 18

Шаг 3. Настройте параметры вашего проекта

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

Сделайте онлайн-игры Шаг 19
Сделайте онлайн-игры Шаг 19

Шаг 4. Вставляем фон

Дважды щелкните макет. В разделе «Общие» выберите «Мозаичный фон». Щелкните макет, чтобы разместить фон. Это откроет фоновый редактор. Вам нужно будет создать свой собственный с помощью программного обеспечения для редактирования изображений или загрузить текстуры из разных мест в Интернете.

  • Установите фон в соответствии с размером макета. Сделайте это, выбрав фоновый объект и изменив размер во фрейме «Свойства».
  • Измените имя слоя и заблокируйте его. Вы захотите заблокировать слой, чтобы предотвратить его случайное перемещение при размещении других объектов. Щелкните вкладку «Слои» в правой части экрана. Выберите слой и щелкните значок карандаша. Назовите слой «Фон», а затем нажмите кнопку «Замок», чтобы заблокировать фон.
Сделайте онлайн-игры Шаг 20
Сделайте онлайн-игры Шаг 20

Шаг 5. Создайте новый слой

На вкладке «Слои» нажмите кнопку «+», чтобы создать новый слой. Переименуйте его в «Главный». Это будет слой, на котором находится большинство ваших игровых объектов. Перед продолжением убедитесь, что выбран основной слой.

Сделайте онлайн-игры Шаг 21
Сделайте онлайн-игры Шаг 21

Шаг 6. Добавьте входы для вашей игры

В Construct 2 ваши входные данные нужно будет добавить в вашу игру как объекты. Они невидимы и позволяют использовать клавиатуру и мышь на протяжении всего проекта.

Дважды щелкните макет и выберите «Мышь» в разделе «Ввод». Сделайте то же самое, чтобы вставить объект «Клавиатура»

Сделайте онлайн-игры Шаг 22
Сделайте онлайн-игры Шаг 22

Шаг 7. Добавьте объекты

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

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

Сделайте онлайн-игры Шаг 23
Сделайте онлайн-игры Шаг 23

Шаг 8. Добавьте поведения к вашим объектам

Чтобы добавить поведение, щелкните объект, который вы хотите добавить, полностью, чтобы выбрать его. Щелкните ссылку «Добавить / изменить» в разделе «Поведение» во фрейме «Свойства». Появится список доступных вариантов поведения.

Поведение - это предварительно сконфигурированные элементы логики, которые позволяют быстро добавлять функциональные возможности к вашим объектам. Вы можете выбирать из множества готовых вариантов поведения, которые могут выполнять широкий спектр функций. Например, чтобы сделать пол твердым, задайте ему поведение «Solid». Чтобы переместить персонажа в восьми направлениях, задайте ему поведение «Движение в 8 направлениях»

Сделайте онлайн-игры Шаг 24
Сделайте онлайн-игры Шаг 24

Шаг 9. Измените свойства поведения

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

Сделайте онлайн-игры Шаг 25
Сделайте онлайн-игры Шаг 25

Шаг 10. Разберитесь, как работают события

События - это список условий, которые движут игрой. Если условия соблюдены, событие происходит. Если условия не выполняются, событие не происходит. Лист событий обычно запускается примерно 60 раз в секунду. Каждый раз, когда он запускается, это называется «галочкой».

Сделайте онлайн-игры Шаг 26
Сделайте онлайн-игры Шаг 26

Шаг 11. Создайте событие

Дважды щелкните пустой лист событий. Появится список доступных объектов. Выберите объект, для которого вы хотите создать событие, или вы можете создать системное событие.

  • Выберите, когда происходит действие. После выбора объекта вам будет предложено выбрать, когда должно произойти событие. Это может быть основано на других событиях или в определенное время. «Каждый тик» есть всегда.
  • Добавить действие. Вам будет предложено выбрать один из ваших объектов. Выберите действие из списка. Например, если вы создаете шутер с видом сверху и хотите, чтобы персонаж игрока всегда смотрел на мышь, вы должны создать действие «Установить угол по отношению к позиции» для каждого тика, установленного для объекта Player. При запросе координат введите "Mouse. X" для X и "Mouse. Y" для Y. При этом корабль игрока всегда будет направлен в сторону курсора.
Сделайте онлайн-игры Шаг 27
Сделайте онлайн-игры Шаг 27

Шаг 12. Добавьте больше событий и моделей поведения

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

Сделайте онлайн-игры Шаг 28
Сделайте онлайн-игры Шаг 28

Шаг 13. Добавьте несколько переменных

В Construct 2 есть два типа переменных: переменные экземпляра и глобальные переменные. Они позволяют вам устанавливать собственные значения для ваших объектов и игры, такие как здоровье, временные ограничения, очки и многое другое.

  • Переменные экземпляра - переменные экземпляра - это переменные, назначаемые отдельным объектам. Они используются для таких вещей, как здоровье врага и игрока. Вы можете добавить переменные экземпляра после выбора объекта, щелкнув ссылку «Добавить / изменить» в разделе «Переменные» во фрейме «Свойства». Дайте переменной имя, на которое можно ссылаться в событии, а также начальное значение.
  • Глобальные переменные - глобальные переменные - это переменные, назначаемые всей игре. Они используются для таких вещей, как счет игрока. Чтобы создать глобальную переменную, откройте лист событий и щелкните правой кнопкой мыши пустое место. Нажмите «Добавить глобальную переменную», дайте ей имя, на которое можно ссылаться в событии, а затем введите начальное значение.
Сделайте онлайн-игры Шаг 29
Сделайте онлайн-игры Шаг 29

Шаг 14. Создайте интерфейс

При создании интерфейса обычно лучше делать это на новом слое. Это связано с тем, что интерфейс редко перемещается или изменяется, поэтому хорошо иметь его на заблокированном уровне. Во фрейме «Свойства» для нового слоя установите «Параллакс» на 0. Это предотвратит прокрутку слоя при перемещении на экране.

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

Сделайте онлайн-игры Шаг 30
Сделайте онлайн-игры Шаг 30

Шаг 15. Протестируйте и доработайте свою игру

Теперь, когда у вас есть несколько объектов на экране с событиями и поведением, вы можете приступить к тестированию и добавлению контента. Нажмите кнопку «Играть» вверху экрана, чтобы собрать и протестировать игру. Обратите внимание на все, что не сработало, и постарайтесь исправить это, чтобы в вашу игру можно было играть и было весело.

Сделайте онлайн-игры Шаг 31
Сделайте онлайн-игры Шаг 31

Шаг 16. Экспортируйте игру

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

Сделать онлайн-игры Шаг 32
Сделать онлайн-игры Шаг 32

Шаг 17. Опубликуйте игру

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

Часть 4 из 4: Кодирование с нуля

Шаг 1. Загрузите программную среду IDE (интегрированную среду разработки), которая поддерживает HTML, например Game Maker Studio

Некоторые из них доступны бесплатно, хотя многие из лучших IDE стоят сотни долларов.

Шаг 2. Научитесь пользоваться IDE

Научиться программировать в своей среде невероятно важно. На запоминание большей части общего кода и обучение правильной реализации могут потребоваться недели или даже месяцы. Наберитесь терпения, и все окупится!

Шаг 3. Создайте свою игру, как только почувствуете, что готовы

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

Шаг 4. Протестируйте игру

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

Шаг 5. Опубликуйте

Опубликуйте свою игру в Интернете на таком веб-сайте, как Kongregate. Вы должны быть готовы к конструктивной критике и, возможно, захотите обновить свою игру в соответствии с пожеланиями вашей игровой базы.

подсказки

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

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