Публикация iFrame / HTML5 игры во ВКонтакте. Основы

Зачем создаются эти приложения?

Аудитория, насчитывающая миллионы пользователей, легко обеспечит качественный продукт постоянным высоко населённым комьюнити. А это в свою очередь принесет разработчику достойную прибыль. Неважно, какой путь выбран — реклама в игре или донат, затраченный труд окупится. Такое положение вещей привлекает и профессиональные студии, и новичков. В последнем случае может не быть никакой команды разработчиков. Все будет держаться на плечах одного человека. И если профессионалы знают о своей работе почти все, то у новичков часто возникает вполне резонный вопрос: «Как создать игру «В Контакте»?

Типы приложений

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

  • Flash-приложения. Они представляют собой файлы, для которых предусмотрено расширение .swf. Они делаются в среде Adobe Flash, затем производится компиляция в файл, после чего осуществляется из загрузка на сервера данного ресурса либо на свой сервер.
  • Iframe (ифрейм) приложения. Они могут делаться с применением различных технологий, предоставляемых браузерами, имеющимися на сегодняшний день. Потом на странице ВКонтакте будет возникать определенное окно, в котором люди смогут пользоваться этим приложением. Передавать и принимать данные программа будет посредством JavaScript.

Первые шаги

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

Концепция

После осмысления идеи расплывчатые и пока еще не до конца ясные формулировки придется переработать, чтобы получился осмысленный документ (на жаргоне его называют диздоком). На этом этапе нельзя дать ускользнуть ни одной мелочи. Дизайн, интерфейс, игровой процесс, системы взаимодействия и всё прочее — все должно быть задокументировано до того, как создать игру «В Контакте». Зачем это делать? В первую очередь на руках уже будут все данные, и дело останется только за воплощением. То есть в силу вступит техническая сторона работ. Во вторую очередь — чтобы не запутаться в своих же мыслях и идеях. И в последнюю — для того, чтобы можно было рассказать о своей идее другим. Человек сам по себе не может быть мастером на все руки. Кто-то хорошо разбирается в программировании, кто-то — в компоновке уровней, а кто-то — прирожденный рекламодатель. Вполне возможно, проект станет крупным, и в команду придется набрать дополнительный персонал.

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

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

Как создать игру вконтакте: Поэтапное руководство

I Этап

Создание концепта

Этот этап нужен нужен для того что бы наглядно видеть целевую аудиторию и позиционирование игры.

Создание геймплея

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

Игровая механика

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

II Этап

Разработка прототипа игры

Программисты должны разработать прототип «движка».

III Этап

Альфа-версия

На данном этапе разрабатывается концепция персонажей и графика в целом.

IV Этап

Разработка бета-версии

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

V Этап

Релиз

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

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

Кроме того, для создания приложений вконтакте необходимо знать язык программирования Action Script.

Зачем нужна игра Вконтакте?

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

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

vkblog.ru

Главная проблема

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

Главная проблема человека, который хочет создать игру — недостаточные знания в этой области либо малый опыт. Чтобы написать простейшее приложение, придется изучить JavaScript, HTML5, SCC, Ajax, а если оно многопользовательское — реализацию сокетов и базы данных. Именно из-за подобных трудностей люди часто и бросают начатое, не продвигаясь дальше диздока. Как создать игру «В Контакте», не имея таких знаний? Выход могут предоставить конструкторы. Насколько приемлемо их использование — каждый решит для себя сам. Многие подобные программы совсем не требуют умения программировать. Другие — используют свои скриптовые языки. И все же разобраться в конструкторе намного проще, чем создать что-то с ноля.

Залог успеха

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

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

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

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

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

Tululoo Game Maker

Сервис со странным названием абсолютно бесплатен и позволяет создать свое HTML5-приложение (которое потом можно будет использовать в социальной сети) за несколько кликов. Создать что-то сложное при помощи этого конструктора невозможно, но для первых шагов он подойдет в подавляющем большинстве случаев. Tululoo Game Maker имеет огромное русскоязычное комьюнити, соответственно, и множество туториалов и документации. Это не может не радовать, так как сделать свою игру «В Контакте» позволит в самые короткие сроки. После завершения работ все файлы будут скомпилированы и переданы пользователю.

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

