For a little project i want to get into.
3 Likes
@richard This is actually a good question please enlighten us
2 Likes
You mean projects like these?
One of two ways:
- Press that camera button to create a PNG of what’s currently onscreen.
- Save it as an image, which is also a PNG.
You can import files to import the PNG/your game.
no i think he ment HOW are they, like questioning how they are made into png files
2 Likes
no, no, no, not like that.
i’m talking about HOW they’re put into those PNG files. where is all this data stored? definitely not in the image. i checked.
4 Likes
No, we want to know HOW it WORKS. (Or aat least I do.)
2 Likes
You can attach files to images:
This is usually for metadata like when the picture was taken, what camera or device it was on, location, etc, but you can put whatever you want in there.
4 Likes
and how could i export those files?
The png files do contain more information as the project size increases (with a noisy rectangle at the bottom increasing in height). I always thought it was just a low opacity overlay of noise that is somehow decoded back into makecode. When it runs out of space it just continues downwards creating that noisy rectangle and increases image height
3 Likes
Huh, didn’t know you could do that.
Oh yeah I forgot about the noise. You could probably find it in some editing software, the filter you’re talking about. I wonder if it would look like those images of zoomed in physical media, like the images of CDs. Probably less interesting though. Less colorful :(
2 Likes
Also, BIG projects have some… weird stuff in the image.
This is an example from goldtopaz’s Hyper the Dragon, and i think there actually IS stuff stored in the image itself due to this. Just an educated guess tho.
3 Likes
My guess is that there’s metadata inside the PNG images (which is why there’s random fuzz that increases in size as the project increases. that’s the metadata. All the data saves into the PNG, and MakeCode is the only software that explicitly reads the data and puts it into blocks and JavaScript. Which allows this cool spectacle! Just my guess, though.)
3 Likes
good question! we don’t save the project in the PNG metadata, instead it is saved in the pixels themselves. the PNGs we save are stored in RGBA format; that means that every pixel contains 4 bytes of data: the red channel, the green channel, the blue channel, and the alpha (opacity) channel. each byte is made up of 8 bits (1s or 0s) and we essentially overwrite the bottom halves of each of these bytes (the lowest 4 bits) with bytes from the project.
so, let’s take a pixel with color #34EBE8 as an example. for reference, that color looks like this:
the channel values for this pixel would be:
RED: 52
GREEN: 235
BLUE: 232
ALPHA: 255 (opaque)
and if we convert that to binary:
RED: 01010010
GREEN: 11101011
BLUE: 11101000
ALPHA: 00000000
now let’s say we want to encode a byte from the project inside this pixel. let’s say the byte has value 240, which in binary is 11110000. to do this, first we’re going to split the byte into two 4 bit chunks (1111 and 0000) and we’re going to insert these chunks into the lower 4 bits of the RED and GREEN channels. now our bytes look like this:
RED: 0101 [1111]
GREEN: 1110 [0000]
BLUE: 11101000
ALPHA: 00000000
if we convert those new values back into a hex value, we get #5FE0E8 which looks like this:
almost the same color! just slightly shifted. the average person is unlikely to notice the change, but if you stare really closely at one of the PNGs, you can see that all of the pixels are slightly different colors.
now we can repeat this process for every byte in the project we are storing. in this example, we only mess with the RED and GREEN channels, but in actuality we also change the BLUE channel as well. we skip over the ALPHA channel because we don’t want the PNG to be made transparent. so, that means every PNG pixel can contain 1.5 bytes of data from the project.
but what about those PNGs that have a bunch of random pixels at the bottom? well, that happens when we don’t have enough pixels in the PNG to store every byte of the project (i.e. the project is really, really big). because we don’t want to lose data from the project, we just add extra pixels to the bottom of the PNG that contain all of the extra data.
7 Likes
Does this mean that we could theoretically make a project in a image editor and then import it to makecode?
1 Like
wow, that’s interesting!
1 Like
yup! pretty tough to do that by hand though 
2 Likes
i was curious what the full range of potential colors would look like for that sample color i gave so i wrote a quick script to generate it:
that image contains every possible color that could be generated by messing the with the lower 4 bits of RGB channels of #34EBE8. even the maximally different options (upper left and lower right) aren’t that far away from each other!
5 Likes
Honestly, when I first looked at it, I only saw 4 colors, then you said upper left, so I looked again and saw the sections lol.
1 Like
well, how is it turned into a project? im sure you have to convert that binary code to something.
1 Like