Kempston

Сейчас меня убьют. А если не убьют, то люто заминусуют. И у меня, как поет Игорь Николаев, есть на это пять причин. Но мне плевать.

1. Во-первых, я написал карточную игру в покер. Это же аморально. Как можно такое делать, в такое играть. Фу. Где же ваши семейные ценности и благопристойное поведение.

2. Во-вторых. Этот покер - Техасский Холдем. Он же американский! Кроме того, в него играют в городе греха Лас-Вегасе! Фу-фу! Патриоты взвыли.

3. В-третьих. Там будет жесткий донат. Ну, ладно, не жесткий донат, а мягкий триал 30 дней. Это - в Фейсбуке и ВК. Священники напряглись: нехорошо... Лучше бы бесплатно раздавал всем нуждающимся.

4. В-четвертых. Мне наплевать на все эти терзания. Я просто люблю атмосферу Вегаса по фильмам. С этими всеми казиношными фишками, ковбоями в шляпах, гангстерами, полуголыми официантками... Фу! Аморально и отвратительно!

5. Ну и пятое, самое страшное. Игра написана - т-с-с, только никому не говорите - на чистом Javascript. Кто-то, возможно, подумает, что вот здесь, как раз, и начинается настоящее порно.

Дизайн - это не мое. Но я включил радио K-Rose из GTA San-Andreas и несколько вдохновился на создание дизайна. Еще и прокатившись по Лас-Вентурасу, для большего антуража. Вот оно, вдохновение:

Теперь - про аскетичное программирование. Я давно снес Visual Studio и пишу код в подобии продвинутого блокнота, с подсветкой синтаксиса. Зато игра весит всего 5 Мб, быстро загружается, быстро работает в браузере.

Игра называется «Poker 3 Bags», она написана на чистом Javascript, без сторонних библиотек (даже без JQuery). Онлайн игры пока нет - позже. основная фишка в том, что в моей игре можно просматривать все покерные комбинации - как те, что уже собраны, так и потенциально возможные. Это может послужить обучающим пособием для их запоминания. Кроме того, там есть еще две игры, включая мою, авторскую.

Все работает как браузерное расширение в обоих веб-сторах - Chrome и Firefox. Еще - в качестве i-freme приложений ВК и Facebook. Ну и еще я собрал установщик под Windows и закинул в разные магазины приложений (не в Стим). Таким образом, подобный подход позволяет создавать простой, легкий код, работоспособный везде, где только можно использовать Javascript.

Насчет VK mini apps - я пока не уверен, стоит ли туда идти. Насколько я понимаю, для оплаты в приложениях там используется система VK Pay. То есть, ее нужно подключить, более того, нужно, чтобы еще и игроки в ней регистрировались с целью произвести оплату. Или я что-то не так понимаю? Кроме того, для приема платежей необходимо подключиться к платежному агрегатору mail.ru... Как-то все сложно.

Что касается Фейсбука, то мне так и не удалось подтвердить свою компанию (ИП) для того, чтобы принимать платежи. Там требуется подтвердить компанию по e-mail либо по телефону. Это я сделал. Но далее требуют документ, который бы показывал привязку номера телефона, либо почтовый домен к компании. А в ОГРН ИП не указывается ни то, ни другое. Там указаны адрес и имя. И приложенный документ от оператора сотовой связи о регистрации телефонного номера на мое имя не прокатил. Нужно, чтобы все было именно в одном документе... Как-то Фейсбук не особо хочет работать с ИП. В общем, я забил на прием платежей в Фейсбуке и выложил туда только бесплатную версию.

Вот, что получилось. Видос из игры:

В коде используется только одна, моя, библиотека. Вкратце, она создает два блочных элемента канвас (canvas), наложенных один на другой и растянутых на весь размер окна браузера. Нижний канвас используется для статического контента, а верхний - для анимации. Тем самым, достигается высокая скорость работы: никаких летающих div-ов со спрайтами, которые перемещаясь, постоянно вызывают перерисовку DOM. Короче, получилось лучше, чем HTML-5. Ну и весь контент подстраивается под любой размер окна браузера, динамически уменьшаясь или увеличиваясь.

