ฉันจะวาดเค้าร่างใน Unity3d ได้อย่างไร


13

ฉันพยายามเน้นสี่เหลี่ยมที่มีความสูงตามอำเภอใจ ฉันคิดว่าวิธีที่ง่ายที่สุดในการทำเช่นนี้คือการสร้างเกม "กล่อง" แยกต่างหากที่ระบุเค้าโครงสี่เหลี่ยมผืนผ้า

ฉันได้ลองใช้ทั้ง MeshRenderer + Transparent Texture และ LineRenderer เพื่อจัดเค้าร่างจุดสี่จุดของสี่เหลี่ยมผืนผ้า ไม่เป็นที่น่าพอใจมาก

ป้อนคำอธิบายรูปภาพที่นี่

(เปิดตัวแสดงเส้นตรงกลางปรับขนาดลูกบาศก์ทางขวา)

วิธีที่ถูกต้องในการทำสิ่งนี้คืออะไร? ฉันกำลังพยายามหารูปสี่เหลี่ยมมุมฉาก - เส้นรอบวงของความกว้างคงที่ตลอดสี่จุดที่ฉันเลือก

คำตอบ:


8

GUI.Box()ใช้

หากคุณต้องการสี่เหลี่ยมผืนผ้า 2 มิติ GUI เป็นวิธีที่จะไป สร้าง GUIStyle ใหม่โดยใช้รูปสี่เหลี่ยมผืนผ้าง่ายๆเป็นเนื้อ (ภายในของสี่เหลี่ยมผืนผ้าควรจะโปร่งใสของหลักสูตร), การตั้งค่าของค่าเพื่อที่จะไม่ยืดและโทรBorderGUI.Box(new Rect(...),"",myGuiStyle);

คุณสามารถใช้Camera.WorldToScreenPointวิธีการถ้าคุณต้องการร่างบางสิ่งบางอย่างในพิกัดโลก (เช่น 3D) เพียงจำไว้ว่าในพิกัดโลกของ Unity y ไปจากล่างขึ้นบนและใน GUI y ไปจากบนลงล่าง

ตัวอย่างรหัส:

void OnGUI()
{
    //top left point of rectangle
    Vector3 boxPosHiLeftWorld = new Vector3(0.5f, 12, 0);
    //bottom right point of rectangle
    Vector3 boxPosLowRightWorld = new Vector3(1.5f, 0, 0);

    Vector3 boxPosHiLeftCamera = Camera.main.WorldToScreenPoint(boxPosHiLeftWorld);
    Vector3 boxPosLowRightCamera = Camera.main.WorldToScreenPoint(boxPosLowRightWorld);

    float width = boxPosHiLeftCamera.x - boxPosLowRightCamera.x;
    float height = boxPosHiLeftCamera.y - boxPosLowRightCamera.y;


     GUI.Box(new Rect(boxPosHiLeftCamera.x, Screen.Height - boxPosHiLeftCamera.y, width, height),"", highlightBox);
}

นอกจากว่าฉันเข้าใจผิดแล้ว GUI.Box () จะถูกวาดอยู่เหนือวัตถุใด ๆ ในฉากเสมอ เป็นไปได้ไหมที่จะมีองค์ประกอบ GUI อยู่ด้านหลังหรือบางส่วนอยู่ด้านล่างของ gameobject?
Raven Dreamer

ใช่ GUI จะถูกวาดหลังจากวัตถุอื่น ๆ เสมอ มีแฮ็คที่คุณสามารถใช้เพื่อสร้างกล้องแยกต่างหากที่ด้านบนของ GUI ได้
ไม่เป็นไร

คำตอบนี้ทำให้ฉันได้สิ่งที่ฉันต้องการ แต่ฉันยังคงเปิดไว้ตอนนี้ด้วยความหวังว่าจะมีวิธีที่ดีกว่าในการทำสิ่งนี้ในกรณีทั่วไป
Raven Dreamer

