WebGL平台动态修改窗口大小

1.静态设置

发布之前在Player Setting/Resolution and Presentation设置

2.动态设置

经过测试在WebGL平台打包后,Screen.SetResolution设置分辨率是不生效的

需要写js脚本

1.新建脚本WebGLResize.jslib,放在Plugins\WebGL下面

javascript 复制代码
mergeInto(LibraryManager.library, {
    ResetCanvasSize: function(width, height) {
        // 获取Unity canvas元素
        var canvas = document.querySelector("#unity-canvas");
        if (!canvas) {
            console.warn("无法找到Unity canvas元素");
            return;
        }
        
        // 设置canvas的新尺寸
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        
        // 如果存在Unity实例,通知其resize
        if (Module) {
            Module.canvas.width = width;
            Module.canvas.height = height;
            
            // 触发Unity内部的resize事件
            if (typeof Module.onResize === 'function') {
                Module.onResize(width, height);
            }
        }
        
        // 调整容器大小(如果有父容器)
        var parent = canvas.parentElement;
        if (parent) {
            parent.style.width = width + "px";
            parent.style.height = height + "px";
        }
        
        console.log("画布已调整为: " + width + "x" + height);
    }
});

2.C#调用

完整代码:

cs 复制代码
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using TMPro;
using UnityEngine;

public class WebTest : MonoBehaviour
{
    public TextMeshProUGUI logText;

    public void Set600_960()
    {
        SetCustomCanvasSize(600, 960);
    }

    public void Set960_600()
    {
        SetCustomCanvasSize(960, 600);
    }

    public void ClearLog()
    {
        logText.text = "";
    }


#if UNITY_WEBGL && !UNITY_EDITOR
        [DllImport("__Internal")]
        private static extern void ResetCanvasSize(int width, int height);
#endif
// 设置自定义分辨率
    private void SetCustomCanvasSize(int width, int height)
    {
#if UNITY_WEBGL && !UNITY_EDITOR
            ResetCanvasSize(width, height);
#endif
        string msg = $"{width}x{height}  Screen:{Screen.width}x{Screen.height}";
        AppendLogText(msg);
        Debug.LogWarning(msg);
    }

    void AppendLogText(string msg)
    {
        logText.text = logText.text + "\n" + msg;
    }
}

3.效果展示

相关推荐
八荒启·交互动画11 小时前
# Web特效020—让 Web 特效真正动起来:时间循环应该怎么接
前端·webgl·网页特效·八荒启-交互动画·八荒启
八荒启·交互动画15 小时前
Web特效019-Web特效的定义与边界核心算法手写一遍:先跑起来,再谈高级效果
前端·webgl·网页特效·八荒启-交互动画·八荒启
八荒启·交互动画1 天前
Web特效011—Web特效的定义与边界为什么忽快忽慢:时间、频率与采样的秘密
webgl·网页特效·八荒启-交互动画·八荒启·web特效
八荒启·交互动画1 天前
Web特效008—一个 `getContext(‘webgl‘)`,浏览器到底交出了什么?
webgl·八荒启-交互动画
xhload3d2 天前
图扑智慧工厂 | 继电器产线仿真态势管控平台
物联网·低代码·webgl·数字孪生·可视化·智慧工厂·工业互联网·hightopo
新的瑞拉公主6 天前
Unity游戏发布微信小游戏:从构建到提审
unity·webgl·微信小游戏·开放数据域
慧都小妮子7 天前
实时大屏掉帧排查:WebGL 图表库选型的 5 项可实测检查
webgl·scichart.js·实时大屏掉帧·前端图表选型
❀͜͡傀儡师7 天前
移动端 360° 商品展示方案:从 20MB 雪碧图到 800KB 丝滑视频
ffmpeg·webgl·sprite
平行云8 天前
国产GPU云渲染适配实战:驱动兼容、编码调优与多路并发
unity·ue5·webrtc·webgl·实时云渲染·云桌面·像素流送
平行云11 天前
实时云渲染信创架构解析:从GPU池化到全栈适配的技术演进
linux·unity·docker·ue5·webgl·数字孪生·实时云渲染