EdWilde

День четвертый

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

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

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

Удивительно, но за несколько дней у меня уже был работающий прототип на Android, который читал уровни из файлов и строил по ним игровое поле. Kotlin оказался простым для понимания и я уже начинал какие-то строчки кода писать сам. Если были ошибки, спрашивал чатбот, где я ошибся.

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

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

Хотя позже я его все равно заменил на иконку. Просто был приятно удивлен, что бот умеет и такое.

Пришло время поработать над ресурсами. Как минимум мне были нужны:

• Анимация завершения уровня

• Картинка заднего фона игры

• Логотип приложения

• Иконка приложения

  Забегая немного вперед, для размещения в google play так же нужны:

• Логотип разработчика (512x512)

• Header image (4096x2304) – ни больше ни меньше!

• И для страницы приложения Feature graphic - 1,024 px by 500

Анимация

В создании анимации я силен чуть меньше, чем в программировании. Тогда бот предложил использовать анимации с различных ресурсов, например lottiefiles, оговорившись, что нужно проверять их лицензии. Удивительно то, что это заработало с первого раза (почти)

Иконки

Также я понял, что в приложении нужны иконки, которые будут размещены на кнопках, иконки для навигации и перезапуска уровня. Бот посоветовал взять Material Symbols с сайта гугла. Поэтому вопрос создания собственных ассетов удавалось обойти

Картинка фона

Я хотел какую-нибудь нейтральную голубую картинку, чтобы фон отдаленно напоминал воду. Но текстурированная картинка, которую я случайно поставил в качестве фона, мне тоже нравилась Поэтому за идеями пошел в DALL-E с запросом “light blue vertical textured background”

После недолгих раздумий победила третья картинка слегка отрезанная снизу.

Логотип игры

За идеями пошел к... DALL-E. Запрос звучал «logo with text "Logic Islands" in modern style»

DALL-E точно не умеет генерировать картинки с осмысленным текстом. Перебрав несколько генераций, интересной показалась идея на второй картинке

Наспех сделал то, что потом буду дорабатывать в лого. Шрифты подбирал в «logo maker», потом чуть подпиливал в Gimp

И позже доработано в более нейтральный

Иконка приложения

Опять же DALL-E по запросу «An app icon for a puzzle game with islands, grid, and numbers. Ensure a clean, modern design suitable for Android and iOS.» старался как мог. Чем-то понравился третий вариант в этой генерации, но позже я от него откажусь

Изображения страницы разработчика

Для оформления картинок для страницы разработчика и приложения решил использовать тему роботов, намекая, что не совсем человек разрабатывал приложение. И если с лого разработчика проблем не оказалось, то Header image (4096x2304) поставил меня в тупик. DALL-E гененирует картинки только 1024.

Подумав, проапскейлил изображение с помощью Let's Enhance. Показывать его тут не буду, оно мне все еще не нравится

Feature graphic - 1,024 px by 500

Эта картинка будет показываться в google play в поисковой выдаче. Туда можно добавить видео или картинку, которая показывает, насколько приложение афигенно. DALL-E вызвался добровольцем в генерации идей:

«3d picture of water surface. a brown square of the earth. A cute robot stands on the ground and looks at the phone screen»

В целом показалось, что есть потенциал в первой картинке и ее как раз можно обрезать до 500 px. Робот конечно же должен смотреть на игровое поле разработанного им пазла. После доработки в Gimp итоговое изображение получилось вот таким:

День десятый

После поднастройки цветов текста, иконок и элементов игрового поля версия игры стала выглядеть так:

Было очевидно, что элементы расставлены криво, есть проблема с изменением формы кнопок и элементов игрового поля при выборе разных размеров. Вот как выглядели мои скругленные кнопки на большом поле. Явно что-то не то с пропорциями:

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

В итоге эта часть разработки оказалась приятной из-за своей простоты. Размещение элементов на экране в Android оказалось достаточно простым для моей задачи.

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

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

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

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

Я стал более специфичным в своих запросах. В один день я пробовал запросы вида:

“Придумай новую головоломку для телефона с новой механикой, которая ещё никогда не использовалась с примером игрового поля и его прохождением”. Ответы стали интереснее. Если я видел что-то необычное, я просил chatGPT рассказать, как играть в эту придуманную игру. Среди десятков мусорных ответов с абсолютно ужасным концептом чат мне выдал вот такое:

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

Я решил немного модифицировать эту идею, что мы должны находить острова нужного размера. А рядом с полем указывается количество ячеек земли в каждой строчке и колонке. Как бы такой вывернутый наоборот японский кроссворд. Я начал искать в интернете, есть ли уже подобная игра. И именно в таком виде не нашел. С этой идеей я и ушел спать. Ну как спать, до трех ночи думал об этой идее. Название было решено изменить. Игра будет называться "Logic Islands"

День второй. Выходной

Была суббота. На работу было не нужно. Я заперся в комнате от семьи и начал новый чат.

Заход №1. Я описал идею chatGPT и попросил сгенерировать код на Android. По-моему, я удалил уже тот чат за ненадобностью, но офигевший от моего запроса бот сказал, что он бессилен, однако может в целом рассказать, как делают игры: пишешь, тестируешь, играешь

Заход №2. Тогда я попросил сгенерировать код на JavaScript. Бот сказал, что с радостью поможет с отдельными частями, но опять же он не был создан для того, чтобы писать игры целиком.

