Update examples for pixi v8

[benjamingorman]

Current examples do not work for pixi v8

For example the live example here uses pixi v6.0.2 which is quite out of date

It's therefore quite difficult to integrate this plugin as someone inexperienced with pixi, because there are a lot of errors when following existing example code

[zhouccccc]

+1

[liweicheng00]

For those who are struggling, here is a simple example for V8.

  const app = new Pixi();

  await app.init({
    backgroundColor: "#FFF5D4",
    resizeTo: window,
    antialias: true,
    autoDensity: true, // !!!
    resolution: 2,
  });

  const viewport = new Viewport({
    passiveWheel: false,
    events: app.renderer.events
  })
  // activate plugins
  viewport
    .drag()
    .pinch()
    .wheel()
    .decelerate()

  // add the viewport to the stage
  app.stage.addChild(viewport)

[StefanVDWeide]

@liweicheng00 I am still having some issues with a relativly simple setup. For some reason nothing at all seems to be happening, also no errors, when integrating pixi-viewport with pixi v8 in my Nuxt 3 app. The pixie canvas itself renders just fine, just no viewport:

const initializePixi = async () => {
  if (!pixiContainer.value) return;

  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({
    background: '#fff',
    resizeTo: window,
    antialias: true,
    autoDensity: true,
    resolution: 2,

  });

  pixiApp.value = app;

  // Append the application canvas to the document body
  pixiContainer.value.appendChild(pixiApp.value.canvas);


  // create viewport
  const viewport = new Viewport({
    passiveWheel: false,
    events: pixiApp.value.renderer.events,
  })
  viewport.drag().pinch().wheel().decelerate()
  pixiApp.value.stage.addChild(viewport);

  // Load scatter plot points
  loadScatterPlotPoints(pixiApp.value);

  await fetchAndLoadQueryResults();

};

Is there anything I'm missing here? An update full example would be great!

[shaokeke]

+1

[liweicheng00]

@liweicheng00 I am still having some issues with a relativly simple setup. For some reason nothing at all seems to be happening, also no errors, when integrating pixi-viewport with pixi v8 in my Nuxt 3 app. The pixie canvas itself renders just fine, just no viewport:

It looks almost the same as mine. Not sure what is wrong. Also in Nuxt3
My package versions are:
├─ @pixi/[email protected]
├─ @pixi/[email protected]
├─ [email protected]
├─ [email protected]
│ ├─ @pixi/colord@^2.9.6

import { Application as Pixi, Container, Graphics } from "pixi.js";
import { Viewport } from 'pixi-viewport'

export const drawContainer = new Container()

export class Application {
  drawContainer: Container = drawContainer
  canvas: Pixi | undefined
  constructor() {
    const tempG = new Graphics()
    // tempG.rect(0, 0, this.node.nodeMeta.width, this.node.nodeMeta.height).stroke({ width: 10, color: "grey" })
    tempG.circle(0, 0, 10).fill("red")
    this.drawContainer.addChild(tempG)
    this.drawContainer.x = 100
    this.drawContainer.y = 100
    this.drawContainer.scale.y *= 0.3
    this.drawContainer.scale.x *= 0.3
  }

  async init() {
    const app = new Pixi();
    await app.init({
      backgroundColor: "#FFF5D4",
      resizeTo: window,
      antialias: true,
      autoDensity: true, // !!!
      resolution: 2,
    });

    const viewport = new Viewport({
      passiveWheel: false,
      events: app.renderer.events
    })
    // activate plugins
    viewport
      .drag()
      .pinch()
      .wheel()
      .decelerate()

    // add the viewport to the stage
    app.stage.addChild(viewport)
    viewport.addChild(this.drawContainer)

    this.canvas = app
    return this
  }
}

<template>
  <div ref="drawCanvas" />
</template>
<script setup>
import { Application } from './draw';

const drawCanvas = ref(null);
const draw = new Application()
await draw.init()


onMounted(async () => {
  drawCanvas.value.appendChild(draw.canvas.canvas);
})


</script>

[causztic]

@StefanVDWeide I'm slightly late to the party, but by any chance your scatter point points were added to app.stage directly instead of the viewport? i've made a beginner mistake with this - the correct order should be:

1. viewport.addChild(yourComponents)
2. app.stage.addChild(viewport)

[leonardbiofi]

+1