fix examples to not be 0-based coordinates but still be responsive

docs/src/content/docs/api/components/animated-sprite.mdx

@@ -19,6 +19,8 @@ I recommend using spritesheets created by TexturePacker ([they have a great tuto
 
 <AssetsLoader assets={['/assets/adventurer-spritesheet.json']}>
   <AnimatedSprite
+    x={360}
+    y={200}
     textures={[
       PIXI.Texture.from('adventurer-idle-00.png'),
       PIXI.Texture.from('adventurer-idle-01.png'),
@@ -54,6 +56,8 @@ I recommend using spritesheets created by TexturePacker ([they have a great tuto
 
 <AnimatedSprite
   {textures}
+  x={360}
+  y={200}
   playing
   animationSpeed={0.1}
   anchor={0.5}

docs/src/content/docs/api/components/application.mdx

@@ -14,9 +14,9 @@ Just like `PIXI.Application`, it sets up the [Renderer](/docs/components/rendere
   import { Application, Text } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <Text
-    x={350}
+    x={200}
     y={200}
     anchor={0.5}
     text="Hello World"
@@ -34,14 +34,14 @@ If you want to customize the element that the canvas is rendered into, you can u
   import { Application, Text } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <div slot="view" class="custom">
     <!-- canvas will be placed here -->
   </div>
 
   <!-- pixi components go here -->
   <Text
-    x={350}
+    x={200}
     y={200}
     anchor={0.5}
     text="Hello World"
@@ -67,15 +67,15 @@ If you want to customize the element that the canvas is rendered into, you can u
 </script>
 
 <Application
-  width={700}
+  width={400}
   height={400}
   antialias
   render="demand"
   on:postrender={() => console.log('render')}
 >
-  <DraggableCircle x={350} y={200} />
+  <DraggableCircle x={200} y={200} />
   <Text
-    x={350}
+    x={200}
     y={300}
     text="Click and drag"
     style={{ fill: 'white' }}

docs/src/content/docs/api/components/assets-loader.mdx

@@ -25,6 +25,8 @@ render until the loading has completed. You can show progress by using the `prog
   </slot>
 
   <Sprite
+    x={360}
+    y={200}
     texture={PIXI.Texture.from('/assets/great-success.png')}
     anchor={0.5}
     width={360}

docs/src/content/docs/api/components/bitmap-text.mdx

@@ -28,7 +28,8 @@ A BitmapText can only be created when the font is loaded.
 <AssetsLoader assets={['/assets/desyrel.xml']}>
   <BitmapText
     text={'the fox jumps over\nthe lazy dog'}
-    x={10}
+    x={380}
+    y={200}
     anchor={0.5}
     style={{ fontName: 'Desyrel', fontSize: 48, align: 'center' }}
   />

docs/src/content/docs/api/components/container.mdx

@@ -16,9 +16,9 @@ When child components are rendered inside, their coordinates become local to the
   import { Container, Text } from 'svelte-pixi'
 </script>
 
-<Container>
-  <Text text="Hello" x={-10} y={-60} style={{ fill: 'white' }} />
-  <Text text="World" x={-10} y={0} style={{ fill: 'white' }} />
+<Container x={360} y={160}>
+  <Text text="Hello" x={0} y={0} anchor={0.5} style={{ fill: 'white' }} />
+  <Text text="World" x={0} y={60} anchor={0.5} style={{ fill: 'white' }} />
 </Container>
 ```
 

docs/src/content/docs/api/components/graphics.mdx

@@ -25,6 +25,8 @@ Graphics can be used for any kind of drawing. Use the `draw` prop to interact wi
 </script>
 
 <Graphics
+  x={375}
+  y={200}
   draw={(graphics) => {
     graphics.clear()
     graphics.beginFill(0xde3249)

docs/src/content/docs/api/components/html-text.mdx

@@ -17,6 +17,8 @@ Renders text with support for styling via HTML tags. The rendering can vary acro
 </script>
 
 <HTMLText
+  x={360}
+  y={200}
   text="<strong>Hello</strong> <em>World</em>"
   anchor={0.5}
   style={{

docs/src/content/docs/api/components/mesh.mdx

@@ -97,7 +97,15 @@ Pretty much all WebGL can be broken down into the following:
   })
 </script>
 
-<Mesh anchor={0.5} scale={2} {geometry} {shader} {rotation} />
+<Mesh 
+  x={360} 
+  y={200} 
+  anchor={0.5} 
+  scale={2} 
+  {geometry} 
+  {shader} 
+  {rotation} 
+/>
 ```
 
 ## API

docs/src/content/docs/api/components/nine-slice-plane.mdx

@@ -27,6 +27,8 @@ Allows you to stretch a texture using 9-slice scaling. The corners will remain u
 </script>
 
 <NineSlicePlane
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/nine-slice-blue.png')}
   leftWidth={12}
   topHeight={12}

docs/src/content/docs/api/components/particle-container.mdx

@@ -21,7 +21,7 @@ Note: when working with thousands of components, it is **much** more performant
   import { Sprite, onTick, ParticleContainer } from 'svelte-pixi'
   import { onMount } from 'svelte'
 
-  const width = 800
+  const width = 720
   const height = 400
   const speed = 0.025
   const fov = 20
@@ -70,8 +70,8 @@ Note: when working with thousands of components, it is **much** more performant
     star.scale.set(distance * starSize)
     star.anchor.set(0.5, 0.7)
 
-    star.x = star.initX * (fov / z) * width
-    star.y = star.initY * (fov / z) * width
+    star.x = star.initX * (fov / z) * width + width / 2
+    star.y = star.initY * (fov / z) * height + height / 2
   }
 
   // move the camera forward

docs/src/content/docs/api/components/renderer.mdx

@@ -23,7 +23,7 @@ This is an alternative to using the [Application](/docs/components/application)
 <Renderer
   bind:instance={renderer}
   bind:stage
-  width={700}
+  width={400}
   height={400}
   antialias
 >
@@ -38,9 +38,9 @@ This is an alternative to using the [Application](/docs/components/application)
       can access it with getStage()
     -->
     <Container bind:instance={stage}>
-      <DraggableCircle x={350} y={200} />
+      <DraggableCircle x={200} y={200} />
       <Text
-        x={350}
+        x={200}
         y={300}
         text="Click and drag"
         style={{ fill: 'white' }}
@@ -66,7 +66,7 @@ If you want to customize the element that the canvas is rendered into, you can u
 <Renderer
   bind:instance={renderer}
   bind:stage
-  width={700}
+  width={400}
   height={400}
   antialias
 >
@@ -82,7 +82,7 @@ If you want to customize the element that the canvas is rendered into, you can u
       }}
     />
     <Text
-      x={350}
+      x={200}
       y={200}
       anchor={0.5}
       text="Hello World"
@@ -116,7 +116,7 @@ we can still implement this ourselves:
 
 <Renderer
   bind:instance={renderer}
-  width={700}
+  width={400}
   height={400}
   antialias
   on:invalidate={() => {
@@ -134,9 +134,9 @@ we can still implement this ourselves:
     }}
   >
     <Container bind:instance={stage}>
-      <DraggableCircle x={350} y={200} />
+      <DraggableCircle x={200} y={200} />
       <Text
-        x={350}
+        x={200}
         y={300}
         text="Click and drag"
         style={{ fill: 'white' }}

docs/src/content/docs/api/components/simple-plane.mdx

@@ -31,8 +31,8 @@ The SimplePlane allows you to draw a texture across several points and then mani
 </script>
 
 <SimplePlane
-  x={-300}
-  y={-200}
+  x={75}
+  y={0}
   bind:instance={plane}
   anchor={0.5}
   texture={PIXI.Texture.from('/assets/bg_grass.jpg')}

docs/src/content/docs/api/components/simple-rope.mdx

@@ -32,8 +32,9 @@ The rope allows you to draw a texture across several points and then manipulate
 </script>
 
 <SimpleRope
+  x={100}
+  y={200}
   texture={PIXI.Texture.from('/assets/snake.png')}
-  x={-275}
   scale={0.6}
   {points}
 />

docs/src/content/docs/api/components/sprite.mdx

@@ -16,6 +16,8 @@ Sprites are the base for all textured objects that are rendered to the screen
 </script>
 
 <Sprite
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/adventurer.png')}
   anchor={0.5}
   scale={3}

docs/src/content/docs/api/components/text.mdx

@@ -21,6 +21,8 @@ To split a line you can use '\n' in your text string, or, on the style prop, cha
 </script>
 
 <Text
+  x={360}
+  y={200}
   text="Hello World"
   anchor={0.5}
   style={{

docs/src/content/docs/api/components/ticker.mdx

@@ -24,6 +24,8 @@ Children of this component can use [onTick](/docs/utilities/on-tick) to hook int
   }}
 >
   <Text
+    x={360}
+    y={200}
     text={`Frame ${frame}\nDelta: ${delta.toFixed(10)}`}
     style={{ fill: 'white' }}
     anchor={0.5}

docs/src/content/docs/api/components/tiling-sprite.mdx

@@ -26,6 +26,8 @@ import ComponentAPI from '$lib/components/ComponentAPI.astro'
 </script>
 
 <TilingSprite
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/tiling-sprite.jpeg')}
   anchor={0.5}
   width={400}

docs/src/content/docs/api/utilities/on-tick.mdx

@@ -15,7 +15,7 @@ Child components of [Ticker](/docs/components/ticker) can use `onTick` to add a
   })
 </script>
 
-<Text {text} style={{ fill: 'white' }} anchor={0.5} />
+<Text x={360} y={200} {text} style={{ fill: 'white' }} anchor={0.5} />
 ```
 
 ## Type Definition

docs/src/content/docs/api/utilities/track.mdx

@@ -11,17 +11,17 @@ This is useful for watching a property on a PixiJS instance that is getting upda
   import { Container, Text, onTick, track } from 'svelte-pixi'
 
   let instance
-  let x = track(() => instance.x, -200)
-  let y = track(() => instance.y, 0)
+  let x = track(() => instance.x, 200)
+  let y = track(() => instance.y, 200)
 
-  $: text = $x < -75 ? "I'm on the left!" : "I'm on the right!"
+  $: text = $x < 300 ? "I'm on the left!" : "I'm on the right!"
 
+  // modify the instance directly
   onTick((delta) => {
-    if (instance.x < 100) {
-      // modify the instance directly
-      instance.x += 1 * delta
+    if (instance.x < 500) {
+      instance.x += delta
     } else {
-      instance.x = -200
+      instance.x = 200
     }
   })
 </script>