[snkenjoi]

<3
Flex

about

Flex is a web based mapping / tile / DPLC editor written in javascript. It kinda spawned from GSXPwn and my desire to have a decent method for appending imported art with user defined mappings that didn't seem to already exist.

It is a work in progress, I plan to add more stuff on it in the future. I'm posting it now because it covers all the 'basics' required of a decent mappings editor.

features

As well as attempting to replicate the behaviour of SonMapEd, Flex has some additional features.

You can directly edit the tiles in the editor by right clicking on them in the tile list, mapping area or dplc list.

You have raw access to the mappings and DPLCs data to manually edit them. Manual tweaking of this now allows you to cut out a lot of superfluous DPLC requests for optimisation. This may be automated in future.

Mappings formats that SonMapEd has trouble with should run fine in Flex. SonMapEd has trouble with headers that are set to zero and frames that have unequal DPLC/Mapping quantities.

Mapping/DPLC output format is optimised.

Art compression is based on kensc.js. This is flamewing's C++ compression programs ported to javascript by FraGaG with emscripten and comes with the same optimisations that modern KENSC does.

Colour select will now only give a selection of Megadrive/Genesis compatible colours.

Since Flex is browser based, it is platform independent and open source.

Multiple sprite frames can be previewed as animations.

Guidelines can be used to line up sprites from different frames.

User guided tile importing mapping generation - see example video below



usage notes

Flex will save your current state when you leave the page and restore it when you return, much like SonMapEd. In addition, you can save and load your own states manually.

When importing sprites in PNG format, transparent tiles will be ignored and colours not found in palette line 0 will import as colour 0.

In the tile list; left click will alow you to choose a mapping piece to add to the current sprite, right click will allow you to edit the tile, and doubleclicking on it will allow you to delete the tile. Mapping and DPLC art pointers will be adjusted to account for the removal.

In the DPLC list; left clicking will allow you to add a mapping piece from the dplcpseudovram area without adding an extra DPLC request. Right clicking will again allow you to edit the tile.

In the mapping area, mousing over the pieces will show how the mappings are arranged, and clicking on one will select a piece. Double clicking in this area will deselect the active piece.

Here are the list of keyboard shortcuts I currently have;

[ and ] - traverse mapping frames
{ and } - swap mapping frames
ctrl+ins - add mapping frame
shift+ins - duplicate mapping frames
ctrl+del - delete mapping frame
del - delete mapping piece
space - select first mapping piece
esc - deselect mapping piece
< and > - cycle palette order left and right
h and v - mapping piece flipping transformations
p - mapping piece palette line modifier
f - priority flag
, and . - traverse mapping pieces
~ - remove last mapping import selection

pgup and pgdn - traverse 8 mapping frames
home - see first frame
end - see last frame

up/down/left/right - move mapping frame/piece by 1 pixel

Holding ctrl down before an arrow key will change the pixel movement count to 8.

alt+p - export to PNG
ctrl+m - change game format

shift+a - load art
shift+m - load mappings
shift+d - load dplc
shift+s - load state
shift+I - import art
shift+(0-3) - load palette line 0-3

Prepending the preceeding commands with alt will make them save the related assets instead.

backspace+u - delete all unmapped tiles
backspace+a - unload art
backspace+m - unload mappings
backspace+d - unloaddplcs
backspace+x - unload_all

If you want to define your own keyboard shortcuts, download a local copy and scroll to the bottom of keyboard.js to redefine the keys.

I don't use any media queries or anything and I haven't tested this extensively with different browsers/OSs. If you're having trouble, adjusting browser zoom may help.

I've included the level select cheat.

other notes

If it takes a long time to load the first time it's the compression library being cached, it's 3.5MB
If you want to generate mappings and dplcs that are compatible with SonMapEd, append ?sonmaped to flex's URL like so: http://snk.digibase.ca/flex/?sonmaped
If you're having display problems, make sure your browser is up to date and you've downloaded enough RAM. I have no idea if this works in IE or not.
The javascript console can be used to automate tasks for you. However, if there's something like this you use a lot let me know and I'll just add it as a feature.
Flex stores the current state in LocalStorage. If it's failing to reload correctly you might want to read more here.

future versions

Flex isn't finished yet, I only started working on this project very recently and there's a bunch of stuff I still need to/want to add. Here's my list; please let me know if you need any of these specifically or think of anything else you want and I'll try and do that first.

Arrange tiles by sprite order
Delete duplicate mapped tiles
Highlight active tiles
Visual DPLC editing
Ctrl+Z

Delete unused art function is inefficient and slow (needs a rewrite)
Virtual Keyboard
Ability to specify custom mapping formats (Rewrite of map.js will manipulate data in an intermediate format)
Ability to convert mapping files alone to mapping files with exact DPLCs and back again
Exporting and importing of sprite sheets instead of single sprites
DPLC auto optimisation
Sprite rotation
Sprite piece stacking order management

