feat:SpriteAtlas Adaptation Editor Workflow (#461)

* feat:SpriteAtlas Adaptation Editor Workflow
galacean · Aug 31, 2021 · df843e8 · df843e8
1 parent b1ff2ce
commit df843e8
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 17 deletions.
diff --git a/packages/core/src/2d/atlas/types.ts b/packages/core/src/2d/atlas/types.ts
@@ -21,6 +21,8 @@ export interface AtlasConfig {
  * The original data type of each sprite.
  */
 export interface AtlasSprite {
+  /** @internal temp solution. */
+  id: number;
   /** The name the sprite. */
   name: string;
   /** Whether to rotate 90 degrees clockwise. */

diff --git a/packages/core/src/2d/sprite/Sprite.ts b/packages/core/src/2d/sprite/Sprite.ts
@@ -20,6 +20,8 @@ export class Sprite extends RefObject {
   _bounds: BoundingBox = new BoundingBox();
   /** @internal */
   _triangles: number[];
+  /** @internal temp solution. */
+  _assetID: number;
 
   private _pixelsPerUnit: number;
   private _texture: Texture2D = null;

diff --git a/packages/loader/src/SpriteAtlasLoader.ts b/packages/loader/src/SpriteAtlasLoader.ts
@@ -33,12 +33,12 @@ class SpriteAtlasLoader extends Loader<SpriteAtlas> {
             )
           ).then((imgs) => {
             const { engine } = resourceManager;
-            // Generate a SpriteAtlas object
+            // Generate a SpriteAtlas object.
             const tempRect = new Rect();
             const tempVect2 = new Vector2();
             const spriteAtlas = new SpriteAtlas(engine);
             for (let i = 0; i < atlasItemsLen; i++) {
-              // Generate Texture2D according to configuration
+              // Generate Texture2D according to configuration.
               const originalImg = imgs[i];
               const { width, height } = originalImg;
               const texture = new Texture2D(engine, width, height, format);
@@ -51,7 +51,7 @@ class SpriteAtlasLoader extends Loader<SpriteAtlas> {
               const sourceHeightReciprocal = 1.0 / height;
               for (let j = sprites.length - 1; j >= 0; j--) {
                 const atlasSprite = sprites[j];
-                const { region, pivot, atlasRegionOffset, atlasRegion } = atlasSprite;
+                const { region, pivot, atlasRegionOffset, atlasRegion, id } = atlasSprite;
                 const sprite = new Sprite(
                   engine,
                   texture,
@@ -84,7 +84,11 @@ class SpriteAtlasLoader extends Loader<SpriteAtlas> {
                     offsetBottom * originalHReciprocal
                   );
                 }
-                /** @ts-ignore */
+                if (id !== undefined) {
+                  // @ts-ignore
+                  sprite._assetID = id;
+                }
+                // @ts-ignore
                 spriteAtlas._addSprite(sprite);
               }
             }

diff --git a/packages/loader/src/scene-loader/ResourceManager.ts b/packages/loader/src/scene-loader/ResourceManager.ts
@@ -16,6 +16,7 @@ import {
   AnimatorControllerResource,
   AnimationClipResource
 } from "./resources";
+import { SpriteAtlasResource } from "./resources/SpriteAtlasResource";
 import { AssetConfig } from "./types";
 
 export const RESOURCE_CLASS = {
@@ -30,6 +31,7 @@ export const RESOURCE_CLASS = {
   BlinnPhongMaterial: BlinnPhongMaterialResource,
   base: BaseResource,
   sprite: SpriteResource,
+  SpriteAtlas: SpriteAtlasResource,
   animatorController: AnimatorControllerResource,
   animationClip: AnimationClipResource
 };

diff --git a/packages/loader/src/scene-loader/resources/SpriteAtlasResource.ts b/packages/loader/src/scene-loader/resources/SpriteAtlasResource.ts
@@ -0,0 +1,61 @@
+import { AssetType, ResourceManager, SpriteAtlas } from "@oasis-engine/core";
+import { AssetConfig } from "../types";
+import { getAllGetters } from "../utils";
+import { SchemaResource } from "./SchemaResource";
+import { SpriteResource } from "./SpriteResource";
+
+export class SpriteAtlasResource extends SchemaResource {
+  static defaultAtlas: SpriteAtlas;
+
+  load(resourceManager: ResourceManager, assetConfig: AssetConfig): Promise<SpriteAtlasResource> {
+    return new Promise((resolve) => {
+      this.setMeta();
+      if (assetConfig.source) {
+        resourceManager
+          .load<SpriteAtlas>({
+            url: assetConfig.source,
+            type: AssetType.SpriteAtlas
+          })
+          .then((spriteAtlas) => {
+            this._resource = spriteAtlas;
+            const { sprites } = spriteAtlas;
+            const schemaResourceManager = this.resourceManager;
+            for (let index = sprites.length - 1; index >= 0; index--) {
+              const sprite = sprites[index];
+              const spriteResource = new SpriteResource(schemaResourceManager, sprite);
+              // @ts-ignore
+              const assetID = sprite._assetID;
+              // @ts-ignore
+              schemaResourceManager.maxId = Math.max(assetID, schemaResourceManager.maxId);
+              // @ts-ignore
+              schemaResourceManager.resourceMap[assetID] = spriteResource;
+              // @ts-ignore
+              schemaResourceManager.resourceIdMap.set(spriteResource, "" + assetID);
+            }
+            resolve(this);
+          });
+      } else {
+        if (!SpriteAtlasResource.defaultAtlas) {
+          SpriteAtlasResource.defaultAtlas = new SpriteAtlas(resourceManager.engine);
+        }
+        this._resource = SpriteAtlasResource.defaultAtlas;
+        resolve(this);
+      }
+    });
+  }
+
+  setMeta() {
+    if (this.resource) {
+      this.meta.name = this.resource.name;
+    }
+  }
+
+  getProps() {
+    const result = {};
+    const props = getAllGetters(this.resource);
+    props.forEach((prop) => (result[prop] = this.resource[prop]));
+    return result;
+  }
+
+  update() {}
+}
diff --git a/packages/loader/src/scene-loader/resources/SpriteResource.ts b/packages/loader/src/scene-loader/resources/SpriteResource.ts
@@ -127,21 +127,22 @@ export class SpriteResource extends SchemaResource {
 
   bind() {
     const resource = this._resource;
-    Object.keys(this.configProps).forEach((attr) => {
-      const value = this.configProps[attr];
-      if (isAsset(value)) {
-        const textureResource = this.resourceManager.get(value.id);
-        if (textureResource && textureResource instanceof TextureResource) {
-          resource[attr] = textureResource.resource;
-          this._attachedResources.push(textureResource);
+    this.configProps &&
+      Object.keys(this.configProps).forEach((attr) => {
+        const value = this.configProps[attr];
+        if (isAsset(value)) {
+          const textureResource = this.resourceManager.get(value.id);
+          if (textureResource && textureResource instanceof TextureResource) {
+            resource[attr] = textureResource.resource;
+            this._attachedResources.push(textureResource);
+          } else {
+            resource[attr] = null;
+            Logger.warn(`SpriteResource: ${this.meta.name} can't find asset "${attr}", which id is: ${value.id}`);
+          }
         } else {
-          resource[attr] = null;
-          Logger.warn(`SpriteResource: ${this.meta.name} can't find asset "${attr}", which id is: ${value.id}`);
+          resource[attr] = value;
         }
-      } else {
-        resource[attr] = value;
-      }
-    });
+      });
   }
 }