Silhouette of hidden player

1

Attached Files

The following files have been attached to this tutorial:

.capx

silhouette-effect.capx

Download now 172.92 KB

Stats

2,742 visits, 3,889 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 9 Feb, 2016. Last updated 19 Feb, 2019

Introduction

In some top-down games the player can move behind objects, e.g. walls or buildings. To not lose the position of the player, it shows the silhouette of the player on top of the building. A neat trick and easy to create using the Construct 2 blend modes. The following GIF shows the finished project:

How to do it

The blocks

We need something to work with, so let's make a simple setup. Create a new project and call it whatever you want. First of all, we need a wall or something for the player to hide behind. create a Sprite object and call it 'Block'. Give it a placeholder sprite (or not!) with a top-down effect using two colors, one as shadow. To make it top-down we need to change the collision polygon and the origin just for convenience. The collision polygon has to only cover the area where the player can't stand, so where the block touches the ground. Everything else is the space behind the block. Also add the Solid behavior, so our player won't move through it! You should and up with something like this:

After that, spam your layout with blocks :D

The layers

The layers play a important role. For the sake of organizing, call the current layer ('Layer 0' with your blocks) something like 'Blocks'. I dislike that bright white background, so I changed it to light gray. Now add a new layer on top of layer 'Blocks' and call it 'Player'. In the Layer Properties bar of layer 'Player', set Force own texture to Yes. This is crucial!

The player

Finally we can add a player. Create a Sprite Object on the 'Player' layer (!). I recommend repeating what you did for the Block object, but call it 'Player' and make it smaller with different colors. Remember to change the collision polygon!

To make the Player movable, add the 8-Direction behavior and adjust this how you like. Run your project to test it out. The Player should be moving in front of the Blocks. When you try going behind them it will look odd. We're going to fix that by adding our silhouette!

The silhouette

Go to layer 'Player'. Add a Tiled Background object and call it 'Silhouette'. Give it a plain color, can be anything you like. Copy the object a bunch and place the copies on top of the Blocks, but just the part the Player can move behind, so not where the collision polygon is! You will end up with this:

Now the magic happens! Construct 2 has a number of blend modes for objects to blend with their background. Select the Silhouette object and set its blend mode (in the object properties bar under 'effects') to source atop. They disappeared! Don't worry, they're still there, but invisible since they now have a blend mode and Force own texture is on.

Run the project and move 'behind' the Blocks. Now it shows the Silhouette object, but only on top of the silhouette of the player.

Conclusion

That's all! I'd like to point out that this all will only work when WebGL is supported, but that shouldn't be a problem for most devices. I also included a .capx file if you just want to have a look around.

.CAPX

silhouette-effect.capx

Download now 172.92 KB
  • 0 Comments

Want to leave a comment? Login or Register an account!