LiesAuer的 RSS 预览

OPPO 快游戏在浏览器复现运行（七）之远程资源离线化

2026-08-09 14:21:00

**完全的离线化仅适用于走快游戏 API 的资源，部分资源是直接通过 `img` 标签或者其他方式加载的（最终会 fallback 到 XHR）还是会到本地服务器发起请求。`web.sdk.js` 不对此类资源做特殊拦截处理，做离线化的本意是解决版本更新后在线资源的失效问题，对快游戏做 web 移植本身就需要一个静态服务器托管，所以这个并不算大问题。如果需要完完全全的离线化，可自行对游戏逻辑做魔改拦截。**

针对使用 Cocos Creator 框架制作的游戏，在 `_CCSettings` 中一般能看到以下字段：`remoteBundles`、`bundleVers`，`remoteBundles`是远程 Bundle 列表，`bundleVers`是所有 Bundle 列表，比如：

```js
window._CCSettings = {
    remoteBundles: ["resources"],
    bundleVers: {
        internal:"b3cad",
        b0:"10607",
        b1:"f37a4",
        data:"5bf88",
        resources:"011ae",
        main:"c0c83"
    }
};
```

远程 Bundle 可能会依赖其他 Bundle，为了远程 Bundle 能顺利的加载，需要先通过 `loadBundle` 拿到 Bundle 配置中的 `deps`，统计完整依赖链，再按依赖顺序逐个加载。

```js
async function loadCCBundle(names, unload = false) {
    names = Array.isArray(names) ? names : [names];

const bundles = Object.create(null);
    const visited = Object.create(null);
    const visiting = Object.create(null);
    const order = [];

function unloadBundle(name) {
        const bundle = cc.assetManager.getBundle(name);

if (bundle) {
            bundle.releaseAll();
            cc.assetManager.removeBundle(bundle);
        }
    }

function loadBundle(name) {
        return new Promise(function (resolve, reject) {
            if (unload) {
                unloadBundle(name);
            }

const exists = cc.assetManager.getBundle(name);

if (exists) {
                resolve(exists);
                return;
            }

cc.assetManager.loadBundle(name, function (err, bundle) {
                if (err) {
                    reject(err);
                    return;
                }

resolve(bundle);
            });
        });
    }

function loadDir(bundle) {
        return new Promise(function (resolve, reject) {
            window.qg.consolelog('loadDir start: ' + bundle.name);

bundle.loadDir('', function (err) {
                if (err) {
                    reject(err);
                    return;
                }

window.qg.consolelog(bundle.name + ' resources loaded');
                resolve(bundle);
            });
        });
    }

async function visit(name, stack) {
        if (visited[name]) {
            return;
        }

if (visiting[name]) {
            throw new Error('Circular bundle deps: ' + stack['concat'](name).join(' -> '));
        }

visiting[name] = true;

const bundle = await loadBundle(name);
        const deps = bundle.deps || [];

bundles[name] = bundle;
        window.qg.consolelog('bundle deps: ' + name + ' -> ' + JSON.stringify(deps));

for (let i = 0; i  '));

for (let i = 0; i

OPPO 快游戏在浏览器复现运行（六）之触摸适配

2026-08-09 12:51:00

OPPO 快游戏在浏览器复现运行（五）之竖屏适配

2026-08-09 12:41:35

大部分竖屏快游戏都很少有兼顾宽屏分辨率的情况，Laya 游戏会有一个自动横屏的机制，会将整个画面横向显示，而像 CC 游戏，基本都是 UI 位置大小严重失调，要么导致某些区域点不了，要么导致 UI 飞出屏幕外，根本看不到点不着。针对这两个常见的游戏框架做了一个竖屏适配修复，可以用修复代码在启动阶段将游戏画面按设定好的比例强制自适配调整。推荐比例：`9:16`、`10:16`、`9:20`。

```js
fixPortrait() {
    if (window.cc) {
        _fixCCPortrait();
    } else if (Laya) {
        _fixLayaPortrait();
    }
}

_fixLayaPortrait() {
    if (!Laya) return;

const bestRatio = window.sdkConfig?.bestRatio;
    let maxRatio = 9 / 20;

if (bestRatio) {
        const [w, h] = bestRatio.split(':').map(Number);
        maxRatio = w / h;
    }

Laya._stage = Laya.stage;

Object.defineProperty(Laya, 'stage', {
        set: function(val) {
            Laya._stage = val;

const setScreenSize = val.setScreenSize;

let _rawWidth = 0;
            let _rawHeight = 0;

val.setScreenSize = function(width, height) {
                const pixelRatio = Laya.Browser.pixelRatio;
                let rawWidth = width / pixelRatio;
                let rawHeight = height / pixelRatio;

if (rawWidth / rawHeight > maxRatio) {
                    rawWidth = rawHeight * maxRatio;

width = rawWidth * pixelRatio;
                    height = rawHeight * pixelRatio;
                }

_rawWidth = rawWidth;
                _rawHeight = rawHeight;

setScreenSize.apply(val, [width, height]);
            };

const identity = val._canvasTransform.identity;

val._canvasTransform.identity = function(...args) {
                identity.apply(val._canvasTransform, args);
                val._canvasTransform.tx = (Laya.Browser.clientWidth - _rawWidth) / 2;

return val._canvasTransform;
            };

const scale = val._canvasTransform.scale;

val._canvasTransform.scale = function(...args) {
                scale.apply(val._canvasTransform, args);
                val._canvasTransform.tx = (Laya.Browser.clientWidth - _rawWidth) / 2;

return val._canvasTransform;
            };
        },
        get: function() {
            return Laya._stage;
        },
        configurable: true,
        enumerable: true,
    });
}

_fixCCPortrait() {
    const cc = window.cc;
    const view = cc?.view;
    const canvas = cc?.game?.canvas;

if (!view || !canvas) return;

const bestRatio = window.sdkConfig?.bestRatio;
    let maxRatio = 9 / 20;

if (bestRatio) {
        const [w, h] = bestRatio.split(':').map(Number);
        maxRatio = w / h;
    }

const getViewport = (width?: number, height?: number) => {
        const viewportWidth = width || window.innerWidth || document.documentElement.clientWidth;
        const viewportHeight = height || window.innerHeight || document.documentElement.clientHeight;

return {
            width: Math.max(1, viewportWidth),
            height: Math.max(1, viewportHeight),
        };
    };

const applyViewportStyle = (viewportWidth?: number, viewportHeight?: number) => {
        const viewport = getViewport(viewportWidth, viewportHeight);
        const width = Math.min(viewport.width, viewport.height * maxRatio);
        const height = viewport.height;

if (view._frameSize) {
            view._frameSize.width = width;
            view._frameSize.height = height;
        }

if (canvas.style) {
            canvas.style.position = "fixed";
            canvas.style.left = `${Math.round((viewport.width - width) / 2)}px`;
            canvas.style.top = "0px";
            canvas.style.width = `${Math.round(width)}px`;
            canvas.style.height = `${Math.round(height)}px`;
            canvas.style.margin = "0px";
        }
    };

const initFrameSize = view._initFrameSize;
    view._initFrameSize = function() {
        initFrameSize.apply(this, arguments);
        applyViewportStyle();
    };

const setDesignResolutionSize = view.setDesignResolutionSize;
    view.setDesignResolutionSize = function() {
        const result = setDesignResolutionSize.apply(this, arguments);
        applyViewportStyle();
        return result;
    };

const setCanvasSize = view.setCanvasSize;
    if (typeof setCanvasSize === "function") {
        view.setCanvasSize = function(width: number, height: number) {
            const viewport = getViewport(width, height);
            const result = setCanvasSize.call(this, viewport.width, viewport.height);
            applyViewportStyle(viewport.width, viewport.height);
            return result;
        };
    }

const refreshResolution = () => {
        applyViewportStyle();

const resolution = view._originalDesignResolutionSize || view._designResolutionSize;
        if (!resolution || resolution.width

解决 WSL2 莫名其妙的远程桌面报错弹窗

2026-08-09 01:48:00

某 Telegram AI陪聊任意注册账号漏洞

2025-12-29 21:41:00

某 Telegram AI陪聊跨渠道登录漏洞

2025-12-29 20:41:00

LiesAuer修改

LiesAuer的 RSS 预览

该作者的社会化媒体

LiesAuer 修改