From 1e281f8031908eb3a2690076dfe9751517c22c69 Mon Sep 17 00:00:00 2001 From: Ioann Volkov Date: Sun, 21 May 2023 01:02:27 +0300 Subject: [PATCH] Fix blurry image on mobile devices (especially in fullscreen mode) --- Samples/TypeScript/Demo/index.html | 7 ++++++- Samples/TypeScript/Demo/src/lappdelegate.ts | 23 +++++++++------------ Samples/TypeScript/Demo/src/lappview.ts | 6 +++--- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/Samples/TypeScript/Demo/index.html b/Samples/TypeScript/Demo/index.html index 24ae2bc..9556d66 100644 --- a/Samples/TypeScript/Demo/index.html +++ b/Samples/TypeScript/Demo/index.html @@ -2,13 +2,18 @@ - + TypeScript HTML App diff --git a/Samples/TypeScript/Demo/src/lappdelegate.ts b/Samples/TypeScript/Demo/src/lappdelegate.ts index 737452b..26e67fb 100644 --- a/Samples/TypeScript/Demo/src/lappdelegate.ts +++ b/Samples/TypeScript/Demo/src/lappdelegate.ts @@ -54,12 +54,6 @@ export class LAppDelegate { public initialize(): boolean { // キャンバスの作成 canvas = document.createElement('canvas'); - if (LAppDefine.CanvasSize === 'auto') { - this._resizeCanvas(); - } else { - canvas.width = LAppDefine.CanvasSize.width; - canvas.height = LAppDefine.CanvasSize.height; - } // glコンテキストを初期化 // @ts-ignore @@ -79,6 +73,13 @@ export class LAppDelegate { // キャンバスを DOM に追加 document.body.appendChild(canvas); + if (LAppDefine.CanvasSize === 'auto') { + this._resizeCanvas(); + } else { + canvas.width = LAppDefine.CanvasSize.width; + canvas.height = LAppDefine.CanvasSize.height; + } + if (!frameBuffer) { frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING); } @@ -118,11 +119,6 @@ export class LAppDelegate { this._resizeCanvas(); this._view.initialize(); this._view.initializeSprite(); - - // キャンバスサイズを渡す - const viewport: number[] = [0, 0, canvas.width, canvas.height]; - - gl.viewport(viewport[0], viewport[1], viewport[2], viewport[3]); } /** @@ -294,8 +290,9 @@ export class LAppDelegate { * Resize the canvas to fill the screen. */ private _resizeCanvas(): void { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + canvas.width = canvas.clientWidth * window.devicePixelRatio; + canvas.height = canvas.clientHeight * window.devicePixelRatio; + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); } _cubismOption: Option; // Cubism SDK Option diff --git a/Samples/TypeScript/Demo/src/lappview.ts b/Samples/TypeScript/Demo/src/lappview.ts index 63a7126..ffe3290 100644 --- a/Samples/TypeScript/Demo/src/lappview.ts +++ b/Samples/TypeScript/Demo/src/lappview.ts @@ -176,7 +176,7 @@ export class LAppView { * @param pointY スクリーンY座標 */ public onTouchesBegan(pointX: number, pointY: number): void { - this._touchManager.touchesBegan(pointX, pointY); + this._touchManager.touchesBegan(pointX * window.devicePixelRatio, pointY * window.devicePixelRatio); } /** @@ -189,7 +189,7 @@ export class LAppView { const viewX: number = this.transformViewX(this._touchManager.getX()); const viewY: number = this.transformViewY(this._touchManager.getY()); - this._touchManager.touchesMoved(pointX, pointY); + this._touchManager.touchesMoved(pointX * window.devicePixelRatio, pointY * window.devicePixelRatio); const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance(); live2DManager.onDrag(viewX, viewY); @@ -221,7 +221,7 @@ export class LAppView { live2DManager.onTap(x, y); // 歯車にタップしたか - if (this._gear.isHit(pointX, pointY)) { + if (this._gear.isHit(pointX * window.devicePixelRatio, pointY * window.devicePixelRatio)) { live2DManager.nextScene(); } }