Dev Blog
Hi, this is the Stranded III development blog (see also Forum Thread, Comment Thread).
Entry 108 - Editor Stuff: Transform, Outlines, Color Picker - May 22, 2022
Having a nice map editor in the game which allows you to - of course - easily create maps is super important to me. Therefore I've put a lot of time into the map editor recently. Here are some of the things I did.
Transform Gizmos
I modelled my own 3D transform gizmo meshes (yes, I'm talking about arrows and circles here) and programmed the logic which allows you to move, rotate and scale objects in the editor. Actually big parts (mainly the math) is "inspired by" (stolen) from existing projects on GitHub like pshtif/RuntimeTransformHandle. Thanks a lot for that!
You can move stuff. By default most objects are locked to the ground and they will stay there when you move them along the X- or Z-axis. If you however move them along the Y-axis (up/down), that "lock to terrain surface"-flag will be removed and you can move them to any height you want. There's also a button to toggle that ground lock behavior on and off per object.
Objects can also be rotated. Most objects will automatically align their rotation to the ground (if ground locking is enabled) so only manually rotating them around the Y-axis makes sense - at least if you want them to be still aligned to the ground properly. You can however freely rotate around all axes if you really want to.
Last but not least you can also scale things. This is even possible along individual axes like shown in the following Gif. You can also use a uniform scale along all axes to just make the whole thing bigger or smaller without skewing its proportions in weird ways. Actually that's probably what you'll want to do most of the time.
Selection Outlines
A small detail: I added fancy outlines to the editor. You can see them in the Gifs above. There's an outline for the currently selected object and another one for the object you currently hover. To achieve these fancy outlines I made use of the fantastic work by Ben Golus. Here's his nice article about that topic. His implementation looks really nice and is also quite flexible. One cool thing is that you can pass in any number of render components (visible objects) which will then get one single combined outline.
Gotta pick 'em all! - Color Picker
Yet another thing for the editor is the color picker. I might also use it in-game if there's anything which requires/allows the player to choose a color. My color picker is a combination of the Adobe Photoshop color picker and the Microsoft Paint color picker (which is also the default Windows system color picker I guess).
Watch the color picker demo video @ YouTube
Choosing a color can be done in many different ways:
By entering red, green, blue and alpha (transparency) values (0-255) in the input fields
By entering an HTML/CSS-style hex color like #RRGGBB or #RGB or #RRGGBBAA
By sliding the red, green, blue and alpha sliders
By entering hue, saturation and brightness values (HSV)
By picking a hue from the hue bar (the colorful one on the right) and then adjusting saturation and value with the saturation & value picker (the big rectangle)
By choosing a color from the color palette (rectangles on the left)
All these methods can be mixed as you like. E.g. you could enter red, green and blue values and then adjust the saturation etc.
Another fancy feature is that you can also right click the colors in the color palette. If you do so the current color will be saved there. This way you can build your own palette. The little arrow on the top right allows you to restore the default color palette.
Currently this is limited to one palette. Maybe I'll add extra buttons to manually load/save different color palettes later.
Transform Gizmos
I modelled my own 3D transform gizmo meshes (yes, I'm talking about arrows and circles here) and programmed the logic which allows you to move, rotate and scale objects in the editor. Actually big parts (mainly the math) is "inspired by" (stolen) from existing projects on GitHub like pshtif/RuntimeTransformHandle. Thanks a lot for that!
You can move stuff. By default most objects are locked to the ground and they will stay there when you move them along the X- or Z-axis. If you however move them along the Y-axis (up/down), that "lock to terrain surface"-flag will be removed and you can move them to any height you want. There's also a button to toggle that ground lock behavior on and off per object.
Objects can also be rotated. Most objects will automatically align their rotation to the ground (if ground locking is enabled) so only manually rotating them around the Y-axis makes sense - at least if you want them to be still aligned to the ground properly. You can however freely rotate around all axes if you really want to.
Last but not least you can also scale things. This is even possible along individual axes like shown in the following Gif. You can also use a uniform scale along all axes to just make the whole thing bigger or smaller without skewing its proportions in weird ways. Actually that's probably what you'll want to do most of the time.
Selection Outlines
A small detail: I added fancy outlines to the editor. You can see them in the Gifs above. There's an outline for the currently selected object and another one for the object you currently hover. To achieve these fancy outlines I made use of the fantastic work by Ben Golus. Here's his nice article about that topic. His implementation looks really nice and is also quite flexible. One cool thing is that you can pass in any number of render components (visible objects) which will then get one single combined outline.
Gotta pick 'em all! - Color Picker
Yet another thing for the editor is the color picker. I might also use it in-game if there's anything which requires/allows the player to choose a color. My color picker is a combination of the Adobe Photoshop color picker and the Microsoft Paint color picker (which is also the default Windows system color picker I guess).
Watch the color picker demo video @ YouTubeChoosing a color can be done in many different ways:
By entering red, green, blue and alpha (transparency) values (0-255) in the input fields By entering an HTML/CSS-style hex color like #RRGGBB or #RGB or #RRGGBBAA By sliding the red, green, blue and alpha sliders By entering hue, saturation and brightness values (HSV) By picking a hue from the hue bar (the colorful one on the right) and then adjusting saturation and value with the saturation & value picker (the big rectangle) By choosing a color from the color palette (rectangles on the left)All these methods can be mixed as you like. E.g. you could enter red, green and blue values and then adjust the saturation etc.
Another fancy feature is that you can also right click the colors in the color palette. If you do so the current color will be saved there. This way you can build your own palette. The little arrow on the top right allows you to restore the default color palette.
Currently this is limited to one palette. Maybe I'll add extra buttons to manually load/save different color palettes later.