Создание игры с помощью ArcGIS API for JavaScript

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

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

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

Что я хотел проверить

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

Запрос слоев сцены. Слои сцены - это открытый стандарт Esri для обмена чрезвычайно большими разнородными наборами данных с трехмерным геопространственным контентом. Слои сцены постепенно превращаются из инструментов визуализации в рабочие процессы запросов, анализа и обновления.
Геообработка на стороне клиента. Геообработка, использующая пространственные вычисления для анализа и составления отчетов на основе картографических данных, является важным инструментом в портфолио многих пользователей Esri, позволяющим им делать больше, чем просто создавать красивые карты. Большая часть работы по программированию, которую я выполнял в своей MS и начальной стадии, можно рассматривать как геообработку на стороне клиента, но работающую в EXE, написанную на Pascal, VB или C ++ и работающую с файлами или базой данных. Как выглядит такая обработка на стороне клиента (возможно, с небольшой помощью сервера) в браузере?
Настройка веб-приложения для сопоставления JavaScript примерно в 2019 г. - Забудьте обо всех модных вещах. Я использую JavaScript с 1997 года, когда это был способ передачи параметров в Java-апплет, встроенный в браузер. Я просто хотел выяснить, насколько сложно создать интересное веб-приложение с помощью инструментов Esri JavaScript.

Первоначальная идея

Было несколько повторяющихся идей, которые я закодировал снова и снова. Одним из них является Игра жизни Джона Хортона Конвея, интерактивный опыт на основе сетки, в котором вы определяете начальное состояние ячеек в сетке, а затем игра использует пространственные правила воспроизведения для итерации последующих состояний всех ячейки в сетке. Мой школьный учитель математики Ричард Ремених заинтересовал меня теорией фракталов и хаоса в конце 80-х, и Игра жизни была частым стартовым примером для ознакомления студентов с концепцией итеративных моделей. Позже это стало важным для моей работы с MS и другой работы по имитационному моделированию, которую я выполнял в колледже, включая мои первые аналитические проекты ГИС.

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

Сценарий

Сейчас 2.2.2022, вы - младший научный сотрудник корпорации Parasol. Вашей компании (тайно оборонный подрядчик) было поручено разработать биологический вектор (сурок) для распространения микроскопического агента генной инженерии (вирулентно модифицированный вирус ) по маленькому городку. Ваша задача - разработать свойства вируса, определить, куда выпустить одного или нескольких сурков в день 0, а затем сесть и понаблюдать за действием. Как хороший ученый, вы, конечно, будете собирать статистику по своим результатам и сравнивать испытания… я имею в виду… моделируемые прогоны испытаний.

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

Игра

Примерно через 30 часов освежения ржавых навыков, вновь обнаружив, что я все еще люблю выращивать свои собственные библиотеки, и тестирования 12-летним мальчиком, который неплохо разбирается в вещах, я придумал игру-симулятор сурка. Вы можете попробовать это здесь: http://bit.ly/GroundhogCity

Механика игры довольно проста.

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

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

Приложение включает в себя множество важных функций, которые мне не нужно было создавать. Есть несколько базовых готовых взаимодействий с картой, которые являются стандартными для работы с Esri 3D WebGL, например, использование колеса мыши или нажатие и нажатие сенсорных экранов для увеличения и уменьшения масштаба. Загрузить слой сцены и запросить его было несложно. Я также мог выборочно выбирать и настраивать элементы управления, предоставляемые ArcGIS, такие как полноэкранный элемент управления (единственный элемент управления по умолчанию, который я сохранил).

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

Некоторые вещи, которые я узнал по ходу дела

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

Запрос слоев сцены - слои сцены (в частности, слои трехмерных объектов и трехмерных точечных сцен) теперь доступны для запросов, и я смог продемонстрировать это, используя как запросы атрибутов к идентификаторам объектов объектов, так и запросы пространственного пересечения. Можно выполнить некоторые запросы к клиентскому представлению слоев сцены, но для того, что я хотел сделать, необходимо было запросить исходные данные в облаке.
Геообработка на стороне клиента. Для моих целей я мог изучить механизм геометрии JavaScript, поиграть с графикой карты и связать вместе серию аналитических операций таким образом, чтобы я смог создать модель распространение эффекта по всей геопространственной системе. Модель могла быть более сложной, но это было бы на мое усмотрение. Достаточно сложные операции можно комбинировать с помощью стандартных инструментов программирования в рабочих процессах геообработки даже в веб-браузере.
Картографические приложения JavaScript. Оказалось, что это самая простая часть. Честно говоря, в прошлом я создал несколько приемов примеров приложений ArcGIS, но на этот раз я хотел создать что-то более законченное. Как только я почувствовал ArcGIS for JavaScript API, материал ArcGIS стал мне больше не мешал, и я смог сосредоточиться на том, чтобы моя игра действительно работала.

Я поделился с командой еще несколькими уроками:

Архитектура Promises - Promises были введены в последние несколько лет, чтобы обеспечить лучший интерфейс для асинхронного кодирования на JavaScript, чем собственные библиотеки AJAX, которые нравятся людям. меня заставляли. Для сложного рабочего процесса, такого как итеративная многоступенчатая игра, Promises может быть немного запутанным, и я прибег к использованию async / await, чтобы упростить свой код. Я также не люблю скрывать много кода в шаблоне .then (), который требуется Promises. За это пришлось заплатить. Я потерял некоторую интерактивность (карта зависает во время итераций), и я, возможно, захочу отменить это в какой-то момент в будущем. Это будет умеренно сложной задачей, потому что мне нужно будет написать диспетчер состояний, который, по сути, управляет выполнением симуляции после завершения асинхронных вызовов. Для многих рабочих процессов геообработки предпочтительнее использовать async / await.
Атрибуты на стороне клиента. Одна из интересных особенностей игр-симуляторов, подобных тому, что я создал, или более реалистичных имитаций популяции муравьев, которые я делал в магистратуре, заключается в том, что вы часто вычисляете эфемерные характеристики. атрибуты, которые вы хотите использовать в качестве временных состояний в вашей модели. Чтобы добиться этого в моем приложении, я поддерживаю отдельные массивы значений, не связанные со слоем сцены, который фактически является таблицей базы данных с моими исходными данными. Я бы предпочел иметь возможность создавать какой-то виртуальный столбец на стороне клиента, динамически добавляемый к этому набору данных, который работал бы с вычислениями и с рендерерами для символов карты.
Работает на телефоне. Одним из самых крутых аспектов ArcGIS API for JavaScript является то, что команда приложила много усилий, чтобы убедиться, что он работает на мобильных устройствах. Благодаря интеллектуальному дизайну интерфейса было довольно легко создать опыт, который можно использовать на телефоне.

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

А как насчет Fortnite?

Fortnite по-прежнему запрещен до дальнейшего уведомления, но это был отличный момент для обучения. Мой сын выяснил из моделирования, что географические объекты, такие как дороги, могут создавать неожиданные препятствия для распространения эффектов. Он также узнал, что пересечение с геометрией - дело точное, даже в веб-браузере. И, конечно же, он подумал, что это здорово, что я вообще смог создать игру.

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

Благодарности

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

Большое спасибо за упорный труд команды Esri JavaScript, которая выполнила 99% работы, которая сделала мои несколько часов программирования плодотворными.

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

Fortnite является зарегистрированным товарным знаком Epic Games, Inc. в Соединенных Штатах Америки и других странах.