From 31ff9bb51b0897dd6f2476b1b50322f1849ce2e9 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Tue, 20 Feb 2024 16:39:22 -0300 Subject: [PATCH 1/3] fix: Define UiTransform, UiText and UiBackground components as EngineComponents --- src/definitions.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/definitions.ts b/src/definitions.ts index 384fcdb1f..299fdb308 100644 --- a/src/definitions.ts +++ b/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 Material: MaterialComponentDefinitionExtended VideoPlayer: LastWriteWinElementSetComponentDefinition + UiTransform: LastWriteWinElementSetComponentDefinition + UiText: LastWriteWinElementSetComponentDefinition + UiBackground: LastWriteWinElementSetComponentDefinition } export type AssetPackComponents = ReturnType From 0524369e79fb9df3781723521b96ade801c14ff2 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Tue, 20 Feb 2024 16:39:37 -0300 Subject: [PATCH 2/3] fix: Initialize the ui components --- src/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.ts b/src/index.ts index 8dade41d9..2ccceedd8 100644 --- a/src/index.ts +++ b/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() { From c7a029686f60d629671fa60a3198e15e96e25ff3 Mon Sep 17 00:00:00 2001 From: Gabriel Diaz Date: Tue, 20 Feb 2024 16:40:16 -0300 Subject: [PATCH 3/3] fix: Use the defined ui componentes in the EngineComponents definition --- src/actions.ts | 15 +++++++++------ src/ui.ts | 15 ++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/actions.ts b/src/actions.ts index 65e755129..42a9913fa 100644 --- a/src/actions.ts +++ b/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, ) { const { text, hideAfterSeconds, font, fontSize, textAlign } = payload - const uiTransformComponent = getUITransform(entity) + const uiTransformComponent = getUITransform(UiTransform, entity) if (uiTransformComponent) { UiText.createOrReplace(entity, { value: text, @@ -839,7 +841,7 @@ 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) @@ -847,7 +849,7 @@ export function createActionsSystem( // 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 @@ -855,6 +857,7 @@ export function createActionsSystem( // 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( diff --git a/src/ui.ts b/src/ui.ts index d37b1230a..96ad3d03c 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -3,9 +3,6 @@ import { Entity, TextAlignMode, TextureWrapMode, - UiBackground, - UiText, - UiTransform, YGAlign, YGFlexDirection, YGJustify, @@ -13,6 +10,7 @@ import { 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,