Flex

Discussion in 'Utilities' started by snkenjoi, Mar 1, 2015.

  1. snkenjoi

    snkenjoi Well-Known Member Member

    Joined:
    Sep 6, 2008
    Messages:
    55
    <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

    http://www.youtube.com/watch?v=oXQVO76wdKQ

    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

    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.

    You can download a copy of Flex for offline use here (15/03/02). However, you won't get automatic updates.

    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.

    Support piece functions for full sprites
    .asm file parsing support (flex will only support .bin files currently)
    Arrange tiles by sprite order
    Highlight active tiles
    Visual DPLC editing
    Delete unused art function is inefficient and slow (needs a rewrite)
    Touchscreen/Tablet support
    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
     
    Last edited by a moderator: Mar 2, 2015
  2. Selbi

    Selbi Plug in, baby. Retired Staff

    Joined:
    Jul 20, 2008
    Messages:
    2,398
    Location:
    Northern Germany
    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. amphobius

    amphobius spreader of the pink text Member

    Joined:
    Feb 24, 2008
    Messages:
    971
    Location:
    United Kingdom
  4. ThomasThePencil

    ThomasThePencil resident psycho Member

    Joined:
    Jan 29, 2013
    Messages:
    911
    Location:
    the united states. where else?
    Well, this is gonna be fun to get used to, but it's nice to finally see an alternative to SonMapED. Even though I haven't had any problems with SonMapED, I'm definitely gonna use this thing more often.

    I congratulate you, snk.
     
  5. Stardust

    Stardust Well-Known Member Member

    Joined:
    Aug 20, 2014
    Messages:
    94
    Location:
    In your closet.
    It will be interesting to use this on my tablet, Can't wait to try it!
     
  6. warr1or2

    warr1or2 I AM CLG Member

    Joined:
    Apr 7, 2008
    Messages:
    389
    Location:
    Town Creek, AL
    does it do complete sprite sheet importing? gonna give it a go myself, maybe i can finally fix richter's rotations like in loops
     
  7. snkenjoi

    snkenjoi Well-Known Member Member

    Joined:
    Sep 6, 2008
    Messages:
    55
    Sheet importing is on the todo list
     
  8. ProjectFM

    ProjectFM Optimistic and self-dependent Member

    Joined:
    Oct 4, 2014
    Messages:
    800
    Location:
    Portland, Maine
    I can't get Sonic's mappings and pattern load cues to show up correctly. They just show up as a bunch of random tiles. I'm doing this with my Sonic 1 hack with Sonic 3 sprites. Using mappings for a sprite with no pattern load cues makes it not show up. I don't understand why it isn't working. I made sure it was set to Sonic 1.
     
    Last edited by a moderator: Mar 4, 2015
  9. snkenjoi

    snkenjoi Well-Known Member Member

    Joined:
    Sep 6, 2008
    Messages:
    55
    You might be looking at the DPLC viewer by accident? Try scrolling right or zooming out.
     
  10. Chaotix

    Chaotix Boredom Incarnate Member

    Joined:
    Aug 21, 2014
    Messages:
    190
    Location:
    Teufort
    Way to get Pro User within one thread, good job!

    This seems interesting! I can't try it out at the moment but if I'm working on a hack I'll try it out!
     
  11. OrdosAlpha

    OrdosAlpha RIGHT! Naebody move! Administrator

    Joined:
    Aug 5, 2007
    Messages:
    1,780
    Location:
    Glasgow, Scotland
    Does Flex support tilemap (title screens) editing? If not, do you plan to incorporate support for them later down the road?
     
  12. snkenjoi

    snkenjoi Well-Known Member Member

    Joined:
    Sep 6, 2008
    Messages:
    55
    ​Export to plane map is on the todo list.

    Flex now supports .asm input and output - should be better support than SonMapEd. Let me know if there's a file that doesn't work and I'll fix it.
     
  13. ProjectFM

    ProjectFM Optimistic and self-dependent Member

    Joined:
    Oct 4, 2014
    Messages:
    800
    Location:
    Portland, Maine
    Is there a link to the offline version that's at it's most updated state? I currently have the offline version of the first release but I want to be able to use ASM mappings and DPLC's. Also, the link for the offline version (which hasn't been updated since the first release) is broken.
     
  14. snkenjoi

    snkenjoi Well-Known Member Member

    Joined:
    Sep 6, 2008
    Messages:
    55
  15. warr1or2

    warr1or2 I AM CLG Member

    Joined:
    Apr 7, 2008
    Messages:
    389
    Location:
    Town Creek, AL
    Let's see if I can phrase this right.

    Can it repinpoint a certain pallet to another's? Say like you click on Sonic's shoe which is red. Let's say its at slot 6 & you repinpoint to load at slot 4 which is yellow. Edit this way?
     
  16. Crash

    Crash Well-Known Member Member

    Joined:
    Jul 15, 2010
    Messages:
    302
    Location:
    Australia
    Yeah, some way of remapping existing art to a different palette would be incredible
     
  17. rika_chou

    rika_chou Adopt Member

    Joined:
    Aug 11, 2007
    Messages:
    616
    Nineko's PalSwap does exactly that, though it would be nice to have it build in to a mappings editor.
     
  18. redhotsonic

    redhotsonic Also known as RHS Retired Staff

    Joined:
    Aug 10, 2007
    Messages:
    2,968
    Location:
    England
    Ha, might try that tool out.  I've always used a hex editor to change the palette around =P