顯示廣告
隱藏 ✕
※ 本文為 TLdark 轉寄自 ptt.cc 更新時間: 2018-04-08 05:34:07
看板 C_Chat
作者 kuku321 (halipapon)
標題 [閒聊] 從GALAXY S8看手遊設計
時間 Fri Jul  7 22:12:10 2017


圖多好讀:
https://www.ptt.cc/bbs/C_Chat/M.1499436733.A.B1A.html
[閒聊] 從GALAXY S8看手遊設計 - 看板 C_Chat - 批踢踢實業坊
圖多好讀:  趁著新機潮從哀鳳6跳槽回ANDROID了,當初只覺得曲面螢幕很爽所以選了S8。 沒想到S8的特殊設計卻意外成為各手遊開發者經驗與SENSE的照妖鏡XD 重點在於S8的【強迫將APP的長寬比限制解除、並把畫面填滿】的功能。
 

趁著新機潮從哀鳳6跳槽回ANDROID了,當初只覺得曲面螢幕很爽所以選了S8。

沒想到S8的特殊設計卻意外成為各手遊開發者經驗與SENSE的照妖鏡XD

重點在於S8的【強迫將APP的長寬比限制解除、並把畫面填滿】的功能。
這邊就看得出設計者的觀念正確與否與未來相容性了。


----
首先看向灰姑娘CGSS,
只能說這款是目前我手上APP中描畫架構設計最漂亮的作品。
http://i.imgur.com/cls5nCe.jpg
[圖]
 
http://i.imgur.com/5EfSL3a.jpg
[圖]
 

3D畫面要拉寬相對簡單,只要把相機畫面對應畫面實際長寬,
描畫時並且在有動態對應畫面大小就沒問題了,
所以3D畫面的對應算是簡單的。

不過可以看到2D UI的部分,也都正確的處理好,
圖像大小、位置與比例並沒有受任何影響。
UI的座標也是用畫面正中心的相對距離跟比例在算,所以都能在不改變畫質下顯示出來。
http://i.imgur.com/XUPWzXq.jpg

同理,用相同程式架構的MLTD也是一樣的表現。
http://i.imgur.com/D2sTAvx.png
http://i.imgur.com/vkoUC4e.png

不過有一個部分CGSS處理的比MLTD還要好,那就是標題畫面。
http://i.imgur.com/ocgEuUT.png
http://i.imgur.com/8IokAfV.png

兩邊的UI都有好好貼齊畫面比例,
CGSS的部分有預先考量到畫面比例特異的機型,所以底圖都有預留邊。
部分圖片跟暫停畫面的黑頻雖然會因為S8真的太特殊的比例而露餡,
但最讓我意外的是卡圖沒變形竟然還能幾乎塞滿頻這點,
可見卡圖本身就畫的非常寬。

反觀MLTD的標題畫面就是剛好貼齊16:9的線,有點可惜。

接著來看其他手遊的設計又是如何設計的。


----
LLSIF
http://i.imgur.com/UNYYpKL.png
開場讀取滿頻,而且比例正確,讓人有點吃驚,難道4年前就這麼有遠見了嗎!?

http://i.imgur.com/DwWVQzr.png
進到主畫面就知道一切都是錯覺了XD

http://i.imgur.com/lqE1PqW.png
http://i.imgur.com/k7ST7b2.png
不過UI或是畫面比例通通沒有變形,
用畫面中心算位置,圖像比例等等也都是有設計過,所以好好的顯示出來了。

LLSIF選擇不把相機拉寬也是正常的,
畢竟LLSIF主要都還是2D顯示為主,
如果要讓螢幕拉寬,就必須像CGSS一樣,畫圖時就有預留隱藏寬度了。
而且就只是張2D背景,就算拉寬,玩家也沒什麼實質回饋感。
所以LLSIF也算是漂亮完成任務了。

要看後續是否有持續跟上,就看3D模組跟3D LIVE更新後3D相機的表現了。


----
PROJECT 東京DOLLS
http://i.imgur.com/RZ5TUe5.png
http://i.imgur.com/8Pkzx5P.png
http://i.imgur.com/mXeLdnz.png

跟LLSIF一樣,鎖死畫面描畫空間,
也是有好好考慮到畫面比例跟描畫問題。

http://i.imgur.com/tCDUUhK.png
只是很可惜的,他身為3D遊戲,
卻連戰鬥跟女子寮都不開放相機自動取得螢幕長寬比。
原因不難猜,就是因為背景通通都是2D,
素材大小也都是畫的16:9剛剛好,所以沒加寬的本錢,
這時假3D的隱憂就浮現出來了。


----
ShadowVerse
http://i.imgur.com/QDKLfXm.png
開場就是一個不好的預感...

