на чем пишут игры для вконтакте
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.
Платформа VK mini apps
«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.
Инфраструктура приложения VK mini app
Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.
«ВКонтакте» позволяет разместить три версии приложения:
Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.
После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.
Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.
Разработка приложения VK mini app
Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.
Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:
Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.
Компоненты уже стилизованы согласно styleguide «ВКонтакте» — пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык, находясь внутри социальной сети.
«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:
Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
Далее нам нужно просто встроить React-приложение на страницу.
Параметры открытия приложения
«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, sign. То есть фрейм с вашим приложением откроется примерно с похожим адресом: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j
Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.
Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например: youvkapp.ru#custom_param
Роутинг
Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.
Каждый View отвечает за свой пользовательский сценарий: основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
Как видно, появился ещё один пакет vkontakte:
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.
Библиотека VK Connect
Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.
Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:
В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.
«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:
VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:
VK Pay
VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:
Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.
Публикация iFrame / HTML5 игры во ВКонтакте. Основы
Сразу давайте обозначимся: тема API ВК тут рассматриваться не будет, ее я затрону в будущих материалах, так как она довольно обширна и представляет хорошие возможности. В этой статье будет самая основная часть: написание игры и публикация ее в социальной сети, как запускаемое приложение.
Что потребуется для работы:
— Текстовый редактор (на ваш вкус)
— Любой браузер, поддерживающий HTML5
— Немного свободного времени
Часть 1. Игра на HTML
Думал, что можно использовать в качестве примера, пусть это будет та же игра, что и в видеоуроке про «Две шкатулки».
Суть ее проста: перед пользователем есть две шкатулки, кликом по любой из них либо прибавляется, либо отнимается значение «score».
Вся игра изнутри выглядит так: 
И ее файлы с комментариями:
onload=«startGame(Menu, 30)» означает, что игра будет запущена с игрового состояния Menu с частотой кадров в 30.
Код игры был написан мной давно на движке j2Ds.
Часть 2. Google Drive
После написания игры, ее отладки, тестирования, встает вопрос, о том, где же разместить игру. Основное правило ВКонтакте: игра должна быть размещена на внешнем ресурсе, и доступ к ней должен осуществляться с SSL (https://).
Бесплатных хостингов, дающих такую возможность, я не нашел. Но есть «Google Диск», который умеет воспроизводить пользовательские JS/HTML файлы. Здорово! Даже если ваша игра и задействует сервер, вы можете воспользоваться AJAX мостом к нему, настроив сервер и приложение должным образом, чтобы они могли нормально взаимодействовать. Из приложения вы можете коннектиться к любым серверам даже по простому http, внутрь iFrame ВК не лезет. Но клиент игры обязан быть доступен только через «https://»
Идем на ГД:
Вы можете создать тут любое количество папок и файлов, это не имеет никакого значения, главное — создайте папку, где будет храниться игра.
Если вы посмотрите на первый скриншот, со структурой файлов игры, то поймете, что нужно перенести все файлы в диск. Для этого есть специальная функция загрузки всей папки:
После откроется диалог выбора, я выбрал папку www (в которой лежит index.html) просто загрузил ее на сервер:
Как не сложно заметить, структура файлов такая же.
Следующее, что нужно сделать — это дать доступ папке, в которой лежит index.html.
В моем случае index.html находится в папке www, поэтому выходим на уровень назад и выделяем папку www и жмем на пиктограмму открытия доступа:
Включаем доступ по ссылке (вверху справа) и копируем ссылку для общего доступа:
Этим мы открыли доступ к нашей игре всем, кто загестрирован на google. В любом сервисе. Чтобы снять и это ограничение, переходим на вкладку «расширенные», и там активируем доступ для просмотра всем в интернете:
Теперь эту ссылку вставьте в любой текстовый редактор, будем ее модифицировать:
Ссылка выглядит так:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing
Теперь жирным я выделю то, что нам нужно, остальное можно удалить:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing
Удалив все НЕжирное, получим ссылку вида:
https://0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Дописываем после https:// путь к googledrive.com/host и получаем ссылку вида:
https://googledrive.com/host/0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Скопировав ссылку в браузер, откроется ваша игра. Откроется как обычная интернет страница в интернете, но по безопасному соединению.
Не теряйте модифицированную ссылку, она нам пригодится.
После того, как вы научились открывать вашу игру через Googledrive в браузере, переходим на сайт ВКонтакте в раздел приложения:
На этой странице скроллим в самый низ и выбираем «Разработчикам», откроется страница для девелоперов:
Тут жмем «Создать приложение» и заполняем вашими данными форму:
После заполнения ВК отправит вам смс для подтверждения, введя код подтверждения (бесплатный) вас перебросит в панель управления вашими приложениями. Там будет много разной информации, вы можете походить по вкладкам, по-нажимать, по-проверять:
Теперь важный момент: приложение пока доступно для запуска только вам, как создателю, другие его не видят. Чтобы оно стало видимым для всех нужно в графе «Состояние» выбрать соответствующий пункт.
Обратим внимание на строки для ввода iFrame адреса. Тут два поля. Первое поле — адрес http, второе — https. Лучше оба заполнить в формате https, так надежнее. Ту ссылку, что мы получили путем нехитрых модификаций вставляем в адрес и сохраняем данные. После сохранения данных, можно пробовать запустить игру:
Теперь, открывая пункт «Управление приложением» вы можете манипулировать вашей игрой, смотреть статистику и т.д.
Управлять же файлами самой игры можно просто: редактируете, их, к примеру, на локальной машине, и, как только все изменения отлажены, заменяете файлы на гугл диске в нужной папке. Повторно выставлять права и доступ не нужно, так как выставлены они для всей папки, ссылки менять тоже не нужно.
Пример получившегося приложения могу дать в ЛС.
На этом у меня всё. Работа с VK API уже есть и доступна в виде видеоуроков, которые тут публиковать не буду. Ранее за публикацию видео аккаунт был заблокирован.
От желания создать игру до запуска — один шаг
Однажды я принял решение взять себя в руки, побороть лень и сделать свою игру. В этой публикации я расскажу о пути от идеи до реализации, который страшил меня много лет (и, наверняка, страшит многих), но оказался увлекательным, обучающим и сильно меняющим отношение к созданию игр.
На стене над рабочим столом жены висела открытка с девятью разноцветными квадратами (три на три), одного взгляда на которую хватило для зарождения в голове общей идеи игры. Суть такова: квадратное игровое поле состоит из клеток разных цветов, на которые можно нажимать для случайного изменения цвета клетки; один раз сменив цвет, клетка метится крестиком; три и более клетки одного цвета по горизонтали или вертикали исчезают, принося по одному очку за каждую клетку и за каждый крестик, клетки сверху над исчезнувшими «падают» вниз, а недостающие сверху создаются со случайными цветами. Игра заканчивается, когда все клетки на поле помечены крестиками и по ним нельзя щелкать.
Вывод
Первая рабочая версия
Так как последние несколько лет я работаю с html и js, то момент, когда выбирается платформа для разработки, был подсознательно пропущен. Сильный зуд в верхних конечностях и возбуждение от того, что идея игры родилась в голове быстро и безболезненно, настолько повлияли на последовательность и обдуманность действий, что через несколько секунд я уже писал код в файле squares.html.
Вкратце опишу содержание этого файла через четыре часа, когда я созерцал содеянное:
На каких языках программирования пишут игры
Новички часто спрашивают, на каком языке программирования можно создать игру. Поставим точку в этом вопросе.
Ориентироваться лучше на то, что хотите реализовать и на какой платформе:
Если создаёте игру впервые, воспользуйтесь каким-нибудь движком:
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
В чём отличие языков для создания игр
У каждого языка свои преимущества и назначение, поэтому не стоит думать, что какой-то лучше остальных — все они для решения разных задач. Многие, например, пишут большую часть проекта на одном, а высоконагруженную — на другом.
Чтобы выбрать, какой язык подойдёт вам, давайте разберемся в нескольких моментах. А для совсем новичков мы предлагаем курс «Профессия Разработчик игр на Unreal Engine 4».
Браузерные игры
Они хоть и не такие крутые, как игры для консолей и компьютеров, но тоже затягивают. Причина в умелой работе гейм-дизайнеров — они продумывают механики так, чтобы вы тратили на игру больше времени и денег.
Если вы играли хотя бы в одну крупную браузерную игру, то знаете: игровой процесс дозируют, чтобы игроку не наскучило. А чтобы продолжить игру, приходите на следующий день либо платите.
Тут уже можно подключить JavaScript — он позволяет хранить в переменных данные персонажа, а графику обрабатывать с помощью Canvas. Если прикрутить PHP, получится создать базу данных, построить защиту и реализовать многопользовательский режим. А это уже полноценная браузерная игра.
Многие из таких игр создаются на Flash, который работает на языке ActionScript. Мы не рекомендуем изучать эту технологию, потому что скоро её поддержка будет прекращена, а на HTML5 появится ещё больше возможностей, чтобы полностью её заменить.
Примеры браузерных приложений
Игры для мобильных устройств
Мобильные игры превосходят браузерные, но не сильно. Маленький экран и небольшая мощность не позволяют создавать крутую графику. И ещё нельзя реализовать такое же удобное управление, как на компьютерах и приставках.
Это компенсируется простотой разработки. Можно скачать популярный движок и за несколько недель выпустить готовое приложение — это программы, которые предоставляют готовые решения для работы с графикой и физикой. Разработчику остается только добавить спрайты или модели, а потом прописать несколько скриптов на одном из предложенных языков. Можно даже не заморачиваться из-за всех ресурсов — они скачиваются или покупаются в интернете.
Unity, один из самых популярных движков, даёт возможность писать на C# и JavaScript. Подключаете скачанные файлы, пишете несколько команд — и простенькая игра готова.
Примеры мобильных игр
Компьютерные и консольные игры
Тут настоящий размах. Реалистичная графика, VR, большой игровой мир, поддержка огромного количества игроков онлайн и так далее. Можно создавать проекты вроде Limbo или Super Meat Boy в одиночку, а можно в команде разрабатывать новый Fortnite.
Но и сложность возрастает. Чем масштабнее вы мыслите, тем больше работы предстоит проделать. Вот неполный список аспектов разработки, над которыми следует потрудиться:
В таких играх ведется работа над освещением, тенями, частицами, разрушаемостью — всем, что важно для конкретного проекта. Один человек не потянет всё это за год или даже два, поэтому такое под силу только крупным студиям. Конечно, многое решается в движках, но работа всё равно колоссальная.
Без движков тоже можно обойтись: World of WarCraft был написан на C++, а MineCraft создан одним человеком на Java, после чего игру купила компания Microsoft за 2,5 миллиарда долларов.
Даже Super Mario написали на ассемблере, когда о движках никто и не задумывался.
На чем пишут игры для вконтакте
Как создать приложение в контакте
1. Установить среду для разработки приложений.
Можно использовать Adobe Flash или Flex Builder.
Я использую Adobe Flash CS4. Это последняя версия флеша, позволяет писать приложения с использованием Action Script 3.
Можно попробовать найти и скачать в интернете или купить в магазине диск.
2. Изучить ActionScript.
Некоторые до сих пор программируют на ActionScript 2, но я считаю, что пора переходить на ActionScript 3. Но возможно его изучение окажется сложнее.
Если вы не знакомы ни с одним языком программирования, то возможно вам будет очень сложно понять эту книгу. Вам может понадобиться немало времени чтобы понять принципы программирования и написать своё первое приложение.
Будьте готовы к тому, что вам придётся потратить не один день, чтобы понять, как писать приложения.
Но уже в процессе изучения языка ActionScript, вы сможете создавать простые приложения, не использующие ВКонтакте API. Если вы захотите, то сможете загрузить их на сайт вконтакте, но такие приложения не будут одобрены.
После того как вы изучите ActionScript, понять как использовать ВКонтакте API, будет уже не сложно, и вы сможете использовать ВКонтакте API в своих приложениях.
Если вы захотите создавать приложения использующие свой сервер, тогда вам придется изучить серверный язык программирования, например PHP.
Если вы начинающий во флеш программировании, то прочтите ещё и это topic47.html
Если в процессе изучения у вас будут возникать вопросы, то вы можете поискать на них ответы в интернете или спросить на этом форуме. Но прежде чем задавать свой вопрос на этом форуме, прочтите для чего этот форум topic1.html
Без знаний не получится сразу начать создавать хорошие приложения.