Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » Guide to Modding Scratch 3.0
- H-1r0br1b2s
- Scratcher
35 posts
Guide to Modding Scratch 3.0
Is NPM a file “npm.cmd” in Node.js (I use portable ver 'cause not my PC)
______________________________
The real signature is below
______________________________
The real signature is below
- BabyBellaBoor
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
OK I got a new pc… And is not ok to rickroll me… Is NPM a file “npm.cmd” in Node.js (I use portable ver 'cause not my PC)
______________________________
The real signature is below
- PedroAndMomCoder
- Scratcher
39 posts
Guide to Modding Scratch 3.0
Is NPM a file “npm.cmd” in Node.js (I use portable ver 'cause not my PC)
______________________________
The real signature is below
- BabyBellaBoor
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
NEW BLOCKS
By KIRBYTOES
when (@stopSign) clicked:: events hat :: grey
This Block Does Something When your arent clicking something.
when (…) clicked:: events hat :: grey
<> <> <> <> <> <>:: operators boolean :: grey
<+ ::#228b22 :: operators boolean
<- ::#228b22 :: operators boolean
<* ::#228b22 :: operators boolean
</ ::#228b22 :: operators boolean
<= ::#228b22 :: operators boolean
(> ::#228b22 :: operators boolean
If ( ) True then {
}
If ( ) False then {
}
If < > is < > To < > then {
}
(<> is [
<true ::#100000
<False ::#100000
These Are For Some Thing Like This
(<<1> <+5> <+1> <+1> <=> <8>:: operators boolean :: grey> is < true::#100000
If Text = then ::#100000
Hold for sec's ::#100000
DO NOT STEAL AS YOUR'S
uhhhh.
- BabyBellaBoor
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
here
https://www.youtube.com/watch?v=pzEhvuVOfKg1: its just a ramdom ball with a flower on it wite a mis placed collor that makes me mad,
2; you know this is not robox?
- HenGuy123
- Scratcher
4 posts
Guide to Modding Scratch 3.0
I just wanted to add some Scratch block ideas.
(() ^ ())
previous costume
green flag
pause/unpause all sounds
<<> nand <>>
<<> nor <>>
<<> xor <>>
<<> xnor <>>
run javascript ()
delete all clones
Last edited by HenGuy123 (Aug. 15, 2023 20:30:58)
- ScratchTheCoder12345
- Scratcher
500+ posts
Guide to Modding Scratch 3.0
Previous costume is already a function just do switch to costume (costume number) -1 and it will switch to previous. I just wanted to add some Scratch block ideas.(() ^ ())
previous costume
green flag
pause/unpause all sounds
<<> nand <>>
<<> nor <>>
<<> xor <>>
<<> xnor <>>
run javascript ()
delete all clones
- ImmortalJelly13
- Scratcher
500+ posts
Guide to Modding Scratch 3.0
helpful guide
Last edited by ImmortalJelly13 (Aug. 17, 2023 22:35:05)
- BabyBellaBoor
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
i think paddle2see will “shutitdown” eh epic guide
- __Falcon-Games__
- Scratcher
1000+ posts
Guide to Modding Scratch 3.0
Cloning into 'scratch-gui'...
remote: Enumerating objects: 103776, done.
remote: Counting objects: 100% (595/595), done.
remote: Compressing objects: 100% (220/220), done.
Receiving objects: 30% (31790/103776), 488.32 MiB | 2.04 MiB/s
- SussyStew13
- Scratcher
4 posts
Guide to Modding Scratch 3.0
I think scratch needs a “when stop button clicked” block
- SussyStew13
- Scratcher
4 posts
Guide to Modding Scratch 3.0
I think scratch needs a “when stop button clicked” block
- davidtheplatform
- Scratcher
500+ posts
Guide to Modding Scratch 3.0
1. Put suggestions in the I think scratch needs a “when stop button clicked” block Suggestions forum
2. That has been rejected
- dsaahishnuram
- Scratcher
2 posts
Guide to Modding Scratch 3.0
lllllllllllllllllllllllllllllllll
Last edited by dsaahishnuram (Oct. 21, 2023 13:33:54)
- dsaahishnuram
- Scratcher
2 posts
Guide to Modding Scratch 3.0
Or use TurboWarp Or Penguin Mod to add a .js as a Scratch mod.Always Be Happy
Last edited by dsaahishnuram (Oct. 21, 2023 13:32:52)
- cauzality
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
any one know how where the object lists are? I assume there is some list of sprites that is looped through so each is updated and re-drawn each frame. And that when a clone is created, it is added the list as it is removed when it is “deleted”. I want to access this list.
- cauzality
- Scratcher
100+ posts
Guide to Modding Scratch 3.0
any one know how where the object lists are? I assume there is some list of sprites that is looped through so each is updated and re-drawn each frame. And that when a clone is created, it is added the list as it is removed when it is “deleted”. I want to access this list.
I may have found it.
this.targets
- Landon_And_Emma
- Scratcher
32 posts
Guide to Modding Scratch 3.0
Things to Know Before StartingYou're telling me Scratch modding exists? But why?Install (If you Haven't Already)
- 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.
Get Started
- 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.
Create a new folder for your mod.
Scratch 3.0 is designed in a modular way.
Image From Scratch-GUI Wiki
Every part is a different repository on GitHub.
As you add more functionality to your mod, your folder you just created will contain each component. For example, your mod may look like this:scratch_mod
scratch-gui
project.json
src
...
scratch-blocks
project.json
src
...
scratch-vm
project.json
src
...
Here are the components and links to their repositories:Most mods will only require modifications to Scratch GUI, Scratch Blocks, and Scratch VM.
- 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.
Scratch GUI
From your new folder, run the commandInstall all the dependencies usinggit clone https://github.com/llk/scratch-gui
cd scratch-guiornpm installTo open the GUI in a browser, runyarn installornpm startAnd open localhost:8601 in your browser.yarn start
Scratch Blocks
From the folder you created at the start of this post (NOT scratch-gui, but its parent folder), runInside scratch-blocks, rungit clone https://github.com/llk/scratch-blocks
cd scratch-blocksornpm installLink it to your GUI so that your changes to scratch-blocks are reflected in the GUI by running the commandyarn installornpm linkAnd then, from the scratch-gui folder, runyarn linkornpm link scratch-blocksThis removes the original scratch-blocks dependency inside scratch-gui and replaces it with a reference to your scratch-blocks folder.yarn link scratch-blocks
To add or change a block, open the blocks_vertical folder.
Open the file for the type of block you want to add or change (for example, motion.js)
A block looks like this:If you're adding a new block, open msg/messages.js and add a label for the block with the same name you used in the block. For example, here's a move 100 steps block: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"] }); } };And in msg/messages.js:// 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"] }); } };To add the block to the GUI, or change its location or default values, open scratch-gui/src/make-toolbox-xml.js and add the block somewhere in the tree. Example:Blockly.Msg.MOTION_MOVE100STEPS = 'move 100 steps'; // Place the block with other blocks from the category!Once you've changed or added a block, build Scratch Blocks by running<!-- 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>ornpm run prepublishIf you get an error on this step, it is probably because Scratch Blocks' compiler uses a Python library that does not work on Windows. There are a few solutions:yarn prepublishThis issue should not affect Linux or Mac users.
- 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.
If your new blog appears red and without text in the GUI, and you have added it in the scratch-blocks folder and built scratch-blocks, try following the Build steps below. That has always fixed this issue for me, although the cause is unknown. When I find the actual cause and the solution, this post will be updated.
Scratch VM
From the folder you created at the start of this post (NOT scratch-gui, but its parent folder), runinside scratch-vm, rungit clone https://github.com/llk/scratch-vm
cd scratch-vmornpm installLink it to your GUI so that your changes to scratch-vm are reflected in the GUI by running the commandyarn installornpm linkAnd then, from the scratch-gui folder, runyarn linkornpm link scratch-vmThis removes the original scratch-blocks dependency inside scratch-gui and replaces it with a reference to your scratch-blocks folder.yarn link scratch-vm
To change the way a block works open the section's file under src/blocks. For example, for a motion block, open src/blocks/scratch3_motion.js.
Find the function for the block you want to change. For example, to change Move Steps, findTo make a sprite move 100 times the amount of steps you entered, change the function tomoveSteps (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); }If you have scratch-gui open in your browser, refresh the page, and see the sprite move much farther than before!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); }
To add functionality for a new block, open the file for the category the block is in. For example, for a motion block, open src/blocks/scratch3_motion.js. In the function getPrimitives, add an entry for the name you used in Scratch Blocks (for example, motion_move100steps) and map it to a new function. for example, with the motion_move100steps block:Refresh Scratch-GUI in your browser and try it out!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); } }
Building and Releasing
To build Scratch 3, in your Scratch-GUI folder, runornpm run buildThen, open the folder build inside Scratch-GUI, and open the index.html file in your browser. You should see your Scratch 3 mod running.yarn build
You can upload the contents of build to whatever hosting service you want (GitHub Pages, Firebase Hosting, etc), or your own server, and share your mod on Scratch!