silhouette masking

[ceeed]

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?

 

 

[samid737]

 

If the game objects are litterally just like the example picture, maybe you can use different blend modes (requires Web-GL) for your shapes, but it becomes less nice if you use textures instead of simple shapes. An example:

 

[ceeed]

I think i got it kind of working.

http://www.giphy.com/gifs/xUPGczMscjA1etaPKg

 

But i would rather have it in a blocked color than multiply. But i guess that's not worth the hussle.

I will keep looking for a better solution, but for now this works.

 

thx!

[ceeed]

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

 

cheers

[ceeed]

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');
silhouette.anchor.set(0,0);
player.addChild(silhouette);
silhouettes.add(silhouette);

let maskData = game.cache.getPhysicsData('map_default_mask');
let graphics = game.add.graphics(0, 0);
graphics.beginFill(0x000000);
maskData.data.forEach((el) => {
  graphics.drawPolygon(el.shape);
});
graphics.endFill();
game.groups.ghosts.mask = graphics;

 

the result.

http://www.giphy.com/gifs/3og0IwGoPYxW39mPzW

[samid737]

Nice solution! I never worked with polygon masks, so definitely good to know for future purposes.. 

[ceeed]

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

[okaybenji]

Looks great! Do you have a Twitter or something where I can follow progress on the game you're working on?