Forum rules - please read before posting.

How to make a working mirror in a 2D game?

This time I have more of a Unity than AC question. I hope it's okay to ask here? ;)

In my scene I've got a background with a hole in the middle where there is supposed to be a mirror.

I figured I'd make a cube 3D object and place it behind, then project view from one of the cameras onto it (not sure if it should be the main camera or one of the scene cameras) using render texture. But I've been toying this for a couple of hours now and while some room sprites get reflected the player character does not ( and even if it does it is not reflecting the walking animation or movement of any sort, just still image).

So, the question is: could anyone guide me through this? - how do we make a working mirror in a 2D sidescrolling game where you can only move left/right?

 
«1

Comments

  • I had a similar problem in my own game, though that was made in AGS.  I solved it by creating a duplicate character with flipped sprites (so facing left had the appearance of facing right), which I placed "inside" the mirror using a mask.  I then wrote a script that moved it with the player, to make it look like the player's reflection.
  • I did the same in my AGS games, and I'd love to be able to recreate the same in AC but not sure how...

    Here's a graphic example so maybe someone can give me some ideas (pretty please! ;) ;) ) ;) :

    image

    The red area is transparent. The player reflection seen here is just a photoshop mockup to illustrate what I'm trying to achieve.
  • edited June 2016
    Hey, I'm not very savvy when it comes to 2D, and I'm more of a designer/artist than a programmer, but I think you have two options here. Like Chris said you could have clones of your characters which you can then move along side your actual characters (that technique was often used in 3D in the past to fake reflections, some people using mobile still use it today I take it), the other option is to work with shaders or image effects (you could also try render textures, I guess).

    Anyways, you could try this guy's reflection shader for 2D (it seems pretty good, he mentions if you set the resolution higher in the shader you will get a mirror effect instead of a water reflection effect):

    EDIT: hey, isn't Hedgefield one of the guy's in the forums? :-? I'm pretty sure he is using Adventure Creator in the screen shots. The game development world sure is small :))
  • Hey! - "Hedgefield's Method" actually works!!! :) :)

    Thanks again, Alverik! :)

    For anyone else trying to use this in the future: make sure you rotate your mirror slightly, otherwise the reflection is completely hidden behind the character which might at first make you think it's not actually there (I did :P ).

    Anyway, another problem solved :)


  • Haha nice, I was just coming in here to post a link to that shader, but I see you've already found it. Glad to help! :)
  • Yeah, it was me who posted on your Facebook a few days ago ;) Thanks again, dude ;) Now I'm planning to make my game full of mirrors! :)
  • Visit this https://mobilegamegraphics.com/tutorial/ maybe this tutorial can help your needs.
  • Hello,
    apologies for a "necromancy" - that is: responding to a more than a year-old thread, but I stumbled upon a problem while trying to use the "Hedgefield Method" - it seems I cannot get the reflection correct - it's reflecting the character the other way and while moving next to the mirror (and the reflection direction is wrong..) Can you give me a hint what I am doing wrong here? I've spent several hours on it and I am quite puzzled :)

    Take a look:

     image

    Last but not least: thanks for all the hints above and for magnificent tools you provided me with, Sirs!
  • Welcome to the community, @gmork6.

    You may need to contact @hedgefield directly, as he's the author of the method in question.  I expect you'll also need to provide more details about your setup, as the image doesn't show much in the way of how you've achieved this.
  • Thank you Chris.
  • Hi @gmork6! Yes, I see what you're trying to do. This one is a bit trickier, perhaps you'd be better off, in this case, using the method mentioned earlier, of using a camera to create the 'reflection'. Maybe this free asset from the Unity Asset Store will help? Let us know how it goes, otherwise I'll dive into the shader code to see if there is a way to flip the reflection.
  • Thanks @hedgefield! I will definitely take a look.
  • I'm pretty sure it's about the correct rotation of the mirror. I have the same kind of mirror in my game using Hedgefield's method and (after rotating it for a long time ;) ) I managed to have it reflect same way as player is facing.

    I can't remember how I've done it... but it's definitely possible.
     
  • This is a necrobump, but it would be really cool if there was out-of-the-box support for a “decoy” or “clone” NPC that could easily be used for both types of mirrors, wall mirror (left/right animations flipped and front/back animations flipped) and water (transform rotated 180, left/right animations flipped and up/down animations same). You could define the mask and add in the same animations as the player, add more “decoys” for the NPCs and tick which axis animations you want flipping and if it needs rotating. The script could match the walking speed and positioning and you could define the axis offset. Then the user could either draw/render their own mirror or water texture, or use their own shader for the background reflections.

    It would certainly be interesting!
  • Ressurecting this old thread. saw your AGS game and this mirror effect in the bedroom was exactly the effect I was going for (reflection in a store window).

    I had a similar idea as you with a duplicate character.

    Is there an "AC" way of controlling 2 characters at once like you describe in your AGS script @ChrisIceBox ?

  • Hi! I was to know the same :#

  • As Unity allows you to get/set a SpriteRenderer's sprite property through script, you wouldn't need a duplicate character - just a separate SpriteRenderer in the scene to act as the mirror, set to update it's own Sprite/Position based on that of the character it's representing.

    Something like this:

    using UnityEngine;
    using AC;
    
    public class MirrorCharacter : MonoBehaviour
    {
    
        public AC.Char characterToMirror;
        public Vector2 positionOffset;
        private SpriteRenderer spriteRenderer;
        private SpriteRenderer characterToMirrorSpriteRenderer;
    
        private void Start ()
        {
            spriteRenderer = GetComponent<SpriteRenderer> ();
            characterToMirrorSpriteRenderer = characterToMirror.GetComponent<SpriteRenderer> ();
        }
    
        private void LateUpdate ()
        {
            transform.position = characterToMirror.transform.position + positionOffset;
            spriteRenderer.sprite = characterToMirrorSpriteRenderer.sprite;
            spriteRenderer.flipX = !characterToMirrorSpriteRenderer.flipX;
            transform.localScale = new Vector3 (-characterToMirror.spriteChild.lossyScale.x, transform.localScale.y, transform.localScale.z);
        }
    
    }
    
  • It work amazing Chris thanks. I just used this script for the reflex of the floor *and look great!, but If I want a mirror, for example in the wall I need the oposit animation, if the player is from the back I need reflex the front sprite... (I try to use a shader but the problem is the same haha). Maybe I need make something more complex in the script but now I have a idea!, thanks

  • Hey. huge thanks! its really cool that you put the time in to making a script!
    thats very useful for certain reflective surfaces.

    But in your AGS game you have a flat mirror against the back wall.
    where if the characters back is turned towards the mirror the mirror shows the back of the head.

    I had an idea of a dummy character behind the wall mimicing the player as you did. But with flipped animations for up and down. not sure how to control that in AC though. or if its even the best way to do it.

    Pic from your trailer :)

    https://imgur.com/a/GsrKlp5

  • Ah, quite right.

    In that case, using a dummy character may be the better way after all. How it works exactly would depend on the original character's animation engine, but it's probably easiest to rely on Sprites Unity Complex. That way, you can read their move/direction parameter values, modify them as necessary, and apply them to the dummy character:

    using UnityEngine;
    using AC;
    
    public class MirrorCharacter : MonoBehaviour
    {
    
        public AC.Char originalCharacter;
        public AC.Char mirrorCharacter;
        public Vector2 positionOffset;
    
        private void Update ()
        {
            // Position
            mirrorCharacter.Teleport (originalCharacter.transform.position + positionOffset);
    
            // Move speed
            float moveSpeed = originalCharacter.GetAnimator ().GetFloat (originalCharacter.moveSpeedParameter);
            mirrorCharacter.GetAnimator ().SetFloat (mirrorCharacter.moveSpeedParameter, moveSpeed);
    
            // Direction
            int direction = originalCharacter.GetAnimator ().GetInteger (originalCharacter.directionParameter);
            int flippedDirection = FlipDirection (direction);
            mirrorCharacter.GetAnimator ().SetInteger (mirrorCharacter.directionParameter, flippedDirection);
        }
    
        private int FlipDirection (int direction)
        {
            // 0 = Down, 1 = Left, 2 = Right, 3 = Up, 4 = DownLeft, 5 = DownRight, 6 = UpLeft, 7 = UpRight
            switch (direction)
            {
                case 0:
                    return 3;
    
                case 1:
                    return 2;
    
                case 2:
                    return 1;
    
                case 3:
                    return 0;
    
                case 4:
                    return 7;
    
                case 5:
                    return 6;
    
                case 6:
                    return 5;
    
                case 7:
                    return 4;
    
                default:
                    return direction;
            }
        }
    
    }
    
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Welcome to the official forum for Adventure Creator.