Cocos居然可以捏性感小姐姐了!!|社区征文

体验地址:Cocos Creator | CustomCharacter

看到Cocos 3.5 居然支持分层动画,我也忍不住做个捏脸游戏,今天时间比较赶,明天会补完

先分析一下需求,一共拆成5类

  • 角色五官
  • 角色五官位置
  • 角色皮肤颜色
  • 角色体型
  • 角色衣服

通过思维导图进一步做行为归纳

通过归纳把需求拆解成6类

  • 骨骼变换,变换骨骼节点位置,scale,角度等(如胸部)
  • 贴图变换,改变眼睛,皮肤,衣服等贴图
  • 颜色变换,改变肤色
  • Mesh变换,改变衣服Mesh
  • Morph变换,改变脸部Morph,自定义五官

其中Mesh,贴图,颜色改变都需要走节点的MeshRenderer,这里通过一个预制体统一进行管理

设置为空的时候就不穿衣服或者不设置这项属性,其中可以配置多个需要修改的节点,我们使用节点的path+名字进行查找,查找到的节点通过map保存,方便复用。

public static getNode(path: string, name: string, target: Node) {

    if (!path) path = ""

    let node = this.nodeMap.get(name)

    if (!node) {

        node = find(path + name, target)

        if (node) {

            this.nodeMap.set(name, node)

        }

        else {

            console.error("Node not found===", name)

            return null

        }

    }

    return node

}

Morph动画处理

Morph动画可以参考Cocos的Demo,通过配置文件获取权重值,做动态调整和保存

骨骼偏移和动态修改
在3.5 版本之前没有层级动画,设置胸部和脸部一些骨骼,会被覆盖点。
首先在3.5版本创建一个动画Mask,把需要参与骨骼变换的胸部,脸部都做一下屏蔽,方便修改骨骼



比如获取胸部节点+父节点Z轴方向的位移,就可以改变胸部大小,眼部大小可以通过morph+scale一起改变
这里使用了inverseTransformPoint这个方法
获取父节点世界坐标加偏移量,再转换到本地坐标

public static morphNode(target: Slider, node: Node, direction: Vec3) {

    _tempV1.set(this.getPos(node));

    _tempV2.set(direction);

    Vec3.add(_tempV2, node.parent.worldPosition, _tempV2)

    node.parent.inverseTransformPoint(_tempV2, _tempV2)

    Vec3.add(_tempV1, _tempV1, _tempV2.multiplyScalar(target.progress))

    node.setPosition(_tempV1)

}

public static getPos(node: Node): Vec3 {

    let pos: Vec3 = this.posMap.get(node.name)

    if (!pos) {

        pos = node.position;

        this.posMap.set(node.name, pos.clone())

    }

    return pos;

}

image

to-do

  1. 继续更新更多设置
  2. 更新动作和跳舞
  3. 增加保存和截图功能
  4. 3.5上线后灰开源项目
  5. 优雅的按钮事件处理方法
  6. 小游戏
  7. 更多交互

to-to-to-to-to-do

  1. spring bone 弹簧骨骼绑定衣服等
    image
  2. 神经网格捏脸训练

其他重点是 流程优化+配置简化,明天周末重点更新

15赞

最后一张图是什么意思,我百思不解琦姐

很快上demo和全文,昨天晚上发的,没写完 :smiling_imp:

牛逼,做一个人工智能AI聊天跳舞唱歌的小姐姐吧

您就是第一名吧!!!!!!

您就是第一名吧!!!!!!佩服佩服 :test:

666mark帮顶

mark一下,火钳刘明

必须支持!

第一名 稳了

小姐姐的衣服有点少呀

http://yiyizu.com/iwae/
实际看一下还好,bug比较多,还在做衣服

markkk


爱了爱了

http://yiyizu.com/iwae/
优化了适配,增加了手指缩放,增加了更多道具和眼镜

哎嘿 厉害了

嘿嘿 加上声音效果更好~~

to-do
声音
小游戏
更多自定义选项

这个好 :smiley: :smiley:


第一就是你的吧 爱了i爱了