Add outline/shadow tags to markups

[querielo]

Abstract: add outline/shadow tags to markups, so a user can set outline and shadow styles with markups.

Usage:

• Outline
  [outline color="#ffffff" thickness="0.5"]Text[/outline]
• Shadow
  [shadow color="#ffffff" offset="0.5"]Text[/shadow]
[shadow color="#ffffff" offsetX="0.5" offsetY="0.5"]Text[/shadow]
• color/outline/shadow tags can be intersected ([shadow]T[color]e[outline]x[/shadow]t[/color][/outline])
  [shadow color="#ffffff" offset="0.5"]T[color="#000000"]e[outline color="#ffffff" thickness="0.5"]x[/shadow]t[/color][/outline]

Note: since markups use attributes the MR can improve batching of text elements if enableMarkups is enabled. I'd like to share an example, but I don't know how to get PlayCanvas Engine build from Github Action. So, you need to build the engine locally.
Example:

• project: https://playcanvas.com/editor/scene/1436584
• app: https://launch.playcanvas.com/1436584?ministats=true&use_local_engine=http://localhost:51000/playcanvas.dbg.js

Here is the profiling screenshot using Spectorjs

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[slimbuck]

@querielo - this is just an epic PR, awesome!

[jpauloruschel]

Great PR, thanks! Could you also add a few screenshots of this new feature in action and maybe some edge cases, in addition to the profiling one?

[querielo]

Great PR, thanks! Could you also add a few screenshots of this new feature in action and maybe some edge cases, in addition to the profiling one?

@jpauloruschel
Is it possible to take a build from Github actions and pass it into URL? Like this,
https://launch.playcanvas.com/1436584?ministats=true&use_local_engine=http://localhost:51000/playcanvas.dbg.js

[querielo]

Example:
[color="#00FF00"]T[shadow color="#0000FF" offset="1"]e[outline color="#00FFFF" thickness="1"]x[/color]t[/shadow][/outline]
Color: #FFFFFF
Outline color: #FF00FFFF
Outline thickness: 1
Shadow: #FF0000FF
Shadow offset: [0.5, -0.5]

Result:

[yaustar]

Is it possible to take a build from Github actions and pass it into URL? Like this,
https://launch.playcanvas.com/1436584?ministats=true&use_local_engine=http://localhost:51000/playcanvas.dbg.js

I'm afraid not, the closest you can do (if you want to share a project) is to add the custom build of PlayCanvas into the project and set the loading type to be 'after engine'

The use_local_engine param only takes in URLs from localhost or code.playcanvas.com

[querielo]

@yaustar It works! :-) Thanks!
https://playcanvas.com/editor/scene/1436584
https://launch.playcanvas.com/1436584?ministats=true

[jpauloruschel]

Looks good on UI System / TextElement side, but still needs another check on the shader + material side.

[willeastcott]

Thanks so much for the contribution, @querielo! 🙏