A Blockly field that allows for user-inputted pixel grids. The image value is stored as a 2D array of 1s and 0s, and supports any size. The user can paint over pixels with their mouse, or randomize the grid.
Note: this field does not support serialization to XML.
yarn add @blockly/field-bitmap
npm install @blockly/field-bitmap --save
This field accepts up to 3 parameters:
-
"value"
to specify an initial value. Must be a 2D rectangular array of 1s and 0s. If not provided, the default is an empty grid of the specified size. -
"width"
to specify an initial width, if there is no initial value. If not provided, the default is a width of 5. -
"height"
to specify an initial height, if there is no initial value. If not provided, the default is a height of 5.
import * as Blockly from 'blockly';
import {FieldBitmap} from 'blockly-field-bitmap';
Blockly.Blocks["test_field_bitmap"] = {
init: function () {
this.appendDummyInput()
.appendField("bitmap: ")
.appendField(new FieldBitmap(...), "FIELDNAME");
}
};
Example with default value:
import * as Blockly from 'blockly';
import '@blockly/field-bitmap';
Blockly.defineBlocksWithJsonArray([
{
type: 'test_field_bitmap',
message0: 'bitmap: %1',
args0: [
{
type: 'field_bitmap',
name: 'FIELDNAME',
value: [
[0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 0],
[0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
],
},
],
},
]);
Example with width and height:
import * as Blockly from 'blockly';
import '@blockly/field-bitmap';
Blockly.defineBlocksWithJsonArray([
{
type: 'test_field_bitmap',
message0: 'bitmap: %1',
args0: [
{
type: 'field_bitmap',
name: 'FIELDNAME',
width: 8,
height: 8,
},
],
},
]);
Apache 2.0