bmp+gpl2jm - convert images to RotMG maps



  • https://saiapatsu.github.io/jsonmap/index.html

    I've always felt like the game's map editor (even the one in prod) is unwieldy garbage, so I made this to allow using a drawing program to create a map.

    This utility accepts images (png, bmp, gif) and corresponding GIMP palettes and assembles them into a map format usable by the game.

    It is not a replacement for the map editor - if you're making something small or aren't randomly generating anything, then this is more trouble than just drawing it in the editor.

    Screenshot as of 30. july 2017:
    Screenshot

    Usage

    1. Get the tiles, objects, monsters, regions etc. you want to work with.
      Go to the map editor and place down the tiles you're going to use.

      Save the map. Now open it in Notepad. This is what mine looks like:
    {"width":2,"height":4,"dict":[{"ground":"Blue Closed"},{"ground":"Blue Quad"},{"objs":[{"id":"Blue Wall"}]},{"objs":[{"id":"Blue Torch Wall"}]},{"regions":[{"id":"Spawn"}]},{"regions":[{"id":"Arena Edge Spawn"}]},{"regions":[{"id":"Arena Central Spawn"}]},{}],"data":"eNpjYGBgZGBiYGZgYWBlYGNgBwAAnAAd"}
    
    1. Create a palette with each tile.
      If you use GIMP, this is simple. Create a new palette. Then, for each tile, pick a pleasant color that resembles the tile and just pull it into the palette editor window. You'll usually want to tell at a glance which pixel is what tile, so pick it carefully.

      If you use anything but GIMP, you need to create the palette with this application's own palette editor. Its usability currently depends on how your browser handles color pickers.
    2. Define each tile
      This is what you did step #1 for. Copy the contents of each entry in the dictionary ("dict": [etc.]) to the name of each color. Ignore the "{}" entry, that's an empty tile.
    3. Draw an image that uses these colors
      If you use a color that is not in the palette, it gets removed when converting to a map. It's like pixel art, so do not use anything that creates transparency.
      Layers are supported. You can put grounds on one layer, objects on another, regions on the third, and then save them separately.
      Avoid drawing maps larger than 512x512 because the map editor likely won't load them. If you want to make a new realm map for example, you will have to go in blind and hope there's no errors, because you can't look at it in the editor!
      If your drawing software gives you the option, save the image with gamma! This comes from personal experience.
    4. Convert to a map
      My files so far
      Drag and drop to or open your image layers and palette with the file input widget. If you used GIMP, then the palette is located in the %userprofile%.gimp-*\palettes, where * is your version.
      Once you've specified all the images and palettes, press the "Render map" button and then the "Save map" button to download it. You now have a map!

    Issues

    • May cause browser instability even after closing the page (shit code)
    • May not be compatible with all browsers

    Plans

    • Make it look good
    • Avoid horrible errors such as putting 2 grounds on one tile
    • Preview the palettes in a nicer way, enable editing
    • Combined preview of the images

    Credits :ok_hand:


  • Closed Tester

    @Warp said in bmp+gpl2jm - convert images to RotMG maps:

    https://saiapatsu.github.io/jsonmap.html

    This actually seems really nice congrats warp!

    I don't know if you use mpgh but mind me releasing this (and giving full proper credits to you of course) because some people might find use for it over there?

    If you do use it though might aswell make a post yourself.


  • 27

    This post is deleted!

  • 27

    @Warp said in bmp+gpl2jm - convert images to RotMG maps:

    https://saiapatsu.github.io/jsonmap.html

    I've always felt like the game's map editor (even the one in prod) is unwieldy garbage, so I made this to allow using a drawing program to create a map.

    This utility accepts images (png, bmp, gif) and corresponding GIMP palettes and assembles them into a map format usable by the game.

    It is not a replacement for the map editor - if you're making something small or aren't randomly generating anything, then this is more trouble than just drawing it in the editor.

    Screenshot

    Usage

    1. Get the tiles, objects, monsters, regions etc. you want to work with.
      Go to the map editor and place down the tiles you're going to use.

      Save the map. Now open it in Notepad. This is what mine looks like:
    {"width":6,"height":3,"dict":[{"ground":"Space"},{"ground":"Blue Grass"},{"ground":"Castle Stone Floor Tile Dark"},{"ground":"Castle Stone Floor Tile"},{"ground":"Purple Stone"},{"ground":"Cracked Purple Stone"},{"objs":[{"id":"Blue Pillar"}]},{},{"regions":[{"id":"Spawn"}]},{"regions":[{"id":"Arena Edge Spawn"}]},{"regions":[{"id":"Arena Central Spawn"}]}],"data":"eNpjYGBgZGBiYGZgYWBlYGNgh0MOBk4GLggbAAXOAGk="}
    
    1. Create a palette with each tile.
      If you use GIMP, this is simple. Create a new palette. Then, for each tile, pick a pleasant color that resembles the tile and just pull it into the palette editor window. You'll usually want to tell at a glance which pixel is what tile, so pick it carefully.

      If you use anything but GIMP, you need to get your hands dirty. Copy the example palette below and replace the "255 255 255" with the rgb of your color, adding more if needed, preferably while performing the next step so you don't confuse anything. The numbers must be separated by at least one space. Do not remove the empty line at the very end!
    GIMP Palette
    #
    255 255 255	name1
    255 255 255	name2
    
    
    1. Define each tile
      This is what you did step #1 for. Copy the contents of each entry in the dictionary ("dict": [etc.]) to the name of each color. Ignore the "{}" entry, that's an empty tile and all invalid/fully transparent pixels get converted to that. The map I created earlier would become this:
    GIMP Palette
    #
      0   0   0	"ground":"Space"
     34  41  56	"ground":"Blue Grass"
     22  22  29	"ground":"Castle Stone Floor Tile Dark"
     79  79 104	"ground":"Castle Stone Floor Tile"
    106  97 117	"ground":"Purple Stone"
     82  75  91	"ground":"Cracked Purple Stone"
     66 100 127	"objs":[{"id":"Blue Pillar"}]
     66 127  67	"regions":[{"id":"Spawn"}]
    127 108  66	"regions":[{"id":"Arena Edge Spawn"}]
    127  66  66	"regions":[{"id":"Arena Central Spawn"}]
    
    
    1. Draw an image that uses these colors
      If you use a color that is not in the palette, it gets removed when converting to a map. It's like pixel art, so do not use anything that creates transparency.
      Layers are supported. You can put grounds on one layer, objects on another, regions on the third, and then save them separately.
      Avoid drawing maps larger than 512x512 because the map editor likely won't load them. If you want to make a new realm map for example, you will have to go in blind and hope there's no errors, because you can't look at it in the editor!
    2. Convert to a map
      My files so far
      Drag and drop to or open your image layers and palettes with the file input thingies. If you used GIMP, then the palette is located in the %userprofile%.gimp-*\palettes, where * is your version.
      You don't need to put something in all 3 of them, though you most likely will.
      Once you've specified all the images and palettes, press the "OH YES" button and receive your map file in the text area next to that button. If you don't get anything meaningful there, open your web console (usually by pressing f12) and see what kind of exotic error there is.
      Copy the entire map file from the text area and replace the entire contents of the map file from step #1 with it, then save. Now load it in the map editor. You should now have a map that looks like what you painted.

    Plans

    • Make it look good
    • Make error messages visible outside the console
    • Add support for more layers, avoid horrible errors such as putting 2 grounds on one tile
    • covfefe

    Credits :ok_hand:

    @Burger said in bmp+gpl2jm - convert images to RotMG maps:

    @Warp said in bmp+gpl2jm - convert images to RotMG maps:

    https://saiapatsu.github.io/jsonmap.html

    I've always felt like the game's map editor (even the one in prod) is unwieldy garbage, so I made this to allow using a drawing program to create a map.

    This utility accepts images (png, bmp, gif) and corresponding GIMP palettes and assembles them into a map format usable by the game.

    It is not a replacement for the map editor - if you're making something small or aren't randomly generating anything, then this is more trouble than just drawing it in the editor.

    Screenshot

    Usage

    1. Get the tiles, objects, monsters, regions etc. you want to work with.
      Go to the map editor and place down the tiles you're going to use.

      Save the map. Now open it in Notepad. This is what mine looks like:
    {"width":6,"height":3,"dict":[{"ground":"Space"},{"ground":"Blue Grass"},{"ground":"Castle Stone Floor Tile Dark"},{"ground":"Castle Stone Floor Tile"},{"ground":"Purple Stone"},{"ground":"Cracked Purple Stone"},{"objs":[{"id":"Blue Pillar"}]},{},{"regions":[{"id":"Spawn"}]},{"regions":[{"id":"Arena Edge Spawn"}]},{"regions":[{"id":"Arena Central Spawn"}]}],"data":"eNpjYGBgZGBiYGZgYWBlYGNgh0MOBk4GLggbAAXOAGk="}
    
    1. Create a palette with each tile.
      If you use GIMP, this is simple. Create a new palette. Then, for each tile, pick a pleasant color that resembles the tile and just pull it into the palette editor window. You'll usually want to tell at a glance which pixel is what tile, so pick it carefully.

      If you use anything but GIMP, you need to get your hands dirty. Copy the example palette below and replace the "255 255 255" with the rgb of your color, adding more if needed, preferably while performing the next step so you don't confuse anything. The numbers must be separated by at least one space. Do not remove the empty line at the very end!
    GIMP Palette
    #
    255 255 255	name1
    255 255 255	name2
    
    
    1. Define each tile
      This is what you did step #1 for. Copy the contents of each entry in the dictionary ("dict": [etc.]) to the name of each color. Ignore the "{}" entry, that's an empty tile and all invalid/fully transparent pixels get converted to that. The map I created earlier would become this:
    GIMP Palette
    #
      0   0   0	"ground":"Space"
     34  41  56	"ground":"Blue Grass"
     22  22  29	"ground":"Castle Stone Floor Tile Dark"
     79  79 104	"ground":"Castle Stone Floor Tile"
    106  97 117	"ground":"Purple Stone"
     82  75  91	"ground":"Cracked Purple Stone"
     66 100 127	"objs":[{"id":"Blue Pillar"}]
     66 127  67	"regions":[{"id":"Spawn"}]
    127 108  66	"regions":[{"id":"Arena Edge Spawn"}]
    127  66  66	"regions":[{"id":"Arena Central Spawn"}]
    
    
    1. Draw an image that uses these colors
      If you use a color that is not in the palette, it gets removed when converting to a map. It's like pixel art, so do not use anything that creates transparency.
      Layers are supported. You can put grounds on one layer, objects on another, regions on the third, and then save them separately.
      Avoid drawing maps larger than 512x512 because the map editor likely won't load them. If you want to make a new realm map for example, you will have to go in blind and hope there's no errors, because you can't look at it in the editor!
    2. Convert to a map
      My files so far
      Drag and drop to or open your image layers and palettes with the file input thingies. If you used GIMP, then the palette is located in the %userprofile%.gimp-*\palettes, where * is your version.
      You don't need to put something in all 3 of them, though you most likely will.
      Once you've specified all the images and palettes, press the "OH YES" button and receive your map file in the text area next to that button. If you don't get anything meaningful there, open your web console (usually by pressing f12) and see what kind of exotic error there is.
      Copy the entire map file from the text area and replace the entire contents of the map file from step #1 with it, then save. Now load it in the map editor. You should now have a map that looks like what you painted.

    Plans

    • Make it look good
    • Make error messages visible outside the console
    • Add support for more layers, avoid horrible errors such as putting 2 grounds on one tile
    • covfefe

    Credits :ok_hand:

    This actually seems really nice congrats warp!

    I don't know if you use mpgh but mind me releasing this (and giving full proper credits to you of course) because some people might find use for it over there?

    If you do use it though might aswell make a post yourself.

    Sharing is caring


  • Closed Tester

    @Halloweenie You do know there's an edit button for that instead of just deleting the first post lmao?


  • 27

    This post is deleted!

  • 27

    @Burger said in bmp+gpl2jm - convert images to RotMG maps:

    @Halloweenie You do know there's an edit button for that instead of just deleting the first post lmao?

    Okay thanks


  • Closed Tester

    @Halloweenie Lolll pls


  • Creativity Cafe ☕

    @Warp I ... don't understand this at all.


  • Old Phags

    This looks confusing as fuck but also pretty cool.



  • Updated with a palette editor and a more usable file loading system. Now allows saving the map as a file.


Log in to reply
 

Looks like your connection to Nilly's Realm was lost, please wait while we try to reconnect.