Мобильные устройства

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

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

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

Вначале были маски...

Летом 2019-го из статуса беты вышла среда разработки эффектов дополненной реальности для Facebook и Instagram - Spark AR Studio, созданная на основе разработок одной белорусской команды. Эта команда выпустила приложение MSQRD, которое затем было приобретено Facebook-ом. Теперь маски в Инстаграм могут делать все, кто пожелает.

Игры круче

Но меня больше всего заинтересовала возможность в Spark AR Studio писать скрипты. Таким образом можно создавать игры в Инстаграм, в том числе, с использованием трехмерной графики. Сначала я создал игровое поле и фигуры.

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

Обратите внимание, что меши (3x3 квадратика каждого из трех цветов) именованы определенным образом: от b11 до b33, от g11 до g33 и от r11 до r33, где каждая цифра изменяется в диапазоне от 1 до 3. Иными словами, буква обозначает цвет, а цифры - строку и столбец. Это будет нужно потом для доступа к мешам из скрипта.

Фигуры также именуются от x11 до x33 и от o11 до o33. Не смотрите пока, что их текстура такая «веселенькая». Это сделано для удобства работы с UV-разверткой. В самой игре я заменил текстуру на более спокойную.

3D модели сохраняются в формат FBX и импортируются в Spark AR Studio.

Я не буду описывать процесс создания маски - уроков на эту тему предостаточно в Интернете. Перейду сразу к процессу создания игры.

Программирование

Подключаем в Assets (кликнув внизу слева +Add Asset) элемент Script. И помимо 3D моделей, в списке появится script.js. По клику на него открывается внешний редактор скриптов. Да, игры здесь пишутся на JavaScript. Тестировать игру можно, подключив к компьютеру телефон с установленным Sapkr AR Player (для Android или iOS). Опишу основные моменты и особенности программирования в Spark AR Studio.

Доступ к именованному мешу, например, к синему квадратику в первой строке, втором столбце игрового поля:

Scene.root.find('b12');

(Вспомним, b12 - так мы именовали данный меш в 3D редакторе.)

Сокрытие нолика (o), постановка крестика (x) и окрашивание в зеленый цвет (g) ячейки поля '32' (третья строка второй столбец):

// figure

Scene.root.find('o32').hidden = true;

Scene.root.find('x32').hidden = false;

// background

Scene.root.find('b32').hidden = true;

Scene.root.find('g32').hidden = false;

Scene.root.find('r32').hidden = true;

Подсвеченный зеленым крестик в поле '32'

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

//vert: fov+ back-

FaceTracking.face(0).cameraTransform.rotationX.monitor().subscribe(function(event) {

var v = event.newValue;

...

});

//hor: rt+ dn-

FaceTracking.face(0).cameraTransform.rotationY.monitor().subscribe(function(event) {

var v = event.newValue;

...

});

Дабл блинк?

Теперь вы будете рассказывать своим знакомым о том, что мышь уже устарела и что сегодня для клика используется двойное моргание! Double blink. Почему двойное? Одинарное человек делает непроизвольно периодически, поэтому не стоит навешивать какие-либо события на него. Реализуется это тоже при помощи событий, только leftEye.openness и rightEye.openness. Наконец, подключим звуки.

Загрузка игры в Инстаграм

Сначала надо создать билды под Andriod и iOS. Для этого просто выбираем File -> Export. Получаем файл, который нужно загрузить на Spark AR Hub в Facebook /sparkarhub. Также туда требуется загрузить демонстрационное видео, причем, оно должно быть снято на телефон через камеру Инстаграм. Для этого в хабе дается ссылка, которую надо открыть на мобильном устройстве. Запустится приложение Инстаграм и в нем откроется маска (игра). Можно также попросить всех своих друзей протестировать игру по этой ссылке. Затем игра отправляется на модерацию.

