Microsoft MakeCode

[Announcement] New Sprite and Animation editor in Arcade beta!

Hey folks,

We have just updated the MakeCode Arcade beta with a brand new sprite and animation editor! Check it out at the MakeCode Arcade Beta. Currently the new editor is only available in blocks, but we plan to bring it into the Monaco editor soon.


New sprite editor features:

  1. Zoom: Use the mouse wheel or the buttons in the bottom right of the editor to zoom; large images are now much easier to edit!
  2. Pan Tool: Use the pan tool (the hand icon) to move the canvas around inside of the editor.
  3. Canvas Resizing: Now you can resize the canvas to any size instead of cycling through presets. You can even lock the aspect ratio!
  4. Bigger and Responsive: The new sprite editor takes over the entire workspace and resizes to fit your screen.
  5. Foreground and Background: You can set a foreground color and a background color. Right click to use the background color or click the color preview above the palette to swap.
  6. New Keyboard Shortcuts: We’ve aligned our keyboard shortcuts with those used by other image editors. See the table at the bottom of this post for a complete list.
  7. New Design: We’ve refreshed the overall look and feel with new icons, layout, and theme.

In addition to editing Sprites, the new editor can also be used for creating animations. To get started, add the “Animation” extension to your project and use the “animate frames” block.


Animation editor features:

  1. Frame Timeline: View the frames of your animation on the right and drag the active frame to change its position in the timeline. You can also delete, duplicate, and create new frames here.
  2. Animation Preview: Preview your animation with the animating image in the top-right of the editor or by hovering over the block in your program.
  3. Show Previous Frame: Click the “Show previous frame” button in the bottom bar to show the previous frame underneath the current frame.

Try it out and let us know what you think! As always, file any bugs or feature requests over in the Arcade GitHub Repo.

Tool shortcuts:

Tool Shortcut
Eraser e
Pan h
Paint b OR p
Fill g
Marquee m
Rectangle u

Other actions:

Action Shortcut
Zoom out - OR _
Zoom in + OR =
Swap foreground/background x

I’ve been waiting for this. Looks awesome!

Wow. This is awesome! Talk about a huge QoL improvement…!

This looks like an improvement for editing 160x120 background images.

Is the removal of x,y position intentional? I often glance at that to ensure I’m at the right pixel position for doing things like drawing in the “middle”.

I’m planning on bringing the x/y position back; I just need to figure out how to make the layout work in mobile as well. I have a whole slate of other features I want to see too (sprite rotation, flipping, color replace, scaling), but no ETA right now!

1 Like

I’m finding that when I edit the animation block, make an animation, click out of it and reopen it half of my animations are sliced in half. Is this a bug? Can someone can confirm? Have tried using edge and chrome. Also, in the set my sprite to (vx) I couldn’t input a negative into the block via beta, but could do so in non-beta. Ended up going to java, putting the value in and converting back. Anyway, hope the feedback helps!

Definitely a bug! I’ll file it in our issue tracker. We are aware of the negative velocity bug; a fix should be coming soon!

Awesome! Thanks!

I filed a bug for this too – it seems to happen if you have used the rectangular selection tool and leave some pixels selected when you close the editor. Whatever is inside the selection marquee is deleted. @richard

Strange things are afoot for the transparent background.

I’ve got the field goal sprite in beta beta sprite editor and if I resize the main Chrome window on Windows it also resizes the sprite editor and that shows the usual grey chequered pattern. If I move the mouse pointer over the sprite editor the pattern goes “blurry”, i.e. the sampling/interpolation algorithm has changed! What’s the intention here? I like the crisp chequers.

@kjw what browser are you using? There is a bug currently in Chrome on MacOS that causes blurriness; it’s fixed in Chrome Canary so it should hopefully go away soon.

You might also see blurriness in Internet Explorer or Edge; I would suggest switching to the new Edge beta if possible.

Chrome on Windows is the one I stick to for MakeCode.

Yep, looks like the blurriness is happening on Windows as well (we can reproduce it). Definitely looks to be a bug… Maybe this one: