cocos H5 游戏设置游戏画布在手机屏幕中位置

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。
 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值