I was creating some 2.5D art for an game jam recently in a perspective similar to a 2D RPG like Zelda. Naturally my next step was that I started thinking about how you might recreate this style using a custom 3D modeling tool. Yes, another art tool design challenge. :-)
I’ve played with voxel editors in the past, but I’m not completely happy with the blocky results that they produce. So where's a quick and dirty minimalist 3D modeling tool design with the following goals:
- Enable artists to make beautiful 3D models that include curves, ramps, intersecting shapes, and other sophisticated elements.
- Make a 3D modeling tool that is as easy to use as a pixel art editor. In particular, I’ve realized that this editor can avoid a lot of the messiness that usually appears when you include 3D rotation.
Target styleI put together a set of 2D art for a future game jam. The resulting 3D modeler in this essay should be able to easily create everything in this image, plus a whole bunch more.
When making this art, it occured to me that there is a rather magical property of the traditional 2.5D view that I don't think has been well tapped before. Once you adopt a forced 2.5D perspective, most 3D primitives are possible to be represented in a 2D plane. This makes a ton of traditional 3D operations dramatically simpler. You can think of a 3D space being reduced to a couple of 2D controls
- Top Plane: The top of a cubic volume enclosing the primitive.
- Front Plane: The front of a cubic volume enclosing the primitive.
With these, you can do basic moving and scaling of the object. The trade off is that you lose rotation. My bet is that like voxel editing, you can lose rotation and still end up with a vast visual play space.
If you get fancy, you can flip an object 90 degrees forward so that:
- Front Plane: Extrusion, XY position
- Top Plane: Scale, XZ position
The basic flow of modeling
Here's what you do to make a model.
- Add primitives to an object
- Arrange (scale, position) and color them.
- Combine these tile-like objects together in a game to create complex scenes.
List of OperationsHere's the list of features that a simple prototype of the editor would support.
1. Add a primitive
You can add a primitive to the scene
- Arc (half cylinder)
- Ramp (NSEW variants)
Click on a primitive in the scene to select it.
- 6 dots appear
- The bottom 4 define the front plane.
- The top 4 define the top plane.
Grab the front face of a primitive to move in the X,Y plane
4. Scale in XY plane
Grab the corners of the front face of the primitive to scale it.
5. Extrude in Z
Grab back corners or edge of the primitive to extrude it.
6. Move in XZ plane
Grab the top of the primitive.
7. Select a color
Once you have selected a primitive, click on a color from the color palette to change the color.
ConstraintsThere are a variety of limitations enforced that make modeling far easier and closer to pixel art.
- Snapping: All operations snap to a 16x16x16 grid.
- Primitive budget: Each object is made up of a total of 32 primitives.
- No rotation of primitives. Again, this is a hard problem in 3D. So we avoid it.
- Limited colors: All primitives use the same 16 color palette. This allows us to appear to make complex objects out of multiple primitives by simply connecting simple shapes of the same color.
- Surface details are generated using other primitives. Primitives whose surfaces are coplanar are rendered cleanly as 2D textures. See bricks in the example above. Use creation order or order in the selection list to determine what shape is on top.
Bonus featuresThe above features are the minimal set. There are other features you could add to flesh out the tool.
- Selection list: A list of all 32 primitive in the object. Click on one to select that primitive. Thumbnails are a plus. Bonus points if you can rearrange these.
- Hiding/Showing primitives: There is an eye icon in the selection list next to each primitive and you can hide or show that.
- Rounded corners: Give the selected primitive rounded corners. These are in 1, 2, 3 or 4 grid width rounds.
- Flip Front / Top: Rotate the primitive forward or backwards 90 degrees. Example: A flat disc becomes a wheel.
- Cutter object: The selected primitive now subtracts from the solid instead of adding. This lets you cut holes.
- Textures: In addition to colors, you can specify some simple textures.
Special rendering tweaksThere is a reasonable chance that objects will look like rather ugly without the right rendering. Play with this till you get something that works. Here's what I take into account when drawing things manually.
- Parallel Light source (think sun) from the top so the front is in slight shade.
- Shadows on other objects. Slight ambient occlusion will tend to make the objects feel more connected.
- Shading objects darker near the bottom and lighter near the top help preserve a sense of depth.
Test casesMaking art tools without art samples is tricky. The following are test cases that you can try to replicate once you’ve built the basic tool.
If anyone makes a prototype, I'll link to it here.
*Update!* Angry Octopus has a prototype. (The more the merrier, so keep making 'em.)
- Working Prototype: http://www.angryoctopus.co.nz/
All the best,