結構ハマったので備忘録として。。。
WebGL書き出しをすると、Retinaディスプレイでは画像がぼやぼや
倍解像度あるので、当然といえば当然。
キャンバスサイズを2倍にして、cssで1/2してみる
きれいになる。ただし、Inputが効かなくなる。
正確にいうと、「元のサイズの位置にボタンがある」ような状態になる。
へんなとこにマウスオーバーすると、反映される、みたいな。
以下のような感じ。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player |(Your App name)</title>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/YourAppName.json");
</script>
</head>
<body>
<div id="gameContainer" style="width: 1600px; height: 1000px;transform-origin: 0 0;transform:scale(0.5);"></div>
</body>
</html>
これだけだとダメです。
どうしたらいいか
まず、以下を編集
/Applications/Unity/PlaybackEngines/WebGLSupport/BuildTools/lib/UnityNativeJs/UnityNative.js
間違ってた。以下。
/Applications/Unity/PlaybackEngines/WebGLSupport/BuildTools/Emscripten/src/library_html5.js
これのなかに、fillMouseEventDataという関数がある。
fillMouseEventData: function(eventStruct, e, target) {
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.timestamp, 'JSEvents.tick()', 'double') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.screenX, 'e.screenX', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.screenY, 'e.screenY', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.clientX, 'e.clientX', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.clientY, 'e.clientY', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.ctrlKey, 'e.ctrlKey', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.shiftKey, 'e.shiftKey', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.altKey, 'e.altKey', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.metaKey, 'e.metaKey', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.button, 'e.button', 'i16') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.buttons, 'e.buttons', 'i16') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.movementX, 'e["movementX"] || e["mozMovementX"] || e["webkitMovementX"] || (e.screenX-JSEvents.previousScreenX)', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.movementY, 'e["movementY"] || e["mozMovementY"] || e["webkitMovementY"] || (e.screenY-JSEvents.previousScreenY)', 'i32') }}};
if (Module['canvas']) {
var rect = Module['canvas'].getBoundingClientRect();
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.canvasX, 'e.clientX - rect.left', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.canvasY, 'e.clientY - rect.top', 'i32') }}};
} else { // Canvas is not initialized, return 0.
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.canvasX, '0', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.canvasY, '0', 'i32') }}};
}
if (target) {
var rect = JSEvents.getBoundingClientRectOrZeros(target);
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.targetX, 'e.clientX - rect.left', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.targetY, 'e.clientY - rect.top', 'i32') }}};
} else { // No specific target passed, return 0.
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.targetX, '0', 'i32') }}};
{{{ makeSetValue('eventStruct', C_STRUCTS.EmscriptenMouseEvent.targetY, '0', 'i32') }}};
}
JSEvents.previousScreenX = e.screenX;
JSEvents.previousScreenY = e.screenY;
},
これを、
e.screenX→ e.screenX*2
e.screenY→ e.screenY*2
e.clientX - rect.left →(e.clientX - rect.left)*2
e.clientY - rect.top →(e.clientY - rect.top)*2
に変更(複数箇所あるので、全部）。
変更したら、1回Macを再起動しないとキャッシュが邪魔しているのか
反映されなかったので、再起動したほうがいいかも。
あとは、書き出して、上記HTMLのように修正すれば、
きれいに表示されるはずです。
（ただ、その後全てのWebGL書き出しに反映されるので、困った時のために絶対バックアップは残しておいたほうがよいと思う）
ネットで色々情報あるけど、ちょっと古そう
Unity 2017.2だと、たぶんこのやり方じゃないといけないと思います。
じゃなくて、ネットで見かける情報はDevelopment Buildにしか対応してない。
Release Buildだと、ビルドされるjsはminifyされてるので、
置換とか書き換えできない。