From d32852c7ccf9caacee7e4b4ecfd5235853972b83 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Wed, 27 Nov 2024 11:33:55 +0000 Subject: [PATCH] fix: a variety of links, docs, and tutorial issues (#138) --- docs/guides/components/interaction.md | 4 ++-- docs/guides/migrations/v5.md | 4 ++-- docs/pixi-version.json | 10 +++++----- pixi-versions.json | 10 +++++----- src/pages/team.tsx | 5 ++++- src/tutorials/v7.0.0/gettingStarted/step2-content.md | 4 ++-- .../v8.0.0/chooChooTrain/step1/step1-content.md | 6 +++--- .../v8.0.0/chooChooTrain/step10/step10-content.md | 4 ++-- src/tutorials/v8.0.0/fishPond/step1/step1-content.md | 4 ++-- .../step5/addDisplacementEffect-completed.js | 2 -- src/tutorials/v8.0.0/fishPond/step5/step5-content.md | 4 +--- src/tutorials/v8.0.0/gettingStarted/step1-content.md | 2 +- src/tutorials/v8.0.0/gettingStarted/step2-content.md | 2 +- src/tutorials/v8.0.0/index.ts | 2 +- .../v8.0.0/spineBoyAdventure/step1/step1-code.js | 2 +- .../v8.0.0/spineBoyAdventure/step1/step1-content.md | 2 +- .../spineBoyAdventure/step2/SpineBoy1-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step2/SpineBoy1.js | 2 +- .../spineBoyAdventure/step2/step2-code-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step2/step2-code.js | 2 +- .../spineBoyAdventure/step3/step3-code-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step3/step3-code.js | 2 +- .../spineBoyAdventure/step4/SpineBoy2-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step4/SpineBoy2.js | 2 +- .../spineBoyAdventure/step4/step4-code-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step4/step4-code.js | 2 +- .../v8.0.0/spineBoyAdventure/step5/step5-code.js | 2 +- .../spineBoyAdventure/step6/step6-code-completed.js | 2 +- .../v8.0.0/spineBoyAdventure/step6/step6-code.js | 2 +- .../v8.0.0/spineBoyAdventure/step7/step7-code.js | 2 +- .../version-7.x/guides/basics/getting-started.md | 12 ++++++------ .../version-7.x/guides/basics/what-pixijs-is.md | 4 ++-- .../version-7.x/guides/components/containers.md | 6 +++--- .../version-7.x/guides/components/display-object.md | 2 +- .../version-7.x/guides/components/graphics.md | 4 ++-- .../version-7.x/guides/components/interaction.md | 6 +++--- .../version-7.x/guides/components/sprite-sheets.md | 2 +- .../version-7.x/guides/components/sprites.md | 2 +- versioned_docs/version-7.x/guides/components/text.md | 4 ++-- .../version-7.x/guides/components/textures.md | 8 ++++---- versioned_docs/version-7.x/guides/index.md | 4 ++-- versioned_docs/version-7.x/guides/migrations/v5.md | 4 ++-- 42 files changed, 76 insertions(+), 77 deletions(-) diff --git a/docs/guides/components/interaction.md b/docs/guides/components/interaction.md index f70200c12..fc978426f 100644 --- a/docs/guides/components/interaction.md +++ b/docs/guides/components/interaction.md @@ -33,7 +33,7 @@ PixiJS supports the following event types: | `globalpointermove` | Fired when a pointer device is moved, regardless of hit-testing the current object. | | `pointerout` | Fired when a pointer device is moved off the display object. | | `pointerover` | Fired when a pointer device is moved onto the display object. | -| `pointertap` | Fired when a pointer device is tapped twice on the display object. | +| `pointertap` | Fired when a pointer device is tapped on the display object. | | `pointerup` | Fired when a pointer device button is released over the display object. | | `pointerupoutside` | Fired when a pointer device button is released outside the display object that initially registered a pointerdown. | | `mousedown ` | Fired when a mouse button is pressed on the display object. | @@ -52,7 +52,7 @@ PixiJS supports the following event types: | `touchmove ` | Fired when a touch point is moved along the display object. | | `globaltouchmove` | Fired when a touch point is moved, regardless of hit-testing the current object. | | `touchstart ` | Fired when a touch point is placed on the display object. | -| `tap ` | Fired when a touch point is tapped twice on the display object. | +| `tap ` | Fired when a touch point is tapped on the display object. | | `wheel ` | Fired when a mouse wheel is spun over the display object. | | `rightclick ` | Fired when a right mouse button is clicked (pressed and released) over the display object. | | `rightdown ` | Fired when a right mouse button is pressed on the display object. | diff --git a/docs/guides/migrations/v5.md b/docs/guides/migrations/v5.md index 9ece09ba7..258bfb5f2 100644 --- a/docs/guides/migrations/v5.md +++ b/docs/guides/migrations/v5.md @@ -37,7 +37,7 @@ PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL; PixiJS v5 introduces a new class called `PIXI.Mesh`. This allows overriding the default shader and the ability to add more attributes to geometry. For [example](https://pixijs.io/examples/#/mesh/triangle-textured.js), you can add colors to vertices. -The old v4 Mesh class has moved from `PIXI.mesh.Mesh` to [`PIXI.SimpleMesh`](http://pixijs.download/dev/docs/PIXI.SimpleMesh.html), it extends `PIXI.Mesh`. +The old v4 Mesh class has moved from `PIXI.mesh.Mesh` to [`PIXI.SimpleMesh`](http://pixijs.download/v5.3.12/docs/PIXI.SimpleMesh.html), it extends `PIXI.Mesh`. `PIXI.mesh.Rope`, `PIXI.mesh.Plane`, `PIXI.mesh.NineSlicePlane` have moved to `PIXI.SimpleRope`, `PIXI.SimplePlane` and `PIXI.NineSlicePlane` respectively. @@ -123,7 +123,7 @@ In v5, this code is no longer needed. One of the newest features in v5 is that we decoupled all the asset-specific functionality from BaseTexture. We created a new system called "resources" and each BaseTexture now has a resource that wraps some specific asset type. For instance: VideoResource, SVGResource, ImageResource, CanvasResource. In the future, we hope to be able to add other resource types. If there were asset-specific methods or properties being called before, these will probably be on `baseTexture.resource`. -Also, we removed all of the `from*` methods from BaseTexture, so you just can call `BaseTexture.from` and pass in whatever resource. Please see [docs](http://pixijs.download/dev/docs/PIXI.BaseTexture.html) for more information about `from`. +Also, we removed all of the `from*` methods from BaseTexture, so you just can call `BaseTexture.from` and pass in whatever resource. Please see [docs](http://pixijs.download/v5.3.12/docs/PIXI.BaseTexture.html) for more information about `from`. ```js const canvas = document.createElement('canvas'); diff --git a/docs/pixi-version.json b/docs/pixi-version.json index 7ba73a53b..6b9bac02d 100644 --- a/docs/pixi-version.json +++ b/docs/pixi-version.json @@ -1,10 +1,10 @@ { "versionLabel": "v8.x", - "version": "8.5.1", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.1", - "build": "https://pixijs.download/v8.5.1/pixi.min.js", - "docs": "https://pixijs.download/v8.5.1/docs/index.html", - "npm": "8.5.1", + "version": "8.6.0", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0", + "build": "https://pixijs.download/v8.6.0/pixi.min.js", + "docs": "https://pixijs.download/v8.6.0/docs/index.html", + "npm": "8.6.0", "prerelease": false, "latest": true } \ No newline at end of file diff --git a/pixi-versions.json b/pixi-versions.json index 9088604b8..d3bca956f 100644 --- a/pixi-versions.json +++ b/pixi-versions.json @@ -12,11 +12,11 @@ }, { "versionLabel": "v8.x", - "version": "8.5.1", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.1", - "build": "https://pixijs.download/v8.5.1/pixi.min.js", - "docs": "https://pixijs.download/v8.5.1/docs/index.html", - "npm": "8.5.1", + "version": "8.6.0", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0", + "build": "https://pixijs.download/v8.6.0/pixi.min.js", + "docs": "https://pixijs.download/v8.6.0/docs/index.html", + "npm": "8.6.0", "prerelease": false, "latest": true, "isCurrent": true diff --git a/src/pages/team.tsx b/src/pages/team.tsx index 42a0b28db..29e32d9ef 100644 --- a/src/pages/team.tsx +++ b/src/pages/team.tsx @@ -15,7 +15,10 @@ export default function Team(): JSX.Element }); return ( - +

Meet the Team

diff --git a/src/tutorials/v7.0.0/gettingStarted/step2-content.md b/src/tutorials/v7.0.0/gettingStarted/step2-content.md index b69a368ea..7b2e44d85 100644 --- a/src/tutorials/v7.0.0/gettingStarted/step2-content.md +++ b/src/tutorials/v7.0.0/gettingStarted/step2-content.md @@ -2,7 +2,7 @@ So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed. -There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/release/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. +There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/v7.4.2/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/v7.4.2/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us: @@ -11,7 +11,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web p const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png') ``` -Then we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. +Then we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/v7.4.2/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. ```javascript app.stage.addChild(bunny) diff --git a/src/tutorials/v8.0.0/chooChooTrain/step1/step1-content.md b/src/tutorials/v8.0.0/chooChooTrain/step1/step1-content.md index c0d1188e6..fe8d127e3 100644 --- a/src/tutorials/v8.0.0/chooChooTrain/step1/step1-content.md +++ b/src/tutorials/v8.0.0/chooChooTrain/step1/step1-content.md @@ -2,9 +2,9 @@ Welcome to the Choo Choo Train workshop! -We are going to handcraft a cute little scene of a train moving through a landscape at night. We will solely be using the [Graphics](https://pixijs.com/guides/components/graphics) API to draw out the whole scene. In this tutorial, we will be exploring a handful of methods it provides to draw a variety of shapes. For the full list of methods, please check out the Graphics [documentation](https://pixijs.download/release/docs/PIXI.Graphics.html). +We are going to handcraft a cute little scene of a train moving through a landscape at night. We will solely be using the [Graphics](https://pixijs.com/guides/components/graphics) API to draw out the whole scene. In this tutorial, we will be exploring a handful of methods it provides to draw a variety of shapes. For the full list of methods, please check out the Graphics [documentation](https://pixijs.download/release/docs/scene.Graphics.html). -Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps. +Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps. We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead. @@ -19,4 +19,4 @@ document.body.appendChild(app.canvas); At this point, you should see the preview filled with an empty light blue background. -When you are ready, proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card. \ No newline at end of file +When you are ready, proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card. diff --git a/src/tutorials/v8.0.0/chooChooTrain/step10/step10-content.md b/src/tutorials/v8.0.0/chooChooTrain/step10/step10-content.md index c23909b01..387db65cb 100644 --- a/src/tutorials/v8.0.0/chooChooTrain/step10/step10-content.md +++ b/src/tutorials/v8.0.0/chooChooTrain/step10/step10-content.md @@ -1,5 +1,5 @@ # You did it! -Congratulations, hope you enjoyed the journey! Now you are an expert on the Graphics API. Make sure to explore other features that the API has to offer on the official [documentation](https://pixijs.download/release/docs/PIXI.Graphics.html), like the ability to cut shapes out from existing ones, advance lines and curves, using gradients or textures for fill and stroke - just to list a few. +Congratulations, hope you enjoyed the journey! Now you are an expert on the Graphics API. Make sure to explore other features that the API has to offer on the official [documentation](https://pixijs.download/release/docs/scene.Graphics.html), like the ability to cut shapes out from existing ones, advance lines and curves, using gradients or textures for fill and stroke - just to list a few. -Feel free to head back to the gallery and explore other tutorials. \ No newline at end of file +Feel free to head back to the gallery and explore other tutorials. diff --git a/src/tutorials/v8.0.0/fishPond/step1/step1-content.md b/src/tutorials/v8.0.0/fishPond/step1/step1-content.md index d399d76ed..119fb84a6 100644 --- a/src/tutorials/v8.0.0/fishPond/step1/step1-content.md +++ b/src/tutorials/v8.0.0/fishPond/step1/step1-content.md @@ -2,9 +2,9 @@ Welcome to the Fish Pond workshop! -We are going to build a virtual pond and fill them with a number of colorful fishes. In the process, we will be learning about basic manipulation of [Sprites](/guides/components/sprites), [TilingSprite](https://pixijs.download/release/docs/PIXI.TilingSprite.html) and Filter, specifically the [Displacement Filter](https://pixijs.download/release/docs/PIXI.DisplacementFilter.html). +We are going to build a virtual pond and fill them with a number of colorful fishes. In the process, we will be learning about basic manipulation of [Sprites](/8.x/guides/components/sprites), [TilingSprite](https://pixijs.download/release/docs/scene.TilingSprite.html) and Filter, specifically the [Displacement Filter](https://pixijs.download/release/docs/filters.DisplacementFilter.html). -Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps. +Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps. We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead. diff --git a/src/tutorials/v8.0.0/fishPond/step5/addDisplacementEffect-completed.js b/src/tutorials/v8.0.0/fishPond/step5/addDisplacementEffect-completed.js index d9b3dbf64..a23654a59 100644 --- a/src/tutorials/v8.0.0/fishPond/step5/addDisplacementEffect-completed.js +++ b/src/tutorials/v8.0.0/fishPond/step5/addDisplacementEffect-completed.js @@ -12,8 +12,6 @@ export function addDisplacementEffect(app) const filter = new DisplacementFilter({ sprite, scale: 50, - width: app.screen.width, - height: app.screen.height, }); // Add the filter to the stage. diff --git a/src/tutorials/v8.0.0/fishPond/step5/step5-content.md b/src/tutorials/v8.0.0/fishPond/step5/step5-content.md index b4873e9e5..3d2f3cb54 100644 --- a/src/tutorials/v8.0.0/fishPond/step5/step5-content.md +++ b/src/tutorials/v8.0.0/fishPond/step5/step5-content.md @@ -18,11 +18,9 @@ From here, we can simply create the displacement filter and add it to the stage const filter = new DisplacementFilter({ sprite, scale: 50, - width: app.screen.width, - height: app.screen.height, }); app.stage.filters = [filter]; ``` -Now you should see the post-processed pond in effect. Looks like we are looking down directly into a real pond, right? \ No newline at end of file +Now you should see the post-processed pond in effect. Looks like we are looking down directly into a real pond, right? diff --git a/src/tutorials/v8.0.0/gettingStarted/step1-content.md b/src/tutorials/v8.0.0/gettingStarted/step1-content.md index 7045f2dc7..07af2971a 100644 --- a/src/tutorials/v8.0.0/gettingStarted/step1-content.md +++ b/src/tutorials/v8.0.0/gettingStarted/step1-content.md @@ -2,7 +2,7 @@ Welcome to the PixiJS tutorial! -Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start with the creation of a PixiJS canvas application and add its view to the DOM. +Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start with the creation of a PixiJS canvas application and add its view to the DOM. We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead. diff --git a/src/tutorials/v8.0.0/gettingStarted/step2-content.md b/src/tutorials/v8.0.0/gettingStarted/step2-content.md index 4147a0943..b4896163e 100644 --- a/src/tutorials/v8.0.0/gettingStarted/step2-content.md +++ b/src/tutorials/v8.0.0/gettingStarted/step2-content.md @@ -2,7 +2,7 @@ So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed. -There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [Containers](https://pixijs.download/release/docs/PIXI.Container.html). A Sprite is an extension of Container that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. +There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/scene.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [Containers](https://pixijs.download/release/docs/scene.Container.html). A Sprite is an extension of Container that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. For now, we will simply load a single texture up on the spot with the `Assets` utility class. diff --git a/src/tutorials/v8.0.0/index.ts b/src/tutorials/v8.0.0/index.ts index b3cda21fa..27152807d 100644 --- a/src/tutorials/v8.0.0/index.ts +++ b/src/tutorials/v8.0.0/index.ts @@ -24,7 +24,7 @@ export default { thumbnail: 'thumb_spineboy_adventure.png', steps: spineBoyAdventureTutorialSteps, extraPackages: { - '@pixi/spine-pixi': '^1.0.4', + '@esotericsoftware/spine-pixi-v8': '^4.2.66', }, }, }; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-code.js index 1fb427363..0eb5f768a 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md index b63b12370..95423e674 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md @@ -2,7 +2,7 @@ Welcome to the SpineBoy Adventure workshop! -Let's venture into the world of the PixiJS ecosystem. We are going to explore one of the official plugins; [Spine plugin (`@pixi/spine-pixi`)](https://github.com/pixijs/spine-v8) which allow us to render and manipulate Spine animations on our PixiJS. +Let's venture into the world of the PixiJS ecosystem. We are going to explore one of the official plugins; [Spine plugin (`@esotericsoftware/spine-pixi-v8`)](https://github.com/EsotericSoftware/spine-runtimes/tree/4.2/spine-ts) which allow us to render and manipulate Spine animations on our PixiJS. We will be creating a mini interactive side-scroller experience using the famous SpineBoy which will be controlled by the keyboard. For the sake of simplicity, we will be focusing on just the movement around the scene. diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1-completed.js index 695ab5e1c..cb4c50644 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1-completed.js @@ -1,4 +1,4 @@ -import { Spine } from '@pixi/spine-pixi'; +import { Spine } from '@esotericsoftware/spine-pixi-v8'; import { Container } from 'pixi.js'; // Class for handling the character Spine and its animations. diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1.js b/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1.js index 3911fee0e..a46d5952c 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1.js @@ -1,4 +1,4 @@ -import { Spine } from '@pixi/spine-pixi'; +import { Spine } from '@esotericsoftware/spine-pixi-v8'; import { Container } from 'pixi.js'; // Class for handling the character Spine and its animations. diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code-completed.js index 67352adc5..8f10369ff 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code-completed.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code.js index cc5576c84..5adfdcf66 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code-completed.js index e1db85aff..4496eaeda 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code-completed.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code.js index 6889a2096..ede423f70 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2-completed.js index e201e6bd1..8f3de15c3 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2-completed.js @@ -1,4 +1,4 @@ -import { Spine } from '@pixi/spine-pixi'; +import { Spine } from '@esotericsoftware/spine-pixi-v8'; import { Container } from 'pixi.js'; // Define the Spine animation map for the character. diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2.js b/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2.js index a2717133b..83e79daa7 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2.js @@ -1,4 +1,4 @@ -import { Spine } from '@pixi/spine-pixi'; +import { Spine } from '@esotericsoftware/spine-pixi-v8'; import { Container } from 'pixi.js'; // Define the Spine animation map for the character. diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code-completed.js index 3b2a58521..d173a4e90 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code-completed.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code.js index 39d7c617e..6271edba6 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step5/step5-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step5/step5-code.js index a5b740081..3a8748841 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step5/step5-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step5/step5-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code-completed.js b/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code-completed.js index 86902734c..dc13a8953 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code-completed.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code-completed.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code.js index 7807f66bb..47fb1afcb 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step7/step7-code.js b/src/tutorials/v8.0.0/spineBoyAdventure/step7/step7-code.js index 86902734c..dc13a8953 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step7/step7-code.js +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step7/step7-code.js @@ -1,4 +1,4 @@ -import '@pixi/spine-pixi'; +import '@esotericsoftware/spine-pixi-v8'; import { Application, Assets } from 'pixi.js'; import { SpineBoy } from './SpineBoy'; diff --git a/versioned_docs/version-7.x/guides/basics/getting-started.md b/versioned_docs/version-7.x/guides/basics/getting-started.md index a58391bb2..35b344675 100644 --- a/versioned_docs/version-7.x/guides/basics/getting-started.md +++ b/versioned_docs/version-7.x/guides/basics/getting-started.md @@ -31,7 +31,7 @@ OK! With those notes out of the way, let's get started. There are only a few s * Create an HTML file * Serve the file with a web server * Load the PixiJS library -* Create an [Application](https://pixijs.download/release/docs/PIXI.Application.html) +* Create an [Application](https://pixijs.download/v7.4.2/docs/PIXI.Application.html) * Add the generated view to the DOM * Add an image to the stage * Write an update loop @@ -70,7 +70,7 @@ Test that everything is working by opening your browser of choice and entering ` OK, so we have a web page, and we're serving it. But it's empty. The next step is to actually load the PixiJS library. If we were building a real application, we'd want to download a target version of PixiJS from the [Pixi Github repo](https://github.com/pixijs/pixijs) so that our version wouldn't change on us. But for this sample application, we'll just use the CDN version of PixiJS. Add this line to the `` section of your `index.html` file: ```html - + ``` This will include a *non-minified* version of the latest version of PixiJS when your page loads, ready to be used. We use the non-minified version because we're in development. In production, you'd want to use `pixi.min.js` instead, which is compressed for faster download and excludes assertions and deprecation warnings that can help when building your project, but take longer to download and run. @@ -85,7 +85,7 @@ Loading the library doesn't do much good if we don't *use* it, so the next step ``` -What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. [Application](https://pixijs.download/release/docs/PIXI.Application.html) is a helper class that simplifies working with PixiJS. It creates the renderer, creates the stage, and starts a ticker for updating. In production, you'll almost certainly want to do these steps yourself for added customization and control - we'll cover doing so in a later guide. For now, the Application class is a perfect way to start playing with PixiJS without worrying about the details. +What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. [Application](https://pixijs.download/v7.4.2/docs/PIXI.Application.html) is a helper class that simplifies working with PixiJS. It creates the renderer, creates the stage, and starts a ticker for updating. In production, you'll almost certainly want to do these steps yourself for added customization and control - we'll cover doing so in a later guide. For now, the Application class is a perfect way to start playing with PixiJS without worrying about the details. ### Adding the View to the DOM @@ -101,7 +101,7 @@ This takes the view created by the application (the Canvas element) and adds it So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed. -There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/release/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. +There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/v7.4.2/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/v7.4.2/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth. Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us: @@ -114,7 +114,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web ### Adding the Sprite to the Stage -Finally, we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. +Finally, we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/v7.4.2/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. ```javascript app.stage.addChild(sprite); @@ -150,7 +150,7 @@ Here's the whole thing in one place. Check your file and make sure it matches i - +