Skip to content

Commit

Permalink
fix: hardcode v7 to docs links
Browse files Browse the repository at this point in the history
  • Loading branch information
miltoncandelero committed Apr 6, 2024
1 parent ebd99c1 commit 3792494
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 23 deletions.
2 changes: 1 addition & 1 deletion source/includes/_01-getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ app.stage.addChild(clampy);
First, we see the `import` statement. As previously stated, I prefer named imports to just importing everything under a big all-caps `PIXI` object.

After that, we create an `app` instance of PixiJS `Application`. This object is a quick way to set up a renderer and a stage to drop stuff on screen and be ready to render. You can see that I call for an HTML element by id `pixi-canvas`, this element can be found on the `index.ejs` file. (The ejs file is template that _webpack_ will use to create your final `index.html` with your code bundle referenced inside)
As a parameter for the `Application` object, we give it some options. You can see and explore the full list in [PixiJS official docs](https://pixijs.download/dev/docs/PIXI.Application.html).
As a parameter for the `Application` object, we give it some options. You can see and explore the full list in [PixiJS official docs](https://pixijs.download/v7.4.2/docs/PIXI.Application.html).

Then, I create a `Sprite` with the `Sprite.from(...)` method, this is a super powerful shortcut that can take as a parameter one of many things, among which we can find:

Expand Down
16 changes: 8 additions & 8 deletions source/includes/_02-putting-stuff-on-screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,13 @@ bigConty.addChild(littleConty);
> A bit of a silly example, it won't show anything on screen since containers don't have content by themselves.
The most basic class you will have. While it doesn't have any graphical representation on its own, you can use it to group other objects and affect them as a unit.
[PixiJS Container API](https://pixijs.download/dev/docs/PIXI.Container.html)
[PixiJS Container API](https://pixijs.download/v7.4.2/docs/PIXI.Container.html)
Methods and properties that you will use most frequently:

* `addChild(...)`: You use this to add something to the container.
* `removeChild(...)`: You use this to remove said something to the container.
* `children`: An array of the objects you added to the container.
* `position`, `scale` and `skew`: If you care to know, those are two PixiJS [Point](https://pixijs.download/dev/docs/PIXI.ObservablePoint.html)
* `position`, `scale` and `skew`: If you care to know, those are two PixiJS [Point](https://pixijs.download/v7.4.2/docs/PIXI.ObservablePoint.html)
* `position.x` and `position.y` have shortcuts on `.x` and `.y`
* Even if `position` is an object, setting it to a new position or to another object's position won't break it since it has a setter that copies the value! This makes `one.position = another.position` totally safe!
* `rotation` and `angle`: Rotation is in _radians_ while angle is in _degrees_. Changing one updates the other.
Expand All @@ -107,7 +107,7 @@ const particleConty: ParticleContainer = new ParticleContainer();
// Pretty much everything that worked on a Container will work with a ParticleContainer.
```

A [Particle Container](https://pixijs.download/dev/docs/PIXI.ParticleContainer.html) is a special kind of container designed to go fast. To achieve this extra speed you sacrifice some functionality.
A [Particle Container](https://pixijs.download/v7.4.2/docs/PIXI.ParticleContainer.html) is a special kind of container designed to go fast. To achieve this extra speed you sacrifice some functionality.
The rules for Particle Containers are:

* **No grandchildren**: Children of a ParticleContainer can't have children.
Expand Down Expand Up @@ -139,7 +139,7 @@ app.stage.addChild(clampy);
> Here we use again the shortcuts for `position`.
The simplest way to show a bitmap on your screen. It inherits from `Container` so all the properties from above apply here too!
[PixiJS Sprite API](https://pixijs.download/dev/docs/PIXI.Sprite.html)
[PixiJS Sprite API](https://pixijs.download/v7.4.2/docs/PIXI.Sprite.html)
Methods and properties that you will use most frequently:

* `Sprite.from(...)`: This is a static method to create new sprites. It does some black magic inside it so that it can take a lot of different kinds of parameters. (You technically can use the `new Sprite(...)` way of creating sprites but this is way easier).
Expand Down Expand Up @@ -174,7 +174,7 @@ graphy.y = 100;
> I can't stress this enough: **Do** draw your graphics relative to their own origin and then move the object. **Don't** try to draw it directly on the screen position you want
This class allows you to make primitive drawings like rectangles, circles, and lines. It is really useful when you need masks, hitboxes, or want a simple graphic without needing a bitmap file. It also inherits from `Container`.
[PixiJS Graphics API](https://pixijs.download/dev/docs/PIXI.Graphics.html)
[PixiJS Graphics API](https://pixijs.download/v7.4.2/docs/PIXI.Graphics.html)
Methods and properties that you will use most frequently:

* `beginFill(...)` and `endFill()`: You mark the beginning and end of a fill. Every shape you draw between the _begin_ and _end_ calls will be filled by the color you specify.
Expand Down Expand Up @@ -206,7 +206,7 @@ app.stage.addChild(texty);
Oh boy, we could have an entire chapter dedicated to text but for now, just the basics.
Text has AMAZING support for Unicode characters (as long as your chosen font supports it) and it is pretty consistent on how it looks across browsers.
[PixiJS Text API](https://pixijs.download/dev/docs/PIXI.Text.html)
[PixiJS Text API](https://pixijs.download/v7.4.2/docs/PIXI.Text.html)
Tips:

* Go to [PixiJS Textstyle Editor](https://pixijs.io/pixi-text-style) to make your text look exactly like you want it to.
Expand Down Expand Up @@ -242,7 +242,7 @@ app.stage.addChild(bitmapTexty);
> Remember, symbols won't show by default. Your sentence might not mean the same without commas.
The faster but more limited brother to `Text`, BitmapText uses a BitmapFont to draw your text. That means that changing your text is just changing what sprites are shown on screen, which is really fast. Its downside is that if you need full Unicode support (Chinese, Japanese, Arabic, Russian, etc) you will end up with a font atlas so big that performance will start to go down again.
[PixiJS BitmapText API](https://pixijs.download/dev/docs/PIXI.BitmapText.html)
[PixiJS BitmapText API](https://pixijs.download/v7.4.2/docs/PIXI.BitmapText.html)
Tips:

* **PixiJS can create a BitmapFont on the fly from a regular font.** `BitmapFont.from(...)` will take an object similar to a TextStyle and make a font for you to use!
Expand All @@ -256,7 +256,7 @@ _Stunning effects with no effort!_

PixiJS has a stunning collection of filters and effects you can apply either to only one _DisplayObject_ or to any _Container_ and it will apply to all its children!
I won't cover **all** the filters (at the time of writing there are 37 of them!!) instead, I will show you how to use one of the pre-packaged filters and you will have to extrapolate the knowledge from there.
[You can see a demo of the filters](http://filters.pixijs.download/dev/demo/index.html) or [go directly to Github to see what package to install](https://github.com/pixijs/filters).
[You can see a demo of the filters](http://filters.pixijs.download/v7.4.2/demo/index.html) or [go directly to Github to see what package to install](https://github.com/pixijs/filters).

> Creating and using filters is so easy that I wasn't sure if I needed to make this part or not
Expand Down
4 changes: 2 additions & 2 deletions source/includes/_05-animating-stuff.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class Scene extends Container {
> Clampy sequence assets don't exist. I lied to you. You will need your own assets.
Frame-by-frame animations go with 2d games like toe and dirt. Animated sprite has got your back. (This inherits from `Sprite`)
[PixiJS AnimatedSprite API](https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html)
[PixiJS AnimatedSprite API](https://pixijs.download/v7.4.2/docs/PIXI.AnimatedSprite.html)
Tips and stuff:

* You make this by passing an array of `Texture` objects.
Expand Down Expand Up @@ -122,7 +122,7 @@ We can use this math every single frame to move an object after we give it a vel

Now that we are on board on what we need to do, let's see how to use the PixiJS Ticker.
You can create one for yourself or just use the `Ticker.shared` instance that is already created for quick use. You just attach a function you want to be called every frame with the `.add()` and that's it!
[PixiJS Ticker API](https://pixijs.download/dev/docs/PIXI.Ticker.html)
[PixiJS Ticker API](https://pixijs.download/v7.4.2/docs/PIXI.Ticker.html)
Tips and Tricks:

* If you make your own `Ticker`, remember to `start()` it.
Expand Down
6 changes: 3 additions & 3 deletions source/includes/_06-getting-interactive.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export class Scene extends Container {
```

PixiJS has a _thing_ that whenever you click or move your mouse on the screen it checks what object were you on, no matter how deep in the display list that object is, and lets it know that _a mouse_ happened.
(If curious, that _thing_ is a plugin called [Federated Events System](https://pixijs.download/dev/docs/PIXI.EventSystem.html))
(If curious, that _thing_ is a plugin called [Federated Events System](https://pixijs.download/v7.4.2/docs/PIXI.EventSystem.html))

The basic anatomy of adding an event listener to an imput is:
`yourObject.on("stringOfWhatYouWantToKnow", functionToBeCalled, contextForTheFunction)`
Expand Down Expand Up @@ -86,7 +86,7 @@ The rule of thumb is that if it has `pointer` in the name, it will catch both mo

### The event that fired

When your function gets called you will also receive a parameter, that is all the data that event produced. You can see the [full shape of the object here](https://pixijs.download/dev/docs/PIXI.FederatedPointerEvent.html).
When your function gets called you will also receive a parameter, that is all the data that event produced. You can see the [full shape of the object here](https://pixijs.download/v7.4.2/docs/PIXI.FederatedPointerEvent.html).
I will list now some of the most common properties here now:

* `event.global` This is the global (stage) position of the interaction
Expand All @@ -98,7 +98,7 @@ I will list now some of the most common properties here now:
You might have come across by the fact that if you have a function that is called exactly the same as an event (for example a `click` function) and your object is interactive, that function gets called automagically.
That was because there is a line inside the old [Interaction Manager's](https://pixijs.download/v6.5.8/docs/packages_interaction_src_InteractionManager.ts.html) that if it finds that a display object has a method with the same name as an event it calls it.

**This was removed on PixiJS' v7 new [Federated Events System](https://pixijs.download/dev/docs/PIXI.EventSystem.html)**
**This was removed on PixiJS' v7 new [Federated Events System](https://pixijs.download/v7.4.2/docs/PIXI.EventSystem.html)**

--

Expand Down
16 changes: 8 additions & 8 deletions source/includes/_10-recipes-assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
So far we have seen how to create images and sounds by downloading the asset behind them just as we need to show it to the user. While this is good enough if we want a quick way to make a proof of concept or prototype, it won't be good enough for a project release.
The old and elegant way of doing it is downloading all the assets you are going to need beforehand and storing them in some sort of cache.
However, times change and users now want everything ready **right now!** so instead of having one big load at the beginning we will aim to have the smaller download possible to make do and keep everything loading in the background and _hopefully_ when the user reaches further into the game our assets will be ready.
To this purpose, PixiJS includes [Assets](https://pixijs.download/dev/docs/PIXI.Assets.html): A system for your resource management needs. A promise-based, background-loading, webworker-using, format-detecting, juggernaut of a system.
To this purpose, PixiJS includes [Assets](https://pixijs.download/v7.4.2/docs/PIXI.Assets.html): A system for your resource management needs. A promise-based, background-loading, webworker-using, format-detecting, juggernaut of a system.

In this recipe, we are going to create one of our `Scene` to load all the files we declare in a manifest object and then I will teach you how to recover the files from the `Assets` cache.

Expand Down Expand Up @@ -257,7 +257,7 @@ To remedy this we can take a different approach: we just load the bare minimum n
Now that we downloaded and safely stored our assets in a cache... how do we use them?
The two basic components we have seen so far are `Sprite` and `Sound` and we will use them in different ways.

For _Sprites_, all our textures are stored in a [TextureCache somewhere in the PixiJS universe](https://pixijs.download/dev/docs/PIXI.utils.html#TextureCache) but all we need to know is that we can access that cache by doing `Sprite.from(...)` but instead of giving an URL we just give the name we gave our asset in the manifest file. In my example above I could do `Sprite.from("Clampy the clamp")`. (If you ever need a `Texture` object, you can get it the same way with `Texture.from(...)` just remember that _Sprites_ go on screen and _Textures_ hide inside sprites.)
For _Sprites_, all our textures are stored in a [TextureCache somewhere in the PixiJS universe](https://pixijs.download/v7.4.2/docs/PIXI.utils.html#TextureCache) but all we need to know is that we can access that cache by doing `Sprite.from(...)` but instead of giving an URL we just give the name we gave our asset in the manifest file. In my example above I could do `Sprite.from("Clampy the clamp")`. (If you ever need a `Texture` object, you can get it the same way with `Texture.from(...)` just remember that _Sprites_ go on screen and _Textures_ hide inside sprites.)

For _Sounds_, all our sounds are stored in what PixiJS Sound calls _sound library_. To access it we have to import it as `import { sound } from "@pixi/sound";`. That is `sound` with a **lowercase s**. From there you can play it by doing `sound.play("name we gave in the manifest");`.

Expand All @@ -277,11 +277,11 @@ This section will show some of the most common asset types and how to load and u
But before we start, a bit of how things will work behind the curtains: _Assets_, _Resolvers_, _Loader_, _Cache_ and _Detection_.
You might never need to know more about these, but I have to mention them.

- [Assets](https://pixijs.download/dev/docs/PIXI.Assets.html) is a static instance for `AssetsClass`. It's the entry point and coordinator of the rest of the system.
- [Resolver](https://pixijs.download/dev/docs/PIXI.Resolver.html) is a class that knows how to map assets to URLs. It also knows how to pick the best asset type for your system.
- [Loader](https://pixijs.download/dev/docs/PIXI.AssetLoader.html) is the bit that actually downloads your file. It does noting else than going to an URL and getting data from it.
- [Cache](https://pixijs.download/dev/docs/PIXI.Cache.html) stores all the related assets for a certain key.
- [Detection](https://pixijs.download/dev/docs/PIXI.FormatDetectionParser.html) is how you tell the rest of the system that you can totally handle that format of asset.
- [Assets](https://pixijs.download/v7.4.2/docs/PIXI.Assets.html) is a static instance for `AssetsClass`. It's the entry point and coordinator of the rest of the system.
- [Resolver](https://pixijs.download/v7.4.2/docs/PIXI.Resolver.html) is a class that knows how to map assets to URLs. It also knows how to pick the best asset type for your system.
- [Loader](https://pixijs.download/v7.4.2/docs/PIXI.AssetLoader.html) is the bit that actually downloads your file. It does noting else than going to an URL and getting data from it.
- [Cache](https://pixijs.download/v7.4.2/docs/PIXI.Cache.html) stores all the related assets for a certain key.
- [Detection](https://pixijs.download/v7.4.2/docs/PIXI.FormatDetectionParser.html) is how you tell the rest of the system that you can totally handle that format of asset.

### Spritesheets

Expand Down Expand Up @@ -381,4 +381,4 @@ The _Assets_ class will recognize simple text formats like `txt`, `json` or `xml
If a json file happens to be a spritesheet, the Loader will recognize it automatically and process it accordingly. No extra steps are needed!
</aside>

If you would like to parse a particular kind of file you will need to write your own _Assets plugin_. The best way is to look at the [Spritesheet](https://github.com/pixijs/pixijs/blob/dev/packages/spritesheet/src/spritesheetAsset.ts) or [BitmapFont](https://github.com/pixijs/pixijs/blob/dev/packages/text-bitmap/src/loadBitmapFont.ts) one and work from there.
If you would like to parse a particular kind of file you will need to write your own _Assets plugin_. The best way is to look at the [Spritesheet](https://github.com/pixijs/pixijs/blob/v7.4.2/packages/spritesheet/src/spritesheetAsset.ts) or [BitmapFont](https://github.com/pixijs/pixijs/blob/v7.4.2/packages/text-bitmap/src/loadBitmapFont.ts) one and work from there.
2 changes: 1 addition & 1 deletion source/includes/_99-recipes-loader-v6.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ Those events don't look exactly like the other events we saw in the [Interaction
Now that we downloaded and safely stored our assets in a cache... how do we use them?
The two basic components we have seen so far are `Sprite` and `Sound` and we will use them in different ways.

For _Sprites_, all our textures are stored in a [TextureCache somewhere in the PixiJS universe](https://pixijs.download/dev/docs/PIXI.utils.html#TextureCache) but all we need to know is that we can access that cache by doing `Sprite.from(...)` but instead of giving an URL we just give the name we gave our asset in the manifest file. In my example above I could do `Sprite.from("Clampy the clamp")`. (If you ever need a `Texture` object, you can get it the same way with `Texture.from(...)` just remember that _Sprites_ go on screen and _Textures_ hide inside sprites.)
For _Sprites_, all our textures are stored in a [TextureCache somewhere in the PixiJS universe](https://pixijs.download/v7.4.2/docs/PIXI.utils.html#TextureCache) but all we need to know is that we can access that cache by doing `Sprite.from(...)` but instead of giving an URL we just give the name we gave our asset in the manifest file. In my example above I could do `Sprite.from("Clampy the clamp")`. (If you ever need a `Texture` object, you can get it the same way with `Texture.from(...)` just remember that _Sprites_ go on screen and _Textures_ hide inside sprites.)

For _Sounds_, all our sounds are stored in what PixiJS Sound calls _sound library_. To access it we have to import it as `import { sound } from "@pixi/sound";`. That is `sound` with a **lowercase s**. From there you can play it by doing `sound.play("name we gave in the manifest");`.

Expand Down

0 comments on commit 3792494

Please sign in to comment.