Microsoft MakeCode

Dragging images into the background image editor

What’s the expected behaviour if an image is dragged into the background editor? I’ve tried dragging png files into the editor (and the gallery section) and behaviour seems to vary in non-useful ways. If I drag a 160x120 it ignores it, if I drag a 270x390 then it all goes pear-shaped and I get a non-responsive editor with mouse pointer left as a cross/crosshair.

Are you dragging into the sprite editor? This is how I’ve been using pre-made images for backgrounds and sprites:


I was trying to drag them into the sprite editor. I thought it would just ignore them if it couldn’t handle them. I just made a 160x120 and that causes the “crosshair lockup”, here it is:


I’ll give your technique a go, thanks.

Actually, it would be nice for those not familiar with JavaScript to have a simple drag interface for png files for sprites and backgrounds. Is that possible? It would need some sort of palette quanitzation.

This is intentionally not supported.

First, these images are large (10k each) so very few of them are going to fit in flash memory. Second, it takes away the fun of creating pixel art yourself. Most importantly, it makes it much easier to post offensive or copyright-violating content. Of course these are still possible without direct support but much less likely done by the target audience.

For sprites, I was thinking about the external editors that are available, John Park has listed many in his guides. Some have superior features particularly in the animation space.

For background images I find the current editor is a bit small for working on 160x120 images. Without the ability to make the sub-window bigger or a zoom I’d prefer to craft these externally.

Also if you are teaching and want to provide a resource pack I don’t think this works? The only option here is to give a canned project but that isn’t as useful for longer phased work where a later phase introduces more graphics and the students build on their own existing code.

You can publish your own extensions on github and have students import them, see (and note that github support in beta beta has been greatly improved). This is also how you would distribute images. You can always use the external asset tool to import.

If the extension is not approved, you can import it directly by pasting the github URL in the Add Extension dialog.