feat(12): ������������� Loading Screen (game.loading) #24

Merged
min merged 2 commits from feat/loading-screen-task12 into main 2026-06-02 20:10:50 +00:00
2 changed files with 45 additions and 31 deletions
Showing only changes of commit ef29c11473 - Show all commits

View File

@ -335,12 +335,12 @@ export const GAMES = [
previewShot: 'guide-dynamic-label-scene.png', openProjectId: 2261, ready: true },
{ id: 'guide-zavod', num: 58, group: 'g5', stars: 2, icon: 'cart',
title: 'Мой завод — расстановка предметов (placement)',
desc: 'Tycoon-механика «купи → поставь»: магазин-инвентарь снизу, клик по слоту → полупрозрачная тень предмета летит за курсором, ЛКМ ставит на свой участок (можно стопкой), R/колесо — поворот, ПКМ/Esc — отмена. Денег мало → слот серый. Воксельный мир: трава, деревья, пруд.',
desc: 'Tycoon-механика «купи → поставь»: магазин-инвентарь снизу, тень предмета за курсором, ЛКМ ставит на участок (можно стопкой), нет денег → слот серый.',
mechanics: ['game.placement.start', 'game.inventoryUi (магазин-слоты)', 'onPlace/onCancel/onMove', 'тень-превью формой модели', 'снап к сетке + стопка', 'проверка баланса (не в минус)', 'воксельные модели + ландшафт'],
previewShot: 'guide-zavod-scene.png', openProjectId: 2345, ready: true },
{ id: 'guide-taxi', num: 59, group: 'g5', stars: 2, icon: 'loader',
title: 'Такси-босс — экран загрузки между мирами',
desc: 'Программный экран загрузки (как в Roblox при телепорте): кликнул такси → весь экран плавно затемняется, в центре снимок сцены, жёлтый прогресс-бар заполняется за 4с, процент, кнопка «Пропустить», спиннер «Загрузка». Дальше — телепорт в город и закатное небо. В городе кнопка «Магазин» делает короткий переход.',
mechanics: ['game.loading.transition (Promise)', 'game.loading.show (хэндл setProgress/close)', 'cover: sceneSnapshot (снимок сцены)', 'прогресс-бар + процент + спиннер', 'кнопка «Пропустить» (onSkip)', 'blockInput + пауза симуляции', 'воксельный город (такси/небоскрёбы)'],
desc: 'Три локации (гараж · город · магазин), между ними — красивый экран загрузки с прогресс-баром, спиннером и кнопкой «Пропустить», как в Roblox при телепорте.',
mechanics: ['game.loading.transition (Promise)', 'game.loading.show (хэндл setProgress/close)', 'cover: sceneSnapshot (снимок сцены)', 'прогресс-бар + процент + спиннер', 'кнопка «Пропустить» (onSkip)', 'blockInput + пауза симуляции', '3 локации = телепорт + смена окружения', 'воксельный город + интерьер магазина'],
previewShot: 'guide-taxi-scene.png', openProjectId: 2427, ready: true },
];

View File

@ -8260,14 +8260,16 @@ game.placement.onCancel(() => game.ui.set('hint', '', {}));`}</Code>
<>
<h3 className="lessonH">Что получится</h3>
<p>
Игрок стоит в <b>гараже</b> рядом с жёлтым такси. Кликнул по
такси весь экран <b>плавно затемняется</b>, в центре снимок
сцены, под ним <b>жёлтый прогресс-бар</b> заполняется за 4 секунды,
крупно <b>процент</b>, кнопка <b>«Пропустить»</b> и спиннер
<b> «Загрузка»</b>. Через 4 секунды экран исчезает игрок уже
в <b>городе</b>, небо стало закатным. Это та самая «загрузка между
мирами», которую в больших играх показывают при телепорте на новый
уровень (Taxi Boss, Brookhaven, Jailbreak).
<b>Три локации в одном проекте</b>, между ними красивая загрузка.
Игрок в <b>гараже</b> у жёлтого такси жмёт «Поехать в город» весь
экран <b>плавно затемняется</b>, в центре снимок сцены, <b>жёлтый
прогресс-бар</b> заполняется за 4 секунды, крупно <b>процент</b>,
кнопка <b>«Пропустить»</b> и спиннер <b>«Загрузка»</b>. Через 4 секунды
экран исчезает игрок уже <b>в городе</b> с высотками и закатным небом.
В городе кнопка <b>«Магазин»</b> делает короткий переход <b>внутрь
закрытого магазина</b> (ряды стеллажей, кассы), а «Назад» возвращает на
улицу. Это та самая «загрузка между мирами» из больших игр (Taxi Boss,
Brookhaven, Jailbreak) несколько миров без отдельных «уровней».
</p>
<Shot src="guide-taxi-play.png" wide
@ -8298,16 +8300,22 @@ game.placement.onCancel(() => game.ui.set('hint', '', {}));`}</Code>
в этой игре берёт их сам не повторяешь стиль в каждом вызове.
</p>
<h3 className="lessonH">Шаг 2. Клик по такси переход в город</h3>
<h3 className="lessonH">Шаг 2. Кнопка «Поехать» переход в город</h3>
<p>
На самом такси висит маленький скрипт. <code>game.self.onClick</code>
клик именно по этому объекту. Внутри <code>await
game.loading.transition(...)</code>: код «замирает», пока крутится
Делаем кнопку и вешаем на неё переход. <code>await
game.loading.transition(...)</code> «замораживает» код, пока крутится
загрузка, и продолжается, когда она закончилась (или игрок нажал
«Пропустить»).
«Пропустить»). После телепорт и смена окружения: игрок «оказался» в
новом мире.
</p>
<ScriptKind kind="object" />
<Code>{`game.self.onClick(async () => {
<ScriptKind kind="global" />
<Code>{`game.gui.create('button', {
id: 'btn_go', x: 50, y: 92, w: 26, h: 9, anchor: 'center',
text: 'Поехать в город', textColor: '#3a2a00', textSize: 20, fontWeight: 800,
bgGradient: { stops: ['#ffd23a', '#e0a000'], angle: 90 }, borderRadius: 12,
});
game.gui.onClick('btn_go', async () => {
game.gui.remove('btn_go');
await game.loading.transition({
cover: { sceneSnapshot: true }, // снимок текущей сцены как картинка
duration: 4, // бар заполняется 4 секунды
@ -8320,8 +8328,11 @@ game.placement.onCancel(() => game.ui.set('hint', '', {}));`}</Code>
game.scene.environment = 'sunset'; // закатное небо
});`}</Code>
<Note>
<code>transition</code> это «фейковый» прогресс на заданное время
(для красивого перехода). Для <b>реальной</b> загрузки ресурсов есть
<code>transition</code> «фейковый» прогресс на заданное время (для
красивого перехода). Точно так же сделана кнопка <b>«Магазин»</b>:
переход <code>1.5</code>с <code>teleport</code> внутрь закрытого
зала-магазина (отдельная локация со стеллажами и кассами) кнопка
«Назад» возвращает в город. Для <b>реальной</b> загрузки ресурсов есть
<code> show</code> + <code>setProgress</code> см. Шаг 3.
</Note>
@ -8345,23 +8356,26 @@ const step = () => {
step();`}</Code>
<Shot src="guide-taxi-scene.png" wide
caption="Сцена в редакторе: гараж-двор с такси (по центру) и город из небоскрёбов поодаль — две локации в одном проекте, между ними переход через loading." />
caption="Город изнутри: перекрёсток с высотками по обеим сторонам и Макдональдс в конце улицы — одна из трёх локаций проекта (гараж · город · интерьер магазина)." />
<h3 className="lessonH">Почему это удобно</h3>
<p>
Один проект <b>несколько миров</b> (гараж, город, магазин), а
переключение между ними прячется за красивым экраном загрузки.
Игрок не видит «телепорт рывком» видит плавную загрузку, как в
больших играх. А <code>await</code> делает код линейным: «показать
загрузку дождаться продолжить».
Один проект <b>три мира</b> (гараж · город · интерьер магазина),
собранные в разных углах сцены, а переключение между ними прячется за
красивым экраном загрузки. Игрок не видит «телепорт рывком» видит
плавную загрузку, как в больших играх. А <code>await</code> делает код
линейным: «показать загрузку дождаться телепортировать сменить
небо». Так из одного проекта получается целая игра с локациями, без
отдельных уровней-файлов.
</p>
<Try>
В городе есть кнопка <b>«Магазин»</b> она делает короткий переход
(1.5с) к зданию-магазину. Сделай по аналогии ещё одну точку: кнопку
«Гараж», которая через <code>loading.transition</code> на 1 секунду
возвращает игрока к такси (<code>teleport(0, 2, 0)</code>) и ставит
дневное небо (<code>environment = 'day'</code>).
Добавь <b>четвёртую локацию</b> например «парк». Поставь её в ещё
одном углу сцены (скажем, <code>x = -100</code>), сделай кнопку «В парк»
и переход на неё через <code>loading.transition</code> (свой текст и
<code> duration</code>). Не забудь кнопку «Назад», которая возвращает в
город. Подсказка: каждый переход = <code>await transition</code>
<code> teleport(...)</code> <code>environment = '...'</code>.
</Try>
</>
),