Feature: Upgrade to PixiJS v8 (#261)

pixijs · Feb 15, 2024 · caf97a7 · caf97a7
1 parent 02732c0
commit caf97a7
Show file tree

Hide file tree

Showing 35 changed files with 4,124 additions and 2,982 deletions.
diff --git a/.github/workflows/nodejs.yml → .github/workflows/main.yml b/.github/workflows/nodejs.yml → .github/workflows/main.yml
@@ -1,4 +1,4 @@
-name: Node.js CI
+name: Automation
 on:
   push:
     branches: [ '**' ]
@@ -15,17 +15,15 @@ jobs:
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
       AWS_REGION: ${{ secrets.AWS_REGION }}
       SOURCE_DIR: 'deploy'
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Install xvfb
       run: sudo apt-get install xvfb
-    - name: Use Node.js 16.x
-      uses: actions/setup-node@v3
+    - name: Use Node.js 18.x
+      uses: actions/setup-node@v4
       with:
-        node-version: 16
-    - name: Install npm
-      run: npm install -g npm@8
+        node-version: 18
     - name: Install dependencies
       run: npm ci
 

diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ If you're using a `<script>` element to import `@pixi/sound` into your project,
 |---|---|
 | v5.x - v6.x | v4.x |
 | v7.x | v5.x |
+| v8.x | v6.x |
 
 ### Resources
 

diff --git a/examples/client/demo.js b/examples/client/demo.js
@@ -1,17 +1,17 @@
-const manifest = {
-    loop1: 'resources/loops/loop1.mp3',
-    loop2: 'resources/loops/loop2.mp3',
-    loop3: 'resources/loops/loop3.mp3',
-    loop4: 'resources/loops/loop4.mp3',
-    bird: 'resources/bird.mp3',
-    boing: 'resources/boing.mp3',
-    buzzer: 'resources/buzzer.mp3',
-    car: 'resources/car.mp3',
-    chime: 'resources/chime.mp3',
-    success: 'resources/success.mp3',
-    sword: 'resources/sword.mp3',
-    whistle: 'resources/whistle.mp3',
-};
+const manifest = [
+    { alias: 'loop1', src: 'resources/loops/loop1.mp3' },
+    { alias: 'loop2', src: 'resources/loops/loop2.mp3' },
+    { alias: 'loop3', src: 'resources/loops/loop3.mp3' },
+    { alias: 'loop4', src: 'resources/loops/loop4.mp3' },
+    { alias: 'bird', src: 'resources/bird.mp3' },
+    { alias: 'boing', src: 'resources/boing.mp3' },
+    { alias: 'buzzer', src: 'resources/buzzer.mp3' },
+    { alias: 'car', src: 'resources/car.mp3' },
+    { alias: 'chime', src: 'resources/chime.mp3' },
+    { alias: 'success', src: 'resources/success.mp3' },
+    { alias: 'sword', src: 'resources/sword.mp3' },
+    { alias: 'whistle', src: 'resources/whistle.mp3' },
+];
 
 PIXI.Assets.addBundle('demo', manifest);
 PIXI.Assets.loadBundle('demo').then(() =>

diff --git a/examples/client/sprites.js b/examples/client/sprites.js
@@ -41,22 +41,24 @@ const sprites = {
     },
 };
 const playhead = new PIXI.Graphics()
-    .beginFill(0xff0000)
-    .drawRect(0, 0, 1, 100);
+    .rect(0, 0, 1, 100)
+    .fill(0xff0000);
 
 playhead.x = -1;
 const sound = PIXI.sound.Sound.from({
     url: 'resources/sprite.mp3',
     sprites,
     singleInstance: true,
     preload: true,
-    loaded()
+    async loaded()
     {
-        const app = new PIXI.Application({
+        const app = new PIXI.Application();
+
+        await app.init({
             width: 1024,
             height: 100,
             backgroundColor: 0xffffff,
-            view: document.getElementById('waveform'),
+            canvas: document.getElementById('waveform'),
         });
         const baseTexture = PIXI.sound.utils.render(sound, {
             width: 1024,

diff --git a/examples/demo.html b/examples/demo.html
@@ -11,7 +11,7 @@
         <link rel="stylesheet" href="css/range.css">
         <link rel="stylesheet" href="css/examples.css?v=2">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body ontouchstart="">
@@ -147,20 +147,20 @@ <h1><img src="resources/logo.svg" class="logo" alt="PixiJS" />Sound <small>Demo<
                 </div>
             </div>
         <pre><code type="javascript">// List of files to load
-const manifest = {
-    loop1: 'resources/loops/loop1.mp3',
-    loop2: 'resources/loops/loop2.mp3',
-    loop3: 'resources/loops/loop3.mp3',
-    loop4: 'resources/loops/loop4.mp3',
-    bird: 'resources/bird.mp3',
-    boing: 'resources/boing.mp3',
-    buzzer: 'resources/buzzer.mp3',
-    car: 'resources/car.mp3',
-    chime: 'resources/chime.mp3',
-    success: 'resources/success.mp3',
-    sword: 'resources/sword.mp3',
-    whistle: 'resources/whistle.mp3'
-};
+const manifest = [
+    { alias: 'loop1', src: 'resources/loops/loop1.mp3' },
+    { alias: 'loop2', src: 'resources/loops/loop2.mp3' },
+    { alias: 'loop3', src: 'resources/loops/loop3.mp3' },
+    { alias: 'loop4', src: 'resources/loops/loop4.mp3' },
+    { alias: 'bird', src: 'resources/bird.mp3' },
+    { alias: 'boing', src: 'resources/boing.mp3' },
+    { alias: 'buzzer', src: 'resources/buzzer.mp3' },
+    { alias: 'car', src: 'resources/car.mp3' },
+    { alias: 'chime', src: 'resources/chime.mp3' },
+    { alias: 'success', src: 'resources/success.mp3' },
+    { alias: 'sword', src: 'resources/sword.mp3' },
+    { alias: 'whistle', src: 'resources/whistle.mp3' },
+];
 
 // Add to the PIXI loader
 PIXI.Assets.addBundle('demo', manifest);

diff --git a/examples/filters.html b/examples/filters.html
@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="css/examples.css?v=2">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.0/html.sortable.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>

diff --git a/examples/index.html b/examples/index.html
@@ -16,7 +16,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script src="https://cdn.rawgit.com/aidanlister/jquery-stickytabs/1.2.1/jquery.stickytabs.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>
@@ -130,7 +130,7 @@ <h3>Filetypes</h3>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#filetypes1">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="filetypes1" class="javascript">PIXI.Assets.add('applause', 'resources/applause.{ogg,mp3}');
+                <pre><code id="filetypes1" class="javascript">PIXI.Assets.add({ alias: 'applause', src: 'resources/applause.{ogg,mp3}' });
 PIXI.Assets.load('applause').then(sound => sound.play());</code></pre>
 
                 <p>Alternatively, if you don't plan to use Assets (typically because you're using a bundler like Parcel or Webpack), but you still would like to resolve multiple files, you can choose from multiple URLs.</p>
@@ -160,7 +160,7 @@ <h3>Preloading</h3>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#loaded2">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="loaded2" class="javascript">PIXI.Assets.add('bird', 'resources/bird.mp3');
+                <pre><code id="loaded2" class="javascript">PIXI.Assets.add({ alias: 'bird', src: 'resources/bird.mp3' });
 PIXI.Assets.load('bird').then(sound => sound.play());</code></pre>
             </div>
             <div class="tab-pane fade" id="section-volume">
@@ -242,34 +242,35 @@ <h3>Utilities</h3>
                 <p>First setup an Application to render the waveform.</p>
                 <code class="hidden" id="render-clear">waveform.stage.removeChildren();</code>
                 <canvas class="canvas" width="1024" height="128" id="waveform"></canvas>
-                <pre><code data-autorun class="javascript">window.waveform = new PIXI.Application({
+                <pre><code data-autorun class="javascript">window.waveform = new PIXI.Application();
+window.waveform.init({
     width: 1024,
     height: 128,
-    view: document.getElementById('waveform'),
+    canvas: document.getElementById('waveform'),
     backgroundColor: 0xffffff
 });
 </code></pre>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#render3" data-beforeCode="#render-clear">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="render3" class="javascript">PIXI.Assets.add('applause', 'resources/applause.mp3');
-PIXI.Assets.load('applause').then(sound => {
-    const baseTexture = PIXI.sound.utils.render(sound, {
-        width: waveform.renderer.width,
-        height: waveform.renderer.height,
-        fill: '#999'
-    });
-    const playhead = new PIXI.Graphics()
-        .beginFill(0xff0000)
-        .drawRect(0, 0, 1, waveform.renderer.height);
-    const sprite = new PIXI.Sprite(
-        new PIXI.Texture(baseTexture)
-    );
-    waveform.stage.addChild(sprite, playhead);
-    sound.play().on('progress', function(value) {
-        playhead.x = baseTexture.width * value;
-    });
-});</code></pre>
+                <pre><code id="render3" class="javascript">PIXI.Assets.add({ alias: 'applause', src: 'resources/applause.mp3' });
+const sound = await PIXI.Assets.load('applause');
+const baseTexture = PIXI.sound.utils.render(sound, {
+    width: waveform.renderer.width,
+    height: waveform.renderer.height,
+    fill: '#999'
+});
+const playhead = new PIXI.Graphics()
+    .rect(0, 0, 1, waveform.renderer.height)
+    .fill(0xff0000);
+const sprite = new PIXI.Sprite(
+    new PIXI.Texture(baseTexture)
+);
+waveform.stage.addChild(sprite, playhead);
+sound.play().on('progress', function(value) {
+    playhead.x = baseTexture.width * value;
+});
+</code></pre>
 
                 <p>Create a simple sine-wave tone.</p>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#sine-tone" data-beforeCode="#render-clear">

diff --git a/examples/sprites.html b/examples/sprites.html
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="css/examples.css?v=2">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/monokai-sublime.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>