How to Develop Your Own Block for Scratch 3.0

Prepare development environment and develop your own block on Scratch 3.0 with Node.js

Hiro OSAKI
Jan 8 · 6 min read
We can extend Scratch function as we like after this process.

[UPDATE] 08/18/2019: updated extension-manager.js and published my repository to https://github.com/onelittlenightmusic/scratch-gui
[UPDATE] 09/05/2019: I summarized block types you can choose in this article.
[UPDATE] 09/11/2019: The Python Banyan creator Alan Yorinks kindly taught some development environment conditional error using npm . He wrote blog about it. I added my environments for information.

Jan 2nd 2019, this finally came. Scratch 3.0 was released.

Scratch

So exciting, isn’t it?

The user interface is more sophisticated than before. And now we can touch it on tablet devices such as iPad.

In this article, I’ll describe about important points of Scratch 3.0 and how to add your own blocks into it.

Important points of 3.0 (for users)

  • It works without Flash 👍
    Then iPad, iPhone and any other smart devices are OK.
  • Tutorials is much more.
    You can begin without any training.
  • Design becomes clearer

Important points of 3.0 (for developers)

  • It is developed on React.JS framework. Each view sections are separated as components. This architecture is also sophisticated as design.
  • Compatible with ES2015(const etc.). But no support of ES2017(async). Built with webpack.
  • You can develop your own blocks as extensions. This is the same as Scratch 2 but its specification seems slightly changed.
  • You can import npm packages onto your development environment.

Create your own blocks

  • Method #1. On a trial website
  • Method #2. On your development environment

Method #1. On a TRIAL website

Pros and cons

  • Can import only one JavaScript file
  • This environment resets after every browser reload
  • Impossible to import NPM packages

Procedure

A trial website in this following link enables us to load new JavaScript file as extension and to test it.

Trial website

https://sheeptester.github.io/scratch-gui/

Result

A test module is loaded and works well. This module only generates new log line “hello”. In the website, “hello” log

Method #2. On your development environment

Pros and Cons

  • You can import NPM packages and utilize them to create your own blocks.
  • Sharing and publishing your own blocks is not supported yet (at this time 2019.1).

Procedure

(Japanese Scratch Wiki)

1) Prepare your development environment

My development environment patterns which were successful —
Pattern 1
{OS: Window 10,
npm: v6.4.1,
node: v11.2.0,
using WSL (ubuntu 18.04)}

Pattern 2
{OS: MacOS 10.14.6,
npm: v6.9.0,
node: v12.1.0}

First, please download clones of 2 git repositories (scratch-vm, scratch-gui).

Because both projects need to be modified and compiled together, we link both projects with npm command so that scratch-gui becomes a parent project and scratch-vm gets linked to the parent.

Check that compiling is done and Scratch service starts.

After compiling, access to the following address with your browser.

http://localhost:8601

Done!

2) Implement your block

Add (★) and update (★★) some files.

Then, we add extensions in this project.

In File 1 src/extensions/scratch3_newblocks/index.js , we add a block interface and process. Details about how to define blocks is in the next article.

File 2src/extension-support/extension-manager.js is for a extension menu implementation. In this file, add scratch3_newblocks defined in previous File 1.

3) Implement GUI

In this Library, we add a block implementation 2). Add some lines at the last of src/lib/libraries/extensions/index.jsx file in the same directoryscratch-gui.

As a menu item background image, we add a new image file with 600 x 372 size named as newblocks.png in the same directory.

As a menu icon, we add one more picture with 180 x 180 size named as newblocks-small.png.

It is OK when you have the following directory structure.

We are around the last corner. Start GUI. When compiling is successful, our extensions is included into Scratch GUI.

4) Customize

Then you will see selection in your block like this.

Result

After that, a NewBlocks icon will be added on icon list and you can see a block log(hello) listed in “New Blocks” section.

Now we are ready to use. Create new project. And open debug window of your browser (just press F12 button if it’s chrome)

When you add this block into your scratch project and click “Start” green flag button, you will see a log in output like this.

This is a output from your newblocks. The new block works.

“hello” is just a default value. When you change the string in a box on the right side of “log”, the output will be changed.

Summary

We created a simple block on Scratch 3.0.

After we complete publishing process like official said, we can publish as github pages like this.

Publish on Github

I went farther. I set up a GraphQL server and made use of apollo-link, and finally I created a new block fetching weather information in any location.

Scratch cat are teaching me a weather at New york. I’ll post this how-to later.

Troubleshooting — a error case

shared-dispatch.js:137 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': DOMException object could not be cloned.at http://localhost:8601/extension-worker.js:993:20
...

Remaining problems

Appendix

Hiro OSAKI

Written by

@Hiroyuki_OSAKI Sr. research engineer (Hitachi America), certified engineer (CKAD/Kubernetes), The opinions expressed here are my own, not those of Company.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade