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]
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!!