Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Захватывающая аркада-лабиринт по мотивам культовой игры восьмидесятых. Управляйте желтым человечком, ешьте кексы и постарайтесь не попадаться на глаза призракам.

Пикман

Аркады, На ловкость, 2D

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Python3

984 поста сначала свежее
user10249282
user10249282
27 дней назад

Нейросеть Flux на Python, даю полный код(все бесплатно)⁠⁠

Нейросеть Flux на Python, даю полный код(все бесплатно) Python, Flux, Нейронные сети, Искусственный интеллект, Длиннопост

Картинку сгенерила нейросеть


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

Нашел я значит такую библиотеку в питоне как: g4f

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

Ссылка на гитхаб: https://github.com/xtekky/gpt4free
Ссылка на мой тг где я говорю про этот проект и многие другие: https://t.me/digital_vek

Больше всего мне понравилась именно модель Flux в этой библиотеке, на ней сейчас и по практикуемся.

для начала установим саму библиотеку:

pip install -U g4f[all]

Код на Python:

from g4f.client import Client

client = Client()

q = input("Введите ваш текст: ")

response = client.images.generate(

model="flux",

prompt=q,

response_format="url"

)

print(f"Generated image URL: {response.data[0].url}")

Тут в принципе все) Запускаем код, вводим слова, я ввел milk, и в консоли появляется ссылка: https://image.pollinations.ai/prompt/milk?width=1024&heig=...
Если перейти по ней то там и будет как раз наше изображение.

Если нам нужно получать картинку в виде файла .png а не ссылкой, то в этой строке: response_format="url" заместо url ставим: image.

Будет создана папка в которой будут храниться все изображения.

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

Вот пример:

Ввели слово "milk":

Нейросеть Flux на Python, даю полный код(все бесплатно) Python, Flux, Нейронные сети, Искусственный интеллект, Длиннопост

Получилось не плохо

Ввели слово "молоко":

Нейросеть Flux на Python, даю полный код(все бесплатно) Python, Flux, Нейронные сети, Искусственный интеллект, Длиннопост

Результат на лицо)) поэтому вводим все на англ

Данный скрипт можно внедрить куда угодно, как пример в тг-бота, либо если умеете разрабатывать сайты на питоне то реализовать это там, либо вообще написать свою GUI(десктопное приложение).

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

Всех обнял🤗.🤗.🤗.

Показать полностью 3
[моё] Python Flux Нейронные сети Искусственный интеллект Длиннопост
3
Axel433
Axel433
27 дней назад

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов⁠⁠

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост

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

Компания «Море туров» столкнулась с типичной проблемой: высокое качество сервиса не отражалось в рейтинге и количестве переходов с поисковых систем и карт. Помочь изменить ситуацию удалось с помощью бесплатного виджета отзывов от Daily Grow.

Проблема: низкий рейтинг и мало отзывов, несмотря на качественное обслуживание:

  • Отзывы были разрознены (соцсети, карты, мессенджеры).

  • Не было системы автоматического сбора обратной связи.

  • Рейтинг на Яндекс.Картах и Google Maps оставался на уровне 4.3.

  • Переходов с поисковых систем и навигаторов было меньше ожидаемого.

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост

Решение: компания внедрила виджет отзывов от Daily Grow, что позволило систематизировать работу с фидбэком и повысить вовлеченность пользователей:

1.  Сбор отзывов из CRM и мессенджеров: после завершения тура клиентам отправлялись автоматические напоминания с просьбой оставить отзыв.

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост

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

1/2

3.  Интеграция виджета 5.0 с фото на сайт: карусель реальных фото-отзывов вызвала доверие у новых посетителей и повысила вовлеченность.

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост

Результат (февраль – май 2025 года)

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост
  • Рост рейтинга с 4.3 до 5.0

  • +25% переходов на сайт с Яндекс.Карт и Google Maps

  • +20% больше звонков с карт и навигаторов

  • Более 14 000 переходов в профиль компании

Почему это сработало

1.  Удобство: раньше оставить отзыв было сложно: нужно было заходить на сторонние платформы, регистрироваться или искать компанию вручную. С Daily Grow клиенты получают ссылку прямо в мессенджер (WhatsApp, Telegram) и могут оставить отзыв в пару кликов. Это увеличило количество откликов в 3 раза.

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

3.  Доверие: Люди больше верят реальным фото, чем тексту. Виджет Daily Grow выводит на сайт карусель отзывов с аватарками клиентов, создавая эффект "живого" социального доказательства. Новые посетители видят, что отзывы настоящие, и быстрее принимают решение о покупке.

Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост
Кейс Daily Grow: как «Море туров» увеличили переходы на сайт на 25% с помощью виджета отзывов IT, Тестирование, Чат-бот, Стартап, Искусственный интеллект, Тренд, Программа, Дизайнер, Google, ChatGPT, Сайт, Приложение, Python, Гайд, Информационная безопасность, Фриланс, Microsoft, Linux, Программирование, Windows, Длиннопост

Вывод

Daily Grow помог «Море туров» превратить разрозненные отзывы в мощный инструмент продаж. Повышение рейтинга и прозрачная репутация напрямую повлияли на рост показов, переходов и звонков.

Хотите такие же результаты?

Установите виджет отзывов от Daily Grow и начните собирать качественные отзывы уже сегодня. Это просто, бесплатно и эффективно.


P.S. Отзывы — это мощное социальное доказательство, которое напрямую влияет на ваш доход. Не упускайте шанс укрепить доверие к вашему бизнесу!

Показать полностью 8
IT Тестирование Чат-бот Стартап Искусственный интеллект Тренд Программа Дизайнер Google ChatGPT Сайт Приложение Python Гайд Информационная безопасность Фриланс Microsoft Linux Программирование Windows Длиннопост
1
0
youengineerasu
youengineerasu
28 дней назад

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225⁠⁠

Приветствую уважаемые Друзья, читатели, коллеги. Поработал я со средой Дракон++.

В двух словах Дракон++ - это графический Алгоритмический язык программирования. Его задача строить понятные структурные алгоритмы работы соответствующих узлов, линий, теплиц, умных зданий, станков и т.д. и конвертировать их в код ПК, ПЛК или ПР.

Если есть вопросы пишите в ТГ-канале "Ты же инженер АСУ ТП".

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

Где скачать Среду ?

Скачать её можно по этой ссылке в телеграмме. "Алгоритмический язык Дракон++". Чат тут по Дракону.

Пока сама программная среда на стадии разработки. Но есть уже рабочие объекты и можно получить код программы.

Среда. Начало.

Возьмем простой пример Счетчика, делать его код будем для программируемого реле ОВЕН ПР 225.

Начинаем. Будем считать, что всё установили.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Создаём проект.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Называем, выбираем Программируемое реле ОЛ.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Не буду писать подробное руководство, его можно найти по ссылкам выше. Напишу коротко Класс объекта - ЭТО Функциональный блок на ST в ОВЕН ПР225.

Нажимаем Плюсик.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Получаем вот это.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Жмем сюда, и добавляем все необходимые нам переменные (локальные, входные, выходные)

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Тут четыре типа переменных (Bool, Uint, Real, Time)

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Вот так отображается.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Чтоб добавить ветку наводим мышку на линию.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Чтоб добавить Блок-схему наводим мышку на линию.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Переменные добавили, создаем алгоритмы. (Все подробное описание в каналах и соответствующих чатах)

От себя добавлю - когда мы подаем импульс - срабатывает селектор(да) - селектор триггера на 0(нет) - автоматом записываем импульс(ИСТИНА) - и переходим на ветку Счетчик.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Ветка Счетчик - Утилитарная функция + (Складываем импульсы) - выходим из алгоритма и ждем следующего сигнала.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Когда всё нарисовали, жмем на класс и кнопку Экспортировать

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Получаем исходник и вносим в проект OWEN LOGIC.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Получаем вот это. Вносим в Макрос ST.

Работа со средой разработки Дракон++ с последующей конвертацией в ОВЕН ПР225 Программа, Инженер, Python, Гайд, ПЛК, Программирование, Разработка, Тестирование, Гифка, Яндекс Дзен (ссылка), Длиннопост

Получаем результаты, радуемся.

Всем пока-пока.

Показать полностью 15
Программа Инженер Python Гайд ПЛК Программирование Разработка Тестирование Гифка Яндекс Дзен (ссылка) Длиннопост
4
8
ii.dominator
ii.dominator
28 дней назад
Искусственный интеллект

Битва нейросетей — как дела с популярностью? ТОП-LLM по посещаемости⁠⁠

Битва нейросетей — как дела с популярностью? ТОП-LLM по посещаемости Сайт, Чат-бот, ChatGPT, Программа, Гайд, Арты нейросетей, Нейронные сети, Нейромузыка, Искусственный интеллект, Google, Digital, Чат, Тестирование, Видеомонтаж, Python, Дизайнер, Тренд, Компьютерная графика, Фриланс, Приложение

1. ChatGPT — 5,1 млрд визитов в месяц. Интересный факт — ChatGPT единственный сайт из топ-10 посещаемых сайтов мира, на котором растет трафик

2. DeepSeek — 480 млн. Открытый код, отличный старт, мощный маркетинг, бесплатно и без VPN для всех стран мира

3. Gemini — 409 млн. Несмотря на мою любовь к Gemini по посещаемости она в 10 раз уступает GPT

4. Grok — 196 млн. Неплохие показатели за счет тесной интеграции с социальной сетью, есть много интересных функций на сайте, отдельный редактор фото, приятная модель, входит в мой личный топ

5. Perplexity — 113 млн. Заточено под поисковые запросы, что-то вроде Google в сфере ИИ (поиск информации), посещаемость падает, так как это по сути агрегатор ИИ-моделей, а не модель. Сам я им не пользуюсь, смысла не вижу, зачем?

6. Claude — 95,6 млн. Любимчик программистов и математиков, если у тебя именно такие задачи, то советую протестировать

7. Copilot — 86 млн. Будет быстро расти, установлена во всех ПК на Windows. Ждем в первой тройке через 1-2 года

8. Qwen — 46 млн. Не заслуженно как по мне, работает лучше DeepSeek, но не хайпанула, советую попробовать

📌 Своими руками покрутить рейтинг можно тут - similarweb (P.S. ссылка на сервис в моем канале в закрепе профиля, тут увы банят за ссылки. Но я буду ОЧЕНЬ благодарен, если вы перейдете и почитаете. Всем позитива и хорошего настроения!)

Показать полностью 1
Сайт Чат-бот ChatGPT Программа Гайд Арты нейросетей Нейронные сети Нейромузыка Искусственный интеллект Google Digital Чат Тестирование Видеомонтаж Python Дизайнер Тренд Компьютерная графика Фриланс Приложение
3
5
Pavel.DW
Pavel.DW
29 дней назад

Нужна помощь - сканы PDF⁠⁠

Нужна помощь - сканы PDF Сканирование, Pdf, Png, Макрос, Рассылка, Офисные будни, Офисные работники, Помогите найти, Помощь, Компьютерная помощь, Python, Программа, Нейронные сети, Сканер, Решение проблемы

Товарищи, помогите.

Знает ли кто-нибудь, использует ли кто-нибудь бесплатную простенькую программу по типу WinScan2PDF, с помощью которой можно отсканированные страницы сохранять не в один огромный файл pdf со всеми отсканированными страницами, или каждую отдельную страницу в отдельные файлы pdf/png/jpeg, что собственно WinScan2PDF и умеет делать, а сохранять из общей кучи страницы группами по две страницы в отдельные файлы pdf, по три страницы в отдельные файлы pdf и так далее.

Задача: есть стопка писем/уведомлений для рассылки клиентам в количестве 250 штук. Все письма имеют по 2 страницы. Для рассылки писем по электронной почте их необходимо отсканировать, затратив на это как можно меньше времени.

На МФУ Kyocera можно конечно сканировать каждое письмо отдельно (сейчас именно так и делаю), но для этого необходимо стоять возле МФУ и тупо механически подкладывать каждое новое письмо и нажимать кнопочки "повтор" и "старт". По времени это занимает примерно один час.
Однако на данном МФУ, с помощью программы WinScan2PDF можно отсканировать всю пачку сразу, получив при этом как вариант 500 файлов png. Для сканирования всей пачки потребуется 20-30 минут времени (потому что в процессе отсутствуют паузы на подкладывание новых писем и нажатие кнопочек), при этом не нужно стоять и тратить время у самого МФУ - можно заняться какой-нибудь параллельной работой, пока МФУ сканирует. Но в таком случае требуется какая-то программа, или макрос в excel (сам писать макросы я пока-что не умею) или какой-то иной метод, с помощью которого можно было бы быстро объединить 500 файлов png группами по два файла по порядку, что бы получились 250 двухстраничных файлов pdf,
Ну или если это 250 писем по 4 страницы, то сохранить из 1000 сканов png 250 файлов pdf по 4 страницы, и тому подобные варианты.

Кто знает готовое решение, подскажите пожалуйста.

Дополнено:
Огромное спасибо @almelion за помощь! Готовое решение находится в комментах по ссылке: #comment_351913358

Показать полностью
[моё] Сканирование Pdf Png Макрос Рассылка Офисные будни Офисные работники Помогите найти Помощь Компьютерная помощь Python Программа Нейронные сети Сканер Решение проблемы
40
6
sobolevn
30 дней назад
Программирование на python

Новый тайпчекер для Python от авторов ruff и uv, написанный на Rust⁠⁠

https://github.com/astral-sh/ty

[моё] Python Rust YouTube Программирование IT Разработка Программист Видео
3
0
Agmioli
Agmioli
30 дней назад
Искусственный интеллект

Как с нуля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников!⁠⁠

Как с нуля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников! Искусственный интеллект, Нейронные сети, Gamedev, Unity, Приложение, Android разработка, Digital, Программа, Компьютерные игры, Программирование, Программное обеспечение, Python, Гайд, Лайфхак, Чат-бот, Разработка, HTML, Браузерные игры

Как с ноля, сгенерировать игру или приложение, состоящие из нескольких файлов. Для чайников.

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

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

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

Но если вы создаете игру не на базе html-страниц и сайта, то вместо фразы "которая будет запускаться с html-сайта", вам надо указать типа-платформу игры, или ее среду разработки.

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

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

ЗАПРОС:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.

Объект-игрок, вид которого задается файлом"image1", управляется при помощи клавиш. Клавиши-стрелки определяют направление стороны движения объекта-игрока.

В пространстве игры, рандомно расположены объекты-препятствия, внешний вид которых задается файлом "image2".

Если Объект-игрок задевает объекты-препятствия, то Объект-игрок отскакивает в сторону.

Фон игры задается файлом "image3".

Код созданный для каждого файла, полностью вставляете в текстовый редактор (например Блокнот), и сохраняете с тем названием и расширением, который указала нейросеть.

Если вы не знаете, в какую директорию/папку игры, вставлять конкретный файл
- наберите в интернет поиске :
"название.расширение файла где должен находиться"
"название.расширение файла где расположен/где находиться"
"название.расширение файла куда положить"
Или просто изучите архитектуру игровой платформы, чтобы решить этот вопрос".

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

Показать полностью
[моё] Искусственный интеллект Нейронные сети Gamedev Unity Приложение Android разработка Digital Программа Компьютерные игры Программирование Программное обеспечение Python Гайд Лайфхак Чат-бот Разработка HTML Браузерные игры
1
2
mars.frontier
mars.frontier
30 дней назад

Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp⁠⁠

«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.

1/3

🚀 С чего всё началось?

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

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

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

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

Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.

Вот как это выглядело:

  • Пользователь заходил и видел карту Марса.

  • Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:


🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:


📐 Формулы для отображения:

При размере одного тайла T:

  • W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

  • H = W / 2 — изометрическая высота (высота ромба).

  • WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;


🧩 Что это даёт:

  • (dx - dy) — смещает тайл по горизонтали.

  • (dx + dy) — смещает тайл по вертикали.

  • centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.


🎯 В результате:

  • Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

  • Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

    Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

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

    Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

  • Telegram сам отдаёт токен с подписью.

  • Мы проверяем подпись на бэке по HMAC SHA256.

  • Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

  • Кристаллы на клетках — можно собирать.

  • Подсветка клеток: белая рамка — твоя, красная — чужая.

  • Имена владельцев, чтобы было видно, кто что захватил.

    В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

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

  • Добавили прелоадер, который подгружает PNG-шки перед игрой.

  • Сделали показ спиннера на любом действии (движение, загрузка).

  • Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

  • Заходит в Telegram Mini App.

  • Авторизуется за доли секунды.

  • Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

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

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.


💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄

Показать полностью 3
[моё] Gamedev Разработка Программирование Telegram Javascript Python Unity Frontend Backend Web Web-программирование Ton HTML CSS Верстка Длиннопост
9
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии