cocos creator 3.0见缝插针(口红机)

效果展示

## gif 帧率较低 实际体验效果更好

实现思路

1、中间一个节点 里面有两个node 分别放背景橘子node,存放刀的node
然后只旋转这个中间节点让刀和背景一块旋转就行了
2、碰撞检测给每一把刀放上碰撞检测
3、下边放一把假的刀 用来做动画执行,刀子到达位置 将假的刀放回原来的位置,将复制新的刀到中间存刀的节点
4、判断下一关 将中间节点存刀的node判断子节点数量
5、管卡难度
·匀速
·变速
·变速+变向
·时间限制

关键代码

   fire(event: any, data: any) {
        // 游戏结束 或者当前没有刀不能点击
        if (!this.gameStatus || this.knifeCount <= 0) {
            return
        }
        // 当前刀的数量减少
        this.knifeCount--;

        if (this.knife) {
            let p = this.knife.getPosition()
            p.x = 0;
            p.y = 0;
            if (this.knifeSize) {
                p.y += this.knifeSize.height / 2;
            }
            let that = this
            /**
             * 执行线性动画
             * 动画结束复制当前动画的刀到当前位置
             */
            this.currentKnifeAnim = tween(this.knife)
                .to(0.1, { position: p }, {
                    easing: 'linear',
                    onComplete: function (target?: object) {
                        let node = instantiate(that.knife)
                        if (node) {
                            // 设置刀的位置 到初始位置
                            that.knife?.setPosition(that.knifeX, that.knifeY, 0)
                            // 执行橘子动画 向上弹
                            that.orangeNode?.getComponent(AnimationComponent)?.play()
                            let px = 0, py = 0, ox = 0, oy = 0;
                            if (that.knifeSize) {
                                // 设置刀插进去的位置
                                py = that.knifeSize.height / 2 - that.orangeY;
                            }
                            /**
                             *  2D上的点围绕某另一个点旋转: If you rotate point (px, py) around point (ox, oy) by angle theta you’ll get:
                             *  p'x = cos(theta) * (px-ox) - sin(theta) * (py-oy) + ox
                             *  p'y = sin(theta) * (px-ox) + cos(theta) * (py-oy) + oy
                             */
                            // 计算角度 要一直为下方 注意补角
                            let temp = 360 - that.angle;
                            let theta = Math.PI / 180 * temp
                            let x = Math.cos(theta) * (px - ox) - Math.sin(theta) * (py - oy) + ox
                            let y = Math.sin(theta) * (px - ox) + Math.cos(theta) * (py - oy) + oy
                            // 设置新刀位置
                            node.setPosition(x, y, 0)
                            // 设置新刀角度
                            node.setWorldRotationFromEuler(0, 0, temp)
                            // 附加到虚拟转盘上
                            node.parent = that.discNode
                        }
                    }
                })
                .start()

        }
    }

试玩地址(加载慢,自己服务器带宽低)

 https://www.intkilow.top/jfcz/

下载地址

关注微信公众号:
随疾风前行
回复:
cocos见缝插针游戏源码

开源不易,仅学习使用

### 在 Cocos Creator 3.0 中实现文本或精灵的描边效果 #### 使用自定义 Shader 实现描边效果 对于希望在 Cocos Creator 3.0 中为文本或精灵添加描边效果的需求,可以利用自定义Shader来达成这一目标。通过编写特定的着色器代码,能够有效地控制渲染过程中的颜色混合方式,从而创建出理想的描边视觉效果[^3]。 下面是一个简单的例子展示如何构建一个具有描边特性的文字组件: ```glsl // 描边材质脚本 (stroke-material.glsl) precision mediump float; uniform vec4 u_color; uniform sampler2D u_mainTex; varying vec2 v_uv; void main() { // 原始纹理采样 vec4 originalColor = texture2D(u_mainTex, v_uv); // 计算边缘检测因子 float edgeFactor = step(0.5, length(vec2(dFdx(v_uv.x), dFdy(v_uv.y)))); // 应用描边逻辑:当像素位于边界时应用不同的颜色 gl_FragColor = mix(originalColor * u_color, vec4(1., 0., 0., 1.), edgeFactor); } ``` 此片段展示了基本原理,在实际项目中可能还需要调整参数以适应不同场景下的需求。为了使上述代码生效,需将其关联至相应的UI元素上作为其使用的材质资源之一。 另外一种更灵活的方法是借助第三方插件如 Spine 来间接完成类似的任务。虽然 Spine 主要用于骨骼动画制作,但它所提供的挂点制允许开发者向现有角色模型附加额外的对象,这同样适用于创造独特的装饰性特征,例如围绕对象周围的轮廓线[^2]。 然而值得注意的是,由于版本差异的存在,某些特性可能会有所变化;因此建议查阅官方文档确认最新API接口以及最佳实践指南[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值