• JavaScript: Scratch 3 is almost entirely written in JavaScript. You should be familiar with JavaScript to mod Scratch 3.
  
• React, HTML, and CSS: Scratch 3 uses the JavaScript library React. If you're interested in modding the UI, you should be familiar with React, HTML, and CSS.
  
• NPM or Yarn: Although it's not necessary to understand NPM or Yarn to Mod Scratch 3, as this post shows the commands you need to use, for more advanced mods that aren't explained in this post, understanding NPM or Yarn will be helpful.
  

• Git: Git allows you to clone the Scratch 3 code and then (if you want) upload it to your own repository that you can share with others on Scratch.
  
• NodeJS: NodeJS is a tool for running JavaScript code in the command line, and includes a package manager, NPM. NPM will allow you to install dependencies, and open Scratch 3 in a browser.
  
• NPM or Yarn: NPM and Yarn are package managers that use the same database of packages. Use whichever you prefer.
  
• Code Editor: Although theoretically, you could create a Scratch 3 mod in Notepad, it's much easier with a code editor such as Visual Studio Code, Atom, Notepad++, or the many others available online.
  
• Python: Scratch Blocks' build tool uses Python. If your mod adds new blocks, you'll need Python. Scratch Blocks is incompatible with Python 3.x. Use Python 2.x instead.
  

scratch_mod
    scratch-gui
        project.json
        src
        ...
    scratch-blocks
        project.json
        src
        ...
    scratch-vm
        project.json
        src
        ...

• Scratch GUI - The GUI for Scratch 3.
  
• Scratch Blocks - The Blocks interface for Scratch 3, based on Google's Blockly. This allows you to add or remove blocks.
  
• Scratch VM - Running the Scratch 3 project. This allows you to add or change functions of any blocks.
  
• Scratch Render - Renders the Scratch 3 project in WebGL.
  
• Scratch Paint - The Vector Editor for Scratch 3.
  
• Scratch Audio - The Audio Engine for making noise in Scratch 3.
  
• Scratch Storage - Loading and Storing projects and assets in Scratch 3.
  
• Scratch SVG Renderer - Handles “quirks” of Scratch 2 SVGs.
  

git clone https://github.com/llk/scratch-gui
cd scratch-gui

npm install

yarn install

npm start

yarn start

git clone https://github.com/llk/scratch-blocks
cd scratch-blocks

npm install

yarn install

npm link

yarn link

npm link scratch-blocks

yarn link scratch-blocks

Blockly.Blocks['motion_movesteps'] = {
  /**
   * Block to move steps.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "message0": Blockly.Msg.MOTION_MOVESTEPS,
      "args0": [
        {
          "type": "input_value",
          "name": "STEPS"
        }
      ],
      "category": Blockly.Categories.motion,
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};

// motion.js
Blockly.Blocks['motion_move100steps'] = {
  /**
   * Block to move 100 steps.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "message0": Blockly.Msg.MOTION_MOVE100STEPS,
      "category": Blockly.Categories.motion,
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};

Blockly.Msg.MOTION_MOVE100STEPS = 'move 100 steps';
// Place the block with other blocks from the category!

<!-- Move 100 Steps Block -->
<block type="motion_move100steps" />
<!-- Move X Steps Block -->
<block type="motion_movesteps">
  <value name="STEPS">
    <shadow type="math_number">
      <field name="NUM">2</field>
    </shadow>
  </value>
</block>

npm run prepublish

yarn prepublish

• 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.
  
• Use the online version of the compiler: If Java is not available, the online version of the compiler will be run. You can temporarily deactivate Java without uninstalling it by temporarily removing it from the path.
  

git clone https://github.com/llk/scratch-vm
cd scratch-vm

npm install

yarn install

npm link

yarn link

npm link scratch-vm

yarn link scratch-vm

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);
}

moveSteps (args, util) {
  const steps = Cast.toNumber(args.STEPS*100);
  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);
}

class Scratch3MotionBlocks {
  getPrimitives () {
        return {
            motion_move100steps: this.move100Steps,
           // Other Blocks
        };
    };
    
    // Other Functions
    move100Steps (args, util) {
        const steps = 100;
        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);
    }
}

npm run build

yarn build

PintOfMilk wrote:

Reported it to be stickied!

_nix wrote:

Awesome! This will be very helpful. I was having some trouble figuring out how to connect (my own version of) the VM to the GUI, so, I'm especially interested in seeing that. And it looks like you've already planned to include information on that (and the other components) anyways

-Vuton- wrote:

Nice, You've explained everything really well! You should probably change “github” to “GitHub”, but it doesn't matter too much.

PullJosh wrote:

Congrats on the sticky! Can't wait to see this tutorial continue to develop.

-Neutronic- wrote:

Thanks! I needed some clarifying on how to use the different scripts

LuckyLucky7 wrote:

I got a permission denied error…

_nix wrote:

LuckyLucky7 wrote:

I got a permission denied error…

Can you copy-and-paste the entire error message? We can probably figure out exactly what went wrong if we have that.

git clone git@github.com:LLK/scratch-gui.git

Cloning into 'scratch-gui'...
Warning: Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

LuckyLucky7 wrote:

After I put the following:

git clone git@github.com:LLK/scratch-gui.git

It said:

Cloning into 'scratch-gui'...
Warning: Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

I used Command Prompt for this.

JGames101 wrote:

LuckyLucky7 wrote:

After I put the following:

git clone git@github.com:LLK/scratch-gui.git

It said:

Cloning into 'scratch-gui'...
Warning: Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

I used Command Prompt for this.

Interesting. I don't face that problem on either command prompt or powershell. There are some possible reasons for the error listed on github's help page here. If that doesn't help, try reinstalling git.