Привет! Меня зовут Максим Иванков, я развиваю школы программирования и робототехники для детей уже 9 лет. В прошлых статьях рассказывал про формат самообучения в моём центре, про онлайн школу Майнкрафтия, куда дети ходят не только на занятиях, но и дома пропадают часами, и про геймификацию с алмазами, рейтингом и битвой рейтингов, которая мотивирует детей учиться. Сегодня расскажу про то, над чем работал последние 9 месяцев с перерывами — про свой собственный скрейч. Назвал я его Кубоша. Это визуальный редактор блочного программирования в стиле майнкрафта, в который я встроил задачи с автоматической проверкой и интегрировал в свою онлайн школу.

Как я вообще подошёл к этой задаче

Начинал писать редактор примерно в сентябре прошлого года. Чёткого плана у меня не было, я не понимал как двигаться и к чему это приведёт. Боялся подступать к синтаксическому дереву и обработке стыковки блоков, на тот момент не знал даже, какие готовые библиотеки существуют. Поэтому просто решил начать с интерфейса — нарисую редактор, спрайты, сцену, кнопки. Дальше по ходу разберусь.

Главное, что я понимал с самого начала — скрейч должен быть встроен в мою онлайн школу. Не как отдельная игрушка, а как полноценный тренажёр с уроками, задачами и автотестами. Чтобы ребёнок мог заниматься самостоятельно, без учителя. В оригинальном скрейче с этим есть проблема — это свободный редактор, и для работы с ним нужен учитель, который скажет что и как делать. Когда ребёнок первый раз открывает скрейч, максимум, что он в состоянии сделать — это покрутить спрайт по кругу и поотбивать его об стенки. И на этом обычно всё кончается. Чтобы двигаться дальше, нужно обучение. Раньше для этого ходили на курсы год, два, три, преподаватель на каждом занятии по презентации рассказывал, что и как нужно делать, и ребёнок постепенно собирал всё более интересные игры. Мне же хотелось автоматизировать этот процесс целиком.

Про мои курсы в двух словах

Вся моя онлайн школа Майнкрафтия построена на полной автоматизации. Учителей там нет, ребёнок занимается сам. Каждый курс — это от 50 до 300 мини уроков. В начале урока небольшая теория на 2-3 минуты чтения, потом от 3 до 30 задач. Задачи с автоматической проверкой. Под каждый курс написан свой редактор прямо внутри сайта.

Например, в курсе питона это веб-редактор питона, который я написал на реакте. Он показывает условие задачи слева, справа — поле для кода и консоль. Ребёнок пишет код, жмёт «Проверка», автотесты прогоняют его решение и говорят что правильно, что нет. Если всё хорошо — получаешь алмаз, рейтинг, идёшь к следующей задаче.

С вебом похожая история, только интереснее. Я написал большой курс по html, css, javascript, полностью покрывающий профессию верстальщика. Сам редактор сделать было даже проще, чем для питона — веб это родная среда браузера, не нужны никакие костыли, чтобы скомпилировать и запустить код. Но вот с форматом задач пришлось повозиться. Если давать задачки в стиле «напиши код для формы, для ссылки, для видео», то получается очень скучно. Плюс возникает боль с текстом — например ребёнок написал «Привет» с маленькой буквы, или без восклицательного знака, или с опечаткой, и автотест уже ругается. Я от этого формата отказался и придумал другой подход — начинать всё с вёрстки по дизайну.

Работает так: есть готовый образец сайта — картинка. Ребёнок смотрит на неё и пишет код. Код тут же компилируется в скриншот его версии сайта, этот скриншот накладывается поверх образца, и автотест считает процент совпадения пикселей. Нужно добиться совпадения 70-80% в зависимости от сложности задачи. И тут случилась магия — дети стали проходить курс заметно охотнее, потому что больше не надо зубрить каждый знак препинания, достаточно красиво сверстать по дизайну. А заодно у ребёнка нарабатывается настоящий навык верстальщика.

