UMG vs. Web Browser Widget to UI

Development Programming & Scripting
, ,
1

I’m thinking about redesigning my entire interface using HTML, CSS, and JS.
UMG is impressive, I won’t dispute that, but the resizing is similar to WoW and I don’t like it at all. Sometimes the resizing with anchors isn’t what I expected, nor with weights.

My question is, if we have powerful computers these days, why not use it?

Many will think it’s because of performance and lag with the UE5 interface. Well, they’re right, since I understand that this plugin has to open something like “Chromium.” But it also reminds me of my days when people used to say “optimizing arrays, garbage collectors, pointers…” all for memory. Even today, we use algorithms to optimize at O(n), O(n log n), and at most O(n^2).

Why?.. given how simple it is to render “something existing based on resources.” But Unreal Engine has its own style of making things slow. Why? Well, I guess the people who designed it were stuck in old practices.

You can see it’s not that fluid:
→ https://youtu.be/ks1tjqq3qaw?t=50

You can see it has a frame rate of 15-20 fps. How do I know? Simple.
So, if UIs normally have to have 60 fps but the vast majority are buttons, basically 1-5 fps would be enough as long as the animation isn’t excessive (like a time lapse).

Is the trend toward using HTML? It doesn’t seem like it, according to the Unreal Engine docs. Why did they delete it? Well, I know the inside scoop. Let’s say it was simply something incompatible that they made compatible. But the problem isn’t calling HTML and rendering it. The problem is how it does it.

My question is, why not use HTML in interfaces if we have computers that can already handle 16k ultra streams? Are we stuck in the old adage “it’s not the right time” to load 200MB plus the interface…?

What’s the difference between UMG vs HTML, CSS, and JS?

image
image895×499 168 KB

I don’t know about you, but I see this as modern instead of the old-fashioned button.

HTML + CSS + JS. Is it complicated for you? Ask the AI ​​to generate what you want then. With several lines of code, you get what you want.

By the way, couldn’t the functionality of the web browser wrapper that disappeared be recovered? Could you bring back HTML5 support for UE5? - #7 by Drakgoku

No, I’m not crazy right now.

2

WmPj0VE
WmPj0VE771×166 22.1 KB

All CSS and JS behaviors work correctly.

It’s true that you have to follow more steps:
1 - Each modular piece. Since the entire piece itself counts as a widget, otherwise, you won’t be able to use focus to move your character.

  • Each web browser within a layout. And each with its own behavior. You can reuse them.

2 - Load the web browsers along with the map. It takes a while to open. Then it’s better to hide and unhide.
3 - Collect the data using JS and pass it to UMG. (Here’s a simple example: GitHub - DimaChaichan/UnrealWebBrowser )

It’s true that if you can achieve a good effect, it could be powerful. But since there’s little support and it’s in the experimental phase, and above all… it doesn’t seem like they’ll continue it… I’ll leave it as a reminder.

Basically, you have to do “magic” since the HTML renderer is literally ■■■■■■■ garbage.

If this ever changes course and he gets rehabilitated, count me in.

Code used:

Summary 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Barra de Hechizos Modular</title>
<style>
  body {
    margin:0; padding:0; background:#20232a; color:#eee; font-family: Arial, sans-serif;
  }
  #spell-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.7);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    gap: 14px;
    box-shadow: 0 0 12px #3a64a9aa;
    user-select: none;
  }
  .spell {
    width: 48px; height: 48px;
    background: #555;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.6em;
    color: white;
    transition: background 0.3s ease;
  }
  .spell:hover {
    background: #8a3;
  }
</style>
</head>
<body>

<div id="spell-bar" aria-label="Barra de Hechizos">
  <div class="spell" tabindex="0" aria-label="Bola de Fuego" onclick="castSpell('Bola de Fuego')">🔥</div>
  <div class="spell" tabindex="0" aria-label="Rayo de Hielo" onclick="castSpell('Rayo de Hielo')">❄️</div>
  <div class="spell" tabindex="0" aria-label="Escudo Arcano" onclick="castSpell('Escudo Arcano')">🛡️</div>
  <div class="spell" tabindex="0" aria-label="Curación" onclick="castSpell('Curación')">💖</div>
</div>

<script>
  function castSpell(spellName) {
    alert(`He lanzado: ${spellName}`);
  }
</script>

</body>
</html>

Using the code:

Summary

image
image885×446 76 KB