feat(12): ������������� Loading Screen (game.loading) #24
@ -335,12 +335,12 @@ export const GAMES = [
|
|||||||
previewShot: 'guide-dynamic-label-scene.png', openProjectId: 2261, ready: true },
|
previewShot: 'guide-dynamic-label-scene.png', openProjectId: 2261, ready: true },
|
||||||
{ id: 'guide-zavod', num: 58, group: 'g5', stars: 2, icon: 'cart',
|
{ id: 'guide-zavod', num: 58, group: 'g5', stars: 2, icon: 'cart',
|
||||||
title: 'Мой завод — расстановка предметов (placement)',
|
title: 'Мой завод — расстановка предметов (placement)',
|
||||||
desc: 'Tycoon-механика «купи → поставь»: магазин-инвентарь снизу, клик по слоту → полупрозрачная тень предмета летит за курсором, ЛКМ ставит на свой участок (можно стопкой), R/колесо — поворот, ПКМ/Esc — отмена. Денег мало → слот серый. Воксельный мир: трава, деревья, пруд.',
|
desc: 'Tycoon-механика «купи → поставь»: магазин-инвентарь снизу, тень предмета за курсором, ЛКМ ставит на участок (можно стопкой), нет денег → слот серый.',
|
||||||
mechanics: ['game.placement.start', 'game.inventoryUi (магазин-слоты)', 'onPlace/onCancel/onMove', 'тень-превью формой модели', 'снап к сетке + стопка', 'проверка баланса (не в минус)', 'воксельные модели + ландшафт'],
|
mechanics: ['game.placement.start', 'game.inventoryUi (магазин-слоты)', 'onPlace/onCancel/onMove', 'тень-превью формой модели', 'снап к сетке + стопка', 'проверка баланса (не в минус)', 'воксельные модели + ландшафт'],
|
||||||
previewShot: 'guide-zavod-scene.png', openProjectId: 2345, ready: true },
|
previewShot: 'guide-zavod-scene.png', openProjectId: 2345, ready: true },
|
||||||
{ id: 'guide-taxi', num: 59, group: 'g5', stars: 2, icon: 'loader',
|
{ id: 'guide-taxi', num: 59, group: 'g5', stars: 2, icon: 'loader',
|
||||||
title: 'Такси-босс — экран загрузки между мирами',
|
title: 'Такси-босс — экран загрузки между мирами',
|
||||||
desc: 'Программный экран загрузки (как в Roblox при телепорте): кликнул такси → весь экран плавно затемняется, в центре снимок сцены, жёлтый прогресс-бар заполняется за 4с, процент, кнопка «Пропустить», спиннер «Загрузка». Дальше — телепорт в город и закатное небо. В городе кнопка «Магазин» делает короткий переход.',
|
desc: 'Три локации (гараж · город · магазин), между ними — красивый экран загрузки с прогресс-баром, спиннером и кнопкой «Пропустить», как в Roblox при телепорте.',
|
||||||
mechanics: ['game.loading.transition (Promise)', 'game.loading.show (хэндл setProgress/close)', 'cover: sceneSnapshot (снимок сцены)', 'прогресс-бар + процент + спиннер', 'кнопка «Пропустить» (onSkip)', 'blockInput + пауза симуляции', 'воксельный город (такси/небоскрёбы)'],
|
mechanics: ['game.loading.transition (Promise)', 'game.loading.show (хэндл setProgress/close)', 'cover: sceneSnapshot (снимок сцены)', 'прогресс-бар + процент + спиннер', 'кнопка «Пропустить» (onSkip)', 'blockInput + пауза симуляции', '3 локации = телепорт + смена окружения', 'воксельный город + интерьер магазина'],
|
||||||
previewShot: 'guide-taxi-scene.png', openProjectId: 2427, ready: true },
|
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>
|
<h3 className="lessonH">Что получится</h3>
|
||||||
<p>
|
<p>
|
||||||
Игрок стоит в <b>гараже</b> рядом с жёлтым такси. Кликнул по
|
<b>Три локации в одном проекте</b>, между ними — красивая загрузка.
|
||||||
такси → весь экран <b>плавно затемняется</b>, в центре — снимок
|
Игрок в <b>гараже</b> у жёлтого такси жмёт «Поехать в город» → весь
|
||||||
сцены, под ним <b>жёлтый прогресс-бар</b> заполняется за 4 секунды,
|
экран <b>плавно затемняется</b>, в центре снимок сцены, <b>жёлтый
|
||||||
крупно <b>процент</b>, кнопка <b>«Пропустить»</b> и спиннер
|
прогресс-бар</b> заполняется за 4 секунды, крупно <b>процент</b>,
|
||||||
<b> «Загрузка»</b>. Через 4 секунды экран исчезает — игрок уже
|
кнопка <b>«Пропустить»</b> и спиннер <b>«Загрузка»</b>. Через 4 секунды
|
||||||
в <b>городе</b>, небо стало закатным. Это та самая «загрузка между
|
экран исчезает — игрок уже <b>в городе</b> с высотками и закатным небом.
|
||||||
мирами», которую в больших играх показывают при телепорте на новый
|
В городе кнопка <b>«Магазин»</b> делает короткий переход <b>внутрь
|
||||||
уровень (Taxi Boss, Brookhaven, Jailbreak).
|
закрытого магазина</b> (ряды стеллажей, кассы), а «Назад» возвращает на
|
||||||
|
улицу. Это та самая «загрузка между мирами» из больших игр (Taxi Boss,
|
||||||
|
Brookhaven, Jailbreak) — несколько миров без отдельных «уровней».
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Shot src="guide-taxi-play.png" wide
|
<Shot src="guide-taxi-play.png" wide
|
||||||
@ -8298,16 +8300,22 @@ game.placement.onCancel(() => game.ui.set('hint', '', {}));`}</Code>
|
|||||||
в этой игре берёт их сам — не повторяешь стиль в каждом вызове.
|
в этой игре берёт их сам — не повторяешь стиль в каждом вызове.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3 className="lessonH">Шаг 2. Клик по такси → переход в город</h3>
|
<h3 className="lessonH">Шаг 2. Кнопка «Поехать» → переход в город</h3>
|
||||||
<p>
|
<p>
|
||||||
На самом такси висит маленький скрипт. <code>game.self.onClick</code> —
|
Делаем кнопку и вешаем на неё переход. <code>await
|
||||||
клик именно по этому объекту. Внутри — <code>await
|
game.loading.transition(...)</code> «замораживает» код, пока крутится
|
||||||
game.loading.transition(...)</code>: код «замирает», пока крутится
|
|
||||||
загрузка, и продолжается, когда она закончилась (или игрок нажал
|
загрузка, и продолжается, когда она закончилась (или игрок нажал
|
||||||
«Пропустить»).
|
«Пропустить»). После — телепорт и смена окружения: игрок «оказался» в
|
||||||
|
новом мире.
|
||||||
</p>
|
</p>
|
||||||
<ScriptKind kind="object" />
|
<ScriptKind kind="global" />
|
||||||
<Code>{`game.self.onClick(async () => {
|
<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({
|
await game.loading.transition({
|
||||||
cover: { sceneSnapshot: true }, // снимок текущей сцены как картинка
|
cover: { sceneSnapshot: true }, // снимок текущей сцены как картинка
|
||||||
duration: 4, // бар заполняется 4 секунды
|
duration: 4, // бар заполняется 4 секунды
|
||||||
@ -8320,8 +8328,11 @@ game.placement.onCancel(() => game.ui.set('hint', '', {}));`}</Code>
|
|||||||
game.scene.environment = 'sunset'; // закатное небо
|
game.scene.environment = 'sunset'; // закатное небо
|
||||||
});`}</Code>
|
});`}</Code>
|
||||||
<Note>
|
<Note>
|
||||||
<code>transition</code> — это «фейковый» прогресс на заданное время
|
<code>transition</code> — «фейковый» прогресс на заданное время (для
|
||||||
(для красивого перехода). Для <b>реальной</b> загрузки ресурсов есть
|
красивого перехода). Точно так же сделана кнопка <b>«Магазин»</b>:
|
||||||
|
переход <code>1.5</code>с → <code>teleport</code> внутрь закрытого
|
||||||
|
зала-магазина (отдельная локация со стеллажами и кассами) → кнопка
|
||||||
|
«Назад» возвращает в город. Для <b>реальной</b> загрузки ресурсов есть
|
||||||
<code> show</code> + <code>setProgress</code> — см. Шаг 3.
|
<code> show</code> + <code>setProgress</code> — см. Шаг 3.
|
||||||
</Note>
|
</Note>
|
||||||
|
|
||||||
@ -8345,23 +8356,26 @@ const step = () => {
|
|||||||
step();`}</Code>
|
step();`}</Code>
|
||||||
|
|
||||||
<Shot src="guide-taxi-scene.png" wide
|
<Shot src="guide-taxi-scene.png" wide
|
||||||
caption="Сцена в редакторе: гараж-двор с такси (по центру) и город из небоскрёбов поодаль — две локации в одном проекте, между ними переход через loading." />
|
caption="Город изнутри: перекрёсток с высотками по обеим сторонам и Макдональдс в конце улицы — одна из трёх локаций проекта (гараж · город · интерьер магазина)." />
|
||||||
|
|
||||||
<h3 className="lessonH">Почему это удобно</h3>
|
<h3 className="lessonH">Почему это удобно</h3>
|
||||||
<p>
|
<p>
|
||||||
Один проект — <b>несколько миров</b> (гараж, город, магазин), а
|
Один проект — <b>три мира</b> (гараж · город · интерьер магазина),
|
||||||
переключение между ними прячется за красивым экраном загрузки.
|
собранные в разных углах сцены, а переключение между ними прячется за
|
||||||
Игрок не видит «телепорт рывком» — видит плавную загрузку, как в
|
красивым экраном загрузки. Игрок не видит «телепорт рывком» — видит
|
||||||
больших играх. А <code>await</code> делает код линейным: «показать
|
плавную загрузку, как в больших играх. А <code>await</code> делает код
|
||||||
загрузку → дождаться → продолжить».
|
линейным: «показать загрузку → дождаться → телепортировать → сменить
|
||||||
|
небо». Так из одного проекта получается целая игра с локациями, без
|
||||||
|
отдельных уровней-файлов.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Try>
|
<Try>
|
||||||
В городе есть кнопка <b>«Магазин»</b> — она делает короткий переход
|
Добавь <b>четвёртую локацию</b> — например «парк». Поставь её в ещё
|
||||||
(1.5с) к зданию-магазину. Сделай по аналогии ещё одну точку: кнопку
|
одном углу сцены (скажем, <code>x = -100</code>), сделай кнопку «В парк»
|
||||||
«Гараж», которая через <code>loading.transition</code> на 1 секунду
|
и переход на неё через <code>loading.transition</code> (свой текст и
|
||||||
возвращает игрока к такси (<code>teleport(0, 2, 0)</code>) и ставит
|
<code> duration</code>). Не забудь кнопку «Назад», которая возвращает в
|
||||||
дневное небо (<code>environment = 'day'</code>).
|
город. Подсказка: каждый переход = <code>await transition</code> →
|
||||||
|
<code> teleport(...)</code> → <code>environment = '...'</code>.
|
||||||
</Try>
|
</Try>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user