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-модели машин.',
|
||||
mechanics: ['game.scene.spawn(\'vehicle:car\')', 'аркадная физика (газ/руль/тормоз)', 'hold-F вход / E выход', 'камера за машиной (V меняет)', 'HUD водителя (спидометр+передача)', 'onVehicleEnter/onVehicleExit'],
|
||||
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} />
|
||||
</>
|
||||
),
|
||||
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: () => (
|
||||
<>
|
||||
<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. */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user