MapMaker sneak preview 1

[gimbal]

Alright, I've been over the application a hundred times now trying to squize out those last few obvious bugs (there were still loads...) and to clean up some last visual issues. The app now runs normally on both my development machine and my laptop, so here it is: sneak preview 1.

http://www.insane-hq.org/~gimbal/mapmaker

Please read the included short tutorial before running it. You can report bugs and suggestions in this thread, through a PM or through msn/icq if you want, the details for those are in my eab profile.

Please try it out and let me know what you think!

[bippym]

Nice.... I'll give this a whirl once xmas is out of the way :D

[Zetr0]

Excelent Big G, i look forward to reviewing it.

[gimbal]

And I'm looking forward to your review, Big Z :)

(Big G, Big Z, we might as well get married now)

[Marcuz]

as long you don't reproduce yourselves... :D

[gimbal]

Aight you guys, you have obviously forgotten all about me *cries eyes out*

No matter, because sneak preview 2 is coming up and I must say it is going to KICK ASS. The editing has been given a major overhaul and now behaves so much more smoothly! Things that have changed are:

Icons are no longer restricted to 16*16, can be any dimension, as long as it is devidable by 8 (and they don't have to be square either). The minimum size is 8*8 though, which is the smallest unit the editor can handle.

Grid is also no longer composed of limiting cells, but more in what I call units. Each unit is 8*8 in size and this allows you to position icons much more freely. Because of this new setup combined with the flexible icons it is now very much possible to use the editor to create 2d platform levels and such, especially with the layer system that was already present. I can even see isometric graphics happening. That will require some creative icon drawing though :)

Because of the different sizes in the icons it is now very possible to overwrite parts of icons or even multiple icons with a single paint action. This is not allowed however, what happens is that when you overwrite a 64*64 icon with a 16*16 one, the entire 64*64 icon is replaced with the smaller icon (leaving empty space). If you want to overlap icons you have to use a seperate layer, but I find that only logical.

HOWEVER: the app now knows three different modes of editing.

- insert mode. In insert mode you cannot overwrite existing icons, you can only paste to empty units (this mode rules).

- overwrite mode. In overwrite mode you can insert and replace icons freely.

- erase mode. In erase mode all you can do is remove icons from the current layer.

Pressing the insert key will switch between insert/overwrite mode and when you press the delete key you activate the erase mode. When you press delete again you switch back to whatever mode you had active before.

This may sound out of the ordinary (except for people who love to work with the linux text editor VI/VIM), but I can honestly tell you that this system works! I tend to do my editing in insert mode so I cannot paint over existing icons by accident, and whenever I make a mistake I tap the delete key, erase the mistake and hit delete again to continue my painting.

So feel free to still try out sneak 1, but just realize that sneak 2 is going to be a whole lot different :) I have made a new screeny to show off the minor touch ups I have done to the gui as well. I'll link to it because it is a 1280 one.

http://www.insane-hq.org/~gimbal/mapmaker/screens/devscreen04.png

[Marcuz]

i have not forgotten you, in fact... *cough* agf site is on the way, please write a 'lil resume to be put online *cough*

[gimbal]

Eh? Did I miss a thread somewhere?

[Marcuz]

yes you have. or not. or you will when i'll post it. btw, i will probably tomorrow :) so please write a resume text for MapMaker for the page, and check your pm box

[gimbal]

more screenies with explanation:

Basic editor window with layer panel showing, also showing one of the few error messages that the app can throw at you:
http://www.insane-hq.org/~gimbal/mapmaker/screens/devscreen04.png

One of the many popup widgets, this one in particular can be used to edit an iconset:
http://www.insane-hq.org/~gimbal/mapmaker/screens/devscreen05.png

A snapshot demonstrating what happens in "overwrite" mode (note the OVR in the bottom right of the screen):
http://www.insane-hq.org/~gimbal/mapmaker/screens/devscreen06.png

A snapshot demonstrating the same as the previous snapshot, only now drawn to a higher layer (note the "draw to" box):
http://www.insane-hq.org/~gimbal/mapmaker/screens/devscreen07.png

[gimbal]

I have taken this project out of the fridge, basically because I can really use the program myself for my game development projects :)

I am currently rebuilding the program from the ground up (copying parts of the original code that do not need to be improved) and it is going quite fast. I have been spending the last two days reworking the KISS-proofness of the app and that has resulted in some changes:

- the structure used to be workspace - iconsets - maps - floors - layers. I removed the floors completely, you now only have maps with layers. If you want several floors, you will have to put them all in the same map. I think this is much easier than having them all seperately. I got this idea from the captive map generator information that was posted a few months ago.

- iconset management has yet again changed, for the better! An iconset is now represented in a tree structure, as these two screenshots demonstrate:

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen08.png

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen09.png

No more icky popups, you do all your editing directly from the main editing window. Not only that but icons are now grouped. You can add/remove/replace icons in a group, move icons between groups and you can even determine their order within a group manually should you be so inclined. And in a future release I am going to add drag & drop support (which is quite difficult to implement). The layers panel is going to get the same treatment.


(credit goes to the person who can name the game I took the shown tile from ;) )

[Thalion]

Nice to hear that work is going well :) I'm waitng for the final version. :)

[gimbal]

Really :s Somebody is waiting for this???

:)

[gimbal]

http://www.xs4all.nl/%7Egimbal/projects/mapmaker/screens/devscreen10.png

This shows the current state of the editor, the basic editing features are now implemented! You also see the layers panel, which works quite nicely. You can add new layers, remove them, rename them, clear them, make them visible/invisible and you can make a layer the active one (the one you draw to), all through right-click menus.

- A layer is visible when it has the eye icon in front of it
- A layer is invisible when it has no eye icon and the name is italic
- A layer is the active one when the name is bold

As a shortcut, you can make a layer visible/invisible by double clicking on the name. To make a layer active you can double click on it while holding down CTRL. It works quite nicely I can say :)

Next step: implement undo/redo (copy from old code) and implement export to PNG!

Also, the project page can be found here for all the old screenshots (you can see some evolution in them :) ). Also there is a link to the TODO page, should anyone have ideas that I haven't thought about yet.

http://www.xs4all.nl/~gimbal/projects/mapmaker.htm

[gimbal]

And one last update for today (or the first actually, depending on your point of view...). I wouldn't spam, but I am proud of my work ;)

I just finished and tested the plugin system for the app. I was working on the PNG exporter and I thought to do it right from the start and implement it as a plugin, giving possibility to add more plugins. These plugins are specifically aimed at creating output files in any format you want. MapMaker loads these plugins during runtime (using some funky advanced Java trickery), meaning that new output formats can be added to the app without the need to change a single line of code of the original program, nor does any kind of configuration file have to be changed. You just stick your plugin in the 'plugins' directory and run the app. The only thing you do need... is knowledge of java programming to write and build the plugin ;) A tutorial shall be part of the final release package, plus the source code for any exporters I write myself to learn the tricks from.

The plugins themselves are invoked from within the application through this simple dialog:

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen11.png

MapMaker takes care of all the ugly details (like creating a directory if it does not exist yet, checking if a file is going to be overwritten, etc.) so the plugin itself only has to deal with generating the output.

[Thalion]

Nice Nice Nice. :great From what i see it will be a nice and easy working with it.

[girv]

Does this output just PNG files or some sort of map data file as well ?

[gimbal]

This plugin outputs only PNG's (I just made it possibly to export a workspace as well, which in the case of the PNG plugin means that all maps in the workspace are exported to a seperate PNG), but a plugin can be written to generate any kind of output file (or files) you want.

In the end it is going to be possible to tag meta data to the icons you paint (meta data = generic information that you define yourself), which can then be taken by the plugins and converted into binary game map data. Near complete flexibility with a simple and fast user interface is what I aim for, I want this tool to be used not only to draw maps for reference and HOL purposes, but also be the editor for games.

And now I'm going loose with the plugins, I have many more ideas, such as import plugins to import maps and whole workspaces, and plugins that deal with iconsets. I want a function that can import GfxRip spritesheets for example, I can hard-code it into the program, or I can make it plugin based... the choice is very easy now I actually have my flexible plugin system :)

Undo/redo is also implemented by the way, so I may introduce the first alpha version shortly, after some more testing.

[girv]

You should check out:
http://www.tilemap.co.uk
http://www.alienfactory.co.uk/javamappy/

[gimbal]

I have seen some existing map editors, but they always work exactly like I don't want it. Either the GUI is crude, the program is full of bugs or the features are too limited.

I do like the isometric editor built into "Mappy" though, I might think about adding an isometric view myself. With the help of OpenGL it shouldn't be too hard.

[Thalion]

I have seen some existing map editors, but they always work exactly like I don't want it. Either the GUI is crude, the program is full of bugs or the features are too limited.

I do like the isometric editor built into "Mappy" though, I might think about adding an isometric view myself. With the help of OpenGL it shouldn't be too hard.

I like your attitude. :D If you need some testers later on i would be willing to help you. :)

[gimbal]

thou shalt be calleth upon ;)

I couldn't resist and I am working on the spritesheet importer. It makes it more easy to test also because you can quickly generate a full iconset to play around with, enough spritesheets floating around this forum :)

Also, I updated the last screenshot so it reflects the current state. Plugins can now give a description to MapMaker, which it will display in the description box. That way you can have a basic understanding of what the plugin exactly does.

[Joe Maroni]

any news ???

i hope to see a nice tool to create maps for games...:)

[gimbal]

Wow, it is quite a difference to be doing something that is apparently in demand. But give me a little time, I'm a Java dork, but I'm not THAT fast! ;)

Here, to prove I'm not sitting still, here is a screenshot of the icon importer, in this case configured to import a spritesheet:

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen12.png

I am going to write two or three different versions of the plugin. This one take a spritesheet with sprites of equal size. You define the size of the sprites/tiles and the amount of pixels between them horizontally and vertically, then the importer will split the spritesheet into icons, adding them to the temporary group that you specify (so you can move the icons to the proper groups afterwards). You also specify which color is used as the transparent color, so MapMaker can turn those pixels into true transparent pixels. By default I picked the purple/pink color that I see in all spritesheets in the 'sprites' project (255,0,255). When you click the colored square you get a second popup allowing you to specify the RGB values.

The second version of the plugin will take spritesheets also, but in stead of dimensions the window will allow you to specify a color of the borders around the tiles. This plugin allows a spritesheet to have sprites / tiles of different sizes.

I will probably also have to write a third implementation that will show the actual spritesheet, and then you can select icons within it by simply clicking them, allowing you to make adjustments to the selection rectangles. This one will be the hardest to implement, but probably the easiest to use.

[Thalion]

Wow how comfy. :shocked

[gimbal]

Well I found another major design flaw that I am fixing... the spritesheet importer (the first version) is working fine... but I came to realize that for a lot of games the amount of sprites/tiles could be well over 400. For example cannon fodder has 400+ unique ground tiles, PER world (jungle, arctic, etc). Even though a separate iconset can be created for each world, that is still 400+ icons in each one. It would be INSANE to put that amount in a tree structure and still be usable! Argh!

So, back to the drawing board. Now I have come up with a design that seems to scream YOU ARE RIGHT! The iconset is no longer in a sidepanel, but it is moved to an icon browser window.

- icon groups are seperated under different tabs

- the icons per group are in a grid of at most 8 columns and as many rows as are needed, in a scrollable area. The maximum size of an icon in this view is 64*64 pixels, larger icons are scaled down. This means no more icon names, you see the icons themselves only (picture having to rename 400 icons after a spritesheet import...).

- you can click icons to select/deselect them. You can perform actions (remove icons, move to group, add to favorites) on a whole selected batch.

- double clicking an icon makes it the active drawing icon.

- right clicking gives a popup menu giving you all options (select all, deselect all, rename iconset, add group, rename group, remove group, add icons, import spritesheet, remove icon(s), move icon(s) to group, replace icon, add to favorites)

A window has the advantage that you can keep it open while drawing. To make working with 400+ icons a little easier however, I am also going to add a 'favorites' side panel where you can freely add icons to from any group. This allows you to simply add the icons you use the most and have them available directly from the editing window.

I am working on it now, screenshots pending.

[Shoonay]

Cool, I hope it'll be like drawing in Deluxe Paint IV for the first time - nice and easy :)

[gimbal]

Screenshot of the (fully functional) icon browser:

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen13.png

Clean, simple, easy to use and most importantly it is never in the way because you can do with it what you want (hide,minimize). I bound the quick-key combo CTRL+B (b = browser) to this window to either hide or show it. And of course the application remembers the state of this window when you close the application (if the window was shown, what tab you had selected, the size and position of the window).

And now step 2: the favorites sidepanel.

[gimbal]

I updated the last screenshot because I just HAD to show off the fine results of importing a cannon fodder tilesheet ;) I realize that I need to fix two more things:

- make the number of columns in the icon window depend on the maximum width of the icons in stead of a fixed amount of maximum columns (12 at the moment, because 12 * 64 is closest to 800, the maximum amount of pixels I want to use). In the above screenshot you can see that the space is not used optimally yet, I need to make it a little smarter still.

- when performing a spritesheet import, I need to do the first 10 icons and then show that to the user so he can see if the import settings are correct or not.


Other things I added:

- a plugin manager window through which you can add and immediately activate plugins. I am working on making it possible to replace and remove plugins as well, but that requires more high level Java hacking.

- a history sidepanel that shows the editing history. I looked closely at photoshop for this one; a small arrow (that I even brutally stole from Photoshop CS2, the eye icon the layers panel might also seem a bit familiar to some of you) shows where you are in the history. When you undo/redo edits, the arrow will move up and down the list.

And also a list of bugfixes / added sanity checks. I am currently working hard to make the app alpha ready, and it will be as soon as I cannot find any more obvious bugs myself.

[gimbal]

Huh! I changed the spacing of the iconset window according to what I described in the previous post... and check out the result:

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen14.png

All of a sudden there is order in the chaos! It must be fate.

[Marcuz]

greatness!

[gimbal]

Okay, I have finished the icon favorites side panel. I am going to implement the growing and shrinking of a map, and after that I am not going to add new features anymore in this release, I am going to strictly concentrate on bugfixing and solving gui-glitches (not that I know of any), after which I will upload the first alpha release. So it should be soon.


For the next alpha release I am going to work on three major issues:

- you can only use one iconset in a map. This is bullshit, you should be able to select any icon from any iconset. From the icon browser you will get a combo box with all the iconsets and you can select one freely.

- icons are strictly rectangular at the moment. If an icon has transparent edges, the program should ignore those transparent areas and allow you to paint other icons over them.

- Icon "presets". It will be possible to merge several icons into one so you can paint them as if they are one large icon (but in effect you will still be painting separate icons, only multiple in one click). For example in the cannon fodder spritesheet above the house is separated into 11 different tiles, but you will always want to paint them in one go. This will also allow the creation of easy ground / water templates so you can paint large areas at once. This is where the previous point about transparent areas plays a major role.

[Thalion]

waiting for the first release to test. :)

[dlfrsilver]

yay it's time to rip some coin op games with the right palettes, and put that
back the miggy yahoo ^^ !

[gimbal]

well I squashed around 25 major bugs and I further improved the flexibility of the program (most of all you can undo/redo a lot more things now), plus the program now has a nifty help system built in which is especially useful when you just get to know the program. Every component, window and dialog of the program has a question mark icon that you can click to bring up the help page about that specific component.

I am feeling highly confident now that the program will be stable for testing... but I am going to be unavailable next week because of my girlfriend coming to visit me from Spain, TOMORROW :) :) :) So I will upload the alpha 1 release the week after that. No offense, but the last thing I will be thinking about starting from tomorrow is touching a computer ;)

edit: well the least I can do is show off some of the last screenshots.

http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen15.png
http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen16.png
http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen17.png
http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen18.png
http://www.xs4all.nl/~gimbal/projects/mapmaker/screens/devscreen19.png

[girv]

Looking forward to it :great

Just out of curiosity, what will you be thinking of touching ? ;);)

[dlfrsilver]

ahahah lol !!!! The thing MOST MEN on the earth love to touch ;)
hehehe, we just can't plague him for that, right Girv ? ;)

[Shoonay]

@gimb: but, if you'd released it now, we would have time to do some serious beta-testing and prepeared a HUGE bugreport ready for your comeback :D

PS: Have fun, matey! :cheese

[Thalion]

:laughing:laughing At least he is touching his Amiga. :laughing

[gimbal]

At least he is touching his Amiga.


Ha! Thumbs up for that one, very clever :) :)


but, if you'd released it now, we would have time to do some serious beta-testing and prepeared a HUGE bugreport ready for your comeback


Unfortunately my list of bugs to fix is not empty yet ;) You have no idea how many stupid scenarios I have to take care of. For example: I actually had to write a check to see if the icon you are painting is not larger than the map, or else bad things are going to happen (drawing the cursor out of boundaries of the map for example, which means I am writing into memory that does not belong to my program)... an incredibly stupid and silly and rare situation, but it MIGHT just happen that someone has an icon that is 256*256 pixels and wants to paint it in a map that is smaller :s So I had to fix that by not allowing you to select an icon that is larger than the map itself, you will get an error notice when it happens.

And now I am getting some sleep, because in 3.5 hours I have to call my "Amiga" out of bed, and 2 hours later I have to get out of bed myself to start the long journey to the airport ;)

(I live in the middle of nowhere and I am a student, so why would I need a car, public transportation is free. But it does mean I have to travel 15 minutes by bus, 30 minutes by subway and another 50 minutes by train to get to the Amsterdam airport, excluding waiting times).

[gimbal]

It is looking really great, I cannot make the program do anything bad anymore! I am going to test everything one more time from scratch (toss everything and start from an empty window) and if I cannot make the program misbehave even then, I am uploading the beta 1 tomorrow. I will create a new thread for it.

[gimbal]

Well it is not happening today, but the reason is not new bugs but exceptionally good weather ;) Not that I like sitting out in the sun, in stead I jogged myself nearly to death and am now too exhausted to do any final testing :)

edit:

well I may be too tired for testing, but I am never too tired for development. I am still not happy with the way you could select icons to paint, it is still to cumbersome. Either:

- Open / go to icon browser, click icon to paint, go to main window and start painting

or:

- add icons you use a lot to the favorites panel, select icon in the favorites panel and start painting

or:

- use the eyedropper mode to select an icon to paint in the edit area

that step, selecting an icon (meaning move the mouse and click it) to paint, is what makes it irritating because you are at the least unnecessarily moving the mouse too much, but you may even have to go to a different window first and then back. If you want to rapidly paint several different icons it is a major bother even. The eyedropper selection is a good solution but it is not always available. So I did one really simple change: with the scrollwheel you can now quickly cycle through your favorite icons. Selecting icons can now be done with the mouse without having to move or click it, which is a major, major, major improvement. What you lose? scrolling up and down in the edit area with the mousewheel, big deal!