http://i.imgur.com/7QQldCs.png
http://i.imgur.com/Z2Equ4m.png
果不其然,各種UI互相擋來擋去。
他的作法應該是拿畫面「寬度」用16:9的比例逆推圖像大小,再畫出UI。
所以UI雖然顯示在正確的位置,也是用畫面中心算相對距離。
但是UI圖像通通被錯誤的估算比例放大,導致各種UI重疊與畫質變差。
雖然算是有解對一半問題,但還是失敗了。


----
Bang Dream!
http://i.imgur.com/xRHUb3I.png
標題看似很正常,但是底圖比例好像...(抖)

http://i.imgur.com/mjo2ewR.png
http://i.imgur.com/281CW9T.png
果然跟SV一樣爆炸了...
問題出在一樣地方,用了錯誤資訊來逆推UI的大小,導致互相遮蓋。
遊戲部分甚至圖示被拉寬了,比SV的處理又差了一點點。


----
最後看向5年前的遊戲...
PUZZLE & DRAGONS
http://i.imgur.com/ynxe6hU.png
[圖]
 

恩,標題就爆炸了XD

http://i.imgur.com/lQ5wKvj.png
[圖]
 
http://i.imgur.com/Pw5xbDp.png
[圖]
 
圖像大小通通被拉大,雖然UI顯示的很漂亮、沒有被遮蓋、位置也正確,
可是很多圖示跑出畫面外了,因此也是處理失敗。

但... PAD最大的問題並不在這...

前面所有的遊戲,即使UI變形跑位,依舊能好好的完成自己的任務。
Bang Dream!即使UI變形,仍然能順利打完一首歌。

PAD則是連玩都有問題啊!!!
玩家會發現按下畫面,觸發的完全是意料外的按鍵。

原來PAD根本不是圖像位置正確,而是整個底部UI都是一體成形無功能的裝飾啊!!
PAD是根據「固定座標」在算按鍵的,根本不是看玩家按哪個按鍵。

畫面顯示錯誤還可以說5年前草創期,手遊觀念不足。
但這裝飾按鈕的部分... 只能說架構的設計能力問題非常大,
連一般的網頁設計都不會這樣玩了。

至於剛吼的後續其他新作到底是有發現這點,還是繼承錯誤架構繼續錯5年,
就請有接觸剛吼其他遊戲的S8玩家解答了。

----
大概就是以上這些了。

意外的從S8的功能中,能檢視各手遊廠開發人員的經驗跟架構觀念,
這點還蠻有趣的,歡迎其他遊戲的S8玩家也來嘗試看看~


題外話

講到檢視遊戲設計,
其實從S8也能察覺作品究竟是「同組織的技術流通」或是「私自致敬」了XD

http://i.imgur.com/aSCqKNM.png
http://i.imgur.com/XtC9QOB.png
這兩張圖可看出很明顯不是只有設計一樣,而是連底層的邏輯判定都一模一樣。
就兩家公司拿同一套程式碼,各自去特化自家遊戲系統的作法。

CGSS跟MLTD的程式碼基本上就是同一套的了,
身為出資者的萬代很高機率跟CYGAMES共同持有CGSS的程式碼。

很多人提到的MLTD滑鍵難按,那是因為完全複製的原因,
為了增加經營要素,降低音遊難度,所以判定放寬很多。

但拿CGSS的判定直接放寬,

導致了【先左後右】的滑動動作,左邊方向被延長判定,導致右邊很可能沒被吃到。
所以兩個滑鍵間先讓手指離開螢幕,再按下一指令,就能順利被判定到了。
提供大家參考。


另外「相同母公司,八成是技術流通」的...
http://i.imgur.com/4t9ex8a.png

提供各位參考。

(不過架構致敬這點在手遊業界到是很常見就是了,只是比例問題而已XD)

