Image to Sprite Converter! ( With built in script creator!)

Cralant - Custom level - from Windows
PlayEdit11 players liked this.Log in to like this level.

The level is an example as for what the website can achieve.

I made a website that allows users to upload images and make sprites for principia out of them. The website will convert the image into an array which can be used in principia to make an image. The website will also write the script to use with the array. All you have to do is copy the script and paste it into a lua script object. You are able to view images that have been uploaded in the last hour to make it easier in case you need to access the script again.
If you look at the credits section you will find a link that explains how you use the website and the script in principia.
Some limitations are that you are only allowed to upload a png, jpg, jpeg or gif file. All images must be under 30kb.


Credits to demon666 for the original code. Updates will happen periodically.

Views: 1825 Downloads: 291 Unique objects: 1 Total objects: 1


Discuss this level

Log in to comment on this level.
  • RasmusOlle: @golden: nope
  • Golden: @RasmusOlle: oh you reached char limit
  • RasmusOlle: The photo did not show up in principia when i played the level
  • pajlada: @RasmusOlle: what do you mean "did not work", I can't do anything with that information.
    What happened?
    Did you get an error message?
    Did principia crash?
    Did your phone crash?
    Did you copy-paste properly?
    Can you copy-paste the code it generated to and paste it here?
  • RasmusOlle: @pajlada: sigh, i did it on the computer, imported a photo and generated the code, then when i imported it to principia so did it not work
  • pajlada: @RasmusOlle: use a real browser (google chrome or firefox)
  • RasmusOlle: @pajlada: the image to lua converter in lua tools, it didnt work
  • pajlada: @RasmusOlle: That doesn't help me at all, what image to lua-script are you talking about?
  • RasmusOlle: @pajlada: the image to lua didnt work at all!
  • Cralant: @zardOz: Probably the best option it should give (26^2*4)+52 combinations. 2756 should be enough for any purposes, at least in principia.
  • zardOz2: Another possibility is since most pixel images would probably have fewer than 52 colors anyway just start the list with the 52 single characters and then switch to aa... you should ditch the numbers though if you are looking to maximize
  • Cralant: @Demon666: @zardOz: Well I suppose it depends on how you design the script, with all the possible rgba combinations you have 4294967296 combinations. Although a max amount of variables for colour would be limited to the amount of texels you have, so you would need 1024^2 possible variables for colours if you do not reduce the colour depth of the image. To limit the script to 520 unique colours can be considered overkill, I suppose it depends on the usage. 100 should be enough for most usage. I suppose if anyone really needs more then they are probably familiar enough with the script to change it for the purpose. If we use both cases for the letters then we could compress data even further by analyzing for common strings of data and replacing them with variables representing those strings.
    I suppose it just really depends on how much you need the data compressed, and judging by the future size of the texel sheet, we are going to need amazing compression to use a high res image.
  • zardOz2: You might then consider a one letter+one number system... any color over 10 will add a character and over 100 would add 2, you could get 520 colors that way
  • zardOz2: @Demon666: well you can use the capitals for 52 colors... I geuss the converter would need to select the nearest match oh the 52... oh well, good luck anyway
  • Demon666: @zardOz: the problem is that you can run out of letters if you have images with alot of different colors. i guess whats why pajlada made it that way.
  • Demon666: @zardOz: thats what my origonal idea was to do. i was gonna use all the alphabetical ascii characters as variables for the arrays.
  • zardOz2: Couldnt you make the list of colors a,b,c... instead of c1,c2,c3... One fewer character per entry
  • Cralant: @Demon666: Yeah I am in the middle of my exam season so projects are few and far between right now. I have been working on different compression techniques for the byte arrays and I've come up with some interesting methods. You can see some of my process, I have tried to comment the code so its easier to understand.
  • Demon666: I would try to mod pajlada's code but I think he's using jquery within the Javascript code and I don't know jquery at all lol.
  • Demon666: the widgets are a good idea. I haven't had much time to build codes with my professors going mad with quizzes lol.
  • Cralant: @Demon666: If you could get that working that would be great. I was thinking of making a new website with a bunch of different scripts and widgets. Where users could get a script for what they need done by selecting the options they want. Also adding a new version of the img to array script that re-sizes images and possibly add the feature you just suggested.
  • Demon666: it's similar to what my art program does when I used to limit the number of colors in your flags image.
  • Demon666: nice! we could also merge similar colors together as well. the colors that differ by a very small amount. like if the colors are more than more then 95% similar then you take the average between them and use it for both of them. that would be done on the Javascript side tho. this should only be done from high quality images tho.
  • pajlada: @Cralant: Yep, that's almost exactly the way I did it too.
  • Cralant: @Demon666: @pajlada: I made a set_sprite_texel code that works with the future implemented 2d array. From my tests it seems to work ok, I haven't had an error so far. Let me know if you have issues or you can think of any optimizations. I made a quick image to test the script.

    if this:first_run() then
    s = 1;x = 0;y = 1;k = 1
    imgWidth, imgHeight = 16, 16
    image = {
    while k <= imgWidth*imgHeight do
    arr = image[s]
    num = arr[2]
    col = arr[1]
    for i = 1, num do
    x = x+1
    if x > imgWidth then
    y = y+1
    x = 1
    k = k + num
    s = s + 1


    I was thinking off making it detect if the value in the array is a multiple or a single so instead of {c1,1} you could just have c1 and it would use less characters, at the moment the above image array is actually using more chars then if you were to use c1,c2,c2,c3...etc. Maybe even make it not convert 2 of the same colour values if they are next to each other because c1,c1, is 6 chars and {c1,2}, is 7 chars. Plus its more taxing on the system to make it open the array and get out the values then just using c1,c1,
    Let me know what you think.
  • sjoerd19992: Awesome!
  • pajlada: @Demon666: Very true, the set_sprite_texels would become slightly more complex but it's worth it. I'll implement it at a "third" option and it'll chose the one with lowest number of chars :)
  • TechZ2124: Awesome dude ! Draw with LUA have never been so simple with this ! Thanks a lot !
  • JOELwindows7: Awesome! Suppprted so far forever!
  • Demon666: @pajlada: to shorten the code even more you can use a 2d array instead like {{c1,4},{c2,3},{c1,4}} instead of {c1,c1,c1,c1,c2,c2,c2,,c1,c1,c1,c1} it would shorten the amount of characters alot more.
  • Golden: @pajlada: ok
  • pajlada: @golden: I'll add some sort of link at the bottom of the page tomorrow.
  • Golden: I try add to my moto x pixel art
  • Golden: @pajlada: so it easier to find , just got an idea
  • pajlada: @golden: a tab?
  • Golden: @pajlada: can you add tab for convert?
  • golds: I got computer
  • Cralant: @pajlada: Works perfectly on my computer, hopefully we see some great sprite creations coming in the next few days ;)
  • Golden: @pajlada: thanks!
    For image converter
  • pajlada: Ah, yep.
    This definitely won't work from the in-game browser.
    It uses some HTML5 stuff to process the image.
  • zardOz2: @pajlada: the load image button didnt work... Ill try frrom the browser
  • pajlada:
    And there's the source code.
  • pajlada: Please give and try and see if it works as expected, and is actually useable :-)
    Images of any size work, but large images WILL make your device lag while processing.
    Everything is done client-side, nothing is actually sent to the server.
  • Cralant: @zardOz: Do you mean have a array of pre set variables for the colours? If so then no need for the moment, demon666 has a script that does that and pajlada is currently working on an official one that will detect the most efficient method of storage. When that version comes out I will probably use it for my website just for the addition of the script creator to simplify things for non lua users.
  • zardOz2: @Cralant: that's why Im working so hard on various optimization codes for the dungeon... I have the "benefit" of being able to actually detect the slowdown:)
  • zardOz2: @Cralant: tall order: I think if you can get the program to set each unique four color code into a table once and then each position would call only a single value...
  • Cralant: @zardOz: Ahh I imagine that makes it quite difficult to work on anything large...
  • zardOz2: I get timeout errors on the lua if it's too intense a code... and it's about 5fps
  • Cralant: @zardOz: Thanks Z! Do you mean an issue with the website or principia on your device freezing?
    @The_Blacksmith_: Thanks
  • zardOz2: Great work! Instant time out tho for me... crazy lag on these imports.
  • The_Blacksmith_: Awesome idea! LIKE

LEVEL ID: 6264