Making a slicing effect like fruit ninja

Cocos Creator
#1

Hello everyone.
I’m making a game similar to fruit ninja and I want add slicing effect on mouse swipe. I am using Graphics component to it but the issue is it is working in desktop browser but not in mobile browser. Does anyone know how to resolve this?
And I would also like to know if there is any other way to achieve the slicing effect.

Thank you

#2

@slackmoehrle @linrm @muxiandong
I am attaching a screen record of the above behaviour in desktop and mobile browser.
Desktop:
chrome_jLMHcp8lAC

Mobile:
gif-20220323-161840

Note: in mobile browser, if we swipe it doesn’t appear but if we hold one finger on screen, use another finger to move, the above result happens.
Ca you please check this?

Thank you.

#3

I think we should ask engineering to help with this topic.

1 Like
#4

Please find the link to the project: GitHub - maheshnnaik/slicing-sprite
creator version - 3.4.1

Thank you

#5

@slackmoehrle Any update on this?

#6

You can disable multi touch to fix the issue

https://docs.cocos.com/creator/manual/en/editor/project/?h=multi_touch

Or better solution, just track the same touch id to clip

1 Like
#7

I did that, but that didn’t help. Even with multi touch disabled, the graphic drawing was not visible on swiping in mobile browsers. This issue is only in mobile browser.
Thank you

#8

I didn’t understand this. Can you please explain it?

#9

In you touch callback, you can retrieve the touch id with touch.getID(), then filter the touches with original id you saved in touch start, remember not to override the touch id before touch end

1 Like
#10

Thank you for the response.
I will give that a try.

#11

I tried this, but didn’t work.
I replicated the same in cocos creator 2.4.4, there it works fine in mobile and desktop browser. but in creator 3.4.1 this is happening.

Can you please take a look at this code once?
Thank you

#12

I fix this problem when I remove the code in update phase in Game.ts

maybe you can take a look into this part of code.

update(dt: number) {
        // When the sliding speed is slow, it will not disappear quickly
        // if (this.drawPoints.length < 30) {
        //     for (let i = 0; i < 1; i++) {
        //         if (this.drawPoints.length > 0) {
        //             this.drawPoints.shift();
        //         } else {
        //             break;
        //         }
        //     }
        // } else {
        //     for (let i = 0; i < 9; i++) {
        //         if (this.drawPoints.length > 0) {
        //             this.drawPoints.shift();
        //         } else {
        //             break;
        //         }
        //     }

        //     // In order to keep lines from being too long
        //     while (this.drawPoints.length > 400) {
        //         this.drawPoints.shift();
        //     }
        // }

    }
1 Like
#13

it seems that the length of drawPoints is always 1

Maybe the update phase is called more frequently than the touch move callback, the drawPoint list is always be cleared before drawing knife

1 Like
#14

Thank you for your reply. I figured it out and added the following code in drawKnife instead of update.

while (this.drawPoints.length > 20) {
    this.drawPoints.shift();
}

But I didn’t understand why that happens only in mobile browser but not in PC.

#15

@PP_Pro Can you please suggest me on how to improve that effect? Sometimes while moving the effect won’t be solid like there will be gaps between them.

refer this for example.

And I tried Hardcore Game Engine Magic! Implement 2D&3D Textured Drawing example, when I add SuperGraphics component I get the error in editor saying cannot find property length of null.
Thank you.