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

Сноуборд

Спорт, Аркады, На ловкость

Играть

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

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

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

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

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

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

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Web + Разработка

С этим тегом используют

IT Программирование Web-программирование Сайт Веб-разработка Дизайн Javascript Gamedev Инди игра Инди Игры Unity Все
113 постов сначала свежее
4
scale.earth
scale.earth
9 дней назад

Мир на экране. Просто о цифровых картах⁠⁠

Карты всегда сопровождали человека. Раньше работа с картой требовала определённых навыков: уметь читать масштаб, определять рельеф, знать условные знаки. Даже чтобы просто понять, как доехать из пункта А в пункт Б, нужно было повозиться.

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

Но как работают современные цифровые карты? Что стоит за кнопкой "проложить маршрут"? В этой обзорной статье мы разберёмся в основах: как устроены цифровые карты и из чего они состоят.

Что такое карта? И что такое цифровая карта?

Карта — это уменьшенное, обобщённое изображение земной поверхности (или другого пространства), перенесённое на плоскость с использованием условных знаков и масштаба. С помощью карты можно увидеть, где находятся объекты, как они связаны между собой, оценить расстояния и представить географическую ситуацию в целом. Это один из старейших способов наглядного представления информации о мире.

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

На первый взгляд, определения бумажной и цифровой карты похожи. Но есть важное отличие: бумажная карта неизменна — у неё фиксированный масштаб, уровень детализации и генерализация (то есть степень упрощения информации). Цифровая карта — динамична. При изменении масштаба (зума) автоматически меняется и объём отображаемой информации. Чем ближе «приближение», тем больше деталей: появляются мелкие дороги, здания, названия улиц. А при «отдалении» — всё упрощается до крупных объектов, чтобы сохранить читаемость и избежать перегрузки экрана.

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Фрагмент Яндекс карты. Один участок, разный масштаб и разная генерализация

Основа карты — картографическая проекция

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

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

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

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Проекции 60-ти градусных зон на стенки цилиндра.

Отсюда и известный эффект: Гренландия на карте выглядит почти как Африка, хотя на деле она меньше почти в 14 раз. По этой же причине самолёты летают "по дуге" — так называемой ортодромии — ведь это действительно кратчайшее расстояние между двумя точками на сфере, хотя на карте оно выглядит как дуга, а не прямая линия.

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Размер Гренландии (красным) относительно Африки

Из чего «состоит» карта: слои и данные

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

Слои различаются по типу данных, способу отображения и назначению. Вот основные виды:

Растровые слои

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

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Растровый слой поверх базовой картографической основы

Векторные слои

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

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

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Векторные слои (красным) с атрибутивным описанием

Трёхмерные (3D) слои

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

Мир на экране. Просто о цифровых картах Опрос, Наука, Карты, География, Геоинформационные системы, Программирование, Разработка, Web, Научпоп, Образование, Длиннопост

Трехмерная модель Манхэттена на карте

Базовые картографические слои

Это фоновые слои, которые формируют общую основу карты. Они, как правило, не подлежат редактированию пользователем и включают глобальные географические данные: границы, дороги, города и т.д.

Примеры таких карт: Google Maps, Яндекс.Карты, 2GIS. Ещё один важный проект — OpenStreetMap (OSM) — свободная, редактируемая карта мира, созданная сообществом энтузиастов. В отличие от закрытых коммерческих решений, OSM можно использовать в собственных проектах при соблюдении условий лицензии.

Базовые карты тоже состоят из слоёв и требуют сложной обработки: векторизации, хранения и синхронизации огромных объёмов данных. Часто для их подключения используют протокол TMS (Tile Map Service) — способ раздачи мозаичных веб-карт по квадратам (тайлам), подгружаемым при просмотре.

Как создать свою карту?

Если вы хотите создать собственную цифровую карту — будь то для проекта, визуализации данных или просто «для себя», — вариантов существует много. Всё зависит от ваших задач, уровня подготовки и желания углубляться в тему.

В основе большинства решений лежат Геоинформационные системы (ГИС) — это инструменты для работы с пространственными данными: их визуализации, анализа и редактирования.

ГИС: профессиональный подход

ГИС можно условно разделить на два типа:

Настольные (десктопные) ГИС — устанавливаются на компьютер. Наиболее популярный бесплатный вариант — QGIS (open-source, подходит для обучения и реальных задач). Для более сложных проектов используется ArcGIS — мощная коммерческая платформа от компании Esri.

Облачные (веб-ГИС) — работают через браузер и часто используются для командной работы или размещения карт онлайн. Как пример NextGis Web.

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

Веб-приложения: программируем сами

Если вы знакомы с JavaScript и хотите создать свою интерактивную карту для веба, подойдут специализированные библиотеки:

Leaflet — лёгкая и простая библиотека, отлично подходит для начала.

OpenLayers — мощнее, с большим набором функций.

MapLibre — форк Mapbox GL JS с поддержкой векторных тайлов и 3D.

Эти библиотеки позволяют строить карты с нуля, подключать слои, настраивать интерфейс и добавлять интерактивность. Однако для более сложных карт может понадобиться и серверная часть — для хранения данных, управления пользователями и API-запросов. Тут помогут:

GeoServer — open-source сервер для пространственных данных.

MapServer — быстрый и гибкий движок, особенно популярен в проектах с высокой нагрузкой.

🧩 Конструкторы карт: без кода и головной боли

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

Популярные платформы:

Яндекс.Конструктор карт — простой интерфейс, идеален для базовых задач.

Конструктор карт от 2ГИС — похож по функционалу на Яндекс.

Конструктор карт "Масштаб"— сочетает простоту с хорошим функционалом, подходит как для личных, так и для образовательных проектов.

📌 Заключение

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

Был ли опыт работы с цифровыми картами?
Всего голосов:
Показать полностью 6 1
[моё] Опрос Наука Карты География Геоинформационные системы Программирование Разработка Web Научпоп Образование Длиннопост
0
2
itstorytelling
itstorytelling
1 месяц назад
Информатика • Алексей Гладков

31.05 - Дeнь вeб-дизaйнepa [вехи_истории]⁠⁠

31.05 - Дeнь вeб-дизaйнepa [вехи_истории] Тренд, Дизайнер, Программа, Разработка, Ux, Ux-дизайн, Ui, Дизайн, Web, Веб-дизайн, Веб-разработка, Научпоп, Информатика, Сайт, Технологии, YouTube (ссылка)

🗓 31.05 - Дeнь вeб-дизaйнepa [вехи_истории]

🎨 День веб-дизайнера — праздник всех, кто делает интернет красивым, удобным и визуально понятным. От кнопок до цветовых схем, от шрифтов до анимаций — именно веб-дизайнеры превращают сухой код в живую цифровую среду.

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

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

👩‍💻 Поздравляем всех причастных! Пусть ваши творчества всегда будут не только красивыми, но и удобными)

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

Показать полностью
Тренд Дизайнер Программа Разработка Ux Ux-дизайн Ui Дизайн Web Веб-дизайн Веб-разработка Научпоп Информатика Сайт Технологии YouTube (ссылка)
0
2
mars.frontier
mars.frontier
1 месяц назад

Как мы делали мини-игру про ровер на Марсе внутри 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
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
4
user10606705
user10606705
2 месяца назад

Как я собрал бесплатную библиотеку полезных ресурсов для фрилансеров⁠⁠

Как я собрал бесплатную библиотеку полезных ресурсов для фрилансеров Рекомендации, Бизнес, Успех, Бесплатно, Фриланс, Маркетинг, Дизайн, Тильда, Ux, Ui, Веб-дизайн, Web, Веб-разработка, Разработка, Комьюнити, Сообщество, Telegram, Чат, Помощь, Telegram (ссылка), Длиннопост

Всем привет, я создал проект, который сделает твою работу в digital и IT проще и интереснее!

Привет, друзья! Меня зовут Акмаль, и я с огромным энтузиазмом представляю вам мой новый проект, который я создал специально для всех digital и IT-специалистов! 😊 Если ты постоянно жонглируешь задачами, ищешь удобные инструменты или просто хочешь отвлечься на пару минут, то этот сайт станет твоим верным помощником. Я вложил в него всю душу, чтобы ты мог сэкономить время, найти вдохновение и даже немного отдохнуть. Давай расскажу, что ждёт тебя внутри — уверен, тебе захочется заглянуть! А ещё мне нужен твой совет по одному разделу, который я пока не знаю, как развивать. Заходи, пробуй и делись впечатлениями! 🚀

Ссылочка на библиотеку тут

Инструменты, которые упрощают жизнь

Данный сайт это твоя палочка-выручалочка для работы! Здесь собраны сервисы, которые помогут справляться с рутиной: генераторы UTM-меток, чтобы твои ссылки были идеальными, калькуляторы для расчёта важных метрик (например, ROI или стоимости клика), а также конвертеры для работы с данными. Всё, чтобы ты мог сосредоточиться на главном, а не на мелочах. А если захочется сделать паузу, я добавил несколько мини-игр — они помогут переключиться, улыбнуться и вернуться к делам с новыми силами. 🎮

База ресурсов: Всё, что нужно под рукой

Представь: целая коллекция полезностей, которые всегда будут с тобой! Здесь ты найдёшь бесплатные нейросети для работы и творчества — от создания текстов до генерации визуалов. Чтобы ты мог сразу начать, я подготовил набор подсказок (промтов), которые помогут нейросетям выдавать именно то, что тебе нужно. А ещё тут есть готовые шаблоны документов: брифы, коммерческие предложения, договоры, технические задания — всё можно скачать и использовать. Никаких скрытых условий, только польза! 📝

Генераторы документов: Создай своё за пару минут

Иногда готовый шаблон — это здорово, но что, если тебе нужно что-то уникальное? Для этого у меня есть конструкторы! С их помощью ты можешь создать политику конфиденциальности, пользовательское соглашение, правила использования cookies или даже игровые законы, если работаешь в этой сфере. Просто отвечай на вопросы, и система сгенерирует документ, который идеально подойдёт под твои задачи. Это быстро, удобно и, конечно, бесплатно! ✨

Давай вместе сделаем проект ещё лучше!

Я верю, что этот сайт может стать твоим надёжным помощником в мире digital и IT. Он уже полон полезного, но это только начало — я планирую добавлять ещё больше крутых инструментов и идей! Мне очень важно твоё мнение: что тебе понравилось больше всего? Что бы ты хотел видеть дальше? Загляни по ссылке в профиле, попробуй и расскажи, как тебе! Давай вместе сделаем работу в digital и IT ещё удобнее и вдохновляющей! 🌟

Ссылочка на библиотеку тут

Также я собираю сообщество фрилансеров: Давай помогать друг другу!

я создал проект, чтобы объединить нас, фрилансеров, в одно большое сообщество! Здесь мы можем делиться опытом, а главное — поддерживать друг друга. Давай делиться опытом, вдохновлять и расти вместе! Присоединяйся, а ещё — поделись проектом с друзьями, коллегами и знакомыми, чтобы наше сообщество стало ещё больше.

Наше уютное комьюнити тут

Библиотека бесплатных материалов тут

Также я выражаю свою благодарность всем, кто продвигает проект, и буду признателен за вашу помощь! 🙌 давайте вместе поможем фрилансерам экономить время с удобными инструментами.

Показать полностью 1
Рекомендации Бизнес Успех Бесплатно Фриланс Маркетинг Дизайн Тильда Ux Ui Веб-дизайн Web Веб-разработка Разработка Комьюнити Сообщество Telegram Чат Помощь Telegram (ссылка) Длиннопост
6
10
LuckyEvgenii
2 месяца назад

