Poryg's DIY series: PIXI.Graphics, masking - theory

[Poryg]

PIXI.Graphics, masking
An important, but theory-heavy part of PIXI. PIXI.Graphics are responsible for all sorts of geometry stuff. In rpg maker we can see it behind menus and HUD meters, although its' potential is much greater. I won't be talking too much about the practical side though, because the theory is really heavy.
Something that comes in hand with PIXI.Graphics is masking, which allows us to limit the visibility of certain sprites to only a certain area allowing all sorts of crazy stuff. But again, I'll only slightly touch the actual usefulness here.

Requirements: Text editor, RMMV and basic javascript knowledge regarding functions for easier orientation.

 

[Harken_W]

Definitely going to be following this series.

I have a question, as I understand it, the battle scene is 'loaded' so to speak over the map scene when you encounter a battle.

(If you set a transparent battle background you can see the map scene behind it)

Would I be able to apply a mask to just the battle scene, so that the map underneath that's not in the confines of the mask can be seen behind it? Not just the colour black as it currently is.

(Sorry, also commented this same thing on the youtube video aswell, but realised you might be more active on here instead.)

 

[Poryg]

I have answered on youtube, so I will type a short answer here:

While SceneManager loads one scene over another, it never keeps two scenes active. It destroys the previous and then recreates it again once it returns there (which is btw. why we have so many performance issues in RPG makers).
The map scene you can see is not an actual map scene, but a blurred map snapshot that the game uses as a background. Meaning there is nothing under SceneManager._scene, which explains why masking it makes everything besides the masked area black.
You'd have to mask the bitmaps of battlebacks to see the blurred background. However, you can't do it. Because default rpg maker handles stuff like this through javascript, not through pixi, and builds bitmaps completely differently, meaning you can't mask them and if you try, they will disappear as a whole.
If you want to use masks, you'll have to reprogram the code so that it generates PIXI.Sprites instead of Sprites for the battlebacks. I will cover sprites in episode 4 of DIY series, so hopefully in a week or two the video could be made.

 

[Harken_W]

Thanks so much for the in depth explanation both here and on youtube, I really appreciate it.

How interesting! I didn't know that the map was just a snapshot.
I look forward to the next video also, your tutorials are making me curious as to what I can mess around with in RPG Maker, even just for sheer curiosity.

Thanks!

 

[Arise]

How do I mask the parallax fog map for example in a parallax plugin?

Is not very clear to me how to have the original fog bitmap and how to load another bitmap as a mask, apply the mask to the fog bitmap and display only the result on the screen.

 

[Poryg]

Parallax plugin.. You mean any concrete one? Because depending on a plugin, each does it differently.

 

[Arise]

OrangeOverlay. I would like to mask a part of the Fog Map, but obviously... I can't mask the entire map in Photosop, I have to do it at runtime.

Not sure if I'm asking the right thing... As an alternative maybe I need something easier, mask only the area around the player, applied to the whole screen?

 

[Poryg]

For applying the mask to a fog, you'd need to locate it as the proper child. If my research is correct, fogs are located in SceneManager._scene._spriteset._tilemap as children.
Anyway, making a mask from a sprite and applying it to something is done like this:
var picture = PIXI.Sprite.fromImage ("img/pictures.picture.png");
SceneManager._scene._spriteset._tilemap.children[1].mask = picture;
However, I'm not sure why you'd do it on the fog, because that will only cause the fog to be visible only in the areas where the picture is located, in the rest of the screen it would disappear.
It's better to apply the mask to the whole screen, which is done either by
SceneManager._scene._spriteset.mask = picture;
or
SceneManager._scene._spriteset._tilemap.mask = picture;
Since creating sprites is covered in another chapter and graphics are the best for use for masks due to being lightweight, I haven't covered making masks from sprites in this tutorial.

 

[Arise]

Yes, I was thinking to do it on the fog, but not as a true fog, it would be more just like the base layer.

I was thinking to make the base layer very dark and to add a the same map but in usual colors on the fog layer, and apply a gradient mask to the fog layer, so it will look like there is some sort of light around the player...

Like is night and the player has some light around or in front of him (a custom shape of light maybe).

 

[Poryg]

PIXI mask is not gradient though. It only sets the area that is visible, anything outside of the mask's dimensions gets invisible.

 

[Arise]

I know what I want, I think I finally realized this.

So I want a desaturate or darken filter that applies based on an inversed mask.

So I want to desaturate or darken the whole screen except where the character is, based on a mask.
Like in this image I've made in photoshop:

 

[Poryg]

There would be only one simple way around it.
You'd have to create a white picture with transparent circle. Have this circle centered on player via parallel process event- Also you'd have to add that sprite as a child to SceneManager._scene._spriteset, set its alpha to 0.5 or something and apply a desaturated Color matrix filter on it.