How to generate new in-game sprites?

[ghost]

I need your help: (I create a game on school competition for the fight against drugs and drug addiction because I wanted to take advantage of this project did not, and now I have a problem because they are different characters in Mario and I would like to replace the "Goomba" on a pack of cigarettes and "Kopp" on a bottle of vodka, then the other characters to something else but I do not know how to do it, the person that August will want in advance thank you very much :)

[JoshuaKGoldberg]

Hi there!

You can take raw images and parse them into the equivalent sprites using the parser located in /parser/parser.html. This takes in regular images (.png, .jpg, .gif, etc) and gives you the "p[...]..." sprite used in gameplay. For example, if you have a 16x16 image of a pack of cigarettes, put it in there, get the string result, and put it in the library instead of the current Goomba's sprites.

[JoshuaKGoldberg]

Yup, as of a couple months ago the parser here is no longer working. You'll have to use the new version of the image parser from https://github.com/Diogenesthecynic/FullScreenMario-JSON/.

There's no HTML page for it yet, so you'll have to use it through an F12 console. Upload your image(s) to whatever localhost/site you're running your FSM game from, go to index.html in a browser, and run the following command:

FSM.PixelRender.encodeURI("{Image URL}", function (results) { console.log(results); });

Put your Image URL, such as "http://localhost/FullScreenMario/Images/image.gif" instead of {Image URL}. It should be on the same domain as your game, not imgur.com.

[JoshuaKGoldberg]

As a side note, better documentation is available here: https://github.com/Diogenesthecynic/FullScreenMario-JSON/tree/master/src/PixelRendr

Edit: Now moved to https://github.com/FullScreenShenanigans/FullScreenMario/tree/master/GameStartr/PixelRendr

[hellothomasjohnson]

Thanks a lot for the quick and helpful reply. Much appreciated.

[secretgspot]

instructions not clear, what is the pixel size and how to work it with size set in objects.js? I try 10x10 and it's blurry but somewhat clean on turtle char, coin is somewhat visible when used with icon converted from 9x9. Any details on how to change graphics?

[JoshuaKGoldberg]

@secretgspot Loving the name. Have you read https://github.com/FullScreenShenanigans/FullScreenMario/tree/master/GameStartr/PixelRendr ? If not, please do.

If you have and it still doesn't make sense, can you elaborate (preferably with pictures)? I'm in the process of writing more detailed documentation on this stuff, so it would be nice to see in more detail what's confusing / undocumented.

[secretgspot]

@JoshuaKGoldberg figured it out. would be nice if was possible to work with high resolution pixels such as 64x64 vs 16x16 that I see as common

[JoshuaKGoldberg]

What was the problem you were having?

In theory, that should be doable by changing scale to 1.

[JoshuaKGoldberg]

Necroing an old topic: https://github.com/FullScreenShenanigans/ImageReadr is where the old code has been moved to.

[vlzhr]

Hello, Joshua! Thanks for your code!

Could you please give the new links? All of the previous ones do not work... I need to convert my images to raw-data and add new characters to the game. Waiting for the answer.

[JoshuaKGoldberg]

Hey @vlzhr, sorry for the delay!

Which links are you looking for? https://github.com/JoshuaKGoldberg/Old-Deleted-FullScreenMario/commits/master shows the repository's state at different points in time; the last few commits are me deleting everything to mark that this is no longer supported.

[vlzhr]

@JoshuaKGoldberg Thank you very much for the answer!

My problem is that I'm using https://github.com/FullScreenShenanigans/ImageReadr to generate raw-data and insert new sprites in the game but it doesn't work correctly - the sprite looks different.

I also tried to use the links above but fast all of them are banned. There is a link that looks exactly like everything that I would like to have but it isn't supported...

As a side note, better documentation is available here: https://github.com/Diogenesthecynic/FullScreenMario-JSON/tree/master/src/PixelRendr

I would like to know if there is a still-working documentation about how to create "p[...]..." sprites or just which parser could I use for it.

[JoshuaKGoldberg]

http://github.com/fullscreenshenanigans/spritemakr-neue is meant to be able to make sprites, but it hasn't been updated in a while and might be hard to build. You could try that?

We should also note that the "p[...]..." sprites are just a list of colors in order: they don't contain size information. Your source images that you convert to them must be the right size. Meaning: if your in-game sprite is, say height=12 and width=8 and the game has scale=2 (meaning each source image pixels becomes a 2x2 pixel on the screen), your source image would need to be height=6 and width=4. I think. Or it might be the other way around; I haven't touched this stuff in a while 😉.

[vlzhr]

Thanks, your comment about needed sizes is exactly what I had to change...

http://github.com/fullscreenshenanigans/spritemakr-neue is also great, the only thing that didn't work was changing palettes

The last thing I would like to ask is where can I find the expected size of sprite? I've found that the main hero's image is 16x16 just testing each size))

[JoshuaKGoldberg]

find the expected size

Yeah that's a bit tricky. Now that you've found the main hero's image size of 16x16, you can find the actual size of the object in gameplay with (something like) player.width and player.height, and using that determine the ratio.

[vlzhr]

Now it's clear! Thanks again for your answers and code, this project is legendary