Обложка группы и динамическая обложка

Да, да мы перешли к основе современного отображения групп «Вконтакте» к обложкам.

Это такая широкая красивая шапка группы, с которой прежде всего контактирует пользователь.

Симпатично смотрится, когда она сливается с фоном (с белым цветом) и не имеет четких границ, но тут как-бы все на откуп дизайнерам.

Динамическая обложка


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

Есть много сервисов, но вот например этот имеет максимальное количество настоек.

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

Да и многим приятно видеть свою аватарку на обложке группы…)

Возможно использование таких виджетов:

Разбирать настройки не будем, сами разберетесь) ну или посмотрите этот видос:

Стоит такое удовольствие в среднем рублей 100 в месяц.

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

Маленький лайфхак

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

ОБЯЗАТЕЛЬНО смотрите, как ваше новое оформление смотрится с мобильника: это очень важный фактор. 70 процентов пользователей ходит в ВК с телефона.

ВК обрезает обложки по краям примерно процентов по 10 с каждой стороны. Смещайте оформление ближе к центру и тогда не будет казусов например в виде отрезанных первых и последних букв названия проекта.

Игра создана. Что дальше?

  1. После создания приложения требуется разместить его в социальной сети. Так как выбран довольно популярный ресурс, никаких сложностей это не вызовет. Сначала придется загрузить все файлы игры на любой хостинг.
  2. Далее нужно открыть сайт vk.com. В нижнем поле портала найдите надпись «Разработчику» и кликните по ней.
  3. На открывшейся странице можно будет ознакомиться с подробной, но не исчерпывающей информацией о разработке игр. Так как приложение уже сделано, щелкните по ссылке «Создать приложение», она располагается в верхнем меню.
  4. На странице отобразится интерфейс с несколькими текстовыми полями, которые потребуется заполнить. Сначала укажите название игры, а затем выберите её тип (IFrame).
  5. После этого придется сделать небольшое описание своего проекта и выбрать жанр, к которому в большей степени относится игра.
  6. Дальнейшее заполнение форм не столь важно, пока не появится поле с названием «IFrame». В нем нужно указать ссылку к главному файлу игры. Если она создавалась в конструкторе Tululoo Game Maker, это адрес, ведущий к «index.html».

Небольшие заметки о быстрой публикации игр в социальных сетях. На протяжении пары недель, я экспериментировал с популярными блогами, социальными сетями, с файловыми облаками и нашел немало полезной информации, которой спешу поделиться.
Как разработчика меня всегда интересовал этот аспект, но пока я занимался мобильными платформами и PC, он как-то ускользал от внимания. Все изменилось, когда я начитался бравурных success-историй некоторых девелоперов. А почему бы и нет… Для работы с браузерными играми я остановился на Blend4Web

, в силу его тесной интеграции с
Blender
и оптимальной поддержкой
WebGL
. Пока я только изучаю, экспериментирую с открытым игровым проектом и рассказываю об этом на страницах gcup. Но у меня зреет решение, что этот движок будет использован и для коммерческих игр. До заветного финиша еще ой, как далеко. Однако, познакомиться с особенностями распространения таких игр стоит на раннем этапе. Итак, на протяжении пары недель, в свободное время, я экспериментировал с популярными блогами, социальными сетями, с файловыми облаками и нашел немало полезной информации, которой спешу поделиться. В этой части разговор пойдет про ВКонтакте и Facebook, все остальное — в следующий раз. Главная особенность размещения приложений в социальных сетях — это не подключение и использование SDK, а наличие собственного сервера, причем с протоколом HTTPS. Если популярные порталы, наподобие Kongregate, позволяют закачивать игру к себе, то здесь эта забота перекладывается целиком на разработчика. Учитывайте этот момент в своих планах. Мне удалось найти альтернативы собственному серверу, но об этом в будущей статье. Начну, пожалуй, с
BKонтакте
, так как эта социальная сеть гораздо дружелюбнее к разработчикам, нежели Facebook. Если у вас уже есть личный аккаунт в сети, то считайте себя автоматически причисленным к армии разработчиков. Так что остается только зайти под своим логином и перейти на страницу девелоперов.


