Saturday, October 15, 2022
HomeGame DevelopmentCocos Creator please add Interpolation characteristic to the tween - Cocos Creator

Cocos Creator please add Interpolation characteristic to the tween – Cocos Creator


Hello all, Interpolation in tweens helps to create very clean motion between a number of values, however at the moment I don’t see this characteristic within the Cocos. I believe it won’t be laborious so as to add this to the tween object.
Right here is my at the moment code of implementation in my recreation:

        const highWorldPosition = dishesHolder.worldPosition
            .clone()
            .add(dish.worldPosition)
            .multiplyScalar(0.5)
            .add3f(0, 2, 0);

        const interpolationPositions = {
            x: [
                dish.worldPosition.x,
                highWorldPosition.x,
                dishesHolder.worldPosition.x,
            ],
            y: [
                dish.worldPosition.y,
                highWorldPosition.y,
                dishesHolder.worldPosition.y,
            ],
            z: [
                dish.worldPosition.z,
                highWorldPosition.z,
                dishesHolder.worldPosition.z,
            ],
        };

        const worldPosAnimationVec = new Vec3();

        tween({ v: 0 })
            .to(
                0.5,
                { v: 1 },
                {
                    onUpdate(goal?, ratio?) {
                        for (const key in interpolationPositions) {
                            worldPosAnimationVec[key] = Interpolation.Bezier(
                                interpolationPositions[key],
                                ratio
                            );
                        }

                        dish.worldPosition = worldPosAnimationVec;
                    },
                }
            )
            .begin();

Right here I would like clean motion between 3 vectors, I bought Interpolation perform from Tween.js:

I hope in future variations we may use them in such implementation:

tween(obj.place).to(2, {x: [1, 4, 5], y: [0, 2, 5], z: [5, 3, 2]}, {interpolation: "bezier"}).begin();


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments