Technical Overview of SAR Creator for Interactive Scene Development

SAR Creator is a TypeScript‑based high‑performance, lightweight interactive solution that supports Web and ByteDance’s internal cross‑platform framework, used in various interactive business scenarios such as Douyin Spring Festival events, live gifts, and UG activities.

Workflow

Designers can use the SAR Creator Launcher to manage multiple editor versions, create new projects, quickly start them, and view update information. Assets created in Photoshop, Blender, or Spine are imported into SAR Creator, combined into scenes, and exported as prefabs or asset packages for developers.

Animations (Lottie, Spine, frame, model, composite, frame‑difference) can be previewed directly in the editor, ensuring they meet expectations before hand‑off.

Exported prefabs are packaged into a compressed asset bundle, which developers can import into the game directory with a right‑click.

Key Features

Canvas Adaptation offers FixedWidth, FixedHeight, and Auto strategies to ensure visual consistency across devices.

2D & 3D Mixed Development allows simultaneous placement of 2D UI elements and 3D models, with control over hierarchy, rendering order, lighting, and camera effects, dramatically reducing UI development time.

Bundle Splitting enables grouping and optimization of resources; three merge types (none, merge dependencies, full merge) help balance request count and load size.

Image Grading generates normal, medium, and low resolution assets based on device performance, while noting that image‑based animations (spine, sprite sheets) must disable grading to avoid playback issues.

Compressed Textures use GPU‑native formats (ETC, ASTC) with fixed flipY = false and generateMipmaps = false, improving memory usage at the cost of larger package size for fallback textures.

Transparent Pixel Expansion adds a white border or fully expands transparent pixels to prevent black edges when linear filtering is used, though it may increase image file size.

Engineering Configuration

The main configuration file sar.config.js defines the project root and preview settings. Example:

const path = require('path');
module.exports = {
  projectRoot: path.resolve(__dirname, 'game'),
  previewConfig: {
    previewDevtool: true,
    resolve: {
      alias: {
        '@lottery': path.resolve(__dirname, './')
      }
    }
  }
};

Bundle sub‑package strategies are defined in lotterySarConfig.subPackages , allowing exclusion, combination rules, preload flags, and priority settings.

const lotterySarConfig = {
  subPackages: {
    excludeBundles: ['test'],
    combineBundleRules: [
      { channelName: 'pitaya-lottery-game-2', test: [/mascot/] },
      { channelName: 'pitaya-lottery-game', test: [/main-scene/, /resources/], preload: true, preloadPriority: 96 }
    ]
  }
};

Inline configuration merges many JSON files into a binary to reduce request count, with size limits per group.

ejectOptions: {
  disableGenConfigWhenInline: true,
  groupConfig: {
    groupPackingSizeLimitBundleConfig: { mascot: 400, resources: 400 }
  },
  inlineConfig: { 'main-scene': true, resources: true, mascot: true }
}

Preload configuration generates a JSON manifest that lists assets (images, groups) with memory‑cache flags, URLs, sizes, and priorities, enabling the engine to load critical resources before the container opens.

Development Practices

Scripts are written in TypeScript and registered via @ScriptUtil.Register('NewScript') . The SAR Creator script lifecycle includes onAwake, onDestroy, onPause, onResume, onStart, onUpdate, and onLateUpdate, with onStart, onUpdate, and onResume being the most commonly used.

// newscript.ts
import { Script, ScriptUtil } from '@sar-creator/toolkit/engine/core';
@ScriptUtil.Register('NewScript')
export default class NewScript extends Script {
  onStart() {
    const scene = this.world.getEntitiesByName('Scene')[0];
    if (scene) {
      // TODO: implement logic
    }
  }
}

Prefabs are generated by dragging nodes from the hierarchy to the asset panel, storing node data and dependencies. They can be loaded dynamically via the asset manager:

const { bundle, error: bundleError } = await this.world.assetManager.loadBundle('resources');
if (!bundle || bundleError) throw bundleError;
const { asset, error: prefabError } = await bundle.load
(`prefabs/fireworks/${prefabName}.prefab`);
if (!asset?.get?.() || prefabError) throw prefabError;
const entity = asset.get() as Entity;

Textures can be loaded directly by appending /index.texture to the path:

const { asset, error: textureError } = await bundle.load
('texture/lamp/rect.png/index.texture');
if (!asset?.get?.() || textureError) throw textureError;
const texture = asset.get() as Texture;

Future Outlook

Since its inception, SAR Creator has released three major versions (1.0, 1.1, 1.2), adding script configuration, bundle splitting, performance optimizations, animation editor, VFX particle system, launcher, multi‑language support, material grouping, and asset preview panels. 2024 plans focus on engine performance, editor usability, and expanding animation editing capabilities.

Team Introduction

The article is authored by the Douyin Front‑End Architecture – Interactive Experience Technology Team, responsible for SAR Creator, Simple Engine, and AnnieX interactive container, collaborating with Douyin Front‑End Interactive Creation, cross‑platform framework, open‑platform mini‑game, and user‑growth teams.

Next Issue Preview

The next topic will be "Rendering Technology and Practice", showcasing multiple rendering methods to meet visual quality and performance requirements.