diff --git a/WEB_RUNTIMES.md b/WEB_RUNTIMES.md index 08c58765..663a9bbe 100644 --- a/WEB_RUNTIMES.md +++ b/WEB_RUNTIMES.md @@ -6,7 +6,7 @@ See more context below on which package you may want to install in your web appl This repository provides various packages which are published to npm. For simple usage, we recommend starting with `@rive-app/canvas` (more on that below). -**Note:** The high-level API and the logic for creating a Rive instance in your script remains the same for all of the non-advanced packages. That means if you decide later on you want to switch from a backing `CanvasRenderingContext2D` context to `WebGL`, you can switch from for instance, `@rive-app/canvas` to `@rive-app/webgl` without any breaking changes needed to your existing code. +**Note:** The high-level API and the logic for creating a Rive instance in your script remains the same for all of the non-advanced packages. That means if you decide later on you want to switch from a backing `CanvasRenderingContext2D` context to `WebGL`, you can switch from for instance, `@rive-app/canvas` to `@rive-app/webgl2` without any breaking changes needed to your existing code. ### **(Recommended)** @rive-app/canvas ![npm](https://img.shields.io/npm/v/@rive-app/canvas) @@ -21,10 +21,10 @@ An easy to use high-level Rive API using the [CanvasRenderingContext2D](https:// - Support for simple vector graphics animations, raster, and mesh deformations - Requests the backing web assembly code for you as a network request -### @rive-app/webgl ![npm](https://img.shields.io/npm/v/@rive-app/webgl) +### @rive-app/webgl2 ![npm](https://img.shields.io/npm/v/@rive-app/webgl2) ``` -npm install @rive-app/webgl +npm install @rive-app/webgl2 ``` An easy-to-use high-level Rive API using the WebGL renderer. This runtime will eventually support some newer advanced rendering features which may not be available to the Canvas renderers. Some benefits of this package: @@ -52,13 +52,13 @@ A low-level Rive API using the [CanvasRenderingContext2D](https://developer.mozi Want to see an example? Check out this [CodeSandbox](https://codesandbox.io/s/rive-canvas-advanced-api-centaur-example-exh2os) for some inspiration! -### @rive-app/webgl-advanced ![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced) +### @rive-app/webgl2-advanced ![npm](https://img.shields.io/npm/v/@rive-app/webgl2-advanced) ``` -npm install @rive-app/webgl-advanced +npm install @rive-app/webgl2-advanced ``` -A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) renderer. It has the same benefits as the regular `@rive-app/webgl` package plus: +A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) renderer. It has the same benefits as the regular `@rive-app/webgl2` package plus: - Full control over the update and render loop. - Allows for rendering multiple Rive artboards to a single canvas. @@ -67,13 +67,11 @@ A low-level Rive API using the [WebGL](https://developer.mozilla.org/en-US/docs/ ## Single Versions -Each of the above NPM packages includes the `rive.wasm` file in the bundle that powers the Rive render loop. In the high-level APIs (`@rive-app/canvas` and `@rive-app/webgl`), the runtime requests this for you so you don't have to, as opposed to their `-advanced` counterpart packages. +Each of the above NPM packages includes the `rive.wasm` file in the bundle that powers the Rive render loop. In the high-level APIs (`@rive-app/canvas` and `@rive-app/webgl2`), the runtime requests this for you so you don't have to, as opposed to their `-advanced` counterpart packages. We also have alternative versions of each of the above packages on NPM that have the WASM encoded in the JS bundle. This means you won't have to make a network request for the WASM that powers the Rive animations, as it's all in one main JS file. - [@rive-app/canvas-single](https://www.npmjs.com/package/@rive-app/canvas-single) - [@rive-app/canvas-advanced-single](https://www.npmjs.com/package/@rive-app/canvas-advanced-single) -- [@rive-app/webgl-single](https://www.npmjs.com/package/@rive-app/webgl-single) -- [@rive-app/webgl-advanced-single](https://www.npmjs.com/package/@rive-app/webgl-advanced-single) While there is no request for WASM file here, the JS bundle will be larger. The non-single versions may cache better on your web applications, as the WASM gets loaded from the same CDN source if loaded from multiple pages. diff --git a/js/npm/webgl/README.md b/js/npm/webgl/README.md index c6134371..a1591ea0 100644 --- a/js/npm/webgl/README.md +++ b/js/npm/webgl/README.md @@ -1,6 +1,13 @@ +# 🚨 Deprecated Package Notice + +**This package, `@rive-app/webgl`, is deprecated and will no longer receive updates or maintenance.** + +We highly recommend switching to the newer package for improved features, performance, and support: +👉 **[@rive-app/webgl2](https://www.npmjs.com/package/@rive-app/webgl2)** + ![npm](https://img.shields.io/npm/v/@rive-app/webgl) -# Rive +# Rive High-level Rive API using WebGL. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details. ## WebGL diff --git a/js/npm/webgl_advanced/README.md b/js/npm/webgl_advanced/README.md index 153c38da..ef0d1058 100644 --- a/js/npm/webgl_advanced/README.md +++ b/js/npm/webgl_advanced/README.md @@ -1,6 +1,13 @@ +# 🚨 Deprecated Package Notice + +**This package, `@rive-app/webgl-advanced`, is deprecated and will no longer receive updates or maintenance.** + +We highly recommend switching to the newer package for improved features, performance, and support: +👉 **[@rive-app/webgl2-advanced](https://www.npmjs.com/package/@rive-app/webgl2-advanced)** + ![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced) -# Rive +# Rive Low-level Rive API using WebGL. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details. ## WebGL Advanced diff --git a/js/npm/webgl_advanced_single/README.md b/js/npm/webgl_advanced_single/README.md index e4607439..17073bc6 100644 --- a/js/npm/webgl_advanced_single/README.md +++ b/js/npm/webgl_advanced_single/README.md @@ -1,6 +1,13 @@ +# 🚨 Deprecated Package Notice + +**This package, `@rive-app/webgl-advanced-single`, is deprecated and will no longer receive updates or maintenance.** + +We highly recommend switching to the newer package for improved features, performance, and support: +👉 **[@rive-app/webgl2-advanced](https://www.npmjs.com/package/@rive-app/webgl2-advanced)** + ![npm](https://img.shields.io/npm/v/@rive-app/webgl-advanced-single) -# Rive +# Rive Low-level Rive API using WebGL and inline WASM. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details. ## WebGL Advanced Single diff --git a/js/npm/webgl_single/README.md b/js/npm/webgl_single/README.md index ec5c6b7a..9288860a 100644 --- a/js/npm/webgl_single/README.md +++ b/js/npm/webgl_single/README.md @@ -1,6 +1,13 @@ +# 🚨 Deprecated Package Notice + +**This package, `@rive-app/webgl-single`, is deprecated and will no longer receive updates or maintenance.** + +We highly recommend switching to the newer package for improved features, performance, and support: +👉 **[@rive-app/webgl2](https://www.npmjs.com/package/@rive-app/webgl2)** + ![npm](https://img.shields.io/npm/v/@rive-app/webgl-single) -# Rive +# Rive High-level Rive API using WebGL and inline WASM. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details. ## WebGL Single diff --git a/js/src/rive.ts b/js/src/rive.ts index 565153ac..6699927c 100644 --- a/js/src/rive.ts +++ b/js/src/rive.ts @@ -2251,7 +2251,10 @@ export class Rive { }); return; } - this.animator.stop(animationNames); + // If there is no artboard, this.animator will be undefined + if (this.animator) { + this.animator.stop(animationNames); + } if (this.eventCleanup) { this.eventCleanup(); }