line rendering

[mossy wing]

We'll switch to a thread @tough summit as it's getting convoluted

So yeah, change the field's type to LineRenderer

[tough summit]

Ah yes, sorry

Got that!

[mossy wing]

You should now be receiving an error on the Instantiate line, unless you've already fixed it

[tough summit]

Yes, I do have that error

[mossy wing]

So, you need to get the line renderer using GetComponent<LineRenderer>()

Put this right after the Instantiate, so you get it in one line

line = Instantiate(...).GetComponent<LineRenderer>();

[tough summit]

Alright, error is gone now

[mossy wing]

So now you can remove the UpdateLine method altogether, you'll get 3 errors normally

[tough summit]

Yup, got three errors

[mossy wing]

And to keep the code clean, add a method that does the conversion from UI space to world space. Takes in and returns a Vector3

So we don't have duplicate lines

[tough summit]

The (Vector3) is probably wrong here, right?

    {
        Vector3 pos = eventData.position;
        pos.z = 10; // the distance on the Z axis between the camera and the world objects (by default, the cam is at Z -10
        Vector3 worldPos = Camera.main.ScreenToWorldPoint(pos);
    }```

[mossy wing]

Yep, you need to

• Give that parameter a name (eg. "uiPos")
• Use that parameter in place of eventData.position since that doesn't exist anymore
• return worldPos; so you can get the world position when you call the method
• Change the method's return type from void to Vector3 since it's what you're returning

[tough summit]

    {
        Vector3 pos = uiPos;
        pos.z = 10;
        Vector3 worldPos = Camera.main.ScreenToWorldPoint(pos);
        return worldPos;
    }```

Still too many errors. What am I doing wrong?

[mossy wing]

You removed the Vector3 uiPos inside the method's parentheses

public Vector3 Converter(Vector3 uiPos) { ... }

[tough summit]

Okay, I changed that, thanks! Still many errors tho or are we fixing this in the next step?

Oh I think we didnt get to that yet, right?

[mossy wing]

Yep, that's what we're doing now

[tough summit]

Okay, needed a minute to process. Let's keep going!

[mossy wing]

Since you created Converter you don't need the lines that do the conversion anywhere else. If they are still in OnPointerDown and OnDrag, remove them

Unless you already did that, seeing the errors above

[tough summit]

Yes haha, I replaced it with this: Converter(Vector3 uiPos); but unity now says a comma is missing somehow in those exact lines so I guess I didn't do it right lol

[mossy wing]

So that's where the other error comes from. Since you have the method in place, you can do the following to convert

Vector3 worldPos = Converter(eventData.position);

Calling the method, and retrieving its return value (the world position) to store it in a variable

[tough summit]

Okay, I got that!

[mossy wing]

So that should be done for OnPointerDown and OnDrag only. The other one, keep as is for now

[tough summit]

I only had the conversions in those two spots..

[mossy wing]

Ah yeah, was thinking of the one that also was in OnPointerUp my bad

[tough summit]

All good! I just didn't want to miss anything

[mossy wing]

So, 3 more lines to change and we're done. Can you post the updated script so I have the right line numbers?

[tough summit]

Sure! I deleted all the references to the function UpdateLine because they were just giving errors since the function is deleted so don't be confused that those are missing. https://www.toptal.com/developers/hastebin/ticikaputo.cpp

[mossy wing]

Okay, so in OnPointerDown you need to access the line renderer and set the first point's position to the world position

line.SetPosition(0, worldPos);

Same thing for OnPointerUp, but for the second point's position. Pass 1 as the first argument to SetPosition instead.

[tough summit]

Does it matter which position this has in the OnPointerDown?

    {
        line.SetPosition(0, worldPos);
        line = Instantiate(linePrefab, transform.position, Quaternion.identity, transform.parent.parent).GetComponent<LineRenderer>();
        Vector3 worldPos = Converter(eventData.position);
    }```

[tough summit]

And for OnPointerUp, do I write this in the if-function?

[mossy wing]

Does it matter which position this has in the OnPointerDown?
Yes, you should be getting an error now. "Cannot use variable 'worldPos' before it is declared". The first line goes last.

And for OnPointerUp, do I write this in the if-function?
Nope, you just write line.SetPosition(1, hoverItem.transform.position); inside of the if statement

[tough summit]

Alright, thanks!

What's next? 🙂

[mossy wing]

Post the code for a final check

[tough summit]

There you go: https://www.toptal.com/developers/hastebin/xofikubazi.cpp

[mossy wing]

Code is missing in OnDrag - the exact same thing as in OnPointerDown, but pass 1 as the first argument to SetPosition

By "exact same thing", I don't mean the full contents

Just the position set

[tough summit]

So like this?

    {
        Vector3 worldPos = Converter(eventData.position);
        line.SetPosition(1, worldPos);
    }```

[mossy wing]

Yep

[tough summit]

https://www.toptal.com/developers/hastebin/konihiqoxu.cpp Updated it

[mossy wing]

Make sure you dragged a material for the line renderer, and changed its width (a width of 1 might be too big, try with 0.1)

Then,

Send It
(run the game)

[tough summit]

With width you mean the size to 0.1? or is there another width setting I am not seeing

[mossy wing]

Yeah that one on the graph

[tough summit]

Ups, got it

Okay so the line is being cloned but I cant see it!

[mossy wing]

Can you make a line, and pause the game? Then look at the line in the Scene View to visually locate it

It might be fighting with the background, or behind it

[tough summit]

There you go:

It seems like it's in a weird place too

[mossy wing]

Yeah, the start point goes bad but the end point is good

[tough summit]

That's right!

[mossy wing]

I spotted the issue, the prefab clone is under the Canvas, which might interfere with it

[tough summit]

Oh, okay! What do I do?

[mossy wing]

Instantiate in in world space, by removing the last argument you're passing to Instantiate

[tough summit]

So removing one of the "parent"?

[mossy wing]

No, the whole thing

Just this
Instantiate(linePrefab, transform.position, Quaternion.identity)

[tough summit]

Now its cloning the line above the canvas like this:

Still no line visible

[mossy wing]

Yeah it's not visible because of that black background, since the canvas renders above what's in the scene. Unless that canvas isn't set up with Screen Space - Overlay

[tough summit]

it is Screen Space - Overlay

[mossy wing]

Okay, so disable the background for a moment and increase the Line Renderer's width back to 1

[tough summit]

Yes, now this is happening:

[mossy wing]

Ahhh I get it. You also need to convert the position in OnPointerUp before setting the position

Just like in the other two cases, except you pass hoverItem.transform.position into Convert

[tough summit]

Okay so I got this now:

    {
        if (!this.Equals(hoverItem) && itemName.Equals(hoverItem.itemName))
        {
            Vector3 worldPos = Converter(hoverItem.transform.position);
            line.SetPosition(1, hoverItem.transform.position);
            PHMatchLogic.AddPoint();
            Destroy(hoverItem);
            Destroy(this);
        }```

[mossy wing]

line.SetPosition(1, worldPos); instead and that should be it

[tough summit]

Okay now it's like in the last video but it stays in the right position at the end

[mossy wing]

So it's working as intended it seems. Add the background again and see if it's visible or not

[tough summit]

not visible since the lines are still cloned "behind" the background

or behind the canvas

[mossy wing]

Okay, so you need to change the Canvas render mode to Screen Space - Camera and assign the main camera

[tough summit]

It's visible but doing the weird thing at the end again, huh

[mossy wing]

Okay, I've got another idea because you probably don't want the line over the text, am I right?

[tough summit]

would be great if not.. but if it's a lot thinner it wouldnt be too bad

[mossy wing]

That eases out the whole thing, so we'll go with the fix

[tough summit]

alright

[mossy wing]

Set the canvas back to Screen Space Overlay, and remove the background entirely

[tough summit]

okay

[mossy wing]

Select your camera, and configure it so it doesn't render a Skybox, but rather a Solid Color instead

Choose your background color, that's done

[tough summit]

got that

[mossy wing]

Test the game, it should be good now

[tough summit]

it looks like this now

[mossy wing]

Yeah so it's good, not sure why you have a piece of line in the center of the screen at all times, you can remove that.
Also seeing a slight issue when clicking down before dragging, the line goes to the center automatically because the second point is like that by default, to mitigate put

line.SetPosition(1, worldPos);

in OnPointerDown

[tough summit]

idk either – it seems to be the line since the material is the same and when I deactivate the line that piece is gone

do you have an idea how to remove that?

[mossy wing]

Ah, it's because you have a copy of the line dangling here

You said it's a prefab, so remove it

[tough summit]

That's the original line, yes

but the LineRenderer is on that

[mossy wing]

Ah, that's not a prefab, so make that a prefab, and remove it from the scene

And drag and drop the prefab onto your script to make the link again

[tough summit]

But then it's there again isnt it?

[mossy wing]

No, because a prefab doesn't live in the scene, but rather in your project files

[tough summit]

Ah sorry, makes sense

[mossy wing]

So it won't be in the scene when you start, but your script has a copy of it because it's available everywhere since it's in your project files

[tough summit]

Where exactly do I add this? OnPointerDown looks like this atm – do I just put line.SetPosition(1, worldPos); at the end as well?

    {
        line = Instantiate(linePrefab, transform.position, Quaternion.identity).GetComponent<LineRenderer>();
        Vector3 worldPos = Converter(eventData.position);
        line.SetPosition(0, worldPos);
    }```

[mossy wing]

Yep, as the very last instruction

[tough summit]

So this looks great already! Is there a way to push the panels all the way in the back? I feel like its confusing for the player to not see where the line is going exactly because its hidden by the panels..

[mossy wing]

Hijacking the screenshot, but no, there is no way to do this. I would instead suggest to start and end the lines at the edges of the items like below (red lines)

[tough summit]

yea that would be nice, but how would I do this?

[mossy wing]

By having an empty GameObject at the right of the item, and set the line's first position to that object's position instead

Same thing for the items on the right, but the empty is at the left of the item, and you set the line's second position

[tough summit]

So like this?

Or smth like this?

[mossy wing]

The first one, but a bit thinner on the X axis

So the line is more at the edge

[tough summit]

Okay and I do this for all of the ones on the left as well as on the right (but there put the game object on the left side) and then link them as I did before with the Texts, right?

[mossy wing]

Yeah, if the script you're talking about is PHMatchItem, then create a public Transform lineAttachPoint; into it, and drag that empty onto the newly created "Line Attach Point" field in the Inspector

[tough summit]

Okay did that. Do I need to change anything else in the script?

[mossy wing]

Yep, in both OnPointerDown and OnPointerUp you need to pass hoverItem.lineAttachPoint.position to the Converter, instead of eventData.position.

Keep the code in OnDrag unchanged

[tough summit]

omg its looking so so good!!

Just when the game is finished and it switches to the end panel with the score the lines are still visible. I tried putting a canvas on top but its not working. Do you know how to fix this?

[mossy wing]

Yes

[tough summit]

I call this in that script: https://www.toptal.com/developers/hastebin/utayalelen.cpp

[mossy wing]

You should have a reference to all of the lines (in a List<LineRenderer>) that is stored in that PHMatchLogic class, that you can easily access from PHMatchItem since it's a singleton, and, when the game ends, loop through the list and Destroy() each item

[tough summit]

I know how to do a list manually, but how do I do it in this case?

[mossy wing]

PHMatchLogic

public List<LineRenderer> lines;
// ...
void Awake() {
  lines = new List<LineRenderer>();
  instance = this;
}

PHMatchItem

void OnPointerDown() {
  // rest of the code goes here
  PHMatchLogic.instance.lines.Add(line);
}

To clear the list in PHMatchLogic

foreach (LineRenderer line in lines) {
  Destroy(line.gameObject);
}

Dumping it all because I have to log off for the night, otherwise I won't be able to work properly tomorrow.
Oh and you need to make instance public on line 8 of PHMatchLogic to be able to access it from PHMatchItem

[tough summit]

All good, thank you so much for your help!!! It really worked wonders!

In case I am not able to figure this out on my own – could I come back to you tmrw?

How do I do that? I made it public but not working "Oh and you need to make instance public on line 8 of PHMatchLogic to be able to access it from PHMatchItem"

[mossy wing]

Yes, I'll archive the thread and I'll monitor it for any new questions beyond this point.
Not sure if this gives out a local time for you but I'll be around tomorrow from >> <t:1642444200:t> << and beyond.
I really have to go now.

[tough summit]

Alright. THANK YOU!!

[mossy wing]

Just curious what time does it display for you?

In my message above

[tough summit]

It says 7.30 pm

Im living in Germany

[mossy wing]

All good then, same time zone (GMT+1), so that's why there is no diff

[tough summit]

Ah I see! Well, I will talk to you tomorrow then. 🙂

[mossy wing]

Alright have a good night

[tough summit]

You too!

[mossy wing]

Archiving thread from this point.
Send a message to unarchive. I'll look for new stuff from this point and onwards.

[tough summit]

Hey, so I unfortunately couldn't make this work on my one. Would very much appreciate some more help. Just text me as soon as you're ready 🙂

[mossy wing]

Refreshed context for thread "line rendering"
Proceed.
Ready to pick up where we left off.

[tough summit]

Oh sorry, here I am

Let me start Unity real quick

Alright, there we go. We left off wanting to remove the lines from the end screen.

[tough summit]

I tried to put everything in the scripts you told me there but something didn't seem to be right.

[mossy wing]

Yes, and you were getting errors in the code

[mossy wing]

These two, if they're still up to date

[tough summit]

I made both of them a public static on top – is that even right?

[mossy wing]

Both of them? You should only have instance that is marked as public static

[tough summit]

PHMatchLogic: https://www.toptal.com/developers/hastebin/otoziwirav.csharp
PHMatchItem: https://www.toptal.com/developers/hastebin/takizoyiwa.cpp

[mossy wing]

Well, the variables are duplicate

[tough summit]

well both of the scripts have an instance at the top

[mossy wing]

Line 8 of PHMatchItem does not need to be public

Lines 9 and 10 of PHMatchLogic should be reporting errors, as the variable name is duplicate. Remove line 10

[tough summit]

yes, I just saw that, sorry

Now we are back to the errors I had before

[mossy wing]

One question, what IDE are you using to edit the code? I might have an idea to ease things out

[tough summit]

what's an IDE?

like what programm?

[mossy wing]

Yeah

[tough summit]

Visual Studio

[mossy wing]

Code? 2019? 2022? There are 3 of them

[tough summit]

2019 for Mac – Version 8.10.16 (build 2) it says

[mossy wing]

Alright, versions mismatch so it won't work - back to the original issue

[tough summit]

okay sorry 😦

[mossy wing]

Found an alternative, go here https://codeshare.io/, hit the big button in the center of the window, paste the whole code of PHMatchLogic in the editor that opens, and send the link here

[tough summit]

https://codeshare.io/78OZLj

Wow, it's working perfectly. Thank you so much, that wasn't too hard after all – I wish I could have done those steps yesterday on my own but I can next time!

[mossy wing]

Oh so the other script was working already

All good then

[tough summit]

Yes, I needed to put in Instance instead of instance and the error was gone

May I ask you one more thing? Regarding building the game and UI Texts going missing on WebGL?

[mossy wing]

Ask away, but know that I've never built nor diagnosed bugs that appear on WebGL

[tough summit]

Okay I'll try anyways. So when I build the game for mac everything is fine. For windows some bugs appeared (mostly related to the screen resolution) but I was able to fix them. Now when I build the game for WebGL on one specific canvas the text goes missing. I don't know if I am just not seeing something obvious or what is happening

I'll send you a screenshot in a sec

So all of the text except the heading but including the button goes missing. I've honestly not tried to just remake that canvas but I just feel like I am missing something obvious since the heading is staying..

[mossy wing]

Just the text of the button goes away, or does the whole thing (white background included) disappears?

[tough summit]

So all of the text disappears (Buttontext, Keyboard text, text in the bubble) but the heading stays

[mossy wing]

Hmm that didn't answer my question

The button specifically

[tough summit]

so the button itself stays

just the text disappears

[mossy wing]

Check the anchoring on the button object, it must be anchored bottom right as I see it

[tough summit]

So this is how it looks like in WebGL

[mossy wing]

Yeah there definitely is some anchoring issue here, your button is not at the same distance (from the bottom) as in the Editor screenshot

Same thing for the dude that talks

[tough summit]

So I just need to check one of the anchor presets or do I also have to adjust the position

[mossy wing]

Both of these. Once you select an anchor preset the position labels on the right of it will change, you need to position them like you want

[tough summit]

I don't get that to. When I change the position the button moves as well but it's already in the position where it should be

[mossy wing]

It's weird, it should be saying "Bottom" and "Right" normally. Can you set the anchor while holding Alt and Shift? It'll set the pivot and the position for you

Then, re-adjust

[tough summit]

ah okay, got it now!

[mossy wing]

Good, now do this for all the other elements, even the background (that one should be set to Stretch on both directions, the square at the bottom left of the anchor presets, while still holding Alt+Shift) so it adapts to the screen it's displayed on

[tough summit]

Oh it's working – I would have never thought of that. Thank you!!

[mossy wing]

The wonders of UI!
Without the anchoring your elements either fell out of the screen, or got compressed to negative sizes, rendering the text on the other side of the mesh

Hence why they were invisible

[tough summit]

That absolutely makes sense when I think about it

Thank you, you really helped a lot!!

[mossy wing]

No problem, and best of luck for the future! We'll probably meet again in one of the code channels sometime

[tough summit]

Probably yes! Thank you again and have a nice evening!

[mossy wing]

Same 👍

[tough summit]

Oh I need to bother you again, I am sorry. Are you still available for a minute?

[mossy wing]

Yeah go ahead

[tough summit]

So in the line game we just adjusted I have an issue. In the unity editor wits working great – when I have a score of 7/7 the endscreen appears. When I build it, the end screen doesn't appear anymore. Do you know what could be happening?

Like it just stays at the game screen

[mossy wing]

You'll have to debug that. You have a method that checks if the game has finished, and if it has it "switches screens".
The issue being that in a build, you have no console. So you need a way to communicate without the console

Maybe it's possible to access the JavaScript console and write something to it? If it is, you can use that

Otherwise, you need to add some text to the game, properly anchored, that you change when you need to, that acts as your makeshift console

You need to first know if the switch between screens is being made, and if that's the case, that's probably another anchoring issue

[tough summit]

This is so weird

I have build it 5 times now – it worked perfectly fine one time (except from playing it 3 times one time I got 8/7 points?) and the other 4 times it's doing weird stuff like in the video

in the unity editor its working fine

[mossy wing]

That video is on WebGL?

If that's the case, I'm blaming anchoring once more

[tough summit]

No its MacOS

😦 😦

[mossy wing]

Either way, if the resolution differences cause these issues, then it's 100% anchoring

Have you tried resizing the Game View to different resolutions in the Editor, and see how the objects move around?

[tough summit]

Okay so this comes out if I do it in a different resolution

(I tried different resolutions yesterday as well but I guess I never finished the game?)

[mossy wing]

So that's what prevents your script from running

Select that error to reveal the stack trace, it'll point the exact line it happened on

[tough summit]

So PHMatchLogic line 39 right?

[mossy wing]

Exactly

[tough summit]

Okay I am back in that shared code now https://codeshare.io/78OZLj

I am not sure – can you see what I have written?

[mossy wing]

I've updated the code, test again

[tough summit]

So, the lines are not disappearing anymore whatsoever the error is still there and the end screen not appearing

jk lines are still disappearing

[mossy wing]

Hang on I think I might know why

On the other script, when are you adding the line to the list?

If that's just after instantiating, then it's wrong. Because you have the possibility to cancel a line mid-draw, which destroys it, invalidating the reference that you added into the list!

[tough summit]

https://codeshare.io/X8pOYz

[mossy wing]

The line should be added when the draw is complete and correct

[tough summit]

Oh wow, this seems to work! Wow, thank you!

[mossy wing]

Perfect, I hope that was the last one of those annoying bugs.
I think it's safe to say that we've reached the end of the subject here. If you still have small, related requests, you can unarchive this thread, I'll check it from time to time.
Working from home tomorrow, I'll be slightly more available than usual (from 9am and onwards).

[tough summit]

Thank you so much! Have a good night!

[tough summit]

Hey, hope I am not bothering you but I'd love to ask you one more thing. It's kinda related to the other issue from yesterday with the end screen not popping up with a different screen scale.

[mossy wing]

Oh you're back, I'm late lmao, didn't notice the thread notification

So what's the issue?

[tough summit]

All good! I have this drag and drop game which works fine for 1920x1080px but on other screen scales the end screen just doesnt show up when finished. Now I wanted to fix it with anchoring everything and now the end screen isn't even showing up on 1920x1080px anymore.

Let me undo all the changes so I can show you proberly

This is how it is supposed to be:

This is how it works (or not) on specific screen scales:

[mossy wing]

Any errors? Because the drag-and-drop objects aren't disabled on the second video

[tough summit]

Not that I have seen – let me check again

[mossy wing]

See the difference in the Hierarchy at 0:27 in the first video, and 0:15 in the second one

[tough summit]

nope nothing

[tough summit]

yea right!

Well I have to be honest: The script which is checking if all of the spaces are filled and then enables the end screen I wrote all by myself (like no youtube tutorial) – it might be a bit messy and maybe the problem? idk ill send you

Success Script: https://codeshare.io/X8pKkM

(There are many more scripts if any of them could be the matter I'm happy to share)

As I said before – I tried to anchor everything new so it looks a bit nicer but then the end screen didn't even pop up on 1920x1080 resolution – maybe that information helps? Since I used the position of the game objects in the Success script I think that might have smth to do with it...

[mossy wing]

Code updated

[tough summit]

Debug doesnt reach console

[mossy wing]

For all possible resolutions?

[tough summit]

So I tried all of the ones I can choose from in UNITY and it's just for 16:10, WXGA well and of yourse free aspect

All the others are working fine so far

[mossy wing]

That's probably the cause of floating point imprecision then. Do you know what it is?

[tough summit]

Absolutely not

[mossy wing]

Computer have their limits, and sometimes you reach them. As float is a floating-point type (the decimal dot can navigate left and right to allocate more or less bits to the decimal part), you can get inaccuracies.
Since an image is worth a thousand words, have this example

So, by comparing two vectors, you might be stumbling upon one of these inaccuracies.
Take if (SpaceOne.transform.position == Answer1.transform.position).

You might think they're the same, but what if an imprecision slid under one of these vectors?
It might be checking if (10, 10, 10) == (10, 10, 10.0000000002), which of course returns false

[tough summit]

Wow, that makes sense. I didn't even know something like this existed. Is there even anything I can do to fix this?

[mossy wing]

Yes, you can compare the distance between these two vectors, and check if it's less than a certain constant (say 0.1)

[tough summit]

Okay, how do I do that?

[mossy wing]

(vector1 - vector2).magnitude gets a distance between vector1 and vector2

It's a float that you can easily compare to that 0.1 threshold

[tough summit]

hmmm okay...

I still don't really know what to do know.

I guess changing all of these? SpaceOne.transform.position == AnswerOne.transform.position

[mossy wing]

Hmm hang on, it seems like the == operator already accounts for that issue

To allow for floating point inaccuracies, the two vectors are considered equal if the magnitude of their difference is less than 1e-5.

[tough summit]

what's 1e-5 ?

[mossy wing]

0.00001

[tough summit]

makes sense, thx

[mossy wing]

Anyway, let's try with a bigger threshold and see if this solves it
if ((SpaceOne.transform.position - AnswerOne.transform.position).magnitude < 0.1f)

Repeat that for each condition in the if statement

[tough summit]

Wow, this actually seems to work!

I'll build it now and test it on the screen where I found the bug.

[tough summit]

It's working great on all screen sizes. Thank you so much, it seems like I am actually finished with my project now!