Заход №3. Значит буду разбивать все на подзадачи и делать их отдельно. Сначала я попросил бота сгенерировать код для создания игрового поля. По-умолчанию 5x5, но, чтобы его размер был в переменной. Ушло на это попыток 10. Каждый раз генерируемый код был ужасный и бот не мог сформировать просто таблицу с правильными стилями. В одну из попыток результат оказался таким.

Следующим шагом стала обработка логики взаимодействия с полем. Мне нужно было, чтобы при нажатии на ячейку в таблице ее состояние менялось по кругу: пусто -> земля -> вода. Бот с радостью выдавал готовые куски текста. Мои знания в JavaScript все еще околонулевые. Я могу только пытаться брать куски кода и добавлять их к себе, проверять и просить чинить ошибки:

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

Я попросил его объединить два кода, из первого взять таблицу, из второго – логику кликов по ячейкам и поля вокруг таблицы. С первого раза бот новый работающий код. Теперь таблица стала выглядеть лучше

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

В этот момент произошла какая-то магия. Бот сгенерировал несколько последовательных функций, которые предложил использовать в других функциях.

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

Магия рассеялась, когда оказалось, что его код не работает. А для моего понимания он оказался слишком сложный. Через час отладки, я понял, что бот допустил логическую ошибку. Никакой из островов не может вырасти, потому что он будет соприкасаться…сам с собой. Я предложил боту изменить алгоритм. Мы формируем случайный массив начальных точек, нумеруем их. Дальше пытаемся вырастить остров в случайном направлении. Если он не соприкасается с ячейками другого острова, то можно продолжать рост. Так у меня появилось два массива, которые могут описать уровень: seeds – начальные точки и islands – массив, который будет содержать выросшие острова. Бот сгенерировал новые функции по словесному описанию.

Теперь я вижу, что острова начали заполнять пространство игрового поля. В целом выглядело все хорошо

Осталось спрятать все эти циферки и вывести их только на начальной ячейке, например вот так

Пришло время обрабатывать условия выигрыша. Я попросил бота посчитать количество клеточек земли в таблице, и если их столько сколько указано в строках или столбцах, выделять жирным. Если все это выполнилось и пользователь собрал остров нужного размера, то игра считается выигранной. Но бот стал ломать мне код игры и заходил в тупик в попытках его починить. Я стартовал новые чаты, где снова и снова просил найти ошибки, починить их и сгенерировать новый код заново. Старые чаты удалял, чтобы не путаться в них. К сожалению, я удалил и нужный мне чат, в котором успешно закончил доработку :(. Наши последний успешный диалог я начинал с того, что копировал весь код игры, объяснял концепцию игры и просил добавлять ту или иную функцию. Например, кнопку проверки на ошибки, или вывода подсказки, или открытия всего поля. Бот стал прекрасно ориентировался в контексте, и его функции стали 100% рабочими. К вечеру первого дня я появился на семейном ужине и показал концепцию. Еще очень сырую. Мне было важно понять, интересна ли она:

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

День третий. Выходной

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

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

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

Поэтому у жены появилась задача: начать играть в эту игру, чтобы насобирать интересных уровней :) А я пошел изучать, насколько сложно разрабатывать под Android

Что мне точно понравилось в этом:

• chatGPT умеет генерировать идеи. Насколько они новые и свежие оценить сложно.

• chatGPT написал около 95% кода на JavaScript. Я до сих пор не могу утверждать, что я хоть что-то знаю в этом языке. Если бы мне сейчас пришлось написать что-то с нуля, я бы растерялся.

• chatGPT можно использовать как справочник. Попросить объяснить, как делаются те или иные вещи, привести примеры кода, объяснить участки кода.

• chatGPT умеет искать ошибки в коде. Он умеет модифицировать мои функции по словестному описанию, он умеет писать код по аналогии. То есть если я что-то поправил для расчета столбцов, я пишу: вот так работает, сделай тоже самое для строк.

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

Какие особенности я заметил:

• Иногда chatGPT зацикливается. Он предлагает исправлять ошибку способом номер 1, потом когда этот способ не работает, предлагает способ номер 2. Если второй не работает, говорит, что конечно не работает (!!!), потому что нужно делать иначе, и предлагает снова первый способ с ошибкой. Выйти из этого можно, открыв новый чат, предоставить снова весь контекст, описать как не работает и попросить подумать, как можно сделать иначе. А если попросить в конце: "подумай хорошо!" то результат может быть еще лучше.

• Иногда chatGPT упорствует, где этого бы не следовало делать. Был момент, когда он говорил на явно неработающий код, что в его коде все верно, и мне нужно искать ошибку у себя.

• Иногда бот допускает логические ошибки или предлагает сложные пути решения. Всегда полезно спросить есть ли другие варианты. Очень часто они есть. Иногда они проще.

В общем и целом мне очень понравилось, что с нулевыми знаниями программирования за полтора дня был готов прототип.

С ощущением, что теперь мне море по колено я решил попробовать перенести приложение на Android и, возможно, iOS. Впереди еще полтора месяца разработки и решения различных проблем, связанных с самой разработкой, работой над ассетами и с публикацией. Если вам интересно, намекните об этом в комментариях и я продолжу. Надеюсь сделать серию постов, если не сильно захейтите :)

PS: ну и да, обычно я читатель, а не писатель