Аналогичные курсы я сделал по математике, информатике, по поднятию серверов в майнкрафте. Математика и информатика сделаны совсем просто — там не нужны жёсткие автотесты на код, есть банальная проверка ответа и система подсказок. В итоге получилось много курсов, которые, если честно, это даже не курсы в классическом понимании. Это скорее тренажёры с учебником, которые ребёнок проходит в своём темпе. Геймификация на платформе прокачана на максимум — алмазы, рейтинг, битва рейтингов с призами, медали, темы оформления, общий магазин. Об этом я уже подробно писал в прошлых статьях, тут останавливаться не буду.

В детском центре у меня сейчас занимается около 140 детей, из них большая часть — программисты. Именно их я и хотел обеспечить крутым тренажёром для начальной школы.

Почему не взять чистый скрейч

Было бы здорово использовать оригинальный скрейч, я бы с удовольствием не переизобретал велосипед. Но у скрейча нет никакого api, им нельзя управлять снаружи. Он как есть, так и предоставляется — вставляй в iframe и всё. Встраивать туда свои задачи с автопроверкой, подключать мою систему алмазов и рейтинга, собирать проекты детей в общую галерею на моей платформе — невозможно. Поэтому пришлось писать свой скрейч с нуля.

На это ушло практически 9 месяцев. Работал я с перерывами — раз в месяц плотненько садился на неделю-полторы, потом выгорал, откладывал, занимался другими задачами, и через пару недель возвращался. Были периоды, когда я месяцами вообще не трогал скрейч, потому что упирался в какой-то тупик и не видел, как двигаться дальше. Но потом разбирался и шёл дальше.

И вот примерно месяц назад я релизнул. Написал 8 курсов — от начального уровня для самых маленьких до мастера игр, курса по робототехнике и курса с олимпиадными задачами. Получилась система, которая развивает детей начальной и младшей средней школы в программировании по всем параметрам. Раньше здесь была дыра. С 5 класса я уже могу усадить ребёнка за питон или веб, понятно. А что делать с начальной школой? Я пробовал делать для них информатику с алгоритмами и отдельный курс по блок-схемам, но всё это получилось чёрствым, жёстким, неинтересным для 2-3 класса. А скрейч — он яркий, красочный, ребёнок сразу собирает свою игру, показывает родителям, друзьям. Совсем другой уровень вовлечения.

Что я переделал по сравнению с оригиналом

Школа моя называется Майнкрафтия, и скрейч, естественно, было нужно привязать к майнкрафту. Этим я и занялся. Поэтому он и стал называться Кубоша — от слова «кубы».

Первое, что я добавил — спрайтов в виде персонажей майнкрафта. Стив, крипер, эндермен, зомби, скелет. Это, конечно, можно было сделать и в оригинальном скрейче просто загрузив свои спрайты, ничего революционного. Основные изменения начались с фона.

Фон я сделал тайлами. То есть сцена — это не одна большая картинка, а сетка из маленьких блоков-тайлов по 16 пикселей. Все блоки — текстуры из майнкрафта. Земля, камень, руда, дерево, кирпич, грибы, растения, небо. Ребёнок заходит в редактор фона, кликает на нужный блок в палитре слева, и рисует им по холсту, как в пиксельной рисовалке. В итоге за 10 минут можно нарисовать карту целого уровня. Это совсем другая история, чем рисовать фон в оригинальном скрейче.

Второе большое изменение — бесконечные фоны. В оригинальном скрейче сделать платформер типа Марио, где персонаж бежит вправо и фон прокручивается, было очень сложно. Почти никто из детей до этого не доходил, нужно было пол года заниматься скрейчем, чтобы разобраться с камерой и прокруткой через смену костюмов спрайта. И даже когда ребёнок собирал такую игру, она получалась тяжёлой и замороченной. Я подумал — а что если просто дать возможность рисовать фон не только по размеру сцены, а добавлять колонки вправо? Рисуешь фон шириной 500 блоков, 1000 блоков, какой хочешь размер. Дальше добавляем один блок «камера следует за мной, зона 5 блоков». Этот блок сам двигает фон по иксу, когда персонаж подходит к краю виртуального квадрата вокруг сцены. Все геймдев приколы уже спрятаны внутрь — фон начинает шевелиться не сразу, а только когда персонаж достиг границы, плавно перетекает без рывков. Всё это один блок. И платформер с бесконечным фоном собирается элементарно.

