Skip to content

Commit

Permalink
update formatting in v8.md (#95)
Browse files Browse the repository at this point in the history
  • Loading branch information
@F-star
F-star authored Mar 18, 2024
1 parent 1958cd1 commit 2fe001a
Showing 1 changed file with 72 additions and 71 deletions.
143 changes: 72 additions & 71 deletions docs/guides/migrations/v8.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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();
Expand Down Expand Up @@ -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:
Expand All @@ -166,49 +166,50 @@ 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})
.drawRect(0, 0, 100, 100)
.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})
.drawRect(0, 0, 100, 100)
.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)
Expand All @@ -218,7 +219,7 @@ const graphics2 = new Graphics()
.endHole()
.endFill();
```
**New**
**New:**
```ts
const rectAndHole = new Graphics()
.rect(0, 0, 100, 100)
Expand All @@ -229,23 +230,23 @@ 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;
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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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<HTMLCanvasElement>()
const app = new Application<HTMLCanvasElement>();
```

**New:**
```ts
// WebGL or WebGPU renderer
const app = new Application<Renderer<HTMLCanvasElement>>()
const app = new Application<Renderer<HTMLCanvasElement>>();
// WebGL specific renderer
const app = new Application<WebGLRenderer<HTMLCanvasElement>>();
// WebGPU specific renderer
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand Down

0 comments on commit 2fe001a

Please sign in to comment.