Omnimaga

General Discussion => Technology and Development => Web Programming and Design => Topic started by: Aichi on April 15, 2011, 04:36:05 pm

Title: Online Sprite Editor
Post by: Aichi on April 15, 2011, 04:36:05 pm
Hey guys,
I work on an online Sprite Editor that translates 8x8 bitmaps in hex, bin and dec
using PHP, HTML, CSS and JS. All graphics are made by me in PS12, except the
Axe Parser logo that I've taken from the Axe Parser Support forum. :)
I created this sprite editor since I'm playing around with Axe Parser at the moment.
It might be useful for someone.^^

(http://xeverion.com/Tools/Asprite/Graphics/Logo.png) (http://xeverion.com/Tools/Asprite)

Random Shared-Sprites Database entry:
(http://xeverion.com/Tools/Asprite?Give=Random)

Userbars:
Code: [Select]
[url=http://xeverion.com/Tools/Asprite][img]http://xeverion.com/Tools/Asprite/Userbar/Simple.png[/img][/url](http://xeverion.com/Tools/Asprite/Userbar/Simple.png) (http://xeverion.com/Tools/Asprite)

Code: [Select]
[url=http://xeverion.com/Tools/Asprite][img]http://xeverion.com/Tools/Asprite/Userbar/Advanced.png[/img][/url](http://xeverion.com/Tools/Asprite/Userbar/Advanced.png) (http://xeverion.com/Tools/Asprite)

Code: [Select]
[url=http://xeverion.com/Tools/Asprite][img]http://xeverion.com/Tools/Asprite/Userbar/Asprite.png[/img][/url](http://xeverion.com/Tools/Asprite/Userbar/Asprite.png) (http://xeverion.com/Tools/Asprite)
Title: Re: Online Sprite Editor
Post by: ZippyDee on April 15, 2011, 04:39:44 pm
Nice! Your hex and dec text are overlapping your binary, but still good!

Maybe as you keep developing you could add some grayscale and masking features, etc.
Title: Re: Online Sprite Editor
Post by: Aichi on April 15, 2011, 04:52:41 pm
Nice! Your hex and dec text are overlapping your binary, but still good!

Maybe as you keep developing you could add some grayscale and masking features, etc.
Which Browser do you have used? Some Browsers can't handle CSS3 properties correctly.
It should look like this screenshot.
Title: Re: Online Sprite Editor
Post by: Freyaday on April 15, 2011, 04:53:48 pm
I have the same problem, and I'm in Chrome
Title: Re: Online Sprite Editor
Post by: Aichi on April 15, 2011, 05:26:00 pm
The layout bugs on Chrome have been fixed. :)
Title: Re: Online Sprite Editor
Post by: Munchor on April 15, 2011, 05:27:19 pm
Hey guys,
I work on an online Sprite Editor that translates 8x8 bitmaps in hex, bin and dec
using PHP, HTML, CSS and JS. All graphics are made by me in PS12, except the
Axe Parser logo that I've taken from the Axe Parser Support forum. :)
I created this sprite editor since I'm playing around with Axe Parser at the moment.
It might be useful for someone.^^

(http://xeverion.com/Script/Pixel/Logo.png) (http://xeverion.com/Script/Sprite.php)

Very nice! I once made a Java applet as a sprite editor, maybe I should upload it.
Title: Re: Online Sprite Editor
Post by: Aichi on April 15, 2011, 05:30:35 pm
Very nice! I once made a Java applet as a sprite editor, maybe I should upload it.
It would be nice to see yours.^^
Title: Re: Online Sprite Editor
Post by: DJ Omnimaga on April 16, 2011, 12:53:25 am
THis looks awesome! It would be cool if you could add the following:

-3 and 4 level grayscale sprites
-choosing between 8x8 and 16x16, with the option to split the hex in 4 8x8 sprites or not, when in 16x16 mode
-Changing pixel state automatically when you move the mouse cursor while holding down the button over a sprite. That way you don't need to click click click click and click when turning ON/OFF multiple pixels.
-The ability to view how the sprite looks like on a smaller grid made of just the sprite in 12x8 tilemap form, for people who are creating wall tiles, for example, to see if each side blends together.

Also, if you ever lose interest in Omnimaga (which i hope not), could you PM an admin the files so this can still remain online when your host shuts down? It would suck to see this tool go.
Title: Re: Online Sprite Editor
Post by: Aichi on April 16, 2011, 11:36:31 am
Update!
You find the Sprite editor by clicking on the logo in the first post.

- Rotating By 90*
- Horizontal Flipping
- Vertical Flipping
- Hex Input
- Bin Input
- Dec Input (Input Button without function atm)
- SHIFT + Hover = Drawing without clicking (Black)
- CTRL + Hover = Drawing wihtout clicking (White)
- LMB = Black, RMB = White (Removed the context menu to enable the RMB)
- Hover effects
- Some layout improvements


The other things that have been proposed by DJ_O will be added in a later version.

Also, if you ever lose interest in Omnimaga (which i hope not), could you PM an admin the files so this can still remain online when your host shuts down? It would suck to see this tool go.
I never gonna give TI up.  ;D
Also, it's OpenSource. :P
Title: Re: Online Sprite Editor
Post by: Munchor on April 16, 2011, 11:39:07 am
Update!
You find the Sprite editor by clicking on the logo in the first post.

- Rotating By 90*
- Horizontal Flipping
- Vertical Flipping
- Hex Input
- Bin Input
- Dec Input (Input Button without function atm)
- SHIFT + Hover = Drawing without clicking (Black)
- CTRL + Hover = Drawing wihtout clicking (White)
- LMB = Black, RMB = White (Removed the context menu to enable the RMB)
- Hover effects
- Some layout improvements


The other things that have been proposed by DJ_O will be added in a later version.

Also, if you ever lose interest in Omnimaga (which i hope not), could you PM an admin the files so this can still remain online when your host shuts down? It would suck to see this tool go.
I never gonna give TI up.  ;D
Also, it's OpenSource. :P

What about Ctrl+Hover to draw white pixels and not just 8*8 images?

Very good so far.
Title: Re: Online Sprite Editor
Post by: Ashbad on April 16, 2011, 11:53:44 am
very nice, aichi :3 this looks great, and the graphics complement it, so it doesn't look boring :)

some requests:

-toggle grayscale up to 8 level
-possible 16x16 toggling
-clear all
-export as TI ASCII
Title: Re: Online Sprite Editor
Post by: Munchor on April 16, 2011, 11:55:02 am
very nice, aichi :3 this looks great, and the graphics complement it, so it doesn't look boring :)

some requests:

-toggle grayscale up to 8 level
-possible 16x16 toggling
-clear all
-export as TI ASCII

I definutely have to agree with the good graphics and the 16*16 with possibility of exporting code ready to be used in Axe.
Title: Re: Online Sprite Editor
Post by: Aichi on April 17, 2011, 01:41:08 pm
Update!
You find the Sprite editor by clicking on the logo in the first post.

- Shifting the sprite up, down, left and right (Up and down are not done yet)
- Editing the current Hex / Bin Code
- Frame System
---- Adding and Deleting frames
---- Switching to the next / Previous frame
---- Jumping to the first  / last frame
---- Jumping to a specific frame
- Clearing sprites
- New hover effects
- Layout improvements


And sorry, but I won't include a way to export the sprites as TI progs,
unless someone has a routine to convert code into 8xp using PHP or JS.
Title: Re: Online Sprite Editor
Post by: Munchor on April 17, 2011, 02:07:51 pm
Update!
You find the Sprite editor by clicking on the logo in the first post.

- Shifting the sprite up, down, left and right (Up and down are not done yet)
- Editing the current Hex / Bin Code
- Frame System
---- Adding and Deleting frames
---- Switching to the next / Previous frame
---- Jumping to the first  / last frame
---- Jumping to a specific frame
- Clearing sprites
- New hover effects
- Layout improvements


And sorry, but I won't include a way to export the sprites as TI progs,
unless someone has a routine to convert code into 8xp using PHP or JS.


Nice job =D
Title: Re: Online Sprite Editor
Post by: Aichi on April 18, 2011, 11:38:21 am
Update!
You find the Sprite editor by clicking on the logo in the first post.

- Auto selection by hovering an output box
- Dec Input / Edit
- Copy and Paste
- Export all frames at once into a backup code
---- Test code: ÿÿǃƋǓƃƃÿÿÿŶŀŶŃņÿÿĎǀƎǀƀĎÿÿǯſǧƉƍƁÿÿÿÿÿÿňÿÿ
- Importing backup codes
- live Preview as Image, so you are able to drag the preview image to your desktop or wherever you want
- Sharing sprites
---- Just for fun and to refresh my MySQL knowledge :)
---- Use the world button and enter a name to add the current sprite to the sprite database
---- There is a random entry of this database in the first post
- Final layout improvements and script improvements

It would be nice if you test all features, since there might be still bugs.
And thanks, Scout. :)
Title: Re: Online Sprite Editor
Post by: Munchor on April 18, 2011, 11:50:35 am
No problem Aichi!


w000000000000000000000000000000000000000000000000000000000000000000000000000000t So many features, so many buttons!

Also, sharing sprites means we can't draw pr0n sprites? >:D (j/K)

I'll try and test them Aichi.

EDIT:

I just tried it and I have some stuff to say:
- What about a list with the code of all the sprites (by request of the user), so we don't have to press the "NEXT" button for animations. You press a button and you get a copiable dialog or one of those javascript frames with the code of all the sprites in order in the chosen type (hex, asm,...).
- The share button is cool, but could you make it bigger and outside the "animation-aimed buttons panel", so we don't confuse it with animations.
- Ctrl+Z-like button? Go back button!

That's all for now, the new features look neat.
Title: Re: Online Sprite Editor
Post by: kindermoumoute on April 18, 2011, 12:49:06 pm
Woa, I think i'll add your website in my Axe tutorial. :)
Title: Re: Online Sprite Editor
Post by: Munchor on April 18, 2011, 12:56:11 pm
Woa, I think i'll add your website in my Axe tutorial. :)

I just added it in bookmarks! It's now the best sprite editor of all, and it's online. Goodbye Tokens!
Title: Re: Online Sprite Editor
Post by: Aichi on April 18, 2011, 01:54:38 pm
w000000000000000000000000000000000000000000000000000000000000000000000000000000t So many features, so many buttons!

Hopefully not too many now. :D
EDIT:

I just tried it and I have some stuff to say:
- What about a list with the code of all the sprites (by request of the user), so we don't have to press the "NEXT" button for animations. You press a button and you get a copiable dialog or one of those javascript frames with the code of all the sprites in order in the chosen type (hex, asm,...).
- The share button is cool, but could you make it bigger and outside the "animation-aimed buttons panel", so we don't confuse it with animations.
- Ctrl+Z-like button? Go back button!
- Hm, what would you need it for? There is a backup code to save all frames at once.
- The last column in the white box is rather aimed to Porting than to animations. Where else would you put it in?
- I'll think about a redo-feature, I just wonder what should be reversed.^^

And thanks again. :)

Woa, I think i'll add your website in my Axe tutorial. :)
I'd be glad. :P
Title: Re: Online Sprite Editor
Post by: Aichi on April 18, 2011, 09:34:37 pm
Little Update!

- Preview Features
---- Click on the button with the preview image to open the preview window.
---- You can choose between the standart preview, the Tile preview (to see your sprite
---- 9 fold) and a 16x16 preview, to see your sprite as a corner together with three
---- other sprites. Also, there is a bigger preview image in this window. Every sprite gets
---- its own preview mode.
- Little other things


Known bugs: (Edit: Fixed)
Rotating / Flipping destroys the preview mode
Using a backup code destroys the current sprite
Title: Re: Online Sprite Editor
Post by: meishe91 on April 18, 2011, 10:21:39 pm
When you look in at the preview of tile/tilemap/16*16 window is there a way to close the window? Because I tried but couldn't find a way to close it. It looks awesome though, great job on it.
Title: Re: Online Sprite Editor
Post by: Aichi on April 19, 2011, 06:54:17 am
Sorry that I couldn't reply earlier, just click again on the button with the preview image.
Title: Re: Online Sprite Editor
Post by: Munchor on April 19, 2011, 09:46:16 am
Sorry that I couldn't reply earlier, just click again on the button with the preview image.

Yeah, but perhaps a X button would be better.

Also, what about this?

(http://img.removedfromgame.com/imgs/image.png) (http://xeverion.com/Script/Sprite.php)
Title: Re: Online Sprite Editor
Post by: Aichi on April 19, 2011, 03:58:44 pm
Update + "Release"!
You find the Sprite editor by clicking on the logo in the first post.

- Changed the project name to A·Sprite,
- reorganized the files,
- Designed a new logo
- Shifting up and down finally work
- Cancel-Button added to the preview window
- Some changes on the preview window
- Included the preview modes into backup codes, old codes won't work anymore
- Bugfixes, improvements, little other things


Also, what about this?
(http://img.removedfromgame.com/imgs/image.png) (http://xeverion.com/Script/Sprite.php)
Yay, nice idea. I'm going to add userbars to the first post. :)
Title: Re: Online Sprite Editor
Post by: Munchor on April 19, 2011, 04:02:50 pm
http://xeverion.com/Tools/Asprite/ (http://xeverion.com/Tools/Asprite/)

New URL?

Nice changes :D
Title: Re: Online Sprite Editor
Post by: Aichi on April 19, 2011, 05:48:51 pm
http://xeverion.com/Tools/Asprite/ (http://xeverion.com/Tools/Asprite/)
New URL?
Same domain, but a more meaningful directory.^^

Nice changes :D
Thank you Scout. :)

@ All
I added three userbars in my first post, feel free to include them in the signature.
Title: Re: Online Sprite Editor
Post by: turiqwalrus on April 19, 2011, 06:05:51 pm
that sword sprite on the first post is the exact same as my DCS7 mouse O.O
great job on this, aichi. maybe add 16*16 support?
EDIT: oops, just noticed it. maybe make it more noticable, then? 'cuz it's in the preview box ???
Title: Re: Online Sprite Editor
Post by: Aichi on April 19, 2011, 06:39:42 pm
that sword sprite on the first post is the exact same as my DCS7 mouse O.
Lol. :D

EDIT: oops, just noticed it. maybe make it more noticable, then? 'cuz it's in the preview box ???
Yeah, there was not enough place and I had to put this stuff into a seperate window.
I really should create an FAQ or something. ^^
Title: Re: Online Sprite Editor
Post by: Aichi on April 20, 2011, 12:17:29 pm
Update!
You find the Sprite editor by clicking on the logo in the first post.


- 24x24 / Tile Structure
---- A new important feature is planning a tile structure. You can create 24x24 tiles
---- now and something like this (as a tilemap) easily:
------- (http://img121.imageshack.us/img121/9467/2424.png)
---- based on a 3x3 tile field like this one:
------- (http://img156.imageshack.us/img156/3747/tilesh.png)
- New backup codes, older codes won't work anymore, sorry^^
- Bugfixes
Title: Re: Online Sprite Editor
Post by: Munchor on April 20, 2011, 12:18:20 pm
I also see a X button to close that frame, nice work! 24*24 :D
Title: Re: Online Sprite Editor
Post by: AngelFish on April 20, 2011, 12:22:11 pm
That looks great, aichi.
Title: Re: Online Sprite Editor
Post by: Aichi on April 20, 2011, 03:15:04 pm
A bug makes the Sprite Editor very unstable at the moment,
use it at your own risk until the next update. :/
Title: Re: Online Sprite Editor
Post by: DJ Omnimaga on April 20, 2011, 03:34:16 pm
Sorry to hear, I hope you can manage to fix it soon. :(
Title: Re: Online Sprite Editor
Post by: Munchor on April 20, 2011, 04:08:59 pm
A bug makes the Sprite Editor very unstable at the moment,
use it at your own risk until the next update. :/

Awaiting for it, all I do know is get the hex by hand or use this sprite editor. It's the best one :D
Title: Re: Online Sprite Editor
Post by: Aichi on April 20, 2011, 04:43:15 pm
Update!

- Fixed all bugs (I hope so at least)
- If you click on the CLEAR button accidentally, click on the PASTE button to rescue your work.


It's ironic that my Firefox 4 passed every safety test, but my Sprite editor could crash the whole browser through JavaScript overloading.  O.O
Finally, I can continue working on an Axe Parser project. ^-^
Title: Re: Online Sprite Editor
Post by: Munchor on April 20, 2011, 04:48:25 pm
Update!

- Fixed all bugs (I hope so at least)
- If you click on the CLEAR button accidentally, click on the PASTE button to rescue your work.


It's ironic that my Firefox 4 passed every safety test, but my Sprite editor could crash the whole browser through JavaScript overloading.  O.O
Finally, I can continue working on an Axe Parser project. ^-^

Good to know :D
Title: Re: Online Sprite Editor
Post by: Aichi on April 21, 2011, 02:54:44 pm
I added a bookmark feature, you can mark a specified frame as bookmark. This feature destroys older backup codes, add ÿ in front of older codes to repair them.
Title: Re: Online Sprite Editor
Post by: Munchor on April 21, 2011, 04:47:17 pm
I added a bookmark feature, you can mark a specified frame as bookmark. This feature destroys older backup codes, add ÿ in front of older codes to repair them.

Are you making backups of images? Or not really? Nice, an easy-bookmark feature.
Title: Re: Online Sprite Editor
Post by: Aichi on April 21, 2011, 06:40:19 pm
I added a bookmark feature, you can mark a specified frame as bookmark. This feature destroys older backup codes, add ÿ in front of older codes to repair them.

Are you making backups of images? Or not really? Nice, an easy-bookmark feature.
Asprite doesn't create backups automatically, you can save anything with these buttons.
(http://img847.imageshack.us/img847/5008/saveg.png)
This is what I mean with backing up.

By the way, the bookmark feature gives you the distance to the mark in hex, so you can get tile codes for [HEX]->Pointer tilemaps easily.
Title: Re: Online Sprite Editor
Post by: DJ Omnimaga on April 21, 2011, 08:05:07 pm
/me is curious about what Axe project Aichi is working on and is glad he fixed the bugs in his sprite editor. :D
Title: Re: Online Sprite Editor
Post by: Aichi on April 21, 2011, 08:47:41 pm
/me is curious about what Axe project Aichi is working on and is glad he fixed the bugs in his sprite editor. :D
It's something like Pugluna 2.  ;D Perhaps I'll wait for the next competition with it, dependent of when the next competition here will be organized.
Title: Re: Online Sprite Editor
Post by: Munchor on April 29, 2011, 01:47:32 pm
Is there any way you'll add .png reading?
Title: Re: Online Sprite Editor
Post by: Aichi on May 01, 2011, 10:24:27 pm
Is there any way you'll add .png reading?
It would be pretty awkward to read from image data.
Furthermore, I'm no longer working on it, but thanks for this suggestion.^^
Title: Re: Online Sprite Editor
Post by: DJ Omnimaga on May 22, 2011, 12:55:48 am
Pugluna 2 would be awesome, but please backup often this time so it won't die again D:.

Also I think it would be nice to merge this with your tilemap editor or be able to go back and forth between both.
Title: Re: Online Sprite Editor
Post by: Aichi on May 22, 2011, 03:18:05 am
Pugluna 2 would be awesome, but please backup often this time so it won't die again D:.
Check out this (http://ourl.ca/11106) if you not already did it.

Also I think it would be nice to merge this with your tilemap editor or be able to go back and forth between both.
Nice idea, I'm going to link to each other.^^
Title: Re: Online Sprite Editor
Post by: Munchor on May 22, 2011, 06:03:41 am
Oh linking them would be cool, nice idea DJ!
Title: Re: Online Sprite Editor
Post by: DJ Omnimaga on May 25, 2011, 03:45:14 am
Pugluna 2 would be awesome, but please backup often this time so it won't die again D:.
Check out this (http://ourl.ca/11106) if you not already did it.

Also I think it would be nice to merge this with your tilemap editor or be able to go back and forth between both.
Nice idea, I'm going to link to each other.^^
Ok I'll check whenever I get some time. Also cool to hear. :D