Ультимативная подборка нейросетей⁠⁠

Всем привет! Сегодня постараюсь закрыть вопрос актуальных нейросетей для дизайнера (хотя бы на ближайший месяц 🤡). ИИ разбиты по категориям — изображения, текст, аудио, видео, 3D и веб разработка. Почти все можно потыкать бесплатно. На майские точно будет, чем себя занять, пока шашлычок доходит до кондиции

Ультимативная подборка нейросетей Компьютерная графика, Искусственный интеллект, Midjourney, Дизайнер, Нейронные сети, Web, Разработка, IT, Гифка, Длиннопост

Изображения

krea.ai — генерация изображений в реальном времени с фокусом на контроль стиля и качества

midjourney — генератор артов с художественным уклоном, даёт кинематографичные, атмосферные результаты

fooocus — локальный генератор на основе Stable Diffusion с простым интерфейсом и высоким качеством

comfy ui — модульный интерфейс для Stable Diffusion, гибкий для продвинутых пользователей

visualelectric — генерация визуалов с упором на редактуру и коллаборацию в команде

weights.gg — галерея и подборка моделей (weights) для Stable Diffusion, удобно искать стили

ideogram — cильные стороны в рендеринге текста и типографике; отлично подходит для создания логотипов и дизайнов с текстом

recraft (VPN) — рисует векторы, умеет делать паки картинок в единой стилистике. Проект из Лондона, но корнями из России

freepik ai — генератор в стиле стоковых иллюстраций, интеграция с ресурсом Freepik.

adobe firefly (VPN) — от Adobe, поддержка генерации по стилям бренда, встроена в Photoshop/Illustrator

dall-e 3 (VPN) — генератор от OpenAI, хорошо справляется с подробным промптингом и вставкой текста

magnific — AI-суперрезолвер: улучшает детализацию изображений

topaz gigapixel — апскейлер фотографий и артов с сохранением чёткости и текстур

Видео

hailuoai — китайская платформа, делает фотореалистичное видео из текста

runway — один из лидеров генерации и редактирования видео, удобен для креативных проектов

kling — свежая модель от китайского ByteDance, реалистичные и стабильные видео

Hunyuan Video — видеогенерация от Tencent, делает плавные, качественные ролики

luma labs — превращает видео и фото в 3D сцены, особенно полезно для продакшн-визуализаций

vidu — китайский аналог Sora, быстрый, точный и с глубоким контролем сюжета

sora (VPN) — модель от OpenAI (ожидается публичный релиз), обещает кинематографичную генерацию видео

ltx.studio — платформа от Runway для создания целых сцен и раскадровок с кастомизацией

pika.art — генерация коротких видео, активно развивается, фокус на стиле

heygen — видео-аватары и синтез речи, удобно для презентаций и инфовидео

Текст

deepseek — мощный LLM с точной генерацией кода и технических описаний

chatgpt (VPN)— универсальный ассистент на основе GPT-4, подойдёт для промптов, идей и текстов

mistral.ai — опенсорсная альтернатива, быстрая и лёгкая, подходит для локального использования

qwenlm.ai — китайская модель с хорошей логикой, используется в продуктах Alibaba

perplexity.ai — поисковик с ИИ, отлично подбирает источники и кратко отвечает на вопросы. Есть удобное приложение, которое доступно из России

claude ai (VPN) — ассистент от Anthropic, силён в логике и работе с большими документами, мастхэв для копирайтинга

Веб разработка

relume — генератор лендингов и UI на основе текстового запроса, быстро создаёт сайты

framer — визуальный редактор с поддержкой генерации дизайна и кода; хорошо для прототипов

replit — cреда совместной разработки; включает ИИ-ассистентов для веб-разработки

cursor— продвинутый AI-код-редактор, интегрируется с репозиториями и помогает писать сложный код

3D

hyper3d.ai — превращает 2D-изображения в 3D-модели с текстурами

