由於rmmv在手機端首次開啟會比較慢(依據手機性能或許有所不同),很容易出現10多秒的黑畫面,有些玩家會因為等不耐煩或以為當機而直接卸載。
目前暫時用一下方法豐富等待時的畫面：
1.一按下app馬上顯示logo畫面
在android studio中res文件夾下建立一個名為drawable的文件夾,裡面放入一張用來顯示的png圖片,命名為logo,然後在res的themes.xml檔中style加入下面兩行
<item name="android:windowBackground">@drawable/logo</item>
<item name="android:windowNoTitle">
這樣用戶一開啟app就會顯示這張圖片而非黑畫面。
但是不同的機型,熒幕大小會不一樣,有可能把logo圖片拉伸變形,為了適應不同的機型不會拉伸圖片,首先在上面提到建立的drawable文件夾中新增一個app_launcher_layout.xml文件,修改為以下內容:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/white" />
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo" />
</item>
</layer-list>
然後把上面提到的themes文件中將logo改為app_launcher_layout,如下:
<item name="android:windowBackground">@drawable/app_launcher_layout</item>
如此一來背景為白色,logo會顯示在熒幕中間並且不會拉伸變形
2.更改webview的背景圖片
由於MV遊戲在加載完成前一直都是黑畫面,所以在mv輸出的index.html裡面<meta name="viewport" XXXXXXXXXXXXXX>XXXXXXXXX部分改為content="width=device-width, initial-scale=1, shrink-to-fit=no"
然後在下面加入以下內容,
<style>
html,
body {
background-color: black;
background-image: url('img/system/Loading.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
</style>
以上可以把MV的loading圖片更改為webview的背景，在遊戲加載完成前會顯示這個loading的背景圖片。
| background-color: black; | 背景顏色,black為黑色,white為白色 |
| background-image: url('img/system/Loading.png'); | 背景圖片路徑 |
| background-repeat: no-repeat; | 避免背景圖像重複出現 |
| background-attachment: fixed; | 確保圖片不會隨頁面滾動 |
| background-position: center center; | 圖片置中 |
| background-size: cover; | 圖片覆蓋整個元素 |
3.根據不同的遊戲專案可以更改適合的顯示，橫屏或豎屏
在AndroidManifest.xml中 <activity android:name XXXXXXXXXXXXXXXX修改 android:screenOrientation="sensorPortrait">
sensorLandscape（橫屏）
sensorPortrait（豎屏）
4.在gamefont.css中,最下面加入以下內容以開啟硬體加速(多次測試,感覺上好像流暢了那麼一點點,但不算明顯)
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
