#4 用 view 拼湊漂亮的圖案

今天抽空來做做基本的用一堆View拼出圖案。因為沒有美術細胞，不知道該畫什麼及怎麼畫，想了很久，想到了這種像素畫風的最佳範例就是心中最經典的傳奇遊戲”勇者鬥惡龍III”。於是打開了模擬器呼叫出這塵封已久的遊戲，抓了畫面下來，就有了可以照著畫的素材。

有了素材，就可以開始製作了。既然是勇者鬥惡龍，那當然是挑選主角的勇者來繪製。以下是製作步驟：

1. 首先打開Xcode，開一個新的專案，接下來點選View Controller 底下的View，先將View底色調整為圖中草地的顏色（這邊用滴管去擷取，顏色會比較相近）。
2. 畫中人物是用16x16的方格繪製而成，所以先確認螢幕大小是428x926 pt。計算了一下，如果用20x20pt的大小（428/20＝26.75），可以塞下26格，所以可以放得下，但為了不讓畫面顯得擁擠，所以決定將人物的格子大小調整為18x18pt大小就好。
3. 這裡先估算一下，若人物要放在接近置中的位置，起始點大約要放在距離畫面左70pt (428–(16*18))/2=70；上319pt (926-(16*18))/2=319的位置
4. 準備就緒以後，看了一下，主角的勇者，是由三色的方格所組成，於是先在原View上先產生四個不同顏色的方塊View（加上草地上的雜草）。

5. 接下來就是依據所需，生成相對應的顏色色塊數目及置放於正確位置即可。

6. 花了不少時間調整後，最後勇者終於產生了！

7. 這邊陳述一些小心得：

1. 一開始是做一個個18x18pt的小方格慢慢拼湊，但這樣很慢且不好對齊，後來發現，在比較大範圍同顏色的地方，可以直接將View變成18的倍數的色塊，例如變成18x36, 36x36 這樣可以減少所需View的數目，對齊也比較容易。不過也有壞處，就是萬一有沒對齊的地方，因為每個色塊大小不同，無法一次選取，然後一次性調整對齊。所以兩種方式各有利弊。
2. 另外在做臉的部位時發現，先做好一個長形的皮膚色部位的View，然後做一個藍色眼睛部位的View，在將眼睛拉到臉的部位上時，Xcode會視為這個View是臉部View的Subview，導致因為藍色色塊（36x18)超出膚色色塊(18x72)的高度，所以原本高36的藍色會有一半消失，只呈現一半。若顛倒過來，則會變成膚色色塊變成藍色色塊的Subview，導致只出現18x18的膚色塊崁在藍色塊內。

試了好久，這時候只能在View的外面先做好，再慢慢移動位置到另一個View的上方，不能直接拖拉到另一個View上面，否則另一個View周圍會出現發亮的線條框，表示要將正在拖拉的View放到這個View裡面，就會變成無法正確顯示色塊的情形。

後記：後來剛好有同學詢問老師一樣的問題，得到答案是：只要在移動一個View到另一個View上面時同時按著Command鍵，就可以避免View崁在另一個View裡面這樣的問題。嘗試了一下，果然成功了，確實是很方便。