Sami Shakkour's Blog

String Parser

Sami Shakkour — Thu, 30 Jan 2025 07:42:00 +0000

The philosophy behind making a string parser in any programming language using simple index inspection, this type of formatting was done for the Online Communication Mod which I've released in June 2024. Looking back it, I think its a very rough implementation and there's technically a way WAY better approach than the one I wrote but I think engine limitation was the largest hurdle here of course.

For this page, the parser was made in Unreal Engine 3 for A Hat in Time.

Background

A Hat in Time uses a HUD system known as Hat_HUD where it renders Objects known as Hat_HUDElement, each element handles everything on their side, this is done to make it easier for the developers and modders to add/remove UI content with simple code requests and avoidining overcluttering the HUD class rendering everything at once or having a thousands upon thousands lines of code in one file.

Unreal Engine 3 supports text coloring in through changing the Color Channels where you call SetDrawColor(R,G,B,A?=255); for the Canvas before rendering the text where all inputs take a number between 0 - 255 on the RGBA channel scale, A (alpha) is optional and if not specified its always 255 (so no transparency), e.g. SetDrawColor(255,0,0) will set the text red.

Setting the draw color to a different color will not change the previously drawn text color.

Limitations

HUD in Unreal Engine 3 is purely point coordinates rendering, if I ask it to render "Hello, World!" in position (X=300, Y=600) on my screen and "how are you?" in position (X=330, 600), both texts will overlap with the latter text rendered ontop of the former text, so I built a solution where I check textsize and offset it correctly and "as accurately as possible" to make sure it looks right.

Because of this, the HUD doesn't understand what a new line is, this implementation also solves this issue by making a box size where it will break to the next line when its required.

Prologue

Online Communication is a mod that allows players to write their actions they've done in real time to communicate it better with others, from emoting "over here!" and stickers to pinging spots to tell others in the lobby what they want to do, players cannot directly and literally write into the chat because every Chat Log that is inputted is a localization key which contains references to the text its suppose to render including parameters required to replace.

