微信公众号html5游戏一系列干货分享(留言提问)!!!!

定时更新在微信上跑html5游戏的一些技术分享

:grin::slightly_smiling:(有需要微信h5平台任何解决方案的话,可以留言。。。。我这边基本都有解决方案了):smiley::laughing:

2018.03.29 干货:画布旋转到180的

1.微信上面跑html5游戏最好是将画布旋转到180度,防止玩家手机在竖屏状态下误点到右上角的关闭按钮,主要是好多玩家反馈会误点到,麻将游戏或者是跑得快之类的牌类游戏反响比较多,所以今天先分享这个问题

onResize: function (callback) {
var visibleRect = cc.visibleRect;
if (window.orientation == 90 || window.orientation == -90 || (visibleRect.width > visibleRect.height) && !cc.sys.isMobile) {
cc.find(“Canvas”).rotation = 0;
if(callback){
callback(0);
}
} else {
cc.find(“Canvas”).rotation = 180;
if(callback){
callback(180);
}
}
},undefined> checkSysIsWechat: function (node,callback) {
// 微信浏览器翻转
if(cc.sys.isNative){
return;
}
var orientationFunc = function(){
cc.userGame.myEasy.onResize(callback);
};
if (cc.sys.browserType == cc.sys.MOBILE_BROWSER
|| cc.sys.browserType == cc.sys.DESKTOP_BROWSER
|| cc.sys.browserType == cc.sys.BROWSER_TYPE_CHROME
|| cc.sys.browserType == cc.sys.BROWSER_TYPE_WECHAT
|| cc.sys.browserType == cc.sys.BROWSER_TYPE_MOBILE_QQ) {
cc.view.setResizeCallback(orientationFunc);
this.onResize();
}
},
调用的话,直接在场景的start或者onload周期中调用checkSysIsWechat。

不过酱紫弄的话会把有用到scrollview组件的控件滑动全部反向了,查了官方api之类的,论坛也没人回答,所以我自己跑去修改源码了.修改代码在下面
CCScrollView组件和CCPageView.zip (15.7 KB)

估计有的人会遇到怎么重新去编译cocosjs引擎包的问题,下面我把自己研究出来的方法也分享出来吧

1.覆盖修改过的组件文件到C:\CocosCreator\resources\engine\cocos2d\core
2.需要删除这个文件内容,因为每次构建cocos项目生成的cocos.min.js都是从这边拷贝出来的,C:\CocosCreator\resources\engine\bin.cache
3.然后重新编译.

2018.03.30 干货:微信上面播放音效

很多人可能会遇到在微信h5平台音效播放不出来的时候,然后在那边瞎整是不是引擎的问题
我一开始也一直在寻找解决方案,因为那时候游戏上线之后有的手机可以播放,有的时候播放不了,然后以为是各种网络的关系,引擎组和cocos论坛都没人提出解决方案,后来我就只好去白鹭引擎那边寻找解决方案,结果真的有。把下面的解决方案列出来

注意事项
声音资源的格式生成请严格按照此步骤来,不然兼容性会小很多。
1、使用格式工厂。选择 44100Hz,96kbps 转换。其他具体的格式,测试团队还在测试中。
2、如果还有问题,请再转一次。
3、如果还有问题,请裁减音频再次转换。

7赞

留个脚印

干货干货

马克加索尔

markmark

马克。赞分享

做微信上面的游戏怎么接微信登录啊

可以,下次分享

关于音频的解决方案已分享,如果有人需要那个音频播放的脚本组件的话我在传上来

谢谢分享

马克马克!!

酷!
~

mark一下

mark!

可以帮我看看进度条的问题吗。在PC浏览器上没问题,在手机浏览器上进入就是100% ,再从退回0%开始加载到100%
有服务器地址 用手机打开能看到那个效果
http://123.206.211.123:8800/earthquake/earthquake/build/web-mobile/index.html

你能贴出你加载进度的代码不,不然你酱紫说我也不懂

我是这样加载资源的

// 加载游戏资源
initLoadingResources: function () {
var self = this;
var currentResCount = cc.loader.getResCount();
cc.loader.loadResDir(“Plist”,cc.SpriteAtlas,
function (completedCount, totalCount, item) {
var percent = (completedCount - currentResCount) / (totalCount - currentResCount);
percent = percent.toFixed(2);
self._progressBar.progress = percent;
},
function (err, assets) {
// 加载音效
cc.userGame.music.preload();
// 存储到对象
for(var i = 0; i < assets.length; i++){
var asset = assets[i];
cc.userGame.plistCache.addPlistCache(asset.name.replace(".plist",""), asset);
}
// 存储预载体
cc.loader.loadResDir(“Effect”, function (err, prefab) {
for (var i = 0; i < prefab.length; ++i) {
var name = prefab[i].name;
cc.userGame.prefabsMap[name] = prefab[i];
}
});
cc.loader.loadResDir(“Prefab”, function (err, prefab) {
for (var i = 0; i < prefab.length; ++i) {
var name = prefab[i].name;
cc.userGame.prefabsMap[name] = prefab[i];
}
self.loadingResourcesCompleted();
});
}
);
},

我的进度条就是直接编译出来,我没有更改,只是换了图片和css的进度条颜色

在安卓手机浏览器有问题

(function () {

'use strict';

function boot () {

    var settings = window._CCSettings;
    window._CCSettings = undefined;

    if ( !settings.debug ) {
        var uuids = settings.uuids;

        var rawAssets = settings.rawAssets;
        var assetTypes = settings.assetTypes;
        var realRawAssets = settings.rawAssets = {};
        for (var mount in rawAssets) {
            var entries = rawAssets[mount];
            var realEntries = realRawAssets[mount] = {};
            for (var id in entries) {
                var entry = entries[id];
                var type = entry[1];
                // retrieve minified raw asset
                if (typeof type === 'number') {
                    entry[1] = assetTypes[type];
                }
                // retrieve uuid
                realEntries[uuids[id] || id] = entry;
            }
        }

        var scenes = settings.scenes;
        for (var i = 0; i < scenes.length; ++i) {
            var scene = scenes[i];
            if (typeof scene.uuid === 'number') {
                scene.uuid = uuids[scene.uuid];
            }
        }

        var packedAssets = settings.packedAssets;
        for (var packId in packedAssets) {
            var packedIds = packedAssets[packId];
            for (var j = 0; j < packedIds.length; ++j) {
                if (typeof packedIds[j] === 'number') {
                    packedIds[j] = uuids[packedIds[j]];
                }
            }
        }
    }

    // init engine
    var canvas;

    if (cc.sys.isBrowser) {
        canvas = document.getElementById('GameCanvas');
    }

    function setLoadingDisplay () {
        // Loading splash scene
        var splash = document.getElementById('splash');
        var progressBar = splash.querySelector('.progress-bar span');
        cc.loader.onProgress = function (completedCount, totalCount, item) {
            var percent = 100 * completedCount / totalCount;
            if (progressBar) {
                progressBar.style.width = percent.toFixed(2) + '%';
            }
        };
        splash.style.display = 'block';
        progressBar.style.width = '0%';

        cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
            splash.style.display = 'none';
        });
    }

    var onStart = function () {
        cc.view.resizeWithBrowserSize(true);

        if (!false) {
            // UC browser on many android devices have performance issue with retina display
            if (cc.sys.os !== cc.sys.OS_ANDROID || cc.sys.browserType !== cc.sys.BROWSER_TYPE_UC) {
                cc.view.enableRetina(true);
            }
            if (cc.sys.isBrowser) {
                setLoadingDisplay();
            }

            if (cc.sys.isMobile) {
                if (settings.orientation === 'landscape') {
                    cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
                }
                else if (settings.orientation === 'portrait') {
                    cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
                }
                // qq, wechat, baidu
                cc.view.enableAutoFullScreen(
                    cc.sys.browserType !== cc.sys.BROWSER_TYPE_BAIDU &&
                    cc.sys.browserType !== cc.sys.BROWSER_TYPE_WECHAT &&
                    cc.sys.browserType !== cc.sys.BROWSER_TYPE_MOBILE_QQ
                );
            }
            
            // Limit downloading max concurrent task to 2,
            // more tasks simultaneously may cause performance draw back on some android system / brwosers.
            // You can adjust the number based on your own test result, you have to set it before any loading process to take effect.
            if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_ANDROID) {
                cc.macro.DOWNLOAD_MAX_CONCURRENT = 2;
            }
        }

        // init assets
        cc.AssetLibrary.init({
            libraryPath: 'res/import',
            rawAssetsBase: 'res/raw-',
            rawAssets: settings.rawAssets,
            packedAssets: settings.packedAssets,
            md5AssetsMap: settings.md5AssetsMap
        });

        var launchScene = settings.launchScene;

        // load scene
        cc.director.loadScene(launchScene, null,
            function () {
                if (cc.sys.isBrowser) {
                    // show canvas
                    canvas.style.visibility = '';
                    var div = document.getElementById('GameDiv');
                    if (div) {
                        div.style.backgroundImage = '';
                    }
                }
                cc.loader.onProgress = null;
                console.log('Success to load scene: ' + launchScene);
            }
        );
    };

    // jsList
    var jsList = settings.jsList;
    var bundledScript = settings.debug ? 'src/project.dev.js' : 'src/project.js';
    if (jsList) {
        jsList = jsList.map(function (x) { return 'src/' + x; });
        jsList.push(bundledScript);
    }
    else {
        jsList = [bundledScript];
    }

    // anysdk scripts
    if (cc.sys.isNative && cc.sys.isMobile) {
        jsList = jsList.concat(['src/anysdk/jsb_anysdk.js', 'src/anysdk/jsb_anysdk_constants.js']);
    }


    var option = {
        //width: width,
        //height: height,
        id: 'GameCanvas',
        scenes: settings.scenes,
        debugMode: settings.debug ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
        showFPS: !false && settings.debug,
        frameRate: 60,
        jsList: jsList,
        groupList: settings.groupList,
        collisionMatrix: settings.collisionMatrix,
        renderMode: 0
    };

    cc.game.run(option, onStart);
}

if (window.jsb) {
    require('src/settings.js');
    require('src/jsb_polyfill.js');
    boot();
}
else if (false) {
    require(window._CCSettings.debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js');
    var prevPipe = cc.loader.md5Pipe || cc.loader.assetLoader;
    cc.loader.insertPipeAfter(prevPipe, wxDownloader);
    boot();
}
else if (window.document) {
    var splash = document.getElementById('splash');
    splash.style.display = 'block';

    var cocos2d = document.createElement('script');
    cocos2d.async = true;
    cocos2d.src = window._CCSettings.debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js';

    var engineLoaded = function () {
        document.body.removeChild(cocos2d);
        cocos2d.removeEventListener('load', engineLoaded, false);
        window.eruda && eruda.init() && eruda.get('console').config.set('displayUnenumerable', false);
        boot();
    };
    cocos2d.addEventListener('load', engineLoaded, false);
    document.body.appendChild(cocos2d);
}

})();

1赞