Как создавать онлайн игры
Вы когда-нибудь играли в онлайновую игру и думали: «Вот бы сделать такую же, у меня есть несколько отличных идей»? Раньше для этого необходимо было научиться кодировать на ActionScript 3 — языке, на котором написан Flash. Однако благодаря некоторым программам для создания игр опыт кодирования остался в прошлом. Вы можете создавать увлекательные, глубокие игры, управляя объектами и логикой, не прибегая ни к одной строчке кода.
Дизайн игры
Напишите основное описание.
Включите в него характеристики и то, чего вы хотите добиться от игрока. Полезно иметь базовое описание того, что вы хотите сделать в своей игре, чтобы иметь возможность обращаться к нему в процессе работы.
Нарисуйте несколько эскизов.
Нарисуйте основные макеты того, как должны выглядеть экраны. Они не должны быть очень подробными, но у вас должно быть хотя бы представление о том, как будут располагаться различные элементы на экране. Это будет очень полезно в дальнейшем, когда вы начнете создавать интерфейс игры.
Выберите метод создания игры. Традиционно для создания Flash-игр необходимо было изучить код на языке ActionScript 3. Хотя это можно сделать и сейчас, существуют программы, которые значительно упрощают процесс создания игр и не требуют опыта кодирования. Среди наиболее популярных вариантов создания игр можно назвать следующие:
Stencyl — это новый инструмент, позволяющий создавать онлайн игры с использованием объектов и логических сценариев. Затем эти игры могут быть преобразованы во Flash-проекты и загружены на любой сайт, поддерживающий Flash-игры.
Construct 2 — По мере того как Flash становится все более устаревшим, ему на смену начинают приходить другие способы создания игр. Одним из новейших способов создания онлайн-игр является использование HTML5. Обычно для этого требуются знания кодирования, но Construct 2 позволяет создавать игры с помощью объектов и сценариев, подобно Stencyl.
Flash Builder — это традиционный метод создания Flash-игр. Он требует достаточно глубоких знаний языка ActionScript, но это один из самых простых языков для изучения основ. Flash Builder стоит денег, но можно использовать программу с открытым исходным кодом FlashDevelop для получения большинства тех же функций.
Используйте Stencyl
Загрузите и установите Stencyl.
С нуля до разработчика игр: как начать создавать видеоигры, если у вас нет опыта. Часть 1
Два года назад я была простой семнадцатилетней ученицей средней школы и я ничего не знала о программировании. Но я все равно достигла своей цели и опубликовала свою первую игру в Steam.
На сегодняшний день я выпустила более 10 игр для настольных компьютеров и мобильных устройств с возможностью онлайн игры. В совокупности в мои игры сыграли более 1,9 миллиона раз.
Независимо от вашего уровня программирования, вы тоже можете написать свою первую игру. Два года назад я думала что это невозможно, но я все равно попыталась этого достичь. Для меня — разработка игр стала самым сложным испытанием в моей жизни! Но оно того стоило! Теперь я понимаю, что разработка игр подобна любому навыку в нашей жизни: вы становитесь лучше, когда что-то делаете, терпите неудачи, получаете опыт и улучшаете свои навыки.
Я сама научилась всему тому, что знаю сейчас и теперь я постараюсь научить и вас.
Чтобы сделать игру, вы должны пройти 6 этапов разработки: Разработка идеи. Арт. Программирование. Звук. Шлифовка. Публикация.
Каждый из этапов я структурировала следующим образом:
- ��Совет. Здесь, я буду давать вам советы, основываясь на своем и чужом опыте.
- ��Ресурсы. Также, я буду прикреплять ссылки на те или иные ресурсы, которые будут вам наиболее полезны.
Этап №1: Разработка идеи ��
У вас есть отличная идея! Как вы ее запишите?
Каждый рано или поздно найдет для себя наиболее подходящий способ записи: кто-то будет писать 60-страничные проекты и документы, а кто-то, как я — писать кучу заметок на одной странице, понятные мне одной. Я не знаю, какой способ вы выберете, но я могу дать вам несколько советов о том, что нужно прописывать:
- Изюминка. Почему вы считаете идею своей игры превосходной? Для меня это наиболее важный пункт в проекте. Как только вы определитесь с «изюминкой» вашей игры — прописать оставшиеся пункты проекта не составит вам большого труда! Ваша игра заставляет над чем-то задуматься? Может быть она скандальна? Или же это ремейк классики прошлого? Или это нечто новое, что никто и никогда не разрабатывал?
- Механика. Что, как и с какой целью делает ваш игрок — это и есть геймплей вашей игры. Например: клавиши QWOP могут использоваться для простого перемещения или общения в «мистическом чате» игры, но также они могут быть использованы для составления множества боевых комбинаций, как в игре «Dwarf Fortress».
- Сюжет. Какую историю вы хотите рассказать всем тем, кто будет играть в вашу игру? Какие эмоции они будут испытывать? У каждой игры есть своя история. Если сюжет вашей игры не так очевиден — придумать ее сможет и сам игрок. История может быть придумана в игре про числа «2048». Игрок, играя в популярную стратегию «Civilization», может сам придумать историю становления своего государства. Даже в игре «Monument Valley», с ее безмолвием, каждый додумывает свою историю. Подумайте, какую историю расскажет ваша игра?
- Настроение. Какое впечатление окажет ваша игра на игроков? Каково будет ее графическое оформление? Какой звук? Первое впечатление об игре очень важно — игра может «зацепить» пользователя с первых минут и в итоге он будет играть в нее и дальше. Возможно вы сделаете вашу игру в стиле ретро: с пиксельной графикой и музыкой в стиле ретро-вейв. А возможно, вы выберете ультра-современный дизайн, с плоской геометрией объектов, «чистыми» текстурами и инструментальной музыкой.
*Сложно придумать хорошую идею для игры? На этом этапе всем нам бывает очень сложно что-то придумать. Что же делать?
- Присоединяйтесь к игре hackathon/jam. Вам и другим участникам будет поручено сделать игру за короткий промежуток времени. Во время участия в хакатоне вы встретите единомышленников, которые будут поддерживать и помогать вам. А что насчет творческого волнения и конкуренции во время работы? Все это благоприятно скажется на вас и на ваших навыках! Не знаете с какой площадки начать? Рекомендую попробовать Ludum Dare — одну из самых больших площадок для разработчиков!
- Записывайте все свои идеи! Я и многие другие разработчики, которых я знаю, записываем все свои идеи. Таким образом, когда вы не сможете ничего придумать, вы сможете вернуться к своим старым идеям и мыслям и что-то из них почерпнуть!
Когда вас неожиданно посещает муза или появляется вдохновение — отложите свои дела и запишите все мысли и идеи! И когда вы впадете в творческий ступор, вам не придется высасывать идеи из пальца.
Все нижеперечисленные ресурсы и программы опробованы мною лично и многими из них я пользуюсь до сих пор!
- Notes для Mac (��)
- Google docs (��)
- Trello
Для совместной работы (для команд):
- Google drive
- GitHub (��). Требуются git и Unity .gitignore.
- Unity Collab. Самый простой сервис из трех. У бесплатной версии есть ограничения.
Unity — это игровой движок, который я использую для создания своих игр и я буду очень часто упоминать его здесь. Однако не стесняйтесь — вы можете выбрать любой другой движок для своих игр.
-Книга «The Art of Game Design» . Автор Джесси Шелл
Вы продумали свою игру и записали все свои идеи; Мои поздравления — это потрясающе! Теперь пора поработать над реализацией ваших задумок!
(Если вы не умеете кодить, то я советую вам для начала перейти к этапу номер 3 — программирование. Ведь вы не хотите создавать модели и концепт- арты, для того чтобы потом их просто выкинуть, потому что вы не сможете их использовать в своей игре без кода).
Вы не умеете рисовать? Не волнуйтесь. Каждый из нас может нарисовать что-то красивое, руководствуясь тремя основными принципами визуализации: цвет, форма и пространство.
Подумайте над тем, как сделать ваш UI (пользовательский интерфейс) уникальным, чтобы он имел четкую и единую цветовую тему, шрифты, формы, значки, и в то же время оставался наиболее функциональным. Подумайте, легко ли считывается информация с интерфейса? Не отвлекают ли подобранные цвета, шрифты и значки?
2D анимация
У вас есть два варианта для создания 2D анимации:
- Кадр за кадром. Здесь вам придется рисовать каждый кадр анимации и затем соединять их воедино. Для этого вам следует использовать спрайт- листы вместе с TexturePacker (или, если вы используете Unity — Sprite Packer).
- Скелетная анимация. Нарисуйте все нужные конечности объекта и затем анимируйте, меняя их положение относительно предыдущего состояния. Этот способ анимации быстрее, проще и сэкономит место на вашем жестком диске, по сравнению с анимацией «кадр за кадром». Если вы решили создать 2D анимацию и используете движок Unity — попробуйте начать с анимации спрайтов или Anima2D.
Вот несколько общих советов по оформлению игр:
- Разбивайте элементы на плитки для создания плиточных изображений и экономии места на жестком диске.
Неразбитый и разбитый на плитки элементы
- 9-частей / 9-квадратов. Масштабируйте объекты с немасштабируемыми границами через центр изображения (растягивайте и сжимайте изображение) для изменения его масштаба и сохранения памяти.
�� Синее пятно увеличилось, однако его расположение осталось неизменным
- Сделайте каждую текстуру или объект кратным размеру 4 и силе равной 2 (мера качества изображения) для экономии памяти.
- Если вы используете Photoshop, используйте «File»> «Export»> «Layers to Files», для того чтобы быстро экспортировать каждый слой в виде файла (например PNG или JPEG).
Программы для создания UI:
Создание веб-игры за час
Разработка игр не требует совершенно нового набора знаний и навыков. По сути, ваши текущие навыки в веб-разработке с применением HTML, JavaScript, CSS и других средств замечательно подходят к широкому спектру игр. Когда вы создаете игру на основе веб-технологий, она будет работать почти на любом устройстве в браузере.
Чтобы доказать это, я продемонстрирую создание игры с нуля, используя веб-технологии и всего две внешние библиотеки, причем сделаю все это менее чем за час. Я буду рассказывать о самой разнообразной тематике, связанной с разработкой игр, — от базового дизайна и разметки, элементов управления и спрайтов до искусственного интеллекта (ИИ) (artificial intelligence, AI), пригодного для простого оппонента. Я даже собираюсь создать игру такой, чтобы она работала на ПК, планшетах и смартфонах. Если у вас есть некоторый опыт в программировании в качестве веб-разработчика или в другой области разработки, но нет никакого опыта в написании игр, эта статья послужит вам отправной точкой. Если вы дадите мне один час, обещаю ввести вас в курс дела.
Приступаем
Я веду всю разработку в Visual Studio, которая позволяет быстро запускать веб-приложения по мере внесения изменений. Удостоверьтесь, что у вас наиболее новая версия Visual Studio (скачайте с bit.ly/1xEjEnX), чтобы вы могли следовать за мной. Я использовал Visual Studio 2013 Pro, но обновил код с помощью Visual Studio 2013 Community.
Это приложение не потребует серверного кода, поэтому я начинаю с создания нового пустого проекта веб-страницы в Visual Studio. Я буду использовать пустой шаблон C# для веб-сайта, выбрав вариант с Visual C# после выбора File | New | ASP.NET Empty Web Site.
В HTML-файле index нужно лишь три ресурса: jQuery, основная таблица стилей и основной JavaScript-файл. Я добавляю в проект пустой CSS-файл style.css и пустой JavaScript-файл ping.js, чтобы избежать ошибок при загрузке страницы:
Базовый дизайн
Создаваемая мной игра является вариацией Pong, которую я назвал Ping. В Ping, по сути, те же правила, что и в Pong, с тем исключением, что любой игрок хватает мяч, когда он прилетает к нему, а затем может отправить мяч обратно либо прямо в том же направлении, либо под углом вверх или вниз. Зачастую, прежде чем создавать игру, лучше всего нарисовать то, как она должна выглядеть. Общая разметка для этой игры показана на рис. 1.
.png)
Рис. 1. Общий дизайн Ping
| Player | Игрок |
| Ball | Мяч |
| Left Controls | Управление слева |
| Scoreboard | Табло |
| Opponent | Оппонент |
| Right Controls | Управление справа |
Разработав разметку игры, остается лишь добавить каждый элемент в HTML, чтобы создать игру. Однако стоит отметить, что я буду группировать табло со счетом и элементы управления, чтобы они были расположены вместе. На рис. 2 видно, как я по одному добавил нужные элементы.
Рис. 2. Начальная HTML-разметка
Играем стильно
Если бы вы загрузили эту страницу, то ничего не увидели бы, потому что никакого стиля не применено. Я уже подготовил ссылку на файл main.css в своем HTML, поэтому помещу все CSS в новый файл с тем же именем. Первым делом я позиционирую все элементы на экране. Тело страницы должно занимать весь экран, поэтому сначала я уделяю внимание этому:
body
Во-вторых, мне нужно, чтобы арена была заполнена фоновым изображением (рис. 3):
#arena
.png)
Рис. 3. Фоновое изображение для арены
Далее я размещаю табло. Я хочу, чтобы оно находилось вверху по центру — поверх других элементов. Команда «position: absolute» позволяет разместить его где угодно и оставить там: 50% — позиционирует табло посередине верхней части окна, но начиная с самой левой части элемента табло (scoreboard element). Чтобы гарантировать точную центровку, я использую свойство transform, а свойство z-index обеспечивает, что табло будет всегда находиться поверх других элементов:
#score
Я также хочу использовать текст со шрифтом в стиле ретро. Большинство браузеров позволяет включать собственные шрифты. Я счел подходящим шрифт Press Start 2P от codeman38 (zone38.net). Чтобы добавить шрифт к табло, я должен создать новое начертание шрифта (font face):
@font-face
Теперь результаты (scores) находятся в теге h1, поэтому я могу задать этот шрифт для всех тегов h1. На случай отсутствия этого шрифта я предусмотрю несколько запасных вариантов:
Для других элементов я буду использовать таблицу изображений-спрайтов. Таблица спрайтов (sprite sheet) содержит все необходимые игре изображения в одном файле (рис. 4).
.png)
Рис. 4. Таблица спрайтов для Ping
Зачастую, прежде чем создавать игру, лучше всего нарисовать то, как она должна выглядеть.
Любому элементу, имеющему изображение в этой таблице, будет назначен класс sprite. Тогда для каждого элемента я буду использовать background-position, чтобы определить, какую часть таблицы спрайтов мне нужно показывать:
.sprite
Затем я добавлю класс sprite ко всем элементам, которые будут использовать таблицу спрайтов. Для этого мне придется ненадолго переключиться на HTML:
Теперь мне нужно указать позиции каждого спрайта в таблице для каждого элемента. И вновь я буду делать это с помощью background-position, как показано на рис. 5.
Рис. 5. Добавление смещений для таблицы спрайтов
#player < position: absolute; background-position: 0px 128px; >#opponent < position: absolute; background-position: 0px 0px; >#ball < position: absolute; background-position: 128px 128px; >#right < background-position: 64px 192px; >#left < background-position: 64px 0px; >#down < background-position: 128px 192px; >#up
Свойство position: absolute в player, opponent и ball позволит мне перемещать их по полю, используя JavaScript. Если вы посмотрите на страницу теперь, то увидите, что к элементам управления и мячу прикреплены ненужные куски. Дело в том, что размеры спрайтов меньше 128 пикселей по умолчанию, поэтому я подстраиваю их под правильный размер. Мяч всего один, и я задаю его размер напрямую:
#ball
Элементов управления четыре (кнопки, которые пользователь может нажимать для перемещения своего игрока), поэтому мне следует создать для них специальный класс. Я также буду добавлять некий зазор, чтобы вокруг них было небольшое свободное пространство:
.control
После добавления этого класса элементы управления в игре выглядят гораздо лучше:
Последнее, что нужно сделать, — позиционировать элементы управления так, чтобы они находились под большими пальцами пользователя, когда страница выполняется на мобильном устройстве. Я закреплю их в углах внизу:
#controls-left < position: absolute; left: 0; bottom: 0; >#controls-right
Одна из приятных особенностей этого дизайна заключается в том, что все расположено в относительных позициях. То есть экран может быть самых разных размеров, а игра все равно будет выглядеть так, как задумывалась.
Скачущий мяч
Теперь я заставлю мяч перемещаться по полю. В случае JavaScript-кода я ссылался в HTML на файл ping.js точно так же, как делал это с CSS. Я добавлю этот код в новый файл с тем же именем. Я создам объекты для мяча и каждого из игроков, но буду использовать для объектов шаблон фабрики.
Это простая концепция. Функция Ball создает новый мяч, когда вы вызываете ее. Использовать ключевое слово new не требуется. Этот шаблон исключает некоторую путаницу вокруг переменной Ball, проясняя доступные свойства объекта. А поскольку у меня всего час на создание этой игры, нужно свести к минимуму любые запутанные концепции.
Структура этого шаблона, когда я создаю простой класс Ball, показана на рис. 6.
Рис. 6. Класс Ball
var Ball = function( < // Список переменных, видимых только объекту // (закрытые переменные) var velocity = [0,0]; var position = [0,0]; var element = $('#ball'); var paused = false; // Метод, который перемещает мяч с учетом его скорости. // Используется только на внутреннем уровне и не доступен // вне объекта. function move(t) < >// Обновляет состояние мяча и пока просто проверяет, // не приостановлена ли игра, и перемещает мяч, если она // не на паузе. Эта функция будет предоставлена // как метод объекта. function update(t) < // Сначала обрабатывается движение мяча if(!paused) < move(t); >> // Ставит движение мяча на паузу function pause() < paused = true; >// Начинает движение мяча function start() < paused = false; >// Теперь явно задаем, что могут использовать потребители // объекта Ball. Прямо сейчас есть возможность обновлять // состояние мяча, а также запускать и останавливать // его движение. return
Чтобы создать новый мяч, я просто вызываю только что определенную функцию:
var ball = Ball(); Теперь я хочу заставить мяч перемещаться и скакать по экрану. Сначала мне нужно через какой-то интервал вызывать функцию update, чтобы создать анимацию мяча. Современные браузеры предоставляют функцию, предназначенную для этой цели, — requestAnimationFrame. Она принимает функцию как аргумент и вызовет эту переданную функцию, когда она в следующий раз запустит свой цикл анимации. Это позволяет плавно перемещать мяч, когда браузер готов к обновлению. Вызывая переданную функцию, он дает ей время, измеряемое в секундах, так как страница должна загрузиться. Это крайне важно, чтобы анимация не потеряла целостность со временем. В игре requestAnimationFrame используется так:
var lastUpdate = 0; var ball = Ball(); function update(time) < var t = time - lastUpdate; lastUpdate = time; ball.update(t); requestAnimationFrame(update); >requestAnimationFrame(update); Заметьте, что requestAnimationFrame снова вызывается в функции, когда обновление мяча закончено. Это гарантирует непрерывность анимации.
Хотя этот код работает, может возникнуть проблема, если скрипт начинает выполняться до полной загрузки страницы. Чтобы избежать этого, я запускаю код, когда страница загружена, и использую для этого jQuery:
var ball; var lastUpdate; $(document).ready(function() < lastUpdate = 0; ball = Ball(); requestAnimationFrame(update); >); Поскольку я знаю скорость мяча (velocity) и время с момента ее последнего обновления, я могу выполнить некоторые простые физические расчеты, чтобы перемещать мяч вперед:
var position = [300, 300]; var velocity = [-1, -1]; var move = function(t)
Попробуйте запустить этот код и вы увидите, что мяч движется под углом, а потом вылетает за пределы экрана. Это забавно для первого раза, но, как только мяч пересекает край экрана, уже не до смеха. Поэтому следующий шаг — сделать так, чтобы мяч отскакивал от краев экрана, как реализовано на рис. 7. Добавьте этот код и запустите приложение: вы увидите постоянно скачущий мяч.
Рис. 7. Простая физика отскакивания мяча
var move = function(t) < // Если мяч ударяется в верхнюю или нижнюю границу, // он получает обратную вертикальную скорость if (position[1] = innerHeight) < velocity[1] = -velocity[1]; >// Если мяч ударяется в левую или правую границу, // он получает обратную горизонтальную скорость if (position[0] = innerWidth) < velocity[0] = -velocity[0]; >position[0] += velocity[0] * t; position[1] += velocity[1] * t; element.css('left', (position[0] - 32) + 'px'); element.css('top', (position[1] - 32) + 'px'); > Перемещаемый игрок
Теперь пришла пора создать объекты Player. Первый шаг в реализации этого класса — заставить функцию move изменять позицию игрока. Переменная side будет указывать, на какой стороне поля находится игрок, что будет определять горизонтальную позицию игрока. Значение y, переданное функции move, сообщает, насколько следует переместить игрока вверх или вниз:
var Player = function (elementName, side) < var position = [0,0]; var element = $('#'+elementName); var move = function(y) < >return < move: move, getSide: function() < return side; >, getPosition: function() < return position; >> > На рис. 8 определяются перемещения игрока, причем его движение прекращается, если его спрайт достигает верхней или нижней границы окна.
Теперь я могу создать двух игроков и перемещать их по соответствующим сторонам экрана:
player = Player('player', 'left'); player.move(0); opponent = Player('opponent', 'right'); opponent.move(0); Рис. 8. Элементы управления перемещением спрайта игрока
var move = function(y) < // Подстраиваем позицию игрока position[1] += y; // Если игрок выходит за край экрана, двигаем его обратно if (position[1] // Высота игрока - 128 пикселей, поэтому останавливаем его // до того, как любая его часть выйдет за границу экрана if (position[1] >= innerHeight - 128) < position[1] = innerHeight - 128; >// Если игрок движется к правой границе, задаем его позицию // по правому краю экрана if (side == 'right') < position[0] = innerWidth - 128; >// Наконец, обновляем позицию игрока на странице element.css('left', position[0] + 'px'); element.css('top', position[1] + 'px'); > Ввод с клавиатуры
Итак, вы можете передвигать игрока, но он не будет перемещаться без команд. Добавьте некоторые элементы управления к игроку слева. Вам нужны два способа управления этим игроком: с клавиатуры (на ПК) и сенсорным вводом (на планшетах и смартфонах).
Чтобы обеспечить согласованность между сенсорным вводом и вводом от мыши на различных платформах, я буду использовать отличную инфраструктуру унификации — Hand.js (handjs.codeplex.com). Прежде всего я добавлю скрипт в HTML в раздел head:
Рис. 9 демонстрирует применение Hand.js и jQuery для управления игроком при нажатии клавиш на клавиатуре A и Z или при касании сенсорных элементов управления.
Рис. 9. Добавление элементов управления с поддержкой сенсорного ввода и ввода с клавиатуры
var distance = 24; // смещение на каждом шаге игрока $(document).ready(function() < lastUpdate = 0; player = Player('player', 'left'); player.move(0); opponent = Player('opponent', 'right'); opponent.move(0); ball = Ball(); // pointerdown – универсальное событие для всех типов // средств указания: пальца, мыши, стилуса и т. д. $('#up') .bind("pointerdown", function() ); $('#down') .bind("pointerdown", function() ); requestAnimationFrame(update); >); $(document).keydown(function(event) < var event = event || window.event; // Этот код преобразует keyCode (число) из события в букву // верхнего регистра, чтобы выражение switch // было более читаемым switch(String.fromCharCode(event.keyCode).toUpperCase()) < case 'A': player.move(-distance); break; case 'Z': player.move(distance); break; >return false; >); Ловим мяч
Я хочу, чтобы игроки ловили скачущий мяч. Когда он пойман, у него появляется владелец, и он следует движениям владельца. На рис. 10 в метод move мяча добавлена функциональность, позволяющая мячу перемещаться вслед за владельцем.
Рис. 10. Заставляем мяч следовать за своим владельцем
var move = function(t) < // Если владелец есть, перемещаем мяч // в соответствии с позицией владельца if (owner !== undefined) < var ownerPosition = owner.getPosition(); position[1] = ownerPosition[1] + 64; if (owner.getSide() == 'left') < position[0] = ownerPosition[0] + 64; >else < position[0] = ownerPosition[0]; >// Иначе перемещаем мяч согласно законам физики. Заметьте, // что горизонтальное отскакивание удалено; мяч должен // пролетать мимо игрока, если он не пойман. > else < // Если мяч ударяется в верхний или нижний край поля, // обращаем вертикальную скорость if (position[1] - 32 = innerHeight) < velocity[1] = -velocity[1]; >position[0] += velocity[0] * t; position[1] += velocity[1] * t; > element.css('left', (position[0] - 32) + 'px'); element.css('top', (position[1] - 32) + 'px'); > На данный момент способа получить позицию объекта Player пока нет, поэтому я добавлю аксессоры getPosition и getSide в объект Player:
return < move: move, getSide: function() < return side; >, getPosition: function() < return position; >> Теперь, если у мяча есть владелец, он будет следовать за этим владельцем. Но как определить владельца? Кто-то должен поймать мяч. На рис. 11 показано, как узнать, когда один из спрайтов игроков касается мяча. Когда это происходит, я устанавливаю владельцем мяча этого игрока.
Первый шаг в реализации класса player — заставить функцию move изменять позицию игрока.
Рис. 11. Обнаружение коллизии для мяча и игроков
var update = function(t) < // Сначала обрабатывается перемещение мяча if(!paused) < move(t); >// Мяч под управлением игрока, обновление не требуется if (owner !== undefined) < return; >// Сначала проверяем, будет ли захвачен мяч игроком var playerPosition = player.getPosition(); if (position[0] = playerPosition[1] && position[1] // Аналогично для оппонента. var opponentPosition = opponent.getPosition(); if (position[0] >= innerWidth - 128 && position[1] >= opponentPosition[1] && position[1]
Если вы сейчас попытаетесь поиграть в эту игру, то обнаружите, что мяч отскакивает от верхнего края экрана и что можно двигать игрока, чтобы поймать мяч. А как бросить мяч? Для этого и предназначены элементы управления по правую руку. На рис. 12 игроку добавлена функция fire, а также свойство aim.
Рис. 12. Свойство aim и функция fire для мяча
var aim = 0; var fire = function() < // Если у мяча нет владельца, ничего не делаем if (ball.getOwner() !== this) < return; >var v = [0,0]; // В зависимости от того, на какой стороне находится игрок, // мяч можно кидать в различных направлениях. Мяч должен // перемещаться с той же скоростью независимо от направления. // Математические операции помогут определить, что смещение // на .707 пикселей в направлениях x и y дает ту же // скорость, что и смещение одного пикселя // только в одном направлении. if (side == 'left') < switch(aim) < case -1: v = [.707, -.707]; break; case 0: v = [1,0]; break; case 1: v = [.707, .707]; >> else < switch(aim) < case -1: v = [-.707, -.707]; break; case 0: v = [-1,0]; break; case 1: v = [-.707, .707]; >> ball.setVelocity(v); // Освобождаем управление мячом ball.setOwner(undefined); > // Остальной код определения Ball помещается сюда. return < move: move, fire: fire, getSide: function() < return side; >, setAim: function(a) < aim = a; >, getPosition: function() < return position; >, > Код на рис. 13 дополняет функцию, связанную с клавиатурой. Он задает aim и fire объекта игрока. Прицеливание работает слегка иначе. Когда клавиша прицеливания освобождается, задается прямое направление (straightforward).
Рис. 13. Подготавливаем функцию прицеливания для игрока
$(document).keydown(function(event) < var event = event || window.event; switch(String.fromCharCode(event.keyCode).toUpperCase()) < case 'A': player.move(-distance); break; case 'Z': player.move(distance); break; case 'K': player.setAim(-1); break; case 'M': player.setAim(1); break; case ' ': player.fire(); break; >return false; >); $(document).keyup(function(event) < var event = event || window.event; switch(String.fromCharCode(event.keyCode).toUpperCase()) < case 'K': case 'M': player.setAim(0); break; >return false; >); И завершающее добавление относится к сенсорной поддержке для всех элементов управления. Элементы управления справа изменяют направление прицеливания игрока. Кроме того, я сделаю так, чтобы касание любого участка экрана приводило к броску мяча:
$('#left') .bind("pointerdown", function() ); $('#right') .bind("pointerdown", function() ); $('#left') .bind("pointerup", function() ); $('#right') .bind("pointerup", function() ); $('body') .bind("pointerdown", function() ); Ведем счет
Когда мяч летит на игрока, я хочу изменять счет и отдавать мяч этому игроку. Я буду использоваться собственные события, чтобы можно было отделить подсчет от любого из существующих объектов. Функция update становится слишком длинной, поэтому я добавлю новую закрытую функцию — checkScored:
function checkScored() < if (position[0] if (position[0] >= innerWidth) < pause(); $(document).trigger('ping:playerScored'); >> На рис. 14 показан код, который реагирует на эти события, обновляя счет и передавая мяч в руки игрока. Добавьте этот код вниз JavaScript-документа.
Рис. 14. Обновление табло
$(document).on('ping:playerScored', function(e) < console.log('player scored!'); score[0]++; $('#playerScore').text(score[0]); ball.setOwner(opponent); ball.start(); >); $(document).on('ping:opponentScored', function(e) < console.log('opponent scored!'); score[1]++; $('#opponentScore').text(score[1]); ball.setOwner(player); ball.start(); >); Теперь, когда мяч перемещается мимо вашего оппонента (что не трудно, так как оппонент не движется), ваш счет будет расти, а мяч передаваться оппоненту. Однако оппонент будет просто держать мяч.
Делаем игру немного умнее
Игра почти готова. Жаль, что играть вам не с кем. В качестве последнего этапа я покажу, как управлять оппонентом с помощью простой ИИ. Оппонент будет пытаться держаться параллельно мячу, когда тот летит в его сторону. Если оппонент ловит мяч, он перемещается случайным образом и бросает мяч в случайном направлении. Чтобы сделать ИИ чуточку человечнее, я добавлю задержки во все, что делается на поле. Это не особо умный ИИ, но все же против него будет можно играть.
При разработке системы такого рода хорошо мыслить состояниями. ИИ оппонента имеет три возможных состояния: following (следует), aiming/shooting (прицеливание/бросок) и waiting (ожидание). Начнем только с объекта AI:
function AI(playerToControl) < var ctl = playerToControl; var State = < WAITING: 0, FOLLOWING: 1, AIMING: 2 >var currentState = State.FOLLOWING; > В зависимости от состояния AI (ИИ) я хочу, чтобы он выполнял разные действия. По аналогии с мячом я создам функцию update, которую смогу вызывать в requestAnimationFrame, чтобы AI действовал в соответствии со своим состоянием:
function update() < switch (currentState) < case State.FOLLOWING: // Делаем что-то, чтобы следовать за мячом break; case State.WAITING: // Делаем что-то, чтобы ждать break; case State.AIMING: // Делаем что-то, чтобы прицелиться break; >> Состояние FOLLOWING достаточно простое. Оппонент перемещается в вертикальном направлении мяча, и AI переходит в состояние WAITING, чтобы добавить некоторое замедление реакции. Эти два состояния показаны на рис. 15.
При разработке системы такого рода хорошо мыслить состояниями.
Рис. 15. Простое состояние FOLLOWING
function moveTowardsBall() < // Перемещаем на то же расстояние, на которое // переместился бы и игрок, чтобы все было по-честному if(ball.getPosition()[1] >= ctl.getPosition()[1] + 64) < ctl.move(distance); >else < ctl.move(-distance); >> function update() < switch (currentState) < case State.FOLLOWING: moveTowardsBall(); currentState = State.WAITING; case State.WAITING: setTimeout(function() < currentState = State.FOLLOWING; >, 400); break; > > > Используя код с рис. 15, AI выбирает между следованием за мячом и ожиданием доли секунды. Теперь добавляем код в функцию update уровня всей игры:
function update(time)
Запустив игру, вы увидите, что оппонент следует за перемещениями мяча — не такой уж и плохой ИИ, состоящий менее чем из 30 строк кода. Конечно, если оппонент поймает мяч, он ничего делать не будет. Поэтому на излете отведенного мне часа пора заняться обработкой действий для состояния AIMING. Я хочу, чтобы ИИ заставлял вашего оппонента случайным образом перемещаться несколько раз, а затем кидать мяч в случайном направлении. На рис. 16 добавлена закрытая функция, которая именно это и делает. Добавление функции aimAndFire к выражению case с AIMING создает полнофункциональный ИИ, против которого интересно играть.
Рис. 16. ИИ прицеливается и бросает мяч
function repeat(cb, cbFinal, interval, count) < var timeout = function() < repeat(cb, cbFinal, interval, count-1); >if (count else < cb(); setTimeout(function() < repeat(cb, cbFinal, interval, count-1); >, interval); > > function aimAndFire() < // Повторяет перемещение от 5 до 10 раз var numRepeats = Math.floor(5 + Math.random() * 5); function randomMove() < if (Math.random() >.5) < ctl.move(-distance); >else < ctl.move(distance); >> function randomAimAndFire() < var d = Math.floor( Math.random() * 3 - 1 ); opponent.setAim(d); opponent.fire(); // Наконец, переходим в состояние FOLLOWING currentState = State.FOLLOWING; >repeat(randomMove, randomAimAndFire, 250, numRepeats); > Заключение
Теперь у вас есть полноценная веб-игра, которая работает на ПК, смартфонах и планшетах. Эту игру можно усовершенствовать по многим направлениям. Например, сейчас она будет плохо выглядеть в портретном (книжном) режиме на смартфоне, поэтому вам нужно держать смартфон только в альбомном режиме, чтобы игра работала корректно. Это лишь небольшая демонстрация возможностей разработки игр для Web и не только.
Michael Oneppo — креативный технолог и бывший менеджер программ в группе Microsoft Direct3D. В последнее время работает в качестве главного технического директора в технологической некоммерческой компании Library For All и ведет исследования по программе NYU Interactive Telecommunications Program для получения степени магистра.
Выражаю благодарность за рецензирование статьи эксперту Магомету Амину Ибрагиму (Mohamed Ameen Ibrahim).
Как создавать онлайн игры
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 13 человек(а).
Количество просмотров этой статьи: 18 899.
В этой статье:
Вы когда-нибудь хотели создать онлайн игру? Тогда присядьте и расслабьтесь, эта статья расскажет, как это сделать!
Зайдите на сайт Adobe.com. Зарегистрируйтесь, если вы еще этого не сделали, или просто войдите под своей учетной записью.
Если у вас нет flash, скачайте и установите его. (Это может занять некоторое время, так как вам нужно будет установить обновления.)
Придумайте идею игры. Сюжет не возникнет сам собой! Наполните сюжет игры событиями, продумайте персонажей, сюжет и ситуации, которые могут возникнуть в обычной жизни, тогда это будет интересным любому игроку.
Если вы думаете, что готовы — открывайте программу для создания Flash-анимации.
Посмотрите справочные руководства. Хорошим вариантом является использование YouTube.
Если вы изучили достаточно для создания собственной игры, начните ее создавать.
Не спешите. Разработка хорошей игры должна занять не меньше недели (при работе в течение одного-двух часов каждый день).
Если вы закончили создавать игру и вам нравится результат работы, сохраните игру.
Найдите подходящий сайт для онлайн игры. Один из примеров — это Addictinggames, но они достаточно придирчивы к играм, которые у себя размещают. Они тестируют игры, и может пройти день, прежде чем ваша игра попадет на сайт. Если это занимает большее время (скажем, неделю), то скорее всего вашу игру отклонили. Сайт Newgrounds — тоже неплохой выбор, но вам нужно иметь адрес электронной почты, чтобы там зарегистрироваться. Вам может быть сказано, что у вас недействительный адрес электронной почты, и он не будет работать с этим сайтом (если у вашего друга есть свой почтовый адрес, вы можете попросить использовать его.). Armorgames — еще один сайт для онлайн игр.
Как только ваша игра стала общедоступной в Интернете, наслаждайтесь и читайте отзывы о вашей игре! Вот и все!