Pixi js 5.X с резервным режимом, не работающим на NUXT. JS - PullRequest
Новая
       30

Pixi js 5.X с резервным режимом, не работающим на NUXT. JS

0 голосов
/ 30 января 2020

Отсутствует руководство по добавлению pixi. js (новые версии 5+) для проектов nuxt js, включая возможность перехода от webgl к canvas при необходимости. После того, как вы выполнили все из документации, найденной через pixi js и github, у нас были две ситуации: «PIXI not found» - с использованием pixi. js -legacy npm модуль вставлен в nuxt без ssr «WEBGL не поддерживается» - с использованием pixi . js npm модуль вставлен в nuxt без ssr.

[решено] в ответе.

1 Ответ

1 голос
/ 30 января 2020

Как добавить pixi. js 5+ с откатом canvas из webgl в nuxt. js шаг за шагом: если вы работаете с pixi. js v5 +, он будет поддерживать только webgl. У них есть библиотека pixi. js, которая также предлагает откат холста. Мы будем использовать это.

  • setp 1: установить поверх npm

    npm i pixi.js-legacy

  • шаг 2: добавьте плагин с именем pixi-projection

    npm i pixi-projection

  • шаг 3: создайте файл в папке плагинов называется pixi js. js и добавьте эти строки, затем сохраните их

    import * as PIXI from 'pixi.js-legacy'; global.PIXI = PIXI; require("pixi-projection"); const renderer = PIXI.autoDetectRenderer();

  • шаг 4: отредактируйте свой nuxt.config. js и добавьте этот новый созданный файл в массив объектов plungins с параметром ssr, установленным в false

.................................. plugins: [ ...... { src: '~/plugins/pixijs', mode: 'client', ssr: false} ], ..................................

  • шаг 5 : go до new. vue page и попробуйте их пример (по умолчанию pixi). Страница должна выглядеть примерно так: 

<template>
</template>
<script>
export default {
  mounted() {
      this.startPixi();
  },
  methods: {
    startPixi() {
      const app = new PIXI.Application();
      document.body.appendChild(app.view);
      let img = require('~/assets/ec-newlogo.png'); //ADD YOUR IMAGE
      app.loader.add('bunny', img).load((loader, resources) => {
        const bunny = new PIXI.Sprite(resources.bunny.texture);
        bunny.x = app.renderer.width / 2;
        bunny.y = app.renderer.height / 2;
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;
        app.stage.addChild(bunny);
        app.ticker.add(() => {
          bunny.rotation += 0.01;
        });
      });
     }
   }
}
</script>

Приветствия от facem.site ?

...