Home / Developer  / Game Development  / Unity 3D  / เขียนเกม Unity การทำ ตู้ถ่าย Sticker ผ่าน Webcam

เขียนเกม Unity การทำ ตู้ถ่าย Sticker ผ่าน Webcam

ช่วงนี้มีงานด้าน Interactive Media มากขึ้นจะใช้ HTML5 ขี้เกียจทำ Responsive ลองมาจบงานด้วย Unity ก็ถือว่าโอเคดีกับการทำตู้ Sticker ผ่าน Webcam

งานนี้เป็น Tutorial How to ง่ายๆ ในการใช้ Webcam ของเครื่องคอมฯ ไม่ก็ตู้ Kiosk สำหรับเล่น Interactive Media ทั้งหลายให้ถ่ายรูปหน้าของผู้เล่นแล้วบันทึกภาพเก็บไว้ใน folder ของงาน แล้วค่อยดึงภาพจาก folder ที่เก็บภาพมาใช้กับ RawImage ของเกม โจทย์ง่ายๆ ทำง่ายๆ รับเงินง่ายๆ และเอามาแชร์กัน เผื่อใครอยากจะมาเรียนผมก็สอนที่ หลักสูตรผมที่มหาวิทยาลัยผมอยู่

ก่อนอื่นเราจะต้องคิดว่า เราจะวางหน้าของเราไปซ้อนตัวละครยังไง ให้เราออกแบบ face_base ที่เราจะไปซ้อนก่อนซึ่งเราจะเลือกภาพกราฟิกของ Face_base ดังนี้

ทำการเปิด Photoshop หรือใครเบื่อก็ใช้ Gimp ตัดทำ Mask และ Outline ของใบหน้าออกมา ตามตัวอย่างข้างล่าง

ทำส่วนของ Mask ตัด Crop มาเฉพาะใบหน้า

ดราฟเส้น Outline ของใบหน้าส่วน Mask เก็บไว้

จะเห็นว่าเราจะมีไฟล์กราฟิกทั้งหมด 3 ไฟล์ คือ face_base, face_mask และ face_outline สำหรับทำงานร่วมกับการถ่ายภาพ

เปิด Project unity ขึ้นมา:

ทำการออกแบบหน้าจอเป็น Portrait 9:16 หลังจากนั้นวาง Canvas ส่วนของ Button และ RawImage ลงไปออกแบบหน้าจอ UI ของเกม

ไปที่ Main Camera สร้าง C# Script ขึ้นมาชื่อว่า module_photo.cs เขียนคำสั่งดังนี้:

ประกาศส่วนของ Global Variable ดังนี้:

ภาพที่ถ่ายได้จะทำการ สุ่ม chars ออกเป็นอักขระที่ไม่ซ้ำกันเก็บลงตัวแปร code ทำการ implement ส่วนของเมธอด start() ดังนี้:

เป็นการเรียกทำงานของ rawImage ให้ไปแสดงผล webCamTexture ดังนั้นต้องลาก RawImage จาก Hierarchy ไปวางที่ Maincamera ส่วนของ module_photo เมื่อทำงานถูกให้เพิ่ม Mesh Renderer เข้าไปใน Main Camera

เพิ่มคำสั่งต่อไปนี้:

เมธอด ShootCamera จะไปเรียก TakePhoto() เพื่อทำการสร้างไฟล์ PNG ขึ้นมา แล้วไปจัดเก็บใน folder ชื่อว่า photos ซึ่งเราต้องไปสร้าง folder ดังกล่าวไว้ที่ photos (และอย่าลืมเมื่อไรที่ Publish เป็น standalone ต้องสร้าง folder ไว้ path เดียวกับ ตัวเกม EXE)

ปรับค่าของ Inspector ของ module_photo เป็นดังนี้

ส่วนของ UI Button ให้ลาก Main Camera ที่มี Module_photo ไปวางไว้แล้วเรียก Action ไปที่ ShootCamera

วาง Outline ของใบหน้าไว้ใน Raw Image

ทำหน้า Scene อีกหน้าไว้ตอนถ่ายภาพเสร็จ กลับมาดูภาพรวมของ module_photo จะเป็นดังนี้:

ทดสอบการถ่ายภาพของเรา

 

ภาพของเราจะถูกเก็บไว้ที่ folder photos ที่อยู่ path เดียวกับ Assets ของ Unity

หน้าที่ 2 ของแอพพลิเคชันให้เราออกแบบหน้าจอ โดยการวาง face_base และ Mask ลงไปดังนี้:

เอา Image แล้วเลือก Face_mask มาวางซ้อนใบหน้าของ face base ปรับสีให้แตกต่าง หลังจากนั้นให้สร้าง RawImage ข้างใน Face_mask อีกที

ไปที่ face mask หรือ Image_mask เลือก Inspector ใส่ Component เพิ่มเข้าไปคือ

แทรกส่วนของ Mask ลงไป จะเห็นว่าใบหน้าของ RawImage จะปรากฏแค่ส่วนที่มี Face Mask คลุมไว้

สร้าง Script C# ขึ้นมาว่า module_result.cs

เป็นการรับค่า PlayerPref ส่วนของ code ที่เรา Generate จากหน้าก่อนหน้า เก็บไว้มาเรียกให้ RawImage ดึงใบหน้าของเราขึ้นมา แล้ว Crop ด้วย Mask ของ Face Mask ทดสอบโดยการรัน

ขั้นตอนต่อมาคือการทำ Screenshot เพื่อ Generate ภาพนี้เอาไปใช้ เป็น ไฟล์ PNG ไว้แชร์กันเป็น Class ของคนอื่นจาก Stackoverflow ครับ ให้สร้าง folder ชื่อ screenshots แล้วเอาตัวนี้ไปใช้กับปุ่ม Save

เรียบร้อยละ แค่นี้เราก็สร้าง Interactive Media โปรแกรมได้หนึ่งตัวแล้วเอาไปประยุคใช้กันนะ

Source code: https://github.com/banyapondpu/stickermachineUnity

Comments

POST TAGS:

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: