Как создать игру Вконтакте самостоятельно

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

Идея

На стене над рабочим столом жены висела открытка с девятью разноцветными квадратами (три на три), одного взгляда на которую хватило для зарождения в голове общей идеи игры. Суть такова: квадратное игровое поле состоит из клеток разных цветов, на которые можно нажимать для случайного изменения цвета клетки; один раз сменив цвет, клетка метится крестиком; три и более клетки одного цвета по горизонтали или вертикали исчезают, принося по одному очку за каждую клетку и за каждый крестик, клетки сверху над исчезнувшими «падают» вниз, а недостающие сверху создаются со случайными цветами. Игра заканчивается, когда все клетки на поле помечены крестиками и по ним нельзя щелкать.

Вывод

Как создать игру ВКонтакте? Как портировать игру на Godot для ВК? Как опубликовать игру в ВК? Легко!

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

Первая рабочая версия

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

Квадраты var go=< fld:<>,//двумерный массив с игровым полем x:10,//количество столбцов клеток игрового поля y:10,//количество строк клеток игрового поля cnt:5,//количество вариантов цветов клеток wid:50,//ширина и высота клетки в пикселях tmrc:0,//количество миллисекунд, прошедших с начала игры cclick:true,//переключатель для возможности клика (равен false во время анимации) callch:false,//переключатель для вызова функции проверки наличия минимум трех одноцветных клеток в ряд cdisap:false,//переключатель для возможности исчезновения клеток cshft:false,//переключатель для возможности «падения» клеток вниз cago:false,//переключатель для вызова функции анимации конца игры pts:0,//количество набранных очков fill:function(),//функция заполнения массива go.fld разноцветными клетками, где каждая клетка имеет вид , где c — это номер цвета клетки, f — наличие крестика в клетке, d — переключатель для исчезновения клетки pic:function(),//функция создания структуры DOM игрового поля rfpic:function(),//функция обновления структуры DOM игрового поля check:function(x,y),//функция проверки клетки игрового поля go.fld[y][x]. Возвращает false, если клетка go.fld[y][x] не находится в ряду из трех одноцветных клеток, true — в обратном случае, при этом у найденных одноцветных клеток переключатель go.fld[y][x].d меняется на true ashft:function(),//функция анимации «падения» клеток вниз adisap:function(),//функция исчезновения клеток ago:function(),//функция анимации конца игры allcheck:function(),//функция проверки игрового поля на наличие рядов одноцветных клеток isgo:function(),//функция проверки закончилась ли игра tmrf:function(),//функция выполняется по таймеру каждые 50 миллисекунд и в зависимости от состояния переключателей запускает необходимые функции start:function()//функция запуска новой игры >; go.start();

Вывод

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

Первые доработки и добавление приложения в каталог ВКонтакте

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

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

1. Делать сайт с игрой.
2. Размещать игру в социальных сетях.
3. Делать мобильное приложение.

Прочитав ряд статей и обдумав свежую информацию, я выбрал второй пункт, а в частности — ВКонтакте, так как только об этой социальной сети я имел хоть какое представление.

Сказано — сделано. Залил игру на виртуальный хостинг, зашел в раздел VK Developers на сайте Вконтакте, нашел ссылку для создания IFrame-приложения, заполнил информацию и лицезрел свою игру, подгружаемой в iframe. Пока приложение не пройдет проверку, оно не появится в каталоге приложений и видно только создателю.

Тут ко мне пришло осознание того, что приложение выглядит малопривлекательно не только с визуальной точки зрения, но и с функциональной. Последовал мозговой штурм, по результатам которого была добавлена возможность выбора размера уровня (3х3, 5х5, 7х7, 9х9, 10х10) и немного переработан интерфейс.

Вывод

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

Превращение игры для себя в некое подобие социальной игры

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

И снова Яндекс, VK API, рисунки структуры базы данных… Продумав структуру БД и протестировав работу с VK API, я сел писать серверную часть и js-функционал взаимодействия с сервером. Функционал состоял в следующем: после загрузки index.html js обращается к серверу, получает рейтинги и выводит их на странице; при нажатии на кнопку с размером игрового поля начинается новая игра, а на сервере создается запись о начале игры этим пользователем; когда игра заканчивается, на сервер отправляются результаты (время и очки). За несколько часов я справился с этой подзадачей и радостно отправил игру на проверку, заплатив залог 10 голосов (внутренняя валюта ВКонтакте).

Первый час после отправки я каждые пять минут проверял не одобрили ли приложение, потом успокоился и стал ждать. Примерно через сутки пришел ответ «Заявка на проверку отклонена. Необходимо подключить сертификат безопасности.». Так как тема подключения SSL рассмотрена во многих статьях, упомяну лишь то, что воспользовался бесплатным сертификатом от startssl.com. После следующей проверки, приложение было одобрено и добавлено в каталог.

Вывод

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

Внешний вид

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

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

Дополнительный функционал

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

Уже смирившись с тем, что игра не займет вершину лучших игр в истории человечества, ради получения новых знаний решил добавить возможность покупки новых уровней за голоса. При этом эти уровни можно открыть бесплатно, если набрать нужное количество очков за все игры. Реализация заняла пару часов — спасибо документации VK API.

Вывод

За прошедшее время с момента реализации этого функционала я заработал один голос (примерно 3 рубля при выводе денег из системы) накануне написания статьи.

Реклама и посетители

Выводы

1. Без какой-либо рекламы (таргетированная реклама, посты в сообществах, обзоры) посетителей я не получил. Но при этом, судя по моим субъективным ощущениям, с увеличением количества установок приложения повышается число уникальных пользователей за счет повышения позиции в списке Популярных приложений.
2. При использовании формата Специальный я получил максимальное количество переходов по своим объявлениям (300 переходов, из них 190 установок, на 83 500 показов за 150 рублей).
3. На рекламу моего приложения больше всего реагирует целевая аудитория Женщины до 18 лет.
4. Если выбирать способ оплаты «За показы», можно сэкономить.
5. Ни в коем случае не надо запускать объявление по рекомендуемой стоимости. Следует подбирать значение самостоятельно (иногда я начинал с стоимости в 20 раз меньшей, чем рекомендуемая), т.к. оно влияет на частоту показов, и можно обнулить свой баланс за считанные секунды с гораздо меньшей эффективностью.
6. Обязательно стоит указывать Лимит у каждого объявления, либо не пополнять баланс на крупные суммы.

Безопасность отправки данных

Как только я реализовал функционал отправки количества очков по завершению игры, меня стала посещать навязчивая мысль о нехороших игроках, которые могут посмотреть js-код и запросы с результатами, отправляемыми на сервер и отправить любое количество очков на сервер, ведь игра происходит полностью на клиенте, а на сервер можно отправить все, что угодно, главное притвориться браузером с нужным HTTP_REFERER. Потратив две недели времени, несчетное число нервов, но приобретя несколько седых волос, я понял, что подход с игрой (а точнее с рандомом) на клиенте работает только в случае повторения нескольких итераций следующего цикла:

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

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

Вывод

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

Статистика

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

Итоги

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

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

Источник: habr.com

Как создать игру в ВКонтакте

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

Залог успеха

Главным элементом, который практически в 100% случаев гарантирует успех, является идея. Именно от концепции будущей игры зависит ее популярность, а соответственно и получаемый доход. Приняв решение добавить свою игру ВК, не следует чрезмерно беспокоиться об отсутствии требуемых знаний в области программирования или компьютерного дизайна.

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

• HTML;
• CSS, Adobe Flash;
• Action Script;
• JavaScript.

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

Создание игры

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

Первый этап

Первоначально следует изучить раздел для разработчиков. Он находится по адресу: https://vk.com/dev/ . Основная документация о том, как сделать игру, а также разъяснения основных понятий находятся здесь: https://vk.com/dev/vk_how_to_start .

Для добавления игрового приложения на сайт ВК, нужно воспользоваться одним из двух вариантов:

• iFrame – предполагает размещение файлов игры на стороннем ресурсе. Пользователям ВК она будет показываться внутри встраиваемого в страницу объекта — фрейма. Подобные игры могут открываться в основном разделе https://vk.com/apps или внутри сообществ.
• Flash – предполагает загрузку файла игры на сервер социальной сети. При этом его формат должен быть «SWF». Открыть такое приложение можно только в соответствующем разделе.

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

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

Второй этап

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

• Перейти по ссылке https://vk.com/editapp?act=create .
• Указать название и платформу, на которой проводилась разработка – в нашем случае это будет «Встраиваемое приложение».
• Добавить описание.
• Указать тип добавляемого объекта – игра, приложение, VK Apps и т.п.
• Обозначит категорию: аркады, шутеры, стратегии и т.д.
• Кликнуть по кнопке «Перейти к загрузке».

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

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

Источник: zatupila.ru

Как создать игру в ВК: почувствуй себя программистом!

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

Как выбрать идею

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

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

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

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

Какие знания потребуются

Техническая сторона не так сложна, как может показаться на первый взгляд. Приложение может быть выполнено в технологии IFrame или Flash. Первый вариант является самым простым для освоения. IFrame – это система областей на сайте, в которые загружается другое содержимое с серверов третьих сторон. Здесь можно использовать любые данные, которые можно воспроизвести в браузере.

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

• JavaScript;
• SCC;
• HTML5;
• Аякс;
• Adobe Flash.

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

Конструктором для создания развлекательных проектов является Tululoo Game Maker, который распространяется бесплатно на всех популярных платформах. С его помощью вы можете создать HTML5-приложение в несколько кликов, а затем добавить игру в VK. Все файлы компилируются и передаются пользователю после завершения работы.

Как загрузить игру в ВК

Создав игру для Вконтакте, сначала загрузите ее на любой хостинг. Затем зайдите в популярную социальную сеть и сделайте следующее:

• Найдите пункт “Разработчик” в нижней части главной страницы и нажмите на него.

• Откроется окно, содержащее всю информацию для разработчиков приложений. Вы должны прочитать всю документацию “Вконтакте”.
• Выберите “Мои приложения” в верхнем поле.

• На экране нажмите на кнопку вверху или на ссылку в центре “Создать приложение”.

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

• Опишите свой проект и выберите его жанр.
• В поле с надписью “IFrame” введите адрес, по которому расположен основной файл вашей игры.

Если при создании вы использовали Tululoo Game Maker, ссылка будет вести на “index.html”.

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

Источник: faqvkontakt.ru