How to make an extension?

Arcade Help
13

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