meshy — генерация 3D-моделей из текста, фокус на быстроте и качестве

tripo ai — генерация простых 3D-объектов, удобно для геймдевов и AR

hunyuan 3d — модель от Tencent для создания 3D-сцен и персонажей по описанию

Аудио

suno — генерация песен из текста, включая вокал и инструменты.

elevenlabs (VPN) — синтез речи высокого качества, поддержка эмоций и множества голосов

udio — конкурирует с Suno, фокус на креативной генерации музыки

adobe podcast — улучшение звука, подавление шумов, автоматическое выравнивание громкости

descript — монтаж аудио и видео через текст, идеален для подкастеров и видеообзорщиков

Фуф, ну вроде все. Каких еще сеток не хватает в этом списке для обретения полного дзена? 🧘‍♀


Я веду телеграм-канал Тултип, в котором делюсь инструментами, референсами и материалами, которые помогают эффективно работать и расти в профессии. Увидимся там!

Показать полностью
[моё] Компьютерная графика Искусственный интеллект Midjourney Дизайнер Нейронные сети Web Разработка IT Гифка Длиннопост
10
26
Pavel.Cherepanov
Pavel.Cherepanov
6 месяцев назад
Pikabu Game Jam
Серия Дневник разработки - GP Profit Jam #2 feat Pikabu

Как я разрабатывал игру за 3 дня для Пикабу Игры⁠⁠

Как я разрабатывал игру за 3 дня для Пикабу Игры Геймджем, Инди, Разработка, Инди игра, Игры, Рогалик, GP Profit Jam, Roguelike, Web, Программирование, Видео, Без звука, Длиннопост

Знакомство

Привет, меня зовут Паша. Днем я обычный программист / тимлид команды в IT компании, а по вечерам превращаюсь в инди-разработчика игр, который грезит мечтами о том, как разработка игр станет его основным занятием.

Я никогда не работал в игровых студиях и все свои проекты создавал в одиночку, обладая лишь навыками программирования и опытом работы с Unity и Cocos Creator. У меня есть несколько завершенных небольших игр, выложенных на Яндекс.Игры. Большими доходами они похвастаться не могут, но на пару доставок еды в месяц заработать удается.

Недавно решил принять участие в своем первом гейм-джеме — GP Profit Jam #2 feat Pikabu — и хочу поделиться этим опытом. Надеюсь, моя история будет интересной, а советы и фидбек помогут мне в будущем!


Этап 0. Подготовка к Game Jam

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

Признаюсь, раньше я скептически относился к джемам, считая, что за короткий срок создать что-то стоящее невозможно и такие проекты остаются "работой в стол".

Тем не менее я решил поставить перед собой простую цель: "Сделать игру". Мне давно не хватало мотивации, и участие в джеме стало отличным поводом сдвинуться с места.


День 1. Брейншторм темы, или разговаривать с компьютером это нормально

Четверг, 5 декабря, 20:00 — старт гейм-джема! Объявили тему: "В поисках золотого плюсика" и дополнительное условие: "Элемент: Маскот Пикабу. Будет большим преимуществом, если игра поддерживает лор Пикабу!".

Просьба не закидывать камнями, но я не являюсь активным пользователем Пикабу и с его лором почти не знаком. Благо у меня есть мой надежный товарищ — искусственный интеллект в ChatGPT (или, как я его называю, "мой подручный"), который погрузил меня в историю и специфику данной площадки.

Как я разрабатывал игру за 3 дня для Пикабу Игры Геймджем, Инди, Разработка, Инди игра, Игры, Рогалик, GP Profit Jam, Roguelike, Web, Программирование, Видео, Без звука, Длиннопост

Вот кстати небольшая вырезка от ИИ про лор Пикабу

Помимо темы джема организаторы предоставили графику с маскотом и элементами Пикабу, причем с исходниками. За что им огромное спасибо!

Как я разрабатывал игру за 3 дня для Пикабу Игры Геймджем, Инди, Разработка, Инди игра, Игры, Рогалик, GP Profit Jam, Roguelike, Web, Программирование, Видео, Без звука, Длиннопост

Спойлер: данная графика послужила основой для многих элементов в моей игре.

Поштурмив с "подручным" тему джема — получили следующее

Название: Подземелье дизлайков

Механика: Рогалик (за референс брал Isaac)

Идея: Печенька исследует лабиринты подземелья, олицетворяющие ветки самых «захейченных» постов, и сражается с врагами (дизлайкоподобными существами). Для победы нужно их "заплюсовать", чтобы вернуть в них человечность (референс - заблудшие из мультфильма "Душа").

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

1/3

Прототип графики

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

День 2. Кто рано встает — тот не я

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

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

Спустя примерно 8 часов все основные механики были готовы. Дальше необходимо было внедрять графику.

Прошло еще 5 часов — и несуразные круги и квадраты получили свое истинное воплощение.

А спать я пошел под забавные испанские танцы от моего главного героя.

День 3. Дедлайн близко

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

Что по итогу получилось реализовать:

  • Генерация лабиринта;

  • Базовые механики (стрельба, передвижения, жизни);

  • Механика разбиваемых  и собираемых предметов;

  • Механика бота защитника;

  • Генерация врагов волнами внутри комнаты;

  • Примитивный AI;

  • Один босс с уникальной логикой стрельбы;

  • 3 уровня с различным количеством комнат, 1 уровень с боссом.

1/4

Финальные скриншоты

Заключение

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

Ну а дальше 2 этап, нужно доделывать игру, встраивать SDK от GamePush и внедрять мобильное управление. Но это уже совсем другая история.

А пока вы можете попробовать поиграть сами (доступно только для ПК) и оставить ваши отзывы и предложения - https://pavel-cherepanov.itch.io/dungeon-of-dislikes

Также призываю ознакомиться с играми других участников!

Спасибо за уделенное время!

Показать полностью 10 3
[моё] Геймджем Инди Разработка Инди игра Игры Рогалик GP Profit Jam Roguelike Web Программирование Видео Без звука Длиннопост
12
AlexeyPerfilev
AlexeyPerfilev
9 месяцев назад

Почему я считаю, что эра JavaScript-фреймворков подходит к концу⁠⁠

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

Смелое заявление

Я считаю, что эра больших JavaScript-фреймворков (React, Angular, Vue) подходит к концу. Да-да, я сказал это.

Почему я так думаю?

  1. Сложность: С каждым обновлением фреймворки становятся всё сложнее. Новичкам всё труднее входить в разработку.

  2. Производительность: Ванильный JavaScript и небольшие специализированные библиотеки часто работают быстрее.

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

  4. Переусложнение простых задач: Для создания простой страницы приходится поднимать целую инфраструктуру.

  5. WebComponents: Нативные веб-компоненты становятся всё мощнее, уменьшая потребность в фреймворках.

Что дальше?

Я предвижу возвращение к более простым решениям:

  • Ванильный JavaScript для простых проектов

  • Микрофреймворки для конкретных задач

  • Серверный рендеринг и прогрессивное улучшение

Мой опыт

Недавно я отказался от использования React в пользу ванильного JS и WebComponents для небольшого проекта. Результат? Сайт стал быстрее, код - чище, а разработка - приятнее.

Вывод

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

А что думаете вы? Согласны ли вы, что эра больших фреймворков подходит к концу? Или я совершенно не прав? Давайте обсудим в комментариях!

P.S. Готов к горячим спорам. Фронтендеры, не сдерживайте эмоции! 😉

Показать полностью
[моё] Программирование Разработка IT Javascript Web Web-программирование Текст
9
Chief2000
10 месяцев назад

А в чем проблема поднимать 300+?⁠⁠

Собстна в чем трабл?

Ведь это далеко не топовая зп разрабов!

Есть тут кто имеет честные 5000$?

Web Разработка Текст
2
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии