I'm gonna create an Scratch Mod. in case of who don't know: Scratch is plataform that you create anything else in blocks, an simple and easy programation language. Scratch Mod is not relactioned with site moderators, an Scratch Mod is same Scratch but with new blocks, extensions and more!, i'm scratching my head now. i will show you how to create an Scratch 3 Mod.
Here's what i need:
- Git: for cloning (download) the source code.
- NodeJS / JavaScript: for programing my Scratch mod and etc.
- Python (version 2.xx, versions 3.xx is incompatible / do not work with Scratch 3): Create new mod block's.
- Java Compiler (not on-line compilers).
Knowledge needed:
- JavaScript
- React (JavaScript library)
- HTML
- CSS
- NPM
- Git
Now that's what you need to create your first scratch mod!:
Part 1: How Scratch 3 is organized
------------------------
Scratch 3.0 is designed in a modular way. Every part is a different repository on GitHub.
As you add functionality to your mod, your mod's folder will contain a sub-folder for each component. For example, your mod may look like this:
scratch_mod
scratch-gui
...
scratch-vm
...
scratch-blocks
...
Most mods will only require modifications to Scratch GUI, Scratch Blocks, and Scratch VM.
------------------------
Part 2: GIT
------------------------
- Before creating a mod: create a folder for your mod first. Before making any changes, the source code for at least Scratch GUI will need to be downloaded its dependencies will need to be installed.
- Adding a component to your mod with GIT: open GIT and run this command:
git clone https://github.com/llk/scratch-*.git
you can replace the asterisk and replace for something like: "scratch-gui" for exemple, this would download the Scratch GUI and will take less than 2.8GB in space, When cloning scratch-gui, it is recommended to add:
--depth=1
to the end of the cloning command since the Git history contains large files.
This will clone (download) the source code for the that component into into a new folder with the same name. The command will take some time to complete.
After the command completes, run
cd scratch-*
to switch to your scratch component. after that, install the dependencies with:
npm install
------------------------
Part 3: Scratch 3 / Your mod GUI
-------------------------
Clone and install the dependencies for "scratch-gui'. From the Scratch GUI folder, run:
npm start
and open localhost:8601 in your browser and tada!, you just opened your mod running in your local host. The editor will automatically reload whenever any changes are made to your mod if the terminal is left open.
--------------------------
Part 4: Setting up Scratch Blocks
--------------------------
Setting up Scratch Blocks / Modify and Add new blocks is a little different from the other components since it requires Python, Java and Google's closure library to compile and must be re-compiled every time a change is made. After cloning it, run "ln -s $(npm root)/google-closure-library ../closure-library" to download the closure library into a new sub-folder of the mod's main folder.
You can safely ignore most warnings, but if npm install fails with an error, delete the closure-library folder's contents and extract the March 2019 release into it instead.
Run:
npm run prepublish
when changes are made to Scratch Blocks to re-compile it so that they are reflected by the GUI.
To link other components: start by cloning and installing them, then run:
npm link
from the component's folder and:
npm link scratch-*
from the GUI folder. This removes the original dependency inside the GUI and replaces it with a reference to the new component's folder.
------------------------
Part 5: Editing / Changing / Create new Blocks
------------------------
To change or create a block, open directory "scratch-blocks/blocks_vertical" which contains a file for each block category. Each file contains the code defining each block in that category, for example, the "move steps" or the "move 10 steps" block should look like this in JS code:
//Motion.js
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"]
});
}
};
To change a block's label, open scratch-blocks/msg/messages.js and find the block, for example, the "move 10 steps"
block looks like this:
Blockly.Msg.MOTION_MOVESTEPS = 'move %10 steps';
so, you gonna change the "%10" value with "%1" for exemple:
Blockly.Msg.MOTION_MOVESTEPS = 'move %1 steps';
To add / create your own block to GUI, or changes his location, open directory "scratch-blocks/msg/messages.js" wich contains the JavaScript code for modifying, find the block, for exemple, the "move 10 steps" block should look like this:
<block type="motion_movesteps">
<value name="STEPS">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
To change a block's behavior or add a new one: find block category in directory "scratch-vm/src/blocks" for exemple: "scratch3_motion.js" who contains code of the motion blocks for your mod. To change a block's behavior, find the function for the block you want to change. For example, the "move 10 steps" block looks like this:
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 new block, add an entry for it in the "getPrimitives()" function, and map it to a new function:
class Scratch3MotionBlocks {
getPrimitives () {
return {
motion_movesteps: this.moveSteps,
//Other blocks
};
};
------------------------
Part 6: Done and Chill
------------------------
Finally, after some hours, days or even weeks, you just finished you mod!, so, to test the final release, build & run:
npm run build
Then, open scratch-gui/build/index.html in your browser. Scratch 3.0 mod should be running on its own without any localhost server running.
You can upload the contents of the build folder to whatever hosting service you want (GitHub Pages, Firebase Hosting, etc), or your own server, and share your mod on Scratch!
------------------------
That's it!
Font: Scratch Wiki: https://en.scratch-wiki.info/wiki/How_to_Make_a_Scratch_Modification
------------------------