sunyu
/
live2demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix blurry image on mobile devices (especially in fullscreen mode)

translate
Ioann Volkov 2023-05-21 01:02:27 +03:00
parent 4f1531c94a
commit 1e281f8031
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Samples/TypeScript/Demo/index.html
View File

@ -2,13 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1900">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TypeScript HTML App</title>
<style>
html, body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
</style>
<!-- Pollyfill script -->
<script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>

23
Samples/TypeScript/Demo/src/lappdelegate.ts
View File

@ -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

6
Samples/TypeScript/Demo/src/lappview.ts
View File

@ -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();
}
}