phaser3 微信小游戏若干问题

用phasr3开发微信小游戏的话, 需要修改源码的地方不多。

1:微信小游戏不支持xml,需要装个DOMParser   http://club.phaser-china.com/topic/5b1276a0484a53dd723f42ff

2:图片加载方式需要修改,不好重写代码,需要修改源码

var ImageFile = new Class({

    Extends: File,

    initialize:

    function ImageFile (loader, key, url, xhrSettings, frameConfig)
    {   
        this.isWX = typeof wx !== "undefined";
        var extension = 'png';
        var normalMapURL;

        if (IsPlainObject(key))
        {
            var config = key;

            key = GetFastValue(config, 'key');
            url = GetFastValue(config, 'url');
            normalMapURL = GetFastValue(config, 'normalMap');
            xhrSettings = GetFastValue(config, 'xhrSettings');
            extension = GetFastValue(config, 'extension', extension);
            frameConfig = GetFastValue(config, 'frameConfig');
        }

        if (Array.isArray(url))
        {
            normalMapURL = url[1];
            url = url[0];
        }

        var fileConfig = {
            type: 'image',
            cache: loader.textureManager,
            extension: extension,
            responseType: 'arraybuffer',
            key: key,
            url: url,
            xhrSettings: xhrSettings,
            config: frameConfig
        };

        File.call(this, loader, fileConfig);
        
        //  Do we have a normal map to load as well?
        if (normalMapURL)
        {
            var normalMap = new ImageFile(loader, this.key, normalMapURL, xhrSettings, frameConfig);

            normalMap.type = 'normalMap';

            this.setLink(normalMap);

            loader.addFile(normalMap);
        }
    },

    /**
     * Called automatically by Loader.nextFile.
     * This method controls what extra work this File does with its loaded data.
     *
     * @method Phaser.Loader.FileTypes.ImageFile#onProcess
     * @since 3.7.0
     */
    onProcess: function ()
    {
        let url = this.__url;
        this.state = CONST.FILE_PROCESSING;

        this.data = new Image();

        this.data.crossOrigin = this.crossOrigin;

        var _this = this;

        this.data.onload = function ()
        {
            if (!this.isWX) {
                File.revokeObjectURL(_this.data);
                _this.onProcessComplete();
            } else {
                this.addToCache();
            }
        };

        this.data.onerror = function ()
        {
            if (!this.isWX) {
                File.revokeObjectURL(_this.data);
            } else {
                console.log("||||||");
            }
            _this.onProcessError();
        };

        if (this.isWX) {
            this.data.src = url;
        } else {
            File.createObjectURL(this.data, this.xhrLoader.response, 'image/png');
        }
    },

    /**
     * Adds this file to its target cache upon successful loading and processing.
     *
     * @method Phaser.Loader.FileTypes.ImageFile#addToCache
     * @since 3.7.0
     */
    addToCache: function ()
    {
        var texture;
        var linkFile = this.linkFile;

        if (linkFile && linkFile.state === CONST.FILE_COMPLETE)
        {
            if (this.type === 'image')
            {
                texture = this.cache.addImage(this.key, this.data, linkFile.data);
            }
            else
            {
                texture = this.cache.addImage(linkFile.key, linkFile.data, this.data);
            }

            this.pendingDestroy(texture);

            linkFile.pendingDestroy(texture);
        }
        else if (!linkFile)
        {
            texture = this.cache.addImage(this.key, this.data);

            this.pendingDestroy(texture);
        }
    }

 }); 

3: 边界面部导致微信小游戏的点击事件失效, window.pageXOffset为undefined 修改源码或修改适配器都可以

    updateBounds: function ()
    {
        var bounds = this.bounds;

        var clientRect = this.canvas.getBoundingClientRect();

        bounds.x = clientRect.left + (window.pageXOffset - document.documentElement.clientLeft || 0);
        bounds.y = clientRect.top + (window.pageYOffset - document.documentElement.clientTop || 0);
        bounds.width = clientRect.width;
        bounds.height = clientRect.height;
    },
posted @ 2018-09-05 16:06  wanhong  阅读(2370)  评论(2编辑  收藏  举报