• Welcome to Final Fantasy Hacktics. Please login or sign up.
 
March 19, 2024, 04:09:09 am

News:

Use of ePSXe before 2.0 is highly discouraged. Mednafen, RetroArch, and Duckstation are recommended for playing/testing, pSX is recommended for debugging.


Camera-Locked Map Proof of Concept

Started by lirmont, September 27, 2013, 09:37:31 am

lirmont

A short foreword, this is a map created by Mobius for one of his projects. The texture for this map is special because it only exists properly in one view (re: the camera's view).

Front View (3d render at a different size than the source image)



Other views: left, back, right.


Geometry



UV Map (Texture Coordination)



--

Anyway, long story short, if your map texture is isometric, it's a trivial process to make a 3d model to act as a proxy over your drawing. This becomes the map, and that map is usable just like any other map (except you should lock the camera's view by ignoring the key presses for rotate map and changing eye level).

This took me about 3 hours to finish, and this was the first time I'd ever tried to do something like this. The core concept is unwrapping the map (automatically) by projecting coordinates from the camera's view. Set up your camera, use the texture as a background image, make the map proxy over it. Unwrap the map. Add a material that uses the texture on the UV map. You're done.

Cheetah

Wow this is incredible, how did I never see this thread before.

Where can I find more information on your map designing tools?
Current Projects:

lirmont

99% of the work is done in a combination of Blender and the graphics editing program of your choice. You can find Blender here: http://www.blender.org/

It doesn't matter if you use blender specifically, but that's the only 3d modeling program I can help out with if you get stuck.

If you don't want to do the boring, repetitive legwork after the fact to get the map internet-ready, you should follow the actual dimensions of an FFT map (how they export from map2gl) or this tutorial: http://ffhacktics.com/smf/index.php?topic=7153.0

That ensures my control panel application can read all the geometry and figure out the movement squares and slopes.

Cheetah

Interesting, I will have to look into blender. However, let me explain my situation and perhaps you will have some ideas on solutions or resources because I haven't had much luck.

So Mobius and I have continued to work on our "2D" SRPG indie game concept. I was starting to tinker with some isometric map designs in photoshop. How I do this is make isometric blocks and other standard shapes and then put them together like legos. See the attached image. The idea is that these simple mockups are easy to edit and test as 2D plains, and then when we have a design we like Mobius can just do the full pixeling over it. This works fine but it is a little slow and we loss out on all the potential of having it being actually 3D as we will need that three-dimensional data later on. So I started searching for isometric graphics tools and found this:


Pretty sweet, but it appears to be a dead project. Any thoughts? What I really want is a tool that will allow me to make simple isometric mockups by placing a variety of isometric blocks/shapes in a 3D space. For my purposes, I mostly need to export a nice clean image and also keep all the 3D data to correctly place characters on the map later (along with attack trajectories and other factors). This could also be used for more traditional FFT 3D maps as you would simply keep all the 3D data and then apply textures to the blocks. Though there are additional factors for functional 3D maps as you well know. Also, the blocks should be able to intelligently resize the size of the blocks/objects; so that it would be more flexible for various users and games. Just saying, it would be a great easy to show off tool for our SRPG toolkit.

Alternatively I might need to look into using blender to do isometric work. See this link:
http://flarerpg.org/tutorials/isometric_tiles/
Current Projects:

lirmont

Any tool that spits out an image (and I'm sure there are tons just like the one you posted a video of) is a good candidate for blender. I didn't do anything special with Mobius' image for the map in the proof of concept. Blender lets you set up a 3d camera that matches the dimensions of the image (width, height), camera type (orthogonal; re: 2d), and angle (-45 degrees around Z, 60 degrees around X; re: isometric). From there, it's just a matter of loading the image into blender and creating the geometry over it. There are many vision-correct answers for each vertex, but you'll only ever be changing 2 axes at a time (i.e. you're either operating on X-Y, Y-Z, or X-Z, but never X-Y-Z). The final step is a repetitive process of projecting the image onto the model from the camera (blender does this for you).

I imagine most level editors out there that do similar processes use images and draw order instead of textured geometry, but there probably is at least one that does use geometry. The fancy skirt Mobius draws around his maps is likely not going to be supported wherever you go. Similarly, the anomaly features (like the rocks and jutting thing on the left) are also unlikely to be supported (they'd point straight up in the 3d space). Isometric design just isn't the tool for those things. It wasn't too much of a big deal correcting for the rocks on the right, but the jutting thing on the left is almost certainly too complex to even suggest its actual dimensions.

Long story short, blender is the best tool for map design; making a tool to replace it is folly. People may not think it's simple enough, but even it could do exactly what you want (coming up with interesting base meshes) as part of its normal operation. The added benefit of that is that you don't have to guess at what the shape of the map is like I did for this proof of concept. Just set your camera up like I've described, and, when you render the thing out, you'll have an image in that isometric space. To get the pixel-perfect nature (i.e. jagged edges), just make sure no sampling is taking place in the render properties.

Cheetah

Well Lirmont as usual you are correct. Blender is certainly not simple, but it is definitely powerful. I have been messing around with it for a few hours for the first time and I can see that it will more than likely do what I want. Getting the exact rending resolution might take some tinkering, but not all that bad. Now that I understanding the camera a bit, the next step is learning how to actually manipulate and arrange objects. I have attached what I have so far. A few more hours and I will likely have reproduced what I already had in photoshop, but now as a 3D model. The only nagging thing is that it will likely never be absolutely pixel perfect, but I think it will be so minor that it might even be better that way.

Making a whole bunch of standard ISO blocks will take a bit, but likely much less time than doing it as pixel art. The best advantage of this will be getting the lighting and shadows really accurate.
Current Projects:

lirmont

Shift+D will duplicate an object in object mode (or selected geometry in edit mode), and Alt+D will duplicate a linked copy of the object. In other words, you can make your toolset of pieces, put them on a layer (M key) that doesn't get rendered, and duplicate linked copies of those things (so any future changes you make to the mesh apply throughout). To unlink a linked object (maybe you want to make a broken staircase element from a regular one), you can press U and then choose to unlink the "Object & Data". For translation (movement), you can use the G key, and then a coordinate (like X, Y, Z), followed by numbers or mouse movement.

As to the pixel perfect nature of the render, you have total control over the image size of the render, the orthographic scale of the camera, and the camera's rotation. That's probably enough to meet the needs of the formula found here: http://en.wikipedia.org/wiki/Isometric_projection

For instance, the proof of concept image (as made by Mobius) is 660x440. I set the render resolution to 660x440. Then, the camera's orthographic scale that I used was 6.515 with the camera being physically rotated by (60, 0, -45). According to the wikipedia article, that X rotation should maybe have been 54.736 (which is 90 - 35.264). Anyway, something to go on.

Cheetah

Well I'm slowly getting closer. I have my basic board, but still need to be making more shapes. This is definitely a slower start, but will ultimately be much faster. Figuring out where to put the light should be interesting. I might remake a couple of my favorite FFT maps like this just to see what it looks like.
Current Projects:

lirmont

Assuming you want the block-like shapes from the earlier image, you should be aware of several commands.

For stairs, CTRL+R (in edit mode) and mouse wheel (or tool info panel shown with T in a viewport) to cut your block into subsections. Do that twice, then you can just delete the edges you don't want (with X). Then, you can select 2 exposed edges on either side and make a face out of them (with F). You'll eventually recreate those stairs.

For the column, E (with the top face of a cube selected in edit mode) to extrude, except here you should just hit escape. Then, you can scale the new geometry down with S and mouse movement. Follow that up with another extrude (E), but lock it to the up vector by pressing Z after. Then you have a column. You can apply a texture (color) to specific geometry or you can separate out the column part by selecting only that geometry, then pressing P.

Cheetah

Well the accuracy of this program is starting to impress me. In the last preview you can see a few stray black pixels, turns out I had misplaced a duplicated block. Now that I know how to constrain to a grid, things are going a lot faster. I now have exactly what I had made before but now in 3D and more building blocks.

Lirmont do you happen to have a list of all the different block types commonly used in FFT? I think I'm going to start by reproducing Magic City Gariland. Thanks for all the tips, it is making things go much faster, plus lots of youtube tutorials.
Current Projects:

lirmont


Cheetah

There were a limited amount of slope models, however the maps will be very useful. Is there a tool I can use to export the FFT maps into blender? I see that the texture file is in there, but is there a way to quickly apply it in blender?
Current Projects:

lirmont

As long as you use the same relative directory names, it would show up. You can change it in blender by selecting the map, then selecting the Texture tab of the properties panel, then picking the image texture, and then opening the image file you want to use. Not all display modes are designed to show the texture on the model in the viewport, though. You might have to render the scene out to test.

As for other models, you can export any of them to OBJ format and import them into blender with map2gl. Elric wrote a tutorial here for what you have to install: http://ffhacktics.com/smf/index.php?topic=10013.0

However, it's windows-oriented. You'd need to look up how to install the individual python 2.x packages for your OS. Then it's just a matter of running the python application, loading a map, and picking the menu option to export it. It outputs one OBJ file and one image file per map.

Cheetah

Wow lighting lighting makes a huge difference, this looks so much better with Ambient Occlusion, and I haven't even messed with cycles yet. I have all the building pieces now as well. I could probably mess around and get the map to export, but it will be better practice to do it manually. Hopefully I will have a chunk of it done tomorrow to show off.

Current Projects:

Cheetah

I'm essentially done with modeling here, just forgot the grass bluffs. It came together pretty quickly considering I am still very much learning the program. This is all quite exciting and I am amazing how good just simple isometric blocks can look without any real color or texture. Thanks for the great advice Lirmont, this will definitely really help Mobius and myself out. This process definitely brought up the question of scale for the maps in our project. I forgot just how out of proportion FFT maps are. I wonder what barriers we will run into designing more naturally proportioned maps.
Current Projects:

lirmont

It looks good indeed. Blender is ~20 years in the making, so it ought to be amazing. :P

Cheetah

My own attempt at recreating Mobius' Plains level with simplified geometry. It is still a bit rough and there is one area where I think I need to stray from the original map a bit to make work.
Current Projects:

lirmont

Looks pretty good. The rock and skirt features won't turn out vision-correct like you have them, though. There are three cases. Case 1: the image for the texture is transparent there, and projecting the image onto the map through the viewport will result in a visual hole (though the geometry will still exist). Case 2: the image for the texture will be of something that isn't the rock, and projecting the image onto the map through the viewport will result in any geometry (re: players) behind the rock standing visually behind the not-supposed-to-be-a-rock part of the image (that got mapped onto the rock geometry). Case 3: your skirt geometry will miss out on the edge of the skirt as defined in the original image. Long story short, you need to adjust the geometry of the rocks and skirt so that it lines up with the image. Blender makes this easy for you. You can map an image right into the camera and draw around it. However, for that to work as is necessary for this particular process, you'll need to adjust the render settings to match the dimensions of Mobius' original image.

Also, since you're near the point of turning all the geometry into a single cohesive mesh (i.e. one single object rather than duplicated pieces), you should be aware of the following features in blender for after that step: (1) in edit mode, unwrapping the model from a viewport projection with U -> Project from View (Bounds), (2) loading Mobius' original image in the UV/Image Editor for comparison, (3) attaching that image to the texture of the material of the object as an image with the coordinate setting of "UV" and the UV map that was created by step 1, (4) setting that texture to affect at least Diffuse Color and Diffuse Alpha, and (5) in the material of the map object, turning Z Transparency on with a base Alpha value of 0.000 (0 + image alpha is the resulting equation that happens behind the scenes). Step 1 is the only step you'll just be repeating over and over again until you get it exactly right. It may require you to change your camera settings (re: the orthogonal scale), so maybe make a duplicate of the original camera and store it to another layer as a backup. View -> Cameras -> Set Active Object as Camera is how you'd switch between the two (after selecting the one you want).

Mobius

Im just going to jump on board here to say that I'm getting a new machine soon, but for the time being also I'll be on Skype for chats and updates. (Cheetah) Morocco was hectic but now everything is back to normal in Spain once again.
Now everyone sit down, relax and have a good damned cup of tea.
Then go out into the forest and see the stars.

Then come back and realize it's pointless to be so worked up over what's meant to be our hobby.
That should be my motto here, holy s

Cheetah

Excellent info Lirmont. I fixed the odd geometry a bit in the middle right and fixed the graphical glitches on the skirt. The issue was simply that there were to faces in the same spot of different material, I knew what the problem was I just had to spend some time learning an efficient method of getting rid of it. Lirmont, was your first paragraph addressing the skirt graphical glitches or something else. You have mentioned the skirt being difficult a few times and I'm still not quite tracking.

Overall I believe I have a very different, and less impressive, goal for this 3D model than your original. Instead of applying the original pixel art as a texture to a mesh, I simply want to create a geometry to guide character movement and projectile collisions. My current plan is to have the basic pixel art map, with appropriate layering for objects such as the rocks, as the only visual for the map. The geometry will then be matched to the pixel art, but invisible, to guide character movement so they move around the plain as if it where a 3D object. Does that make sense?

My next question then relates to tile based movement. Right now I'm envisioning a similar movement system as FFT or tethical where everything is tile based. How are you handling this in tethical and how should I be designing maps in mind to take advantage of this.

The alternatives would be a radial system (Arc the Lad: Twilight of the Spirits) or a meter based system (Valkyria Chronicles). These would be cool and would make more sense with a focus on long distance projectile weapons, guns, but it sounds difficult to merge with 2D pixel art. Thoughts?
Current Projects: