cocos2d - JS H5 适配流程

最新推荐文章于 2023-10-10 09:16:00 发布

原创最新推荐文章于 2023-10-10 09:16:00 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

Cocos2d - JS 专栏收录该内容

46 篇文章

订阅专栏

本文介绍Cocos2d-JS游戏开发中的关键配置步骤，包括高清设置、后台音乐管理、屏幕适配模式调整等内容，并针对不同浏览器及操作系统提供具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常规适配流程 :

设置高清

在main中添加 :

cc.view.enableRetina(true);

设置后台停止音乐

判断是否进入后台 - 链接

修改屏幕适配模式

通常游戏使用 :

cc.ResolutionPolicy.SHOW_ALL

具体操作查看文章 :
《cocos2d-JS 屏幕适配(5种适配模式)》 - 链接
 《Cocos2d-JS 屏幕适配相关内容》 - 链接

index.html中存在强行横竖屏meat

修改index.html 相关信息
html5 meta全解 - 链接

查看声音多声道 (supportTable) 根据不同浏览器问题进行修改

具体操作查看文章 :
《cocos2d - JS 声音适配总结》 - 链接

横竖屏提示

cocos2d - JS 实现横竖屏效果 - 链接

index.html里的load.js :

load.js存在可能会导致横竖屏显示不正常 (出现在flax里)
解决办法 : 可以直接删除
这里写图片描述

index.html里的游戏项目名称和 icon 图标等问题 :

这里写图片描述

断网、联网问题 :

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

EventUtil.addHandler(window, "online", function() {
    //alert("Online---正常工作");

    //未初始化完全, 重新加载网页
    if(!_initLock)
    {
        location.reload();
    }

});
EventUtil.addHandler(window, "offline", function() {
    //alert("Offline ---离线工作");

    //未初始化完全, 释放资源
    if(!_initLock)
    {
        cc.loader.releaseAll();
    }

});

特殊情况 :

chrome浏览器后台再返回黑屏问题解决办法 - 链接

ios 和 android 差异问题 :

在 IOS 系统里尽量用音量来处理静音问题
在 android 系统里面尽量用暂停和回复来处理静音问题
原因 :
1. IOS 在播放音乐时检测如果当前有声音被暂停中对暂停声音进行stop处理可能会导致代码出错
2. android 系统部分手机不采用游戏里的音量作为播放音量采用的是手机设备的音量来计算的所以代码修改游戏音量并不会产生实际效果

测试结果 :

在 IOS 系统里面对声音进行暂停再停止就会出问题 , 而android 却不会
这里写图片描述

IOS 如果想要更换音乐可以直接播放会自动覆盖原音乐
Android 可以继续使用暂停回复处理

Flax playMusic 问题 :

flax.playMusic = function(path, loop, releaseOld)
{
    var audioEngine = cc.audioEngine;

    if(cc.sys.browserType == cc.sys.BROWSER_TYPE_SAFARI)
    {
        if(flax._soundEnabled)
        {
            audioEngine.playMusic(path, loop);
        }
    }
    else
    {
        audioEngine.stopMusic(releaseOld === true);
        if(flax._soundEnabled)
        {
            audioEngine.playMusic(path, loop);
        }
        else
        {
            flax._lastMusic = path;
        }
    }
    //var audioEngine = cc.audioEngine;
    //audioEngine.stopMusic(releaseOld === true);
    //if(flax._soundEnabled){
    //    audioEngine.playMusic(path, loop);
    //}else{
    //    flax._lastMusic = path;
    //}
};

Flax setSoundEnabled 问题 :

flax.setSoundEnabled = function(value)
{
    if(flax._soundEnabled == value) return;
    flax._soundEnabled = value;
    var audioEngine = cc.audioEngine;
    if(cc.sys.browserType == cc.sys.BROWSER_TYPE_SAFARI)
    {
        if(value)
        {
            audioEngine.setEffectsVolume(1);
            audioEngine.setMusicVolume(1);
        }
        else
        {
            audioEngine.setEffectsVolume(0);
            audioEngine.setMusicVolume(0);
        }
    }
    else
    {
        if(value)
        {
            audioEngine.resumeMusic();
            if(flax._lastMusic) {
                flax.playMusic(flax._lastMusic, true);
                flax._lastMusic = null;
            }
        }else{
            audioEngine.pauseMusic();
            audioEngine.stopAllEffects();
        }
    }
};