Skip to content

extend matrix field to support editing sprites#11296

Merged
riknoll merged 3 commits into
masterfrom
dev/riknoll/color-matrix-field2
May 7, 2026
Merged

extend matrix field to support editing sprites#11296
riknoll merged 3 commits into
masterfrom
dev/riknoll/color-matrix-field2

Conversation

@riknoll
Copy link
Copy Markdown
Member

@riknoll riknoll commented May 7, 2026

for a long time we've been toying around with the idea of having an "arcade junior" for lower grades. one problem we've always run into, however, is our asset editors. they have a few features that make it harder for younger students to use them:

  1. they're complicated with lots of features
  2. they open in a modal, which breaks context while editing programs
  3. the previews they show are tiny so they don't show up well in printed materials/screenshots
  4. keyboard navigation is complicated

fast forward to last week, where someone sent me a link to the diversibit which got me thinking about how hard it would be to take the matrix field editor that we use in micro:bit and make a version of it for a grid of neopixels, and i realized this would be a great way to kill two birds with one stone!

the matrix field pretty much solves all the arcade junior issues:

  1. it's way simpler
  2. it's inline in the code
  3. the matrix is nice and big on the block
  4. it already supports keyboard navigation

with the obvious downside that you can't resize the sprite, but that's probably a good restriction for arcade junior anyhow.

this PR takes our LED matrix field and adds optional support for color, plus some parameters that let you customize the appearance to make it more amenable to pixel grids (removing the corner radius, spacing between cells, etc.). the way the color switching works is through a second field which gets added before the matrix field on the block; this field just pops up a menu of color options that change the "on" color of the matrix. all the other keyboard/mouse interactions are the same: clicking a "lit" cell turns it off and clicking an "unlit" cell turns it on with the selected color.

as for the palette of colors, you can either take the project palette (for arcade) or specify the colors using a comment attribute (for diversibit/other neopixel grids). i briefly considered just using the project palette for the other case too, but realized that it might end up conflicting with the palette used by the display shield.

here's me messing around with keyboard controls:

inline-sprites

i'm probably going to have a follow up pr that adds support for tagged template literals with the field (right now it's always strings). i'm still trying to figure out how exactly to have the decompilation for that coexist with the regular image editor

@riknoll riknoll requested a review from a team May 7, 2026 21:47
Comment thread pxtblocks/compiler/compiler.ts
Comment thread pxtblocks/fields/field_ledmatrix.ts
@riknoll riknoll enabled auto-merge (squash) May 7, 2026 22:37
@riknoll riknoll merged commit 043c06e into master May 7, 2026
20 checks passed
@riknoll riknoll deleted the dev/riknoll/color-matrix-field2 branch May 7, 2026 22:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants