Skip to main content

TN7003: Resource Management

Introduction​

The Reactive System's resource management system provides:

  • Responsive resource loading: Developers can configure the application to automatically select resources based on language, platform (e.g. Windows or Android), and interaction methods (e.g. touch screen or mouse).

  • Optimized resource loading: We offer methods for optimizing resource loading on web and mobile platforms, using a priority queue to enhance the user experience.

  • Resource conversion: Automatically create atlas images and convert formats for compatibility.

  • Resource bundling: Create multiple profiles for different deployment needs. For example, when creating a web and mobile app simultaneously, resources can be published to different CDNs. The website may not require all resources, but the mobile app may benefit from having all resources bundled in the package for better loading performance.

Client side resource management​

Data flow​

  • @recative/definition: This package defines the metadata for each resource file. Developers can manually write definitions for each file, but it is recommended to use Recative Studio to generate them for a more user-friendly interface and ease of management for larger sets of files.

  • @recative/client-sdk: If using Recative Studio to generate configurations, this package can utilize the output and handle data fetching and decoding tasks.

  • @recative/act-player: If using @recative/client-sdk, the player is automatically created. Alternatively, developers can manually pass resource definitions to the player, which acts as a conduit to the @recative/core-manager for resource management.

  • @recative/core-manager: This layer is responsible for managing the selection of resources.

Resource selection​

If the developer required a resource group, like a texture. The resource will be selected with a weighted score. Recative System will pick the resource with the maximum score as the result resource file.

Such tasks is finished by the @recative/smart-resource

There are three necessary elements for the resource selection task:

  • Selector: A string with colon, the string before the colon is the group name and the string after the colon is the value, here is an example:

    category:image
    ~~~~~~~~ ~~~~~
    Group    Value

  • Environmental variable configurations: This is the detailed config of users' devices. If you are using the API provided by @recative/core-manager, these variables would be specified by the EnvVariableManager with the following keys:

    • lang: The language of users' devices.

    • device: The input device is a mouse or a touch screen.

    • screen: The screen size is small, medium or large.

Configuration Generation​

If developers decide to manage their resource files with the Recative Studio, the configuration will be managed automatically. By importing the resource will be processed by various extensions:

  • @recative/extension-av: Splits audio and video files into different channels for the video playback system provided by the Recative System. This improves consistency across all major platforms. The audio file will be converted to fix any possible compatibility issues.
  • @recative/atlas: Analyzes the dimensions of textures and packs them into an atlas texture to save memory and improve the stability of the application on mobile platforms.
  • @recative/extension-audio-backends: Provides options on the interface that guide the audio system to play audio files in a streamed way even when using the Web Audio API.
  • @recative/extension-crowdin: Provides scripts for synchronizing translation files from the Crowdin platform. These files can be used for internationalization purposes.
info

Although there is currently no way for users of the Recative Studio to add third-party extensions, developers can create a pull request to the code repository and discuss their desired extension with the Recative team.

This way, the team can review the proposed solution and potentially implement it in the future.

API Usage​

Video​

The official implementation of the Video component in the Recative Studio requires that the audio and video channels be split into two separate files. The category tag must be set to video and audio, respectively, for each file. This means that the group must contain two files, one with the category:audio tag and the other with the category:video tag in its tags field. This is to ensure that the correct files are used for the video and audio channels during playback.

Interactive program​

For developers who is developing your program with PIXI.js, here is a component provided by the @recative/ap-core, here is an example:

import { SmartSprite } from '@recative/ap-core';

const MyComponent = () => {
  const nameSprite = new SmartSprite({ label: YOUR_RESOURCE_LABEL });

  nameSprite.anchor.set(0.5);
  nameSprite.position.set(1082, 174 + i * 80);

  // It is a general PIXI component, so you can add it to some container.
  // someContainer.addChild(nameSprite);
};

Develop your own interface component​

The ResourceManager provided by episodeCore contains methods that allow developers to manually select resources from the episode configuration. here are the example:

const matchedResource = props.core
  .getEpisodeData()
  ?.episodeData.resources.getResourceByQuery(
    YOUR_RESOURCE_LABEL,
    'label',
    {
      category: 'subtitle',
      lang: 'en',
    },
    {
      category: 1e4,
      lang: 1,
    }
  );

Please checkout the official implementation for more detail.