fix: sprite filters animation

avg-plus · Aug 15, 2020 · 1bd2ca4 · 1bd2ca4
1 parent 8516d69
commit 1bd2ca4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 54 deletions.
diff --git a/src/engine/core/graphics/filters/filter-base.ts b/src/engine/core/graphics/filters/filter-base.ts
@@ -1,2 +1,7 @@
+import { Sprite } from "../sprite";
+
 export class FilterBase {
+  public instance(parent?: Sprite, mapFile?: string): PIXI.Filter {
+    return null;
+  }
 }
diff --git a/src/engine/core/graphics/filters/zoom-blur.ts b/src/engine/core/graphics/filters/zoom-blur.ts
@@ -6,7 +6,7 @@ class ZoomBlurFilter extends FilterBase {
   name: "ZoomBlurFilter";
 
   public instance() {
-    return new ExtraFilters.ZoomBlurFilter();
+    return new ExtraFilters.ZoomBlurFilter(0);
   }
 
   public validate(folder) {

diff --git a/src/engine/core/graphics/scene.ts b/src/engine/core/graphics/scene.ts
@@ -68,8 +68,6 @@ export class Scene {
         const xRadio = this.renderer.width / sprite.texture.width;
         const yRadio = this.renderer.height / sprite.texture.height;
 
-        sprite.filters = sprite.spriteFilters.getFilterList();
-
         // 拉伸图像
         switch (sprite.resizeMode) {
           case ResizeMode.Stretch: {

diff --git a/src/engine/core/graphics/sprite-animate-director.ts b/src/engine/core/graphics/sprite-animate-director.ts
@@ -22,8 +22,7 @@ class SpriteMacroFrame extends MacroFrame {
   filters?: SpriteFilter[] = [];
 }
 
-class CSSMacroFrame extends MacroFrame {
-}
+class CSSMacroFrame extends MacroFrame {}
 
 class CameraMacroFrame extends MacroFrame {
   x: number = 0;
@@ -99,7 +98,7 @@ export class SpriteAnimateDirector {
       timeline = this.animateHTMLElement(element, macroObject);
     }
 
-    timeline.eventCallback("onUpdate", () => {
+    timeline.eventCallback("onUpdate", e => {
       if (macroObject.onProgress) {
         macroObject.onProgress(timeline.totalProgress());
       }
@@ -175,18 +174,18 @@ export class SpriteAnimateDirector {
 
     // 初始关键帧
     //  - 如初始关键帧为 null, 则从对象当前状态开始
-    if (initialFrame) {
-      if (!initialFrame.filters) {
-        initialFrame.filters = [];
-      }
-
-      timeline.to(target, 1 / 1000, initialFrame, 0);
-      initialFrame.filters.map(v => {
-        console.log("Initial filter : ", v);
-
-        target.spriteFilters.setFilter(v.name, v.data);
-      });
-    }
+    // if (initialFrame) {
+    //   if (!initialFrame.filters) {
+    //     initialFrame.filters = [];
+    //   }
+
+    //   timeline.to(target, 1 / 1000, initialFrame, 0);
+    //   // timeline.set(target, initialFrame, 0);
+    //   initialFrame.filters.map(v => {
+    //     console.log("Initial filter : ", v);
+    //     target.spriteFilters.setFilter(v.name, v.data);
+    //   });
+    // }
 
     // 记录时间轴的播放位置
     // 时间轴比0大一点，防止后续序列帧的播放位置覆盖初始化帧
@@ -197,45 +196,50 @@ export class SpriteAnimateDirector {
       const frame = frames[i] as SpriteMacroFrame;
       let duration = (frame.duration || 1) / 1000;
 
-      const { ...vars } = frame;
-
-      vars.ease = vars.ease || gsap.Power0.ease;
-
       // 把相关属性直接设置到 target(sprite)
       timeline.add(
-        gsap.TweenLite.to(target, duration, vars),
+        gsap.TweenLite.to(target, duration, {
+          ...frame,
+          ease: frame.ease || gsap.Power0.ease
+        }),
         timelineCursorTime
       );
 
       // 处理滤镜动画
       if (frame && frame.filters && Array.isArray(frame.filters)) {
         for (let i = 0; i < frame.filters.length; ++i) {
           const v = frame.filters[i];
-          // 创建一个空的滤镜
-          const obj = target.spriteFilters.setFilter(v.name, null);
 
-          console.log("filter obj", obj);
+          // 创建一个空的滤镜
+          const obj = target.spriteFilters.setFilter(v.name, {});
 
           // 两边都有同一属性的情况下才能开始过渡
           timeline.add(
             gsap.TweenLite.to(obj.instance, duration, {
               ease: v.data.ease || gsap.Power0.easeNone,
-              ...v.data
+              // strength:,
+              ...v.data,
+              onUpdate: () => {
+                // 渲染滤镜
+                target.spriteFilters.render();
+              }
             }),
             timelineCursorTime
           );
         }
       }
 
       // 累加当前关键帧的时间
-      timelineCursorTime += frame.duration / 1000;
+      timelineCursorTime += duration / 1000;
     }
 
     // 设置时间轴的总时间
     if (macroObject.totalDuration !== undefined) {
       timeline.duration(macroObject.totalDuration / 1000 || 0.01);
     }
 
+    console.log("timeline", timeline);
+
     return timeline;
   }
 

diff --git a/src/engine/core/graphics/sprite-filters.ts b/src/engine/core/graphics/sprite-filters.ts
@@ -6,33 +6,44 @@ import * as ExtraFilters from "pixi-filters";
 
 import { Sprite } from "./sprite";
 import { ResourceManager } from "../resource-manager";
+import { SpriteFilter } from "engine/data/sprite-renderer";
+import { FilterBase } from "./filters/filter-base";
 
 // export enum FilterType {
 //   BlurFilter = "blur",
 //   AdjustmentFilter = "adjustment"
 // }
 
 export class SpriteFilterObject {
-  public instance: PIXI.Filter;
-  public data: any = {};
+  constructor(
+    public type: string,
+    public instance: PIXI.Filter,
+    public data: any
+  ) {}
 }
 
 export class SpriteFilters {
-  private filters = new Map<string, SpriteFilterObject>();
+  // private filters = new Map<string, SpriteFilterObject>();
+  private filters: SpriteFilterObject[] = [];
   private sprite: Sprite;
 
   constructor(sprite: Sprite) {
     this.sprite = sprite;
   }
 
   public getFilter(type: string) {
-    return this.filters.get(type);
+    return this.filters.find(v => {
+      return v.type === type;
+    });
   }
 
   public clearFilters() {
-    this.filters.clear();
-    this.sprite.filters = this.getFilterList();
+    this.filters = [];
+    this.render();
   }
+
+  public createFilter(type: string, data: any) {}
+
   /**
    * 设置滤镜参数
    *
@@ -41,42 +52,38 @@ export class SpriteFilters {
    * @memberof SpriteFilters
    */
   public setFilter(type: string, data: any) {
-
-    let filterObject = this.filters.get(type);
+    let filterObject = this.getFilter(type);
     if (!filterObject) {
-      filterObject = new SpriteFilterObject();
-    }
-
-    if (!filterObject.instance) {
-      const filter = require("./filters/" + type).default;
+      // 动态加载滤镜
+      const filter = require("./filters/" + type).default as FilterBase;
 
       // 处理特殊参数，部分滤镜需要mapTexture
       let dmap = null;
       if (data && data.map) {
         dmap = GameResource.getPath(ResourcePath.DMaps, data.map);
       }
 
-      filterObject.instance = filter.instance(this.sprite, dmap);
-      filterObject.instance.enabled = true;
+      const pixiFilterInstance = filter.instance(this.sprite, dmap);
+      pixiFilterInstance.enabled = true;
+
+      // 创建滤镜对象
+      filterObject = new SpriteFilterObject(type, pixiFilterInstance, data);
+
+      // 添加滤镜
+      this.filters.push(filterObject);
     }
 
     filterObject.data = data;
     Object.assign(filterObject.instance, filterObject.data);
 
-    this.filters.set(type, filterObject);
-    this.sprite.filters = this.getFilterList();
-
     return filterObject;
   }
 
-  public getFilterList() {
-    let list = [];
-    this.filters.forEach((v, k) => {
-      if (!v.instance.enabled) return;
-
-      list.push(v.instance);
+  public render() {
+    this.sprite.filters = this.filters.map(v => {
+      if (v.instance.enabled) {
+        return v.instance;
+      }
     });
-
-    return list;
   }
 }
diff --git a/src/engine/core/graphics/world.ts b/src/engine/core/graphics/world.ts
@@ -45,6 +45,7 @@ class World {
       resolution: 1
     });
 
+
     console.log("webGLVersion", this.app.renderer.context.webGLVersion)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,6 +45,7 @@ class World {
		resolution: 1
		});


		console.log("webGLVersion", this.app.renderer.context.webGLVersion)


Expand Down