HTML5 遊戲移植為 iOS 原生應用，需要注意哪些地方？有什麼經驗可以分享？

01-14

聽說有團隊進行 HTML5 遊戲向 iOS App Store 移植的工作，求經驗分享。

很巧去年11月份我們開始決定進行HTML5手機頁游《獵魔傭兵》的iOS版本打包工作。這也是我們首次進行iOS版本的封包，此前坊間有各種各樣說法流傳，蘋果已經對WebApp加大了審核的嚴格程度，有一大批HTML5的遊戲和應用紛紛都被斬於馬下。帶著這樣忐忑不安的心情，我們開始了將手中基於HTML5開發的角色扮演網遊《獵魔傭兵》封包上線的悲壯之路，期間歷經各種坎坷又峰迴路轉，跌宕起伏，很值得回味。我不敢敝帚自珍，於是一一記錄下來，以饗知乎上的遊戲創業者朋友。

（手機頁游：《獵魔傭兵》）

1）遊戲封包倉促上線，產品定價遭遇冷臉；

項目會後我們把需求提給技術人員，起初大家並沒有把這個事情看的很難，因為我們的HTML5遊戲引擎完全是自主研發的，而內核採用的是Canvas和Dom混合模式。我們預先設定的方案也是直接在蘋果平台上用Xcode進行打包，把自己的Javascript腳本，美術資源和webview組件封裝在一起。經過測試發現本地載入讀取是可行的，於是安裝包分分鐘就做好了。很快我在蘋果商店做好了文字說明，截圖以及安裝包上傳。正在為自己的高效工作沾沾自喜，幾天後蘋果的測試結果就打回來了，拒絕上線，原因卻是遊戲中仍保留了一封內測的郵件。

所以不管是遊戲內部還是遊戲描述，千萬不要有「內測」啊，test啊，demo啊， beta啊這些字樣，蘋果會以為你對用戶不負責，拿用戶來測試你的產品。（可國內的頁游為了規避政策不都這麼做的嘛 =_=...）很快我們就刪掉了所有相關字眼，仔細檢查後，懷著忐忑的心情，再次提交AppStore。

一周後，杯具繼續傳來，我們又被拒了。

這次被拒絕的原因是遊戲的內置付費問題。蘋果上網遊的內置付費的道具的標價很重要，單價千萬不要超過99美金。我們的某個道具單價為648￥，完全超過99美金。於是我們被打回，繼續埋頭修改，將單價降到 68￥，繼續提交，虔誠的等待結果。（看來太過於貪婪真的是禍根呀...囧rg）

可是福不雙至，禍不單行，結果又被打回。蘋果說，你的道具一次性售出的總價也不能超過99美金。這個怎麼理解呢？我們將道具單價將為 68￥，但是我們允許用戶一次性購買10份，那總價就是680￥，結果又毫無壓力超出99美金。蘋果說了，這還是不行啊，總價也不能超過99美金啊，於是我們又哼哧哼哧修改，改好提交上去了。（分特，你早怎麼不說呢。對於遊戲內計費的苛刻，蘋果也算是計較到了極點，其實放在國內的哪個商店或者平台不是都希望扣用戶錢越多越好呢~）

然後我們就在歡天喜地中又迎來了第四次被打回。這次依然是付費問題。這一次比較小糾結。上回不是說總價也不能超過99美金嘛，那好辦，當用戶購買5份，以及以上的份數，我們都不予他購買。這是神馬意思呢，玩家點旁邊那個加號，加到5以後，他點購買會沒有反應，但是加到5之前，都是正常購買的。這不是為了響應蘋果的號召，總價必須低於99美金嘛。但是蘋果又喊停了，為啥呢？為啥我加到5沒反應啊？這是bug! 既然你不允許玩家買5份，幹嘛你又允許玩家加到5呢？於是我們無言以對，又默默把 5以及 5以上的選擇都取消了，點加號只能加到4...(哇呀呀，心中無數只草泥馬奔騰而過呀~)

