feat(12): ������������� Loading Screen (game.loading) #24
@ -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 },
|
||||
];
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user