JFMEditor

posted in Beals Software
Published October 14, 2010
Advertisement
I don't have much to report as I've been working my butt off to get this editor finished. Kind of makes me sad to see that I've only knocked two things off of my list, but the map editor was a big one (makes up about a third of the whole project.) I also took the time to separate one of the controls, which I've written twice already for this project and would have needed to at least one more time, into it's own little UserControl.

I ran into a few problems (nothing major really.) Starting out I wasn't happy with the main form's layout. On top of that, I was going at it like I was making a "game maker" instead of a map editor (well, it's a little more than a map editor, but it's not a game maker.)

The only other issue I've run into so far was not having things figured out. None of the systems were nailed down (animations, maps, brushes, etc.) I had ideas and a set of interfaces I was using when working on the engine.

Once I got into making the editor, I had to:
+ Rewrite the terrain system to separate collision data from cell data.
+ Rewrite the animation system to support per-frame collision boxes (which was actually a waste of time; way to go me [wink].)
+ Rewrite the entire rendering portion of the map editor to use SlimDX because it was too slow.
+ Refactor the map editor's mouse event code several times to add support for new tool types (brush, then flood-fill, then replace-all, and finally collision.

Anyway, picture barrage time!


Not much going on here. You have the File menu with New Map, Save Map, Load Map, Close Map, and Exit. Then you have the Tools menu with Import Brushes. Clicking New Map gives you...


This is a simple prompt. You have the top text-box which you must enter a valid name into (valid meaning anything lol; it just can't be blank.) Below that you have the size entry; this might get changed. You have to enter 3 values, separated by commas (Width,Height,Depth.) Then at last you have the cell-scale (or tile-size; whatever you want to call it.) Clicking accepts brings you up to...


You have your map items on the left which lists out your layers. You edit a layer by selecting it. The map editor only renders up to the selected layer. This will look different in the end; above map_name will be a list of the available animations in the working directory. Also, I'm contemplating removing the layers from here and adding them to a separate list-view below, where you can toggle the view of each layer.

On your right you have your brushes (the black one is the "blank" brush; It's always there) on the brushes tab. On the objects tab will be a listview containing all of the objects available in the working directory. You'll use this to place objects on the map. Clicking Tools => Import Brushes will pop up...


This is where the idea for my new UserControl popped up; it's the control with the tiles in it (I wrote the code for this dialog twice before making the control.) I've named it "SelectionPanel" as it allows you to select part(s) of the image. At the moment it has three states: free-form, grid, and grid+multi-select. In free-form you can select any part of the image. In grid it gets snapped to the grid using the properties on the right (the property grid isn't part of it; those are just the grid options.) And in grid+multi-select you click on tiles to select them. Clicking and dragging will toggle them on/off (each tile can only be toggled once per mouse-down/up pair.)

Anyway, this is how you import brushes. You select an image via the "..." button. Then you set the necessary options for selecting from a grid or just use free-form. For this image, I needed a cell-padding of (1,1,1,1) because each cell has a white border around it. Then I had to use an image-padding of (1,1,1,1) because the whole image has a border around it.
The context-menu for it is setup with Select All, Select None, and Scan for Empty Tiles. The last one takes a second, but it goes through each of your selection and removes any tiles that are either completely transparent or all the same exact color (best used when you select all first. For this tileset the image has been resized to 1024x1024, so it a TON of empty tiles.) If you click accept you end up with...


Well, this is a little further ahead. I used the gold tile (bottom left) and drew an outline, then used the flood-fill to fill the center with the blue-glassy looking tile. Then I turned on collision via the brick wall button and made all of the gold blocks solid (setting collision has the same mechanics as selecting from above; each tile can only be toggled once per mouse-down/up pair.) I use line-plotting for movement, so if the cursor moves a lot in one move you don't end up with spaces.


Ok, there's not actually any way to bring up the animation editor from the UI yet. This is the second place SelectionPanel came about (which would have been the 3rd time writing the code.) The gray box is where each frame is displayed and I needed to be able to select a rectangle on the frame for the collision box. So, I plopped in a SelectionPanel, lock it to free-form and I'm good to go.
This one is kind of boring, so we right-click the white box on the left (in the Animation groupbox) and click Add Frame(s)...


This may look familiar as it's the same dialog used to import brushes. I also took that dialog and made it more generic so that I could reuse it. It's the same exact thing, so no point in duplicating code. In this image the character sheet has no borders, so I leave the padding at 0, but set the cellsize to 34,42. Click accept and...


viola! We have a new animation named redape_walk with a frame-step of 0.125 seconds. Now for the rest of the dialog. You can see I've selected the first frame's collision box. I got it the best I could with the mouse and then I fine-tuned it with the NumericUpDown controls at the bottom. The checkbox in the middle (labeled "Inherit From Previous Frame" make it so I don't have to set the same collision-box for n amount of frames. It's also nice because you can check it and then uncheck it and you've got a copy of the collision box from the previous frame (which you can then modify.) Clicking preview takes us to the final dialog...


Nice and simple; the animation loops in a normal animation fashion (0,1,2,0,1,2.) Which reminds me that I need to add support for the other animation types (PingPong and None.) Anyway, you have 5 buttons: first frame, previous frame, pause/play, next frame, last frame. The two buttons on the left and the two on the right are disabled while the animation is playing. Nothing spectacular going on.

With the work done tonight my current status is:
Map Editor -
+ Stage 1: 100%
+ Stage 2: 0%
+ + Adds support for object placement

Animation Editor - 98%
+ Needs support for other Loopstyles

Object Editor - 0%

Saving/Loading - 0%

Editor Backend - 0%
(Working directory, saving settings, etc.)

I feel like I'm missing something; I'll figure it out. I'm going to start working on the object editor tomorrow and I'm really hoping that I can finish it, but I have other things to tend to first. Time for bed!
Previous Entry Minor updates
Next Entry Untitled
0 likes 0 comments

Comments

Nobody has left a comment. You can be the first!
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement
Advertisement