SimpleRope

Creates a PIXI.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 count = 0
  let points = []

  for (let i = 0; i < 20; i++) {
    points.push({ x: i * ropeLength, y: 0 });
  }

  onTick((delta) => {
    count += 0.1;

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

</script>

<SimpleRope
  x={20}
  y={200}
  texture={PIXI.Texture.from('/assets/snake.png')}
  scale={0.4}
  {points}
/>

Component API

Props

Name Type Default 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.Shader PIXI.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 number 0 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
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