Как создать браузерную онлайн игру самому

Создание браузерной игры. Как заработать миллион?

К браузерным играм не привыкли относиться всерьез, но на самом деле – это неплохой бизнес для небольшой команды друзей, у которых нет денег, но есть светлые мысли. А если еще и деньги есть, то тогда все значительно упрощается.

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

Как создать браузерную игру ничего не изучая?

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

Для создания браузерной игры придется выучить HTML, CSS, PHP и JavaScript, так что бессонные ночи вам гарантированы

Язык программирования PHP нужен для создания движка игры. Он используется на сервере для обработки данных, поступающих от разных геймеров. Это – ядро, которое приводит в действие все внутренние механизмы.

Я не хочу ничего учить, но у меня есть деньги

Поздравляем, вы избежали многих проблем. И тут же получили новые. Чтобы сделать браузерную игру хорошего качества (в плохую никто играть не будет) нужно иметь хорошую команду разработчиков, а хорошие спецы стоят денег. Если брать по минимуму, то вам необходимы:

• Программист – 2 штуки
• Дизайнер и художник – 2 штуки
• Гейм-дизайнер – 1 штука
• Комьюнити-менеджер – 1 штука
• Гейм-мастер – 1 штука.

Если у вас нет личных знакомств, то придется обращаться к аутсорсингу. Обычно такие ребята трутся на биржах фрилансеров, самой популярной их которых является 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, где тусуются все: и продвинутые геймдевы, и зеленые новички.

Так что там насчет миллиона?

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

• Не жадничайте! Более 80% игроков вообще не платят, либо платят копейки. Однако они создают массовку, на которую подтягивается крупная рыба. Сконцентрируйтесь на ней. Остальным дайте возможность резвиться бесплатно.
• Постарайтесь сделать так, чтобы донаторы не сильно выделялись из общей массы, иначе масса уйдет, оставив вас без донаторов и без денег. В общем, бряцайте мускулами аккуратно.
• Лучше всего тратят деньги те, кто не хочет тратить свое время, поэтому монетизируйте наиболее рутинные операции. Не разменивайтесь по мелочам.
• Уроки истории создания игр показывают, то онлайн-проект должен быть бесконечным. Если у геймера появится чувство, что ему нечего делать – он уйдет, а туда, где нет онлайна, новый геймер не придет никогда.

Напоследок хочется сказать – не так страшен черт, как его малюют. Даже лучшие геймдевы когда-то начинали с нуля, и кто знает, может быть именно вы станете следующим Джоном Кармаком или Ричардом Гэрриотом?

как сделать(создать свою) браузерную онлайн игру

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

A. ТЕОРИЯ
Время Ворда и Блакнота.
На этом этапе я советовал бы пользоваться этими двумя прожками и писать, записывать, конспектировать всё что вам приходит в голову.

Не просто придумать, а придумать, продумать и развить эту Идею, иначе ваша идея может со временем вам разонравиться, а развивая её, вы не только подогреете собственный интерес к ней но и увеличится ваш энтузиазм что тоже является не маловажным при создании и разработке чего либо.
На этом этапе необходимо самому себе ответить на вопрос: “в каком Мире и времени будет проходить игровое действие?” и “какого жанра будет ваш мир?”:

Стандартные игровые временные:
– Каменный век
– Средние Века
– Реальность
– Кибер-панк
– Футуристическое будущее

Далее стоит выбрать в каком жанре будет ваша игра:
– Arcade, Quests, Fighting, Racing, Strategy, FPS, TPS и др.
а так же определить возможности взаимодействия с другими игроками, какой будет ваша игра:
– Одиночая Игра
– Игра несколькими игроками сразу
– MMO и др.

Это один из важнейших этапов создания игры, к которому вы будите возвращаться ещё не раз!

На этом этапе надо подумать и ответить на нижеследующие вопросы:
– какие действия будут доступны игроку?
тут я бы советовал записывать все мысли что приходят в голову (как правило в хаотичной последовательности) затем прочесть записи добавить те что пришли во время прочтения, затем убрать те что представляют собой одно и тоже (бывает что по началу мысли кажутся разными а в последствии понимаете что это один и тот же бред) затем идёте вниз по списку и добавляете больше конкретики к каждой мысли. что бы потом не спрашивать у своего мозга: “Что ты имел ввиду под этой фразой?”

Необходимо так же продумать ещё и такие вещи как:
– Взаимодействие игрока с окружающим миром.
Что он может и при каких условиях. К примеру Войти в пещеру
– Взаимодействие игрока с другими игроками.
К примеру Торговля, Нападения
– Социальную составляющую (Добавление в друзья, Публикация в соц. сетях, Реферальные программы)

Если это РПГ то надо так же продумать:
– Рассы
– Классы
– Профессии
– Способности(Магия)
– Всевозможные предметы (их типы и классификация)
– Древо развития персонажей

Если Стратегия то надо продумать :
– Строения
– Юнитов
– Древо развития Игрока
Для любой игры характерны:
– Игровые ресурсы
Они бывают виртуальные (зарабатываемые в игре) и реальные (реал, донат)

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

О чём ещё тут можно подумать: донат ( что вы будите продавать если будите – какие услуги), аккаунты, петы, флай, Рейды, Пати, Свадьбы, Апгрейды – это ведь всё тоже часть геймплея. всё на геймплее мозг высох. иду дальше)

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

По чему Приблизительный: Да потому что Экономика – это совокупность отношений, складывающихся в системе производства, распределения, обмена и потребления(Wiki). Вот так. Короче тут надо придумать каким способом будут добываться игровые ресурсы. Как часто они будут добываться? В Каком количестве? Можно ли улучшить скорость, количество добываемых ресурсов (если да то думаем как? и идём в пункт А.3. записывать) Так же подумать как будут расцениваться в игре предметы, Юниты , Сзтоения, Способности, от чего будет зависить их стоимость и что на неё будет влиять. (чуете сколько предстоит работы?)

Почему “накидать” а не сделать идеальную экономику сразу же?
Экономика на самом деле очень сложная часть игры и достигается баланс в экономике только спустя многие дни или даже месяца. В общем лучше сперва сделать то что надо сбалансировать, затем уже заниматься балансом.
Поэтому – накидать. причём в процессе “набрасывания” вы уже почувствуете какой она должна быть.

P.S. Я бы советовал задействовать в этом пункте Excel.

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

B. ИНТЕРАКТИВ в картинках
Пришёл этап рисования.
Не советовал бы я сразу после Раздела – А браться за программирование т.к. Всё вышеописанное это лишь Идея, без чёткого визуального восприятия таковой. Вот что бы это исправить и нужен ещё 1 раздел.

Тут всё немного попроще. Здесь представляем что мы Игрок перед которым форма регистрации с полями:
1. Зарисовываем форму что бы понять как будут распологаться поля, кнопки, подсказки, иконти и т.п.(если у вас есть перечисленные элементы)
зарегились (в воображаемой форме) что дальше. дальше наверное письмо с подтверждением почты но это можно пропустить пока. далее начинается самое интересное, надо представить себе Интерфейс.
т.е. Вот зарегился игрок или просто ввёл свои данные для того что бы войти в игру. и что он будет видить при входе в игру. Интерфейс это у нас расположение кнопок и окон несущих различную информацию.
так же стоит подумать о визуальном виде всяческих подсказок и оповещалок (новый квест, достижения, сообщения)
хоп. Достижения. go Раздел А пункт 3.
Далее представляем каждое окошко по очереди которыми вы хотите наградить игру, это могут быть:
– Окно Заданий
– Окно Достижений
– Окно Настроек
– Окно Экипировки
– Окно Инвентпря
– Окно Крафта
– и разные другие примочки.

Я бы советовал на самом деле в ходе визуализации, перед зарисовкой, записывать что именно вы хотите видеть и на каком этапе, т.е. Какие кнопки, как называются?, что они делают. и другие элементы в зависимости от жанра. затем уже имея набор необходимых элементов из них делать Интерфейс. так слегка проще. Но в этом пункте вы тоже будете периодически возвращаться к истокам что бы: добавить, подправить, перенести, убрать
не бойтесь изменений. главное что бы интерфейс был удобным и понятным. иначе пользователь не разберётся в нём и покинет игру.
Советы:
– не используйте сразу супер графику и рисунки, сперва лучше сделать для тестовой версии игры графику от балды, что бы не терять время на её рисовку, а рисовать уже утверждённые вещи.
– Рассчитывайте при позиционировании элементов на то что у вас может появиться идея ещё что нибудь вставить рядом с каким нибудь элементом. либо что элементов может быть множество. к примеру квестовые оповещения вдруг у вас будет оповещение тип:
– Квест Выполнен
– Уровень Повышен
– У вас Новое Задание
– У Вас Новое задание
т.е. тут 4 оповещалки сразу. и если такого не предусмотреть, то либо вёрстка полетит к чертям либо игрок не увидит 3 других оповещения.

Первый этап практики я бы отметил это создание Архитектуры базы данных.
тут надо правильно распределять по таблицам данные которые вы хотите сохранять на сервере.
К примеру таблица `users` с полями: id, login, passsword, email, gender, birthday, charborn, avatar
таблица `world` с полями: id, x, y, city, url, type
и таких таблиц будет не мало. Ну не менее 20 вроде, для средненькой сложности игрушки.
При этом так же надо уже учитывать какие связи будут между таблицами.

на этом этапе уже необходимо продумывать логику движка игры:
– какие будут события и условия;
– Определять всевозможные Типы и Структуры для элементов игры;
– анализировать насколько схожи условия;
– возможность написания универсальных функций;

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

на этом этапе продумывается логика клиентской части Игры:
В принципе вы это уже сделали в разделе B
но на этом этапе оно всё реализуется.
тоже описывать не буду т.к. тот же кодинг те же действия что и с серверной частью.

D. КОММАНДА
Я реалист.
В одиночку всё вышеперечисленное сделает лишь Настоящий Гений, я имею ввиду то что:

• все задумки и идеи будут реализованы;
• оно будет функционировать без фатальных багов;
• игра не загнётся за первый месяц;

А так глядя на мир трезвыми глазами и здравым рассудком могу сказать что длятого что бы сделать свою браузерную игру надо учиться не только:

• программировать на (JS,PHP,MySQL),
• верстать (HTML, CSS),
• рисовать (Photoshop, CorelDraw, Flash),
• тестировать,
• строить архитектуры БД

но так же Вам придётся научиться управлять человеческими ресурсами которые будут в вашей команде.
А для начала необходимо эти ресурсы приобрести, точнее заполучить.
Далее назначать им задачи, а полученный от них результат компоновать в единый “продукт”.

Большенство из нас и тех кто это читает прогеры, соответственно Вам скорей всего понадобится хотя бы 1 нормальный художник т.к. браузерная игра должна сперва визуально привлечь игрока, а привлекает игра своими картинками и иллюстрациями, при наличии изображений унылого характера, вы только оттолкнёте пользователей.
Так же нужен хороший дизайнер. который из ваших зарисовок Раздела В должен будет сделать “канфетку”.
В некоторых случаях, при отвутствии знаний или опыта, могут потребоваться:

• Верстальщики,
• PHP-Програмисты,
• JavaScript-програмисты,
• SEO-шники
• а в некоторых случаях Деньги и Мозги ^^

P.S. Я не стал описывать процесс создания GUI т.к. это ещё больше текста и это наверное отдельная тема.

Вот вроде в общих словах Вам описал: “что нужно что бы самому сделать и создать браузерную онлайн игру?” ( с нуля )

В общем процесс этот весьма увлекательный, но и весьма Трудоёмкий, а так же сложный.
Я уже года эдак 2 – 3 хочу сделать игру вот добрался до раздела С =Р

Всё вышеописанное является моим ИМХО. возможно я где то не прав, но как мне думается схема вполне приемлема.

Как создать собственную игру-бродилку онлайн

