From 2fe001a67dfc4c9f3e21333f138e9b047bf4976c Mon Sep 17 00:00:00 2001 From: Hao Huang Date: Mon, 18 Mar 2024 17:16:46 +0800 Subject: [PATCH] update formatting in v8.md (#95) --- docs/guides/migrations/v8.md | 143 ++++++++++++++++++----------------- 1 file changed, 72 insertions(+), 71 deletions(-) diff --git a/docs/guides/migrations/v8.md b/docs/guides/migrations/v8.md index 7b1d2b46d..ec60738b7 100644 --- a/docs/guides/migrations/v8.md +++ b/docs/guides/migrations/v8.md @@ -38,27 +38,27 @@ Before diving into the migration process, let's review the breaking changes intr ```ts // imported by default - import 'pixi.js/accessibility' - import 'pixi.js/app' - import 'pixi.js/events' - import 'pixi.js/filters' - import 'pixi.js/sprite-tiling' - import 'pixi.js/text' - import 'pixi.js/text-bitmap' - import 'pixi.js/text-html' - import 'pixi.js/graphics' - import 'pixi.js/mesh' - import 'pixi.js/sprite-nine-slice' + import 'pixi.js/accessibility'; + import 'pixi.js/app'; + import 'pixi.js/events'; + import 'pixi.js/filters'; + import 'pixi.js/sprite-tiling'; + import 'pixi.js/text'; + import 'pixi.js/text-bitmap'; + import 'pixi.js/text-html'; + import 'pixi.js/graphics'; + import 'pixi.js/mesh'; + import 'pixi.js/sprite-nine-slice'; // not added by default, everyone needs to import these manually - import 'pixi.js/advanced-blend-modes' - import 'pixi.js/unsafe-eval' - import 'pixi.js/prepare' - import 'pixi.js/math-extras' - import 'pixi.js/dds' - import 'pixi.js/ktx' - import 'pixi.js/ktx2' - import 'pixi.js/basis' + import 'pixi.js/advanced-blend-modes'; + import 'pixi.js/unsafe-eval'; + import 'pixi.js/prepare'; + import 'pixi.js/math-extras'; + import 'pixi.js/dds'; + import 'pixi.js/ktx'; + import 'pixi.js/ktx2'; + import 'pixi.js/basis'; import { Application } from 'pixi.js'; @@ -75,7 +75,7 @@ Before diving into the migration process, let's review the breaking changes intr Therefore if you want to load bitmap fonts **BEFORE** initialising the renderer, you will need to import this extension. ```ts - import 'pixi.js/text-bitmap' + import 'pixi.js/text-bitmap'; import { Assets, Application } from 'pixi.js'; await Assets.load('my-font.fnt'); // If 'pixi.js/text-bitmap' is not imported, this will not load @@ -88,7 +88,7 @@ PixiJS will now need to be initialised asynchronously. With the introduction of **Old:** ```ts - import { Application } from 'pixi.js' + import { Application } from 'pixi.js'; const app = new Application(); @@ -118,35 +118,35 @@ There are a few key changes to the Graphics API. In fact this is probably the mo - Instead of beginning a fill or a stroke and then building a shape, v8 asks you to build your shape and then stroke / fill it. The terminology of `Line` has been replaced with the terminology of `Stroke` -**Old** +**Old:** ```ts // red rect const graphics = new Graphics() - .beginFill(0xFF0000); - .drawRect(50, 50, 100, 100); + .beginFill(0xFF0000) + .drawRect(50, 50, 100, 100) .endFill(); // blur rect with stroke const graphics2 = new Graphics() - .lineStyle(2, 'white'); - .beginFill('blue'); - .circle(530, 50, 140, 100); + .lineStyle(2, 'white') + .beginFill('blue') + .circle(530, 50, 140, 100) .endFill(); ``` -**New** +**New:** ```ts // red rect const graphics = new Graphics() .rect(50, 50, 100, 100) - .fill(0xFF0000) + .fill(0xFF0000); // blur rect with stroke const graphics2 = new Graphics() .rect(50, 50, 100, 100) .fill('blue') - .stroke({width:2, color:'white'}) + .stroke({width:2, color:'white'}); ``` - Shape functions have been renamed. Each drawing function has been simplified into a shorter version of its name. They have the same parameters though: @@ -166,7 +166,8 @@ const graphics2 = new Graphics() | drawStar | star | - fills functions expect `FillStyle` options or a color, rather than a string of parameters. This also replaces `beginTextureFill` -**Old** + +**Old:** ```ts const rect = new Graphics() .beginTextureFill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000}) @@ -174,20 +175,20 @@ const graphics2 = new Graphics() .endFill() .beginFill(0xFFFF00, 0.5) .drawRect(100, 0, 100, 100) - .endFill() + .endFill(); ``` -**New** +**New:** ```ts const rect = new Graphics() .rect(0, 0, 100, 100) .fill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000}) .rect(100, 0, 100, 100) - .fill({color:0xFFFF00, alpha:0.5}) + .fill({color:0xFFFF00, alpha:0.5}); ``` - stokes functions expect `StrokeStyle` options or a color, rather than a string of parameters. This also replaces `lineTextureStyle` -**Old** +**Old:** ```ts const rect = new Graphics() .lineTextureStyle({texture:Texture.WHITE, width:10, color:0xFF0000}) @@ -195,20 +196,20 @@ const graphics2 = new Graphics() .endFill() .lineStyle(2, 0xFEEB77); .drawRect(100, 0, 100, 100) - .endFill() + .endFill(); ``` -**New** +**New:** ```ts const rect = new Graphics() .rect(0, 0, 100, 100) .stroke({texture:Texture.WHITE, width:10, color:0xFF0000}) .rect(100, 0, 100, 100) - .stroke({color:0xFEEB77, width:2}) + .stroke({color:0xFEEB77, width:2}); ``` - holes now make use of a new `cut` function. As with `stroke` and `fill`, `cut` acts on the previous shape. -**Old** +**Old:** ```ts const rectAndHole = new Graphics() .beginFill(0x00FF00) @@ -218,7 +219,7 @@ const graphics2 = new Graphics() .endHole() .endFill(); ``` -**New** +**New:** ```ts const rectAndHole = new Graphics() .rect(0, 0, 100, 100) @@ -229,11 +230,11 @@ const graphics2 = new Graphics() - `GraphicsGeometry` has been replaced with `GraphicsContext` this allows for sharing of `Graphics` data more efficiently. -**Old** +**Old:** ```ts const rect = new Graphics() - .beginFill(0xFF0000); - .drawRect(50, 50, 100, 100); + .beginFill(0xFF0000) + .drawRect(50, 50, 100, 100) .endFill(); const geometry = rect.geometry; @@ -241,11 +242,11 @@ const graphics2 = new Graphics() const secondRect = new Graphics(geometry); ``` -**New** +**New:** ```ts const context = new GraphicsContext() .rect(50, 50, 100, 100) - .fill(0xFF0000) + .fill(0xFF0000); const rect = new Graphics(context); const secondRect = new Graphics(context); @@ -293,10 +294,10 @@ const graphics2 = new Graphics() - Mipmaps for `RenderTextures` have been adjusted so that developer is responsible for updating them mipmaps. Mipmap generation can be expensive, and due to the new reactive way we handle textures we do not want to accidentally generate mipmaps when they are not required. ```ts -const myRenderTexture = RenderTexture.create({width:100, height:100, autoGenerateMipmaps:true}) +const myRenderTexture = RenderTexture.create({width:100, height:100, autoGenerateMipmaps:true}); // do some rendering.. -renderer.render({target:myRenderTexture, container:scene}) +renderer.render({target:myRenderTexture, container:scene}); // now refresh mipmaps when you are ready myRenderTexture.source.updateMipmaps(); @@ -334,7 +335,7 @@ The act of adding and removing the event when a sprite's texture was changed led **New:** ```ts - const container = new GameWorld(); + const container = new Container(); const view = new Rectangle(0, 0, 800, 600); container.cullable = true; @@ -361,31 +362,31 @@ The act of adding and removing the event when a sprite's texture was changed led **Old:** ```ts - import { Assets } from 'pixi.js' + import { Assets } from 'pixi.js'; - Assets.add('bunny', 'bunny.png') + Assets.add('bunny', 'bunny.png'); ``` **New:** ```ts - import { Assets } from 'pixi.js' + import { Assets } from 'pixi.js'; - Assets.add({ alias: 'bunny', src: 'bunny.png' }) + Assets.add({ alias: 'bunny', src: 'bunny.png' }); ``` - `settings` object has been removed **Old:** ```ts - import { settings, BrowserAdapter } from 'pixi.js' + import { settings, BrowserAdapter } from 'pixi.js'; - settings.RESOLUTION = 1 - settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false - settings.ADAPTER = BrowserAdapter + settings.RESOLUTION = 1; + settings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false; + settings.ADAPTER = BrowserAdapter; ``` **New:** ```ts - import { AbstractRenderer, DOMAdapter, BrowserAdapter } from 'pixi.js' + import { AbstractRenderer, DOMAdapter, BrowserAdapter } from 'pixi.js'; // Can also be passed into the renderer directly e.g `autoDetectRenderer({resolution: 1})` AbstractRenderer.defaultOptions.resolution = 1; @@ -394,7 +395,7 @@ The act of adding and removing the event when a sprite's texture was changed led AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat = false; // See below for more information about changes to the adapter - DOMAdapter.set(BrowserAdapter) + DOMAdapter.set(BrowserAdapter); ``` - Adapter and Web Worker Changes @@ -406,18 +407,18 @@ The act of adding and removing the event when a sprite's texture was changed led **Old:** ```ts - import { settings, WebWorkerAdapter } from 'pixi.js' + import { settings, WebWorkerAdapter } from 'pixi.js'; - settings.ADAPTER = WebWorkerAdapter - settings.ADAPTER.createCanvas() + settings.ADAPTER = WebWorkerAdapter; + settings.ADAPTER.createCanvas(); ``` **New:** ```ts - import { DOMAdapter, WebWorkerAdapter } from 'pixi.js' + import { DOMAdapter, WebWorkerAdapter } from 'pixi.js'; - DOMAdapter.set(WebWorkerAdapter) - DOMAdapter.get().createCanvas() + DOMAdapter.set(WebWorkerAdapter); + DOMAdapter.get().createCanvas(); ``` - Application type now accepts Renderer instead of view by @Zyie in https://github.com/pixijs/pixijs/pull/9740 @@ -426,13 +427,13 @@ The act of adding and removing the event when a sprite's texture was changed led **Old:** ```ts - const app = new Application() + const app = new Application(); ``` **New:** ```ts // WebGL or WebGPU renderer - const app = new Application>() + const app = new Application>(); // WebGL specific renderer const app = new Application>(); // WebGPU specific renderer @@ -485,16 +486,16 @@ The act of adding and removing the event when a sprite's texture was changed led **Old:** ```ts - import { utils } from 'pixi.js' + import { utils } from 'pixi.js'; - utils.isMobile.any() + utils.isMobile.any(); ``` **New:** ```ts - import { isMobile } from 'pixi.js' + import { isMobile } from 'pixi.js'; - isMobile.any() + isMobile.any(); ``` - `container.getBounds()` now returns a [`Bounds`](https://pixijs.download/release/docs/rendering.Bounds.html) object instead of a [`Rectangle`](https://pixijs.download/release/docs/maths.Rectangle.html) object. You can access the rectangle by using `container.getBounds().rectangle` instead. @@ -505,7 +506,7 @@ The act of adding and removing the event when a sprite's texture was changed led ``` **New:** ```ts - const bounds = container.getBounds().rectangle + const bounds = container.getBounds().rectangle; ``` - `ParticleContainer` has been removed, you should use normal a regular `Container` instead. The performance improvements that `ParticleContainer` provided are no longer necessary due to the new rendering architecture.