2）搬來高手精研學習，評審經驗互通有無；
接二連三的被打回，讓幾個老大們真的著急了。眼瞅著就要過年，大家實在都一籌莫展。實在不行就去找高手聊聊吧，於是幾個老大出面，請到了幾位據說是有著與蘋果豐富鬥爭經驗的大牛來到公司座談交流。「三個臭皮匠，頂一個諸葛亮」
爾後大家針對我們的遊戲產品給出了不少乾貨的建議。他們建議關鍵字的選擇不要涉及版權，建議盡量多的把文字寫在遊戲截圖上，建議圖標設計的需要把握的尺度，不要貪心一次提交很多版本，同時也給了第一次接到蘋果審核的拒絕結果後兩個小時應該有的反饋...林林總總這裡就不一一贅述了。但這讓我想起了曾經的高考前夕，化學老師曾對小編說過的那些話，七月流火，八月融金，數百高考判卷老師彙集火爐南京揮汗如雨給百萬考生審卷，你們想想如果字跡不工整，卷面不整潔下場會是如何？囧rg，我想蘋果的審核大神們估計也有同感吧。終於在同志們的春天般關懷下，我們終於把看似完美的包提交了上去，再次忐忑不安的等待著再次表白的結果...

3）連受打擊屢敗屢戰，咬牙切齒Web拒版；
最最不幸的事情終於發生了，我們的遊戲在春節前最後一周接到了蘋果的「病危通知書」，他說我們的遊戲是基於web的遊戲，建議我們提交給流量幾乎為零的WebAppStore，宛如一桶涼水潑下來，從頭到腳，這基本宣判了我們產品的死刑，（T_T）。我懷著沮喪的心情回家度過了難忘的2013年春節，強顏歡笑，食不知味…

4）炮竹一聲辭別舊歲，來年新春路轉峰迴；
春節收假後，大家重新回到了公司。心有不甘有木有，各種撞牆有木有，於是老大把項目組的人重新召集到了大會議室開小諸葛會。雖然桌上攤滿了各地帶回來的特色零食，可是誰也沒有心情吃，很快你一言我一語氣氛開始活躍起來，討論目標就是如何能讓《獵魔傭兵》正式上線。首先我們檢查了一下之前所碰到的各種零零碎碎的問題，都可以得到了技術和產品的全面解決。我們又找到了AppStore上有一部分跟我們類似的原生與網頁混合打包產品，分析後得出的結論是，無論從畫面，還是用戶操作，投入一些細節的設計和修改，我們是可以把Webapp產品做到原生的體驗，同時也捂臉之前圖快圖省事的想法。一方面我們也覺得是否在於之前被打回來的次數過多，所以蘋果加強了對我們這款遊戲的審核力度，導致最後杯具的結局。通過分析出這些原因，也就詳細的擬定了修改的方案，安排技術大牛光哥又重新開始了我們的蘋果之旅。

這一次我們大大增加了原生代碼的數量，將遊戲的登錄註冊選服載入客服等等界面都用原生代碼完成，適當的增加了動畫特效，進入遊戲後，我們替換了底欄菜單和聊天部分，同時加入了遊戲的背景音樂。新完成的安裝包，基本可以說原生代碼和網頁腳本比例達到了3:7的程度。

最後我們重新註冊了蘋果賬號，換了個馬甲，繼續提交（你懂的）。

結果很快下來了，Ready for sale，過了！

5）回首長嘆經驗總結，拋磚引玉造福社會；

經過這一番折騰，老大讓我總結一下這次的經驗，不過我一直覺得最大的決定因素還是在於人品，人品值不行的還需要繼續修鍊呀。(*^__^*)

1）蘋果的審核確實非常盡職盡責，每一個可能的細節都不會放過。但感覺單機遊戲如果只是下載收費要比有內置計費的網遊容易通過的多，所以網遊開發的同學們一定要在計費介面部分多下功夫，一定要嚴格遵守蘋果的規範呀！

2）在提交時候，不要貪心同時提交iPhone和iPad兩個版本，我們因為《獵魔傭兵》是HTML5技術可以自動適配屏幕解析度於是全機型打鉤提交上去，結果被蘋果打回來的時候告知完全沒區別嘛，囧rg

3）HTML5的遊戲開發應該盡量使用Canvas來渲染畫面，而Dom可以用在菜單和一些文字輸入類控制項即可。原生代碼則主要用來製作框架容器和部分菜單，並且完成遊戲進入前的界面和各種動畫特效，聲音聲效的播放以及對話框和聊天部分。所有遊戲第一次進入用到的圖像和聲音等資源打包為bundle模式，全部放在本地，更多的地圖，副本的圖像聲音資源可以考慮分階段下載。最後我們完成的安裝包大小為33M，便於下載安裝。一句話，多加一些Native的代碼讓你的HTML5遊戲產品製作的更加接近原生體驗吧！

4）蘋果對於Webapp的顧慮可能會在外鏈，第三方計費控制等問題吧，所以我建議這方面還是老實一點，不耍小聰明，萬一上了線亂搞也有可能會被蘋果踢下來。因此我們也會繼續踏踏實實的做好遊戲產品，遵守蘋果的規範，認真服務於玩家。

5）在遊戲的打包中我們也可以通過原生代碼不但增加了一鍵登錄同時也把第三方統計平台加入進來，比如友盟，appcpa等等。

不過說到這裡恐怕會有不少看官質疑，你們乾脆用原生開發多好呀，幹嘛非死乞白賴的用HTML5打包呢？我下面就闡述一下我們之所以選用HTML5技術開發手機遊戲的理由：

1）用HTML5開發手機應用和遊戲的效率會稍高一些，成本也會略有降低。這主要體現在各種智能手機終端的移植上，我們前端都是javascript工程師，而打包移植的工作有1個人就可以快速搞定。不需要同時維護若干個團隊和若干個版本。這是我們安卓版本下載地址：http://g.duopao.com/apk/download?utm_source=ghzj_v1.2.1

2）用HTML5開發，遊戲升級版本更新會更方便，只要不涉及原生代碼的改動，我們都可以在後台安排腳本更新即可，無需用戶再去下載安裝覆蓋等麻煩，也減少了因此而帶來的用戶流失。

3）用HTML5開發的網頁遊戲跨平台的能力較強，可以運行在PC，平板，手機等所有支持HTML5的瀏覽器內，這樣可以讓玩家無論是在電腦還是手機都可以跨平台體驗遊戲的樂趣，從後台數據看，大部分用戶是願意接受在不同的時段使用不同設備，電腦和手機來體驗我們的遊戲。隨時可以訪問我們的網站：光輝戰紀官網-多泡遊戲

4）HTML5開發手機應用和遊戲相對來講會比較安全，由於瀏覽器的限制，我們是無法讀取用戶的隱私信息或設置暗扣陷阱。

5）雖然HTML5頁游有以上的好處，但目前HTML5遊戲的市場環境還並不成熟，很多用戶還是比較習慣安裝app來玩遊戲的習慣，所以我們也採用同時推安裝包和鏈接兩種方式來儘可能的覆蓋我們的用戶群，因此webapp的推廣方式還是非常靈活的。

我們作為一個HTML5頁游的創業團隊已經根植這項技術3年了，這期間我們從未對自己的方向有所懷疑，我們也欣喜的看到隨著瀏覽器發展越來越成熟，我們的夥伴也越來越多，吾道不孤矣。我們也希望通過這篇小文，也帶給跟我們一樣在路上的夥伴們一些鼓勵，一點幫助。加油！最後藉此文感謝項目中一直努力奉獻和付出的大牛光哥，躍強，雪冰，高妹，Cae還有小寒，何葉等等同學們，沒有你們的百折不撓頑強努力，上線是不可能的！我愛你們~

目前這款遊戲已經開始免費下載，如果大家覺得這篇小文對你們有所幫助的話，也請大家支持一下我們，輕點一下app下載，給留個好評，謝謝啦！

《獵魔傭兵》蘋果商店地址：https://itunes.apple.com/cn/app/lie-mo-yong-bing./id605684016?ls=1mt=8

或在AppStore搜索「獵魔傭兵」

或用手機掃一掃：

https://itunes.apple.com/cn/app/lie-mo-yong-bing./id605684016?ls=1amp;mt=8 (二維碼自動識別)

再次感謝大家百忙之中抽空閱讀這篇小文！

山寨。。。