Picture/Image masking plugin, simple graphic effect.

Joined
Jun 30, 2017
Messages
42
Reaction score
31
First Language
spanish
Primarily Uses
RMMV
This is:
A simple plugin, allows to use a picture image as a graphic mask of another picture image.

image mask?? Using a picture Mask on a Object makes the areas with white pixels on the Mask visible on Object, and areas with black pixels invisible.


1.jpeg

This allows to create a lot of interesting animated things like portals with moving stars inside, monitors with rotataing images, screens with scrolling text, windows with a moving landscape... and you can do it only with normal rpg maker pictures.

Demo Video:
Here a video showing a simple usage case:


Another example:


Video

Howto:

Download MaskPlugin.js to you js/plugins folder.
Enable the plugin on tools>plugin manager

Plugin Commands:

SETMASK object_picture_id mask_picture_id
Example: SETMASK 2 3

REMOVEMASK object_picture_id
Example REMOVEMASK 2

License:
This is a simple plugin, allowed on comercial or not comercial games. Free to share, modify, adapt, copy, resell... Credit not required.

Known Issues (mainly android)

This plugin requires WebGL, on desktop webgl is usually used by default, on android rpg maker mv uses Canvas mode. There are ways to force WebGL into android devices, but at the cost of stability.

Running WebGL on Android is tricky and can work on some devices while crashing on other devices.


More Issues?

Write a comment.
 

Attachments

Last edited:

MushroomCake28

KAMO Studio
Global Mod
Joined
Nov 18, 2015
Messages
3,544
Reaction score
4,556
First Language
English
Primarily Uses
RMMV
Very nice.

Could you please give a bit more details on the license? Free to use in any form, that's clear enough, but is credits required? Repost allowed? Edits allowed? Please add this information to your post. Thank you.
 

Hisao Shou

Veteran
Veteran
Joined
Jan 8, 2015
Messages
147
Reaction score
22
Primarily Uses
Is this plugin working only with pixijs?
I'm asking because so far have been issues with Pixi effects on Android devices (since it runs mainly Canvas not Webgl)
 
Joined
Jun 30, 2017
Messages
42
Reaction score
31
First Language
spanish
Primarily Uses
RMMV
Is this plugin working only with pixijs?
I'm asking because so far have been issues with Pixi effects on Android devices (since it runs mainly Canvas not Webgl)
PixiJs is always used, but as you pointed, lot of effects are WebGL-only,
and masking is not an exception :(

Just run a test forcing canvas mode, and the mask is not applied.

Post edited to add a warning about this plugin not running on canvas mode.

Unfortunately, i think a canvas alternative is not viable.
 

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
2,420
Reaction score
804
First Language
Dutch
Primarily Uses
RMMV
idk if its possible, but can you also move the pixture around?
like it has ground, and light goes on, some sighns are shown that will be inside that?

if so, it will defenitly come in hadny in a mechanic I went on eventing, but this will make
it much easier :D
 
Joined
Jun 30, 2017
Messages
42
Reaction score
31
First Language
spanish
Primarily Uses
RMMV
idk if its possible, but can you also move the pixture around?
like it has ground, and light goes on, some sighns are shown that will be inside that?

if so, it will defenitly come in hadny in a mechanic I went on eventing, but this will make
it much easier :D
I am not sure about what you want to do with "like it has ground, and light goes on".
You can move pictures around like normal pictures, rotate them, apply blending modes...
Pictures with a mask attached will be visible only when their pixels are over the mask white pixels.

You can set the same mask to many pictures also.

Maybe you are trying to do something like this?


Note: You can do this as a 'trick', but this is not a 'ray-casting' plugin. If you need complex light processing this is not the way to go. This plugin is more suited to things like monitors, televisors, cinema screens, portals... with moving/scrolling images inside of them.

If you provide a more detailed example of what you need, or a concept image I will try my best to help :)
 
Last edited:

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
2,420
Reaction score
804
First Language
Dutch
Primarily Uses
RMMV
more, you are in a dark area or a very light area, so all walls are visible,
when you have a lens, see it as Golden Sun's Ivan's skill "Reveal", everything
in that area is visible, which is not shown in normal view, while "reveal" is only
around the character, I want to use the mouse or arrows to move the picture around,
which can show hidden items/symbols when its hover over it.
 
Joined
Jun 30, 2017
Messages
42
Reaction score
31
First Language
spanish
Primarily Uses
RMMV
more, you are in a dark area or a very light area, so all walls are visible,
when you have a lens, see it as Golden Sun's Ivan's skill "Reveal", everything
in that area is visible, which is not shown in normal view, while "reveal" is only
around the character, I want to use the mouse or arrows to move the picture around,
which can show hidden items/symbols when its hover over it.
Yes, this is doable.

example.jpg

^ here, "mask" is a white sphere image, you can make that image 'attached' to the player via a paralell event.

A,B & C are pictures with mask set to "MASK" sphere. So only visible when the player approaches and the white sphere covers A,B or C.

Because the white sphere is used as a mask of another image, the white sphere is not visible. Their only purpose is to show/hide the objects its masking.

You can use a gradient sphere too, to make objects more visible as they approach the center of the sphere.

In this example A is not visible, B is visible and C is only half-visible.
 

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
2,420
Reaction score
804
First Language
Dutch
Primarily Uses
RMMV
the idea is more player cant move, move can move picture around to find object,
if that is not possible, a flashlight or that one on the pictuer is a nice alternate,

are you able to make a tiny demo of it (remove sounds, tilesets, and stuff not needed)
so its around 5-10mb, I learn better from testing than from text (personally though).

But it come very handy if I get it the work I like :), saves me a bounch of vars and switches :p
 
Joined
Jun 30, 2017
Messages
42
Reaction score
31
First Language
spanish
Primarily Uses
RMMV
the idea is more player cant move, move can move picture around to find object,
if that is not possible, a flashlight or that one on the pictuer is a nice alternate,

are you able to make a tiny demo of it (remove sounds, tilesets, and stuff not needed)
so its around 5-10mb, I learn better from testing than from text (personally though).

But it come very handy if I get it the work I like :), saves me a bounch of vars and switches :p
For the flashlight alternative: use a image like this as a mask, check on a parallel event for player position and facing direction to reposition/rotate the flashlight.

lanternmask.png


For the 'spell' alternative:

When the spell is fired put some flashlight-switch to ON to allow a parallel event to run.

On that parallel event:

Code:
stop player movement
move sphere to a starting position (player, or screen center, or... )

LOOP while cancel not pressed
   if up pressed: move mask sphere x pixels up
   if down pressed: move mask sphere x pixels down
   ...and so on...
END LOOP

put sphere outside screen (-1000px,-1000px for example)
allow player movement
switch of
Note: Move the mask sphere outside of screen instead of removing the mask.
If you erase the mask image then the other images are unmasked and become visible.

Demo:
In a few days, I will try to make a demo project showing how to apply some of these effects, and I will also add an extra examples for that two magic effects (lantern/reveal skill) :)
 

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
2,420
Reaction score
804
First Language
Dutch
Primarily Uses
RMMV
when the demo is there, I will download it :) and see if I can make something work with moving
the picture using the mouse. but its a lovely plugin, small but effective. There are many possibilities,
specially for those using title menu's than can give some nice effect to it like the video and DEMO text.
 

Arise501

Villager
Member
Joined
Oct 23, 2019
Messages
13
Reaction score
1
First Language
spanish
Primarily Uses
RMMV
Sorry but after 2 weeks I can't make it work.
Show image: 1 (image)
Show image: 2 (mask)
Comando de complemento: SETMASKfected_picture_1 mask_picture_2

I get an error that says:
Cannot set property 'mask' of undefine.
 

ShadowDragon

Veteran
Veteran
Joined
Oct 8, 2018
Messages
2,420
Reaction score
804
First Language
Dutch
Primarily Uses
RMMV
@Arise501 I think your plugin command is wrong of SETMASK object_picture_id mask_picture_id .
in the plugin, it says SETMASK affected_picture_id mask_picture_id (remove spaces here),
affected id = the picture ID, remember that the affected is picture BEHIND THE MASK
mask id = picture ID that goes ABOVE and take everything around it.

so your picture command would be: SETMASK 10 11
correct me if I'm wrong @SrOscuro because your description is a bit unclear.
also a demo or event setup screenshot can be nice as well to avoid misunderstanding/confusion.
 

Arise501

Villager
Member
Joined
Oct 23, 2019
Messages
13
Reaction score
1
First Language
spanish
Primarily Uses
RMMV
@Arise501 I think your plugin command is wrong of SETMASK object_picture_id mask_picture_id .
in the plugin, it says SETMASK affected_picture_id mask_picture_id (remove spaces here),
affected id = the picture ID, remember that the affected is picture BEHIND THE MASK
mask id = picture ID that goes ABOVE and take everything around it.

so your picture command would be: SETMASK 10 11
correct me if I'm wrong @SrOscuro because your description is a bit unclear.
also a demo or event setup screenshot can be nice as well to avoid misunderstanding/confusion.
Of course, it has worked for me. A simple example in the description would have been nice:
plugin command: SETMASK 1 2
(1: affected_picture_id) (2: mask_picture_id)
plugin command: REMOVEMASK 1
(1: affected_picture_id)

Thank you very much, I was looking forward to using it.
 

lonewolph

Veteran
Veteran
Joined
Oct 25, 2015
Messages
210
Reaction score
14
First Language
English
is there a way to bind the mask and pic so it doesnt move with the character?
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

I started to paint again after it didn't fit my female character. (I really intend to draw women)

I was more focused on female characters than men.

Score Rundown for the demo I'm trying to get done before Halloween, Or around it. Ending is based on your score currently.

Forum statistics

Threads
103,163
Messages
997,720
Members
134,634
Latest member
NeoLightningProductions
Top