低成本實現觸控介面的方法

李安學長(他剛好是台藝前身藝專出來的，所以我就無恥的叫學長了啊～)

告訴我們「台灣電影最大的問題，就是沒有遠見，每個人都是單打獨鬥。」

希望能用這文章做個起頭，大家一起把台灣的軟硬實力串起來，讓台灣在第三次的工業革命中有一些小小機會能夠發揮。

目前的顯示技術來說已經可以在不管是硬的、軟的、透明的，都能實現。而觸控技術來說也一直在跟隨著顯示技術，但今天要討論的不是什麼薄膜式和內嵌式的觸控技術，而是以簡單零件可以實現的觸控方式。但也希望未來一些技術廠商能夠考量一下未來個人化工廠的趨勢，多少以開放式或零件式的方式做販售，讓更多的創意可能性發生。

現行可以實現觸控的技術有以下幾種方式（原文連結）

這幾種方式都是透過不同的光源打在想要觸控的表面上，然後透過特殊處理過的攝影機（濾掉大部份的一般光源）去捕捉觸控到的光源點，再使用影像辨識的軟體（CCV）去計算出觸控點，最後在你的最終製作軟體-Unity or Flash上去接收觸控訊號。

當然目前也有製作好的紅外線觸控框，可以訂購需要的尺寸，再插上USB即可。這種框主要會有大小尺寸及形狀的限制，但可應用在不透明的表面上，而上述方法則是有需要一定空間的限制（取決於攝影機能捕捉到的觸控大小所需的距離）。

IR Touch Frame TechIR Touch Frame

這次就先介紹我們前陣子在鳯甲美術館的繡外畫中展覽中的互動裝置所實現在布面觸控所用的雷射紅外線LLP＋CCV＋UNITY的應用。

  • Step 1 ﹣準備以下設備：

1. 紅外線雷射 x 2~4個(波段要在780 nm以上，即不可見紅外線光。功率強代表投射距離遠。紅光需要能打出一字型。)
PS：因雷射對眼睛會有傷害，請勿直射眼睛，安裝時請配帶可防該波段的護目鏡

2. 可透光之表面（玻璃、透明壓克力、薄布﹣需繃平等）

3. Webcam(最好沒有魚眼功能)

4. 3.5吋磁碟片或完全曝光的底片或紅藍綠三色玻璃紙（用來貼在Webcam鏡頭上，3.5吋磁碟片效果最佳或可以用底片加上玻璃紙）

  • Step 2 ﹣安裝方式：

1. 將3.5吋磁碟片外殼拆開，把裡頭的黑色磁片取出，剪一塊適合Webcam鏡頭大小並貼合在鏡頭上

disk inside

2. 將紅外線雷射安裝於想要做觸控的表面上的四個角落（如下圖）

Install Method

3. 將攝影機放置於能完全拍攝到想做觸控的表面大小的距離

  • Step 3﹣CCV：

CCV全名為Community Core Vision，是由NUI Group所開發出來跨平台的影像識別多點觸控軟體，它可透過TUIO/OSC/XML這三種方式傳輸給其他軟體作為觸控點的接收使用。使用上很方便，只要將影像接上並調整數值，選好傳輸方式即可。

以下網址為對岸的詳細解說

http://www.cnblogs.com/Thons/archive/2011/01/01/1923916.html

ccv

這邊要特別注意的是，我們要連接Unity時，要選擇圖示上23的選項。

  • Step 4 ﹣TouchScript：

最後就是將觸控點的資訊接入Unity 中了，這邊使用的插件是TouchScript，但大家上網Google: TUIO Unity還有一些其他的插件

而TouchScript則是我們這邊覺得比較簡單的一種。

TouchScript官網：http://interactivelab.github.io/TouchScript/

1. 開啟Unity後，開專案時選擇匯入TouchScript

import ts

2. 將TouchScript中的Prefabs資料夾裡的Touch Debugger拉入場景中

TD

3. 新增一個空的GameObject並將Component中的Touch Script裡的Touch Manager 及Input Sources的TUIO Input加至GameObject中

在這裡需注意TUIO input中的port是否與CCV的port 一致。在Touch Manager中可調整辨識的解析度。

TM

4. 在想做互動的元件上加入想感測的手勢及行為，這裡先用最簡單的Press及Release。

touchObj

5. 加入後在互動元件上編寫互動程式

using TouchScript.Events;
using TouchScript.Gestures;
using UnityEngine;

public class ButtonScript : MonoBehaviour
{
private void Start()
{
if (GetComponent<pressgesture>() != null) GetComponent<pressgesture>().StateChanged += onPress;
if (GetComponent<releasegesture>() != null) GetComponent<releasegesture>().StateChanged += onRelease;
}</releasegesture></releasegesture></pressgesture></pressgesture>

private void onPress(object sender, GestureStateChangeEventArgs gestureStateChangeEventArgs)
{
if (gestureStateChangeEventArgs.State == Gesture.GestureState.Recognized){
//按下時的反應程式
renderer.material.color = Color.gray;
}
}

private void onRelease(object sender, GestureStateChangeEventArgs gestureStateChangeEventArgs)
{
if (gestureStateChangeEventArgs.State == Gesture.GestureState.Recognized){
//放開時的反應程式
renderer.material.color = Color.white;
}
}
}

6. 在Camera上加入Component中Touch Script下Layers的Camera Layers，然後按下執行即可。
一個簡單的互動觸控介面就完成了。大家加油吧！

Share