YesNoOk
avatar

3D Stages are Here! a fairly comprehensive guide (Read 25100 times)

Started by SuperFromND, November 25, 2023, 07:34:44 pm
Share this topic:
3D Stages are Here! a fairly comprehensive guide
New #1  November 25, 2023, 07:34:44 pm
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/

As I'm sure some of you are aware by now, Ikemen GO recently started experimenting with support for 3D-model-based stages. If you're reading this, then that means 3D stage support has now been made available in the nightly builds! This is something I'm very excited about (if the sheer length of this post is any indication) and I'm eagerly anticipating to see what bonkers things the community can create with it. However, I also imagine many of you aren't very familiar with anything 3D, so I figured it'd be a great idea to share some of my knowledge and advice with Blender, hence this guide.

This guide is intended to help people get to grips with this new way of making stages, covering both how 3D stages work in Ikemen and a crash-course on how to use Blender to create them from scratch. My explanations on Blender are not going to be as comprehensive as many others available online, but hopefully it's good enough to get you folks started!

Table of Contents
  • Background Information
  • Limitations
  • Getting Started
  • How to Blender
    • Object Mode
    • Edit Mode
    • Materials
    • Textures
    • UV Mapping
    • Modifiers
    • Animation
    • Vertex Colors
    • Armatures
  • Preparing for Ikemen
  • Baking Animations
  • Skyboxes
  • Baking Lightmaps
  • Exporting to GLTF
  • Using GLTFs in stages
  • Troubleshooting & Common Blender Questions
  • Miscellaneous Tips
  • Further Reading
  • Special Thanks

Background Information
Since the dawn of M.U.G.E.N, stages have been made using two formats: a .DEF file, and a .SFF file. The .SFF contains 2D graphics data, while the .DEF specifies stage boundaries and dictates where these graphics are to be placed in a 2D space. While you could always use parallax to give stages a sense of depth, and some very clever tricks have been devised over the years to give the illusion of 3D, stages have always ultimately remained as two-dimensional images.



Recently, Ikemen GO introduced the ability to use a 3D model instead of placing 2D graphics. Rather than an SFF, these 3D models use a file format called GLTF (extension either .gltf or .glb); this format is relatively new, but it's completely open-source, standardized, and easy to create and export to using programs like Blender. GLTF is already being adopted by many other projects, including the Godot game engine, and its nature means you can have the entirety of a model - mesh, textures, animations, everything - all in one file, just like a .SFF would have for 2D graphics, making it ideal for stage distribution.

3D stages come with quite a few inherent benefits. On top of just looking really nice, 3D stages are not restricted to one particular resolution, and can look nice and crisp whether you play at 480p or 4K. Depending on the scene, 3D stages can also potentially offer massive reductions in file size compared to a 2D-conversion-of-a-3D-stage; I was able to make a conversion of a Marvel vs. Capcom 2 stage that can fit on a floppy disk! Naturally, this also opens up a whole planet of possible new stage ports from other games that wouldn't have been easy or possible otherwise; I've already experimented with porting areas from a few different Dreamcast and GameCube/Wii games, and I'm sure others will follow suit porting from other games shortly after this guide goes live.

Limitations
Ikemen's implementation of GLTF is fairly simple at the moment, and lacks support for some common elements that might be found in other implementations. Specifically:

  • There is no direct support for light objects or environment maps. However, you can get around this by pre-rendering (or "baking") your lights beforehand and creating a skybox respectively; we'll touch on this later.
  • Related to the above, Ikemen does not currently use any part of a material other than the color map, so no roughness, metallic, specular, normal, emission, etc. are displayed.
  • Armature deformations/weights are not supported. This means that, while models with armatures will be drawn, they won't animate and will most likely default to their base pose. Update 12/26/2023: Armatures are now supported in the latest nightly builds!
  • Volumes/volumetrics of any kind are not supported, which means that things like fog will have to be simulated with a bunch of transparent planes.
  • Currently, only PNG, JPG, and uncompressed DDS textures are supported. Draco compression is also not supported.

It's entirely possible these limitations can be addressed in the future. If you happen to know 3D graphics programming and how to program in Go, and want to help improve our 3D support in Ikemen, consider visiting our Github and making a pull request!

Getting Started
As of the writing of this guide, the latest stable version of Ikemen GO is version 0.99. Future stable versions should include 3D stage support, but for now, you'll need to download the latest nightly builds of Ikemen GO to get support for 3D stages. The nightly build changes every day whenever code changes are made to Ikemen, so it's not as stable or as widely-tested as release versions like 0.99 and features may change or break at any time. Please keep this in mind when designing stages with it!

If you're looking for 3D stages to try this out with (or you just want a complete example), I've created a few stages you can download here. Most notably, I've created an original stage titled Third Heights and I'm releasing it under MIT, same as Ikemen GO itself. I've submitted a PR for this stage to be included in future versions of Ikemen GO, so hopefully it should be available directly from there soon. Other members on MFG have also released 3D stages, such as these Melty Blood: Type Lumina conversions by Eiton and this CvS London conversion by Violin Ken.

For creating 3D models; there's quite a lot of programs out there to create and edit with. Here's what I recommend:

  • Blender: A very well-known free and open-source 3D modelling program. This is what I'm going to be using for this guide, and it's most likely what you'll want to use unless you happen to have a copy and familiarity with other programs like Maya or 3Ds Max. I'm using version 3.4 here, but the general workflow should be more or less the same across all versions past 2.8. [Editor's note: Blender 4.0 released right in the middle of me writing this guide, so if the UI looks slightly different for you than what I'm showing here, that's why!]
  • Rodzilla's Material Maker: Also free and open-source, this program makes it easy to create procedural, seamless textures for use with 3D models. I used it to create the textures in my original stage, Third Heights.
  • If you don't want to make your own textures from scratch, ambientCG.com has thousands of textures available as CC0/public domain, mostly photoreal ones. Ditto for polyhaven.com. I'd still recommend making your own if you can though!
  • Either GIMP, PhotoShop, Paint.net, or some other image editing program. Not strictly necessary, but it's very handy to have on hand for editing textures. (Blender has its own image editing tools built in, but I find them to be clunky personally.)

Note that if you're wanting to rip a stage model from an existing game, that is beyond the scope of this guide and I won't be covering it here since it varies wildly from game to game (and console to console) and requires some pretty intricate technical knowledge. You'll want to check The Models Resource or search for ripping tools for the game or the system(s) it was released on for info on that.

How To Blender
If you already know how to use Blender, you can skip ahead to the section Preparing for Ikemen, as the next several sections are going to cover the basics of how to do basic, common things in Blender.
For the rest of you... get ready for the mother of crash courses.

Quote
Note: Due to MFG post size limitations, I'm not able to include the How to Blender sections in this post. I've split them into two replies to this thread. Click the respective section to be taken to the reply containing it:

Preparing for Ikemen
Spoiler, click to toggle visibilty

Baking Animations
Spoiler, click to toggle visibilty

Skyboxes
Spoiler, click to toggle visibilty

Optimizations
Spoiler, click to toggle visibilty

Baking Lightmaps
Spoiler, click to toggle visibilty

Exporting to GLTF
Spoiler, click to toggle visibilty

Using GLTFs in stages
Spoiler, click to toggle visibilty

Troubleshooting & Common Blender Questions
Spoiler, click to toggle visibilty

Miscellaneous Tips
Spoiler, click to toggle visibilty

Further reading
This post is really only scratching the surface; 3D modelling is an entire skillset in its own right and I can't possibly cover every little detail in one post. As such, here's some great links to learn more about Blender and 3D models in general:


Special Thanks
  • Eiton, for implementing 3D stage support in the first place.
  • Violin Ken and PotS, for proofreading this guide and giving me some feedback.
  • The Blender Foundation for giving us such an incredible 3D tool for free, and making it open source.
  • This also applies to its community. Thanks for giving me the resources to get started on 3D stuff myself!

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart:
Last Edit: April 01, 2024, 06:19:27 pm by SuperFromND
Re: 3D Stages are Here! a fairly comprehensive guide
New #2  November 25, 2023, 07:40:00 pm
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/
And here's the How to Blender section I wasn't able to include in the original post (continued in reply #3):
How to Blender (cont.)
Spoiler, click to toggle visibilty

Object Mode
Spoiler, click to toggle visibilty

Edit Mode
Spoiler, click to toggle visibilty

Materials
Spoiler, click to toggle visibilty

Textures
Spoiler, click to toggle visibilty

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart:
Last Edit: April 01, 2024, 11:09:45 pm by SuperFromND
Re: 3D Stages are Here! a fairly comprehensive guide
New #3  November 25, 2023, 07:46:42 pm
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/
(continued from above):
UV Mapping
Spoiler, click to toggle visibilty

Modifiers
Spoiler, click to toggle visibilty

Animation
Spoiler, click to toggle visibilty

Vertex Colors
Spoiler, click to toggle visibilty

Armatures
Spoiler, click to toggle visibilty

Sorry for the inconvenience!

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart:
Last Edit: April 01, 2024, 11:12:00 pm by SuperFromND
Re: 3D Stages are Here! a fairly comprehensive guide
#4  November 26, 2023, 12:32:16 am
  • THROW A CONCUSSION GRENADE
Fantastic guide! I can't wait to dive in and try this out ;D
Re: 3D Stages are Here! a fairly comprehensive guide
#5  November 26, 2023, 01:19:53 am
  • ****
  • NINJA COP SAIZOU
    • Mexico
I remember giving a shot in Blender long time ago, ain't that easy, you have to be creative when it comes to custom/original/new from scratch creating stages for Mugen.
Re: 3D Stages are Here! a fairly comprehensive guide
#6  November 26, 2023, 02:34:19 pm
  • **
I like 3D Stage
Games like Blazblue, Persona 4 Arena Ulitmax, Under Night in Brith
Re: 3D Stages are Here! a fairly comprehensive guide
#7  November 30, 2023, 01:42:45 pm
  • ****
    • Argentina
    • matrerog@yahoo.com.ar
I'm not deeply familiar with Blender, but this guide is worth studying and doing some testing.
Thanxs for the tutorial.
Re: 3D Stages are Here! a fairly comprehensive guide
#8  December 02, 2023, 04:23:34 pm
  • ****
  • son of sparda
    • nmowner.webs.com/
wow looking into this.
nMo new generation of mugen exposure
Re: 3D Stages are Here! a fairly comprehensive guide
#9  December 03, 2023, 12:55:37 am
    • Brazil
even tho i don't make stages, this looks pretty good! can't wait to see 3d stage ports from other games soon.
me when
Re: 3D Stages are Here! a fairly comprehensive guide
#10  December 12, 2023, 09:59:50 pm
    • Brazil
I want to make some animations using, sprites 2D to the background, like cameos watching the fight; how can I do this at the stages?
Re: 3D Stages are Here! a fairly comprehensive guide
#11  December 13, 2023, 01:38:37 am
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/
I want to make some animations using, sprites 2D to the background, like cameos watching the fight; how can I do this at the stages?

Neither Ikemen nor GLTF itself support animated textures at the moment, so the next best thing would be to make a bunch of planes with all the animation frames you want, and then scaling each of them using animation keyframes set to Constant, like a slideshow.

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart:
Last Edit: December 28, 2023, 04:01:49 pm by SuperFromND
Re: 3D Stages are Here! a fairly comprehensive guide
#12  January 02, 2024, 12:42:48 am
    • Brazil
Ah okay, some tutorials about that? I don't even know how to start with this.
Re: 3D Stages are Here! a fairly comprehensive guide
#13  January 26, 2024, 01:01:30 am
  • **
  • 超高校級の「絶望」
  • “Just like a single bullet setting off a world war
    • Japan
    • gamersnatales.wordpress.com/
are they really 3D??
i wonder this since from what i have seen is just a 2D stage and nothing out of the world since can be done (has been done) on mugen 1.1
for example can i just paste a 3d map on the engine and will run it? it use the general map format of obj or something different?
let's be honest most of the so called 3D aren't really 3D stages on ikemen in fact i tested the so called 3D stages on mugen 1.1 and worked without issues so how is it even a feature if the stages can be used on regular 1.1
this reminds me of netplay implementation "is unique and is the first time  it has been done on mugen" well nope paintown did it,you could set up hamachi to play online with 1.1 (kinda tricky and risky to do but can be done) in fact i laughed when they said "is similar to lunaport for 2D fighter maker" yet it isn't even close (press join...wait 40 minutes...nothing is shown....wait an hourstill nothing...give up on testing ikemen go online....how did it even work??)
some kind of reminder "pre rendering on blender and creating the sprites there doesn't make it 3D point being donkey kong for snes isn't a 3D game"
“Thousands of humans falling over like dominoes... ahhh... that sight was so beautiful! I thought my brain was gonna melt..!”
Re: 3D Stages are Here! a fairly comprehensive guide
#14  January 26, 2024, 07:42:52 am
  • ****
  • The other Indian
    • India
are they really 3D??
i wonder this since from what i have seen is just a 2D stage and nothing out of the world since can be done (has been done) on mugen 1.1
for example can i just paste a 3d map on the engine and will run it? it use the general map format of obj or something different?
let's be honest most of the so called 3D aren't really 3D stages on ikemen in fact i tested the so called 3D stages on mugen 1.1 and worked without issues so how is it even a feature if the stages can be used on regular 1.1
this reminds me of netplay implementation "is unique and is the first time  it has been done on mugen" well nope paintown did it,you could set up hamachi to play online with 1.1 (kinda tricky and risky to do but can be done) in fact i laughed when they said "is similar to lunaport for 2D fighter maker" yet it isn't even close (press join...wait 40 minutes...nothing is shown....wait an hourstill nothing...give up on testing ikemen go online....how did it even work??)
some kind of reminder "pre rendering on blender and creating the sprites there doesn't make it 3D point being donkey kong for snes isn't a 3D game"

Whole lotta rambling. Check this channel : https://www.youtube.com/c/violinken
Re: 3D Stages are Here! a fairly comprehensive guide
#15  January 26, 2024, 11:16:37 am
  • *****
  • Resident Tosspot
  • Pftheh
    • UK
    • plasmoidthunder.neocities.org
Nice bait, but reading literally anything in the OP would've answered your question.

Oh, I want a diagram. I fucking love diagrams.
Re: 3D Stages are Here! a fairly comprehensive guide
#16  January 26, 2024, 01:50:31 pm
  • ******
  • 90's Kawaii
  • :thinking:
    • Guatemala
Re: 3D Stages are Here! a fairly comprehensive guide
#17  March 15, 2024, 05:54:57 pm
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/
Just updated this guide to add a new section explaining armatures, since support was added some time ago. It's right after the Vertex Colors section. Enjoy! <3

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart:
Re: 3D Stages are Here! a fairly comprehensive guide
#18  March 18, 2024, 02:51:20 pm
  • ****
  • Stages & Screen Pack
  • Mugen Creator
    • USA
    • https://jusmugen.forumotion.com/
How come the Moderators are not set a Ping on this very wonderful Guide. for STICKY WE NEED IT :O
Join My JUSMUGEN Community.
https://jusmugen.forumotion.com/
Re: 3D Stages are Here! a fairly comprehensive guide
#19  March 24, 2024, 10:27:20 pm
  • **
  • Professional Amateur
    • USA
    • superfromnd.gitlab.io/

Creator of the Ikemen GO Command List Generator and its successor, Iguana.
I also make 3D stage ports for Ikemen GO. You can find my stages here. :heart: