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

Merge pull request #49 from Tsar/fix/fix_blurry_image_on_mobile_devices 

Fix blurry image on mobile devices (especially in fullscreen mode)
translate
wada 2023-05-30 12:00:31 +09:00 committed by GitHub
parent aacd34c6e0 1e281f8031
commit 2526bb87a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> <html>
<head> <head>
<meta charset="utf-8"> <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> <title>TypeScript HTML App</title>
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
canvas {
width: 100vw;
height: 100vh;
display: block;
}
</style> </style>
<!-- Pollyfill script --> <!-- Pollyfill script -->
<script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></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 { public initialize(): boolean {
// キャンバスの作成 // キャンバスの作成
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
if (LAppDefine.CanvasSize === 'auto') {
this._resizeCanvas();
} else {
canvas.width = LAppDefine.CanvasSize.width;
canvas.height = LAppDefine.CanvasSize.height;
}
// glコンテキストを初期化 // glコンテキストを初期化
// @ts-ignore // @ts-ignore
@ -79,6 +73,13 @@ export class LAppDelegate {
// キャンバスを DOM に追加 // キャンバスを DOM に追加
document.body.appendChild(canvas); document.body.appendChild(canvas);
if (LAppDefine.CanvasSize === 'auto') {
this._resizeCanvas();
} else {
canvas.width = LAppDefine.CanvasSize.width;
canvas.height = LAppDefine.CanvasSize.height;
}
if (!frameBuffer) { if (!frameBuffer) {
frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING); frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
} }
@ -118,11 +119,6 @@ export class LAppDelegate {
this._resizeCanvas(); this._resizeCanvas();
this._view.initialize(); this._view.initialize();
this._view.initializeSprite(); 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. * Resize the canvas to fill the screen.
*/ */
private _resizeCanvas(): void { private _resizeCanvas(): void {
canvas.width = window.innerWidth; canvas.width = canvas.clientWidth * window.devicePixelRatio;
canvas.height = window.innerHeight; canvas.height = canvas.clientHeight * window.devicePixelRatio;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
} }
_cubismOption: Option; // Cubism SDK Option _cubismOption: Option; // Cubism SDK Option

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

@ -176,7 +176,7 @@ export class LAppView {
* @param pointY スクリーンY座標 * @param pointY スクリーンY座標
*/ */
public onTouchesBegan(pointX: number, pointY: number): void { 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 viewX: number = this.transformViewX(this._touchManager.getX());
const viewY: number = this.transformViewY(this._touchManager.getY()); 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(); const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
live2DManager.onDrag(viewX, viewY); live2DManager.onDrag(viewX, viewY);
@ -221,7 +221,7 @@ export class LAppView {
live2DManager.onTap(x, y); live2DManager.onTap(x, y);
// 歯車にタップしたか // 歯車にタップしたか
if (this._gear.isHit(pointX, pointY)) { if (this._gear.isHit(pointX * window.devicePixelRatio, pointY * window.devicePixelRatio)) {
live2DManager.nextScene(); live2DManager.nextScene();
} }
} }