feat: texture mapping movement tween support

package.json

@@ -6,7 +6,7 @@
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
     "@actions/core": "^1.10.0",
-    "@dcl/protocol": "1.0.0-11780504028.commit-c886080",
+    "@dcl/protocol": "1.0.0-11954515774.commit-3fb0262",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

packages/@dcl/ecs/src/components/extended/Tween.ts

@@ -1,5 +1,5 @@
 import { IEngine, LastWriteWinElementSetComponentDefinition } from '../../engine'
-import { Tween, PBTween, Move, Rotate, Scale } from '../generated/index.gen'
+import { Tween, PBTween, Move, Rotate, Scale, TextureMove } from '../generated/index.gen'
 
 /**
  * @public
@@ -17,6 +17,11 @@ export interface TweenHelper {
    * @returns a move mode tween
    */
   Scale: (scale: Scale) => PBTween['mode']
+
+  /**
+   * @returns a texture move mode tween
+   */
+  TextureMove: (textureMove: TextureMove) => PBTween['mode']
 }
 
 /**
@@ -47,6 +52,12 @@ const TweenHelper: TweenHelper = {
       $case: 'scale',
       scale
     }
+  },
+  TextureMove(textureMove) {
+    return {
+      $case: 'textureMove',
+      textureMove
+    }
   }
 }
 

packages/@dcl/ecs/src/systems/tween.ts

@@ -142,6 +142,12 @@ export function createTweenSystem(engine: IEngine): TweenSystem {
     if (tween.mode?.$case === 'scale' && tween.mode.scale) {
       return { ...tween, mode: { ...tween.mode, scale: { start: tween.mode.scale.end, end: tween.mode.scale.start } } }
     }
+    if (tween.mode?.$case === 'textureMove' && tween.mode.textureMove) {
+      return {
+        ...tween,
+        mode: { ...tween.mode, textureMove: { start: tween.mode.textureMove.end, end: tween.mode.textureMove.start } }
+      }
+    }
 
     /* istanbul ignore next */
     throw new Error('Invalid tween')

packages/@dcl/playground-assets/etc/playground-assets.api.md

@@ -2902,6 +2902,9 @@ export interface PBTween {
     } | {
         $case: "scale";
         scale: Scale;
+    } | {
+        $case: "textureMove";
+        textureMove: TextureMove;
     } | undefined;
     playing?: boolean | undefined;
 }
