100735760 發表於 2015-11-19 14:16:37

簡單的 3 × 3 滑塊拼圖 Part. 1

本帖最後由 100735760 於 2015-11-19 14:16 編輯

大家好,我是編號100735760的小嫩嫩。
今天來分享一個簡單的 3 × 3 滑塊拼圖,滑塊拼圖有很多種尺寸,常見的有 3 × 3 、 4 × 4,不過原理都是相同的,所以修改一下,就可以變出很多種不同尺寸的拼圖,因為是簡單的範例,所以我們使用固定的圖片當作拼圖的材料,一開始就挑一張自己喜歡的圖片,如下圖一般,切割並做成物件就可以了。我使用的圖是Unity醬:
http://d.share.photo.xuite.net/gn00779703/1dbd40a/19699686/1105265188_l.jpg準備工作完成後,就進入構想階段囉!首先,根據滑塊拼圖的玩法會先把一塊拼圖(通常是右下角的那塊)拿起來之後,打亂拼圖之後把空格附近的拼圖與空格交換完成拼圖之後,再把空缺的一格填上這就是一個滑塊拼圖。
滑塊拼圖:
[*]打亂拼圖:打亂的方式有很多種,最直覺的想法就是使用隨機亂數,
不過隨機亂數需要加上排除重複,方法比較複雜,
所以我們這裡使用洗牌法來達成這個效果。
[*]移動拼圖:移動的方式一樣有很多種,
可能有人會想到紀錄座標的方式,來做移動;
不過我覺得以紀錄座標的方式來儲存拼圖位置,程式維護上比較困難,
所以這邊我們使用空物件,搭配物件之間的父子關係,來調整物件位置。
移動的方式則使用鍵盤跟滑鼠點兩種方式並行。
[*]完成拼圖:在移動拼圖的過程中,
我們需要一組陣列,來存放目前各個物件的位置,
另外,還需要一組陣列是拼圖正確的順序,
比較之後,如果完全正確,則完成拼圖。
構想完成之後就可以開始動工囉!第一步就是把物件擺到定位,如下圖:http://d.share.photo.xuite.net/gn00779703/1dbd400/19699686/1105282842_l.jpg物件的排列總共分成三層,每個物件的座標位置可以參考下圖
[*]MainController 這個物件是主控制,創造一個空物件放上程式碼即可,
要注意的地方是,因為我是用2D視角,所以Z軸角度是180,
這部分只要攝影機看得到圖片就可以了,不一定要跟我一樣。
[*]第二層放的是每個圖片的位置,我以第五片當作範例,
第五片拼圖的位置是(0, 0, 0),
第一片是(1, -1, 0),第九片是 (-1, 1,0),其他的位置以此類推。
[*]第三層就是圖片了,把拼圖放到位置下方之後把座標歸零,
這樣就可以維持每個拼圖的位置,
一樣要注意拼圖的角度跟大小,讓拼圖正常顯示,
Mesh Collider 我們用不到,可以刪除。
而要讓拼圖可以用滑鼠移動,所以必須加上 Box Collider,
並將拼圖的 Tag 改成 Puzzle。
http://d.share.photo.xuite.net/gn00779703/1dbd463/19699686/1105282941_l.jpg擺放完物件之後,就可以加上程式碼囉。在主控制物件上掛載一個C# Script,並加上我們會用到的全域變數http://d.share.photo.xuite.net/gn00779703/1dbd418/19699686/1105289778_l.jpg我們的第一步驟是打亂拼圖,這個步驟只需要在一開始執行所以我們在 Start() 內加上下圖的程式碼http://d.share.photo.xuite.net/gn00779703/1dbd46d/19699686/1105292167_l.jpg這部分的陣列比較簡單,所以我就不講了,重點在於洗牌的迴圈,範圍是由大到小的,每一次都是隨機的位置與第 i 的位置交換,每一個位置都交換一次後,拼圖的陣列就會被打亂了。陣列位置打亂後,也要套用到拼圖上,第二個 for 迴圈,就是執行打亂圖片的動作,第一行,根據陣列內的位置,依序把圖片的父物件更新。第二行,把更新後的圖片位置歸零,圖片就會擺放到新的位置。最後再把第九塊拼圖隱藏,就完成打亂拼圖了。執行結果如下圖:http://d.share.photo.xuite.net/gn00779703/1dbd492/19699686/1105294252_l.jpg
待續....

頁: [1]
查看完整版本: 簡單的 3 × 3 滑塊拼圖 Part. 1