Discuss Scratch

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
przemoprosik
Scratcher
1 post

Guide to Modding Scratch 3.0

BabyBellaBoor
Scratcher
100+ posts

Guide to Modding Scratch 3.0

H-1r0br1b2s wrote:

Is NPM a file “npm.cmd” in Node.js (I use portable ver 'cause not my PC)
______________________________

The real signature is below
OK I got a new pc… And is not ok to rickroll me…
PedroAndMomCoder
Scratcher
39 posts

Guide to Modding Scratch 3.0

H-1r0br1b2s wrote:

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

kirbytoes wrote:

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.
PedroAndMomCoder
Scratcher
39 posts

Guide to Modding Scratch 3.0

BabyBellaBoor
Scratcher
100+ posts

Guide to Modding Scratch 3.0

PedroAndMomCoder wrote:

here

AKshaggysurfer wrote:

https://www.youtube.com/watch?v=pzEhvuVOfKg
1: 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

HenGuy123 wrote:

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
Previous costume is already a function just do switch to costume (costume number) -1 and it will switch to previous.
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

ImmortalJelly13 wrote:

epic guide
i think paddle2see will “shutitdown” eh
__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

SussyStew13 wrote:

I think scratch needs a “when stop button clicked” block
1. Put suggestions in the 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

dsaahishnuram wrote:

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

cauzality wrote:

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

JGames101 wrote:

Things to Know Before Starting
  • 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.
Install (If you Haven't Already)
  • 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.
Get Started
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:
  • 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.
Most mods will only require modifications to Scratch GUI, Scratch Blocks, and Scratch VM.

Scratch GUI
From your new folder, run the command
git clone https://github.com/llk/scratch-gui
cd scratch-gui
Install all the dependencies using
npm install
or
yarn install
To open the GUI in a browser, run
npm start
or
yarn start
And open localhost:8601 in your browser.

Scratch Blocks
From the folder you created at the start of this post (NOT scratch-gui, but its parent folder), run
git clone https://github.com/llk/scratch-blocks
cd scratch-blocks
Inside scratch-blocks, run
npm install
or
yarn install
Link it to your GUI so that your changes to scratch-blocks are reflected in the GUI by running the command
npm link
or
yarn link
And then, from the scratch-gui folder, run
npm link scratch-blocks
or
yarn link scratch-blocks
This removes the original scratch-blocks dependency inside scratch-gui and replaces it with a reference to your scratch-blocks folder.
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:
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"]
    });
  }
};
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:
// 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"]
    });
  }
};
And in msg/messages.js:
Blockly.Msg.MOTION_MOVE100STEPS = 'move 100 steps';
// Place the block with other blocks from the category!
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:
<!-- 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>
Once you've changed or added a block, build Scratch Blocks by running
npm run prepublish
or
yarn prepublish
If 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:
  • 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.
This issue should not affect Linux or Mac users.

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), run
git clone https://github.com/llk/scratch-vm
cd scratch-vm
inside scratch-vm, run
npm install
or
yarn install
Link it to your GUI so that your changes to scratch-vm are reflected in the GUI by running the command
npm link
or
yarn link
And then, from the scratch-gui folder, run
npm link scratch-vm
or
yarn link scratch-vm
This removes the original scratch-blocks dependency inside scratch-gui and replaces it with a reference to your scratch-blocks folder.
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, find
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 make a sprite move 100 times the amount of steps you entered, change the function to
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);
}
If you have scratch-gui open in your browser, refresh the page, and see the sprite move much farther than before!

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:
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);
    }
}
Refresh Scratch-GUI in your browser and try it out!

Building and Releasing
To build Scratch 3, in your Scratch-GUI folder, run
npm run build
or
yarn build
Then, open the folder build inside Scratch-GUI, and open the index.html file in your browser. You should see your Scratch 3 mod running.
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!
You're telling me Scratch modding exists? But why?

Powered by DjangoBB