News: 11 March 2016 - Forum Rules
Current Moderators - DarkSol, KingMike, MathOnNapkins, Azkadellia, Danke

Author Topic: TileShop - Flexible Graphics Editor (Very early progress)  (Read 9594 times)

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
TileShop - Flexible Graphics Editor (Very early progress)
« on: August 27, 2016, 07:52:11 pm »
I've been working on a new graphics editor for some time and have reached enough milestones that I think it's time to start showing it off. It is tentatively named TileShop.

The program aims to be an editor that can load arbitrary, uncompressed graphics codecs from XML files, and be about as flexible as FEIDIAN is. There's still much work to do on this front to reach that goal, but loading codecs for basic formats is currently working. Future work involves adding linear graphics support, more tiled codecs, and support for oddball tile sizes.

The second major aim is to provide an organizational structure to graphics editing projects. This aim means keeping track of arrangers, game files, loading of palettes from the game, and editing of game palettes. I've made pretty significant progress here.

Major unfinished tasks
  • Additional graphics formats support
  • Pixel editor
  • Palette editor
  • User interface bug squishing

Screenshots and Information

This initial screenshot shows off the project structure along with a few viewers open. The middle viewer shows the Final Fantasy 2 ROM as you'd expect in a normal tile editor. The left and right show what I've named scattered arrangers. You can drop/drag graphics into these arrangers and the project structure will save them for you. All edits (when implemented) in these scattered arrangers will affect their underlying source files.

Sample XML codec here for SNES 4bpp
Sample XML project file. This file is created by using the editor directly, not by the end user. Though utilities could be made to create these files.

Please feel free to give suggestions. I'm aware that several small UI quirks are present (ie. not hiding the codec dropdown on scattered arrangers). The project will certainly take several months more of my free time to get the program into an acceptable state for release.

BlackDog61

  • Hero Member
  • *****
  • Posts: 784
    • View Profile
    • Super Robot Wars A Portable translation thread
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #1 on: August 28, 2016, 02:56:13 am »
Hey, now that's interesting!
I was reviewing my alternatives (as a user) and they are pretty limited.
Having XML extensibility for formats descriptions sounds like a very good idea!  :thumbsup:

A few questions are in order! 8)
- Do you plan to support an image export / import option (with a format of your choice), in case some more advanced drawing tools are required? (Ex: when you edit a title screen, you may want to introduce lighting effects and whatnuts in the pixels.)
- (It looks like it, but to confirm.) Will the tool keep a library of "'file; offset; encoding)" bookmarks, per project, so I can later navigate all graphics in my project regardless of where they physically are? (It's a specific choice when you have small sprites like you show in the screenshot, whether you want a single big bookmark, or a series of them.) And would the user be given the opportunity to name these bookmarks?
- Any plans for TIM / GIM support?
- What about compression?
- (Increasing the wishlist potentially beyond plans) would you consider adding an auto-detect feature, to help when browsing files? By that I mean - creating said bookmarks automatically on a new file, based on a bytes signature the user would define.
- How are files considered as part of the project? Do you plan to have a "pure" file browser in the leftmost window, or does the user add files to that structure?

Regardless of your answers, thanks for putting this together! I feel it will be another of your good presents to the community.

dACE

  • Sr. Member
  • ****
  • Posts: 353
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #2 on: August 28, 2016, 07:47:08 am »
I agree - this have the potential to be THE tile-editor to rule them all.

Love to see some form of database/repository online, when it's released, for definitions/codecs/projects/whatnots.

Keep up the good work!

/dACE

Grimlock

  • Sr. Member
  • ****
  • Posts: 361
  • Graphics Artist, Level Designer
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #3 on: August 28, 2016, 09:05:36 am »
Regarding the tile arranger, can you allow this to be a custom size?  Using Tile Layer Pro extensively in the past I've run into the problem of not having enough room with their default tile arranger size.  It would be even better if you could save and load different tile arrangements, that way you can for example have 1 sheet for enemies, 1 sheet for player sprites, 1 sheet for each area in the game (area mockups).  Allowing people to save tile arrangements as separate file would allow people to share tile arrangements with others.  It would be a huge time saver for those receiving the arrangements.

Allow for an optional different palette to be shown for the arranger for the purpose of experimentation.

Scratch pad: Would allow you to have a workspace to create new tiles without directly working on the game tiles.  You would be able to save and load these as a separate file.  Allow a separate palette for this as well for experimentation.

Import through the clipboard:  Allow people to copy and paste graphics directly through the clipboard.  Example:  an area is highlighted in a graphics app, and then copied to the computers clipboard.  In your app have a option "import graphics from clipboard".

Import through indexed bmp: Certian apps go this route and use the color information in the index table to determine which color is in which palette and which color slot in the palette.  For example NES Screen Tool uses the first four colors as palette 1, palette slots are in order from 1 to 4. Palette 2 is colors 5 to 8.  The actual color information in the imported image is discarded.  It's confusing for many and tricky for those not familiar with an advanced graphics editing app like Photoshop, this leads into my next idea:

Import interface to determine palette color numbers: when a graphic is imported (through clipboard or indexed image) a window opens with the graphic visible.  In the same import window to the side there would be one button per palette color slot (example: the NES has 4 color slots).  The user would click a button for a given slot and then click on that color on the image.  Like a paint bucket tool allow the user to select all the same colors or just the color area clicked on.  Or allow the user to draw a mask over the tiles they want to be on that given palette slot.  When the user clicks the button for the next palette slot allow them an option to show a mask over the previously assigned pixels, or to just show which ones are being selected for the current palette slot.  For example you would see a green color painted over the tiles chosen for the currently selected palette slot and blue painted over the pixels already assigned to a palette slot.  If you select a different palette slot then the green color of the mask would change to blue just like the other pixels, you could choose any of the palette slot buttons and see the associated pixels in green as a last minute check before the final import.  If a pixel is not selected have it default to a certain palette slot like the first one which is usually used as transparency.  When the graphic is imported give the option to paste it into the game ROM or into the scratch pad (scratch pad idea previously mentioned).  Having the color mask transparent would be pretty nice, allowing users to see the image bellow.

Check out the other commonly used tile editors for their graphics editing tools and options: YYCHR, Tile Molester, Tile Layer Pro for example.  Simple options like shifting a tile graphic up, down, left or right 1 pixel, rotating tile 90-degrees, mirroring are actually pretty handy at times.  Other options like line drawing, paint bucket tools and such are great to have as well.

If I have anymore ideas I'll continue to share them.  This looks like it has the potential to be a pretty fantastic graphics editing app.  Be sure to allow multiple systems if you can, especially NES.
« Last Edit: August 28, 2016, 09:27:14 am by Grimlock »

chillyfeez

  • Hero Member
  • *****
  • Posts: 824
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #4 on: August 28, 2016, 09:10:51 am »
Since you've used the example of ffiv... Considering character battle sprite sheets in that game, several tiles are reused depending on the characters' "pose" in battle (for instance, many sprite poses use the same top left corner, essentially the character's face). Will the program allow for reusing tiles in this manner, so that I can make a functional battle sprite sheet to edit?

Also, will edits take place directly on the arranger, or will still be done tile-at-a-time in a separate window? One of the things that generally slows down the process for me when using Tile Layer is the fact that, though I can arrange the tiles however I want, I am still limited to editing them separately.

EDIT
I guess a versatile import/export feature would also be an effective way to deal with this issue, one where the exported tiles keep their custom arrangements, though this could also pose problems with reused tiles...
« Last Edit: August 28, 2016, 09:21:56 am by chillyfeez »
Ongoing project: "Final Fantasy IV: A Threat From Within"

Latest Demo

Grimlock

  • Sr. Member
  • ****
  • Posts: 361
  • Graphics Artist, Level Designer
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #5 on: August 28, 2016, 09:18:28 am »

Also, will edits take place directly on the arranger, or will still be done tile-at-a-time in a separate window? He of the things that generally slows down the process for me when using Tile Layer is the fact that, though I can arrange the tiles however I want, I am still limited to editing them separately.

I agree, editing directly on the arranger would be a good idea.  It would be best though if there were a faint grid to differentiate the tiles otherwise it could get confusing where tiles begin and end which is a problem since a lot of tiles are reused and altering them could be undesirable.

Edit: Please consider various zoom options for the arranger or wherever the user will actually be doing the editing.

Animation preview option:  Allow user to select certain tiles of a given size in the arranger as frames.  Then allow options for playback and speed, add/remove frames and such.  If you have the app see these as mini arrangers that it just continues to cycle through that would allow the user to directly edit the tiles when paused on a frame (having a next frame, previous frame set of buttons would be handy).
« Last Edit: August 28, 2016, 09:43:29 am by Grimlock »

dACE

  • Sr. Member
  • ****
  • Posts: 353
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #6 on: August 28, 2016, 09:58:26 am »
I second the idea about a animation previewer.
If possible I would also like to export animations as gif-anims.

/dACE

BlackDog61

  • Hero Member
  • *****
  • Posts: 784
    • View Profile
    • Super Robot Wars A Portable translation thread
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #7 on: August 28, 2016, 11:36:36 am »
I think we're all saying we want to contribute to the tool! ;D

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #8 on: August 28, 2016, 12:06:55 pm »
- Do you plan to support an image export / import option (with a format of your choice), in case some more advanced drawing tools are required? (Ex: when you edit a title screen, you may want to introduce lighting effects and whatnuts in the pixels.)

I'm expecting to add this. It most likely will export a companion XML file to know how to reinsert as well.

- (It looks like it, but to confirm.) Will the tool keep a library of "'file; offset; encoding)" bookmarks, per project, so I can later navigate all graphics in my project regardless of where they physically are? (It's a specific choice when you have small sprites like you show in the screenshot, whether you want a single big bookmark, or a series of them.) And would the user be given the opportunity to name these bookmarks?

The philosophy is to organize everything you want into an arranger. How you name / organize / separate these is up to you. There will be no bookmarks for files themselves, that functionality is covered by arrangers

- Any plans for TIM / GIM support?

TIM editing is something I really want to put in. I'm not sure what GIM is.

- What about compression?

Not at the moment, but I wouldn't rule it out well in the future.

- (Increasing the wishlist potentially beyond plans) would you consider adding an auto-detect feature, to help when browsing files? By that I mean - creating said bookmarks automatically on a new file, based on a bytes signature the user would define.

This is actually how I expect to support TIMs via file-specific loaders. It will add arrangers for the image and palettes into the project automatically.

- How are files considered as part of the project? Do you plan to have a "pure" file browser in the leftmost window, or does the user add files to that structure?

They have their own separate category as "files" in the project explorer treeview and must be added to the project before making arrangers/palettes from them. Double clicking them opens a graphics viewer consistent with what you'd expect from a tile editor.

Regarding the tile arranger, can you allow this to be a custom size? Allowing people to save tile arrangements as separate file would allow people to share tile arrangements with others.

The scattered arrangers can be of any size. They can be different formats, but the elements must be the same size (ie. all 8x8 tiles or 12x12 tiles). The projects (file, palettes, arrangers) are already saved to XML, so you can reload your project and share it with others. Additional viewer palettes will be added sometime in the future.

Scratch pad: Would allow you to have a workspace to create new tiles without directly working on the game tiles.  You would be able to save and load these as a separate file.  Allow a separate palette for this as well for experimentation.

I'm aiming for this, but a memory-based arranger doesn't fit well into my program's philosophy. The blank arranger creator will likely facilitate creating a new blank file for you.

Import through the clipboard: Allow people to copy and paste graphics directly through the clipboard.  Example:  an area is highlighted in a graphics app, and then copied to the computers clipboard.  In your app have a option "import graphics from clipboard".

This is a tough feature given the amount of custom cases the program handles. Not sure if it will happen. Will have to code the editor and graphics export/import portions first.

Import through indexed bmp: | Import interface to determine palette color numbers:

Not sure how much of this will happen. TIMs are indexed bmps with the potential for multiple palettes and the program will certainly have some support in that area. Also, I plan on making a color remap feature for fonts. Importing fonts has always been something I hated because the colors never match up.

Since you've used the example of ffiv... Considering character battle sprite sheets in that game, several tiles are reused depending on the characters' "pose" in battle (for instance, many sprite poses use the same top left corner, essentially the character's face). Will the program allow for reusing tiles in this manner, so that I can make a functional battle sprite sheet to edit?

Yes, scattered arrangers can contain the same underlying tile multiple times. So you can make a realistic sprite sheet.

Also, will edits take place directly on the arranger, or will still be done tile-at-a-time in a separate window?

For tile-based editing, I plan on having the user highlight a square of tiles they want to edit. That selection of one or multiple tiles will appear in the editor window. So the editing surface will contain a full sprite of multiple tiles

It would be best though if there were a faint grid to differentiate the tiles otherwise it could get confusing where tiles begin and end which is a problem since a lot of tiles are reused and altering them could be undesirable.

Gridlines can be toggled on/off.

Edit: Please consider various zoom options for the arranger or wherever the user will actually be doing the editing.

Each window can currently zoom from 1x to 8x.

Animation preview option: Allow user to select certain tiles of a given size in the arranger as frames.  Then allow options for playback and speed, add/remove frames and such.  If you have the app see these as mini arrangers that it just continues to cycle through that would allow the user to directly edit the tiles when paused on a frame (having a next frame, previous frame set of buttons would be handy).

Thought about this before. Animating frames is a bit outside of the project's current scope, but is a possibility. I'm not sure how much support I will have for third-party code outside of custom file loaders.

chillyfeez

  • Hero Member
  • *****
  • Posts: 824
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #9 on: August 28, 2016, 12:33:43 pm »
That all sounds great, Klarth. Looking forward to the eventual release!
Ongoing project: "Final Fantasy IV: A Threat From Within"

Latest Demo

salvadorc17

  • Jr. Member
  • **
  • Posts: 82
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #10 on: August 29, 2016, 05:56:42 pm »
Will be good to use, looks flexible and powerfull, wich consoles is supposed to be used for..

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #11 on: August 29, 2016, 06:23:52 pm »
Will be good to use, looks flexible and powerfull, wich consoles is supposed to be used for..
Pretty much any system with the caveat that the graphics are uncompressed. There are currently some limitations regarding tile sizes, but I plan on fixing that.

September 03, 2016, 12:17:20 am - (Auto Merged - Double Posts are not allowed before 7 days.)
Work on the palette editor is currently underway. I chose this component before the pixel editor so I can also implement background code for pushing out file modifications. Progress will unfortunately be slow after this weekend is over as other responsibilities are ramping up.

The palette editor is somewhat awkward for users with small vertical resolution as a full 256 entry palette takes up quite a lot of screen space (example on right side of screenshot). Overall I'm satisfied with the design, though it needs a few tweaks. I will likely be transitioning the file offset box to hex input or hex+dec support. Additionally, highlights will be added around the selected palette entry. And implementing HTML color code support, though that might not be necessary.



« Last Edit: September 03, 2016, 12:17:20 am by Klarth »

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #12 on: September 10, 2016, 08:21:58 pm »
Work on the palette editor is coming along slowly. The good news is that I've laid down a decent bit of the UI code for the pixel editor.

Past that, I have a lot of background code to plan out and program for file saving / undo, graphics encoding, and linear graphics. This code should constitute the last portions of complex code in the project. Additional work will be necessary to tighten up the code base and make the program user friendly, so there's still plenty left.


justin3009

  • Hero Member
  • *****
  • Posts: 1617
  • Welp
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #13 on: September 11, 2016, 08:24:53 am »
I'm loving this so far.  The GUI, even thus far, seems pretty friendly and not an eyesore.  Also the ability to have everything so nicely laid out on the side for palettes and such, dear god that's going to be a god send for most projects.
'We have to find some way to incorporate the general civilians in the plot.'

'We'll kill off children in the Juuban district with an infection where they cough up blood and are found hanging themselves from cherry blossom trees.'

Bahamut ZERO

  • Hero Member
  • *****
  • Posts: 906
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #14 on: September 11, 2016, 03:49:21 pm »
Since I noticed a fair number of pics are showing FF4 I had to ask: how are you setting the palette colors? Are you doing it by hand, or is the app able to read palette data from a savestate like YYCHR is able to do with ZSNES savestates?
Like Super Mario Land? Then you'll love my first completed Rom Hack: Maniac on the Run!

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #15 on: September 11, 2016, 05:09:48 pm »
I'm loving this so far.  The GUI, even thus far, seems pretty friendly and not an eyesore.
Thanks. The GUI will probably end up as one of the weaker components as my UI programming skills aren't quite on par with the complexity of the project. There is a lot of flexibility on how the windows can be arranged by the user, but the default behaviors might not fit everybody.

how are you setting the palette colors?
At the moment, I am manually searching for the palettes in the ROM, adding the locations to the project, and TileShop directly uses the ROM's own palette. Palettes can be chosen per-tile and all is saved to an XML file for easy reloading. Otherwise, the graphics are rendered using a default palette such as the file viewer uses.

Before release, I plan on having a way to import palettes in other ways via an external file loader paradigm for convenience. Such palettes would, of course, not be editable. The variety of files supported will depend if the community has a few members that are willing to program these external file loaders. Additionally, debugging emulators may begin supporting viewing associated palette data for tiles now that there's a big reason to. Ideally, you can do a ROM search with the palette data loaded into VRAM and find the actual palette location. Savestate file loaders could potentially do the same thing.

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #16 on: April 03, 2017, 05:18:42 pm »
Took a break from TileShop for awhile but have returned. I made some progress from last update with updates to the palette editor, UI code, and a significant amount of behind-the-scenes code. Still much more work needed. I'm tying together some usability things and then will work on the general tile graphics encoding functionality so edits can actually be saved. Once this point has been reached, a beta release might be warranted to iron out bugs and usability issues. After that, expanding the general graphics XML format beyond simple, widely supported formats will be prioritized. Later in the future, I will be interested in recruiting help to create or source various icons for the project.

Klarth

  • Sr. Member
  • ****
  • Posts: 484
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #17 on: April 24, 2017, 05:58:11 pm »
Major progress in adding better codec support. Now supports NES 1/2bpp, SNES 2/3/4/8bpp + Mode7, VB 2bpp, NGPC 2bpp, Genesis 4bpp, Game Gear 4bpp, and PSX 4bpp/8bpp. I need to expand some code so that the program can decode tiles that are not byte-aligned, but about half of the code has been switched over to a bit-friendly version. Encoding / saving edits has been implemented but the usability is lacking because I only have a pencil tool and color picker. The core of the program is getting closer to release, but a lot of nice-to-have features will probably wait until after release.

Some preliminary support for PSX TIMs below (8bpp with multiple palettes). The final feature set will have seamless loading and swapping between palettes as opposed to the handcrafted arrangers seen below made for testing purposes.


Spinner 8

  • Sr. Member
  • ****
  • Posts: 447
  • Pink Pretty Princess
    • View Profile
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #18 on: April 25, 2017, 01:27:14 pm »
give me this

NERV Agent

  • Restricted Access
  • Sr. Member
  • *
  • Posts: 497
  • Eva Unit 01
    • View Profile
    • Watch my anime shitposts on YouTube! Smell them, too!
Re: TileShop - Flexible Graphics Editor (Very early progress)
« Reply #19 on: April 25, 2017, 11:19:44 pm »
Some preliminary support for PSX TIMs below (8bpp with multiple palettes). The final feature set will have seamless loading and swapping between palettes as opposed to the handcrafted arrangers seen below made for testing purposes.



Could there be a feature that allows for editing the CLUTs on the fly, too?

Otherwise, if this thing has the feature of actually saving tile arrangements, then this is a godsend and makes sprite editing much less time consuming.