Модерация обычно занимает 2-3 дня. После этого игра будет видна всем пользователям Инстаграм через ваш профайл, либо по прямой ссылке.

Однажды я поиграл в самого первого «Принца Персии» 1989 года и мне понравилась концепция. Настолько, что я решил создать собственный платформер. В моей игре «Перси Ланскастер 3D», как можно понять из ее названия, присутствует уже не 2D, а 3D графика. Также в ней есть динамическое освещение и скроллинг во время движения.

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

Я, конечно, не стал изобретать полностью свой движок: на это ушло бы слишком много времени. Хотя, есть такая задумка на будущее. А пока я воспользоваться библиотекой Three.js, функция которой заключается в том, просто отображать 3D сцену. Анимации, физику, графику и все остальное я делаю сам. Мне кажется, это придает игре индивидуальность. Правда, я не 3D моделер и графика мне дается с трудом.

Three.js - это скриптовая библиотека, и вся игра вообще написана на JavaScript. То есть, она может работать в браузере. Но это в будущем. А сейчас я пока разместил в Стиме демоверсию в виде сборки на Webkit. Позже я запущу и браузерную версию для всех популярных браузеров под Windows, Android, iOs, MacOS, Linux. Игра поддерживает геймпад и тач-скрин и адаптируется под размер окна браузера, если нажать Y.

Вт короткое видео, демонстрирующее возможности:

Пока я работаю над игрой, как вы понимаете, один. Но это очень интересно. Я нашел опытным путем и оптимизировал для себя процессы создания уровней, внедрения анимации, управления, движения камеры. Например, уровни создаются таким образом. Сначала в обычном графическом редакторе я составляю схему. Затем обрабатываю ее написанным мной скриптом: это дает список блоков и их координаты, которые потом используются в игре в качестве коллайдеров. Затем в 3D редакторе я строю уровень по схеме. Запекаю тени. И сохраняю все это в формате json. А в игре при движении игрока определяются столкновения с этими блоками.

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

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

Мне еще предстоит создать врагов и боевую систему и усовершенствовать графику. Я пытаюсь продвигать игру в Твиттере, где я набрал 400 подписчиков, и на Патреоне. А также в Steam, Itch и indiexpo. Кроме того, к несчастью, Indiegogo больше не работает с Россией. По крайней мере, в службе поддержки мне ответили, что запустить мой проект из мой страны нельзя. Я создал его где-то летом, и, судя по всему, тогда же, чуть позже, и прекратилась работа с Россией. Жаль, я возлагал на этот сервис некие надежды. Идти на краудфандинг через посредников я не хочу. Тогда я решил пойти на Патреон, где предложил всем подписчикам игру бесплатно, когда она будет готова. По сути, можно быть подписчиком 1 месяц и получить игру за $1. Но пока там получается на очень, потому что Патреон не продвигает ничего сам, туда надо еще нагнать трафика. А что вы думаете об этой площадке?

А сюжет игры таков.

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

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

По мере того, как вы будете выбираться, вы будете находить ответы на свои вопросы. Каменные стены нижних уровней сменятся на более современные метало-пластиковые на верхних. А затем вместо факелов, вам начнут встречаться электрические лампы и компьютеры. Значит, вы не средневековый воин? Но кто же построил все это? И что там выше? Наконец, вы поймете, что это за место, и вспомните те события, которые здесь произошли в недавнем прошлом. Также вы осознаете свою роль в этой истории. После этого у вас останется не так много времени, чтобы спастись...

Поиграть можно на Steam или скачать с Itch. Хочу отметить, что там только прототип первого, подземного, уровня. В дальнейшем графика и анимация будут улучшаться

Страница игры в Steam: ССЫЛКА