如何作一個跨平臺的遊戲App?node
iOS和安卓系統上的應用程序，根據提供的內容不一樣，按照開發方式和用戶體驗不一樣，可區分爲app和遊戲；react
首先從開發方式不一樣來講明，app開發通常是用操做系統官方提供的開發套件來作對應的開發；android
這裏的開發套件就係統不一樣可作如下區別:ios
iOS: Xcode， Objective-Cgit
android: AndroidStudio, Java/Kotlingithub
遊戲的開發方式就不少了，不過最終一步通常都是生成對應IDE的項目工程，而後在對應的項目工程上進行配置設置，簽名配置等步驟，最後完成打包.ipa和.apk的打包； 在最後一步前開發方式就根據項目需求以及其餘因素考量，可採起不一樣的開發方案了； 以前有幸在作iOS的SDK開發，對接了上百款遊戲，也算對遊戲的開發環境有所瞭解了。react-native
2D遊戲通常用: Cocos2dx, Cordova,Corona,Contruct2等，固然也能夠用Unity來開發2D遊戲；xcode
3D遊戲通常用: Unity爲主流；app
最後從用戶體驗不一樣來講明，框架
app在前幾年時間裏，界面通常要根據不一樣系統來作開發，市面上看到的不少app的iOS版本和安卓版本有一些UI是長的不同的， 這裏就致使用戶體驗不一致的問題，若是領導須要，可採起混合網頁的方式，可是同時會帶來體驗不流暢的問題，這就要看溝通了，最終採起哪一種方式了。
通常狀況下，市面上的應用程序要麼是app要麼是遊戲類型，可是碰到一些需求，須要吸收app和遊戲的特性，融合在一塊兒，豐富應用程序的功能和體驗，這時候咱們開發的應用程序，我一般稱它爲遊戲app.
前段時間參與過一個項目，功能和體驗就是這樣的一個應用程序，我把用到的基本技術抽出來，整理代碼出來一個小demo, 其它相似的遊戲混合app均可以借鑑此思路進行開發； 這個小demo的效果以下所示:
iOS Android
demo說明:
演示場景最後一個畫面是Unity的遊戲場景，倒數第二個界面是React-Native界面，其它頁面是原生界面；
相關開發環境說明:
Unity2018.3.11f1
AndroidStudio3.3.2 (gradle插件版本3.2.0，gradle版本4.10.1,buildToolsVersion 29.0.0-rc1)
ReactNative0.59.5
XCode10.2.1
demo效果參考步驟以下:
一. 建立ReactNative工程
參考文檔https://facebook.github.io/react-native/docs/getting-started，逐步實現RN功能，下面截圖就是我demo工程裏建立的一個測試登陸界面:
二.Unity導出原生項目
這步網上有不少教程，參考就能夠了，基本沒什麼特別須要注意的地方，主要是一些打包配置設置問題，在我demo工程裏，因爲我引入了ReactNative功能，我須要把導出的xcode工程和as工程放到指定的文件夾層次，我把導出的原生項目工程截圖所示以下:
使用的Unity版本在iOS和安卓打包的時候，有一些區別；
iOS端: 打包生成Xcode工程，能夠選擇replace或者append， 建議用append方式，這樣每次打包不影響原生工程的東西。
安卓端: 打包生成AS工程，會直接替換老的文件，建議用github Desktop進行代碼文件管理，否則原生工程修改的相關配置一不當心就被覆蓋了。
下面說一下Unity每次修改打包成Xcode工程和AS工程的時候，會改變哪些代碼和哪些文件？ 此類混合項目要清楚，否則在功能協做的時候，很容易發生混亂，代碼相互覆蓋等問題！
開發場景一: 每次修改Unity裏的.scene裏的場景數據，打包出來Xcode工程，截圖所示文件夾內的代碼文件會發生大幅度的修改
iOS
android
開發場景二: 腳本代碼發生修改後，打包出來的文件,截圖所示紅框部分文件每次新打包都會改變，黃框部分文件是腳本代碼發生修改後，打包出來發生修改的文件
iOS android
測試發現Unity打包出Xcode工程以及Unity裏功能變動，打包出來的Xcode工程，涉及到文件和項目配置衆多，以前網上看到的不少文章大都是把Unity打包出來的新文件和配置，手動在原生項目裏進行修改和文件引用衆 多工做，我我的操做很麻煩，也有不少問題，每次Unity端功能發生更新，代碼和文件更新到原生項目就有點麻煩了，我這邊的操做步驟是在Unity端打包出來的Xcode工程上進行原生模塊功能添加，原生模塊功能以動態 庫.framework形式引入，彼此鬆耦合！
三.原生項目框架引入
這一步按照ReactNative官方文檔https://facebook.github.io/react-native/docs/integration-with-existing-apps來就能夠了，這裏須要注意；
我在iOS端使用CocoaPods (建議最好用CocoaPods集成方式，跟以前的項目工程造成鬆耦合)方式的時候，有一些第三方React-Native庫沒有CocoaPods集成方式，這時候就須要查看源碼來手動link和項目配置了，或者換第三方庫，再或者本身寫，本身寫的話，可按照官方指引https://facebook.github.io/react-native/docs/native-modules-setup來；
下面分享一段我項目中使用的Podfile文件
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'Unity-iPhone' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for Unity-iPhone # 'node_modules'目錄通常位於根目錄中 # 可是若是你的結構不一樣，那你就要根據實際路徑修改下面的`:path` pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # 若是RN版本 >= 0.47則加入此行 'DevSupport', # 若是RN版本 >= 0.43，則須要加入此行才能開啓開發者菜單 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 調試功能須要此模塊 'RCTAnimation', # FlatList和原生動畫功能須要此模塊 # 在這裏繼續添加你所須要的其餘RN模塊 'RCTImage', ] # 若是你的RN版本 >= 0.42.0，則加入下面這行 pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' # 若是RN版本 >= 0.45則加入下面三個第三方編譯依賴 pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' # # CodePush plugin dependency # pod 'CodePush', :path => '../node_modules/react-native-code-push' # pod 'react-native-blur', :path => '../node_modules/react-native-blur' # pod 'react-native-fetch-blob',:path => '../node_modules/react-native-fetch-blob' # pod 'react-native-fast-image',:path => '../node_modules/react-native-fast-image' # pod 'react-native-orientation',:path => '../node_modules/react-native-orientation' # pod 'RNFS', :path => '../node_modules/react-native-fs' # pod 'RNSVG',:path => '../node_modules/react-native-svg' target 'Unity-iPhone Tests' do inherit! :search_paths # Pods for testing # pod 'react-native-blur', :path => '../node_modules/react-native-blur' end end
四. 功能整合
這裏要以iOS和android兩端作對應處理，區別有點大，因爲iOS和安卓端都是我一我的弄，而我自己是iOS出身，對iOS端會更熟悉些，安卓端處理可能會不太專業，但也算初步實現了。
以iOS端爲例:
前面的步驟能夠算ReactNative功能跟Unity功能初步集成到一塊兒了，接下來就要再加入iOS原生功能，最後再把ReactNative功能，Unity功能串接到一塊兒了！
1. 加入iOS原生功能
demo裏我是加入了兩個導航頁面，我是直接在Unity導出的Xcode工程上加入的，由於Unity導出Xcode工程是能夠增量更新的，後續Unity測功能更新，從新打包也不會影響我舊有Xcode工程的代碼。
2.引入ReactNative功能
在第一步裏，咱們已經建立好ReactNative項目，也建立了一個登陸測試頁面，在這一步裏咱們須要導航到這個頁面，這個頁面咱們須要用一個原生視圖控制器來承載，而後就是原生功能的簡單導航了
-(UIViewController*) getRNDisplayVC { if(!self.rnVC) { NSURL* jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; jsCodeLocation=[[NSBundle mainBundle] URLForResource:@"/bundle/index" withExtension:@"jsbundle"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"myApp" initialProperties:nil launchOptions:self.launchOptions]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.rnVC=rootViewController; } return self.rnVC; }
代碼裏我使用的是已經打包好的.jsbundle文件，下面給出打包命令,在ReactNative文件夾下建立bundle文件夾,而後在ReactNative項目根文件夾裏打開終端命令，輸入下面代碼
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./bundle/index.jsbundle --assets-dest ./bundle
最後把bundle文件夾引入到項目工程裏,使用視圖控制器的導航相關代碼,就已經完成原生頁面向ReactNative頁面導航了，而ReactNative頁面向原生頁面導航，實質就是ReactNative訪問原生模塊的問題了，參考官方指引 https://facebook.github.io/react-native/docs/native-modules-ios#content
3.Unity跟原生互調或者Unity跟ReactNative互調
本質就是Unity跟原生的通訊了，網上文章不少，這裏就不闡述了。
demo的開發思路初步是這樣，其中有一些步驟還不算完美，有作相似此類項目的同窗，能夠一塊兒討論！