cocos creator - 龙骨动画的适配

在做项目时遇到了龙骨和骨骼动画无法适配的问题,widget组件对于龙骨动画节点无效。就需要我们自己写代码做适配了。
思路:根据当前屏幕分辨率与设计的分辨率的比例来缩放需要适配的节点。

适配模式一般常用的有两种方式:

  • 宽度固定模式(FixedWidth):采用设计分辨率的宽度,高度跟随宽高比例缩放。
  • 高度固定模式(FixedHeight):采用设计分辨率的高度,宽度跟随宽高比例缩放。

根据项目需求自己新添加了另外两种:

  • 只缩放宽度(WidthAutoScale)
  • 只缩放高度(HeightAutoScale)

代码如下,直接拖拽该脚本到目标节点。

let AutoScaleType = cc.Enum({
    WidthAutoScale: 1,	
    HeightAutoScale: 2,
    FixedWidth: 3,
    FixedHeight: 4
});
cc.Class({
    extends: cc.Component,
    editor:{
        menu:"custom/AddAutoScale"
    },
    properties: {
        autoScaleType: {
            default: AutoScaleType.FixedWidth,
            type: AutoScaleType,
        },
    },

    start() {
        //适配宽度模式  (ps 只用于龙骨动画节点,其他节点最好采用cocos自带的widget组件来适配)
        console.log(`----------------scale--${this.node.name}-----------`);
        console.log("scale>>getVisibleSize:",cc.view.getVisibleSize().width,cc.view.getVisibleSize().height);
        console.log("scale>>>getFrameSize",cc.view.getFrameSize().width,cc.view.getFrameSize().height);
        console.log("scale>>canvas>",cc.view.getCanvasSize().width,cc.view.getCanvasSize().height);
        console.log("scale>>getDesignResolutionSize",cc.view.getDesignResolutionSize().width,cc.view.getDesignResolutionSize().height);
        //当前屏幕的分辨率
        let screenSize = cc.view.getVisibleSize();
        //设计的分辨率(当前项目的设计分辨率)
        let designResolutionSize = {width:1280,height:720}
       // let designResolutionSize = cc.view.getDesignResolutionSize();//移动设备获取的分辨率有问题。。
       
        
        let scale;
        switch (this.autoScaleType) {
            case AutoScaleType.WidthAutoScale:
                scale = screenSize.width / designResolutionSize.width;
                this.node.setScale(scale,1);
                break;
            case AutoScaleType.HeightAutoScale:
                scale = screenSize.height / designResolutionSize.height;
                this.node.setScale(1,scale);
                break;
            case AutoScaleType.FixedWidth:
                scale = screenSize.width / designResolutionSize.width;
                this.node.setScale(scale);
                break;
            case AutoScaleType.FixedHeight:
                scale = screenSize.height / designResolutionSize.height;
                this.node.setScale(scale);
                break;
        }
        console.log("sceneSclae", scale);
    },
});
发布了50 篇原创文章 · 获赞 864 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_28299311/article/details/102986352