Публикация игры на itch.io

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

Публикация — это когда твоя игра перестаёт быть файлами на твоём компьютере и становится страницей в интернете: у неё появляется адрес, обложка и кнопка «Играть», которой можно поделиться с кем угодно.

Зачем вообще что-то публиковать

Представь: ты неделями собирал свою аркаду про цыплёнка, всё работает, цыплёнок прыгает, монетки звенят, на экране проигрыша играет грустный звук. Ты зовёшь друга посмотреть — а он живёт в другом районе. Скинуть ему папку с файлами? Он откроет index.html двойным кликом, и половина браузеров скажет, что картинки и звуки «заблокированы по соображениям безопасности». Игра не запустится, и весь твой труд останется лежать мёртвым грузом.

Публикация решает это раз и навсегда. Ты загружаешь игру на специальный сайт — и получаешь обычную ссылку вроде tvoy-nik.itch.io/chicken-arcade. Кидаешь её в чат, постишь в соцсети, добавляешь в шапку профиля — и любой человек с телефона или компьютера жмёт «Играть» и сразу видит твоего цыплёнка. Никаких папок, архивов и «у меня не открывается».

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

Почему именно itch.io

Площадок, куда можно выложить браузерную игру, на самом деле несколько, и у каждой свой характер. Я выбрал itch.io не случайно — давай быстро сравним, чтобы ты понимал, что и зачем.

Для первой публикации itch.io — почти идеал: тебя не заставляют ничего платить, не держат игру «на проверке» сутками и сразу дают красивую страницу с обложкой и кнопкой «Играть». Когда захочешь — попробуешь и остальные, но начать проще всего отсюда.

Метафора: игра как посылка

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

Публикация устроена ровно так же:

• Упаковка — складываем все файлы игры в один ZIP-архив, как подарок в коробку. Главное правило: index.html должен лежать в самом верху коробки, а не на дне под другими папками.
• Отправка — загружаем коробку на itch.io. Сайт сам распаковывает её и выдаёт интернет-адрес.
• Обёртка — обложка, описание, скриншоты. Это та самая красивая картинка и записка, по которой человек решает, стоит ли открывать.

Запомни эту тройку «упаковал — отправил — оформил» — по ней мы и пойдём.

И ещё один момент про «коробку». Когда твой код жил у тебя на компьютере, браузер был к нему добрым: открыл файл — он работает. Но в интернете правила строже. Сервер отдаёт файлы по сетевым адресам, и тут вдруг становится важно всё то, на что дома можно было закрыть глаза: точные имена файлов, регистр букв, относительные пути. Поэтому половина урока — про мелочи упаковки, которые «на коленке» не вылезают, а в реальном мире ломают игру. Это нормально: так устроен любой релиз, от школьного проекта до игры в Steam.

Шаг 1. Упаковываем игру в архив

HTML5-игра — это просто набор файлов: один index.html, твои .js-файлы с кодом, картинки спрайтов цыплёнка, звуки. itch.io хочет получить их одним ZIP-архивом и при этом сразу найти внутри файл index.html, чтобы запустить игру. Поэтому самое важное правило — структура папки перед упаковкой.

Вот как должна выглядеть папка проекта:

chicken-arcade/
├── index.html        ← точка входа, должна быть в корне!
├── game.js           ← твой игровой код
├── assets/
│   ├── chicken.png   ← спрайт-лист цыплёнка
│   ├── coin.png
│   └── jump.wav      ← звуки
└── style.css         ← если есть

А теперь — главный фокус упаковки. Заходишь внутрь папки chicken-arcade, выделяешь все файлы (index.html, game.js, папку assets и так далее) и архивируешь именно их. Не саму папку снаружи, а её содержимое!

ПРАВИЛЬНО (архивируем содержимое):
chicken-arcade.zip
├── index.html        ← itch.io сразу его видит ✔
├── game.js
└── assets/...

НЕПРАВИЛЬНО (заархивировали папку целиком):
chicken-arcade.zip
└── chicken-arcade/   ← лишняя обёртка!
    ├── index.html    ← itch.io его не находит ✘
    └── ...

Результат: в первом случае при открытии архива ты сразу видишь index.html — это то, что нужно. Во втором случае внутри архива лежит ещё одна папка, и itch.io, заглянув в корень, не найдёт index.html и покажет ошибку «index.html not found».

Маленький предполётный чек

Перед упаковкой убедись, что игра вообще запускается через локальный сервер, а не двойным кликом по файлу. Помнишь, мы об этом говорили: браузер блокирует загрузку картинок и звуков, если открыть index.html просто из проводника. Самый быстрый способ проверить — запустить простой сервер прямо из папки проекта:

# если установлен Python — одна команда из папки игры
python -m http.server 8000
# теперь открой в браузере http://localhost:8000

Результат: в терминале появится строка Serving HTTP on 0.0.0.0 port 8000, а по адресу localhost:8000 игра откроется ровно так, как её увидят на itch.io — с подгруженными спрайтами цыплёнка и звуками. Если тут всё работает — значит, и после публикации заработает.

Шаг 2. Создаём страницу игры на itch.io

Теперь сама публикация. Заведи аккаунт на itch.io (это бесплатно), а дальше всё делается через кнопки на сайте — кода писать не нужно, поэтому опишу шаги словами.

1. В правом верхнем углу нажми на свой ник → Upload new project (загрузить новый проект).
2. Title — название игры. Пиши по-человечески: «Цыплёнок: побег с фермы», а не chicken_arcade_final2.
3. Project URL — кусочек будущей ссылки. Сделай его коротким и латиницей, например chicken-arcade. Полный адрес получится tvoy-nik.itch.io/chicken-arcade.
4. Kind of project — выбери HTML. Это критично: именно этот режим говорит itch.io, что игру надо запускать прямо в браузере, а не давать на скачивание.

Поле «Kind of project = HTML» — самое важное на этой странице. Если случайно оставить Downloadable, посетитель вместо кнопки «Играть» увидит кнопку «Download», скачает ZIP к себе и упрётся ровно в ту же проблему «не открывается двойным кликом», от которой мы убегаем. Так что — HTML.

Шаг 3. Загружаем архив и включаем запуск в браузере

Дальше — самое приятное. Прокрути страницу до раздела Uploads и нажми Upload files. Выбери свой chicken-arcade.zip. Когда файл загрузится, рядом с ним появится галочка «This file will be played in the browser» — обязательно её поставь. Именно она превращает архив в играбельную игру вместо файла на скачивание.

Сразу под загрузкой задай размер окна игры. Вспомни, какой canvas у твоей аркады — мы делали логическое поле, например 800 на 600:

Результат: на странице игры появляется аккуратное окошко 800 на 600 с кнопкой «Run game». Поскольку в прошлом уроке мы добавили цыплёнку адаптив и экранные кнопки, галочка Mobile friendly позволит играть и с телефона — окно подстроится под экран.

Полезно поставить Viewport ровно по размеру canvas. Если вписать окно меньше игры — у поля появятся полосы прокрутки, и цыплёнок будет частично спрятан. Если больше — вокруг игры будут пустые поля. Точное совпадение выглядит опрятнее всего.

Шаг 4. Оформляем обложку и описание

Игра загружена и запускается — но пока её страница выглядит голо. А ведь обложка и описание — это первое, что видит человек, и именно по ним он решает, нажать «Играть» или пролистнуть дальше. Это как превью у ролика на YouTube: контент классный, но без хорошей картинки на него не кликнут.

Заполни три вещи:

• Cover image (обложка) — картинка 630 на 500 пикселей. Сделай скриншот самого зрелищного момента игры — цыплёнок прыгает над пропастью, экран в монетках — и крупно напиши поверх название. Это лицо твоей игры в каталоге itch.io.
• Описание — пара живых предложений: кто герой, что делать, чем игра цепляет. Не «игра на JavaScript с использованием canvas», а «Помоги цыплёнку сбежать с фермы: прыгай по платформам, собирай монетки и не попадись лису!»
• Screenshots — добавь 2–3 скриншота геймплея. Они появятся галереей на странице и покажут игру в деле.

Когда всё готово, вверху страницы редактирования переключи Visibility & access на Public и сохрани. Всё — игра в сети! Скопируй ссылку из адресной строки и скидывай друзьям.

Маленькая хитрость со статусами

Пока ты доводишь страницу до ума, не обязательно сразу делать игру публичной. У itch.io есть три состояния видимости, и удобно ими пользоваться:

• Draft (черновик) — игру видишь только ты. Идеально, пока возишься с обложкой и описанием.
• Restricted (по ссылке) — игра не появляется в каталоге, но доступна всем, у кого есть прямая ссылка. Удобно дать одному другу на тест перед громкой премьерой.
• Public (публично) — игра в открытом доступе и попадает в каталог itch.io.

Хороший порядок такой: собрал страницу в Draft, дал ссылку паре друзей в режиме Restricted, поправил то, что они не поняли, и только потом жмёшь Public. Так первое впечатление у большой публики будет уже отполированным.

Частые ошибки и подводные камни

1. index.html спрятан внутри лишней папки

Самая частая беда новичков: заархивировали всю папку chicken-arcade целиком, а не её содержимое. itch.io заглядывает в корень архива, не находит там index.html (он лежит на уровень глубже) и пишет ошибку «Could not find index.html». Лекарство одно — зайти внутрь папки, выделить файлы и архивировать именно их, чтобы index.html оказался в самом корне ZIP.

2. Файл назван не index.html

itch.io ищет точку входа строго с именем index.html — маленькими буквами. Если у тебя файл называется game.html, Index.html или main.html, игра не запустится. Просто переименуй главный файл в index.html перед упаковкой.

3. Забыл галочку «play in browser»

Если не отметить «This file will be played in the browser» или выбрать тип проекта Downloadable вместо HTML, посетитель увидит кнопку «Download» вместо «Play». Он скачает архив, попробует открыть локально — и упрётся в блокировку картинок. Проверяй: на странице должна быть зелёная кнопка запуска, а не скачивания.

4. Пути к файлам с большой буквы или с обратным слэшем

На твоём компьютере (особенно на Windows) браузер может не заметить разницы между Chicken.png и chicken.png, а на сервере itch.io — заметит, потому что там пути чувствительны к регистру. Если в коде написано assets/Chicken.png, а файл назван chicken.png, спрайт цыплёнка не загрузится, и на экране будет пусто. Пиши пути ровно так же, как названы файлы, и используй прямые слэши /, а не \.

5. Окно игры не совпадает с размером canvas

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

Мини-практика: выпусти своего цыплёнка

Доведи публикацию до конца сам:

1. Возьми финальную аркаду про цыплёнка из прошлого урока и проверь её через python -m http.server — убедись, что спрайты и звуки грузятся.
2. Упакуй содержимое папки в ZIP так, чтобы index.html лежал в корне архива.
3. Создай на itch.io новый проект с типом HTML, загрузи архив и поставь галочку запуска в браузере.
4. Впиши Viewport по размеру своего canvas, включи Fullscreen и (если делал тач) Mobile friendly.
5. Сделай обложку из самого красивого скриншота, добавь живое описание и 2–3 скриншота.
6. Задание со звёздочкой: переключи страницу в Public, открой ссылку с телефона и попроси друга пройти игру. Запиши, на каком моменте ему стало непонятно — это твоя первая обратная связь от игрока!

Итоги

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

• Публикация идёт по схеме упаковал — отправил — оформил: ZIP-архив, страница на itch.io, обложка с описанием.
• В корне архива обязательно лежит файл index.html маленькими буквами — это точка входа, по которой запускается игра.
• Тип проекта — HTML, плюс галочка «play in browser»: без них вместо «Играть» будет «Download».
• Перед заливкой проверяй игру через локальный сервер, а пути к спрайтам пиши с правильным регистром — сервер itch.io строже твоего компьютера.
• Обложка и описание решают, кликнут ли на твою игру, — относись к ним как к превью ролика.

На этом наш курс «Игры на JavaScript» подходит к финишу: ты прошёл путь от первого квадратика на canvas до настоящей опубликованной аркады со ссылкой, которой можно гордиться. Дальше — твой собственный путь: придумывай новые механики, делай игры про что угодно и выпускай их в мир. Цыплёнок улетел из гнезда — лети и ты!