Перші проєкти в Scratch дитина робить блоками «рухатися на 10 кроків» і «повернути на 15 градусів». Працює це доти, доки спрайт не треба поставити в конкретне місце. Тоді з'являються блоки з x та y, а разом з ними питання, на які сам Scratch відповіді не дає: чому вісімдесят вище за двісті, чому мінус — це вліво і де взагалі нуль.
Розберемо сцену як карту. Це одна з тих тем, після якої проєкти дитини перестають бути «спрайт біжить куди попало» і стають точними: кнопки стоять де треба, персонаж з'являється у відомій точці, а гра не ламається від того, що хтось вибіг за край.
Сцена — це аркуш з нулем посередині
Сцена Scratch завжди однакова: 480 одиниць у ширину і 360 у висоту. Нуль не в кутку, як на екрані комп'ютера, а точно в центрі. Через це половина значень виходить від'ємною, і саме це спершу збиває з пантелику.
| Місце на сцені | x | y |
|---|---|---|
| Центр | 0 | 0 |
| Правий край | 240 | 0 |
| Лівий край | -240 | 0 |
| Верх | 0 | 180 |
| Низ | 0 | -180 |
| Правий верхній кут | 240 | 180 |
| Лівий нижній кут | -240 | -180 |
Запам'ятовувати цю таблицю не потрібно — достатньо один раз провести спрайт по чотирьох кутах і подивитися, які числа показує панель. Для дитини це перший випадок, коли від'ємні числа означають щось видиме, а не абстракцію з підручника, і саме тому тема заходить легше за шкільний варіант.
Корисно одразу сказати і про межу: за край сцени спрайт повністю не виходить, Scratch притримує його так, щоб частина залишалася видимою. Тому задати x у тисячу можна, а поїде спрайт усе одно до краю — не помилка, а захист від втрати персонажа.
Блоки, які працюють з координатами
| Блок | Що робить |
|---|---|
| перейти в x: y: | ставить спрайт у точку миттєво |
| плавно за 1 с перейти в x: y: | те саме, але з анімацією |
| змінити x на 10 | зсув праворуч від поточного місця |
| змінити y на -10 | зсув униз від поточного місця |
| задати x значення 0 | ставить тільки горизонталь |
| задати y значення 0 | ставить тільки вертикаль |
| перейти в випадкову позицію | кидає спрайт у довільну точку |
| позиція x | повертає поточне число для перевірок |
| позиція y | те саме по вертикалі |
Головна різниця в цій таблиці — між «перейти» і «змінити». Перше задає місце, друге додає до нього. Блок «змінити x на 10» усередині циклу дає рух, а «перейти в x: 10» усередині того самого циклу не дасть нічого: спрайт просто щоразу повертається в одну точку. Переплутати ці два блоки — найчастіша причина, чому персонаж «не ходить».
Два останніх рядки — не команди, а значення, і вони найцінніші для ігор. З них складаються перевірки: якщо позиція x більша за 200, відбити м’яч; якщо позиція y менша за -150, персонаж упав. Без них гра не вміє реагувати на те, де знаходиться спрайт.
Напрямок живе за іншими правилами
Тут пастка, яку не очікуєш. Координати в Scratch звичайні, математичні, а кути — ні. У Scratch нуль градусів дивиться вгору, 90 — праворуч, 180 — вниз, а -90 або 270 — ліворуч. У шкільній математиці все інакше: нуль дивиться праворуч, і відлік іде проти годинникової стрілки.
Через це дитина, яка вже бачила кути на уроках, ставить 0 і чекає руху праворуч, а спрайт їде вгору. Пояснювати тут краще не словами: дати блок «повернутися в напрямку» і чотири значення, нехай подивиться сама. Після цього плутанини не буває.
Друга особливість — блок «рухатися на 10 кроків» рухає спрайт туди, куди він дивиться. Тобто крок залежить від напрямку, а зміна x — ні. Для простої аркади зручніший другий спосіб: він не залежить від того, чи повертався персонаж.
Чому спрайт стоїть не там, де поставили
Дитина ставить x і y в нуль, а спрайт виявляється збоку від центру. Причина не в координатах: вони вказують не на малюнок, а на центр костюма — ту точку всередині спрайта, від якої все відраховується. Якщо персонаж намальований у куті полотна, центр залишається посередині полотна, і видима частина виявляється осторонь.
Лікується в редакторі костюмів: виділити малюнок і перетягнути його так, щоб потрібна точка опинилася в перехресті посередині. Для персонажа це зазвичай середина тіла, а для стрілки чи ракети — її хвіст, бо обертатися вона має навколо нього. Це той випадок, коли двохвилинна правка костюма знімає задачу, яку інакше намагаються розв'язати кодом.
Як підглянути координати під час гри
Найпростіший спосіб — перетягнути спрайт мишкою і подивитися на панель під сценою: там завжди показані його поточні x та y. Так дитина за хвилину знаходить числа для будь-якого місця, замість того щоб вгадувати їх у коді.
Другий спосіб потрібен, коли гра вже працює і щось у ній іде не так. Витягніть блоки «позиція x» і «позиція y» на сцену галочкою біля них — числа почнуть показуватися поверх гри і будуть змінюватися в реальному часі. Видно одразу: спрайт застряг на краю, поїхав у мінус або стоїть на місці, хоча має рухатися.
Цей прийом варто показати раніше, ніж здається потрібним. Він перетворює пошук помилки з гадання на спостереження, і це той самий підхід, яким потім користуються в текстових мовах, тільки там замість галочки пишуть вивід у консоль.
Де поставити інтерфейс
Коли в проєкті з'являються кнопки, таблички з очками й написи, координати стають способом розкласти екран. Робочі орієнтири прості: рядок з очками зручно тримати вгорі ліворуч, десь біля x -180 та y 150, кнопку «почати» — у центрі трохи нижче нуля, підказки — внизу, щоб вони не перекривали дію.
Числа тут не священні, і підбирати їх на око цілком нормально. Важливіше інше: щойно місця задані числами, а не перетягуванням мишкою, проєкт можна відкрити через місяць і поправити розкладку, не збиваючи все інше. Спрайт, посаджений мишкою, при наступній правці поїде, і повернути його точно туди ж буде вже нічим.
Корисна звичка — тримати межу в 20 одиниць від краю. Спрайт, поставлений впритул до 240, на деяких екранах виглядає обрізаним, і гру потім доводиться правити по всьому проєкту.
Де спотикаються найчастіше
Перше: знак у y. Щоб опустити спрайт, потрібно відняти, тобто «змінити y на -10». Половина дітей пише плюс і дивується, що персонаж стрибає в небо замість того, щоб падати.
Друге: координати іншого розміру. Якщо спрайт збільшити вдвічі, його координати не змінюються — рух на 10 залишається рухом на 10, хоч крок візуально виглядає меншим відносно великої фігури. Числа сцени ніяк не пов'язані з масштабом спрайта.
Третє: кілька клонів і одна змінна. Коли в грі десять клонів і позицію зберігають у загальній змінній, вони заважають один одному. Потрібна змінна «тільки для цього спрайта» — у Scratch це окремий вибір при створенні, і пропустити його легко.
Три задачі, щоб перевірити себе
Перша: провести спрайт по всіх чотирьох кутах сцени і повернути в центр, без блоку випадкової позиції. Друга: намалювати пером квадрат зі стороною 100, починаючи з центру — тут одразу виявиться, чи зрозуміла різниця між «перейти» і «змінити». Третя: зробити так, щоб спрайт, доїхавши до правого краю, з’являвся біля лівого; це вже перевірка на вміння читати позицію, а не тільки її задавати.
Якщо якась з трьох займає більше десяти хвилин, справа майже завжди не в координатах, а в тому, який блок обрано. Перелік блоків за категоріями ми зібрали в окремому довіднику, а про те, коли від Scratch час переходити до текстової мови, є розбір Scratch і Python.