Gamedev + Веб-разработка

Мы и дальше будем делиться с вами всеми новостями!

Будем рады вашему мнению и поддержке!

Ссылки:
Игра “Эхо 423”
Наше сообщество ВК
Наш канал в Телеграм

Что такое Echo 423?
Это атмосферная научно-фантастическая игра во вселенной «Эхо». Вас ждёт исследование загадочной планеты, случайные события, необычные объекты и множество решений, влияющих на развитие истории.

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

Присоединиться можно прямо сейчас:
https://nakayn.theecho.ru/

Игра запускается прямо в браузере — ничего устанавливать не нужно.

Если вы любите sci-fi, эксперименты и исследования — заходите, пробуйте, и обязательно делитесь впечатлениями. (https://m.vk.com/wall-227906685_91?from=group )

Спасибо всем, кто следил за разработкой. Это важный шаг — и мы рады пройти его вместе с вами.

Привет! Я Антон Георгиев. Работаю Frontend-разработчиком, а после работы делаю свои пет-проекты. Мы с другом решили запустить 12 стартапов за 12 месяцев. Про это пишем в нашем Телеграм-канале «Инди-хакеры: стартапы из 💩 и 🥢».

Эта история про наш 2-й продукт из 12. Весь путь от идеи до запуска мы прошли за 1 месяц. А первых 100 пользователей мы привлекли уже через 2 недели, не потратив ни копейки на маркетинг. Вот результаты за 90 дней жизни продукта Save Emails from Gmail as PDF:

Выбор идеи

Идея возникла довольно просто. Мы изучали рынок расширений для Google Chrome, перебирали разные направления, пока не наткнулись на нишу плагинов для Gmail. Заинтересовались, начали глубже копать и нашли компанию CloudHQ, которая делает исключительно расширения для работы с сервисами Google.

Мы нашли все их расширения и отсортировали по самым популярным. Среди топ-5 их расширений был продукт «Save Emails as PDF», у которого было 100 000 пользователей. Это функция сохранения писем и вложений из Gmail в формате PDF. Можно выделить сразу несколько писем, нажать кнопку экспорт и все письма вместе с файлами, картинками, видосиками и документами сохраняются на компьютер.

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

Мы проверили спрос по ключевым словам в поиске и изучили обсуждения на Reddit. Оказалось, у многих такая же проблема. Пользователи ищут способы массово сохранять письма из Gmail в PDF.

Так родилась идея создать простое расширение, которое одним кликом формирует PDF-документ со всеми выбранными письмами и вложениями.

Разработка

Разработка оказалась непростой. Сначала я изучил множество библиотек для конвертации HTML в PDF и JPEG в PDF на фронтенде, но большинство из них были устаревшими и плохо справлялись с задачей. Я рассматривал вариант делать обработку на backend. Просто отправлять туда HTML или URL и генерировать PDF на сервере. Но быстро понял, что это небезопасно. Важно было избежать пересылки и хранения личных данных.

В итоге я решил реализовать всё полностью на frontend. Чтобы разобраться, как это лучше сделать, я даже скачал исходники расширения одного из конкурентов. Посмотрел, как все устроено у них. Понял, что идея собирать PDF из HTML с помощью JavaScript, вполне рабочая. Это позволило сохранить верстку писем и оставить текст выделяемым.

Самой сложной проблемой была «плавающая» верстка. Элементы постоянно смещались, ломались стили. После множества экспериментов мне удалось подобрать оптимальное решение. Сейчас большинство писем и вложений отображаются корректно.

Весь контент в PDF (текст, изображения, линии) позиционируется вручную по координатам x, y. Для этого используется библиотека jsPDF.

Логика работы:

1. Обработка DOM-дерева.

Я прохожу по каждому узлу DOM, получаю размеры и стили элементов через:

node.getBoundingClientRect() — размеры и положение элемента на экране.

window.getComputedStyle() — CSS-стили (шрифты, цвета, границы).

2. Элементы добавляются в PDF, используя методы jsPDF.

Для текста:

doc.text(value, x, y);

Для изображений:

doc.addImage(imageData, 'PNG', x, y, width, height);

Для линий (границ элементов):

doc.line(x1, y1, x2, y2); — значения x, y здесь - это абсолютные координаты относительно текущей страницы PDF.

Я выделил несколько особенностей:

• Каждая страница PDF имеет фиксированный размер (например, Letter — 612x792 pt).

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

• Если элемент не помещается в оставшееся пространство текущей страницы, то я вставляю невидимые элементы-заполнители (fake-объекты), чтобы автоматически переместить контент на следующую страницу. Из-за этого на странице бывают пустоты.

Загрузка вложений и изображений

Сначала я простым селектором “.att a” нахожу все ссылки на вложения и изображения из письма, а потом скачиваю их. Данные загружаются в виде Blob, затем преобразуются в DataURL с помощью FileReader. SVG конвертируется в PNG при помощи библиотеки Canvg, чтобы затем вставить в PDF:

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

Заполнение fake-объектами и перенос контента

Если масштабированное изображение не помещается в оставшееся пространство на текущей странице, я вставляю fake-объекты (пустые HTML-элементы), которые сдвигают контент на следующую страницу.

Логика вставки fake-объекта:

Как это работает

• Я рассчитываю, сколько свободного места осталось до конца текущей страницы (availableSpace).

• Если высота текущего элемента (например, изображения) больше, чем свободное место, перед ним вставляется пустой элемент-заполнитель с нужной высотой (padding-top).

• Этот заполнитель «толкает» следующий элемент вниз, автоматически перемещая его на следующую страницу PDF.

Этот подход обеспечивает предсказуемое расположение изображений и вложений в PDF-документе, несмотря на сложности, связанные с разметкой и размерами исходных данных из Gmail.

Дизайн и лендинг

Дизайн интерфейса, иконки и изображения для Chrome Store мы сделали на основе конкурентов. Главной задачей было сделать яркую иконку и привлекательную картинку для превью, которая выводится в результатах поиска и в блоке рекомендаций.

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

Сделали простой лендинг на Google Sites. Быстро и самое главное бесплатно. Вот что получилось - https://sites.google.com/view/email-to-pdf/. Наша цель — привязать сайт в форме публикации расширения, чтобы получить статус «Verified publisher». Также лендинг позволяет нам поставить ссылку на страницу расширения, чтобы передать немного веса для SEO.

SEO и локализация

Для оптимизации страницы расширения под поисковые запросы нам нужно было найти ключевые слова, которые люди вводят в Google, когда ищут способы сохранения или конвертации писем из Gmail в PDF. Мы проанализировали конкурентов, Google Trends, сервис WordStream и составили список ключевых слов.

Ключевые слова с самым высоким спросом мы использовали в названии расширения, а остальные вписывали в описание. В генерации описания на английском языке нам помогал DeepSeek.

Мы составили промт, с помощью которого получили уникальный текст с вписанными ключевыми словами и с учетом функций расширения. За основу брали тексты конкурентов. Вот такой промт у нас получился:

После нескольких итераций правок в DeepSeek мы получили практический готовый текст. Немного подредактировали его вручную и довели вхождения ключевых слов в нужном количестве.

Затем мы перевели описание и интерфейс расширения на 55 языков с помощью API ChatGPT. Так мы получаем более широкий охват потенциальных пользователей за счет языковых версий страницы расширения.

Бесплатный маркетинг

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

Далее мы подали заявку на фичеринг. Про то как получить статус «Featured» я писал в предыдущем посте. Это позволило увеличить показы расширения в Chrome Store.

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

Мы разместили ссылки на UGC-площадках: ProductRadar, ProductHunt, VC, Reddit, Quora, Stackoverflow, Github, Medium, Dev.to, indiehackers.com. Это дало немного новых установок, но в большей степени ссылки увеличивают вес для SEO в Google.

Пример размещения на Reddit:

Пример размещения на Dev.to:

Запуск на ProductHunt

Запуск на ProductRadar

Результаты

Что мы имеем за 3 месяца:

• 896 установок.

• 696 активных пользователей в неделю.

• Получили статус «Featured» в Chrome Store 🏆.

• Получили обратную связь от пользователей, поправили баги и залили уже 3-ю версию.

Самая большая доля по странам — это пользователи из США, Сербии и Индии. А основные источники трафика — Chrome Store (попадает в Direct и Unassigned) и поиск Google. Это органический трафик, который позволяет протестировать продукт без вложений в маркетинг.

Сколько мы вложили

• Разработка — $0 и 4 недели своего времени.

• Маркетинг — $0 и 1 неделя на SEO и контент-маркетинг.

Выводы и планы

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

В планах:

• Добавить новые функции: загрузка в Google Drive, объединение нескольких писем в 1 PDF.

• Улучшить конвертацию. Чтобы корректно сохранять сложные письма с нестандартной версткой.

• Протестировать платную версию.

• Эксперименты с контентом и новыми каналами трафика.

Заходите к нам в Телеграм-канал «Инди-хакеры: стартапы из 💩 и 🥢» и следите за нашим челленджем «12 проектов за 12 месяцев».

ИДЕЯ И КОНЦЕПЦИЯ:

Мы хотели сделать не просто ещё одну головоломку-криптограмму, которая затеряется среди других проектов, а игру с терапевтическим эффектом — при этом простую и понятную в освоении. Что-то, что помогает человеку на уровне ощущений: расслабиться, вдохновиться, отвлечься от тревожных мыслей через мягкий, медитативный геймплей.

Идея выросла из личного опыта: всем нам в моменты стресса помогали короткие вдохновляющие фразы и спокойная эмбиент-музыка. Мы подумали — а что если объединить это с игрой? Так появился прототип — криптограмма, где зашифрованы мотивационные цитаты. Чтобы прочитать фразу, игроку нужно постепенно её расшифровывать.

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

Забавный факт: Gismart взяли на издательство криптограмму как раз когда мы допиливали свою. Тогда ниша криптограмм была почти свободной, и все проекты имели небольшую аудиторию. Но после их успеха, благодаря огромным вложениям, начался настоящий бум. Появилось много похожих проектов, и все начали ловить хайп. В итоге сейчас это ТОП-1 криптограмма в Google Play и App Store.

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

После примерно месяца работы над проектом, в апреле 2024 года мы выпустили игру в Google Play, RuStore и веб-версию для Яндекс Игр. Мы достигли неплохих результатов, несмотря на то, что количество скачиваний в целом кажется не таким большим.

РЕЛИЗ И РЕЗУЛЬТАТ СПУСТЯ ГОД

В Google Play у нас около 5к+ скачиваний, ⭑ 4.6

В RuStore — около 9к+ скачиваний, рейтинг ⭑ 4.6

В Яндекс Играх рейтинг колеблется от 65 до 69 (зелёный топ-рейтинг начинается от 71)

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

БОЛЬШОЙ АПДЕЙТ И ПОДГОТОВКА К РЕЛИЗУ iOS-ВЕРСИИ С ИЗДАТЕЛЕМ

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

Что нового появилось:

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

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

• Редизайн магазина — мы обновили интерфейс магазина, добавили акции и восстановление отключения рекламы

• Новые механики в геймплее — мы добавили замочек, который лочит определённую букву. Он открывается только после того, как игрок разгадает соседнюю букву или две

• Фонарик — теперь в игре есть новая подсказка: фонарик, который подсвечивает цифры определённой буквы, чтобы игроку было проще разгадывать криптограмму

• Кнопка тутора — для тех, кто забыл, как играть, мы добавили кнопку "туториала" на игровом экране, которая запускает обучающий уровень

В целом, можно заметить, как на нас повлиял успех проекта Gismart. Во-первых, сам дизайн стал чище и понятнее, а во-вторых — добавились яркие элементы, вдохновлённые другими яркими головоломками, дополняется игровая механика. Всё это подчёркивает, что мы всё-таки не просто приложение-сборник цитат, а игра, и нам важно, чтобы в ней чувствовался именно игровой опыт.

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

ПРОДВИЖЕНИЕ ЧЕРЕЗ INSTAGRAM*

Также хотелось бы упомянуть ещё один наш эксперимент — мы создали два аккаунта, в которых публикуем цитаты каждый день (гхм-гхм, ну почти каждый день). Мы планировали направлять трафик с этих аккаунтов на игру. Подписчики постепенно приходят, но пока нам не удается сильно перевести трафик в проект, за всё время пришло буквально несколько человек. Аккаунт с русскоязычной аудиторией имеет 1200 подписчиков, а англоязычный всего 70 — с ним как-то не прёт.

Спасибо, что прочитали до конца! Впереди у нас ещё много работы и идей. После релиза на iOS, мы начнем работу над новым инди-проектом для Steam, который кардинально отличается от нашего текущего. Пока без подробностей, но будет интересно!

Следить за нами можно здесь: https://t.me/zero2devhero

Скачать Quotegram на Android или поиграть в Web-версию можно здесь: linktr.ee/quotegramapp

Если вы знаете больше про языки на Яндекс играх, будем рады почитать об этом!

Что нового в нашей игре?

Если кратко, суть игры — сражаться друг против друга на одном устройстве или в одиночку против ИИ. Стилистика — 2D пиксель-арт.

Основные изменения:

1. Добавлены новые языки.

2. Исправлены мелкие баги и проведён баланс игры.

   • Уменьшена максимальная скорость кораблей и скорострельность при суммировании бонусов.

   • Антибонус «Две пушки в разные стороны» стал менее жёстким: теперь пушки стреляют в разные стороны, но всё же в направлении врага.

3. Новые антибонусы:

   • Инерция кораблей (пьяное вождение). Корабли теперь сохраняют скорость по оси X, что добавляет сложности.

   • Инверсия управления. Всё понятно без объяснений.

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

   • Прицел сбит. Прицел уводит от цели на несколько градусов.

4. Новый бонус:

   • Туман. Скрывает ваши снаряды от врага, но также мешает вам замечать снаряды противника и препятствия.

5. Другие улучшения:

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

   • Добавлен таймер перед началом боя: «3... 2... 1...». Это помогает игрокам подготовиться, так как перед боем выполняется множество настроек.

   • Компьютер стреляет сразу же после перезарядки.. Раньше, при высокой скорости перезарядки, игроку было невозможно стрелять так же быстро, как боту. На десктопе ещё можно было зажать пробел, но на телефоне это было неудобно. Добавлена настройка "Автострельба".

В игре ещё много возможностей для развития. Мы готовы продолжать расширять и улучшать её с вашей поддержкой и советами. Некоторые обновления были сделаны как раз благодаря вашим отзывам. Мы читаем всё и прислушиваемся к вашим пожеланиям. Поэтому будем рады вашим комментариям и сообщениям!

Поиграть в обновленную игру можно уже сейчас по ссылке. Если вам интересна судьба проекта, приглашаем всех желающих в наш Телеграм-канал. Будем очень рады!