Author Topic: Online Sprite Editor  (Read 26421 times)

0 Members and 2 Guests are viewing this topic.

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Online Sprite Editor
« 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.^^



Random Shared-Sprites Database entry:


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

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

Code: [Select]
[url=http://xeverion.com/Tools/Asprite][img]http://xeverion.com/Tools/Asprite/Userbar/Asprite.png[/img][/url]
« Last Edit: April 19, 2011, 05:11:25 pm by Aichi »

Offline ZippyDee

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 729
  • Rating: +83/-8
  • Why not zoidberg?
    • View Profile
Re: Online Sprite Editor
« Reply #1 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.
There's something about Tuesday...


Pushpins 'n' stuff...


Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #2 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.

Offline Freyaday

  • The One And Only Serial Time Killing Catboy-Capoeirista-Ballerino
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1970
  • Rating: +128/-15
  • I put on my robe and pixel hat...
    • View Profile
Re: Online Sprite Editor
« Reply #3 on: April 15, 2011, 04:53:48 pm »
I have the same problem, and I'm in Chrome
In other news, Frey continues kicking unprecedented levels of ass.
Proud member of LF#N--Lolis For #9678B6 Names


I'm a performer at heart; I stole it last week.
My Artwork!

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #4 on: April 15, 2011, 05:26:00 pm »
The layout bugs on Chrome have been fixed. :)

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Online Sprite Editor
« Reply #5 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.^^



Very nice! I once made a Java applet as a sprite editor, maybe I should upload it.

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #6 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.^^

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Online Sprite Editor
« Reply #7 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.

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #8 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

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Online Sprite Editor
« Reply #9 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.

Ashbad

  • Guest
Re: Online Sprite Editor
« Reply #10 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

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Online Sprite Editor
« Reply #11 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.

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #12 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.

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Online Sprite Editor
« Reply #13 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

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Online Sprite Editor
« Reply #14 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. :)
« Last Edit: April 18, 2011, 11:39:54 am by Aichi »