silhouette masking

Recommended Posts

Hey guys,

Im making a top down game and i'm struggeling to find a solution, to show players behind an object.

My goal was to have:

1. the background layer, which contains the map image

2. the player layer, which contains the player sprite and collisons 

3. the foreground layer, which contains the objects which are over the player


with this setup you wouldn't see the player behind the foreground layer

so i want to add another layer which contains the player sprite tinted black or something

but for that to work i need the foreground layer to be an alpha mask for the "silhouette" layer


Any ideas how to archive this with a good performance?




Share this post

Link to post
Share on other sites

My final goal will be mirroring the players sprite, tinting it in a color of my liking and mask it off with my foreground layer.

If anyone has done this before, i would be glad to know how ;)



Share this post

Link to post
Share on other sites

Hey guys, i figured it out.

First i created a new group called silhouettes.

Then i created a player sprite tinted it black, and added it to the children of my player sprite.

After that i added the silhouette sprite to the silhouettes group. (this order is important)

after that i created a polygon mask, and masked of the silhouettes group.


player = game.add.sprite(100,100,'player');
silhouettes game.add.group();
silhouette = game.add.sprite(0,0,'player');

let maskData = game.cache.getPhysicsData('map_default_mask');
let graphics = game.add.graphics(0, 0);
maskData.data.forEach((el) => {
game.groups.ghosts.mask = graphics;
the result.

Share this post

Link to post
Share on other sites

I made a script for illustrator which can convert the shapes i draw in illustrator to polygons which i can load via json.

My workflow looks like this atm.

i create my map in photoshop or such, which a seperate layer for lights and shadows.

then i export those thre files (background,shadows,lights) and import them in the game

then i import the background image into illustrator, make one layer for the collision polygons,

and one layer for the masks, export it and im done ;)


works like charm so far

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.