#4 用 view 拼湊漂亮的圖案(Super Mario)

Stanley Tseng (阿哲)
Nov 7 · 4 min read

使用900個View製作的Super Mario拼豆!!😆🤪

四、參考連結

彼得潘#4 用 view 拼湊漂亮的圖案

五、設計流程

首先找到喜歡的圖案,可以搜尋「拼豆」
如果拼豆找不到你想要的圖案,可以透過彼得潘分享的「圖片轉像素網站」,點進連結後載入圖片,並設定你要的水平格數和輸出寬度。記得要點選套用格式唷!

在表格選項,可以複製表格,再將表格至免費的Google Sheets貼上即可。

記得調整試算表的欄和列的大小。

最上面的欄,每一個欄都有向下箭頭可以點進去選單,最左邊的列是按右鍵後出現選單,點進去就可以修改欄和列的大小。(記得全選圖案所有範圍,就可以同時修改欄和列的大小了)
為了在Xcode的Storyboard較易調整大小和位置,我是設定為10x10,並標示相關座標數字,以便查看各個view的座標值。

接下來就是至Storyboard,開始訓練眼力與耐力的浩大工程了!😅🤣

在設定各個View的顏色時,記得使用吸管工具唷!否則自己調色眼睛應該很快就花掉了!最後~耗時不知道多久…總算完成我們卡哇伊的Super Mario了!

最後自己加上一張首頁當連結,點進去就可以看到Super Mario大頭照嘍!

六、小小提醒

由於將近900個Views…所以開啟檔案和修改時,Xcode都很吃力地不斷出現彩色旋轉圖(超級lag)總之,原本預計的拼豆圖案是40x40,後來每改一個顏色就要等快10秒…之後就決定改為30x30了!(如果Mac記憶體是16G,可能會好一點)

後來調整了圖案的大小,也重新調整在置中位置,所以~如果有興趣在GitHub下載來看的朋友,Storyboard裡每個View的座標都不是在整數了唷!最後要說的就是,開啟檔案時要有心理準備!開啟時間非常非常久…Orz

七、心得與感想

其實這次的view拼貼練習,原本我找的圖案是第一神拳主角幕之內一步的帥氣揮拳照片,但…感覺難度實在太高,所以決定未來再來挑戰嘍!

但不得不說的是,我真的很感謝彼得潘讓我們有機會練習這個作業,否則900個views,我應該很難堅持到底把它完成吧!
持續努力加油!我要一步一步慢慢往上爬!(附上原本想要的那張圖)

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

Stanley Tseng (阿哲)

Written by

StanleyTseng

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade