zoukankan      html  css  js  c++  java
  • cocos creator游戏适配这事

    在想cocos适配之前,我们想想网页是怎么适配的。浏览器有各种规格,网页的一般做法是:背景图片铺满,网页内容保持在背景图片上居中,就实现了适应或者适配。css一般这样:

    .bg{
    height:582px;
    background-image:url('images/top_team_bg.png');
    background-size:auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
    }
    
    .content {
    1000px;
    margin:0 auto;
    } 
    

     核心:

    background-position: center center;

    因为是背景图片,所以横向显示可以不全,但永远会显示中间的部分,就是我们的网页内容。content部分宽度是固定的,并且是居中的。
    回到cocos上,原理完全一样,让背景铺满,内容居中。
    背景铺满,在背景是顶级节点的情况下(和canvas平级),可以用Widget,left:0;right:0;
    content居中我们用js去控制,下面的代码,在编辑器里我们设置content的宽度是2048,ts代码:

    adaptScreen(items: Array<cc.Node>) {
    if(cc.director.getVisibleSize().width <= 2048) return;
    if(items instanceof Array) {
    items.forEach(item => {
    try {
    item.x += Math.floor((cc.director.getVisibleSize().width - 2048) / 2 )
    } catch(e) {
    cc.log(e)
    }
    })
    } else {
    cc.log(items)
    cc.log('传入的参数必须是数组')
    }
    }
    

      

  • 相关阅读:
    jQuery的版本兼容问题
    web页面锁屏初级尝试
    mvc5之文件上传
    魔方基础入门教程
    XCube和X组件的入门级使用教程
    蔬菜大棚监控与管理 1.0版本(未完善)
    蔬菜大棚 数据库设计 0.5版本()
    记录一段存储过程
    MPU9250九轴陀螺仪--读接口数据
    MPU9250九轴陀螺仪--连接MPU9250
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/9406148.html
Copyright © 2011-2022 走看看