Jump to content

Line how in ninja friut


Recommended Posts


app.renderer.plugins.interaction.on("mousemove", (e) => {
  const {x, y} = e.data.global;
  const rectangle = u.sprite(3, 3, 'red', x, y);

i write this code for check the performance, but with a quick mouse movement, the dots do not appear everywhere, or do not you need to use a rectangle? have to use bezierCurveTo  ?

Link to comment
Share on other sites

    app.renderer.plugins.interaction.on('touchstart', (e) => {
      const {data: {global: {x, y}}} = e;
      this.startPoint = {x, y};
    app.renderer.plugins.interaction.on('touchend', (e) => {
      let i = 0;
      setInterval(() => {
      }, 400);
      this.dataMove = [];

    app.renderer.plugins.interaction.on('touchmove', (e) => {
      const {data: {global: {x, y}}} = e;
      const line = new PIXI.Graphics();
      line.lineStyle(3, 'red');
      this.dataMove.push({x, y});

  anim(line) {
    const {x, y} = this.startPoint;
    line.moveTo(x, y);
    this.dataMove.forEach((item, index) => {
      line.lineTo(item.x, item.y)

this code draw line... on event `touchend` i want clear line in interval, but it's not working, line clear all after long time...

Link to comment
Share on other sites

First: use only ONE graphic object, just clear it before you draw again.

Second: don't draw on mouse move, draw with a ticker (move: get position/do the math, ticker: draw no matter what)

Third: use mouse move to store mouse positions (array.push) as Point in an array (draw all points in that array inside your ticker), that's how you "remember" previous mouse positions

Fourth: remove points in that array based on either mouse velocity or set value (like 20 point max) or both (array.unshit)

Link to comment
Share on other sites

I have done one fruit ninja styled mouse follower with rope.

Basically how it works is like this:

- Generate a rope with enough points to make it look good (I use 56 points).
- Whenever mouse moves, save the coordinate. Keep previous X amount of points saved. (I found 7 to be good amount).
- On render loop update the rope points to match the mouse points and apply some kind of interpolation (I'm using cubic interpolation). Interpolation makes the rope seem a lot more smoother when mouse is moved fast.
- Check if points are too close to each other and hide the rope if they are. If this check is omitted, some of the lower tier devices will have odd flickering due to floating point errors.

Made an example:

Edited by Exca
Example link added.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...