Microsoft MakeCode

I've made an image file to Arcade sprite converter. Feedback and code improvements wanted!

Hi! I’ve made a utility that converts images files to MakeCode Arcade sprites.

It can scale images, and you can even import wallpaper images and have them converted. It’s so much fun!

https://kristianpedersen.github.io/Convert-Image-to-MakeCode-Arcade-Sprite/

I need some fresh eyes to look at it. I would be happy to receive pull requests and code critique. I’m eager to learn more proper ways of doing things.

Improvements:

  • Drag and drop
  • Checkbox for making white or black transparent
  • Bordered rectangle around preview image, showing how big it is relative to MakeCode Arcade
  • Testing in other browsers than Chrome
  • Black and white mode, and other cool color effects
  • The copy button used to change text when textarea contents were copied, but now it doesn’t
  • … ?

I found two similar tools when making this post, both of which have features I’m lacking, but they don’t have my sizing options.

I’m a new user, and new users are only allowed to post two links, so you’ll have to google these:

  • makecode-pixelart-maker (Drag and drop)
  • pxt-arcade-asset-tool/ (Has option for transparency, but only for white)
9 Likes

works for me, but the improvements will be great!

This is really great - I’ve been looking for something like this. Seems to work great for the images I tested.

Thanks a ton. This is epic. I have been looking for something like this for a long time.

Just confirming, I enter the copied code into java script, right?

Yep! Just paste it into Javascript :slight_smile:

epik. thanks

1 Like

I enter it into the editor drawing thing in the editor. It still works in JavaScript as well I guess

How do you enter it into the editor thingy?

Just get into the editor and just do crtl v. with the correct width and height

cool. thanks

1 Like

sorry for the late response though

its fine

1 Like

I had difficulty at first creating a sprite and a background (scene) from a photo because of my weak text coding knowledge. I made the mistake of creating a Start> set my sprite to…blank . and then tried to import the digitized image from Mr. Pedersen’s utility but got error messages due to faulty text conflicts in JavaScript.
So, I now start with a blank page in JS and copy/paste the utility code array directly onto blank text workspace. Since this creates a sprite I can then add “background scene” and drag the sprite image onto that bubble and now have a custom background. If the sprite size in the utility was 160x120 then it will nearly cover the TFT screen as a background image. Now we can take a cell phone photo of the building front of the coffee shop where we do coding lessons, convert that photo to a sprite first and then drag the sprite image into the scene block for game background and begin story-telling about the place and the lessons which we have learned in coding / electronics today. We can also use Meowbit/edgeconnector to learn electronics I/O on a breadboard. Thanks @kristianpedersen !

Hi, Frank! Thanks for the feedback!

Creating a sprite first sounds intuitive, but as you discovered, that’s not how the code works.

Also, it’s really fun to have large images, and animate which part is showing.
Then you could have a large picture of your building that goes off screen, and animate the X and Y coordinates of the sprite, like this: https://makecode.com/_XiRh6PeWvUDH

Changelog 20 july 2021:

  • Added text to website, explaining manual sprite creation is not needed
  • Each new image now gets a unique variable name, just to prevent naming conflicts. Used to just be “mySprite”, is now "mySprite[unique string from today’s date]

Hi there! Thats awesome, but it should support transparent color instead of making black.
Also would be perfect to have de-converter → from arcade code to img file.