Infinity MUGEN Team

IMT Main => M.U.G.E.N Guides & Tutorials => Topic started by: Arias on January 11, 2019, 09:46:07 PM

Title: Antialias (for indexed sprites)
Post by: Arias on January 11, 2019, 09:46:07 PM

A quick guide for Hi-res stuff, since 1.1 was released this method became obsolete, however, probably there are people still creating for 1.0 or lower. There was a tutorial by ExShadow iirc, but can't seem to find it, so I made one myself.

There are a couple of layering "tricks" that make easier coding hi-res stuff while using indexed images.

Let's start with this.

(https://cdn.discordapp.com/attachments/533456728424185858/533457240225611777/antialias0.png)

As you can see, the edges of this image are antialiased (they're smoothed with transparent pixels to help them blend with whatever you put behind it), this is usual in hi-res stuff, normally to code this in mugen (indexed), one would have to remove the alpha pixels leaving sharp edges & reducing the quality, but using an image with brightness at max + substractive transparency can help to reduce the time spent cleaning the alpha pixels (that's if you don't know how to create a script to do it) and improves the overall look.

(https://cdn.discordapp.com/attachments/533456728424185858/533457239374299149/antialias1.PNG)

So your layers should look like this:

This is the alpha that uses substractive transparency, it goes behind your sprite.
(https://cdn.discordapp.com/attachments/533456728424185858/533457468324315137/a1.png)

This is your normal sprite that uses additive transparency.
(https://cdn.discordapp.com/attachments/533456728424185858/533457468324315136/a.png)

And in your def file lines should be like this:

[BG 0];-----------------------alpha with substractive trans.
type  = normal
spriteno = 60, 1
layerno = 1             
start = -800, 289
delta = 2, 2
trans = sub

[BG 0];----------------------your normal sprite with additive trans.
type  = normal
spriteno = 60, 0
layerno = 1               
start = -800, 289
delta = 2, 2
trans = add

This is the result:

(https://cdn.discordapp.com/attachments/533456728424185858/533457392965517325/mu1.png)

Since it's a foreground object let's say I want to add some defocus:

(https://cdn.discordapp.com/attachments/533456728424185858/533457638663520256/a4.png)

(https://cdn.discordapp.com/attachments/533456728424185858/533457638185500693/a3.png)

(https://cdn.discordapp.com/attachments/533456728424185858/533457392965517322/mu2.png)

Now you can notice a black edge around the barrel, this can be fixed by decreasing the brightness of the alpha OR adding another additive layer BEHIND the substractive one, like this:

[BG 0];-----------------------alpha with addalpha trans, 180,256 works fine most of the time.
type  = normal
spriteno = 60, 1
layerno = 1               
start = -800, 289
delta = 2, 2
trans = addalpha
alpha = 180,256

[BG 0];-----------------------alpha with substractive trans.
type  = normal
spriteno = 60, 1
layerno = 1             
start = -800, 289
delta = 2, 2
trans = sub

[BG 0];----------------------your normal sprite with additive trans.
type  = normal
spriteno = 60, 0
layerno = 1               
start = -800, 289
delta = 2, 2
trans = add

The result:

(https://cdn.discordapp.com/attachments/533456728424185858/533457468324315138/mu3.png)

The downside to this method is that if your stage has too many big layers you shouldn't abuse it too much, otherwise you can cause slow down on lower-end computers, with opengl is not a problem though.

---

This can be used to give more opacity to hi-res effects in characters as well, ever noticed how non-bright colors become way too transparent with add-transparency?

(https://cdn.discordapp.com/attachments/533456728424185858/533457239374299147/without.gif)

(https://cdn.discordapp.com/attachments/533456728424185858/533457392449355826/with.gif)

---

There are a couple more things, but will post it later.

Title: Re: Antialias (for indexed sprites)
Post by: O Ilusionista on January 12, 2019, 09:16:52 PM

Oh, this is really awesome.