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_goto'] = {
  /**
   * Block to go to a menu item.
   * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "message0": Blockly.Msg.MOTION_GOTO,
      "args0": [
        {
          "type": "input_value",
          "name": "TO"
        }
      ],
      "category": Blockly.Categories.motion,
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};
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 that requires JavaScript to be run to initialise, 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

Working on learning about Scratch Render at the very moment! More information should be coming soon.



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! More information will also come as documentation is released and we get closer to release.

Last edited by JGames101 (June 17, 2018 01:23:50)



Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
_nix
Scratcher
1000+ 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

art blog – My pronouns are they/them, btw. sparrows one word to the paragraph
-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

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
-Neutronic-
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

Thanks! I needed some clarifying on how to use the different scripts
-Neutronic-
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

-snip-

Last edited by -Neutronic- (April 9, 2018 02:15:56)

JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

-Neutronic- wrote:

Thanks! I needed some clarifying on how to use the different scripts
Thank you! I'm still working on learning about Scratch 3, and much more information will probably be added upon the official release of Scratch 3.


Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
apple502j
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

New Dropdown (Stable Values)
This is the example of “args”.
      "args0": [
        {
          "type": "field_dropdown",
          "name": "STYLE",
          "options": [
            ['left-right', 'left-right'],
            ['don\'t rotate', 'don\'t rotate'],
            ['all around', 'all around']
          ]
        }
      ],
All the options are under “options”, as array.
infinitytec
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

This is going to be helpful! I'll likely make a mod this fall.

Save Scratch extensions!

Wetbikeboy2500 wrote:

good old infinitytec
FlinxtheCat
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods



I can’t wait!

Follow

Last edited by FlinxtheCat (April 22, 2018 22:33:18)

LuckyLucky7
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

I got a permission denied error…

I have about 1600 posts, 75 projects, and 65 followers.

_nix
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

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.

art blog – My pronouns are they/them, btw. sparrows one word to the paragraph
LuckyLucky7
Scratcher
1000+ posts

(wip) Guide to Scratch 3.0 Mods

_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.
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.

I have about 1600 posts, 75 projects, and 65 followers.

JGames101
Scratcher
100+ posts

(wip) Guide to Scratch 3.0 Mods

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.

Last edited by JGames101 (June 16, 2018 17:18:06)



Hey! I like working with Scratch 3.

Scratch 3 Modding

My Website
AmazingMech2418
Scratcher
500+ posts

(wip) Guide to Scratch 3.0 Mods

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.
It was probably the SSH server part. I haven't done that and I got the same error.

set [variable v] to [true]
if <<I finally learned how to do a signature :: sensing> = <variable :: variables>> then
set [response v] to [YES!!!!!]
end
say (show::looks stack) for (stop [all v]::cap) secs

Powered by DjangoBB

Standard | Mobile