Эта страница встречает разработчика после нажатия кнопки “Создать приложение”. Нужно знать, что игры в VK размещаются всегда в контейнере IFrame. Причем неважно, что вы туда поместите. Это может быть самописный движок, копия вашего сайта, приложение Blend4Web или что-нибудь другое. Просто на этом этапе выберите вариант IFrame/Flash. После подтверждения по смс, будет создано приложение VK. Я пропускаю заполнение данных об игре, заливке иконки и т.д. Куда интереснее панель “Настройки”.


В первую очередь обратите внимание на переключатель IFrame/Flash (да, он дублируется еще раз на другой странице). Для приложения HTML5 необходимо выбрать пункт IFrame. И только после выбора, появятся поля для ввода адреса вашего детища. Это может быть единый файл html, если вы экспортировали сцену через опцию Blend4Web (.html) или ссылка к плееру b4w, или просто путь к базовому файлу index.html. Не надейтесь вбить в этом поле адрес обычного, не защищенного протокола HTTP. “ВКонтакте” автоматически перебрасывает на HTTPS, поэтому обмануть систему не удастся. Собственно, на этом настройка приложения завершена и вы можете протестировать его на своей странице, а если измените текущее состояние на “видно всем”, то игру увидят все желающие (см. рис. выше). Ссылка на игру находится в списке Приложения. Кстати интересно, что нет необходимости отправлять проект на модерацию, так как он уже виден всем. Модерация необходима в тех случаях, если вы используете рекламу и монетизацию с помощью API системы или желаете, чтобы игра была размещена в каталоге приложений. Для тестирования, отладки или презентации проекта на личной странице — этого достаточно. Теперь перейдем к социальной сети Facebook
. Здесь не все так просто и однозначно. Подобно VK, в фейсбуке логин пользователя автоматически считается и логином разработчика. Но вот сама регистрация нового приложения и его настройка несколько запутана. Первоначально нужно определиться с целевой платформой. Так Facebook предлагает на выбор: iOS, Android, Facebook Canvas, Веб-сайт. В нашем случае необходимо выбрать Facebook Canvas. В дальнейшем, ничто не мешает подключить к одному проекту несколько вариантов платформ. После несложной процедуры подтверждения нового проекта, вы попадете на страницу настроек. Опций на первый взгляд гораздо больше, чем в ВКонтакте и сначала все выглядит запутанно. Так я долго искал, где указывается путь к игре. Оказалось, что по каким-то непонятным мне причинам, начальный выбор платформы чисто фиктивный и уже в параметрах Settings нужно вторично добавить Facebook Canvas (кнопка Add Platform).


Дальше вставляете в поле
Secure Canvas URL
адрес своего приложения. Причем не ссылку на отдельный файл, а именно директорию (см. рис.). Учтите, что есть еще две тонкости. Во-первых, запускаемый файл должен называться
index
. Во-вторых, нужно расширение php, а не html. Кроме того, на этой странице вы можете указать размер контейнера или оставить все по умолчанию. Ссылка на приложение находится в поле Canvas Page и представляет собой путь apps.facebook/id проекта. Теперь немного информации о хранении файлов. Уже понятно, что необходимо развертывать собственный сервер для работы с социальными сетями. Я не буду распространяться о выборе VDS, настройке Apache и т.д. Но есть одна проблема с которой сталкиваются большинство начинающих пользователей — получение сертификата
SSL
. Вкратце, SSL — это цифровая подпись вашего сайта, без которой не настроить протокол HTTPS. Обычно он покупается и за немалые деньги. Однако мне подсказали интересную статью о получении бесплатного SSL и настройке Apache для работы с ним. К сожалению, материал на английском, но очень подробный. Как видите, разместить игру в Facebook и ВКонтакте совсем несложно. Я попытался описать только те “грабли”, на которые наступал самолично. Надеюсь, статья сбережет вам немного времени.

Рейтинг
( 1 оценка, среднее 5 из 5 )
Понравилась статья? Поделиться с друзьями: