How to draw marks on Unity 3D plane? - unity3d

I am new to Unity. Sorry if I have a beginner style of question.
I want to implement a 3D Chess game in Unity. I have already implemented a C++ shared library that contains the whole AI thing. I have used this library in WPF and Android and it is tested perfectly. Now it is Unity's turn.
When the user selects a piece, next moves of it should be shown.
These marks can be a light or image. Circular or rectangle.
One way to do this is to have 64 marks per each square of the Chess board and change their visibility programmatically.
The other way, which I personally prefer, is to draw the marks programmatically. But I don't know how to draw on my Chessboard plane.
Please guide me with it.

FINAL RESULT (Just a sketchup!)
STEP BY STEP:
(I assume you have already had a chessboard)
1. Create a Material & configure it like in the below image. Note that the albedo green is 50% transparent:
2. Create a Quad & assign it the newly created Material above. Then set
it up like in the below image:
3. Now we will add the glow effect. First, we need to turn off the
Anti-Aliasing by switching to Good Quality instead of Fantastic.
4. Second, we need to enable HDR in the main camera:
5. Third, we need to import the Image Effects package. This package
is part of the Standard Assets that is shipped with Unity. It is
completely free. Get it here if you haven't.
https://www.assetstore.unity3d.com/en/#!/content/32351
You only need the Image Effect package.
6. Now add the Bloom effect to your main camera.
7. That's it! If you need to hide it via code then get the reference to
it and execute this line of code:
yourQuad.SetActive(false);
See more here:
https://docs.unity3d.com/ScriptReference/GameObject.SetActive.html
8. Finally, duplicate that quad to create 64 ones & position them
properly. There are 2 tricks that can help your life in hell a lot
easier:
To quickly duplicate a group of objects: select all of them and press: Ctrl + D
To enable edge-snap: select your quad and hold down V then hover your mouse over the quad's vertex. You will see a white square around it. Drag that vetex and see the magic.
9. From this on, it is your game logic to implement. You could store
all the quads in a 2-dimensional array (matrix) and manipulate it
yourself, that it all I can think of. Goodluck!

Related

2D sprite problem when setting up an instant messaging UI

I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.

How to create a slider without an outline?

I want to create a slider without an outline.
Like this one:
Note rounded edges.
I assume I need to create a sprite for that. Unfortunately, I can't find any good tutorials on sprites for sliders. I think the easiest way would be to edit the built-in one but I don't know how to get it for editing.
This is how the original slider from my Unity looks like:
Note the outline.
So, surprising solution that should be available to all of us.
Put the default slider in and go to the Source Image for both the Background and Handle. Instead of using what is there, change it to another Unity Standard sprite called TouchpadSprite. This should do the trick. Not sure if the fact that this is called 'touchpad'sprite will cause a problem when make a PC game, but I doubt it. FYI the TouchpadSprite is from the "Standard Assets (for Unity 2017.3)" that is available for free in the Unity Asset Store. Feel free to only import the sprite itself. The Asset Pack itself is pretty large, but there is a lot of good/useful stuff in there.
Also, you will have to increase the Pixels Per Unit Multiplier value. My picture shows what I had to increase it to. This will allow you to choose the rounding of your edges as well. Play with it and let me know if it works.
Hope this helps!

Draw curved lines with texture and glow with Unity

I'm looking for an efficient way to draw curved lines and to make an object follow them in Unity.
I also need to draw them using a custom image and not a solid color.
And on top of that I would like to apply an outer glow to them, and not to the rest of the scene.
I don't ask for a copy/paste solution for each of these elements, I list them all to give some context.
I did something similar in a web app using the html5 canvas to draw text progressively. Here a gif showing you the render:
I only used small lines to draw what you see above. Here a very big letter with thinker lines so lines are more visible:
Of course it's not perfect, but the goal was to keep it simple and efficient. And spaces on the outer edges are not very visible in normal size.
This is used in an educational game working on mobile as a progressive app. In real world usage I attach a particles emitter to it for better effect :
And it runs smoothly even on low end devices.
I don't want to recreate this exact effect on Unity but the core functionality is very close.
Because of how I did it the first time, I thought about creating a big list of segments to draw manually, but unity may have better tools to create this kind of stuff, maybe working directly with bezier curves.
I a beginner in Unity so I don't really know what is the most efficient way to do it.
I looked at the line renderer which seemed (at first) to be a good choice but I'm a little bit worried about performances with a list of 500+ points (considering mobiles are a target).
Also, the glow I would like to add may impact on the technique to choose.
Do you have any advice or direction to give me?
Thank you very much.

Displaying ARKit nodes in relation to real objects

I am trying to draw a box that can help someone understand the dimensions of an item, but I keep having the issue that since I first need to recognize a plane when I put my physical item on top of the plane, my box gets drawn in front of the item.
Is it possible to somehow overcome this?
#John Scalo is right, your problem is not having to first detect a plane, but it's that your render engine doesn't know that part of your green box frame is occluded (hidden) by a real-world object.
"…to somehow overcome this"
Yes, and by doing so you might be "solving" your original problem—help someone understand the dimensions of an item.
(Depending on your choice of render engine, e.g. SceneKit) You can add an invisible 3D object that has the same dimensions as the real-world object; so the render engine will "know" that some parts of your box frame are behind this (for the user invisible) 3D object. Therefor, you can tell it not to draw those parts of your box frame, which will give the illusion (borrowing from Apple here) that your soda can has the box around it.
These workarounds are inaccurate, but maybe their accuracy is enough for the level of realism you are trying to achieve:
Option 1: 1. After detecting the desk surface, place a semi-transparent 3D object over the soda can and then resize it (gestures/buttons your choice) until it's about the dimensions of the soda can. 2. Confirm that you're done, and just don't draw a texture on it at all just let it occlude the green box frame.
Option 2: Hold your device near the edges of the soda can and add "enough" ARAnchors to be able to create a "bounding shape" that (again) can be used to capture the real-word object and occlude that.
Option 3: (intense, and perhaps the least accurate) Use your finger to "brush" over the object from various angles, and on each touch perform a hit test (hopefully the top/nearest hit is a part of your soda can) and build up a "bounding shape" that way.
Option X: any combination of 1 - 2 - 3.
Good luck, there's lots of people trying to work around this device/ARKit limitation at them moment, so keep your eyes open for good ideas.
The problem you're dealing with is called occlusion, and ARKit doesn't (currently?) include occlusion support. Maybe some day soon iPhones and iPads will begin to ship with LIDAR (or similar), in which case ARKit will be able to detect objects in the scene, making occlusion much easier.

Unity3D - Make texture edges not stretch

I've been searching around for this one for a bit, and unfortunately I can't seem to find any good, consistent results. So, in the Unity UI system, buttons can stretch without becoming pixelated or distorted. This is because the texture is split up into 9 parts - the corners, middle, and sides.
This works because the button's middle and sides are stretched, but not the corners. Then, the button appears not pixelated, at any dimension.
So, the question is as follows: How can I do the same thing for a transparent, unlit texture in 3D space? I have a speech bubble texture on a flat plane that I know how to re-scale to fit the text in the speech bubble.
I've set the texture type to Multiple Sprite, and divided it up into 9 parts. However, I cannot seem to find where I can set the texture to act like the UI button does, and I'm not sure that this is even possible in this way in 3D space.
Is there a way, or should I just make the different parts of the texture different objects, and move them together? That would seem very inefficient and ugly compared to this.
To accomplish what you are asking, you would need to create tiles for this speech bubble and then write a script that procedurally builds a speech bubble based on the plane's scale value. You could also try just changing the texture's Filter Mode to Point.
However I really don't think you should be using textures for this anyway. Why not just use a Unity Canvas and set the Render Mode to World Space? Then you can just set your text box to be a sprite, not a texture, and set its filter mode to Point (See below). This would also make it a lot easier for when you want there to be text in the speech bubble later on.