Бродилка — жанр приключенческих компьютерных игр, герой которых перемещается по неизвестной местности для нахождения какого-либо объекта. Пожалуй, бродилки — это вечнозеленый жанр со времен Acornsoft Labyrinth (и тому подобного). На любом игровом портале или том же Google Play сотни такого рода игр. Учитывая популярность и востребованность жанра, у многих возникает вопрос — как создать свою игру.

Существуют десятки движков разного уровня сложности (Unity, Unreal Engine и так далее). В этой статье продемонстрирую функционал игрового движка Gamefroot с базовым набором возможностей . Его п люсом является возможность «клепать» игры прямо в браузере без установки софта на диск. Результат можно проверить там же, запустив предпросмотр.

Основные инструменты Gamefroot

После создания аккаунта вам доступна контрольная панель (Dashboard), где вы можете создать игру с чистого листа или оценить возможности платформы, выбрав Game Kits — готовые игровые наборы, либо Tutorial Games — учебные игры.

Например, выбираем Maia the Brave и попадаем в заготовку лесной бродилки с персонажем-девушкой. Выглядит неплохо, правда?

Возможностей графики хватает для создания приличных бродилок. В левой части экрана имеются различные объекты, которые можем добавлять в игру простым перетаскиванием. Имеются три раздела Media, Code и Levels — отвечающие за объекты, код игры и ее уровни — естественно, можно делать многоуровневую бродилку со сложной логикой и скриптами. Кроме того, имеется маркетплейс — страница, где можно приобретать (Premium) или скачивать бесплатно (Free) разнообразные наборы предметов для игры и тому подобное. Это очень облегчает создание игры. Собственных персонажей можно создавать при помощи кнопки Character Creator, постепенно «собирая» их.

В середине находится игровой экран, а также карта всего «царства» (уровня), масштаб которого можно менять кнопками – и +.

Справа расположено окно, в котором платформа предоставляет возможность работать со слоями (Layers), создавать достаточно сложную логику поведения объектов — это реализовано при нажатии на них правой кнопкой. Для удобства окно Layers можно перетащить в любое место экрана, если оно закрывает какую-то нужную в данный момент часть.

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

Далее мы видим слой Park objects, к которому относятся объекты парка — в данном случае это деревья. Их также можно двигать и модифицировать. Ниже находится слой Collectibles, самый вожделенный для любителей игр. В него можно добавлять те самые предметы, которые требуется собирать: монеты, шоколадки, одним словом, клад (gem). В левой части экрана есть выбор из 6 таких предметов. Они имеют статус pre-scripted asset — то есть предмет, имеющий заданное скриптом заранее поведение.

Следующий слой Non-Player — это другие персонажи, не относящиеся к главному. Здесь это некоторые животные. Их тоже можно перетащить на основной экран и добавить в игру. Например, это Dr. Peck — птичка в стиле Angry Birds, расхаживающая туда-сюда. Выглядит это просто потрясающе, в лучших традициях бродилок. Что особенно приятно, процесс расхаживания птички можно редактировать в редакторе анимации Animation Editor, управляя ей покадрово. Для этого надо нажать на птичку правой кнопкой и выбрать Dr. Peck -> View Animation. А при контакте девушки с птичкой появляется сообщение, либо можно запрограммировать другую логику на ваш вкус. Также есть слои с водоемами (Water), дорожками (Paths) и насаждениями (Hedges). Их можно включать или отключать, по аналогии с Adobe Photoshop.

Слой Background отвечает за фон игры. Также важным моментом является добавление нового слоя. Это можно сделать, нажав плюсик справа от надписи Layers. На выбор будет два варианта: New Layer (добавление нового слоя) и New Tile Map (добавление сетки для выравнивания элементов). Последнее требуется для того, чтобы расположить элементы ровно по сетке.

Проверить, как работает игра в режиме предпросмотра можно, нажав кнопку Play. Разрешение игры меняется в разделе Game Settings. По умолчанию это 960×540. А общий размер игрового мира находится в разделе Levels, по умолчанию это 2800×2880, довольно масштабная бродилочка.

