docs(studio): вики задача 16 — карточка #62 + статья «Небесная демка»
Карточка g5 #62 guide-skybox (preview guide-skybox-scene.png, openProjectId 2541) + статья в docsLessons (что получится, API setSkybox/setClouds/setFog/ fadeTo, 3 шага, 4 скриншота день/ночь/космос) + иконка cloud в docsIcons. Скрины в public/wiki (вне git) — на прод донести вручную при возврате CI. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
min
parent
a4881ee5ce
commit
8a7ab9aadf
@ -353,4 +353,9 @@ export const GAMES = [
|
|||||||
desc: 'Полноценные машины: подходишь, держишь F — садишься за руль, WASD рулят, камера следует за авто, спидометр снизу. E — выйти. Готовые 3D-модели машин.',
|
desc: 'Полноценные машины: подходишь, держишь F — садишься за руль, WASD рулят, камера следует за авто, спидометр снизу. E — выйти. Готовые 3D-модели машин.',
|
||||||
mechanics: ['game.scene.spawn(\'vehicle:car\')', 'аркадная физика (газ/руль/тормоз)', 'hold-F вход / E выход', 'камера за машиной (V меняет)', 'HUD водителя (спидометр+передача)', 'onVehicleEnter/onVehicleExit'],
|
mechanics: ['game.scene.spawn(\'vehicle:car\')', 'аркадная физика (газ/руль/тормоз)', 'hold-F вход / E выход', 'камера за машиной (V меняет)', 'HUD водителя (спидометр+передача)', 'onVehicleEnter/onVehicleExit'],
|
||||||
previewShot: 'guide-taxisim-scene.png', openProjectId: 2436, ready: true },
|
previewShot: 'guide-taxisim-scene.png', openProjectId: 2436, ready: true },
|
||||||
|
{ id: 'guide-skybox', num: 62, group: 'g5', stars: 2, icon: 'cloud',
|
||||||
|
title: 'Небесная демка — кастомное небо',
|
||||||
|
desc: 'Одной строкой меняешь небо: голубой день, закат, звёздная ночь, космос. Облака, туман, далёкие горы и плавные переходы между пресетами.',
|
||||||
|
mechanics: ['game.scene.setSkybox({ preset })', 'game.scene.setClouds / setFog', 'skybox.fadeTo(opts, сек) — плавный переход', '6 пресетов: день/lowpoly/закат/ночь/космос', 'небо = единый источник света сцены', 'облака-дрейф + дымка горизонта'],
|
||||||
|
previewShot: 'guide-skybox-scene.png', openProjectId: 2541, ready: true },
|
||||||
];
|
];
|
||||||
|
|||||||
@ -319,6 +319,11 @@ const ICONS = {
|
|||||||
<path d="M9 12l2 2 4-4" {...S} />
|
<path d="M9 12l2 2 4-4" {...S} />
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
|
cloud: () => (
|
||||||
|
<>
|
||||||
|
<path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.3A3.5 3.5 0 0 1 17.5 18H7z" {...S} />
|
||||||
|
</>
|
||||||
|
),
|
||||||
car: () => (
|
car: () => (
|
||||||
<>
|
<>
|
||||||
<path d="M3 14l1.8-5a2 2 0 0 1 1.9-1.4h8.6A2 2 0 0 1 19 9l1.8 5M3 14h18M3 14v3.5h2.5V14M21 14v3.5h-2.5V14" {...S} />
|
<path d="M3 14l1.8-5a2 2 0 0 1 1.9-1.4h8.6A2 2 0 0 1 19 9l1.8 5M3 14h18M3 14v3.5h2.5V14M21 14v3.5h-2.5V14" {...S} />
|
||||||
|
|||||||
@ -8596,6 +8596,101 @@ game.onVehicleExit((vehicleRef) => {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'guide-skybox': {
|
||||||
|
body: (
|
||||||
|
<>
|
||||||
|
<h3 className="lessonH">Что получится</h3>
|
||||||
|
<p>
|
||||||
|
<b>Красивое небо в одну строку.</b> Вместо плоского цветного фона —
|
||||||
|
градиентный купол с солнцем, плывущими облаками, дымкой у горизонта
|
||||||
|
и далёкими горами (low-poly стиль, как в топовых Roblox-играх). Небо
|
||||||
|
меняется кнопками: <b>день</b>, <b>закат</b>, <b>звёздная ночь</b>,
|
||||||
|
<b> космос</b> — с плавным переходом за пару секунд. И главное: небо —
|
||||||
|
это <b>единый источник света</b>: меняешь пресет → вместе с небом
|
||||||
|
меняется и освещение всей сцены (на закате теплеет, ночью темнеет).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Shot src="guide-skybox-scene.png" wide
|
||||||
|
caption="Дневное небо (пресет «Lowpoly»): голубой градиент, облака, дымка у горизонта, далёкие горы — town выглядит живым." />
|
||||||
|
|
||||||
|
<h3 className="lessonH">Чему научишься</h3>
|
||||||
|
<ul>
|
||||||
|
<li><b>game.scene.setSkybox({'{'} preset {'}'})</b> — поставить готовое небо
|
||||||
|
одной строкой (6 пресетов);</li>
|
||||||
|
<li><b>game.scene.setClouds(...)</b> — облака: плотность, скорость дрейфа, цвет;</li>
|
||||||
|
<li><b>game.scene.setFog(...)</b> — атмосферный туман: дальние объекты выцветают в небо;</li>
|
||||||
|
<li><b>game.scene.skybox.fadeTo(opts, сек)</b> — плавный переход между небесами;</li>
|
||||||
|
<li><b>game.scene.skybox.setSunDirection(...)</b> — двигать солнце (анимация дуги).</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 className="lessonH">Шаг 1. Поставить небо</h3>
|
||||||
|
<p>
|
||||||
|
Самое простое — выбрать пресет. Доступны:
|
||||||
|
<code>clear-summer-day</code>, <code>lowpoly-roblox</code>,
|
||||||
|
<code>cloudy</code>, <code>sunset</code>, <code>starry-night</code>,
|
||||||
|
<code>space</code>.
|
||||||
|
</p>
|
||||||
|
<ScriptKind kind="global" />
|
||||||
|
<Code>{`// Голубое low-poly небо с облаками, дымкой и горами (как на скрине):
|
||||||
|
game.scene.setSkybox({ preset: 'lowpoly-roblox' });
|
||||||
|
game.scene.setClouds({ enabled: true, cover: 0.45, speed: 0.014 });
|
||||||
|
game.scene.setFog({ color: '#e2eef7', density: 0.005 });`}</Code>
|
||||||
|
<Note>
|
||||||
|
Небо само выставляет освещение сцены под выбранный пресет — отдельно
|
||||||
|
свет настраивать не нужно. Купол бесконечно далёкий, поэтому ходить
|
||||||
|
«до края неба» нельзя — оно всегда вокруг игрока.
|
||||||
|
</Note>
|
||||||
|
|
||||||
|
<h3 className="lessonH">Шаг 2. Плавная смена неба (день → закат → ночь)</h3>
|
||||||
|
<p>
|
||||||
|
<code>skybox.fadeTo</code> переводит небо к новому пресету за указанное
|
||||||
|
число секунд — цвета купола, солнце, облака, туман и свет сцены
|
||||||
|
меняются плавно. Удобно вешать на кнопки или события.
|
||||||
|
</p>
|
||||||
|
<ScriptKind kind="global" />
|
||||||
|
<Code>{`game.gui.onClick('btn-sunset', () => game.scene.skybox.fadeTo({ preset: 'sunset' }, 2));
|
||||||
|
game.gui.onClick('btn-night', () => game.scene.skybox.fadeTo({ preset: 'starry-night' }, 2));
|
||||||
|
game.gui.onClick('btn-space', () => game.scene.skybox.fadeTo({ preset: 'space' }, 2));`}</Code>
|
||||||
|
|
||||||
|
<Shot src="guide-skybox-night.png" wide
|
||||||
|
caption="Пресет «Звёздная ночь»: тёмно-синий купол со звёздами, свет сцены приглушён — town погружается в ночь. Переход плавный (fadeTo)." />
|
||||||
|
|
||||||
|
<Shot src="guide-skybox-space.png" wide
|
||||||
|
caption="Пресет «Космос»: почти чёрное звёздное небо, туман отключён — дальние объекты видны чётко." />
|
||||||
|
|
||||||
|
<h3 className="lessonH">Шаг 3. Своё небо (gradient)</h3>
|
||||||
|
<p>
|
||||||
|
Можно не брать пресет, а задать цвета купола вручную — верх, низ,
|
||||||
|
горизонт и солнце.
|
||||||
|
</p>
|
||||||
|
<ScriptKind kind="global" />
|
||||||
|
<Code>{`game.scene.setSkybox({
|
||||||
|
mode: 'gradient',
|
||||||
|
topColor: '#3d7fe0', // зенит
|
||||||
|
bottomColor: '#dcebf7', // у земли
|
||||||
|
horizonColor: '#bcd9f2', // линия горизонта
|
||||||
|
sunDirection: { x: 0.3, y: 0.85, z: 0.4 },
|
||||||
|
sunColor: '#fff6d8',
|
||||||
|
sunSize: 0.035,
|
||||||
|
});`}</Code>
|
||||||
|
|
||||||
|
<h3 className="lessonH">Почему это важно</h3>
|
||||||
|
<p>
|
||||||
|
Небо — половина визуального впечатления от мира. С плоским фоном все
|
||||||
|
игры выглядят одинаково и дёшево; с кастомным небом — атмосферно и
|
||||||
|
«дорого». А связка неба с освещением даёт бесплатный приём: смена
|
||||||
|
времени суток одной строкой мгновенно меняет настроение всей сцены.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Try>
|
||||||
|
Сделай день/ночь цикл: по таймеру каждые 10 секунд переключай
|
||||||
|
<code>fadeTo</code> между <code>'clear-summer-day'</code> и
|
||||||
|
<code>'starry-night'</code>. Добавь облака погуще на день и убери на ночь.
|
||||||
|
</Try>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Есть ли готовый текст урока для игры с таким id. */
|
/** Есть ли готовый текст урока для игры с таким id. */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user