0
私は、既存のアプリケーション内のWebViewで実行されているHTML5キャンバスベースのゲームを開発しています。最初にゲームを実行すると、バックグラウンドで正常に読み込まれ、すべてのログには準備ができて実行中であることが示唆されます。ただし、WebViewには何も表示されません。 WebViewに何か他のものをロードしてから私のゲームに戻すと、前と同じように正常にロードされてレンダリングされます。キャンバスが最初に実行されているときに表示されないようにすることができますが、それは後続のリロードでのみ機能します。詳細についてはHTML5 - Android WebViewの最初の読み込み時にキャンバスがレンダリングされない
：
- 私が初めてゲームをロードするには、コンソールのエラーを取得していません。
- iOS版のアプリケーションでゲームを実行すると、正常に読み込まれます。
- キャンバス要素に適用されたCSSはレンダリングされません。表示する前に資産を読み込むことは問題ではないことを示唆しています。
私が調査してきたすべての問題は、彼らが表示される前に資産をレンダリングするために試みることによって引き起こされたので、その後のリロードが表示されているこれらの今、キャッシュされた画像によって固定したが、私はに失敗キャンバスに関する何かを見つけることができませんAndroidにはまったく表示されません。
は、ここでのWebViewによってロードされたHTMLです：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Darts</title>
<meta name="description" content="Darts GamePad Game">
<script src="js/dummy-gamepad-functions.js"></script>
<script src="js/libs/polyfill.js"></script>
<script src="js/gamepad-client.js"></script>
<script src="js/darts-boot.js"></script>
<script src="js/darts-loader.js"></script>
<link rel="stylesheet" href="css/darts.css">
</head>
<body onload=bootGame()>
<div id="darts-game-container"></div>
</body>
</html>
そして、これは私のonloadイベントスクリプトです：私は私のキャンバス、リサイズメソッドに絞り込ま後
var bootGame =() => {
//create canvas element
let canvas = document.createElement('canvas');
canvas.id = "darts-canvas";
canvas.width = 740;
canvas.height = 400;
let gameContainer = document.getElementById("darts-game-container");
gameContainer.appendChild(canvas);
//scale canvas to view window
let gamepadViewport = document.getElementById("darts-game-container"),
gamepadCanvas = document.getElementById("darts-canvas"),
viewportWidth = window.innerWidth,
canvasWidth = gamepadCanvas.width,
viewportHeight = window.innerHeight,
canvasHeight = gamepadCanvas.height;
let scaleRatio = Math.min(viewportWidth/canvasWidth, viewportHeight/canvasHeight);
if (scaleRatio < 1) {
gamepadViewport.style.transform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.webkitTransform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.mozTransform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.oTransform = `scale(${scaleRatio}, ${scaleRatio})`;
}
//initialise Loader
Darts.Loader = new Loader();
//initialise GamePad API, then initialise core classes when loaded
GamePadClient = new GamePadClient();
GamePadClient.initialise()
.then(() => {
//load all scripts
return Darts.Loader.loadScripts(LIBS_TO_LOAD, COMMON_LIB_PATH, LIB_NAME_SUFFIX)
})
.then(() => {
return Darts.Loader.loadScripts(SCRIPTS_TO_LOAD, COMMON_SCRIPT_PATH, SCRIPT_NAME_SUFFIX)
})
.then(() => {
//initalise core classes
Darts.Controller = new Controller();
Darts.Logic = new Logic();
Darts.Display = new Display();
Darts.GameProps = new GameProps();
Darts.GameState = new GameState();
//loads display elements and scripts, then inits game once complete
Darts.Controller.initGame();
});
}
ウェブビューの作成と処理に関連するコードを共有できますか？ – amacf
@amacf関連するコード例を追加しました – lhmcneil