Microsoft MakeCode

How to make an extension?

I have a Typescript function.

Should I put that function in a new explorer tab, then at the top write %//block?

What do I write there?


https://makecode.com/playground

Take at look at this documentation

1 Like

Yup, the first thing is //% block to convert the function to create a block. There’s a decent amount of docs here on the different attributes, here on creating an extension (including using github), and you can test out the block authoring at https://makecode.com/playground - there are a decent number of different different examples in the dropdown on the left side of the screen, and you can ask us for more info on how specific things are defined. (Typically, the easiest way to make a block to start is to find one that looks like what you want, and copy over the attributes from them).

2 Likes

Something small, just trying it out. (edit code to see extension)

how do you do this

I’m asking myself that as well…

Oh, I used to ask myself that as well. I learned js and typescript a long time ago, even though I’m still a kid. Because I learned it long ago, I forgot most of it. I recommend taking a course on js, KhanAcademy has one.

I can’t find it. It’s not on khan academy for me at least

Click new course, and coding (it is green)

1 Like

How can I have a sprite parameter?

namespace myCategory {
    //% blockId="do_something"
    //% block="do something with $sprite"
    //% sprite.shadow=variables_get
    //% sprite.defl=mySprite
    export function doSomethingWithASprite(sprite: Sprite) {

    }
}

Here is what each of those annotations above the function mean:

  1. blockId=do_something: Every block needs to have a unique ID. You don’t have to include this (we’ll make one for you) but it’s good practice to set it yourself and include your extension name somewhere in it. The user will never see it! This is just for MakeCode to use internally
  2. block="do something with $sprite": This sets the text of the block. Any word that starts with $ will become a parameter in the MakeCode editor. Make sure the name you use here matches the name you declare in your function. In this case, it’s “sprite”
  3. sprite.shadow=variables_get: This tells MakeCode to make the default block for the “sprite” parameter a variable block. “variables_get” is the blockId of the variable getter block. You can put any blockId you want in here but it must be for a function that returns a Sprite!
  4. sprite.defl=mySprite: This sets the default value of the “sprite” parameter. In the case of a variable, that means it’s setting the name the variable will have in the toolbox
3 Likes

Thanks, this helps a lot.

Also, I know how to make a slider dropdown, but how would I make this? (graph)

Here is the definition for that block:

namespace myCategory {
    //% blockId=my_extension_set_position
    //% block="set position to x $x y $y"
    //% x.shadow="positionPicker"
    //% y.shadow="positionPicker"
    export function setPosition(x: number, y: number): void {

    }
}

Note that the parameters must be named “x” and “y” for the position picker to work correctly. Also, this will work for the Arcade screen size. If you want to do custom sizes, it is much more complicated. If you just want to use the arcade screen size, ignore the rest of this message!

To customize the dimensions, you need to make something we call a shadow block. These are blocks that are just used inside of other blocks and don’t show up in the toolbox by themselves. Here’s an example of how that might look:

namespace myCategory {
    //% blockId=my_extension_custom_position_picker
    //% block="$index"
    //% blockHidden=true
    //% shim=TD_ID
    //% index.fieldEditor="position"
    //% index.fieldOptions.decompileLiterals="true"
    //% index.fieldOptions.screenWidth=500
    //% index.fieldOptions.screenHeight=1000
    export function __positionPicker(index: number) {
        return index;
    }


    //% blockId=my_extension_set_position
    //% block="set position to x $x y $y"
    //% x.shadow="my_extension_custom_position_picker"
    //% y.shadow="my_extension_custom_position_picker"
    export function setPosition(x: number, y: number): void {

    }
}

And an explanation of the new attributes:

  1. blockHidden=1: Makes sure the block does not show up in the toolbox
  2. shim=TD_ID: Makes sure this function doesn’t show up in the TypeScript. It is VERY IMPORTANT that you only use this on functions that just return their inputs. In this case, the function just returns index without changing its values so it’s all good
  3. index.fieldEditor="position": makes it so that the index uses the position picker
  4. index.fieldOptions.decompileLiterals="true": This one is really tough to explain; just make sure you include it here. You don’t usually need it on blocks but you do here.
  5. index.fieldOptions.screenWidth=500: This configures the width of the screen. Same for screenHeight on the next line.

The other things you can configure for this field are:
index.fieldOptions.min=0 and index.fieldOptions.max=100, which will set the min and max numbers the user can type into the field.

Also, the reason that the shadow block starts with underscores is to prevent it from showing up in the JavaScript autocomplete. We filter out all functions that start with “_”

1 Like

How would I make a music (piano) menu dropdown?

Please, I need help with this!

Add a parameter of type number and set the shadow to device_note