Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use LineRender to achieve signature effect in Unity". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use LineRender to achieve signature effect in Unity.

A signature function is needed in the project, and two screens are needed to display it at the same time, but both are on UI.

Find two ways:

1. Modify the pixels of the picture, but it is a mosaic effect, which does not meet the demand.

2. Use LineRenderer's 3D signature system to create a 2D effect.

Change the pixel point:

Put the code first.

Using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; public class Test: ObjBase {public GameObject masked obj; private Texture2D massively textured; public Color massively colorized; public int size = 3; private Color [] mashed textureColorsStart; public RawImage showImg; void Start () {if (Display.displays.Length > 1) Display.displays [1] .Activate () If (Display.displays.Length > 2) Display.displays [2] .activate (); m_tex = m_obj.GetComponent (). Material.mainTexture as Texture2D; / / get pixel color from texture m_textureColorsStart = m_tex.GetPixels (); Debug.Log (m_tex.name);} void Update () {/ / Vector3 oldPos=Vector3.zero / / oldPos = Input.mousePosition; / / Ray ray = uiCam.ScreenPointToRay (Input.mousePosition); Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition); RaycastHit hit; if (Input.GetMouseButton (0)) {/ / float m_magnitude = (Input.mousePosition-oldPos) .magnitude; / / Vector3 dir = Input.mousePosition-oldPos If (Physics.Raycast (ray, out hit)) {/ / UV texture coordinates at the collision location. Vector2 pixelUV = hit.textureCoord; / / texture width in pixels pixelUV.x * = mtex.width; pixelUV.y * = mtex.height; / / Mapping UV coordinates take the upper right corner as the origin for (float I = pixelUV.x-1; I

< pixelUV.x + size; i++) { for (float j = pixelUV.y - 1; j < pixelUV.y + size; j++) { m_tex.SetPixel((int)i, (int)j, m_color); } } Debug.Log(pixelUV); m_tex.Apply(); showImg.texture = m_tex; } } if (Input.GetKeyDown(KeyCode.Space)) { //还原 m_tex.SetPixels(m_textureColorsStart); m_tex.Apply(); } //在处理鼠标按下的记录下位置，抬起的时候记录下位置，取2个位置中间的位置发射射线 //if (Input.GetMouseButtonDown(0)) //{ //} //if (Input.GetMouseButtonUp(0)) //{ //} } public void OnClick() { showImg.texture = m_tex; }}using System.Collections;using System.Collections.Generic;using UnityEngine; public class ObjBase : MonoBehaviour{ public bool IsShow { get { return gameObject.activeSelf; } } // Use this for initialization void Start() { } /// /// 显示 /// /// public virtual void Show(object parameter = null) { gameObject.SetActive(true); } /// /// 隐藏 /// /// public virtual void Hide(object parameter = null) { gameObject.SetActive(false); } } Test脚本是用来修改像素点的，ObjBase只是一个根父类，控制显示和隐藏。 测试场景用的Quad，通过读取他的mainTexture对应的像素，进行修改，UI中的话就是将一张图片转成Texture2D形式，通过读取像素点，进行修改即可，同时还可以实现同步效果。 项目中的Hierarchy窗口设置：

Project requirements: two canvases are used, MainCamera illuminates Quad, and two UI cameras illuminate two canvases respectively. The Render Mode of the canvas is set to Screen Space-Camera format. GameObject mount script, Quad is used to modify the pixels of the image on it.

Effect picture:

Use LineRenderer 3D underlining method to achieve 2D signature effect:

Code first:

Using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;using System.Text;using System.IO;using UnityEngine.EventSystems; public class Test5: MonoBehaviour {screenshot Color [] colors; Texture2D myTexture2D; public RawImage photo; public RawImage showImg where the public GameObject drawObj; private bool beginDraw; private GameObject obj; public Transform parent; public RawImage rawImg; public Camera UICam; public Camera main;// main camera and the UI camera are illuminated together [SerializeField] private string _ name; public RectTransform canvas1; public void SaveFile () {Camera mainCam; GameObject cam = Camera.main.gameObject; if (cam) {mainCam = cam.GetComponent ();} else {return;} RenderTexture renderTex; renderTex = new RenderTexture (Screen.width, Screen.height, 24) MainCam.targetTexture = renderTex; mainCam.Render (); myTexture2D = new Texture2D (renderTex.width, renderTex.height); RenderTexture.active = renderTex; myTexture2D.ReadPixels (new Rect (0,0, renderTex.width, renderTex.height), 0,0); myTexture2D.Apply (); byte [] bytes = myTexture2D.EncodeToJPG (); myTexture2D.Compress (true); myTexture2D.Apply () RenderTexture.active = null; File.WriteAllBytes (Application.dataPath + "/ StreamingAssets/TextureTemp.png", bytes); mainCam.targetTexture = null; GameObject.Destroy (renderTex);} public void OnClick () {main.rect = new Rect (0,0,1,1); CaptureCamera (main,new Rect (Screen.width * 0f, Screen.height * 0f, Screen.width * 1f, Screen.height * 1f)) } / / a pair of camera screenshots. / The screenshot2. / Camera. The camera to be screenshot / Rect. Screenshot area Texture2D CaptureCamera (Camera camera,Rect rect) {/ / create a RenderTexture object RenderTexture rt = new RenderTexture ((int) rect.width, (int) rect.height, 0); / / temporarily set the targetTexture of the related camera to rt, and manually render the related camera camera.targetTexture = rt; camera.Render () / / ps:-if you add a second camera in this way, you can capture only the images seen together by a few specified cameras. / / camera2.targetTexture = rt; / / camera2.Render (); / / ps:-/ activate the rt and read pixels from it. RenderTexture.active = rt; Texture2D screenShot = new Texture2D ((int) rect.width, (int) rect.height, TextureFormat.RGB24, false); screenShot.ReadPixels (rect, 0,0); / / Note: at this time, it reads the pixel screenShot.Apply () from RenderTexture.active; / / resets the relevant parameters to continue to display camera.targetTexture = null on the screen using camera / / camera2.targetTexture = null; / / ps: camera2.targetTexture = null; RenderTexture.active = null; / / JC: added to avoid errors GameObject.Destroy (rt); / / finally, these texture data are transformed into a png image file byte [] bytes = screenShot.EncodeToPNG (); string filename = Application.dataPath + string.Format ("/ Screenshot_ {0} .png", _ name) System.IO.File.WriteAllBytes (filename, bytes); Debug.Log (string.Format ("Screenshot: {0}", filename); showImg.texture = screenShot; main.rect = new Rect (0.25f, 0.35f, 0.5f, 0.5f); return screenShot } void Start () {if (Display.displays.Length > 1) Display.displays [1] .activate (); if (Display.displays.Length > 2) Display.displays [2] .activate ();} / / Update is called once per frame void Update () {if (Input.GetMouseButtonDown (0)) {beginDraw = true Obj = Instantiate (drawObj) as GameObject; obj.transform.parent = parent;} if (Input.GetMouseButtonUp (0)) {beginDraw = false;} if (beginDraw) {Vector3 position = new Vector3 (Input.mousePosition.x, Input.mousePosition.y, 10f); position = Camera.main.ScreenToWorldPoint (position) / / Vector3 localPoint; / / if (RectTransformUtility.ScreenPointToWorldPointInRectangle (canvas1, position, null, out localPoint) / / {/ / position = localPoint; / /} DrawText dt = obj.GetComponent (); dt.points.Add (position); dt.Draw (); dt.line.startColor = Color.yellow Dt.line.endColor = Color.yellow; dt.line.startWidth = 0.03f; dt.line.endWidth = 0.03f;}

Test5 is an operation of underlining and intercepting signatures. It is bound to an empty object, and the OnClick function is bound to a button.

Line: making signature preform

Using System.Collections;using System.Collections.Generic;using UnityEngine; public class DrawText: MonoBehaviour {public List points = new List (); public LineRenderer line; private void Awake () {line = GetComponent ();} public void Draw () {line.positionCount = points.Count; for (int I = 0; I

< points.Count; i++) { line.SetPosition(i, points[i]); line.startWidth =2f; line.endWidth =2f; } } // Use this for initialization void Start () { } // Update is called once per frame void Update () { }} Draw Text脚本挂在预制体Line上，Line 添加LineRenderer组件，同时Material中加入自己创建的材质球 项目需求：Hierarchy窗口设置 和上面一种方法一样，也是两个画布，两个UI相机，同时需要一个MainCamera parent为空物体，用来作为根节点，将签名时实时生成的预制体放在其下面，作为子节点，方便后面进行销毁，重新签名。 重点： 第二种方法使用的是特定相机照射画面进行截图，Test5中的CaptureCamera方法就是截取主相机照射到的画面。由于签名不能进行全屏进行截图，只能部分截图，类似相面的画面 下面会有一些常规的功能按钮，重新签名，保存签名等等操作，这些操作就是在UI上进行签名。 所以，通过修改MainCamera的Viewport Rect窗口来进行截图，同时能够实现正常的签名操作。 MainCamera的Viewport Rect设置： 运行刚开始： 通过设置这个属性，可以使签名界面呈现上一个图的效果，前面是UI层，后面是3D层。 然而在截屏图的时候如果始终保持Viewport Rect是上面的设置，则截图的时候仍把周围的黑色部分也截取出来，刚开始以为特定相机照射截图只截取Viewport Rect中的图像，后来测试是周围的所有黑色部分也截取了，这样就不满足要求。 所以，在代码中签字 的时候保持上面的设置，截图之前main.rect = new Rect(0, 0, 1, 1);设置成全屏，截好之后重新回复成原来的设置 main.rect = new Rect(0.25f, 0.35f, 0.5f, 0.5f);，截图完成之后将签名图片赋值给第二个屏幕画布中的RawImage进行展示。 达到效果。结合UI实际签名过程中 中间的白色部分，通过设置MainCamera中的Camera组件中的Background（设置为白色）以及天空盒（Windows->

Lighting- > Settings- > Scene- > Skybox Material is set to empty), set to the desired color. When making UI, the part that needs to be signed can be made transparent.

Effect picture:

At this point, I believe you have a deeper understanding of "how to use LineRender to achieve signature effect in Unity". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.