Третье — коллизии с фоном. В скрейче коллизии были только между спрайтами. Если тебе нужно было, чтобы персонаж стукался о стену, эту стену нужно было делать отдельным спрайтом. Для бесконечного мира это не работает. Поэтому я добавил кастомные блоки: «изменить x на N, если не стена», «изменить y на N, если не стена». И самое важное — в каждом таком блоке есть множественный выпадающий список всех блоков майнкрафта. Можно сказать: для этого спрайта стеной считается земля, камень и дерево, а через листву, облака и цветы он проходит насквозь. И вот собственно всё, коллизии с миром работают. Написать платформер а-ля Марио — без мобов, монет и грибов — занимает буквально 10-15 минут. Точка входа в написание такой игры снизилась в разы.

Каждый урок в курсе — это задача с условием внутри редактора. Ребёнок заходит, справа видит кнопку «Условие», там написано что нужно сделать и пункты проверки («добавь блок Направление», «направление должно быть -90»). Ребёнок собирает программу, жмёт «Проверка», автотесты проходят по пунктам и если всё ок — выдаётся алмаз и +1 рейтинг. Вся остальная геймификация Майнкрафтии подхватывается автоматически.

Это пример из первого курса - для самых маленких. Дальше все сложнее и интереснее.

Сила скрейча в его комьюнити — дети создают игры, выкладывают их в общую базу, ходят друг к другу в гости, смотрят чужие игры, делятся ссылками с друзьями. Это я тоже реализовал. На Кубоше есть страница с галереей, где лежат все опубликованные проекты детей. Любой проект можно открыть и поиграть прямо в браузере, можно лайкнуть, оставить комментарий, посмотреть исходный код и скопировать идею к себе. Дети учатся не только на моих уроках, но и друг у друга.

Под капотом

Больше всего проблем в разработке, как это обычно и бывает, началось на уровне стыковки блоков. Я сначала попытался сделать её самостоятельно и потратил на это много времени. Только потом узнал, что стыковка блоков в скрейче основана на гугловской библиотеке Blockly. Причём сам оригинальный скрейч тоже на ней основан — группа энтузиастов из Массачусетского технологического института взяла Blockly и адаптировала под свои задачи. Соответственно, я тоже подключил Blockly, сильно кастомизировал её под майнкрафт стилистику, переделал рендер блоков, категории, цвета. Поверх этого написал свой компилятор Blockly XML → внутреннее представление программы, и поверх представления — виртуальную машину, которая гоняет параллельные потоки, обрабатывает события, клонов, коллизии и всё остальное. Редактор получился достаточно мощный, но при этом проще оригинального скрейча — я выкинул то, что для детей было избыточно, и добавил то, что нужно мне.

Чем всё это помогает детям

К программированию я обычно сажаю детей с 5 класса —веб, питон, разработка серверов в майнкафрте, олимпиады. До 5 класса раньше с ними было туго. Алгоритмическое мышление у большинства проваливается: современная школьная информатика с 7 класса даёт какую-то теорию, но алгоритмы там особо не затрагивают. Начальная школа алгоритмы не проходит. В свое время я учился в школе по программе 2100, в которой информатика был а с первого класса. За компьютером мы не работали, но изучили алгоритмы в жизни и технике, что сильно помогло с пониманием программирования дальше. И когда сейчас ребёнок в 5-6 классе садится за питон, у него ломается мозг: что такое переменная, условие, цикл, массив — абстракции, которые не с чем сопоставить.

Вот эту дыру Кубоша и закрывает. Ребёнок 1-4 класса приходит ко мне, садится в Кубошу, проходит курс «Первые шаги», потом «Юный программист», потом «Мастер игр». За пол года — год у него нарабатывается алгоритмическое мышление через визуальное программирование. Переменные, условия, циклы, события, сообщения между объектами — всё это он уже понимает на практике. Когда подходит время питона, никакого шока нет. Остаётся только выучить синтаксис — а синтаксис это вопрос техники.

Геймификация

Геймификацию я не переизобретал — затащил в Кубошу ту же, что уже работает во всей Майнкрафтии. Задача решена верно — +1 алмаз, +1 рейтинг. Решил 3 задачи в уроке — открылся следующий урок. Накопил рейтинг за месяц — попал в топ-3 битвы рейтингов, получил призовые алмазы и кубок в профиль. За алмазы можно купить уровень — это множитель робокоинов на оффлайн-занятиях в моём центре. Робокоины дети тратят во внутреннем магазине на печеньки, колу, наушники, игровые приставки.

Система работает идеально. Дети зарубаются за рейтинг до упора. В этом месяце лидер уже набил 8669 рейтинга — это примерно 3000 решённых задач за 20 дней. Ребёнок реально живёт платформой: занимается дома по несколько часов, пропускает мультики ради очередной задачи в Кубоше.

Отдельная мотивационная история — алмазы можно тратить на донаты на моих майнкрафт серверах. Это замыкает весь круг мотивации.

Майнкрафт сервера как продолжение платформы

У меня поднято 5 майнкрафт серверов: классическая ваниль, ванила хард (хардкорная версия, где еда заканчивается быстрее, голод наносит урон), средневековье (рпг с рангами), OneBlock (выживание на одном блоке) и Creative. Все сервера объединены одним лобби. Ребёнок заходит, выбирает сервер, играет с друзьями.

Привилегии, кейсы и предметы на серверах покупаются только за алмазы, которые ребёнок заработал решая задачи на платформе. Реальные деньги у меня на серверах не принимаются принципиально. В итоге получается цикл: решил задачу → получил алмаз → купил привилегию → играешь с друзьями на сервере. И ребёнок сам, без всякого принуждения, садится учиться дальше.

Что в итоге дало внедрение Кубоши

Те дети в моём центре, кому питон давался тяжело и они в нём тухли, в Кубоше ожили. Буквально на глазах. Ребёнок, который раньше зависал на задаче «создать переменную x равную 5», в Кубоше за первое занятие собирает мини игру, где его Стив бегает и прыгает по платформам. И у него горят глаза. Он приходит домой, собирает с другом ещё одну игру, возвращается на занятие и гордо её показывает.

Те, кому питон давался нормально, Кубошу проходят расслабленно, скорее как отдых. Но быстро цепляются за идею собрать свою игру и начинают делать что-то серьёзное. Клоны, сообщения между спрайтами, переменные, таймеры — всё это в Кубоше работает полноценно, не упрощённо. Ребята постарше собирают действительно крутые игры, которые потом выкладывают в общую галерею.

Если хочется пощупать

Если хотите сами потыкать мой скрейч или дать детям — можно пройти по ссылке: https://minecraftia-school.ru/gamepage

Сам редактор и доступ ко всем проектам других ребят там полностью бесплатный. Первые 10 уроков в любом курсе тоже бесплатно, без подписки — это 9 задач в уроке на 8 курсов Кубоши, итого 720 задач. Работы ребёнку на пару месяцев спокойного обучения. Если понравится, тогда уже можно оформлять подписку.

Любая обратная связь очень ценна. Прямо в редакторе Кубоши есть кнопка «Нашёл ошибку?» — баг-репорт отправляется мне в одно нажатие, я читаю и стараюсь фиксить в тот же день.

Подведём итоги

• Переписал скрейч с нуля, интегрировал в майнкрафт стилистику — тайловые фоны из текстур, персонажи, бесконечные карты. Писал 9 месяцев с перерывами.

• Добавил того, чего в оригинале нет: бесконечные фоны в один блок, коллизии с фоном через один блок, загрузка своих спрайтов.

• Вокруг Кубоши собрал 8 курсов — от первых шагов до мастера игр, робототехники и олимпиадных задач. Курсы интегрированы с системой алмазов, рейтинга и битвой рейтингов всей Майнкрафтии.

• Кубоша закрыла дыру в обучении программированию детей начальной и младшей средней школы. За пол года — год у ребёнка выстраивается алгоритмическое мышление, и после этого питон заходит уже без шока.

• Дети собирают свои игры, выкладывают в общую галерею, играют в проекты друг друга. Комьюнити работает.

• Связка с майнкрафт серверами замыкает цикл мотивации: решил задачу → получил алмаз → купил привилегию → играешь с друзьями.

Спасибо, что дочитали. Буду рад обратной связи в комментариях. Если есть вопросы по архитектуре, по связке платформы с майном, по геймификации или просто интересно как устроена моя онлайн школа — пишите, отвечу всем.