半個小時移植Flash遊戲到Android平臺

網上有很多現成的Flash遊戲,一直想在手機上玩,雖說Android2.2支持Flash,但是大多數遊戲需要鍵盤控制,最多的就是方向鍵,而手機大多數沒有鍵盤(有鍵盤的好像也不行),所以實際上就沒辦法玩了。


現在Rexsee提供了一個很簡單的解決方案,可以迅速將Flash遊戲移植到Android手機上(2.2以上)。(目前Rexsee已經開源,在社區可以查看全部的開發手冊、API說明與源碼, www.rexsee.com ) 

下面是一個例子,把經典的美羊羊卡丁車移植到了手機上,而且有兩個版本,一個用虛擬鍵盤,一個用方向傳感器。

所有代碼是用HTML和JS寫的,包括全部HTML,總共只有100多行。步驟如下:

  1. 準備鍵盤圖片,這裏用到了6個鍵,左、右、空格(跳躍)、退出、消息和Rexsee市場鍵,Rexsee提供了幾套現成的鍵可以下載。將鍵的圖片放到asset/keyboard/default/文件夾中,這樣用"keyboard/default"來指定theme參數即可,否則要用放圖片的文件夾的完整路徑(本地SD卡或網絡地址均可)來制定theme參數。文件名就是鍵值,後綴名是.png
  2. 將美羊羊卡丁車的swf文件放在asset/文件夾中
  3. 將橫幅圖片(這裏是banner.png)和啓動按鈕圖片(這裏是startNow.png)放在asset/文件夾中
  4. 當然還有圖標要放在res中,還要將string.xml中的首頁地址設爲file:///android_asset/index.html。這是唯一的一個程序文件,100多行。
  5. 這是離線版的,所以要下載Rexsee的JAR包,自己用Eclipse編譯,如果嫌麻煩,可以在線編譯一個首頁地址指向服務器某個網頁地址,然後將下面的index.html的代碼放在這個文件中(有些路徑要改,比如圖片什麼的),如果也想離線玩,可以在首次載入後將swf文件和圖片自己或者用rexseeClient下載到本地。當然也可以不下載,就在線玩。

 

先看一下res/values/string.xml

Java代碼  收藏代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3. <string name="app_name">美羊羊卡丁車</string>  
  4. <string name="app_home">file:///android_asset/index.html</string>  
  5. <string name="rexsee_home">http://www.rexsee.com/flash/index.php</string>  
  6. </resources>  
 
再看一下AndroidManifest.xml
Java代碼  收藏代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="MeiYangYangKaDingChe.rexsee" android:versionCode="1" android:versionName="1.0">  
  3. <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:anyDensity="true" />  
  4. <application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar">  
  5. <activity android:name="rexsee.activity.RexseeActivity" android:configChanges="orientation|keyboardHidden" android:launchMode="singleTop">  
  6. <intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter>  
  7.   
  8. </activity>  
  9. </application>  
  10. <uses-permission android:name="android.permission.INTERNET"/>  
  11. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
  12. </manifest>  
 
最後是asset/index.html的源代碼
Java代碼  收藏代碼
  1. 1:  <HTML>  
  2. 2:  <HEAD>  
  3. 3:      <TITLE>美羊羊卡丁車</TITLE>  
  4. 4:      <META http-equiv=Content-Type content=text/html charset=GB2312>    
  5. 5:      <META http-equiv=Expires content=0>  
  6. 6:      <META http-equiv=Cache-Control content=no-cache>  
  7. 7:      <META http-equiv=Pragma content=no-cache>  
  8. 8:      <SCRIPT type=text/javascript>  
  9. 9:            
  10. 10:         function startFlashGame(para){  
  11. 11:             //開始Flash遊戲  
  12. 12:             rexseeScreen.setScreenOrientation(para.orientation);     //將屏幕方向設爲水平  
  13. 13:             if ( para.sensor ) {  
  14. 14:                 rexseeOrientation.setRate('fastest');                //將傳感器敏感程度設爲最高  
  15. 15:                 rexseeOrientation.start();                            //啓動傳感器  
  16. 16:             } else {  
  17. 17:                 rexseeOrientation.setRate('normal');                //將傳感器敏感程度設爲正常  
  18. 18:                 rexseeOrientation.stop();                            //停止傳感器  
  19. 19:             }  
  20. 20:             rexseeFlash.clearKeyboard();                            //清空鍵盤  
  21. 21:             if ( para.leftKeyboard ) rexseeFlash.setLeftKeyboard(para.leftKeys,para.leftKeyTheme,para.leftKeyboardStyle,para.leftKeyRowStyle,para.leftKeyStyle,para.leftKeyPressedStyle);            //設置左鍵盤  
  22. 22:             if ( para.rightKeyboard ) rexseeFlash.setRightKeyboard(para.rightKeys,para.rightKeyTheme,para.rightKeyboardStyle,para.rightKeyRowStyle,para.rightKeyStyle,para.rightKeyPressedStyle);    //設置右鍵盤  
  23. 23:             rexseeFlash.setSwfStyle(para.swfStyle);            //設置Flash遊戲區域的樣式  
  24. 24:             rexseeFlash.show(para.swf,para.dialogStyle);    //設置對話框樣式並啓動對話框  
  25. 25:         }  
  26. 26:         var paraKeyboardVersion = {  
  27. 27:                 orientation:             "landscape",        //屏幕方向  
  28. 28:                 sensor:                 false,                //是否啓用方向傳感器  
  29. 29:                 //設置左邊鍵盤  
  30. 30:                 leftKeyboard:             false,                //是否啓用左鍵盤  
  31. 31:                 leftKeys:                 "",                    //左鍵盤的按鍵,數字序列,同一行按鍵使用逗號分隔,不同行使用分號分隔,Rexsee自定義按鍵包括-2,-3,-4,-5,其餘按鍵請參考http://developer.android.com/reference/android/view/KeyEvent.html  
  32. 32:                 leftKeyTheme:             "",                    //左鍵盤的樣式,字符串,應在asset目錄下創建以該字符串命名的文件夾,然後將按鍵圖片(鍵值.png)放在該文件夾  
  33. 33:                 leftKeyboardStyle:         "",                    //左鍵盤的樣式  
  34. 34:                 leftKeyRowStyle:         "",                    //左鍵盤中每一行的樣式  
  35. 35:                 leftKeyStyle:             "",                    //左鍵盤中每個按鍵的樣式  
  36. 36:                 leftKeyPressedStyle:         "",                //左鍵盤中每個按鍵被按下時的樣式  
  37. 37:                 //設置右邊鍵盤,參看上面左鍵盤說明  
  38. 38:                 rightKeyboard:             true,  
  39. 39:                 rightKeys:                 "-1,-5;-2,62;21,22",  
  40. 40:                 rightKeyTheme:             "keyboard/default",  
  41. 41:                 rightKeyboardStyle:     "border-left-width:5px;border-left-color:#aaaaaa+#000000/2;background-color:#000000;",  
  42. 42:                 rightKeyRowStyle:         "",  
  43. 43:                 rightKeyStyle:             "",  
  44. 44:                 rightKeyPressedStyle:    "",  
  45. 45:                 //設置Flash區域的樣式  
  46. 46:                 swfStyle:                "",  
  47. 47:                 //設置對話框的樣式  
  48. 48:                 dialogStyle:             "",  
  49. 49:                 //設置Flash遊戲的地址  
  50. 50:                 swf:                     "game.swf"  
  51. 51:         };  
  52. 52:         var paraSensorVersion = {  
  53. 53:                 orientation:             "landscape",  
  54. 54:                 sensor:                 true,  
  55. 55:                 leftKeyboard:             false,  
  56. 56:                 leftKeys:                 "",  
  57. 57:                 leftKeyTheme:             "",  
  58. 58:                 leftKeyboardStyle:         "",  
  59. 59:                 leftKeyRowStyle:         "",  
  60. 60:                 leftKeyStyle:             "",  
  61. 61:                 leftKeyPressedStyle:         "",  
  62. 62:                 rightKeyboard:             true,  
  63. 63:                 rightKeys:                 "-1;-5;-2;62",  
  64. 64:                 rightKeyTheme:             "keyboard/default",  
  65. 65:                 rightKeyboardStyle:     "border-left-width:5px;border-left-color:#aaaaaa+#000000/2;background-color:#000000;",  
  66. 66:                 rightKeyRowStyle:         "",  
  67. 67:                 rightKeyStyle:             "",  
  68. 68:                 rightKeyPressedStyle:    "",  
  69. 69:                 swfStyle:                "",  
  70. 70:                 dialogStyle:             "",  
  71. 71:                 swf:                     "game.swf"  
  72. 72:         };  
  73. 73:   
  74. 74:         window.onRexseeReady = function(){  
  75. 75:             //在頁面裝載完畢時運行  
  76. 76:             if ( rexseeBuild.getSdk()<8) {  
  77. 77:                 alert("對不起,您的手機軟件版本太低,不能運行該遊戲,請使用Android2.2以上版本運行該遊。");  
  78. 78:                 rexseeApplication.quit();  
  79. 79:             }  
  80. 80:             if (!rexseeFlash.isReady()){  
  81. 81:                 rexseeDialog.confirm("Adobe Flash Player""Adobe Flash Player沒有安裝,無法運行該遊戲。是否現在安裝?","現在安裝","退出程序","javascript:rexseeBrowser.open('http://www.rexsee.com/flash/flashplayer/download.php');rexseeApplication.exit();","javascript:rexseeApplication.exit();");  
  82. 82:             }  
  83. 83:             rexseeScreen.setScreenAlwaysOn(true);                  //總是點亮屏幕  
  84. 84:             rexseeScreen.setScreenOrientation('portrait');      //將將屏幕方向設爲垂直  
  85. 85:             rexseeStatusBar.setStyle("visibility:hidden;");     //隱藏狀態欄  
  86. 86:                     }  
  87. 87:         window.onAjaxReturned = function(ajaxUrl,response){  
  88. 88:             response = unescape(response);  
  89. 89:             if ( ajaxUrl == headerUrl) document.getElementById("header").innerHTML = response;  
  90. 90:             else if ( ajaxUrl == footerUrl) document.getElementById("footer").innerHTML = response;  
  91. 91:             else if ( ajaxUrl == jsUrl) eval(response);  
  92. 92:         }  
  93. 93:         window.onFlashDialogDismissed = function(){  
  94. 94:             //在退出Flash遊戲返頁面時運行  
  95. 95:             rexseeScreen.setScreenOrientation('portrait');        //將屏幕方向設爲垂直  
  96. 96:         }  
  97. 97:         window.onbeforeunload = function(){  
  98. 98:             //在退出頁面時運行  
  99. 99:             rexseeScreen.setScreenOrientation('auto');            //將屏幕方向設爲自動  
  100. 100:                rexseeOrientation.stop();                            //停止方向傳感器  
  101. 101:            }  
  102. 102:              
  103. 103:            var version = "";  
  104. 104:            //Rexsee新增按鍵的回調函數  
  105. 105:            window.onKeyboardHelpPressed = function(){  
  106. 106:                //對應鍵值:-2  
  107. 107:                if ( version == "keyboard" ) alert("左右鍵向左或向右,空格鍵跳躍。");  
  108. 108:                else if ( version == "sensor" ) alert("左右傾斜手機向左或向右,虛擬鍵盤的空格鍵跳躍。");  
  109. 109:            }  
  110. 110:            window.onKeyboardQaPressed = function(){  
  111. 111:                //對應鍵值:-3  
  112. 112:                alert("QA pressed.");  
  113. 113:            }  
  114. 114:            window.onKeyboardHomePressed = function(){  
  115. 115:                //對應鍵值:-4  
  116. 116:                if ( window.confirm("要退出遊戲嗎?") ) {  
  117. 117:                    rexseeFlash.hide();  
  118. 118:                    rexseeApplication.quit();  
  119. 119:                }  
  120. 120:            }  
  121. 121:            window.onKeyboardCancelPressed = function(){  
  122. 122:                //對應鍵值:-5  
  123. 123:                if ( window.confirm("要退出遊戲嗎?") ) {  
  124. 124:                    rexseeFlash.hide();  
  125. 125:                }  
  126. 126:            }  
  127. 127:              
  128. 128:            window.onOrientationChanged = function(){  
  129. 129:                //如果啓用方向傳感器,在回調函數中向Flash遊戲發送鍵值  
  130. 130:                var x = Math.round(rexseeOrientation.getLastKnownX());  
  131. 131:                var y = Math.round(rexseeOrientation.getLastKnownY());  
  132. 132:                var z = Math.round(rexseeOrientation.getLastKnownZ());  
  133. 133:                if ( y > 10 ) {  
  134. 134:                    rexseeFlash.keyDown(21);  
  135. 135:                } else if ( y<-10){  
  136. 136:                    rexseeFlash.keyDown(22);  
  137. 137:                } else {  
  138. 138:                    rexseeFlash.keyUp(21);  
  139. 139:                    rexseeFlash.keyUp(22);  
  140. 140:                }  
  141. 141:            }  
  142. 142:        </SCRIPT>  
  143. 143:        <STYLE>  
  144. 144:            body { margin:0px; background-color:#eeeeee;}  
  145. 145:            .imageButton { width:100px;height:100px; border:none; margin: 0 0 0 10; }  
  146. 146:            .section {border:1px solid;border-color:#f7f7f7 #7f9db5 #7f9db5 #f7f7f7;background-color:#ffffff;padding:15px;}  
  147. 147:            .gameTitle { font-size:24px;font-weight:bold; color:#F01D17;margin:15 0 15 0;}  
  148. 148:            .gameIntro {}  
  149. 149:            .gameVersion { font-size:20px;font-weight:bold; color:#F01D17;margin:10 0 15 0;}  
  150. 150:            .gameGuide { margin: 0 0 10 0; }  
  151. 151:            #copyright {background-color:#444444;padding:5px;color:white;font-size:10px;}  
  152. 152:        </STYLE>  
  153. 153:    </HEAD>  
  154. 154:    <BODY>  
  155. 155:    <a href="http://www.rexsee.com/flash/index.php"><img src='banner.png' width=100% border=0></a>  
  156. 156:      
  157. 157:    <div class=section>  
  158. 158:        <div class=gameTitle>美羊羊卡丁車</div>  
  159. 159:        <div class=gameIntro>  
  160. 160:            可愛的美羊羊是賽車高手哦,來體驗下美羊羊馬路殺手的感覺吧,美羊羊開車的速度可是會越來越快哦,小心呀!  
  161. 161:            <br><br>遊戲目標:幫助美羊羊躲避路障,安全抵達終點。  
  162. 162:            <br>&nbsp;  
  163. 163:        </div>  
  164. 164:    </div>  
  165. 165:    <div class=section>  
  166. 166:        <table width=100%><tr>  
  167. 167:            <td valign=top>  
  168. 168:                <div class=gameVersion>虛擬鍵盤版</div>  
  169. 169:                <div class=gameGuide>左右鍵向左或向右,空格鍵跳躍。</div>  
  170. 170:            </td>  
  171. 171:            <td><img src="startNow.png" οnclick="version='keyboard';startFlashGame(paraKeyboardVersion);" class=imageButton></td>  
  172. 172:        </tr></table>  
  173. 173:    </div>  
  174. 174:    <div class=section>  
  175. 175:        <table width=100%><tr>  
  176. 176:            <td valign=top>  
  177. 177:                <div class=gameVersion>重力感應版</div>  
  178. 178:                <div class=gameGuide>左右傾斜手機向左或向右,虛擬鍵盤的空格鍵跳躍。</div>  
  179. 179:            </td>  
  180. 180:            <td><img src="startNow.png" οnclick="version='sensor';startFlashGame(paraSensorVersion);" class=imageButton></td>  
  181. 181:        </tr></table>  
  182. 182:    </div>  
  183. 183:    </BODY>  
  184. 184:    </HTML>  
 

轉:http://www.oschina.net/code/snippet_194999_6812
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章