Omnimaga

General Discussion => Technology and Development => Web Programming and Design => Topic started by: Keoni29 on September 29, 2013, 07:40:15 am

Title: 8 by 8 sprite image from url
Post by: Keoni29 on September 29, 2013, 07:40:15 am
Create 8 by 8 sprite from url
It has been a while since I created the sprite-from-url script. I now present to you:
     A small editor for creating 8x8 sprites. It exports an url you can paste anywhere!

Go to the applet
Link: http://cookiecraft.eeems.me:81/spr/ (http://cookiecraft.eeems.me:81/spr/)

Screenshots

(http://www.omnimaga.org/index.php?action=dlattach;topic=19676.0;attach=17721;image)
 (http://cookiecraft.eeems.me:81/spr/)

Features
+ Up to 2 colors simultaniously.
+ High resolution! 8*8 pixels
+ 4x Anti aliasing

Upcoming features in Beta1.2.5_a
+ Oculus Rift support (If we reach our goal on kickstarter!)

This webapp was brought to you
(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FCC6C6C4FEC6C6FC&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6C6C67E1C3870E0&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=000000000000&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6CCD8F0F8DCCEC6&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FCC0C0C0F8C0C0FC&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7CC6C6C6C6C6C67C&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6E6E6D6D6CECEC6&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7830303030303078&width=32)
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 29, 2013, 07:42:16 am
Ha, awesome idea! :D
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on September 29, 2013, 07:44:04 am
I will add parameters for image size and stuff. Pretty easy to implement. Will do grayscale and larger sprites too.
This thing took me 20 minutes to slap together. (mostly troubleshooting with the hex to binary conversion)
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 29, 2013, 07:46:14 am
also....color? :D
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on September 29, 2013, 07:47:30 am
If I know what format the CSE sprites will use perhaps. Are there color tile editors out yet?
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 29, 2013, 08:24:38 am
There is the one for DCS8 by tifreak: http://ourl.ca/19549
Title: Re: 8 by 8 sprite image from url
Post by: Matrefeytontias on September 29, 2013, 03:29:26 pm
CSE images use the R5G6B5 format. I think this'll only be kept as a format for interaction with the LCD driver though, and that programmers will use 8-bits palletized colours.
Title: Re: 8 by 8 sprite image from url
Post by: Hayleia on September 29, 2013, 03:32:35 pm
Also, before talking about colors, why not adding greyscale support (3 levels, masked or not, and 4 levels) ?

Looks nice by the way.
Title: Re: 8 by 8 sprite image from url
Post by: Xeda112358 on September 29, 2013, 03:45:48 pm
(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FE101010101010&color=229&background=CCC)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=828282FE828282&color=229&background=CCC)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FE8080FE8080FE&color=229&background=CCC)
(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7C82808682827C&color=229&background=CCC)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7C8282FE828282&color=229&background=CCC)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=82C6AA92828282&color=229&background=CCC)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FE8080FE8080FE&color=229&background=CCC)

Also, this is actually pretty neat and useful!
 ;D(http://www.omnimaga.org/Themes/default/images/gpbp_arrow_up.gif)
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on September 29, 2013, 03:49:46 pm
/me lost x.x
But it does look nice indeed. ;)
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 29, 2013, 04:32:31 pm
/me lost
so that is why you poked me xeda :P
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on September 29, 2013, 09:33:21 pm
Seems cool. IMHO though the best would be if images used the same format as Celtic 2 CSE and xLIB (maybe have the person choose?), that way people can easily use sprites from games :P
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 30, 2013, 06:56:13 am
wait, could your site get blocked because of 8*8 pr0n? O.O/me hides
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on September 30, 2013, 03:16:48 pm
Doubt it.
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on September 30, 2013, 03:26:08 pm
Lol I guess you could just disable bad images that get reported, but that would be hard to do if the person only changes 1 pixel. Besides, it could be intentional, meaning not intended to be adult content, plus there's unintentional goatsee in Zelda: A Link to the Past, anyway, yet the game is still rated for everyone.
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on September 30, 2013, 03:27:22 pm
I will not blacklist certain codes. That will just put more load on the server when every time an image gets requested it needs to compare it to a database table. My site cannot get blocked since these images are not stored. They are generated every time someone loads it in a page.

Just made an 7+1*8 font. Don't rely on the current host yet though. As I stated earlier: it will probably be moved from this host to my own server pretty soon.

(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FCC6C6C4FEC6C6FC&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6C6C67E1C3870E0&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=000000000000&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6CCD8F0F8DCCEC6&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=FCC0C0C0F8C0C0FC&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7CC6C6C6C6C6C67C&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=C6E6E6D6D6CECEC6&width=32)(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=7830303030303078&width=32)


[7CC6C6C6FEC6C6C6] A
[FCC6C6C4FEC6C6FC] B
[7CE6C2C0C0C2E67C] C
[FCC6C6C6C6C6C6FC] D
[FCC0C0C0F8C0C0FC] E
[FCC0C0C0F8C0C0C0] F
[7CC6C6C0DEC6C67C] G
[C6C6C6FEFEC6C6C6] H
[7830303030303078] I
[7C18181818D8D870] J
[C6CCD8F0F8DCCEC6] K
[C0C0C0C0C0C0C0FC] L
[C6EED6D6C6C6C6C6] M
[C6E6E6D6D6CECEC6] N
[7CC6C6C6C6C6C67C] O
[FCC6C6C6FCC0C0C0] P
[78CCCCC4C8CEC678] Q
[FCC6C6C6FCD8C6C6] R
[7CC6C0FC3E06C67C] S
[FC30303030303030] T
[C6C6C6C6C6C6FE7E] U
[C6C6C6C6C6EE7C38] V
[C6C6C6D6D6EEEEC6] W
[C6C66C38386CC6C6] X
[C6C6C67E1C3870E0] Y
[FEFE061C70C0FEFE] Z
Spoiler For Spoiler:
Sure, you can use it with AXE programs!
Code: [Select]
[7CC6C6C6FEC6C6C6]
[FCC6C6C4FEC6C6FC]
[7CE6C2C0C0C2E67C]
[FCC6C6C6C6C6C6FC]
[FCC0C0C0F8C0C0FC]
[FCC0C0C0F8C0C0C0]
[7CC6C6C0DEC6C67C]
[C6C6C6FEFEC6C6C6]
[7830303030303078]
[7C18181818D8D870]
[C6CCD8F0F8DCCEC6]
[C0C0C0C0C0C0C0FC]
[C6EED6D6C6C6C6C6]
[C6E6E6D6D6CECEC6]
[7CC6C6C6C6C6C67C]
[FCC6C6C6FCC0C0C0]
[78CCCCC4C8CEC678]
[FCC6C6C6FCD8C6C6]
[7CC6C0FC3E06C67C]
[FC30303030303030]
[C6C6C6C6C6C6FE7E]
[C6C6C6C6C6EE7C38]
[C6C6C6D6D6EEEEC6]
[C6C66C38386CC6C6]
[C6C6C67E1C3870E0]
[FEFE061C70C0FEFE]
Title: Re: 8 by 8 sprite image from url
Post by: Juju on September 30, 2013, 05:12:22 pm
Yay a font :3

Will you make numbers too?
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on September 30, 2013, 05:14:23 pm
*and lowercase letters? :D
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on September 30, 2013, 06:24:36 pm
Noticed some characters do not display correctly. There might be something wrong with the hex conversion. It's maybe because it overflows.
Title: Re: 8 by 8 sprite image from url
Post by: Xeda112358 on October 01, 2013, 08:43:24 am
Yeah, I noticed the issue, too. I made it so that my characters were 7x7 to avoid the issue, but what is your code for converting the hex? If data is the 64-bit data and a holds the value of the current character:

(in Python code)
Code: [Select]
if a>64:
    a=a-7
data=(data<<4)-48+a
Just iterate that through each hex digit and overflow shouldn't be a problem. (this also requires that data be a 64-bit unsigned int).
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on October 01, 2013, 03:17:23 pm
Maybe php uses signed 64 bit signed values and that is the issue. I might have to split the hex string up and go from there.
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on November 02, 2013, 02:36:42 pm
I just fixed it by cutting the hex string down into 2 digit chunks. It should display every sprite properly now! I will add 16*16 and grayscale too when I find the time.
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on November 05, 2013, 12:11:57 am
What about xLIBC palette when tr1p1ea implements individual sprites? (see http://dcs.cemetech.net/index.php/DCSE:BasicLibs:DrawShape#Color_Values for it)
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on November 05, 2013, 03:13:07 am
DJ, will those sprites be 8 bit per pixel or rather 3 or 4 bit with palettes?
Title: Re: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on November 05, 2013, 10:27:10 am
Xlib sprites for the color model are 8x8 sprites that are 256 colors, using a custom palette linked above, so 8 bits per pixel.

I think that there's also a Celtic lib included that supports 16x16 sprites that are 4 bit per pixels and use the TI-OS palette.
Title: Re: 8 by 8 sprite image from url
Post by: Eiyeron on November 27, 2013, 05:01:35 am
I'm developping a bot, EiyoBot these times.
When you can see it, you can use the @sprite [hex][hex]... to get the links to the image version of your sprites. and yup, it messes withv runerbot, but atm it's total WIP.
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on November 27, 2013, 05:14:58 am
Cool! Good luck with your project. I will add features to the sprite generator when I have some more spare time on my hands.
Title: Re: 8 by 8 sprite image from url
Post by: Eiyeron on November 27, 2013, 05:15:38 am
Be sure to send them to me to see if they are useful!
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on November 27, 2013, 08:22:17 am
You could have the trigger char be soemthing else, to have it be like
!sprite
Title: Re: 8 by 8 sprite image from url
Post by: Eiyeron on November 27, 2013, 11:35:22 am
The problem is having the same command doing two different thing... @sprArr? Sprite Array?
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on April 03, 2014, 05:10:42 pm
I finally implemented this feature in a website of mine. I use the 8*8 images as the user's profile pic. It takes up as little as 8 bytes in the database.
http://ez8tut.sourceforge.net/?p=profile.php&user=admin
http://ez8tut.sourceforge.net/?p=profile.php&user=guest
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on April 04, 2014, 12:44:34 am
If people started using this for their Omni avatars, do you think your server could take the load?
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on April 04, 2014, 03:13:25 am
Probably. This is sourceforge after all :P
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on April 08, 2014, 12:58:54 am
Oh right,  I forgot you were keeping this hosted there. I thought you had plans to move it to your own server or something.
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on May 21, 2014, 06:12:17 am
I made a quick and dirty tool that generates an url from hex code:
http://cookiecraft.eeems.me:81/spr/

I will add features like scaling and colors.
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on May 21, 2014, 06:58:09 am
Maybe also add a GUI to edit the sprite and then get the URL. :)
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on May 21, 2014, 07:09:11 am
Hmm I see that pixelscape copied my idea (not sure how long this option exists)
http://clrhome.org/pix/2-FF818181818181FF-4.png (http://clrhome.org/pix/2-FF818181818181FF-4.png)
Welp. I guess there is no need for this anymore then :/
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on May 21, 2014, 08:42:23 am
Only because one thing exists doesn't mean you can't re-make it. My guess is that pixelscape uses that internally.
But hay, yours has scaling options and color palette options ;)
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 21, 2014, 09:17:18 am
New looks: (http://cookiecraft.eeems.me:81/spr/)  http://cookiecraft.eeems.me:81/spr/
Title: Re: 8 by 8 sprite image from url
Post by: pimathbrainiac on June 21, 2014, 09:33:51 am
That looks really good, Keoni! I hope it will get even better in the future!
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 21, 2014, 10:22:20 am
Wha, that is looking sweat! Great job!
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 21, 2014, 11:43:00 am
Colors as well as some error handling! http://cookiecraft.eeems.me:81/spr/ (http://cookiecraft.eeems.me:81/spr/)


Edit: Now using png instead of nasty jpg images:
(http://ez8tut.sourceforge.net/experimental/image.php/?tiledata=AA55AA55AA55AA55&color=b23a3a&background=3b25a9)
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 21, 2014, 11:43:34 am
Now make so that clicking a pixel will toggle it :P
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 21, 2014, 11:45:14 am
Meh this is php. Not javascript. I could ofc have invisible links on every pixel, but yeah.
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 21, 2014, 11:48:14 am
then do that :P
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on June 21, 2014, 01:51:45 pm
Yay that looks great ! :D
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 21, 2014, 02:13:14 pm
Don't worry if you see stuff all messed up. I am changing the css on the webserver itself.

New features:
+ Mobile version! Scales to fit your screen perfectly!
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on June 21, 2014, 02:17:24 pm
Just checked it out on my tablet and it works great. :D
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 21, 2014, 02:19:00 pm
I am tweaking this as we speak. Added a minor feature: When you tap on an input field it automatically selects the content.


Edit: New color scheme:
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on June 21, 2014, 09:59:52 pm
Nice Keoni29, but there is pr0n in your sig O.O

not really actually, just that first 8x8 sprite to the left that looked a little suspicious ^^
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 22, 2014, 04:59:57 am
You sir, are pretty good at designing :)
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 22, 2014, 06:14:48 am
I figured out a way to implement an editor in javascript. Every pixel will be a block. onClick the pixel color changes and the hex code is updated. I just have to figure out how to make the shadow overlay those blocks.
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 22, 2014, 06:16:00 am
I'd do that with CSS, have the shadow have a higher z-index than the image.
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on June 22, 2014, 07:14:24 am
Quote from: DJ Omnimaga on June 21, 2014, 09:59:52 pm
Nice Keoni29, but there is pr0n in your sig O.O

not really actually, just that first 8x8 sprite to the left that looked a little suspicious ^^
Hehe that's the herocore character. :P
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 27, 2014, 05:28:41 am
New version uses javascript instead of php to generate the image. It has a nice clicky editor. You can click and drag to paint. Huge thanks to Eeems for his help!
Work in progress:
http://jsfiddle.net/Lqheq/21/ (http://jsfiddle.net/Lqheq/21/)

http://cookiecraft.eeems.me:81/spr/ (http://cookiecraft.eeems.me:81/spr/)

Features:
+ Click and drag to paint pixels :thumbsup:
+ Editor updates the hexadecimal string in real time.
+ Url is also updated in real time.
+ Pixel colors update in real time.
+ Grid
+ Grid color is the average of the front and background color. (Might change that to the inverse of the average)
Title: Re: 8 by 8 sprite image from url
Post by: Sorunome on June 27, 2014, 03:35:28 pm
Pretty awesome, it is great to see how far it already got ;)
Suggestion: hex in CAPS ;)
Title: Re: 8 by 8 sprite image from url
Post by: Streetwalrus on June 27, 2014, 03:56:54 pm
Oh yeah, I hate it when hex is written in lowercase. It's harder to read.
Title: Re: 8 by 8 sprite image from url
Post by: Keoni29 on June 27, 2014, 04:00:39 pm
Allright I will add that to my TODO.TXT:
Things to do:
- Make HEX string all caps.
- Change font for HEX string to monospace.
Title: Re: 8 by 8 sprite image from url
Post by: DJ Omnimaga on June 27, 2014, 10:35:34 pm
Awesome update Keoni :D
Title: Re: 8 by 8 sprite image from url
Post by: bb010g on July 07, 2014, 01:32:48 am
Me gusta.