JEL 前言近幾年政府非常著重傳統文化的保存與推廣, 並積極著力於傳統皮影戲的展覽與研習活動, 自民國九十一年起縣內陸續增加皮影劇團和成員, 六年來已有一百四十二所次學校近一千七百人次參與演出 ; 並安排皮影戲團巡迴全台各地演出, 自九十一年到九十六年舉辦八十一場次,2008 年

Size: px

Start display at page:

Download "JEL 前言近幾年政府非常著重傳統文化的保存與推廣, 並積極著力於傳統皮影戲的展覽與研習活動, 自民國九十一年起縣內陸續增加皮影劇團和成員, 六年來已有一百四十二所次學校近一千七百人次參與演出 ; 並安排皮影戲團巡迴全台各地演出, 自九十一年到九十六年舉辦八十一場次,2008 年"

歌窦
7 years ago
Views:

1 JEL 以 Inverse Kinematics 骨架融入皮影戲操作之悅趣學習與介面設計研究 A study on game-based learning and interface design for manipulation of Puppy Shadow with inverse kinematics technique 廖冠智國立新竹教育大學數位學習科技研究所助理教授 can@mail.nhcue.edu.tw 蕭朋威國立新竹教育大學數位學習科技研究所碩士生 g @mail.nhcue.edu.tw 摘要皮影戲是傳播中華傳統歷史文化相當有特色的鄉土表演藝術之一, 也是一種平民化且大眾化的娛樂消遣活動近幾年政府也慢慢重視傳統藝術的保存與推廣, 皮影戲的動作技藝是非常富有娛樂性的, 因此本研究利用 Flash CS4 軟體的 IK 骨架的概念, 將骨架設定於影偶關節上並模擬影偶動作, 建置皮影戲單機式數位悅趣化學習系統, 觀察實際動作並設計影偶動作所對應的按鍵, 探究如何以媒體科技所提供的實體操作方式 ( 鍵盤與滑鼠等 ), 設計情境式的挑戰競賽活動和互動遊戲, 以延展學習價值與增進樂趣關鍵詞悅趣學習皮影戲反向關節介面設計 Abstract: Dissemination of traditional Chinese Puppy Shadow is a unique history and culture rather one of the local performing arts, but also a civilian population and popular recreational activities. The government has slowly and promotion of traditional arts in recent years, Puppy Shadow s movement is very entertaining. This study implements Inverse Kinematics technique of Flash CS4, and set IK bone in the Puppy Shadow s joint and simulate Puppy Shadow s action. Building shadow interest in stand-alone digital learning system, and observe the actual impact dual action movement and designed the corresponding button, to explore how science and technology provided by the media entities operating mode (keyboard / mouse), design situational challenge competitions and interactive games to enhance the value of extended learning fun. Keywords: Game-based learning, Puppy Shadow, Inverse Kinematics, interface design

2 JEL 前言近幾年政府非常著重傳統文化的保存與推廣, 並積極著力於傳統皮影戲的展覽與研習活動, 自民國九十一年起縣內陸續增加皮影劇團和成員, 六年來已有一百四十二所次學校近一千七百人次參與演出 ; 並安排皮影戲團巡迴全台各地演出, 自九十一年到九十六年舉辦八十一場次,2008 年在國父紀念館也展出補燈捉影皮影戲文物展相關活動, 由於科技的發展, 台北藝術大學科技藝術研究所也在民族藝師數位博物館設計皮影快打的互動遊戲製作, 利用簡單的鍵盤和滑鼠做操作,2010 年偶戲藝術節也引進新科技帶動新視覺效果, 像是使用多點觸控感應技術與紅外線感應技術將傳統皮影戲轉為觸控螢幕操作, 讓學童可以實際操作與參與, 並從中學習皮影戲的操作及動作方式而本研究將分析皮影戲的動作技藝, 並藉由 Flash CS4 IK 反向運動的特性與概念應用在影偶人物設計與架設, 利用骨架功能模擬影偶動作製作影偶動畫, 並藉由分析系統設計與測試系統並以教育軟體模式為基礎, 發展並建置單機式數位皮影戲悅趣化學習系統, 藉由動畫的賞析與情境式的挑戰競賽活動, 增加其學習興趣與強化動機 ( 一 ) 分析皮影戲戲偶傳統之操作模式, 並探究如何將 IK 骨架融入影偶動作技藝中 ( 二 ) 學習影偶動作對應到鍵盤之操作模式, 並設計單機式數位皮影戲悅趣化學習遊戲之操作模式與進行介面設計 2. 相關文獻 2.1. 悅趣化學習教育部於 2009 年提出建置中小學優質化均等數位教育環境計畫教學動機, 運用電腦與資訊網路的即時性互動性多媒體傳播與自主性學習環境等特質, 將學習情境與模式融入教學課程中, 可以提高學習者興趣, 並吸引學習者注意力楊秀惠 (2007) 研究中提到, 透過樂高積木遊戲過程中, 能訓練學童在創造力想像力手眼協調動手做及同儕合作間的互動學習模式而教育性電腦遊戲乃根據動畫的特性配合聲光影像的效果, 並將教學目標融入遊戲軟體, 促使學習者在遊戲競爭的氣氛中引發學習動機, 並達到教學目的 ( 黃慧美,2002) Garris Ahlers Driskell 三位學者也提出遊戲應用於學習時, 可以包含輸入 (Input) 過程 (Process) 輸出(Output) 三部分, 藉此遊戲模型中第一部分中的遊戲特性包含奇幻性規則或目標互動挑戰好奇性和控制性 ; 教材內容需將教學策略作為基礎和依據融入數位遊戲中, 藉由這些互動與操作方式讓學習者達到學習成效 2.2. 遊戲人物操作方式現今市面上操作人物角色遊戲非常多元化, 像是魔獸世界 CS 動作射擊遊戲, 快打旋風與格鬥天王兩人角色格鬥遊戲等, 不但出現在一般電子遊戲機上, 也可以利用電腦的鍵盤和滑鼠做操作, 而藉由電腦的基本實體操作設備 ( 滑鼠和

3 JEL 鍵盤 ), 遊戲設計者其實也設計出許多不同種類的操作遊戲, 研究者將其歸納成下列幾項,1. 一般滑鼠操作模式 : 單鍵操作模式, 如 :FACEBOOK 寵物社群的釣魚和跑步小遊戲, 藉由力量條的大小趨向並滑鼠左鍵做操作雙鍵操作模式, 如遊樂場的賽車遊戲, 同時點擊滑鼠左右鍵控制車子速度, 並利用滑鼠的移動作為車子左右方向移動滾輪移動式窗, 如 : 如 FACEBOOK 遊戲中檢查寶物或是視窗卷軸上下移動, 較少用於人物角色之操作 2. 鍵盤操作模式 : 上下左右鍵方位操作, 如 : 小朋友下樓梯他利用鍵盤的方向鍵作為人物方向的移動, 藉由下樓梯的方式閃避障礙物 SPACE 鍵搭配方位鍵操作, 如 : 小朋友上樓梯, 它跟下樓梯的不同點在於 SPACE 鍵的應用, 運用力量條的方式加按 SPACE 件搭配做跳躍的動作, 方向鍵則為移動的方式, 而 GOGOGO 共玩 ONLINE( 圖 1) 也是利用鍵盤 SPACE 和單鍵作為翻轉和移動的設定快速鍵與熱鍵模式, 如 : 快打旋風和格鬥天王, 它是利用文字單件和快速鍵作為招式的搭配, 方向移動則是利用方向鍵 3. 鍵盤搭配滑鼠操作模式 : 方位鍵移動搭配滑鼠視角轉換操作, 如仙劍奇俠傳 3 利用方向鍵操作角色移動, 並且利用滑鼠點擊選擇裝備和攻擊模式, 滑鼠的滾輪則為視窗左右移動和視角變化的調整滑鼠左右點擊與位移搭配鍵盤快速鍵操作, 如 : 世紀帝國和魔獸世界此種類的即時戰略性遊戲, 藉由點擊滑鼠左右鍵作為角色的操作方式, 並且遊戲有設計單鍵的快速鍵熱鍵以提升遊戲者在玩遊戲的速度小結 : 滑鼠的操作簡單不複雜, 學習者容易上手並進入情境, 在操作人物的方面只需點擊人物的感應區即可以, 而滑鼠移動通常作為角色的方向的變化方式鍵盤的操作通常以方向鍵作為基本的移動設計, 增加其 SPACE 鍵作為子彈的發射或是跳躍的設定, 進階到設定文字單鍵的武器填裝或是裝備的轉換, 滑鼠和鍵盤做搭配較為複雜, 而且學習者在進入遊戲時可能較不易適應, 但是熟練後較容易提升遊戲速度和攻擊戰略的變換多元化 2.3. 數位皮影戲相關動作設計由於科技的進步, 利用傳統皮影戲的元素來呈現傳統藝術, 不但賦予了新的詮釋方式而保有原始元素, 數位化的皮影戲動作不但真實, 製作上也較為方便台灣藝術大學學生創作研究中提到線帶皮影戲設計概說中指出, 影偶的關節設計是以共心圓做設計理念, 故合理的運動狀態在於人的手臂和肩關節之間為 360 度的形態, 至於手肘到上臂間就為 180 度, 至於皮影影偶活動上都以線做為活動上的限制 ( 黃興武,2001) 台北藝術大學科技藝術研究所也在民族藝師數位博物館設計皮影快打的互動遊戲製作 ( 圖 2), 此互動遊戲是運用滑鼠的左右橫移來移動腳和身體各部位, 鍵盤的上下左右做為前進後退和跳躍的動作 2010 年影偶藝術節, 創作者陳俊瑋使用多點觸控感應技術與紅外線感應技術將傳統皮影戲利用觸控螢幕做操作 ( 圖 3), 此操作模式讓學習者可以了解皮影戲的動作技藝, 並藉由親身的體驗方式認識皮影戲偶, 故事的內容發展和應用手指頭按著螢幕上的武松與老虎皮偶來做即時操弄, 如同真實皮影戲一般

4 JEL 圖 1 GOGOGO 共玩 ONLINE 遊戲操作畫面 ( 引述自圖 2 皮影快打互動遊戲 ( 引述自民族藝師數位博物館 ) 圖 3 武松打虎 ( 引述自影偶藝術節 ) 3. 影偶操作技藝之悅趣學習內容與介面設計 3.1.IK 骨架定義與特性反向運動 (IK) 是將物件製作成動畫的方法, 它是使用骨塊所連結而成的結構, 將一個或一組物件根據彼此的關係建立成動畫將骨塊新增至不同的元件實體, 或一個形狀的內部當某個骨塊移動時, 其他連結的骨塊就會按照和觸發動作的骨塊之間的關係移動使用反向運動製作動畫時, 將物件的動作從開始到結束位置設定姿勢即可要將架設好骨架的影偶加入動作時,Flash 會將架好的實體形狀或是相關連的骨架, 移動至時間軸中建立出心的圖層, 又稱作姿勢圖層而 IK 骨架工具具有兩種功能一種為骨塊工具, 它可以建立骨架至實體或是形狀內 ; 另一種為繫結工具, 功能為調整骨塊和形狀物件控制點間的關係性而骨架工具須要製作動畫時, 必須在時間軸或是使用 Action Script 3.0 設定在時間軸中製作動畫的方式, 是利用不同影個中建立姿勢點, 並做不同的動作設定使用 Action Script3 製作動畫, 則須利用相關成是語言及參考組件做相關設定 3.2. 系統內容本研究所使用之工具媒介, 即為研究者藉由 Flash CS4 IK 骨架的特性製作影偶的關節並運用影片播放的方式學習影偶動作, 學習者可以學習基本影偶動作技巧 ( 圖 3 圖 4) 並利用 Flash ActionScript3 程式碼做為製作工具, 輔助工具則為 Illustrator Photoshop 等電腦繪圖軟體, 設計並建置學習遊戲與動畫學童能夠利用單機式的動作技藝悅趣化學習遊戲做影偶動作技藝的體驗, 並藉由研究者設計的闖關活動中兩人合作的方式, 藉由影偶的動作方式作移動, 執行接武器和閃避攻擊物體達到某特定分數後, 即可以過關透過網路的下載或線上使用本學習設計模式, 進行情境式挑戰競賽活動的進行

5 JEL 圖 4 影偶手部動作圖 5 影偶腳部動作表 2 影偶動作技藝互動設計概念說明 ( 本研究整理 ) 線上連結 : 遊戲主畫面, 利用影偶的武將做為人物設計, 而影偶故事大都以歷史故事作為演出, 因此設計三國時代武將趙雲, 和他的坐騎八扇屏, 以單騎救孤之故事為背景, 將其元素應用於製作影偶動畫互動遊戲闖關活動來呈現動作技藝互動系統由於武將的動作有跳打鬥翻筋斗等, 涵蓋了影偶的基本動作, 故研究者設計影偶動畫的方式來觀賞影偶的動作方式, 此部分藉由播放按鈕點擊後即可觀看影偶動作互動遊戲 : 利用鍵盤的對應方式, 和 IK 骨架的影偶人物設計, 呈現影偶動作展演, 學習者可以利用鍵盤操作影偶, 親身體驗模擬影偶之移動手部打鬥和跳躍的動作方式對應方式為敵軍 : 以方向鍵上下左右操作方向, 並以鍵盤上 O I U 作為影偶動作設定趙雲 : W A S D 為上下左右鍵設計, 鍵盤上 V B N 為影偶動作設定

6 JEL 利用影偶的動作設計闖關活動供學習者以合作的方式闖關, 遊戲者左右各操作一角色, 當空中掉下來的物體掉下來時, 必須閃躲或是取得 ( 物體參考皮影戲的道具做設計 ), 時間倒數設計則是提升學習者專注力, 利用兩位遊戲者合作共同達到某分數來達到過關條件 4. 未來發展與建議現階段重點為分析出實體影偶的操縱桿操作模式轉換到虛擬介面操作模式 ( 鍵盤 / 滑鼠 ) 上, 藉由文獻探討皮影戲動作技藝分析和相關皮影戲與遊戲人物之鍵盤與滑鼠操作模式與介面設計等資料做整理整合, 設計出影偶互動之悅趣化單機學習系統, 藉由遊戲的方式和挑戰競技的活動來親身體驗與學習影偶的動作展演皮影戲大多以合作的方式展演戲劇, 而本研究利用情境闖關活動達到學習者合作達到闖關目的之成效, 未來利用合作展演的方式, 並運用網路劇院由單人操作影偶達到情節演出, 演變到兩人合作演出, 讓學習者發揮自己的創意和詮釋故事的想像力, 並提供互動與悅趣化學習之數位教材可供使用參考文獻黃興武 (2001), 現代皮影設計概說, 名堂才藝, 取自 : 蘇巨暉 (2008), 電腦動畫藝術應用皮影戲元素之創作研究, 碩士論文, 國立台灣藝術大學多媒體動畫藝術研究所黃志忠 (2000), 淺談數位影像( 五 )--- 電腦動畫印刷資源月刊第二十三期香港 : 香港印刷資源中心張弘典 (2008) 能源小蜜蜂: 以數位遊戲式學習輔助能源教育國立中央大學網路學習科技研究所碩士論文, 未出版, 桃園陳德璋 (2004) 電腦繪圖運用卡通漫畫人物創作的合作學習行動研究國立台灣科技大學設計研究所碩士論文, 未出版, 台北市葉思義 (2004), 數位遊戲設計, 碁峰資訊, 台北市 Chris, C. (1984). The Art of Computer Game Design, Osborne/McGraw-Hill. Nattiv, A. (1986). The effects of cooperative learning instruction strategies on achievement among sixth grade social studies students, University of California: Santa Barbara. Marc Prensky (2000). DITGITAL GAME-BASED LEARNING 2000 Marc Prensky. Prensky, M. (2001). Digital game-based learning. New York: McGraw-Hill. Prensky, M.(2003), Digital Game- based Learning. Computer in Entertainment (CIE),1(1),21-21.

六到八歲兒童, 設計並發展一套以 van Hiele 幾何思考層次理論為基礎的悅趣化學習數位教材, 取名為米德玩形狀, 同時探討低年級學童在使用本數位教材之後, 在平面幾何的

六到八歲兒童, 設計並發展一套以 van Hiele 幾何思考層次理論為基礎的悅趣化學習數位教材, 取名為米德玩形狀, 同時探討低年級學童在使用本數位教材之後, 在平面幾何的應用悅趣化數位教材於國小學童平面幾何學習成效之研究 Using a Game-Based Learning Courseware to Study the Learning Effects on Plane Geometry of Elementary Students 范丙林 1 王學武 1* 李家瑩 2 1 巫家瑜 1 Department