Просмотр кода страницы Как сделать модификацию Скретча

{{не для новичков}}{{External Programs}}
{{other version|3.0|2.0|1.4}}
Хоть и Скретч может показаться сложным для некоторых пользователей, некоторые [[скретчер]]ы создают [[Модификация Скретча|'''модификации''']] или '''моды программы''', чтобы добавить больше функций или [[блок]]ов, настроить [[пользовательский интерфейс]] (UI) или улучшить производительность. [[Скретч 3.0]] был разработан на языке программирования [[JavaScript]].

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

=== Требования ===

==== Программное обеспечение ====
Перед тем, как начать модифицировать Скретч, установите следующее ПО на Ваш компьютер:
* [https://git-scm.com/downloads Git]: Git позволяет клонировать (скачать) исходный код Скретч 3.0 и, если Вы хотите, опубликовать свою модификацию в репозиторий, доступный всем.
* [https://nodejs.org/ru/download/ Node.js]: Node.js — это фреймворк, позволяющий выполнять JavaScript-код в командной строке и включает в себя пакетный менеджер NPM.
* Редактор кода '''(необязательно)''': Модификация Скретча может быть сделана в текстовом редакторе вроде «Блокнота», однако мод легче писать с помощью редактора кода, например, [https://code.visualstudio.com/Download Visual Studio Code] или [https://www.sublimetext.com/download Sublime Text].
* [https://www.python.org/downloads/release/python-2718/ Python 2] '''(необязательно)''': Если Ваш мод добавляет новые блоки, Вам понадобится Python 2. {{note|Библиотека [[Scratch Blocks]] для блоков несовместима с Python 3.x. Вместо него используйте Python 2.x.{{cite post|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]]|name=modding_topic}}}}
* Компилятор Java '''(необязательно)''': Scratch Blocks требует Java для сборки блоков. Существует онлайн-компилятор, но он может вызывать проблемы.{{cite post|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://learn.microsoft.com/ru-ru/windows/wsl/install Подсистема Windows для Linux] '''(необязательно)''': При использовании Windows выполнение команд в Linux-среде поможет предотвратить ошибки.<ref name=modding_topic/>

==== Знания ====
Кроме того, Вы должны обладать определёнными знаниями о следующем:
* JavaScript
* React (библиотека JavaScript)
* HTML / XML
* CSS
* NPM
* Git

=== Как устроен Скретч 3.0 ===
[[File:Репозитории программы Скретч 3.0.jpg|300px|thumb]]{{main|Исходный код Скретча#Скретч 3.0}}
Скретч 3.0 разработан по модульному принципу. Каждая часть — это отдельный репозиторий на GitHub.

По мере добавления функциональности в мод, папка мода будет содержать вложенные папки для каждого компонента. Например, ваш мод может выглядеть следующим образом:
<pre>scratch_mod
    scratch-gui
        ...
    scratch-vm
        ...
    scratch-blocks
        ...</pre>

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

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

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

=== Добавление компонента к моду ===
Откройте командную строку в папке вашего мода и выполните команду <pre>git clone https://github.com/scratchfoundation/scratch-*.git</pre>, заменив астериск на название компонента, например, <code>gui</code>.
{{Внимание|При скачивании scratch-gui рекомендуется добавить '''<code><nowiki>--depth=1</nowiki></code>''' к концу команды, чтобы не скачивать историю коммитов, так как история Git содержит огромные файлы.}}

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

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

=== Открытие графического интерфейса ===
[[File:Scratch-gui develop.png|300px|thumb|Версия для разработки редактора Скретч 3.0. Обратите внимание, что [[публикация]] и вход в [[аккаунт]] невозможны]]

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

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

=== Установка Scratch Blocks ===
Установка [[Scratch Blocks]] немного отличается от установки остальных компонентов, так как он требует Python, Java и библиотеку closure-library от Google для комплияции, а также требует повторную компиляцию на каждом изменении. Установите Google Closure Library через команду <code>npm install google-closure-library</code>, а затем выполните команду <pre>ln -s node_modules/google-closure-library ../closure-library</pre>, чтобы скопировать Google Closure Library в новую подпапку в папке мода.

Вы можете спокойно игнорировать большую часть предупреждений, но если команда <code>npm install</code> завершается с ошибкой, удалите содержимое папки closure-library и попробуйте извлечь содержимое [https://github.com/google/closure-library/releases/tag/v20190301 релиза марта 2019 года] в неё.

Выполняйте команду <pre>npm run prepublish</pre> при внесении изменений в Scratch Blocks, чтобы перекомпилировать его и отразить изменения в пользовательском интерфейсе. 

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

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

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

=== Изменение блока в Scratch Blocks ===
Для того, чтобы изменить блок, откройте папку <code>scratch-blocks/blocks_vertical</code>, содержащую файл для каждой категории блоков. Каждый файл содержит код, определяющий каждый блок в соответствующей категории. Например, блок <sb>идти () шагов</sb> выглядит в таком файле примерно так:
<pre>//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"] // Дополнительные расширения: цвета и форма блока
    });
  }
};
</pre>
Чтобы изменить текст блока, откройте файл <code>scratch-blocks/msg/messages.js</code> и найдите блок по идентификатору в переменной <code>message0</code>, которая в данном случае имеет значение <code>Blockly.Msg.MOTION_MOVESTEPS</code>:
<pre>Blockly.Msg.MOTION_MOVESTEPS = 'move %1 steps';</pre>
{{note|В данном случае текст блока меняется в английской версии. Для того, чтобы поменять текст в русской версии, откройте файл <code>scratch-blocks/msg/scratch_msgs.js</code>, содержащий надписи на других языках, и найдите строчку <code><nowiki>Blockly.ScratchMsgs.locales["ru"] =</nowiki></code>. После неё находятся все надписи для блоков, но на русском языке.}}

=== Добавление блока к графическому интерфейсу ===
Чтобы добавить блок к GUI или изменить его расположение или заводские значения, откройте файл <code>scratch-gui/src/lib/make-toolbox-xml.js</code> и найдите блок, например, блок <sb>идти (10) шагов</sb>:
<pre><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></pre>

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

Для того, чтобы изменить поведение блока, найдите функцию блока в файле. Например, блок <sb>идти () шагов</sb> выглядит в данном файле так:
<pre>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);
}</pre>
Чтобы создать новый блок, добавьте для него запись в функции <code>getPrimitives</code> и сопоставьте его с новой функцией.
<pre>class Scratch3MotionBlocks {
getPrimitives () {
    return {
        motion_movesteps: this.moveSteps,
        //Другие блоки
    };
};</pre>

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

Для того, чтобы собрать Скретч, в папке GUI выполните:
<pre>npm run build</pre>
После этого откройте файл <code>scratch-gui/build/index.html</code> в Вашем браузере. Теперь модификация должна работать сам по себе, без какого-либо локального сервера.

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

== См. также ==

* [[Список модификаций Скретча]]

== Источники ==
<references/>

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

* {{Ссылка на английском|статья=topic:289503|название=Руководство по моддингу Скретч 3.0 на форумах}}
* [https://github.com/scratchfoundation Организация Скретча на GitHub]
* [https://scratchfoundation.github.io/scratch-gui/ Ветка development (разработки) редактора Скретча версии 3.0]
* [https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks?hl=ru Документация о блоках Blockly, на котором построен Скретч 3.0]

[[Категория:Модификации Скретча]]
[[Категория:Руководства]]
[[en:How to Make a Scratch Modification]]