Как сделать игру для сайта
Создание браузерной игры. Как заработать миллион?
К браузерным играм не привыкли относиться всерьез, но на самом деле – это неплохой бизнес для небольшой команды друзей, у которых нет денег, но есть светлые мысли. А если еще и деньги есть, то тогда все значительно упрощается.
На самом деле создать браузерную онлайн игру может любой, у кого есть желание учиться, но не думайте, что вас ждет легкая прогулка. Даже если вы мастер на все руки (программист и дизайнер в одном флаконе), то придется потратить уйму времени. Если же вы не владеете ни кодом, ни карандашом, то затраты будут финансовыми.
Как создать браузерную игру ничего не изучая?
Ответ – никак. Для начала нужно будет выучить HTML – язык разметки, который работает в связке с каскадной таблицей стилей – CSS. Эти языки располагают текст и изображения на странице, собирая картинку из множества фрагментов. Поскольку вы намерены сделать именно браузерную игру, то ей обязательно понадобится сайт, желательно красивый и функциональный. Поэтому не обойтись без JavaScript – самого простого способа визуализировать вашу игру на стороне геймера. Этот язык позволяет менять местами элементы страницы без ее перезагрузки. По сути, JavaScript управляет элементами CSS и HTML в реальном времени.
Для создания браузерной игры придется выучить HTML, CSS, PHP и JavaScript, так что бессонные ночи вам гарантированы
Язык программирования PHP нужен для создания движка игры. Он используется на сервере для обработки данных, поступающих от разных геймеров. Это – ядро, которое приводит в действие все внутренние механизмы.
Я не хочу ничего учить, но у меня есть деньги
Поздравляем, вы избежали многих проблем. И тут же получили новые. Чтобы сделать браузерную игру хорошего качества (в плохую никто играть не будет) нужно иметь хорошую команду разработчиков, а хорошие спецы стоят денег. Если брать по минимуму, то вам необходимы:
Если у вас нет личных знакомств, то придется обращаться к аутсорсингу. Обычно такие ребята трутся на биржах фрилансеров, самой популярной их которых является www.fl.ru/.
Всех необходимых работников можно найти на биржах фрилансеров
Правда, в этом случае нужно быть очень осторожным, поскольку фрилансеры привыкли регулярно срывать сроки. Как говорят опытные руководители, можно бесконечно смотреть на 3 вещи: как течет память, как горит дедлайн и как не работает фрилансер.
Во сколько обойдется разработка?
Во столько, сколько у вас есть денег. Вот здесь приведены примерные выкладки и структура расходов на создание среднестатистической браузерки. Итоговая сумма – 25 миллионов рублей. Однако не стоит пугаться этой цифры. В статье автор посчитал расходы на разработку по максимуму, так что при желании эту сумму модно уменьшить в разы и даже десятки раз. Или увеличить, если ваш папа – прокурор. Безусловно, такие проекты, как Drakensang Online или City of Steam требуют сумм как минимум с шестью нулями, но простую табличную браузерку можно сделать за пару десятков тысяч рублей.
В конце концов, вы всегда можете обратиться к краудфандингу. Пути Кикстартера неисповедимы, взлететь там может любой проект. Главное правильно подать блюдо.
Этапы разработки
Создание браузерной игры с нуля можно разделить на несколько этапов:
1. Поиск идеи
Поскольку у вас вряд ли есть 25 миллионов рублей и вы вряд ли являетесь гением в программировании и дизайне, единственное, чем вы можете зацепить пользователя, это необычный сеттинг. Даже пресловутая кампания из эльфов, орков, людей и гномов способна увлечь клиента, если погрузить их в необычную среду или заставить делать странные вещи. Например, игра Ботва Онлайн была написана «по приколу» четырьмя людьми в свободное от работы время, но благодаря своему необычному сеттингу быстро стала успешным бизнес проектом.
2. Разработка сюжета
Сюжет очень важен (если конечно, вы не делаете стратегию). Если у самого воображения не хватает, наймите кого-нибудь, у кого оно есть. В крайнем случае, обратитесь к аутсорсингу и найдите толкового копирайтера, у которого уже есть опыт создания квестов.
3. Создание игры
Даже если вы выучили вдоль и поперек JavaScript и CSS, вы все еще ничего не знаете о том, как создать браузерную игру. Это примерно то же самое, как если бы вы выучили теорию плавания, ни разу не побывав в бассейне. Лучший выход в этом случае – воспользоваться самоучителем. Вот здесь можно многое узнать о разработке игр, причем не только браузерных.
Скорее всего, ваша первая браузерка будет выглядеть так. Это – легендарный Бойцовский Клуб
4. Продвижение проекта
Последний этап, на котором дело в свои руки берут комьюнити-менеджер и специалист по маркетингу (если таковой имеется). В крупных компаниях на долю рекламы уходит примерно 60% бюджета, поэтому на эту статью денег лучше не жалеть. Если же ваши финансы поют романсы, то тогда не остается ничего другого, как самому перепахивать игровые форумы и завлекать геймеров всеми возможными способами.
Как создать браузерную игру с помощью конструктора
Оказывается, ушлые программисты уже давно создали кучу конструкторов MMO, которые могут помочь новичку создать браузерную онлайн игру бесплатно. Это не значит, что вы можете успокоиться и удалить все закладки по программированию, но с помощью конструктора можно здорово ускорить процесс.
Популярный игровой конструктор Construct 2
Большой популярностью пользуется MMO Constructor – отечественный продукт, в котором можно создать все элементы полноценной браузерной RPG. Взамен авторы требуют совсем ничего – 50% от прибыли проекта. Разобраться в конструкторе непросто, но добрые люди уже написали гайды. Также чтобы создать браузерную игру, можно воспользоваться такими программами, как Construct Classic, Eclipse, FPS Creator.
Больше информации о конструкторах можно узнать на форуме Gcup, где тусуются все: и продвинутые геймдевы, и зеленые новички.
Так что там насчет миллиона?
Любая, даже мобильная игра должна приносить прибыль. Иначе нет никакого смысла тратить свое и чужое время. Дабы сделать свой проект финансово успешным, нужно слушать, что говорят опытные разработчики и делать то же самое:
Напоследок хочется сказать – не так страшен черт, как его малюют. Даже лучшие геймдевы когда-то начинали с нуля, и кто знает, может быть именно вы станете следующим Джоном Кармаком или Ричардом Гэрриотом?
Пишем HTML5-игру за 20 минут, или введение в Phaser framework
Эта статья посвящена разработке стильных, модных и молодежных HTML5 приложений с помощью нового фреймворка Phaser. В ней описан процесс установки библиотеки и создание классической игры Pong.
Введение
Установка библиотеки и локального веб-сервера
Итак, начнем. Для запуска и тестирования приложений нам необходимо установить локальный веб-сервер. Все примеры из комплекта библиотеки используют PHP, поэтому и сервер нужен соответствующий. Я использовал MAMP для MacOS, для Windows подойдет отечественный Denwer или любой другой аналог.
После установки веб-сервера необходимо скачать последнюю версию Фазера c GitHub: https://github.com/photonstorm/phaser. В данный момент (13 октября 2013 года) рекомендую качать dev ветку, так как эта версия содержит в себе ряд очень полезных изменений по сравнению с основной, в том числе и больший объем документации. Для тех, кто не использует GitHub, доступна прямая ссылка на архив: https://github.com/photonstorm/phaser/archive/dev.zip.
Чтобы убедиться, что все настроено правильно, можно запустить небольшое приложение-пример Hello Phaser. Создайте папку hellophaser в директории вашего веб-сервера, предназначенной для сайтов, и скопируйте туда три файла из папки Docs/Hello Phaser:
Запустите свой любимый браузер и откройте URL со скопированными файлами (в моем случае http://localhost:8888/hellophaser/). Если все хорошо, вы увидите вращающийся симпатичный логотип, такой как на скриншоте ниже:
Разработка игры
Подготовка необходимых файлов
Теперь можно приступать к разработке нашей первой игры. Создайте для нее папку phaser-pong на вашем веб-сервере и скопируйте туда файл phaser.js из папки build с исходниками фреймворка. Также создайте в ней папку assets, где мы будем хранить все ресурсы, относящиеся к игре, и файл index.html (собственно, здесь и будет наша игра).
Скопируйте в папку assets изображения шарика, ракетки и фона. Можно взять следующие файлы (в качестве фона я взял звездное небо из примеров Фазера), а можно нарисовать что-то свое. Главное — это убедиться, что вы загружаете в игру нужные картинки с корректными именами и подходящими размерами. Также не стоит выбирать слишком большие изображения, с их отрисовкой могут возникнуть проблемы. Поэтому перед использованием фотографии своего кота уменьшите ее до, скажем, 480х640 (разрешение нашей игры), и все будет хорошо. 
В результате содержимое папки phaser-pong будет таким:
А в папке assets будет три картинки:
Создание главного объекта игры, загрузка ресурсов
Наконец-то все подготовительные этапы выполнены, и начинается собственно разработка. Откройте index.html и вставьте туда следующий код:
Откройте в браузере адрес новой игры (у меня это http://localhost:8888/phaser-pong/) и вы увидите ее окно с нарисованным фоном
Игровые объекты
Сейчас перейдем к самому интересному — наполним нашу игру логикой. После объявления переменной game и перед функцией preload() объявим объекты с ракетками игрока и компьютера, мячиком, а также укажем скорости их движения:
Для создания ракеток напишем функцию createBet(x, y) :
Метод создает спрайт с указанными координатами и добавляет его в игру. Поле anchor отвечает за точку отсчета координат спрайта, устанавливаем его по центру изображения ракетки. body содержит в себе элементы для работы с физикой. Здесь мы ограничиваем движение ракетки пределами игрового пространства, задаем силу «отскока» и указываем, что при столкновении с объектами ракетка не будет отлетать в сторону.
Добавим два вызова этой функции в create(), сразу после создания фона. Ракетки будут добавлены в игру после фонового изображения, поэтому мы будем их видеть на экране:
Аналогичным образом создадим шарик, дописав следующий код сразу после вызовов функции createBet() в create() :
В результате увидим, что в нашей игре появились две ракетки и мячик, пока неподвижные:
Логика
Картинка получилась симпатичной, но думаю, стоит ее слегка оживить.
Добавляем переменную, отвечающую за состояние шарика и функцию, которая будет его запускать:
Функция проверяет, что шарик еще не запущен, и в таком случае задает ему скорость с помощью поля velocity.
Вызов функции повесим на нажатие кнопки мышки, написав следующую строку в create():
Теперь клик мышкой запускает шарик, и он отскакивает от границ игры. Добавим движения и ракеткам, отредактировав функцию update() :
Вся суть игры заключается в отбивании шарика ракетками, поэтому нужно организовать проверку столкновений шарика с ракетками. К счастью, в Фазере уже есть соответствующий функционал, поэтому нам достаточно его использовать.
Допишем следующие три строки в конец update() :
Метод collide проверяет столкновение двух объектов (первые два параметра) и вызывает указанную в третьем функцию для выполнения каких-либо действий над столкнувшимися спрайтами. Эта функция выглядит так:
При столкновении шарик меняет направление своего движения в зависимости от того, на какую часть ракетки попадает.
Осталось только добавить проверку на пропущенный гол. Если кто-то его пропустил, ставим шарик в изначальную позицию по центру поля.
checkGoal() вызывается постоянно, поэтому копируем ее в конец update() :
Все! Открываем браузер, наслаждаемся фантастическим и современным геймплеем нашей игры, радуемся жизни и свежеприобретенным навыками программирования.
Заключение
Естественно, игре не хватает еще многого, как минимум подсчета очков и определения победителей. Но мне кажется, что для введения в разработку с Phaser достаточно показанных вещей. Движок поддерживает много других классных функций, которые я собираюсь показать на примере новой игры, чуть более сложной и непосредственно относящейся к Хабру, чтобы было интереснее.
Стей тьюнед.
В ходе разработки я активно использовал код из примера breakout.php. Кроме этого примера, в папке с Фазером есть и другие игры, поэтому тем, кому не терпится использовать новый фреймворк, рекомендую в первую очередь посмотреть на содержимое папки examples.
Update от 20.10.2013: fessnecro добавил частицы при столкновении шарика с ракетками и новые уровни, за что ему спасибо. Эти изменения находятся в основном бренче. Оригинальная версия, описанная в статье, находится в ветке gh-pages.
Геймдизайнер с нуля: как начать делать игры без опыта
Голубев Никита, коммерческий автор и переводчик, специально для блога Нетологии перевёл статью разработчика игр Анжелы Хе о том, как без навыков программирования создать свою первую игру.
Всего 2 года назад я была 17-летней школьницей и ничего не знала о программировании. Это не помешало мне начать учиться и через несколько месяцев выпустить свою первую игру в Steam. Сегодня у меня более 10 игр для ПК, интернета и мобильных устройств и свыше 1,9 млн игроков.
Не важно, что вы умеете сейчас — при должном желании вы тоже сможете делать игры. Два года назад такое казалось невозможным: это было самое сложное, что я сделала в жизни, и оно того стоило. Теперь я понимаю, что в разработке игр, как и в любом другом деле, вы растёте только тогда, когда пробуете, ошибаетесь и совершенствуетесь.
Всему, что я знаю, я научилась сама, а теперь научу вас.
Чтобы сделать игру, нужно пройти 6 этапов:
Концепция
Совет
У вас есть классная идея. Но как оформить её на бумаге?
У каждого свой путь. Одни составляют дизайн-документы по 60 страниц, другие напишут лист неразборчивых заметок. Не знаю, как удобнее для вас, но обязательно зафиксируйте следующее:
Когда приходит вдохновение, бросайте всё и пишите. В следующий раз, когда мысль уйдёт, не понадобится высасывать идеи из пальца.
Инструменты
Графика
Совет
Если вы не умеете программировать, сначала прочтите раздел «Программирование». Вряд ли вы хотите потратить время на графику и выкинуть её потому, что под неё не написать код.
Даже если вы не умеете рисовать, игру можно сделать красивой, используя три визуальных принципа: цвет, форма и объём.
Thomas Was Alone — простая и прекрасная игра
Интерфейс
Подумайте, как сделать игру уникальной с помощью цветовой схемы, шрифтов и иконок без потери удобства для игрока. Понятна и читается ли важная информация?
Неудачный и удачный шрифт
2D-анимация
Анимацию можно реализовать двумя способами:
Что ещё может пригодиться
Советы, которые применимы не только к игровой графике, но и к другим программам:
Без тайлов и с тайлом
Пятно расширяется, но углы остаются прежними
Инструменты
Программирование
Совет
Выберите игровой движок, среду разработки и начинайте погружаться в код.
Представленных ниже знаний достаточно для начала. Все примеры написаны на C++, одном из языков программирования в Unity3D. (Примечание переводчика: на самом деле в Unity используется C#, который похож на C++).
int — тип данных, i — имя переменной, = 0 — значение переменной.
Используя оператор else, можно расширить условие и отобразить что делать, если условие не соответствует истине:
For-циклы похожи на while-циклы. Для while мы пишем так:
Равнозначный for-цикл будет таким:
Тогда при выводе функции выполняются два выражения внутри неё.
Если в коде что-то идёт не так, на помощь приходят исключения. Они как бы говорят: «Так, погоди, здесь ты сделал что-то нелогичное. Перепроверь ещё раз».
О чём ещё надо знать:
Код — это вызов самому себе. И ничего не понимать поначалу — нормально.
Как и любому навыку, программированию нужно обучаться. И, возможно, это окажется довольно интересно.
Другие немаловажные основы программирования:
Инструменты
В Unity Asset Store, bitbucket и GitHub очень много бесплатных ассетов. В своих проектах я использую минимум по два. Они упрощают жизнь, но далеко не идеальны. Заметили ошибку — исправляйте и говорите разработчику о ней.
Немаловажный, даже главный источник решения проблем с кодом — Гугл!
Совет
Аудио способно создавать настроение и погружать в игру, но для него нужна память.
Для начала решите: вы хотите звук? Если да, будет ли в игре музыка, звуковые эффекты, озвучка или повествование.
В любом случае потребуется запись и сведение таким образом, чтобы звук подходил под настроение игры. Например, Bastion использует органические и инструментальные звуки, хорошо вписывающиеся в мир игры. Crypt of the Necrodancer включил в себя смесь электронных ритмов и восьмибитного рока, чтобы передать темп и яркость игры.
Погружение решает. Если звуки не совпадают с настроением игры, игроку будет сложно погрузиться в ваш мир.
Инструменты
Приложения для работы с аудио:
Подготовка к публикации
Совет
Существует небольшая вероятность — на 99,99 процентов, что в игре есть ошибки. А это значит, что самое время заняться баг-тестом.
Как тестировать игру на баги?
Типичные ошибки
В чём дело: функция выполняется с несуществующей (null) переменной.
Быстрое решение: проверьте, является ли переменная null.
Примечание: Проверьте, какие кавычки вы используете.
» //правильные кавычки;
» //ненужные кавычки, они принесут вам немало ошибок.
Советы по оптимизации
Инструменты (только для Unity)
Публикация
Совет
Самое время показать всему миру своё творение.
Продвижение — самая волнительная стадия. Если вы сомневаетесь, вам поможет сообщество гейм-дизайнеров. Помните, что вы не одиноки, и раз прошли так много, нужно завершить дело до конца.
Вы не узнаете, станет ли игра хитом, пока не опубликуете её.
Если хотите, чтобы все узнали об игре, напишите анонсы для игровых медиа, участвуйте в фестивалях и конференциях.
Отправьте описание игры в прессу за неделю до выхода — дайте людям время написать о ней. Может случиться, что о ней не станут писать, но помните: журналисты любят красивые истории о разработчиках, уникальную или противоречивую идею и медиа-кит.
Не пишите в игровые издания, которые не освещают ваш жанр или целевую игровую платформу.
Письмо видеоблогеру Markiplier, чей канал насчитывает более 21 миллиона подписчиков
Это прекрасный инструмент для продвижения: Agar.io обрела популярность на 4chan, Butterfly Soup подскочила в загрузках после внимания в Твиттере.
Как лучше: публиковаться через издателя или самому. Хотите пойти по пути Hotline Miami, выпущенной Devolver Digital, или перенять опыт Farmville и Doki Doki Literature Club?
Чтобы сотрудничать с издателем, нужно сначала его найти. После этого будет небольшой ворох бумажной работы, зато вы получите достаточно средств для развития игры.
Если собираетесь издаваться самостоятельно, готовьтесь тратить немало времени на изучение маркетинга. Вы можете провалить кампанию по продвижению, но в процессе наберётесь ценных знаний и сэкономите деньги.
Количество установок игры растёт
Получилось! Теперь расслабьтесь, возьмите что-нибудь вкусное и отдохните. Вы работали не покладая рук и заслужили это.
Не бойтесь, если игра не получила ожидаемого внимания — это нормально. У моей первой игры всего 255 загрузок в Steam.
Главное, что вы сделали игру и многому научились. Сейчас этого достаточно, и всегда есть возможность попробовать ещё раз с новыми знаниями.
Инструменты
Сервис presskit() помогает разработчикам оформить описание игры для прессы.
Платформы для публикации:
Заключение
Нет простого пути создания игры. Есть только ваши решительность и усилия.
За каждым Half-Life, Minecraft и Uncharted лежат океаны крови, пота и слез.
Кен Левин, создатель Bioshock
Вы будете допускать ошибки, чувствовать себя в тупике и плакать. Это нормально — значит, вы растёте над собой.