#13 快打旋風之龍騰虎嘯— 調色大師

猴溜肯

快打旋風還記得小時候第一個接觸的大型電玩，應該就是快打旋風(街頭霸王)，先來段影片

《街霸5》世界顶级隆(Ryu)梅原(daigo)排位赛巧遇天梯最强肯(Ken)

看不過癮的還有2004年的這一場傳奇逆轉

【電玩達人】EVO 2004 快打旋風3 梅原大吾成為傳奇的背水の逆転劇

Ryu & Ken (隆與肯)

應該是裡面大家最熟悉的角色，之前的公司還有個同事英文名字就叫做ken，有一次我問他你英文名字怎麼來的，他說就是這個遊戲。(果然是骨灰級玩家)

隆

今天要練習的題目是

#13 彼得潘的影子 — 調色大師

原圖是

ref: https://www.siliconera.com/2015/06/14/ryu-in-super-smash-bros-can-use-street-fighter-style-inputs/

雖然我印象中這題目有人做過了 XDDDD

不過我們還是來練習一下

練習過程

1. 首先將圖片去背(波動拳的區塊)
2. 加上RGB的調整
3. 加上Alpha的調整
4. 加上colorSliderChanged()事件
5. 加上漸層效果 (由左到右)
6. 加上邊框效果 (背景圖外框)
7. 加入漸層與邊框的修改與清除程式碼

由於參考了許多的作業，減少了很多卡關的過程，花比較多的時間地方是UI的調整，以及過程中程式碼調整的部分(嘗試錯誤)。

然後在漸層與邊框效果，切換到Off (!isOn)的狀態時，嘗試加入清除的效果。最後在稍微整理重構程式碼。

成品圖

以及Red, Green, Blue & Alpha 還有漸層，邊框效果的成品圖

RGB, 漸層, 邊框 (左到右)

程式碼

• sliderChanged事件有三個方法
  1.更新顏色
  2. 漸層與邊框效果
  3. 更新Label的文字
• frameSwitched主要有三個方法
  1. 清除漸層效果
  2. 清除邊框效果
  3. 設定所有Slider的狀態

• 漸層效果事件
• 邊框效果事件

• 清除漸層與邊框的效果事件

漸層的清除花了比較多的時間嘗試，才有現在的寫法

• 這個部分比較簡單，直接讓值與Switch開關相同即可

Github

chiron-wang/Peter13

Reference

Ryu In Super Smash Bros. Can Use Street Fighter-Style Inputs

#13 彼得潘的影子 — 調色大師

利用 UIView 的 mask 為圖片文字染上美麗的漸層

利用 CAGradientLayer 製作漸層

參考同學作業

調色App — 斑馬

調色大師 — 製作專屬於你的勵志小語小卡！

調色大師

#13 莫莉