Материал из Скретч Вики

ScratchJr On Flag block.png Этот раздел или статья не предназначена для новичка! Она содержит сложную информацию.
SandCastleIcon.png Эта статья содержит ссылки на веб-сайты или программы, не доверенные командой Скретча или предоставляемые Википедией. Помните о безопасности при пользовании Интернетом, так как мы не можем гарантировать безопасность других сайтов.
Эта статья или раздел документирует текущую версию Скретча (3.0). Для данной статьи о Скретч 2.0 см. Как сделать модификацию Скретча (2.0). Для статьи о Скретч 1.4 см. Как сделать модификацию Скретча (1.4).

Хоть и Скретч может показаться сложным для некоторых пользователей, некоторые скретчеры создают модификации или моды программы, чтобы добавить больше функций или блоков, настроить пользовательский интерфейс (UI) или улучшить производительность. Скретч 3.0 был разработан на языке программирования JavaScript.

Перед тем, как начать

Требования

Программное обеспечение

Перед тем, как начать модифицировать Скретч, установите следующее ПО на Ваш компьютер:

  • Git: Git позволяет клонировать (скачать) исходный код Скретч 3.0 и, если Вы хотите, опубликовать свою модификацию в репозиторий, доступный всем.
  • Node.js: Node.js — это фреймворк, позволяющий выполнять JavaScript-код в командной строке и включает в себя пакетный менеджер NPM.
  • Редактор кода (необязательно): Модификация Скретча может быть сделана в текстовом редакторе вроде «Блокнота», однако мод легче писать с помощью редактора кода, например, Visual Studio Code или Sublime Text.
  • Python 2 (необязательно): Если Ваш мод добавляет новые блоки, Вам понадобится Python 2.
Информация.png Библиотека Scratch Blocks для блоков несовместима с Python 3.x. Вместо него используйте Python 2.x.[1]
  • Компилятор Java (необязательно): Scratch Blocks требует Java для сборки блоков. Существует онлайн-компилятор, но он может вызывать проблемы.[2]
  • Подсистема Windows для Linux (необязательно): При использовании Windows выполнение команд в Linux-среде поможет предотвратить ошибки.[1]

Знания

Кроме того, Вы должны обладать определёнными знаниями о следующем:

  • JavaScript
  • React (библиотека JavaScript)
  • HTML / XML
  • CSS
  • NPM
  • Git

Как устроен Скретч 3.0

Репозитории программы Скретч 3.0.jpg
Основная статья: Исходный код Скретча#Скретч 3.0

Скретч 3.0 разработан по модульному принципу. Каждая часть — это отдельный репозиторий на GitHub.

По мере добавления функциональности в мод, папка мода будет содержать вложенные папки для каждого компонента. Например, ваш мод может выглядеть следующим образом: 

scratch_mod
    scratch-gui
        ...
    scratch-vm
        ...
    scratch-blocks
        ...

В основном для модов нужны изменения только к Scratch GUI, Scratch Blocks и Scratch VM.

Начало работы

Создайте новую папку для мода. Перед тем, как начать делать любые изменения, необходимо скачать исходный код для хотя бы scratch-gui, а также установить его зависимости.

Добавление компонента к моду

Откройте командную строку в папке вашего мода и выполните команду 

git clone https://github.com/scratchfoundation/scratch-*.git

, заменив астериск на название компонента, например, gui.

Значок «важно».png Внимание! При скачивании scratch-gui рекомендуется добавить --depth=1 к концу команды, чтобы не скачивать историю коммитов, так как история Git содержит огромные файлы.

Данная команда склонирует (clone, скачает) исходный код компонента в новую папку с таким же названием, что и у компонента. Команде потребуется некоторое время для завершения.

После завершения команды выполните cd scratch-*, чтобы переключиться к папке соответствующего компонента, а затем команду npm install для установки всех зависимостей. Установке зависимостей тоже потребуется время.

Открытие графического интерфейса

Версия для разработки редактора Скретч 3.0. Обратите внимание, что публикация и вход в аккаунт невозможны

Склонируйте и установите зависимости для scratch-gui по инструкции в прошлом разделе.

В папке Scratch GUI выполните команду npm start, которая запустит сам scratch-gui, и откройте адрес localhost:8601 в веб-браузере. Вы должны увидеть свой работающий мод! Редактор будет автоматически перезагружен при любом изменении, если команда ещё работает.

Установка Scratch Blocks

Установка Scratch Blocks немного отличается от установки остальных компонентов, так как он требует Python, Java и библиотеку closure-library от Google для комплияции, а также требует повторную компиляцию на каждом изменении. Установите Google Closure Library через команду npm install google-closure-library, а затем выполните команду 

ln -s node_modules/google-closure-library ../closure-library

, чтобы скопировать Google Closure Library в новую подпапку в папке мода.

Вы можете спокойно игнорировать большую часть предупреждений, но если команда npm install завершается с ошибкой, удалите содержимое папки closure-library и попробуйте извлечь содержимое релиза марта 2019 года в неё.

Выполняйте команду 

npm run prepublish

при внесении изменений в Scratch Blocks, чтобы перекомпилировать его и отразить изменения в пользовательском интерфейсе.

Соединение остальных компонентов

Для того, чтобы соединить компоненты, начните с их скачивания и установки, а затем выполните npm link из папки компонента и npm link scratch-* из папки scratch-gui, заменив астериск на компонент. Это удаляет исходную зависимость внутри scratch-gui и заменяет её ссылкой на папку нового компонента.

Добавление или изменение блока

Перед тем, как добавить или изменить любой блок, необходимо соединить Scratch Blocks и Scratch VM к GUI.

Изменение блока в Scratch Blocks

Для того, чтобы изменить блок, откройте папку scratch-blocks/blocks_vertical, содержащую файл для каждой категории блоков. Каждый файл содержит код, определяющий каждый блок в соответствующей категории. Например, блок идти () шагов выглядит в таком файле примерно так: 

//Motion.js
Blockly.Blocks['motion_movesteps'] = {
  /**
   * Блок для ходьбы по шагам.
   * @this Blockly.Block
   */
  init: function() { // Инициализация блока с определенными параметрами
    this.jsonInit({
      "message0": Blockly.Msg.MOTION_MOVESTEPS, // Текст сообщения блока из языкового файла Blockly
      "args0": [
        {
          "type": "input_value", // Тип аргумента: в данном случае ввод значения
          "name": "STEPS" // Имя аргумента
        }
      ],
      "category": Blockly.Categories.motion, // Категория блока: движение
      "extensions": ["colours_motion", "shape_statement"] // Дополнительные расширения: цвета и форма блока
    });
  }
};

Чтобы изменить текст блока, откройте файл scratch-blocks/msg/messages.js и найдите блок по идентификатору в переменной message0, которая в данном случае имеет значение Blockly.Msg.MOTION_MOVESTEPS: 

Blockly.Msg.MOTION_MOVESTEPS = 'move %1 steps';
Информация.png В данном случае текст блока меняется в английской версии. Для того, чтобы поменять текст в русской версии, откройте файл scratch-blocks/msg/scratch_msgs.js, содержащий надписи на других языках, и найдите строчку Blockly.ScratchMsgs.locales["ru"] =. После неё находятся все надписи для блоков, но на русском языке.

Добавление блока к графическому интерфейсу

Чтобы добавить блок к GUI или изменить его расположение или заводские значения, откройте файл scratch-gui/src/lib/make-toolbox-xml.js и найдите блок, например, блок идти (10) шагов: 

<block type="motion_movesteps"> 
<!-- Создание блока типа "motion_movesteps" -->
  <value name="STEPS"> 
  <!-- Определение значения "STEPS" для блока -->
    <shadow type="math_number"> 
      <field name="NUM">10</field> 
      <!-- Установка заводского значения "10". Тип "NUM" и "math_number" позволяет ввести только числа -->
    </shadow>
  </value>
</block>

Изменение поведения блока

Чтобы изменить поведение блока или добавить его к новому блоку, найдите категорию блока в папке scratch-vm/src/blocks. Например, категория «Движение» (Motion) находится в файле scratch3_motion.js.

Для того, чтобы изменить поведение блока, найдите функцию блока в файле. Например, блок идти () шагов выглядит в данном файле так: 

moveSteps (args, util) {
  const steps = Cast.toNumber(args.STEPS);
  const radians = MathUtil.degToRad(90 - util.target.direction);
  const dx = steps * Math.cos(radians);
  const dy = steps * Math.sin(radians);
  util.target.setXY(util.target.x + dx, util.target.y + dy);
}

Чтобы создать новый блок, добавьте для него запись в функции getPrimitives и сопоставьте его с новой функцией. 

class Scratch3MotionBlocks {
getPrimitives () {
    return {
        motion_movesteps: this.moveSteps,
        //Другие блоки
    };
};

Сборка и публикация

Для того, чтобы собрать Скретч, в папке GUI выполните: 

npm run build

После этого откройте файл scratch-gui/build/index.html в Вашем браузере. Теперь модификация должна работать сам по себе, без какого-либо локального сервера.

Теперь Вы можете загрузить содержимое папки build в любой сервис для хостинга (например, GitHub Pages, Firebase Hosting и т. д.) или на свой сервер, и поделиться своим модом на Скретче!

См. также

Источники

  1. ↑ 1,0 1,1 JGames101 (21.01.2018) «Scratch Blocks is incompatible with Python 3.x. Use Python 2.x instead. [...] Run the command from a Bash Terminal, such as the one that comes with Git on Windows, or in a Windows Subsystem for Linux environment.» (Scratch Blocks несовместим с Python 3.x. Вместо него используйте Python 2.x. [...] Запустите команду из Bash-терминала, такого как тот, что поставляется с Git в Windows, или в среде подсистемы Windows для Linux.) topic:289503
  2. ↑ kccuber (11.02.2022) «Actually, the correct way is to install default-jre on WSL Ubuntu, which fixes this odd bug.» (На самом деле, правильный способ — установить default-jre на WSL Ubuntu, который исправляет эту странную ошибку.) post:6026696

Внешние ссылки

Источник — https://ru.scratch-wiki.info/w/index.php?title=Как_сделать_модификацию_Скретча&oldid=11804
Cookie-файлы помогают нам предоставлять наши услуги. Используя наши сервисы, вы соглашаетесь с использованием cookie-файлов.
Дополнительная информация (на немецком)