ฉันยอมรับการแก้ไขการเพิ่มโค้ดตัวอย่างและแก้ไขข้อผิดพลาด GUI-y-upside-down ในนั้น
ไม่เป็นไร

1

ด้านล่างเป็นวิธีการที่ไม่ใช้ Shader

คิดว่ากล่อง 2d ของคุณไม่มีอะไรมากไปกว่าสี่บรรทัดโดยที่แต่ละบรรทัดถูกขยายในหนึ่งมิติเท่านั้น (อีกสองมิติคือส่วนตัดของขอบ) มันเหมือนกับว่าคุณต้องสร้างกล่องขึ้นมาในชีวิตจริงที่ซึ่งคุณกำลังรวบรวมความยาวแปรผันของไม้ที่ทุกคนมีขนาดหน้าตัดเท่ากัน

เมื่อทราบแล้วคุณสามารถสร้างส่วนประกอบได้BoxBuilderซึ่งเมื่อติดกับ GameObject แล้วจะสร้างและจัดการ GameObjects ลูกสี่ตัว วัตถุเกมย่อยแต่ละเกมเป็นหนึ่งในขอบกล่องของคุณและสามารถเป็นคิวบ์สามมิติที่ขยายในมิติเดียวเท่านั้น ด้วยระดับwidthและที่heightกำหนดBoxBuilderคุณสามารถคำนวณตำแหน่งที่จำเป็นและสเกลที่ไม่สม่ำเสมอของขอบลูกทั้งสี่ มันจะเป็นจำนวนมากpos.x=w/2, pos.y=h/2, ... scale.x=h, scale.y=wฯลฯ การจัดเรียงของรหัส

แม้ว่าฉันเชื่อว่าคุณกำลังขอแบบ 2 มิติเท่านั้นโปรดทราบว่าแนวคิดเดียวกันนี้สามารถนำไปใช้กับกล่อง 3 มิติได้หากจำเป็นซึ่งBoxBuilderตอนนี้ต้องสร้างและจัดการขอบลูก 12 ลูก แต่ปรับขนาดขอบแต่ละด้านในมิติเดียวอีกครั้ง


ใช้งานได้ แต่วิธีซับซ้อนเกินไป
ไม่เป็นไร

ถ้าฉันต้องทำแบบนี้ฉันจะใช้ตัวเรนเดอร์ 4 เส้น ...
Raven Dreamer

สิ่งนี้จัดการกับความลึกได้อย่างเหมาะสม
DuckMaestro

1

วิธีง่ายๆคือการใช้ Shader ที่มีสอง Passes: Pass แรกใช้จุดยอด shader เพื่อขยายขนาดของวัตถุสักเล็กน้อยและใช้ pixel shader เพื่อให้สีเป็นสีทึบที่เข้ากับสีที่คุณต้องการให้โครงร่างมีและ ดังนั้น Pass ที่สองจะทำการเรนเดอร์ปกติ


คุณสามารถยกตัวอย่างรหัสเพื่ออธิบายความหมายของคุณได้ดีขึ้นหรือไม่
Raven Dreamer

สิ่งนี้จะใช้ได้กับวัตถุนูนเท่านั้น (เช่นสี่เหลี่ยม) ซึ่งจุดกำเนิดอยู่ตรงกลางของเรขาคณิต
rootlocus

1

ฉันมีปัญหาเดียวกันนี้ในการสร้างโครงร่างยกเว้นฉันต้องการสร้าง "จังหวะ" สำหรับคิวบ์สามมิติและพบวิธีใหม่ในการทำสิ่งที่ฉันไม่เคยเห็นที่อื่นทางออนไลน์

ในภาพด้านล่างมีสองรูปร่างพร้อมโครงร่าง ด้านขวาคือคิวบ์ที่สร้างด้วย LineRenderer ซึ่งสร้างใบหน้าแบบแบนที่หันหน้าเข้าหาผู้ใช้เสมอ ฉันพบว่าวิธีนี้มีความผิดพลาดมากโดยมี "จังหวะ" แบบสุ่มปรากฏว่าเลียนแบบสามเหลี่ยมที่ประกอบเป็นใบหน้า

ด้านซ้ายเป็น "นวัตกรรม" ของฉันที่มี 12 ก้อนผอมแยกต่างหากสร้างสิ่งที่ดูเหมือนร่าง ในการเปลี่ยนขนาดของ "ลายเส้น" ในโครงร่างฉันต้องเพิ่ม / ลดขนาดของทั้งสองด้านของแต่ละ 12 ก้อนผอม สิ่งนี้จะใช้ได้กับโครงร่าง 2d เพียงแค่ใช้วัสดุเพื่อเปลี่ยนสีและ voila!

โครงร่างที่แตกต่างกันสองแบบ

ในภาพนี้คุณสามารถดูรายละเอียดของโครงสร้างของคิวบ์นี้ ทั้งหมดนี้สามารถสร้างได้ที่รันไทม์ แต่ฉันทำด้วยมือและใช้มันเป็นแบบสำเร็จรูป

รายละเอียด


0

ขณะนี้ฉันกำลังเผชิญปัญหาเดียวกันและวิธีแก้ปัญหาของฉันคือสิ่งที่ DuckMaestro และ Raven Dreamer แนะนำ - มีสคริปต์ที่สร้างวัตถุลูก 4 ตัวที่รันไทม์ซึ่งแต่ละอันแทนด้านข้างของเส้นขอบและแนบ renderers บรรทัดกับแต่ละคน

ในกรณีของฉันฉันจำเป็นต้องปรับขนาดเส้นขอบอย่างต่อเนื่องเพื่อให้มันอยู่รอบวัตถุของฉัน (A text mesh [ซึ่งใช้ mesh renderer] สำหรับฟิลด์ข้อความที่กำหนดเอง) ดังนั้นทุกครั้งที่ฉันทำสิ่งนี้:


float width = Mathf.Max(renderer.bounds.size.x + paddingX * 2, minWidth);      
float x = renderer.bounds.center.x - width / 2;
float height = renderer.bounds.size.y + paddingY * 2;
float y = renderer.bounds.center.y - height / 2;

AlterBorder(0, new Vector3(x - thickness / 2, y, 0), new Vector3(x + width + thickness / 2, y, 0)); //Bottom edge going left to right
AlterBorder(1, new Vector3(x + width, y + thickness / 2, 0), new Vector3(x + width, y + height - thickness / 2, 0)); //Right edge going bottom to top
AlterBorder(2, new Vector3(x + width + thickness / 2, y + height, 0), new Vector3(x - thickness / 2, y + height, 0)); //Top edge going right to left
AlterBorder(3, new Vector3(x, y + height - thickness / 2, 0), new Vector3(x, y + thickness / 2, 0)); //Left edge going top to bottom

AlterBorder() เพียงเข้าถึงตัวแสดงผลบรรทัดที่เหมาะสม (ระบุโดยพารามิเตอร์แรก) และตั้งค่าเริ่มต้นและสิ้นสุดเป็นเวกเตอร์ตัวแรกและตัวที่สองตามลำดับ

โปรดทราบว่าฉันใช้rendererเป็นข้อมูลอ้างอิงสำหรับขนาด แต่เห็นได้ชัดว่าคุณสามารถใช้รูปสี่เหลี่ยมผืนผ้าใด ๆ ได้ตราบใดที่ x, y เป็นมุมบนซ้าย

จากสิ่งที่ฉันบอกได้ว่ามันใช้งานได้ดีจริง ๆ ดูดีในเกมเพราะฉันสามารถเคลื่อนย้ายวัตถุที่มีขอบล้อมรอบในทั้ง 3 แกนได้อย่างง่ายดาย (แม้จะหมุนมันและเนื่องจากตัวแสดงเส้นจะเผชิญหน้ากับกล้อง ไม่ยากที่จะใช้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.