Skip to content

Commit

Permalink
Fix more Japanese anchors
Browse files Browse the repository at this point in the history
  • Loading branch information
willeastcott committed Jan 30, 2024
1 parent 34dbecb commit ea2c0d4
Show file tree
Hide file tree
Showing 10 changed files with 123 additions and 123 deletions.
44 changes: 22 additions & 22 deletions docs/tutorials/real-time-multiplayer-colyseus.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,32 @@ thumb: https://avatars.githubusercontent.com/u/28384334?s=300&v=4

> *Select create game to open a new game. And click anywhere on the floor to move the object.*
## On this tutorial you will learn:
## On this tutorial you will learn: {#on-this-tutorial-you-will-learn}

- Setting up your Colyseus server
- Synchronizing the state between server and client
- Exchanging messages between client and server
- Matchmaking: how to create, join, and list available games

## Materials
## Materials {#materials}

- [PlayCanvas Project (Client-side)](https://playcanvas.com/project/859259/overview/colyseus-demo)
- [Colyseus TypeScript Project (Server-side)](https://github.com/colyseus/tutorial-playcanvas-server)

## Before you start
## Before you start {#before-you-start}

### Prior Knowledge Expected
### Prior Knowledge Expected {#prior-knowledge-expected}

- Basic PlayCanvas knowledge ([See PlayCanvas Developer Resources](https://developer.playcanvas.com/))
- Basic JavaScript/TypeScript understanding ([See TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html))
- Basic Node.js understanding ([See Introduction to Node.js](https://nodejs.dev/en/learn/))

### Software requirements
### Software requirements {#software-requirements}

- [Node.js LTS](https://nodejs.org/en/download/)
- [Visual Studio Code](https://code.visualstudio.com/download)

## Creating the Server
## Creating the Server {#creating-the-server}

We will be making a basic server, hosted locally on your computer for keeping player states. Changes will be synchronized with clients accordingly.

Expand Down Expand Up @@ -64,7 +64,7 @@ If successful, the output should look like this in your command-line:
⚔️ Listening on ws://localhost:2567
```

## Including the Colyseus JavaScript SDK
## Including the Colyseus JavaScript SDK {#including-the-colyseus-javascript-sdk}

Now we need to add the Colyseus JavaScript SDK on PlayCanvas.

Expand All @@ -86,7 +86,7 @@ https://unpkg.com/colyseus.js@^0.15.0-preview.2/dist/colyseus.js

This is going to make the `Colyseus` [JavaScript SDK](https://docs.colyseus.io/colyseus/getting-started/javascript-client/) available for our PlayCanvas scripts.

## Establishing a Client-Server Connection
## Establishing a Client-Server Connection {#establishing-a-client-server-connection}

Now, from a new PlayCanvas Script, let's instantiate our `Colyseus.Client` instance. ([see "Creating new scripts"](/user-manual/scripting/creating-new/))

Expand Down Expand Up @@ -122,7 +122,7 @@ You will be seeing the following message in your server logs, which means a clie
19U8WkmoK joined!
```

## Room State and Schema
## Room State and Schema {#room-state-and-schema}

In Colyseus, we define shared data through its `Schema` structures.

Expand Down Expand Up @@ -197,32 +197,32 @@ Also, when the client disconnects, let's remove the player from the map of playe

The state mutations we've done in the server-side **can be observed** in the client-side, and that's what we're going to do in the next section.

## Setting up the Scene for Synchronization
## Setting up the Scene for Synchronization {#setting-up-the-scene-for-synchronization}

For this demo, we need to create two objects in our Scene:

- A Plane to represent the floor
- A Capsule to represent the players, which we will clone for each new player joining the room.

### Creating the Plane
### Creating the Plane {#creating-the-plane}

Let's create a Plane with scale `8`.

![Plane](/images/tutorials/multiplayer-colyseus/plane.jpg)

### Creating the Player
### Creating the Player {#creating-the-player}

Let's create the Player capsule with scale `1`.

Make sure to uncheck the `"Enabled"` property. We will not have any Player instances enabled until we have active connections with the server.

![Player](/images/tutorials/multiplayer-colyseus/player.png)

## Listening for State Changes
## Listening for State Changes {#listening-for-state-changes}

After a connection with the room has been established, the client-side can start listening for state changes, and create a visual representation of the data in the server.

### Adding new players
### Adding new players {#adding-new-players}

As per [Room State and Schema](#room-state-and-schema) section, whenever the server accepts a new connection - the `onJoin()` method is creating a new Player instance within the state.

Expand Down Expand Up @@ -271,7 +271,7 @@ this.room.state.players.onAdd((player, sessionId) => {
// ...
```

### The "Current Player"
### The "Current Player" {#the-current-player}

You can keep a special reference to the current player object by checking the `sessionId` against the connected `room.sessionId`:

Expand All @@ -286,7 +286,7 @@ this.room.state.players.onAdd((player, sessionId) => {
});
```

### Removing disconnected players
### Removing disconnected players {#removing-disconnected-players}

When a player is removed from the state (upon `onLeave()` in the server-side), we need to remove their visual representation as well.

Expand All @@ -302,9 +302,9 @@ this.room.state.players.onRemove((player, sessionId) => {
// ...
```

## Moving the players
## Moving the players {#moving-the-players}

### Sending the new position to the server
### Sending the new position to the server {#sending-the-new-position-to-the-server}

We are going to allow the "mouse down" event; use [ray cast](/user-manual/physics/ray-casting/) to determine the exact `Vec3` position the player should move towards, and then send it as a message to the server.

Expand Down Expand Up @@ -343,7 +343,7 @@ this.app.mouse.on(pc.EVENT_MOUSEDOWN, (event) => {
});
```

### Receiving the message from the server
### Receiving the message from the server {#receiving-the-message-from-the-server}

Whenever the `"updatePosition"` message is received in the server, we're going to mutate the player that sent the message through its `sessionId`.

Expand All @@ -363,7 +363,7 @@ Whenever the `"updatePosition"` message is received in the server, we're going t
// ...
```

### Updating Player's visual representation
### Updating Player's visual representation {#updating-players-visual-representation}

Having the mutation on the server, we can detect it on the client-side via `player.onChange()`, or `player.listen()`.

Expand All @@ -389,7 +389,7 @@ this.room.state.players.onAdd((player, sessionId) => {

> Read [more about Schema callbacks](https://docs.colyseus.io/colyseus/state/schema/#client-side)
## Extra: Monitoring Rooms and Connections
## Extra: Monitoring Rooms and Connections {#extra-monitoring-rooms-and-connections}

Colyseus comes with an optional monitoring panel that can be helpful during the development of your game.

Expand All @@ -401,6 +401,6 @@ You can see and interact with all spawned rooms and active client connections th

> See [more information about the monitor panel](https://docs.colyseus.io/colyseus/tools/monitor/).
## More
## More {#more}

We hope you found this tutorial useful, if you'd like to learn more about Colyseus please have a look at the [Colyseus documentation](https://docs.colyseus.io/), and join the [Colyseus Discord community](https://discord.gg/RY8rRS7).
18 changes: 9 additions & 9 deletions docs/user-manual/animation/anim-state-graph-assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ When selecting an animstategraph asset in the editors asset panel, you’ll open

Within this view you can edit your animation state graph. The following sections will highlight how different elements of the animstategraph asset can be used to define specific animation behavior.

## States
## States {#states}

In essence, states are used to specify which animations should play at a given point in time. An anim state graph can only be in one of these states at a given time.

There are four types of states present in state graphs. Animation states, along with the START state, END state and ANY state. Only animation states can be created and deleted by the user and only these will be linked to animation assets. The other states are used to control the flow through the state machine.

### Animation States
### Animation States {#animation-states}

![State][7]

Expand All @@ -33,7 +33,7 @@ Animation states define a playable animation such as ‘Idle’, ‘Jump’ or
| Speed | The playback speed for animations that are linked to this state. |
| Loop | Whether animations linked to this state should loop during playback. If set to false the animation will pause on its last keyframe until this state is exited. |

### START state
### START state {#start-state}

![Start State][8]

Expand All @@ -43,21 +43,21 @@ The START state is the entry point of every state graph. When an anim component

It is not possible to create any other transitions to or from the START state. It can only be entered again by transitioning to the END state.

### END state
### END state {#end-state}

![End State][10]

The end state marks an exit out of the current state graph. If your animation state is set up to transition to the END state, the system will move directly to the default animation state which is connected to the START state. This is useful to create cyclical flows through the graph while still laying out your graph in a linear fashion. It is not possible to create transitions from the END state to any other state. It will always transition directly to the START state.

### ANY state
### ANY state {#any-state}

![Any State][9]

This state is used to create transitions which can be activated while the system is currently in any of the other animation states. Any transitions that trigger from this state will blend as if they had been connected directly from the currently active animation state. You can create transitions from the ANY state but not to it.

This is useful to set up transitions which you want to activate, no matter which state you’re currently in. For example you could have a jump state which should be reachable from both an idle and walk state. Instead of setting up transitions from both the idle and walk states to the jump state, a transition can be set up between the ANY state and the jump state.

### Transitions
### Transitions {#transitions}

Transitions define how the anim state graph can move from one animation state to another. They can be created by right clicking an animation state and selecting `Add transition` from the context menu.

Expand All @@ -74,7 +74,7 @@ The available transition variables are:

It is possible to create multiple transitions between two animation states, which have different values and conditions set. The priority of these transitions can be reordered in the transition inspector after selecting a transition's arrow in the graph. The priority order determines which transition will be used by the state graph if multiple transitions have their conditions met.

### Parameters
### Parameters {#parameters}

The parameters of an anim state graph are variables which are used to control the flow of animations during runtime. These variables can be accessed via scripts and set to new values at any time. They are then the way in which users can control the behavior of an entity's animation during its lifecycle.

Expand All @@ -98,7 +98,7 @@ Each condition consists of a conditional statement which compares the current va

Can be used in the transition between the Idle and Jump animation states to ensure that a character only jumps when the ‘Jump’ parameter has been set to true via a script.

### Layers
### Layers {#layers}

So far, animstategraph assets have been discussed in the context of editing a single animation state graph. It may sometimes be necessary however to have the animations of a single model driven by multiple separate state graphs, each with their own defined behavior. An example could be animating a main character's movement and locomotion on a single layer, while animating its facial expressions on a separate layer that’s driven by its own state graph and parameters.

Expand All @@ -110,7 +110,7 @@ It is then possible to switch to editing this layer by selecting it from the lay

![Select Layer][6]

### Layer Blending
### Layer Blending {#layer-blending}

By default, layers animate a model in the order that they’re created in the layers panel. Any animation values they set on a model's bones will be overwritten by subsequent layers. If instead you wish to blend the animation values of the layers together, you can set the `blend type` of your layers to `Additive` rather than the default `Override`:

Expand Down
34 changes: 17 additions & 17 deletions docs/user-manual/assets/import-pipeline/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ Some assets are uploaded in source format and need to be converted into a "targe

Some assets don't need to be imported before they can be used. For example a PNG image can be used as a texture immediately.

## Asset Tasks
## Asset Tasks {#asset-tasks}

When a source asset is uploaded, PlayCanvas starts an Asset Task to perform this import process on our server.

There are a variety of options available to tune the behavior of the import pipeline to suit your needs.

<img loading="lazy" src="/images/user-manual/assets/import-pipeline/asset-tasks.png" width="480" />

### Search related assets
### Search related assets {#search-related-assets}

When you update an source asset by uploading a new version of the file. There are two possible behaviors for how we update the target assets that are created by the import pipeline.

Expand All @@ -24,69 +24,69 @@ When you update an source asset by uploading a new version of the file. There ar

So, if you leave this enabled, you are able to organize your source and target assets into folders and be sure that when you update a source assets it will update all related assets.

### Assets default to preload
### Assets default to preload {#assets-default-to-preload}

Newly created assets will automatically be set to [preload][2] or not depending on whether this option is enabled or not. The exception to this are JavaScript script files which will always be set to preloaded when created.

## Texture Import Settings
## Texture Import Settings {#texture-import-settings}

These options only affect the importing of images and textures.

### Texture POT (Power of Two)
### Texture POT (Power of Two) {#texture-pot-power-of-two}

When this option is enabled textures that are not a power of two will be converted to the nearest power of two resolution when they are imported.

### Create Atlases
### Create Atlases {#create-atlases}

Images that are uploaded will be imported as a texture atlas instead of a normal texture asset. This is a useful time saver when uploading many spritesheets or UI assets.

## Model Import Settings
## Model Import Settings {#model-import-settings}

These options only affect the importing of model or scene files (e.g. FBX, Collada, obj, etc)

### Preserve material mappings
### Preserve material mappings {#preserve-material-mappings}

When a model file is updated or reimported, the Editor will try to preserve the material mappings that were set on it.

### Overwrite Models
### Overwrite Models {#overwrite-models}

When a model file is updated or reimported this option determines whether or not the target model file is overwritten. The default behavior is to overwrite with the new model.

### Overwrite Animations
### Overwrite Animations {#overwrite-animations}

When a model file is updated or reimported this option determines whether or not a animations created from the model are overwritten. The default behavior is to overwrite with the new animations.

### Overwrite Materials
### Overwrite Materials {#overwrite-materials}

When a model file is updated or reimported this option determines whether or not materials created from the model are overwritten. The default behavior is to leave existing materials.

### Overwrite Textures
### Overwrite Textures {#overwrite-textures}

When a model file is updated or reimported this option determines whether or not textures created from the model are overwritten. The default behavior is to overwrite with the new textures.

### Convert to GLB
### Convert to GLB {#convert-to-glb}

Enabled by default on new projects, imported models and animations will create GLB model and animation assets instead of the older, deprecated JSON format.

### Import Hierarchy
### Import Hierarchy {#import-hierarchy}

Only available if using [Convert to GLB](#convert-to-glb) option. When a model file is imported, a template asset is created that contains the full hierarchy of the model as entities allowing to you to manipulate them directly in the Editor. See more information about this feature [here][3].

### Mesh Compression
### Mesh Compression {#mesh-compression}

Only available if using [Convert to GLB](#convert-to-glb) option. Setting this to a compression format will automatically compress mesh data when importing or re-importing model files. This can drastically reduce the size of GLB files at the cost of some runtime decompression cost.

If using Draco compression, remember to import the Draco WASM module into the project otherwise the models will not load.

<img loading="lazy" src="/images/user-manual/assets/import-pipeline/draco-import-button.png" width="480" />

### Create FBX Folder
### Create FBX Folder {#create-fbx-folder}

When importing a model file (e.g a GLB or FBX), the Editor will create a folder for the assets created by the import such as render, template and material assets.

If there is already a Model (Source) file in the current folder or a folder with the same name as the file being imported, it will overwrite the existing assets instead of creating a new folder.

## Animation Import Settings
## Animation Import Settings {#animation-import-settings}

Please refer to the [Animation section][4] for more details.

Expand Down
8 changes: 4 additions & 4 deletions docs/user-manual/assets/textures/texture-compression.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Here is another example of the PlayCanvas cube [with Basis (ETC mode)][2] and [w

<a href="/images/user-manual/assets/textures/texture-compression/basis-vs-no-compression-cube.png" target="_blank"><img loading="lazy" src="/images/user-manual/assets/textures/texture-compression/basis-vs-no-compression-cube-thumb.jpg" alt="PlayCanvas cube compression comparison" /></a>

## Using Basis Texture Compression
## Using Basis Texture Compression {#using-basis-texture-compression}

Once the texture has been imported into the Editor, select it and scroll down in the inspector to find the Compression section.

Expand All @@ -55,14 +55,14 @@ If you would no longer want to use Basis, remove Basis compression from all text

<img loading="lazy" src="/images/user-manual/assets/textures/texture-compression/delete-basis-library.png" alt="Delete Basis Module" width="400" />

## Basis Limitations
## Basis Limitations {#basis-limitations}

There are some limitations of Basis texture compression in PlayCanvas.

1. The PVR format only supports textures that have dimensions that are both square (same width and height) and power of two (e.g. 256, 512, 1024 and so on). Older iOS devices (with an A6 SoC or lower like the iPhone 5 and 5C) and older iOS versions (13.7 and lower) only support PVR. A Basis texture that is non-square or non-power of two cannot be transcoded to PVR format but will instead use a 16-bit 565 pixel format. It will still display correctly, although may occupy more VRAM.
2. The maximum texture dimensions supported for Basis compression are 4096x4096. Textures larger than this would take an inordinate amount of time to compress so this is disabled.

## Legacy Texture Compression
## Legacy Texture Compression {#legacy-texture-compression}

We strongly recommend using Basis compression where possible as it requires a single texture file to cover all platforms and it is also a much smaller file compared to the legacy formats. Our tests show Basis to be ~50% smaller with minimal difference in quality.

Expand All @@ -87,7 +87,7 @@ To remove a or several formats:

<img loading="lazy" src="/images/user-manual/assets/textures/texture-compression/disable-legacy-texture-compression.gif" alt="Disabling Legacy Texture Compression" width="400" />

## Migrating from Legacy to Basis Texture Compression
## Migrating from Legacy to Basis Texture Compression {#migrating-from-legacy-to-basis-texture-compression}

If you have a project that is already using the Legacy Texture Compression formats and wish to use Basis, do the following:

Expand Down
Loading

0 comments on commit ea2c0d4

Please sign in to comment.