SimpleRope

The rope allows you to draw a texture across several points and then manipulate these points

Usage

<script>
  import { SimpleRope, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  const ropeLength = 918 / 20
  let points = Array.from({ length: 20 }).map((_, i) => ({
    x: i * ropeLength,
    y: 0,
  }))

  let time = 0
  onTick((delta) => {
    time += 0.1 * delta

    points = points.map((point, i) => ({
      x: i * ropeLength + Math.cos(i * 0.3 + time) * 20,
      y: Math.sin(i * 0.5 + time) * 30,
    }))
  })
</script>

<SimpleRope
  texture={PIXI.Texture.from('/assets/snake.png')}
  x={-275}
  scale={0.6}
  {points}
/>

API

Props

Name	Description
drawMode	PIXI.DRAW_MODES The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.
geometry	PIXI.Geometry Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU. Can be shared between multiple Mesh objects.
instance	PIXI.SimpleRope The PIXI.SimpleRope instance. Can be set or bound to.
points	PointLike[] An array of points or point-like objects to construct this rope. If this array changes the internal geometry will be recreated. Consider using PIXI.Points and mutating them if that becomes too expensive.
shader	PIXI.ShaderPIXI.MeshMaterial Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.
state	PIXI.State Represents the WebGL state the Mesh required to render, excludes shader and geometry. E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
texture	PIXI.Texture The texture to use
textureScale 0	number Positive values scale rope texture keeping its aspect ratio. You can reduce alpha channel artifacts by providing a larger texture and downsampling here. If set to zero, texture will be stretched instead.

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	{}

Events

Name	Type	Detail
added	forwarded
click	forwarded
create	forwarded
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	forwarded
mousedown	forwarded
mousemove	forwarded
mouseout	forwarded
mouseover	forwarded
mouseup	forwarded
mouseupoutside	forwarded
pointercancel	forwarded
pointerdown	forwarded
pointermove	forwarded
pointerout	forwarded
pointerover	forwarded
pointertap	forwarded
pointerup	forwarded
pointerupoutside	forwarded
removed	forwarded
removedFrom	forwarded
rightclick	forwarded
rightdown	forwarded
rightup	forwarded
rightupoutside	forwarded
tap	forwarded
touchcancel	forwarded
touchend	forwarded
touchendoutside	forwarded
touchmove	forwarded
touchstart	forwarded