В разделе Scripts можно создавать обработчики событий по нажатию на клавишу и все в таком роде — полное управление событиями в игре. Слева цветами выделены разные категории — можно управлять звуком, физикой, анимацией, событиями, переменными и так далее. То есть назначать те или иные действия при запуске игры, достижении уровня и так далее. Например, задавать кнопки управления, скорость бега. Возможностей очень много, можно импортировать и экспортировать скрипты. Этот раздел наиболее сложный для освоения, но с помощью обучающих примеров можно разобраться. Для начала можно попрактиковаться на готовых примерах, в которых уже встроены скрипты.

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

С помощью Gamefroot можно встроить игру на собственный сайт, предоставляется embed-код. Получится вот такая игра (на третьем слайде нажмите Play):

Читайте также

10 альтернативных игровых движков

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

• Construct 3. Браузерный кросс-платформенный визуальный движок разработки игр.
• Game Maker: Studio. П озволяет писать расширения под множество платформ на соответствующих им языках.
• Unity. Одна из самых известных платформ. Позволяет создавать 3D-игры. Основными преимуществами Unity являются наличие визуальной среды разработки, межплатформенной поддержки и модульной системы компонентов. К недостаткам относят появление сложностей при работе с многокомпонентными схемами и затруднения при подключении внешних библиотек.
• GDevelop. Open-source браузерный кросс-платформенный визуальный движок разработки игр, также есть версия для скачивания
• GameSalad. Движок с платной подпиской (абонентской платой), позволяющий создавать игры для Android, iOS и на HTML5. Приложение основано на принципе Drag-and-drop специально для людей, не знающих программирование.
• Buildbox. Скачиваемая платформа для разработки мобильных игр, есть бесплатная и платная версии, различающиеся функционалом. Знание программирования не требуется.
• Godot Engine. Мощный открытый кроссплатформенный 2D и 3D игровой движок под лицензией MIT. Игра создаётся с использованием собственного высокоуровневого динамически типизированного скриптового языка программирования под названием GDScript, синтаксис которого напоминает язык Python.
• Unreal Engine. Мощнейший всемирно известный трехмерный движок. Написанный на языке C++, движок позволяет создавать игры для большинства операционных систем и платформ. Со 2 марта 2015 года Unreal Engine 4 стал бесплатным. Разработчики игр должны передавать 5% от выручки с продаж игры компании Epic Games, если ежеквартальная выручка превышает $3000.
• Panda3D. Движок малоизвестный, разработан компанией «Дисней» и в последствии передан университету CMU и сообществу. Движок написан на языке C++ и небольшая его часть — на Python. Panda3D спроектирован таким образом, чтобы разработка проектов с его использованием велась на языке Python в большей степени, а также на языке C++.
• Stencyl. Скачиваемый кроссплатформенный конструктор игр. Stencyl работает в интеграции с онлайновым магазином компонентов игр StencylForge и сайтом Stencyl.com. На сайте расположены учебные материалы, форумы пользователей конструктора и опубликованные ими игры. Позволяет создавать игры для платформ iOS, Android, настольных компьютеров под управлением Windows, Linux и Mac OS, а также игр в формате Adobe Flash и HTML 5. Есть бесплатная и платные версии с расширенными возможностями.

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

Как написать игру на JavaScript

Современные браузеры позволяют создавать игры с полноценной графикой. Рассказываем, как написать простые гонки на JavaScript и HTML5.

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

Дело в том, что технология Flash тяжеловесна, а также полна уязвимостей, поэтому от неё стали отказываться. Тем более что появилась альтернатива в виде HTML5 — в этой версии появился элемент canvas.

Canvas — это холст, на котором можно рисовать с помощью JS-команд. Его можно использовать для создания анимированных фонов, различных конструкторов и, самое главное, игр.

Из этой статьи вы узнаете, как создать браузерную игру на JavaScript и HTML5. Но прежде рекомендуем ознакомиться с объектно-ориентированным программированием в JS (достаточно понимать, что такое класс, метод и объект). Оно лучше всего подходит для создания игр, потому что позволяет работать с сущностями, а не с абстрактными данными. Однако есть и недостаток: ООП не поддерживается ни в одной из версий Internet Explorer.

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

Вёрстка страницы с игрой

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

Теперь нужно добавить стили:

Обратите внимание, что в HTML элементу canvas были заданы нулевые ширина и высота, в то время как в CSS указано 100%. В этом плане холст ведёт себя как изображение. У него есть фактическое и видимое разрешение.

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

Скрипт для игры

Для начала добавим заготовку скрипта для игры:

В этом скрипте есть всё, что необходимо для создания игры: данные (массивы), функции обновления, прорисовки и управления. Остаётся только дополнить это основной логикой. То есть указать, как именно объекты будут себя вести и как будут выводиться на холст.

Логика игры

Во время вызова функции Update () будут меняться состояния игровых объектов. После этого они отрисовываются на canvas с помощью функции Draw (). То есть на самом деле мы не двигаем объекты на холсте — мы рисуем их один раз, потом меняем координаты, стираем старое изображение и выводим объекты с новыми координатами. Всё это происходит так быстро, что создаётся иллюзия движения.

Рассмотрим это на примере дороги.

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

Для этого создадим класс Road:

В массив с фонами добавляются два объекта класса Road:

Теперь можно изменить функцию Update (), чтобы положение изображений менялось с каждым кадром.

Остаётся только добавить вывод этих изображений:

Теперь можно посмотреть, как это работает в игре:

Пора добавить игрока и NPC. Для этого нужно написать класс Car. В нём будет метод Move (), с помощью которого игрок управляет своим автомобилем. Движение NPC будет осуществляться с помощью Update (), в котором просто меняется координата Y.

Как создать браузерную онлайн игру самому

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

Что понадобиться:
PSPad – программа для написания php скриптов ( можно и другие, но я пользуюсь этой и привык к ней ).
FlashDevelop – для написания флеш модулей ( далее буду писать его сокращенно FD)
xampp — сборка веб-сервера ( будем тестировать наши скрипты )

Так как я не очень хорошо рисую, все картинки буду брать из конструктора RPG Maker.
Думаю с программами определились, перейдем к описанию уроков.

Уроки:
1. Урок № 1 Обсуждение игры. Создание БД (MySQL)(линк)
2. Урок № 2 Создание формы входа и I этап регистрации (php, html, MySQL,css)(линк)
3. Урок № 3 II этап регистрации (php, FD, MySQL)(линк)
4. Урок № 4 Игровое окно. Техническое описание чата (php, FD, MySQL)(линк)
5. Урок № 5 Создание чата (php, FD, MySQL)(линк)
6. Урок № 6 Создание характеристик чара (php, FD, MySQL)(линк)
7. Урок № 7 Техническое описание инвентаря(линк)
8. Урок № 8 Создание инвентаря (php, FD, MySQL)(линк)
9. Урок № 9 Игровое поле (FD)(линк)
10. Урок № 10 Создание обьектов на игровом поле (FD)(линк)
11. Урок № 11 Создание квеста (php, FD, MySQL)(линк)
12. Урок № 12 Техническое описание модуля боя(линк)
13. Урок № 13 Создание модуля боя (php, FD, MySQL)
14. Урок № 14 Подведем итоги

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

Архив содержит:
– 22 php файла
– 1 log файл
– 11 swf файлов
– 2 файла css
– 1 папка
– 22 png файла
– 2 jpg файла
СКАЧАТЬ:
depositfiles.com
narod.yandex.ru
Исходники флешек:
depositfiles.com
narod.yandex.ru
Пароль на архив: gcup.ru

Итак начнем с сердца игры, ее Базы Данных (далее БД). Для чего она нужна? В ней будут храниться все данные, такие как: характеристики персонажа, сообщения в чате, какие предметы находяться в инвентаре и т.д. Мы будем пользоваться БД MySQL, так как она очень хорошо подходит для наших php скриптов. БД хранит в себе таблицы, в каждой таблице находяться столбцы, например таблица «users» имеет 3 столбца: “login”, “pass”, “email”. Думаю с этим разобрались.

У нас будет 7 таблиц:
users – хранит все характеристики игрока
avatar – хранит вид персонажа
chat – хранит сообщения чата
inventar – отображает какие вещи в инвентаре
quest – хранит данные о квесте
battle – хранит данные о боях
enemy – хранит данные о врагах

В дальнейшем БД может дополниться. Теперь рассмотрим каждую таблицу отдельно.
В таблице users будем хранить такие данные:
id_user – уникальный номер персонажа
email — email игрока, по нему будет осуществляться вход в игру
pass – пароль
name — имя игрока, будет отображаться в самой игре и в чате
life – жизни персонажа
atk — значение атаки
def – значение защиты
lov – значение ловкости
lvl – уровень игрока
exp – опыт игрока
В таблице avatar такие данные:
id_ava – уникальный номер аватарки
gander – какого пола персонаж
vid – какой вид у персонажа
path – путь к папке с картинками персонажа
В таблице chat такие данные:
id_msg – уникальный номер сообщения
msg – сообщение
time_msg – время когда было написано сообщение
wrt_user – кто написал
who – кому написали
В таблице inventar такие данные:
id_inv – уникальный номер вещи
name_object – название вещи
atk_up – сколько добавляет к атаке
def_up – сколько добавляет к защите
lov_up – сколько добавляет к ловкости
life_up – сколько добавляет к жизням
В таблице quest такие данные:
id_quest – уникальный номер квеста
cont_quest – завершен квест или нет?
kill_quest – сколько убито противников
В таблице battle такие данные:
id_btl – уникальный номер битвы
end_btl – исход битвы ( выиграли вы или проиграли )
В таблице enemy такие данные:
id_enm – уникальный номер врага
name_enm – имя врага
life_enm – жизни врага
atk_enm – атака
def_enm – защита
lov_enm – ловкость
exp_enm – сколько опыта даст если победить его
path_enm – путь к картинкам врага

Думаю все, если чего то не хватает, то по ходу написания доделаем. С установкой xampp я думаю разобрались. Теперь запустите его, в xampp Control Panel должно быть запущено Apache и MySQL, все остальное выключено. Напротив MySQL есть кнопка Admin, жмите на нее и попадете в утилиту phpMyAdmin, которая позволяет создавать БД. В открывшемся окне браузера находим вкладку SQL и жмем ее (картинка). Теперь пришло время создать нашу БД, а также ознакомиться со скриптовым языком SQL. Ниже приведен код и прокоментирован, если все таки возникнут вопросы, то задавайте.

200?’200px’:”+(this.scrollHeight+5)+’px’);”>
CREATE DATABASE testgame DEFAULT CHARACTER SET cp1251 COLLATE cp1251_general_ci; /* Создаем БД со стандартной кодировкой cp1251(для того что б поддерживался русский язык)*/
USE testgame; /* используем данную БД */

/* таблица персонажа */
CREATE TABLE `users` (
id_user bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
email CHAR(64), /* текстовый тип (64 символа) */
pass CHAR(32), /* текстовый тип (32 символа) */
name CHAR(32), /* текстовый тип (32 символа) */
life INT DEFAULT 50, /* числовой тип, по умолчанию равен 50 */
atk INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
def INT DEFAULT 5, /* числовой тип, по умолчанию равен 5 */
lov INT DEFAULT 7, /* числовой тип, по умолчанию равен 7 */
lvl INT DEFAULT 1, /* числовой тип, по умолчанию равен 1 */
exp INT DEFAULT 0, /* числовой тип, по умолчанию равен 0 */
PRIMARY KEY (`id_user`) /* Показываем что уникальным номером у нас являеться id_user */
) ENGINE=MyISAM DEFAULT CHARSET=cp1251; /* Обозначаем тип таблицы MyISAM. Таблицы типа MyISAM показывают хорошие результаты при выборках SELECT. Для .jktt подробного изучения читайте Самоучитель по MySQL 5 */

/* таблица аватара */
CREATE TABLE `avatar` (
id_ava bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
gander SMALLINT(1), /* Пол игрока, цыфровой тип(1 цыфра) */
vid SMALLINT(2), /* Вид игрока, цыфровой тип(2 цыфры)*/
path CHAR(32), /* Путь к папке с рисунками персонажа, текстовый тип(32 символа) */
PRIMARY KEY (`id_ava`) /* Показываем что уникальным номером у нас являеться id_ava */
) TYPE=MyISAM;

/* таблица чата */
CREATE TABLE `chat` (
id_msg bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
msg CHAR(255), /* текстовый тип(255 символов) */
time_msg CHAR(5), /* текстовый тип(5 символов) */
wrt_user CHAR(32), /* текстовый тип(32 символов) */
who CHAR(32), /* текстовый тип(32 символов) */
PRIMARY KEY (`id_msg`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;

/* таблица инвентаря */
CREATE TABLE `inventar` (
id_inv bigint(20) unsigned NOT NULL auto_increment, /* уникальный номер, который не повторяеться и с каждым новым пользователем увеличиваеться на 1 */
name_object CHAR(64),
atk_up INT(2),
def_up INT(2),
lov_up INT(2),
life_up INT(4),
PRIMARY KEY (`id_inv`) /* Показываем что уникальным номером у нас являеться id_msg */
) TYPE=MyISAM;

/* таблица квеста */
CREATE TABLE `quest` (
id_quest bigint(20) unsigned NOT NULL auto_increment,
cont_quest CHAR(32),
kill_quest INT DEFAULT 0,
PRIMARY KEY (`id_quest`)
) TYPE=MyISAM;

/* таблица боя */
CREATE TABLE `battle` (
id_btl bigint(20) unsigned NOT NULL auto_increment,
end_btl CHAR(32),
PRIMARY KEY (`id_btl`)
) TYPE=MyISAM;

/* */
CREATE TABLE `enemy` (
id_enm bigint(20) unsigned NOT NULL auto_increment,
name_enm CHAR(32),
atk_enm INT,
life_enm INT,
def_enm INT,
lov_enm INT,
exp_enm INT,
path_enm CH AR(32),
PRIMARY KEY (`id_enm`)
) TYPE=MyISAM;

/* Добавляем в таблицу данные о враге */
INSERT INTO enemy (name_enm,
atk_enm,life_enm,def_enm,lov_enm,exp_enm,path_enm)
VALUES(‘Призраки’,’7′,’40’,’6′,’4′,’10’,’path/enemy/’);

С таблицей справились, проверяем, все нормально. SQL запрос прошел удачно. На этом урок заканчиваеться, ждите продожения

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

Движки для создания браузерных MMO

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

Заработок на создании онлайн-игр

Пожалуй, самой распространенной на сегодняшний день, считается модель “free-to-play” (условно бесплатная). Игра, построенная на такой бизнес-модели, подразумевает возможность виртуальных покупок за реальные деньги. Люди все чаще открывают кошелек, чтобы придать своему герою уникальный внешний вид или купить мгновенное преимущество, на получение которого потребуется куча времени. Многие геймеры буквально живут в виртуальных мирах интересных браузерных игр. Стоит ли говорить, насколько прибыльными могут быть популярные MMO.

Хорошая идея – залог успеха

Крутые браузерные игры, вроде Ballistic и Drakensang Online, создаются командами опытных разработчиков. На создание подобных проектов уходит много времени, сил и средств. В среднем, коммерческую игру делает команда от 5-ти человек, за 3-6 месяцев с бюджетом от 1 млн. рублей. Цифры внушительные, но это не значит, что в индустрии онлайн-игр больше нет мест для новичков. Если вы опытный геймер, понимаете все тонкости игрового процесса и знаете, как сделать его интереснее, у вас отличные шансы на успех. Хорошая идея привлечет инвесторов или энтузиастов-разработчиков, которые согласятся работать за проценты от будущего дохода.

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

Выбираем движок для разработки онлайн-игр

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

Для экономии вашего времени, мы собрали лучшие инструменты для создания онлайн-игр в едином архиве. Чтобы сделать выбор ещё удобнее, мы добавили каждому материалу понятное описание, скриншоты и видеоуроки. Понравившуюся программу для создания браузерных игр, можно скачать через торрент или файлообменные сервисы (MEGA или Яндекс.Диск).