1.在h5游戏开发中,canvas决定游戏画布大小,打包webMobile后,style-mobile.css布局决定canvas 在手机屏幕中显示的位置。
2.默认情况下,布局设置中,canvas占据屏幕居中位置。且canvas以外的背景显示为黑色。
3.修改canvas位置在屏幕底部,以底部对齐,游戏场景中,要将canvas适配设置为宽高同时适配,canvas下节点,要挂载widget节点,以canvas为节点,四周对齐。
a: 在 style-mobile.css中找到#Cocos2dGameContainer 属性。删除注释部分的布局。 如下:
#Cocos2dGameContainer {
position: absolute;
margin: 0;
overflow: hidden;
left: 0px;
top: 0px;
/* display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
-webkit-box-pack: center; */
}
b: 在 style-mobile.css中找到canvas 属性。在其中增加两行属性。
position: absolute; //位置布局方式。 绝对定位
bottom: 0; //位置属性,在绝对定位前提下,距离底部 0px.
c. 设置canvas以外背景透明度为零。在main.js 文件中,onStart 方法中,增加 cc.director.setClearColor(cc.color(0, 0, 0, 0)); 设置canvas以外背景颜色值,
在style-mobile.css,body中要将background-color ,属性设置为 transparent。
d.如果要开启整个游戏背景透明的话,需要在cc.game.run 之前 设置// cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性
默认状态为false。