diff --git a/src/community/KubikonDocs.jsx b/src/community/KubikonDocs.jsx index 5fe7f51..ceb85c8 100644 --- a/src/community/KubikonDocs.jsx +++ b/src/community/KubikonDocs.jsx @@ -224,12 +224,21 @@ const GamesGrid = ({ onOpenLesson }) => ( Если урока ещё нет — иконка-плейсхолдер. */}
{ready ? ( - {g.title} + <> + {/* Фолбэк-иконка под картинкой: если превью-файл + отсутствует (урок есть, но скрин ещё не снят) — + onError прячет битый img и показывает иконку. */} +
+ +
+ {g.title} { e.currentTarget.style.display = 'none'; }} + /> + ) : (
@@ -981,14 +990,22 @@ const INLINE_STYLES = ` } .gameCard--ready:hover .gameCard__img { transform: scale(1.04); } .gameCard__img { transition: transform 300ms ease; } -/* плейсхолдер, если урока ещё нет */ +/* плейсхолдер, если урока ещё нет ИЛИ превью-файл не загрузился. + absolute+inset:0 — лежит фоном под ; если img есть и загрузился, + он перекрывает иконку; если img.onError спрятал его — видна иконка. */ .gameCard__noimg { + position: absolute; + inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #3357ff; } +.gameCard__img { + position: relative; + z-index: 1; +} /* плашки поверх превью */ .gameCard__num { position: absolute; diff --git a/src/community/docsLessons.jsx b/src/community/docsLessons.jsx index a43772f..08ab94c 100644 --- a/src/community/docsLessons.jsx +++ b/src/community/docsLessons.jsx @@ -7776,6 +7776,125 @@ game.player.setSkinCoins(500); // задать баланс рубликов ), }, + // ════════════════════════════════════════════════════ + // РАЗБОР ИГР · Туториал — собери монетки (оригинал id=333) + // ════════════════════════════════════════════════════ + 'guide-strelka': { + body: ( + <> +

Что получится

+

+ Простой туториал-уровень: ровный газон и три цели — + красный куб, синяя сфера и золотой сундук. + Над целью парит светящаяся стрелка-указатель «иди сюда», + а к ней по земле бежит дорожка из шевронов — точь-в-точь как + маркеры заданий в Roblox. Дошёл до цели — стрелка сама + перепрыгивает на следующую и меняет цвет. +

+ +

Чему научишься

+
    +
  • game.fx.pointer — создавать 3D-указатель к цели + (лента шевронов + парящий маркер над объектом);
    • +
  • пресеты стрелки — готовые стили + guide (красная), quest (жёлтая), + gift (радужная);
    • +
  • setTarget / update — перенацеливать стрелку на новую + цель и менять её стиль на лету;
    • +
  • onTouch — ловить, когда игрок дошёл до цели.
    • +
+ +

Шаг 1. Сцена

+ + Инструментом Примитив положи большой + плоский куб — это газон (пол). + + + Поставь три примитива-цели и дай им имена в инспекторе: + red-cube (куб), blue-sphere (сфера), + gold-chest (куб). Имя — это как раз то, по чему + скрипт найдёт объект. + + + На вкладке Игра поставь точку спавна перед целями. + + +

Шаг 2. Стрелка к первой цели

+

+ Стрелку создаёт одна команда. Важно: ищем цель не сразу, + а через game.after — на старте объекты сцены ещё + могут быть не готовы. +

+ + {`// === ТУТОРИАЛ — СОБЕРИ МОНЕТКИ — главный скрипт === + +const targets = ['red-cube', 'blue-sphere', 'gold-chest']; +const presets = ['guide', 'quest', 'gift']; // цвета стрелки по очереди +let step = 0; +let arrow = null; + +game.ui.set('hint', 'Иди за стрелкой к цели!', { x: 50, y: 6, anchor: 'top' }); + +// Через 0.4 сек — создаём стрелку от игрока к первой цели. +game.after(0.4, () => { + const first = game.scene.findOne(targets[0]); + arrow = game.fx.pointer({ from: 'player', to: first, preset: 'guide' }); +});`} +

+ game.fx.pointer({ from, to, preset }) — + from: 'player' значит «от игрока», + to — объект-цель (нашли через + findOne), preset — стиль. +

+ +

Шаг 3. Переход к следующей цели

+

+ На каждую цель вешаем onTouch: дошёл — берём + следующую и перенацеливаем ту же стрелку через + setTarget, а стиль меняем через + update. +

+ {`for (let i = 0; i < targets.length; i++) { + const obj = game.scene.findOne(targets[i]); + if (!obj) continue; + obj.onTouch(() => { + if (i !== step) return; // только текущая по порядку цель + step++; + if (step >= targets.length) { + if (arrow) arrow.remove(); // все цели собраны — убираем стрелку + game.ui.set('hint', 'Молодец! Все цели собраны!', { x: 50, y: 6, anchor: 'top' }); + return; + } + const next = game.scene.findOne(targets[step]); + arrow.setTarget(next); // стрелка теперь ведёт к следующей + arrow.update({ preset: presets[step] }); // и меняет цвет + }); +}`} + +

Шаг 4. Проверка

+ + Нажми Играть. Над красным кубом + появится парящая красная стрелка и дорожка-шевроны к нему. + + + Подойди к кубу — стрелка перепрыгнет на синюю сферу (станет + жёлтой), потом на сундук (радужная). + + + Стрелка-указатель — лучший способ вести новичка по твоей игре: + куда идти, что нажать, где следующее задание. + + + сделай «кастомную» стрелку: добавь GUI-кнопку и по нажатию + создай game.fx.pointer с + texture: 'lightning', color: '#22ff66' + и curved: true — получится изогнутая зелёная + молниевая стрелка. + + + ), + }, + }; /** Есть ли готовый текст урока для игры с таким id. */