don't click here

Flex (desktop versions now available)

Discussion in 'Engineering & Reverse Engineering' started by snkenjoi, Mar 1, 2015.

  1. snkenjoi


    Tech Member


    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.


    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 ] (or shift+left/right) - 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.

    ctrl+alt+u - delete all unmapped tiles
    ctrl+alt+a - unload art
    ctrl+alt+m - unload mappings
    ctrl+alt+d - unload dplcs
    ctrl+alt+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:
    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

    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
  2. Selbi


    The Euphonic Mess Member
    Northern Germany
    Sonic ERaZor
    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. :v:
    Thanks a ton for having created this thing! Will come back to you soon.
  3. flamewing


    Emerald Hunter Tech Member
    Sonic Classic Heroes; Sonic 2 Special Stage Editor; Sonic 3&K Heroes (on hold)
    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:
      • 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.
  4. RetroKoH


    Project Sonic 8x16
    A new challenger approaches... :) Awesome work on this one
  5. amphobius


    doing more important things with my life Member
    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.
  6. snkenjoi


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

    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)

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

    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.

    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.

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

    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.

    Will add support for this next.

    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.
  7. snkenjoi


    Tech Member

    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.
  8. AkumaYin



    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.
  9. snkenjoi


    Tech Member
    It's for a hack.


    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
  10. Eduardo Knuckles

    Eduardo Knuckles

    Not a loved one, but the most hated person. Banned
    Someplace somewhere
    Project S.A.M.G.
    I'm using a older resolution due to a old monitor and my Flex doesn't seem to be shown correctly. :/
  11. snkenjoi


    Tech Member
    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:

    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.
  12. snkenjoi


    Tech Member
    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.
  13. snkenjoi


    Tech Member