#6_從playground調色去背＆利用mask為動物森友會調製新花樣

整個清明連假都在動物森友會的無人島上度過，但玩switch不忘swift，就利用動物森友會的圖片來做練習吧。

目的：

1. 練習換色去背
2. 利用Mask製作特殊形狀的圖片、加入遮罩顏色、合併兩張圖片。

練習

練習換色去背

將博物館的古典地磚換成櫻花地毯。

我和打瞌睡的館長傅達。

import UIKit
let image = UIImage(named: “animalcrossing.png”)
let animalImageView = UIImageView(image: image)
let patternImageView = UIImageView(frame: animalImageView.frame)
patternImageView.image = UIImage(named:”sakura.png”)
patternImageView.addSubview(animalImageView)
patternImageView

因為課堂上Peter說，可以先用中文說出想做的事，再改成程式碼，類似翻譯的概念，所以我就稍微試了一下上述內容的翻譯，只是我是事後翻來理解用的。

1. 加入UI函式庫
2. 放一張UIimage，上面是animalcrossing的圖，叫它image。
3. 放一個UIImageView，上面放UIImage，叫它animalImageView。
4. 再放一個UIImageView，讓它的大小位置和animalImageView一樣，叫它patternImageView。
5. 在patternImageView上放上image，這個image就是叫做sakura的圖
6. 在patternImageView去加上subview(animalImageView這張圖)
7. 秀patternImageView呈現結果。→patternImageView在下，animalImageView在上。

完成。

嗯⋯⋯處在薛丁格式的理解中。

利用Mask製作特殊形狀的圖片

透過帳篷的形狀顯現我的角色站在花園中的場景。

這就我的花園啦。

import UIKit
let tentImage = UIImage(named:”tent”)
let tentImageView = UIImageView(image:tentImage)
let islandImage = UIImage(named:”myisland.jpg”)
let islandImageView = UIImageView(image: islandImage)
islandImageView.mask = tentImageView

翻譯一下？

1. 加入UI函式庫。

2.放一張UIimage，是帳篷去背的圖，叫它tentImage。

3.放一個UIImageView，上面放tentImage，叫它tentImageView。

4.放一張UIimage，是我的森友會小島圖（是jpg檔，名稱要加上jpg)，叫它islandImage

5.放一個UIImageView，上面放islandImage，叫它islandImageView

6.islandImageView去做一個遮罩(mask)，並將它換成tentImageView

完成。

加入遮罩顏色

金色遮罩，有點像黃昏。

import UIKit
let tentImage = UIImage(named:”tent”)
let tentImageView = UIImageView(image:tentImage)
let islandImage = UIImage(named:”myisland.jpg”)
let islandImageView = UIImageView(image: islandImage)
islandImageView.mask = tentImageView
let goldenView = UIView(frame: islandImageView.frame)
goldenView.backgroundColor = UIColor(red: 1.5, green: 1, blue: 0, alpha:0.3)
let tentImageView2 = UIImageView(image:tentImage)
goldenView.mask = tentImageView2
islandImageView.addSubview(goldenView)

合併兩張圖片

加上貍克、豆貍、粒貍，動森不可或缺的ＮＰＣ。

import UIKit
let tentImage = UIImage(named:”tent”)
let tentImageView1 = UIImageView(image:tentImage)
let islandImage = UIImage(named:”myisland.jpg”)
let islandImageView = UIImageView(image: islandImage)
islandImageView.mask = tentImageView1
let nookImage = UIImage(named:”nook2")
let nookImageView = UIImageView(image:nookImage)
islandImageView.alpha=0.7
nookImageView.alpha=0.5
let tentImageView2 = UIImageView(image: tentImage)
nookImageView.mask = tentImageView2
let backgroundView = UIView(frame: islandImageView.frame)
backgroundView.addSubview(islandImageView)
backgroundView.addSubview(nookImageView)

小結

這次的練習包含了生成圖片、變換圖片顏色、放置多張圖片等基礎。我邊做邊想到之前用storyboard做的練習還有階層概念，但比起storyboard即時可見可調的方式，用寫程式來做出東西比較難，無法從畫面上直接反應與調整。

程式語言之所以叫做語言，是因為它也是用一連串的文字去傳達要進行的動作，是一個和電腦溝通的過程，就像我們寫小說寫信件寫公告寫文宣，是利用文字去和人類進行交流。

人類的語言，人類和非人的語言。想想覺得很奇妙。

電腦不像人類有天馬行空的聯想力，要真的寫對才會正確執行，它不會猜你真正的心意，頂多秀出類似的指令問你是否要做這件事，這是一種方便，給人還能掌握的安心感。

雖然一直看到紅色警告真的很崩潰。

參考資料

從 playground 調色去背圖片

利用 mask 設計特別形狀的圖片