How to make a Snap! mod

So I download the Snap! source but I don't know what to edit to add new blocks and categories.

in the block menu press the "+" icon to make a new block

I want to learn how to add them through the Snap! source code though.

what do you mean?

I'm sorry I cannot help you there. bh can help you though

I think @jens would be the person to talk to instead of bh

There are many files involved like Blocks.JS, Objects.JS etc. depending on what you want to develop. The fastest way is making custom blocks and creating libraries or using BloP, a Snap! extension for creating mods. I recommend reading the files in the src directory.


So, first of all I'm going to pretend to be Jens and ask, as he does whenever this comes up, why are you in such a hurry to extend Snap!? I bet you haven't fully explored all the things you can already do with it. For example:

This does the same thing as the built-in map block. In fact, until quite recently we didn't include map as a primitive, so that people learning Snap! would learn to write it. But the primitive version is a lot faster, and that matters as we've started dealing with lists of pixels in a costume, large data sets from the net, etc. I could actually have called this map also, since it's okay to have a custom block with the same appearance as a primitive, but this way you can't get confused about the fact that the call to map2 inside the script is a recursive call, not a call to the primitive. It's important that the input function is declared to be of type Reporter.

Inside this small example are the ideas of recursion, of function as data, of traversing a list by separating it into its first item and all the rest of the list, using a recursive call for the latter. And the Snap! notations for call and the gray ring for function inputs. Do you understand all that? Could you, for example, write keep and combine, the other higher order functions on lists? If so, let me know and we can talk about continuations, or hyperblocks, or nesting sprites.

Okay, now that we've done that, we can talk about extending Snap!. What is it you want to do? (I understand, what you really want is to learn how Snap! works inside, which is a virtuous quest, especially after you understand how it works on its outside.) If you want to do something simple, your best bet is not to edit the source, but to use the JavaScript function block. To see how to do that, load the Strings library and look inside its block definitions. Or, if you want to learn a lot of details at once, load the Getters and Setters library and look inside those blocks. That will teach you about many of the data structures within Snap!.

If you really want to read and understand the Snap! source code, you have to start by losing the idea, if (like me) you have it, of Snap! as a programming language interpreter with a user interface wrapped around it. I wish that were true, because it's the style of language implementation I grew up in. But in fact Snap! is more like a user interface with an interpreter snuck inside it, in bits and pieces. So you have to start by understanding that user interface, which is in morphic.js.

Luckily, that file starts with a very long comment that you should read a few times before you tackle the actual code. A lot of the code is about the shapes and colors of morphs, which isn't so very important for understanding the rest of Snap!, but some is about how complicated morphs are built out of simpler morphs. That's straightforward if you've done object oriented programming. The other thing that will turn out to be crucial is that a morph can have an action associated with it. This is how buttons respond to clicks, and so on, and it's used quite a lot in the rest of Snap! without particularly calling attention to it.

Once you've wrapped your head around all that, you can start looking at how blocks work. One thing you have to understand is that the palette, the block listing at the left, is recreated block by block every time you switch from one category to another, or from one sprite to another. So where you're expecting just a data structure of blocks, you'll see actual code generating the blocks one at a time. And there's also the data structure. Setting all that up is mostly in objects.js. Actually running the blocks happens in threads.js.

That should keep you busy for a while.

I get what @spaceflyer234 means! @spaceflyer234 wants to make a block with the proper blocks not listed at the end of the block list. Is that what you mean @spaceflyer234?

Oh, I forgot to say...

The big central difference between Snap! and Scratch (in my opinion) is that we have tried hard to make it so that everything you need to do can be done in Snap! itself. For example, if you read in Appendix A of the Reference Manual about the Colors and Crayons library, and then read the actual code, you'll see that except for the raw set color to r: g: b: and RGB color blocks, the whole library is written in Snap!, not in Javascript.

Mostly, when you see JSfunction used in libraries, it's in one-line interfaces to some JS interface to a browser feature. There's no need to build control structures in JS, because we can build them all in Snap!. (We're very proud of being able to write for and reporter-if in Snap! itself.)

So the whole Scratch modder culture of adding features is mostly unnecessary, and when it is necessary, almost entirely doable without editing the source files, just using JSfunction.


6 posts were merged into an existing topic: Blocks I love in Snap!