Scratch-like variable blocks

93 views
Skip to first unread message

Chris Bastin

unread,
Sep 10, 2024, 12:50:34 PM9/10/24
to Blockly
Hello,

I'm looking to build a blockly-phaser environment similar to Scratch 

I'm stuck on variables, I want full control over the variables toolbox category, but I cannot seem to find a way to create a block per variable similar to how Scratch does.

The block type `variables_get` has a dropdown, but I'd rather have multiple copies of that with a label and a pre-selected variable instead of the drop down. 

My attempt:
Block definition JSON:
type: 'variable_get_custom',
            message0: '%1',
            args0: [
                {
                    type: 'input_dummy',
                    name: 'VAR',
                }
            ],
            output: null

Javascript:
(block, generator) => {
            const varName = block.getFieldValue('VAR')
            return [`${varName}`, Order.NONE]
        }

Adding the blocks to the toolbox:
workspace.getAllVariableNames().forEach((x) => {
        variableItems.push({
            kind: 'block',
            type: 'variable_get_custom',
            fields: {
                "VAR": x
            }
        })
    })

Results in visually what I want:
Screenshot 2024-09-10 163901.png

But when I drag them out they go blank and the javascript output is "false"

Screenshot 2024-09-10 164114.png
function onGameStart () {
    if (false) {
}

}

I'm not sure if I'm approaching this correctly.

The built-in variable blocks auto-update when a variable is deleted so I don't even know if I can have custom blocks for variables that are also reactive to changes in the workspace's variables... Any advice on what I can do?

Also, extra question, does Scratch use multiple blockly workspaces? Like, one for each sprite and backdrop? I'm approaching this project with the idea I'll need a container that shares information between multiple workspaces that get hidden and shown

Thanks for taking the time to read my post

-Chris

Mark Friedman

unread,
Sep 10, 2024, 3:02:09 PM9/10/24
to blo...@googlegroups.com
Hi, Chris!  If you really want to build this all yourself, that's great, and we'll be glad to help you!  However, if you mostly want to be able to use such an environment, I'll point out that Gamefroot is a Blockly and Phaser based game building platform that might already meet your needs.

-Mark


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/86aeda4c-9ee7-4c62-af6e-c7f96f3b0548n%40googlegroups.com.

Chris Bastin

unread,
Sep 10, 2024, 4:08:21 PM9/10/24
to Blockly
Hi Mark, thanks for the quick response!

I am hoping to build a Scratch-like for an educational computing product. Part of the R&D is seeing what would it take to mimic Scratch's ecosystem of multiple scripts. And that includes trying to figure out how to build some of their blocks. So in this thread I got stuck on how I might make blocks for each variable like they do, as the built-in variable getter is a dropdown.

Gamefroot is a great example of what we want to do, so that gives me another platform to use as an example. They seem to use the standard Blockly variable getters, but with global, script and local variables which is interesting. Thanks for pointing me at them!

-Chris 

Aaron Dodson

unread,
Sep 10, 2024, 4:22:05 PM9/10/24
to Blockly
Hi,

I've actually been working on updating Scratch from a patched fork of years-old Blockly to being based on modern Blockly as a vanilla dependency and using the available APIs and extension points to achieve their functionality. Scratch does a few somewhat unusual things:

* Their code is largely split into three components: scratch-blocks (the Blockly wrapper), scratch-gui (UI management, including the Blockly/scratch-blocks portion) and scratch-vm (used to actually execute the program).
* They don't generate code at all; the VM listens to the events emitted by Blockly, maintains its own internal representation of the state of the workspace independently of Blockly's internal representation, and uses the VM's representation to interpret/execute the program
* They don't use multiple workspaces, but instead re-inject Blockly whenever you switch between sprites, and transform the VM's internal representation into Blockly XML and load that into the workspace

The variables themselves are just a dynamic category, much like how core Blockly works. You may find my repo informative; it's pre-alpha (generally works, but I plan to take a pass to clean things up since much of the code is pretty directly migrated from Scratch's old implementation). In particular, blocks/data.js has their block definitions, and data_category.js contains methods that assemble an XML representation of the toolbox with separate blocks-per-variable. There are a few other variable-related files, largely to support things like cloud variables and sprite-/globally-scoped variables along with integration with their UI for variable creation and the like. You'd probably want to use JSON vs XML, but the basic idea remains the same. 

Hopefully this helps some!

- Aaron

Reply all
Reply to author
Forward
0 new messages