v8.0.0-beta.4

ℹ️ INFO

See here for list of changes for PixiJS v8
https://github.com/pixijs/pixijs/releases/tag/v8.0.0-beta.0

💾 Download

Development Build:

• https://pixijs.download/v8.0.0-beta.4/pixi.js
• https://pixijs.download/v8.0.0-beta.4/pixi.mjs

Production Build:

• https://pixijs.download/v8.0.0-beta.4/pixi.min.js
• https://pixijs.download/v8.0.0-beta.4/pixi.min.mjs

Changed

v8.0.0-beta.3...v8.0.0-beta.4

🔥 Breaking

• Breaking: Remove settings object by @Zyie in #9737

  // Can also be passed into the renderer directly e.g `autoDetectrenderer({resolution: 1})` 
  settings.RESOLUTION -> AbstractRenderer.defaultOptions.resolution
  
  // Can also be passed into the renderer directly e.g `autoDetectrenderer({failIfMajorPerformanceCaveat: false})` 
  setting.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT -> AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
  
  settings.ADAPTER -> DOMAdapter.get()/DOMAdapter.set()

• Breaking: Application type now accepts Renderer instead of view by @Zyie in #9740

  const app = new Application<Renderer<HTMLCanvasElement>()
  
  app.canvas // HTMLCanvasElement
  

  this also works with just initialising a renderer

  const webgl = new WebGLRenderer<HTMLCanvasElement>()
  const webgpu = new WebGPURenderer<HTMLCanvasElement>()
  

• Breaking: Adjust Texture.from by @Zyie in #9744
  • Texture.fromBuffer removed, use Texture.from
  • Texture.from can now generate a texture from resources such as HTMLCanvasElement/HTMLImageElement/HTMLVideoElement
• Breaking: Convert blend mode filters to extensions by @Zyie in #9745
  • The new complex blendModes e.g 'vivid-light have been moved out into extensions to decrease bundle size
  • If you want access to the new blend mode you can do the following:

    import 'pixi.js/blendModes' // adds all new blend modes
  
    // or
    import {extensions, VividLightBlend} from 'pixi.js'
    extensions.add(VividLightBlend)
    container.blendMode = 'vivid-light' // only this blend mode will be available

🎁 Added

• Added: HTML tagStyles by @GoodBoyDigital in #9734

  • HTMLText now has a new param called tagStyles were you can define custom tags in your text 👍

    new Text({
        text:'<red>Red</red>,<blue>Blue</blue>,<green>Green</green>', 
        renderMode:'html',
        style:{
            fontFamily: 'DM Sans',
            fill: 'white',
            fontSize:100,
            tagStyles:{
                red:{
                    fill:'red',
                },
                blue:{
                    fill:'blue',
                },
                green:{
                    fill:'green',
                }
            }
            }
     });
    

    result:
    

🐛 Fixed

• Fix: rendering huge Graphics by @GoodBoyDigital in #9728
• Fix: tint type on container by @GoodBoyDigital in #9732
• Fix: text style type by @Zyie in #9731
• Fix: graphics not apply alpha from Color fill by @Zyie in #9739
• Fix: resolutionChange runner missing by @pagoru in #9736

🧹 Chores

• Add visual testing by @Zyie in #9735

New Contributors

• @pagoru made their first contribution in #9736

Full Changelog: v8.0.0-beta.3...v8.0.0-beta.4