thanks to FraGag, flamewing, MainMemory, MarkeyJester, cwfluff and Xenowhirl for help with various aspects of development

This post has been edited by snkenjoi: 07 June 2015 - 03:19 PM

[Selbi]

As I said in the chat earlier, curse you for releasing this now after I did all the art importing with SonMapEd's for-years-unfinished importing tool. And then pat yourself on the shoulder for finally releasing an alternative to that tool! :D

I'm yet to fully explore all of its features, namely due to the fact that I currently don't have a lot of artistic stuff to do (once again because of SME), but I'll definitely get back to you once I learn about its nooks and crannies a little more.

For now, a few small requests I have:

• Since this thing now has the holy grail of HID embedded (read: mouse support), could you enhance that a little further? Specifically, deselecting the current piece and going back to the entire sprite when clicking anywhere else that's not a button.
  
• SME had a small dialogue window when pressing Ctrl+I, which displayed you how far off-center the sprite is. You don't need an entire popup, but having two small labels displaying that info could definitely come in handy.
  
• Custom hotkey support would be nice, just because I'm so used to SME that I don't want to relearn hotkeys.

Thanks a ton for having created this thing! Will come back to you soon.

[flamewing]

I have been waiting for Flex since you started working on it; I played with it a bit, and it is awesome. Nevertheless, as might be expected for the first version, it is a bit rough around the edges; things that Ubuntu was calling 'papercuts' a few years back: minor things that negatively impact usability. Specifically:

• |Guidelines: they can be immensely useful for aligning sprites. At present, they are a pain in the ass to use because you have to be constantly adding them. Consider this use case: you want to align 50 mapping frames. You go to the first one and add guidelines; then you go to the next one, and the guidelines are gone; if you go back to the first sprite, the guidelines are also gone. So you need to add guidelines, align one sprite, move to the next, add guidelines, align the sprite, and so on. Better would be persistent guidelines that stay until you remove them.
  
• The game type button would be better served being a dropdown instead.
  
• Palette loading is awesome: being able to load a palette to any line is great. Missing is the option to load the entire palette to the specified palette line; for example, if I have a palette that is comprised of two palette lines, I currently can't load it in full to lines 2-3, I can only load its first line to line 2.
  
• Multi-select: selecting multiple sprite pieces (either by crtl+click on each of by dragging a box around them all) so you can do things to all of the selected pieces at once, such as moving them all, changing their palette lines, or setting priority flags.
  
• Related to the above: being able to perform the operations listed on the piece menu on all sprite pieces of the current mapping frame when none are selected.
  
• A more visual means of editing DPLC would be ideal; especially since there is currently no way to know the starting tile number without counting it.[/url]
  
  When Flex matures more, here are some features from SonMapEd that would be awesome to have:
  [list]
• Being able to sort the art tiles by sprite order. This is extremely useful for optimizing DPLCs, as in many cases this allows combining several DPLC entries into one. Being able to manually sort sprites would also be great.
  
• Highlighting the art used by the currently selected sprite piece (or mapping frame, if no pieces are selected). Or the art used by the current DPLC entry, when editing DPLCs.

Anyways, that is what I have to suggest for now. Probably will have more ideas when I have more time to play with it, but it is excellent work so far.

This post has been edited by flamewing: 01 March 2015 - 07:34 PM

[KingofHarts]

A new challenger approaches... Awesome work on this one

[DalekSam]

If only this existed 5 years ago.

Or two years ago when I was redoing all the sprites for Thrash. Maybe I'll redo everything again now.

[snkenjoi]

Thanks for the feedback guys, here's an update.

Selbi, on 01 March 2015 - 06:44 PM, said:

Since this thing now has the holy grail of HID embedded (read: mouse support), could you enhance that a little further? Specifically, deselecting the current piece and going back to the entire sprite when clicking anywhere else that's not a button.

Aside from pressing Escape or using the button, you can now double click anywhere in that area to deselect a mapping piece. (I had trouble getting single click to work correctly, this should suffice)

Selbi, on 01 March 2015 - 06:44 PM, said:

SME had a small dialogue window when pressing Ctrl+I, which displayed you how far off-center the sprite is. You don't need an entire popup, but having two small labels displaying that info could definitely come in handy.

Setting the guidelines to 0,0 shows where the centre is and where the sprite is in relation to it.

Selbi, on 01 March 2015 - 06:44 PM, said:

Custom hotkey support would be nice, just because I'm so used to SME that I don't want to relearn hotkeys. />/>/>/>

I'd decided that Flex's shortcut keys will be canonical. However, if you want to define your own keyboard shortcuts download a local copy and scroll to the bottom of keyboard.js to redefine the keys.

flamewing, on 01 March 2015 - 07:34 PM, said:

Guidelines: they can be immensely useful for aligning sprites. At present, they are a pain in the ass to use because you have to be constantly adding them. Consider this use case: you want to align 50 mapping frames. You go to the first one and add guidelines; then you go to the next one, and the guidelines are gone; if you go back to the first sprite, the guidelines are also gone. So you need to add guidelines, align one sprite, move to the next, add guidelines, align the sprite, and so on. Better would be persistent guidelines that stay until you remove them.

Yeah, this was the behaviour I intended. Guidelines were the last thing I added and I didn't actually test the function before uploading. Fixed.

flamewing, on 01 March 2015 - 07:34 PM, said:

The game type button would be better served being a dropdown instead.

If/when I add more modes (SCD), I'll change it to a dropdown.

flamewing, on 01 March 2015 - 07:34 PM, said:

Palette loading is awesome: being able to load a palette to any line is great. Missing is the option to load the entire palette to the specified palette line; for example, if I have a palette that is comprised of two palette lines, I currently can't load it in full to lines 2-3, I can only load its first line to line 2.

I changed the way that palette loading works to account for this. When you select "All Lines" it will load however many lines the file is to palette line 0 onwards.

To load two palette lines to palette lines 2 and 3, shift them up to line 0 using the '<' keyboard shortcut twice and then '>' twice after loading to move them back again.

flamewing, on 01 March 2015 - 07:34 PM, said:

Multi-select: selecting multiple sprite pieces (either by crtl+click on each of by dragging a box around them all) so you can do things to all of the selected pieces at once, such as moving them all, changing their palette lines, or setting priority flags.
Related to the above: being able to perform the operations listed on the piece menu on all sprite pieces of the current mapping frame when none are selected.

Will add support for this next.

flamewing, on 01 March 2015 - 07:34 PM, said:

A more visual means of editing DPLC would be ideal; especially since there is currently no way to know the starting tile number without counting it.

Visual DPLC editing added to the todo list. I'll have to think of a nice interface. However, right clicking on the tile brings up the tile editor and gives the tile number in hex, if that was what you meant by not knowing the tile number.

Added the rest of the requests to the todo list - I wasn't aware of the use of tile ordering by sprite. Again, thanks for the feedback. I made this initially for myself but I'm glad others will find a use for it.

This post has been edited by snkenjoi: 02 March 2015 - 03:54 PM

[snkenjoi]

*boop*

Image importing improved, loosened pixel colour requirement from #RRGGBB to #R?G?B? by suggestion of Selbi and fixed an issue where pixels leaked on images with non-megadrive colours.

Added the ability to apply transformations to the entire sprite when no piece is selected. (flamewing)

Abstracted code in map.js to make adding modes easier in future.

Added a wiki page.

[Xeta]

This is just a screwaround, right? Or...

Anyway, this is really cool. I still have yet to thoroughly play with all the features, but I've checked it out, and it seems promising.

This post has been edited by Xeta: 03 March 2015 - 07:37 PM

[snkenjoi]

Xeta, on 03 March 2015 - 07:35 PM, said:

This is just a screwaround, right? Or...

It's for a hack.

Updates;

Added draggable selection thingy when importing art so you can do it less blindly. I'll probably reuse this element for other things.

Further code abstractions.

Added to GitHub

[Eduardo Knuckles]

I'm using a older resolution due to a old monitor and my Flex doesn't seem to be shown correctly. :/

[snkenjoi]

Eduardo Knuckles, on 07 March 2015 - 01:49 PM, said:

I'm using a older resolution due to a old monitor and my Flex doesn't seem to be shown correctly. :/

Yeah maybe this will help.

if you open your browser console window you can type "setzoom(100)" to change the zoom of the tiles/mappings/sprites/dplcs.

This along with the browsers built in zoom should allow you to view all parts of sprites on nearly any configuration.

I updated a few other bugs, mapping importing without DPLC was broken, I snapped the gridlines to sprite pixels instead of browser pixels, etc, etc.

Also got a funky URL: http://megadrive.science/

Thinking of adding a virtual keyboard, ASM support will be the next thing I write though.

Edit: Want to add save/load to google drive/dropbox.

This post has been edited by snkenjoi: 16 May 2015 - 05:56 AM

[snkenjoi]

Finally! full ASM import/output support added. The ASM parser I wrote should cover like 90% of cases but isn't perfect. If you can point out flaws I'll be happy to fix them.

Mappings imported from ASM and reexported to ASM will output with the same initial label from the original.

Raw mapping / DPLC viewing now displays in ASM format - you can now copy paste mappings from source to edit them on the fly without loading/saving any files in Flex.

Fixed a bug in non-SonMapEd output for mapping files with blank frames where the initial frame is not blank.

Flex pretty much has all the basics covered now. I'm going to have a think how I can expand the project in new useful ways.