Discuss Scratch

JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

Scratch 3.0 is written in HTML5. It uses the React JavaScript library, so it helps to be familiar with that as well.

Scratch 3.0 is designed in a modular way.

Image From Scratch-GUI Wiki
Every part is a different repository on GitHub. On this post, I will list them, and provide instructions on how to modify some of the bigger ones.

Here are the components and links to their repositories:
  • Scratch GUI - The GUI for Scratch 3, and the container for everything else. To mod scratch, you must include the GUI.
  • 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 Renderer - 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.

You probably won't have to touch most of these. For most purposes, you should only need to edit the GUI, Scratch Blocks, the VM, and maybe the Renderer. Here's how to modify those:

Scratch GUI
First, download the Scratch GUI using NPM and git:
git clone git@github.com:LLK/scratch-gui.git
cd scratch-gui
npm install

This will add the source code of Scratch 3 and all of its dependencies to a new folder in the current one called scratch-gui.
You can test it by running this command, and then opening localhost:8601 in a browser:
npm start
Because Scratch GUI is just the container for the other components, unless you're modifying the GUI, you shouldn't need to make too many changes.
The following components will all have instructions on linking back to the GUI.

Scratch Blocks
Scratch Blocks is based on Google's Blockly, so the Blockly documentation applies here.
The GUI should already have Scratch Blocks under the node_modules folder, but to install the latest version, or in case it is missing, run
npm install --save-dev scratch-blocks
This will add the latest version from the dev branch to the node_modules folder.
In your terminal, go to node_modules\scratch-blocks and run
npm install
Once you've made your changes, you can build Scratch Blocks using
npm link
Note: You can also use the command python build.py to build scratch blocks, but from my experience, changes aren't reflected in the GUI unless you run npm link.
If you get an error about closure in this step, follow these instructions.

To test Scratch Blocks on its own, go to the “tests” folder, and run vertical_playground.html.

To add a block, go to the blocks_vertical folder.
If you want to modify or remove and existing block, or add a block to that section (eg Motion, Looks), edit that file (eg motion.js). To add your own section, create a new file (eg http.js).
A block looks like this:
Blockly.Blocks['motion_movesteps'] = {
  /**
   * Block to move steps.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "message0": "move %1 steps", // What you'll see in the UI
      "args0": [ // All of the arguments in the block
        {
          "type": "input_value", // The first argument, in this case steps
          "name": "STEPS"
        }
      ],
      "category": Blockly.Categories.motion, // the category the block is under
      "extensions": ["colours_motion", "shape_statement"] // the colour and shape
    });
  }
};
Notice that, unlike an extension, we're not defining a function. That's because that's done in the VM.

Added blocks will not instantly appear.
To add it to the main GUI, first build scratch blocks, and then open make-toolbox-xml.js under \src\lib, eg:
<block type="motion_movesteps">
    <value name="STEPS">
        <shadow type="math_number">
            <field name="NUM">10</field>
         </shadow>
    </value>
</block>

If you're adding a block, you also need to add it to blocks.js, under the folder src/lib.


Scratch VM
In the Scratch GUI's node_modules folder, find the scratch-vm folder. Once there, open a command prompt, and run
npm install
This will install all of the dependencies of scratch-vm.
To change the function of a block, open the src/blocks folder, and open the section for the block you want to edit (eg for move 10 blocks, open scratch3_motion.js). Here's what the move () steps function looks like:
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);
}
To add a block, first look at what you set the block type to in scratch blocks. For example, if I added a block called motion_middle, then I would add a function to scratch3_motion.js called middle, ie
middle (args, util) {
        util.target.setXY(0, 0);
}

Then, to build it so that you can use it in Scratch GUI, run
npm run build

Scratch Render
First, be sure you have the renderer installed:
npm install https://github.com/LLK/scratch-render.git
Then, from inside the folder (node_modules/scratch-render), run
npm install



More instructions and clarity will be added in the future. I need to familiarize myself with modifying the components other than Scratch Blocks and the GUI. Feel free to contribute any knowledge you have below!

Last edited by JGames101 (Jan. 24, 2018 01:10:44)



Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
_nix
Scratcher
500+ posts

(wip) Guide to Scratch 3.0 Mods

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

blog (it has art, code, and stuff)

My pronouns are they/them, btw.
-Vuton-
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

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

(wip) Guide to Scratch 3.0 Mods

Reported it to be stickied!


Click above
JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

PintOfMilk wrote:

Reported it to be stickied!
Thank you!

Last edited by JGames101 (Jan. 21, 2018 23:18:16)



Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

_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
For your own version of the VM, did you change the existing VM, or write a new one from scratch?

If you customized the existing one, move it to the node_modules folder, rename it scratch-vm, and run
npm link
from that folder. From memory, I think that builds it, but if not, follow the instructions above to build it.
You can also just run
npm run build
You don't need to link, as long as it's in the node_modules folder.

Last edited by JGames101 (Jan. 23, 2018 04:44:32)



Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

-Vuton- wrote:

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


Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
PullJosh
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

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

JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

PullJosh wrote:

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


Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website

Powered by DjangoBB

Standard | Mobile