--
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 131.147.239.104
※ 文章代碼(AID): #1PNvQziQ (C_Chat)
※ 文章網址: https://www.ptt.cc/bbs/C_Chat/M.1499436733.A.B1A.html
emptie: 是說16:9流行了那麼久,18:9有機會掀起革命嗎1F 07/07 22:14
emptie: 不過其實如果在android平台工作的開發者就算是在之前也
emptie: 不可能不會遇到這個問題吧,第一代的nexus還是15:9
emptie: 要如何處理長寬比不同的裝置一直都是開發者應該想到的
SaberMyWifi: 哇!  本來想換S8+的  看你這篇我不敢換了XD5F 07/07 22:18
沒對應的遊戲不要開強迫滿頻的功能就好啦XD
有對應的再開啟,爽度很高XD
hibbb: 人家是以iphone為基礎設計的  不是FHD也不是18:96F 07/07 22:18
※ 編輯: kuku321 (131.147.239.104), 07/07/2017 22:20:52
MadMagician: 2:1成本夠低就可以取代7F 07/07 22:20
elvis222: PAD這個問題蠻久的了 只要是隱藏虛擬鍵都會發生8F 07/07 22:20
emptie: iP除了一開始是3:2以外 自從第一次拉長之後都是16:9啊9F 07/07 22:20
pinacolada: 2:1雙開視窗空間應該會比較多XD10F 07/07 22:20
hms5232: 一開始不要寫死 未來才有擴充性 學程設老師常掛在嘴邊XD11F 07/07 22:20
gunng: 這樣的分析來看還蠻有趣的12F 07/07 22:23
CYL009: 這篇滿有趣的  推13F 07/07 22:25
※ 編輯: kuku321 (131.147.239.104), 07/07/2017 22:26:30
e04su3no: 難怪我覺得MLTD明明判定很鬆但為什麼滑鍵就很容易斷康14F 07/07 22:28
※ 編輯: kuku321 (131.147.239.104), 07/07/2017 22:28:53
bluecat25: 推15F 07/07 22:35
w09351500: 能開全螢幕的手遊爽度真的很高16F 07/07 22:36
scvjump: 難怪之前隱藏了虛擬鍵 PAD變成不能玩 山本不用負責嗎17F 07/07 22:38
ultratimes: S8真的是很強大的手機18F 07/07 22:38
lulanee: 剛吼就是廢今年一定島19F 07/07 22:41
frozenstar: 推20F 07/07 22:41
HornyHorng: wow請問那是暗水月讀嗎ww 在暗木月讀沒多久後就退坑了21F 07/07 22:51
就...覺醒月讀阿XD
Lupin97: 有意思,推22F 07/07 22:58
realion: S8>U11>>>>>>>>>>>>>>>>>>XZP23F 07/07 23:00
※ 編輯: kuku321 (131.147.239.104), 07/07/2017 23:01:11
ImCasual: 推24F 07/07 23:01
notsmall: 結果沒幾年時代就進步了 不可不慎25F 07/07 23:05
HornyHorng: 很久沒玩了ww26F 07/07 23:16
RoaringWolf: 看來CGSS目前技高一籌27F 07/07 23:18
坦白說 CGSS的優化真的厲害,就算追加3Dリッチ,還是很順暢。
反觀MLTD雖然連大廳都有3D互動等等的,但優化還沒做好,loading等等延遲很重。

有個BUG,點開禮物,在內容讀取出來前就先點一括領取的話,會出現ERROR退回標題。

另外還有小BUG,若是劇情對話等選擇"無語音",
對方講話時就算中途按略過,嘟嘟音仍會繼續撥放,
原本以為是式樣,但是換成一般語音或是P的對話都會直接中斷,
可見就是BUG,姑且寄信回報了XD
※ 編輯: kuku321 (131.147.239.104), 07/07/2017 23:22:08
jschenlemn: 厲害喔  除了要玩一堆遊戲 對於系統設計還要有了解28F 07/07 23:27
itoni: 推測試 看來g6也一樣?29F 07/07 23:29
jschenlemn: 另外剛吼真的...也是到最近才大改UI,原來基本架構還30F 07/07 23:30
jschenlemn: 是很爛
Lupin97: 不過最近cgss的bug並不少,還在改版的陣痛期吧,耐心等待32F 07/07 23:54
QBoyo: s8推 不過最近沒什麼開遊戲XD33F 07/07 23:54
hinofox: 有趣XD34F 07/08 00:20
WongTakashi: 推35F 07/08 00:35
WindSucker: 你可以用模擬器36F 07/08 00:56
cy4v: MLTD的標題畫面1080p下感覺有點糊  CGSS的則很清楚37F 07/08 02:29
Wunyang: 很有意思的文章38F 07/08 03:03
peter15879: 優質好文 非常有趣39F 07/08 03:15
choush: 推40F 07/08 08:56
※ 編輯: kuku321 (131.147.239.104), 07/08/2017 09:45:44
richard07250: 可以麻煩大大測試看看FGO嗎?41F 07/08 10:02
http://i.imgur.com/q6DMDip.png
http://i.imgur.com/7zKr3HD.png
http://i.imgur.com/s8s5WwP.png
跟LLSIF一樣作法,全2D貼圖所以直接鎖死畫面比率。
※ 編輯: kuku321 (131.147.239.104), 07/08/2017 10:20:12
sableangle: iOS也是有可能崩壞的,把app hock掉,強迫關閉 auto s42F 07/08 10:58
sableangle: ize 跟 auto layout 就變成這副德行了
sableangle: 按鈕連按都沒法按,為什麼截圖只有這兩張 因為按不進
sableangle: 主畫面啊XD
sableangle: http://imgur.com/a/3jeNr
bernie90006: 專業分析文 推推47F 07/08 11:31

--
※ 看板: ACG 文章推薦值: 0 目前人氣: 0 累積人氣: 164 
作者 kuku321 的最新發文:
點此顯示更多發文記錄
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