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)
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 !
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.
I love this! One suggestion, have an option for using any 16 colors - the new color extension lets users use their own set of 16 colors so choosing 16 based on the image could make it look even better!!