@@ -3945,6 +3948,30 @@ export interface TextureHelper {
 // @public
 export type TextureMode = 'nine-slices' | 'center' | 'stretch';
 
+// @public (undocumented)
+export interface TextureMove {
+    // (undocumented)
+    end: PBVector2 | undefined;
+    movementType?: TextureMovementType | undefined;
+    // (undocumented)
+    start: PBVector2 | undefined;
+}
+
+// @public (undocumented)
+export namespace TextureMove {
+    // (undocumented)
+    export function decode(input: _m0.Reader | Uint8Array, length?: number): TextureMove;
+    // (undocumented)
+    export function encode(message: TextureMove, writer?: _m0.Writer): _m0.Writer;
+}
+
+// @public (undocumented)
+export const enum TextureMovementType {
+    TMT_OFFSET = 0,
+    // (undocumented)
+    TMT_TILING = 1
+}
+
 // @public (undocumented)
 export interface TextureUnion {
     // (undocumented)
@@ -4067,6 +4094,8 @@ export interface TweenHelper {
     Rotate: (rotate: Rotate) => PBTween['mode'];
     // (undocumented)
     Scale: (scale: Scale) => PBTween['mode'];
+    // (undocumented)
+    TextureMove: (textureMove: TextureMove) => PBTween['mode'];
 }
 
 // @public (undocumented)

packages/@dcl/sdk-commands/package.json

@@ -13,7 +13,7 @@
     "@dcl/inspector": "file:../inspector",
     "@dcl/linker-dapp": "^0.14.2",
     "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be",
-    "@dcl/protocol": "1.0.0-11780504028.commit-c886080",
+    "@dcl/protocol": "1.0.0-11954515774.commit-3fb0262",
     "@dcl/quests-client": "^1.0.3",
     "@dcl/quests-manager": "^0.1.4",
     "@dcl/rpc": "^1.1.1",

test/ecs/components/Tween.spec.ts

@@ -1,9 +1,12 @@
-import { EasingFunction, Engine, components } from '../../../packages/@dcl/ecs/src'
+import { EasingFunction, Engine, TextureMovementType, components } from '../../../packages/@dcl/ecs/src'
 import { testComponentSerialization } from './assertion'
 
 describe('Generated Tween ProtoBuf', () => {
   const start = { x: 0, y: 0, z: 0 }
   const end = { x: 8, y: 8, z: 8 }
+  const start2d = { x: 0, y: 0 }
+  const end2d = { x: 8, y: 8 }
+
   it('should serialize/deserialize move Tween', () => {
     const newEngine = Engine()
     const Tween = components.Tween(newEngine)
@@ -31,5 +34,17 @@ describe('Generated Tween ProtoBuf', () => {
       playing: false,
       currentTime: 0
     })
+
+    testComponentSerialization(Tween, {
+      duration: 1,
+      easingFunction: EasingFunction.EF_LINEAR,
+      mode: Tween.Mode.TextureMove({
+        start: { ...start2d },
+        end: { ...end2d },
+        movementType: TextureMovementType.TMT_OFFSET
+      }),
+      playing: false,
+      currentTime: 0
+    })
   })
 })

test/ecs/components/UiBackground.spec.ts

@@ -22,8 +22,8 @@ describe('Generated UiBackground ProtoBuf', () => {
             src: 'some-src',
             wrapMode: TextureWrapMode.TWM_CLAMP,
             filterMode: TextureFilterMode.TFM_BILINEAR,
-            tiling: undefined,
-            offset: undefined
+            offset: undefined,
+            tiling: undefined
           }
         }
       },

test/ecs/events/tween.spec.ts

@@ -10,7 +10,7 @@ import {
   components
 } from '../../../packages/@dcl/ecs/src'
 import { createTweenSystem } from '../../../packages/@dcl/ecs/src/systems/tween'
-import { Quaternion, Vector3 } from '../../../packages/@dcl/sdk/math'
+import { Quaternion, Vector2, Vector3 } from '../../../packages/@dcl/sdk/math'
 
 function mockTweenEngine(engine: IEngine, Tween: TweenComponentDefinitionExtended) {
   return async function (entity: Entity, mode?: PBTween['mode']) {
@@ -103,6 +103,13 @@ describe('Tween System', () => {
     expect(Tween.get(entity).mode).toMatchCloseTo(Tween.Mode.Scale({ end: Vector3.Left(), start: Vector3.Right() }))
   })
 
+  it('should change to backwards the TextureMove Tween when its completed', async () => {
+    await mockTween(entity, Tween.Mode.TextureMove({ start: Vector2.Zero(), end: Vector2.One() }))
+    await mockTweenStatus(entity)
+    expect(completed).toBeCalledTimes(1)
+    expect(Tween.get(entity).mode).toMatchCloseTo(Tween.Mode.TextureMove({ end: Vector2.Zero(), start: Vector2.One() }))
+  })
+
   it('should create a RESTART tweenSequence for the entity and restart the tween once its completed', async () => {
     TweenState.deleteFrom(entity)
     const tween = await mockTween(entity, Tween.Mode.Move({ start: Vector3.Forward(), end: Vector3.Down() }))

test/snapshots/development-bundles/static-scene.test.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=453.4k bytes
+SCENE_COMPILED_JS_SIZE_PROD=456k bytes
 THE BUNDLE HAS SOURCEMAPS
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
@@ -11,7 +11,7 @@ EVAL test/snapshots/development-bundles/static-scene.test.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 54k
-  MALLOC_COUNT = 13673
+  MALLOC_COUNT = 13705
   ALIVE_OBJS_DELTA ~= 2.70k
 CALL onStart()
   main.crdt: PUT_COMPONENT e=0x200 c=1 t=0 data={"position":{"x":5.880000114440918,"y":2.7916901111602783,"z":7.380000114440918},"rotation":{"x":0,"y":0,"z":0,"w":1},"scale":{"x":1,"y":1,"z":1},"parent":0}
@@ -56,4 +56,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 3k
   MALLOC_COUNT = -5
   ALIVE_OBJS_DELTA ~= 0.00k
-  MEMORY_USAGE_COUNT ~= 1194.79k bytes
+  MEMORY_USAGE_COUNT ~= 1199.32k bytes

test/snapshots/development-bundles/testing-fw.test.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=454k bytes
+SCENE_COMPILED_JS_SIZE_PROD=456.5k bytes
 THE BUNDLE HAS SOURCEMAPS
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
@@ -11,7 +11,7 @@ EVAL test/snapshots/development-bundles/testing-fw.test.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 63k
-  MALLOC_COUNT = 14194
+  MALLOC_COUNT = 14226
   ALIVE_OBJS_DELTA ~= 2.85k
 CALL onStart()
   LOG: ["Adding one to position.y=0"]
@@ -64,4 +64,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 5k
   MALLOC_COUNT = -40
   ALIVE_OBJS_DELTA ~= -0.01k
-  MEMORY_USAGE_COUNT ~= 1203.40k bytes
+  MEMORY_USAGE_COUNT ~= 1207.93k bytes

test/snapshots/development-bundles/two-way-crdt.test.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=454k bytes
+SCENE_COMPILED_JS_SIZE_PROD=456.6k bytes
 THE BUNDLE HAS SOURCEMAPS
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
@@ -11,7 +11,7 @@ EVAL test/snapshots/development-bundles/two-way-crdt.test.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 63k
-  MALLOC_COUNT = 14194
+  MALLOC_COUNT = 14226
   ALIVE_OBJS_DELTA ~= 2.85k
 CALL onStart()
   LOG: ["Adding one to position.y=0"]
@@ -64,4 +64,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 5k
   MALLOC_COUNT = -40
   ALIVE_OBJS_DELTA ~= -0.01k
-  MEMORY_USAGE_COUNT ~= 1203.41k bytes
+  MEMORY_USAGE_COUNT ~= 1207.93k bytes

test/snapshots/production-bundles/append-value-crdt.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=198.1k bytes
+SCENE_COMPILED_JS_SIZE_PROD=199.4k bytes
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
   MALLOC_COUNT = 1005
@@ -9,8 +9,8 @@ EVAL test/snapshots/production-bundles/append-value-crdt.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 65k
-  MALLOC_COUNT = 12723
-  ALIVE_OBJS_DELTA ~= 2.84k
+  MALLOC_COUNT = 12753
+  ALIVE_OBJS_DELTA ~= 2.85k
 CALL onStart()
   Renderer: APPEND_VALUE e=0x200 c=1063 t=0 data={"button":0,"hit":{"position":{"x":1,"y":2,"z":3},"globalOrigin":{"x":1,"y":2,"z":3},"direction":{"x":1,"y":2,"z":3},"normalHit":{"x":1,"y":2,"z":3},"length":10,"meshName":"mesh","entityId":512},"state":1,"timestamp":1,"analog":5,"tickNumber":0}
   OPCODES ~= 8k
@@ -55,4 +55,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 14k
   MALLOC_COUNT = 31
   ALIVE_OBJS_DELTA ~= 0.01k
-  MEMORY_USAGE_COUNT ~= 899.73k bytes
+  MEMORY_USAGE_COUNT ~= 903.05k bytes

test/snapshots/production-bundles/billboard.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=231.2k bytes
+SCENE_COMPILED_JS_SIZE_PROD=232.4k bytes
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
   MALLOC_COUNT = 1005
@@ -9,8 +9,8 @@ EVAL test/snapshots/production-bundles/billboard.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 66k
-  MALLOC_COUNT = 14836
-  ALIVE_OBJS_DELTA ~= 3.24k
+  MALLOC_COUNT = 14865
+  ALIVE_OBJS_DELTA ~= 3.25k
 CALL onStart()
   OPCODES ~= 0k
   MALLOC_COUNT = 4
@@ -77,4 +77,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 9k
   MALLOC_COUNT = 0
   ALIVE_OBJS_DELTA ~= 0.00k
-  MEMORY_USAGE_COUNT ~= 1042.09k bytes
+  MEMORY_USAGE_COUNT ~= 1045.40k bytes