0
기존 애플리케이션에서 WebView에서 실행되는 HTML5 캔버스 기반 게임을 개발 중입니다. 게임을 처음 실행하면 백그라운드에서 성공적으로로드되며 모든 로그는 준비가되어 있고 실행 중이라고 제안합니다. 그러나 WebView에는 아무 것도 표시되지 않습니다. WebView에 다른 것을로드 한 다음 내 게임으로 돌아 오면 이전과 같이 성공적으로로드 된 다음 렌더링됩니다. 캔버스가 처음 실행될 때 표시되는 것을 막을 수있는 것은 무엇입니까? 이후의 재로드에서만 작동합니까? 세부 사항에 대한HTML5 - Android WebView에서 첫 번째로드시 렌더링되지 않는 캔버스
:
- 나는 처음으로 게임을로드에는 콘솔 오류를 얻을.
- iOS 버전의 응용 프로그램에서 실행하면 게임이 성공적으로로드됩니다.
- 캔버스 요소에 적용된 CSS가 렌더링되지 않습니다. 표시하기 전에 내 애셋을로드하는 데 문제가 없다고 제안합니다.
내가 조사한 모든 문제는 자산이 표시되기 전에 렌더링하려고했기 때문에 후속 다시로드가 이제는 현재 캐시 된 이미지에 의해 수정되었지만 캔버스와 관련하여 아무 것도 찾을 수 없습니다. Android에서 전혀 표시되지 않습니다.
다음은 웹보기에 의해로드 된 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>
그리고 이것은 내 온로드 스크립트입니다 : 내 캔버스 크기를 조정하는 방법으로 좁혀 후
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