[general]
TimePieceGet = [color=#528BFF][color=yellow_lemon][announcer][/color] collected the[icon=TimePiece]for @{~LC|[act_name]}, congratulations![/color]

So if the passed localization key is invalid on their clients side, this input is dumped away and never rendered to the client, this is a security protocol to avoid abuse such as the ability to send malicious messages freely.

This message is parsed to achieve a message that looks beautifully rendered with colors and icons that is clear to other players.

Introduction

Essentially the most important part of string parsing finding two points in a string and replace it with different content similar to HTML and Markdown an opening/closing tag or a special tag (like <img /> or <br />).

First I made 2 structs, the one called OCLogInfo containing the Log's information for each message, the other struct OCSegment which contains the text, icons, coloring and so on, OCLogInfo

struct OCLogInfo
{
    var String RawText; // Raw unprocessed text
    var Color Color; // Main color
    var Array<OCSegment> Segments;
    var float lifetime; // Time until it fades from the chat
    var float shake; // When the message is updated or merged with a duplicate
    var bool isNewLine; // Only true when this log is required to linebreak due to limits
    var int Combo; // How many times this message was casted by the **same** exact user (stops chat log spam)
    structdefaultproperties
    {
        Color = (R=255, G=255, B=255);
        lifetime = 5;
        Combo = 1;
    }
};

struct OCSegment
{
    var string Text;
    var Surface Icon;
    var Color Color; // Segment color
    var bool AddSpace;
    structdefaultproperties
    {
        AddSpace = true;
    }
};

Finding an Opening Tag

Tags are defined as [tag] and [/tag] similar to HTML or more accurately BBCode, we start by looking for an opening tag so we can start our parsing, for this example I supported two types, [color] and [icon].

Both tags work as follows:

Color has a closing tag [/color].

[color=red]My red text![/color]
[color=#FFFF00]My Yellow text![/color]

But icon doesn't, similar to <img />!

[icon=TimePiece]
[icon=TimePiece|Amount: 42]

To find a tag, we need to find the first index of [ and ], this is where GetTag() comes in.

static function string GetTag(coerce string msg, out int start)
{
    local int tagbegin, tagend;
    InStrPeek(msg, tagbegin, "[", start);
    InStrPeek(msg, tagend, "]", start);
    return Mid(msg, tagbegin + 1, tagend - tagbegin - 1);
}

InStrPeek() is very recurring function call, it takes a message, check if it contains a certain string from the start position (if specified) and returns true if valid but also sets 2nd parameter pos to the index where compare was found.

// Set pos to index of compare if found
// pos = -1 cannot find and also returns false if so
static function bool InStrPeek(string msg, out int pos, const string compare, optional int startpos = 0)
{
    pos = InStr(msg, compare, false, true, Max(startpos, 0));
    return pos != INDEX_NONE;
}

When we get the tag content inside [ and ], we need to start finding the cut points for the segment that contains this info by looking for its closing tag if it has one, in this case [color] has a closing tag, but [icon] doesn't.

In the FindSegmentCutPoints() function, we are looking for the closing tag, looking at this again I could have definitely wrote this way better to avoid hardcoding [color] and [icon] checks to something more organized and better, sorry!

static function bool FindSegmentCutPoints(string msg, out int start, out int end, string compare)
{
    local string compareBreak, rawTag;

    rawTag = compare;
    compare = "["$compare$"]";
    start = -1;
    end = -1;

    InStrPeek(msg, start, compare, start);

    if(InStr(rawTag, "color=", false, true) != INDEX_NONE && class'SS_Color'.static.IsValidColor(Repl(rawTag, "color=", "")))
    {
        compareBreak = "[/color]";
    }
    else if(InStr(rawTag, "icon=", false, true) != INDEX_NONE)
    {
        if(GetIconByName(Repl(rawTag, "icon=", "", false)) == None) return false;
        end = start + Len(compare);
        return true;
    }

    if(start == INDEX_NONE)
    {
        end = INDEX_NONE;
        return false;
    }

    end = GetCorrectBreakPointPos(msg, start+1, "[color=", compareBreak);

    if(!IsValidTag(rawTag))
    {
        start += Len(compare) + 1;
        return false;
    }
    return true;
}

The Correct Closing Tag

Tags must follow a nesting rules similar to parentheses () and brackets []. Say for example [color][color][/color][/color] the closing tag for the first [color] is the outmost [/color] while the 2nd [color] closing tag is contained in the innermost [/color].

The solution takes a stack state approach, we have an integer called stackstate that starts at 1 because we already found our opening tag, we do the following:

When we hit an opening tag we stackstate++;.
When we hit a closing tag we stackstate--;.
Every time an increment or decrement happens we check if stackstate > 0 if true we continue our search.
If stackstate == 0 then we found our closing tag and we can stop searching.

GetCorrectBreakPointPos() solves this problem.

// iterates each hit for a start and end tag
// finding a start tag results in increasing the stackstate by 1
// finding an end tag results in decreasing the stackstate by 1
// If we reach 0, we found our end tag position under "formatEndPoint"
// Returns postion of the matching closing tag, returns -1 if it couldn't find it
static function int GetCorrectBreakPointPos(string msg, int startpos, string formatstart, string formatend)
{
    local int stackstate, retries, formatStartPoint, formatEndPoint;
    const MAX_RETRIES = 200;

    stackstate = 1;

    while(stackState > 0 && retries < MAX_RETRIES)
    {
        InStrPeek(msg, formatStartPoint, formatstart, startpos);
        InStrPeek(msg, formatEndPoint, formatend,   startpos);

        if(formatEndPoint == INDEX_NONE) break;

        if(formatEndPoint < formatStartPoint || formatStartPoint == INDEX_NONE)
        {
            stackState--;
            startPos = formatEndPoint+1;
        }
        else if(formatStartPoint < formatEndPoint && formatStartPoint != INDEX_NONE)
        {
            stackState++;
            startPos = formatStartPoint+1;
        }
        else
            retries++;
    }

    if(retries >= MAX_RETRIES)
    {
        Print("MAX RETRIES REACHED! ABORT!");
    }
    return stackState > 0 ? INDEX_NONE : formatEndPoint;
}

With all of these in mind, we make a final function that takes all of these together to create a parser, the parser takes OCsegment as its starting inputting, on its first iteration it contains one segment that inside OCLogInfo segments array, this segment is repeatedly checked and breaked to more segments until it reaches the end of the string content.

static function bool Parse(OCSegment segment, out Array<OCSegment> segments)
{
    local int start, end, i;
    local string msg, tag;

    msg = segment.Text;
    segments.Length = 0;

    while(i < 50)
    {
        tag = GetTag(msg, start);
        if(!FindSegmentCutPoints(msg, start, end, tag))
        {
            i++;
            continue;
        }
        segments = CutSegments(segment, start, end, tag);
        break;
    }

    return Segments.length > 0;
}

Because I knew that I wanted to convert a raw string to a OCLogInfo type, I've also made another function called Build() which turns a raw string to to colorful text and icons.

static function OCLogInfo Build(string msg)
{
    local OCLogInfo l;
    local Array<OCSegment> parseResult;
    local int i, u;

    l.RawText = msg;
    l.Segments[0] = CreateSegment(l.RawText);

    for(i = 0; i < l.Segments.Length; i++)
    {
        if(!Parse(l.Segments[i], parseResult)) continue;
        l.Segments.Remove(i, 1);
        for(u = parseResult.Length - 1; u >= 0; u--) l.Segments.InsertItem(i, parseResult[u]);
        i--;
    }
    return l;
}

And there we go! We got a properly set chat message that has all its content when it comes to [icon] and [color] set correctly! Now all I have to do now is plug it into any program that can show string on your string with all these changes you applied in this string to be parsed into a new!

In this example, you can see the formatting for icons and coloring is working as intended! For emotes its transforming SamiSha: [color=lime]HI![/color] and SamiSha: [color=lime]NOPE![/color] to their appropriate color! Similar to the icon too!

Closure

Overall, this taught me a lot about the basics idea of formatting strings to be customized. This is a very basic explanation of it because the project itself has expanded tremendously, it has dynamic strings, a pre-parse approach that replaces string content dynamically with player variable settings or cross referencing similar text (such as a localization variable) and replacing key defintition that were passed in the lobby correctly in the text before parsing it with the right content.

I hope you found this post at least helpful and informative on this particular subject!

hello world

Sami Shakkour — Fri, 24 Jan 2025 18:49:00 +0000

YOOOO!!!! GAMER??!?!? My first blog post ever!!! 👋👋 I hope I will be motivated enough to write stuff cool stuff here.

something something shit inspirational speech here

PTR Patch Notes | April 1, 2021

Sami Shakkour — Thu, 01 Apr 2021 10:00:00 +0000

An April Fools collaboration for Heroes of the Storm.

Since people keep asking or assume a lot: I am not affiliated with Blizzard, this is unofficial.

Unlike the 2020 version, this was a collab with the community who made many artworks such as the Blackthorne artwork, or videos and clips to "sell" the idea something big is coming, I wrote the patch notes, creating the Blackthorne ability icons and the fake Steam screenshot.

Reading this again is kinda painful IMO as there's a lot of grammar errors, I think it would be easy to say that "English isn't my first language" but no LMAO I speak it more than my mother language!!! A lot of weird sentences and I certainly could improve on it further but thankfully despite this being a clear indicator of it being fake, people took it as legitmate nonetheless and I am very glad that people liked it despite causing massive amount of hope only to be hit with dissapointment that it is well fake crap.

What is ironic however, is that this patch note actually has some sense of truth behind, it isn't just "fake" it was based around data mined content known as classic21 which fast forwarding a few months resulted in the Legends of the Past an event that represents Blizzard's classic games.

Overall, this was the most fun I had in a collab despite being in a time where the game's content has stagnated to a halt, it showed me how passion can result in creating content that people would believe in while still be close on par with Blizzard's content quality.

Personally, I'm shit with closures so I will keep it simple: I will see you in the Nexus.

Credits:

Sami Shakkour | u/SamiSha_
Twinkle SunnySun | u/twinklesunnysun
Trolldaeron | u/Archlichofthestorm
NotBelial | u/NotBelial
Gnueless | u/Gnueless
Spazzo | u/Spazzo965

Special Thanks: Labreris

Patch Notes Link: https://us.forums.blizzard.com/en/heroes/t/50529

### BEGIN PATCH NOTES TRANSCRIPTION ###

Our next Heroes of the Storm patch has just hit the Public Test Realm and will be available for playtesting until April 8th. As always, if you encounter any bugs during your PTR play sessions, please stop by the PTR Bug Report forum to let us know about your experiences.

Quick Navigation:

New Hero: Blackthorne (Ranged Assassin)

After years of waiting his destiny on Earth, Kyle Blackthorne has finally come home to face the galaxy's most terrifying mutant monsters and goblin hordes. With brute strength, animal cunning and a lead-spewing shotgun he's on a quest to reclaim his once peaceful Planet Tuul.

With his home world saved, Blackthorne, now roaming the world again in pursuit of his destiny, finds himself in the Nexus.

King of Androth [Trait]

Basic attacks splash in a cone in front of you, each time you attack a target your damage increases against them by 5% up to 50%, lasts for 5 seconds per target.

Grenade Launcher [Q]

Fire a grenade that explodes in the targeted location, dealing 200 damage and causing the next Basic Attack against hit enemies to deal 100% additional damage and heal for 20% of the damage dealt, increased to 40% against heroes.

Hover Bomb [W]

Send forth a hovering bomb that can bounce off terrain and Structures. If an enemy hero gets close to the bomb, it detonates, dealing 140 damage in an area and slowing enemies hit by 35% for 2 seconds.

Dash [E]

Dash to the target area. While Dashing and for 0.5 seconds, Blackthorne evade enemy Basic Attacks.

Wasp [R1]

Deploy a Wasp with 300 health to an enemy Hero, dealing 240 damage over 3 seconds, then explodes dealing 400 damage to all nearby enemies and silencing them for 2 seconds.

Fire Bomb [R2]

Throw a Fire Bomb that explodes at a target location, dealing 300 damage in a large area and lighting it on fire, dealing 40 damage per second and slowing enemies by 50%. Lasts 5 seconds.

Level	Card Reward	Rarity Level
5	Wild Card	Legendary
10	Tank Card	Epic
20	Healer Card	Epic
30	Bruiser Card	Epic
40	Ranged Assassin Card	Legendary
50	Support Card	Legendary

Level (Tier)		Nova TALENTS
1 (1)	Tactical Stealth Suit (Trait)	Phase Reactor Suit (Trait)	Apollo Suit (Trait)
4 (2)	Covert Mission (Active)	Leeching Shot (Q)	On the Offense (E)
7 (3)	Perfect Shot (Q)	Anti-Armor Shells (Passive)	EMP Shot (W)
10 (4)	Precision Strike (R)	Monomolecular Blade (R)
13 (5)	Ionic Force Field (Passive)	Stim Infusion (Active)	Flashbang Grenades (Active)
16 (6)	Boom Headshot! (Q)	Breaching Charge (W)	Holo Decoy (Active)
20 (7)	Precision Barrage (R)	1000k Degree Module (R)	Psionic Efficiency (Q)	Domination (Activate)	Break Neck (Activate)

TANK	BRUISER	SUPPORT	HEALER	MELEE	RANGED
Anub'arak	Artanis	Abathur	Anduin	Maiev	Falstad
Cho	Dehaka	The Lost Vikings	Brightwing	Murky	Gall
Diablo	D.Va		Kharazim	Samuro	Kael'thas
E.T.C.	Hogger		Tyrande	Zeratul	Lunara
Johanna	Imperius		Whitemane		Probius
Stitches	Thrall				Tracer

TANK	BRUISER	SUPPORT	HEALER	MELEE	RANGED
Blaze	Dehaka	Abathur	Ana	Maiev	Azmodan
Diablo	D.Va	Medivh	Anduin	Illidan	Chromie
E.T.C.	Sonya	The Lost Vikings	Li Li	Qhira	Genji
Garrosh	Thrall	Tassadar	Uther	Samuro	Nova
Mal'Ganis			Whitemane	Valeera	Li-Ming
					Tracer

Level (Tier)		D.Va TALENTS
1 (1)	Hit the Nitros (Q)	Torpedo Dash (Q)	(!)Pro Moves (Trait)
4 (2)	Diverting Power (W)	Concussive Pulse (W)	Nanoweave Suit (Trait)
7 (3)	Aggression Matrix (W)	Fusion Generator (W)	Nuclear Option (E)
10 (4)	Bunny Hop	Micro Missiles
13 (5)	Dazer Zone (W)	Ablative Armor (Trait)	Emergency Shielding (Trait)
16 (6)	Exposing Weaknesses (W)	Pew! Pew! Pew! (R)	GG, WP (Trait)
20 (7)	Nerf This! (E)	MEKAfall (E)	Focused Fire (R)	Stop and Pop (R)

Sami Shakkour's Blog

String Parser

Background

Limitations

Prologue

Introduction

Finding an Opening Tag

The Correct Closing Tag

Closure

hello world

PTR Patch Notes | April 1, 2021

Quick Navigation:

New Hero: Blackthorne (Ranged Assassin)

King of Androth [Trait]

Grenade Launcher [Q]

Hover Bomb [W]

Dash [E]

Wasp [R1]

Fire Bomb [R2]

Introducing Cards

Steam

General

Collection

Nova Rework

Heroes

Tank

Anub'arak

Cho

Diablo

E.T.C.

Johanna

Stitches

Bruiser

Artanis

Dehaka

D.Va

Hogger

Imperius

Thrall

Support

Abathur

The Lost Vikings

Healer

Anduin

Brightwing

Kharazim

Tyrande

Whitemane

Melee Assassin

Maiev

Murky

Samuro

Zeratul

Ranged Assassin

Falstad

Gall

Kael'thas

Lunara

Probius

Tracer

Bug Fixes:

PTR Patch Notes | April 1, 2020

Quick Navigation:

New Hero: Mercy (Healer)

Valkyrie Armor

Healing Stream [Q]

Damage Amplifier [Q]

Caduceus Staff [W]

Guardian Angel [E]

Mass Resurrection [R1]

Valkyrie Mode [R2]

Nexus Anomalies

Quick Match

Unranked

General

Toys 2 Event

Storm League

Design

Heroes

Tank