fix: Use the correct UI transform (#94)

* fix: Define UiTransform, UiText and UiBackground components as EngineComponents

* fix: Initialize the ui components

* fix: Use the defined ui componentes in the EngineComponents definition

src/actions.ts

@@ -4,7 +4,6 @@ import {
   VideoPlayer,
   Material,
   AudioStream,
-  UiText,
   YGUnit,
   TextAlignMode,
   Font,
@@ -80,6 +79,9 @@ export function createActionsSystem(
     AvatarAttach,
     VisibilityComponent,
     GltfContainer,
+    UiTransform,
+    UiText,
+    UiBackground
   } = components
   const { Actions, States, Counter, Triggers } = getComponents(engine)
 
@@ -706,7 +708,7 @@ export function createActionsSystem(
     payload: ActionPayload<ActionType.SHOW_TEXT>,
   ) {
     const { text, hideAfterSeconds, font, fontSize, textAlign } = payload
-    const uiTransformComponent = getUITransform(entity)
+    const uiTransformComponent = getUITransform(UiTransform, entity)
     if (uiTransformComponent) {
       UiText.createOrReplace(entity, {
         value: text,
@@ -839,22 +841,23 @@ export function createActionsSystem(
       payload
 
     // Get/Create a UI transform for the root entity
-    getUITransform(engine.RootEntity)
+    getUITransform(UiTransform, engine.RootEntity)
 
     // Get a UI Stack entity
     const screenAlign = mapAlignToScreenAlign(align)
     const uiStack = getUiStack(screenAlign)
 
     // TODO: Fix items wrapping
     // Get/Create a UI Transform for the UI stack
-    const uiStackTransformComponent = getUITransform(uiStack)
+    const uiStackTransformComponent = getUITransform(UiTransform, uiStack)
     uiStackTransformComponent.alignItems = screenAlign.alignItems
     uiStackTransformComponent.justifyContent = screenAlign.justifyContent
     uiStackTransformComponent.positionType = YGPositionType.YGPT_ABSOLUTE
 
     // Create a UI entity and a Transform component for the image
     const imageEntity = engine.addEntity()
     const imageTransformComponent = getUITransform(
+      UiTransform,
       imageEntity,
       width,
       height,
@@ -864,12 +867,12 @@ export function createActionsSystem(
     imageTransformComponent.pointerFilter = PointerFilterMode.PFM_BLOCK
 
     // Create Background Component
-    getUIBackground(imageEntity, src)
+    getUIBackground(UiBackground, imageEntity, src)
 
     if (text) {
       // Create Text Component
       // TODO: Fix text wrapping and scrolling
-      getUIText(imageEntity, text, fontSize, width)
+      getUIText(UiText, imageEntity, text, fontSize, width)
     }
 
     pointerEventsSystem.onPointerDown(

src/definitions.ts

@@ -14,6 +14,9 @@ import {
   PBAvatarAttach,
   PBVisibilityComponent,
   PBGltfContainer,
+  PBUiTransform,
+  PBUiText,
+  PBUiBackground
 } from '@dcl/sdk/ecs'
 import { addActionType } from './action-types'
 import {
@@ -260,6 +263,9 @@ export type EngineComponents = {
   GltfContainer: LastWriteWinElementSetComponentDefinition<PBGltfContainer>
   Material: MaterialComponentDefinitionExtended
   VideoPlayer: LastWriteWinElementSetComponentDefinition<PBVideoPlayer>
+  UiTransform: LastWriteWinElementSetComponentDefinition<PBUiTransform>
+  UiText: LastWriteWinElementSetComponentDefinition<PBUiText>
+  UiBackground: LastWriteWinElementSetComponentDefinition<PBUiBackground>
 }
 
 export type AssetPackComponents = ReturnType<typeof getComponents>

src/index.ts

@@ -9,6 +9,9 @@ import {
   GltfContainer,
   Material,
   VideoPlayer,
+  UiTransform,
+  UiText,
+  UiBackground
 } from '@dcl/sdk/ecs'
 import { initAssetPacks } from './scene-entrypoint'
 
@@ -21,6 +24,9 @@ initAssetPacks(engine, pointerEventsSystem, {
   GltfContainer,
   Material,
   VideoPlayer,
+  UiTransform,
+  UiText,
+  UiBackground
 })
 
 export function main() {

src/ui.ts

@@ -3,16 +3,14 @@ import {
   Entity,
   TextAlignMode,
   TextureWrapMode,
-  UiBackground,
-  UiText,
-  UiTransform,
   YGAlign,
   YGFlexDirection,
   YGJustify,
   YGPositionType,
   YGUnit,
 } from '@dcl/sdk/ecs'
 import { Color4 } from '@dcl/sdk/math'
+import { EngineComponents } from './definitions'
 import { AlignMode, Font, ScreenAlignMode } from './enums'
 
 function getAlignMode(align: AlignMode, isColumn: boolean) {
@@ -136,15 +134,16 @@ export function mapAlignToScreenAlign(
 }
 
 export function getUITransform(
+  component: EngineComponents["UiTransform"],
   entiy: Entity,
   height = 100,
   width = 100,
   unit: YGUnit = YGUnit.YGU_PERCENT,
 ) {
-  let uiTransformComponent = UiTransform.getMutableOrNull(entiy)
+  let uiTransformComponent = component.getMutableOrNull(entiy)
 
   if (!uiTransformComponent) {
-    uiTransformComponent = UiTransform.create(entiy)
+    uiTransformComponent = component.create(entiy)
     uiTransformComponent.heightUnit = unit
     uiTransformComponent.widthUnit = unit
     uiTransformComponent.height = height
@@ -163,12 +162,13 @@ export function getUITransform(
 }
 
 export function getUIBackground(
+  component: EngineComponents["UiBackground"],
   entity: Entity,
   src: string,
   textureMode = BackgroundTextureMode.NINE_SLICES,
   wrapMode = TextureWrapMode.TWM_CLAMP,
 ) {
-  return UiBackground.createOrReplace(entity, {
+  return component.createOrReplace(entity, {
     textureMode,
     texture: {
       tex: {
@@ -225,6 +225,7 @@ function breakLines(text: string, linelength: number) {
 }
 
 export function getUIText(
+  component: EngineComponents["UiText"],
   entity: Entity,
   text: string,
   fontSize = 10,
@@ -234,7 +235,7 @@ export function getUIText(
 ) {
   const lineLength = Math.floor(containerWidth / (fontSize / 1.7))
 
-  return UiText.createOrReplace(entity, {
+  return component.createOrReplace(entity, {
     value: breakLines(text, lineLength),
     fontSize,
     font: Font.F_MONOSPACE as any,