Scoreboard Creation Tutorial Part I

[riesscar]

Part 1

Creation of scoreboards and overlays differs from other Fifa modding. This is because - although you will need to make simple textures - it is almost entirely a process of hex editing. In this tutorial I will show you the steps to create a custom scoreboard.

Here is the scoreboard we will attempt to create:

1.) What you will need:

- Some sort of hex editing software. Hxd is a good option. There is no need to pay for a program, as there are plenty of free options
- Fifa Editor Tool
- Photoshop
- The following .big file: https://drive.google.com/file/d/1SMh-tvCfkrbeTq-Qy8YVAEt6Y1cltsvR/view?usp=sharing

2.) Important things to know:

When editing hex code, it is important to never delete or add to the code. You can only alter it, as deletion or addition of code will almost certainly corrupt the file.

3.) Limitation

EA has moved away from simple scoreboard files like the one we will be using. Now they utilize more complex series of calls from one file to another, and they use a plethora of small snippets of textures to dynamically create the scoreboard. This allows for transition effects. We will be using a scoreboard file from FIFA 19 (that will still work with subsequent titles). It may be possible to edit the new scoreboard files, but I am not knowledgeable enough about hex editing/coding to figure out how to do so.

4.) Why scoreboards require hex editing in addition to texture editing

Lets look at what happens when I only replace the texure of an FA cup scoreboard that I made previously:

Looking at the image above, lets look at what we will need to change in the hex code to make this scoreboard work:

1) The team names, score digits, team color bars, and the clock are all in the wrong locations.
2) The team name colors are black while they should be white, and the clock is white when it should be blue (it will be in the center)
3) The team color bars are not the correct shape (they whould be rectangular and the same height as the scoreboard
4) The font is not correct
5) We need to add the league crest to the middle center

The first issue will require moving the items on an x/y axis by using a hex to floating point calculator. This process is the most time consuming and will require the most trial and error.
The second issue requires that we change the coded color of the items by editing the hex code.
The third and fifth issues requires that we edit the textures contained in the .big file. This is a simple photoshop process.
The fourth issue is a simple edit of the decoded hex

5.) Hex code addresses

So the obvious question is: so what part of the hex code needs to be edited? We do not know that most of the code does... we only know where certain values are in the code because the hex addresses have been determined (not by me). Here is a spreadsheet of the hex addresses of the values you may want to edit:

SCOREBOARD_offset.xlsx

Sheet1 4C0C-4C0F (4D4C - 4D4F),font all move X 4C10-4C13 (4D50 - 4D53),font all move Y,Increasing Integer Moves it Down/Decreasing Moves it Up 4BBC-4BBF (4CFC - 4CFF),away team color bar X,Decreasing Integer Moves it Left/Increasing Moves it Right 4BC0-4BC3 (4D00 - 4D03),away team color bar Y,I...

docs.google.com

Note that I am in the process of updating the hex addresses... for some reason the program with which the hex addresses were determined lists different addresses than Hxd and other hex editors.

Let's begin by changing the team name font color from black to white. We look at the spreadsheet and see that the hex address for the away team font color is 9C0-9C3 (B00-B03 in HXD) and for the home team is A20-A23 (B60-B63 in HXD). So what do these numbers mean? Lets look at the .big file opened in Hxd so that we can see how to use these addresses:

Note that I have only taken a screenshot of the first four columns for the purpose of explanation and clarity... there will be addresses which reference rows beyond '03'.

So because the address for the away team font color is B00-B03, we need to edit the hex offsets B00, B01 and B02. Note that there is a reason I did not list B03... hex values are six digits long (hence the name hex). The characters which follow the hex code at the addresses we need to edit do serve a purpose, though. The 'FF' signifies that the preceding six digits were color values. As you can see, the values are currently '00 00 00' for both addresses (so it reads '00 00 00 FF'). The value is entered as a hex color code, and code for black is '00 00 00'. The code for white is 'FF FF FF', so this is what we will change the values to: 'FF FF FF' (which will read 'FF FF FF FF')

Looking up hex color codes is very simple. You can simply set the color in photoshop and the hex code is displayed below. Let's say that I wanted the font to be yellow... I would select the color in photoshop that I want and below you will see the hex color code:

The color code values are Red / Green / Blue. Because the code is 'FF EA 00', that means that the value for Red is 'FF', the value for Green is 'EA' and value for Blue is '00'. The way that the code is entered into the .big is with these three reversed in order, though. This is important to remember. So the values would be entered B / G / R... therefore, if I wished to made the team names yellow I would enter 00 EA FF (which would read '00 EA FF FF').

After editing the team name color value, let's save and ensure that our changes have taken effect. This is one thing that makes scoreboard creation laborious: you will need to launch the game and begin a match to see each edit that you make.

As you can see in this screenshot:

we have successfully edited the team name. Now we need to do the same for the score color values and clock (which will be blue)

Finally, please note that although you will see a three values for the score color, we will actually be taking an easier route which will be to edit the following address: 26098-260A7. When you navigate to this address (which is at the end of the file, so just scoll to the bottom and then scroll up to it) look to the right where where the 'Decoded Text' is. You will notice that it the code is displayed in normal letters, and it currently is "COLOR_TEXT_WHITE". We are going to edit this from white to navy blue... so place your cursor in front of the 'C' in the decoded text column and being typing the following (it will automatically overwrite the code when you type): "COLOR_TEXT_NAVY_BLUE".

Please let me know if this tutorial structure will work. If you are finding that this is difficult to follow let me know so that I don't waste time making Part 2.

 

[FIFA Editor Tool]

I'm sure many people will appriciate this tutorial. Looking forward for part 2!

 

[christophe83460]

very good mate,long time that I no longer see a tutorial thank you

 

[shone90]

Now i can make scoreboards too
Thank you, good explanation.

I always love to see your tutorials, really detailed and easy to understand (with practice of course, you won't learn anything unless you do it yourself).

 

[riesscar]

Now i can make scoreboards too
Thank you, good explanation.

I always love to see your tutorials, really detailed and easy to understand (with practice of course, you won't learn anything unless you do it yourself).

very good mate,long time that I no longer see a tutorial thank you

I'm sure many people will appriciate this tutorial. Looking forward for part 2!

Thanks so much for feedback and kind words! It helps to know whether I am being clear... sometimes it's difficult to find a balance between being clear and being unnecessarily slow repetitious.

 

[riesscar]

Part 2.

Welcome to part 2 of a 4-part tutorial that will explain custom scoreboard creation. This tutorial will assume that you have read Part 1, so if you have yet to do so please read it.

* I added a link to the .big that I am using at the start of Part 1

1) Correction from part 1

At the end of the tutorial I stated that in order to change the score digit colors we would be editing the decoded hex from 'color_text_white' to 'color_text_navy_blue'. This instruction is incorrect, because we want to keep the score digits white, and - because we want to change the clock digits to navy blue - we will need to edit each of the 'time color' offset addresses found in the spreadsheet.

I have edited the necessary hex address offset values. The color blue that the clock digits need to be changed to has the following hex code: '08 00 52'

Therefore, I edited the values found in the spreadsheet:

And changed each value at the specified offsets to '52 00 08' (remember to enter as B G R). Here is what the hex code looks like after making the edits to these address offsets:

2. Scoreboard textures

There are not many scoreboard textures slots in the .big file we will use. Let's take a look at the scoreboard textures by opening Fifa Editor Tool, then navigating to the following file in the 'Legacy Explorer': data/ui/game/overlays/Generic/overlay_9002.big. Now import your .big to replace this file.

Double click 9002.big and you will see a list of files to the right, some of which are .dat files, one of which is an APT1 file and the rest of which are .dds files. We are only interested in the .dds files. The .dat files contain the hex code, but we will edit that in Hxd. The only textures that we need to concern ourselves with are 10, 14 and 30. Texture 10 is the main scoreboard texture. Let's go ahead and correct our previously imported texture so that it has the league crest watermark above the main texture:

In order to add the crest, I had to move the main horizontal bar of the scoreboard down. This is because with textures inside of .big file, the texture must comport to the texture size specified by the .big code. One cannot simply increase a texture size in order to add more graphics... if you import the wrong size texture into your .big you are likely to corrupt the file or at least experience issues. This is because the game cannot dynamically adjust textures when they are compressed into an archive like a .big file.

Now that we have edited the '10' texture, we will import it using Fifa Editor Tool:

Texture '14' is the extra time popup texture. You may or may not want to have this texture depending on the scoreboard we are making. In this case, we do need to have a texture here, because if you take a look at the scoreboard we are intending to create it is going to be necessaryt that we add a light blue box for the add on time amount. Therefore, we will create this texture by exporting texture 14, editing using photoshop:

And then we will import it back using FET (Fifa Editor Tool).

We will do the same thing with texture 30. Recall that one thing we needed to was to change the color bars to make them vertically oriented rectangular bars. We do so in Photoshop:

We will probably need to edit the width of the texture after looking at it in game.

One final note about scoreboard textures: It is a good idea to create your textures first. That way you will know how far to move things around when you are making your floating point edits. Similarly, it is a good idea to set your scoreboard font before you begin trying to align all of the scoreboard components, because changing the font often changes the scaling and thereby the location on the screen of the scoreboard components.

3. Editing the scoreboard font style

This is a very simple hex edit, as we can take advantage of the fact that it is decoded hex. One thing to note about scoreboard fonts is that we are limited to those that are already in the game. A list of fonts can be found in FET at the following address in the legacy files: data/ui/fonts. You will see a number of them, and they can be exported and loaded using a ttf font viewer to give you an idea of what they look like. You are going to find times when you just can't find a perfect option. This is a limitation we face. You can try to import a font, but note that this will sometimes lead to ludicrously large font sizes.

In order to edit the set font style, lets first export the .big file we just imported our textures into. Now lets open it in Hxd and begin scrolling down until we see the following text in the 'decoded text' column:

As you can see, the currently set font is TheFACupHeadline-Rg. Let's change that to MLS-Bold. We will do so by placing our cursor in front of the 'T' in the decoded hex column and beginning to type. Once we have typed MLS-Bold, we need to remove the rest of the font type that was specified before. We will do this by going back to the hex code and entering 0's in all of the remaining columns (until it reads ....... in the decoded hex column:

Now we need to repeat this step for the same line below. In the end, your code will look like this:

Let's save the .big and reimport using FET. Now let's launch the game and see where things stand:

* Note that inbetween Part 1 and 2 I edited the values of several scoreboard location values for the purposes of Part 3, where we will review how to move things around on the scoreboard. Normally the changes we have made thus far would not change the alignment/location of the components of the scoreboard

In part 3 we will review how to move the team name, score digits, clock, and extra time indicators around the scoreboard. It is likely to take me a few days to complete Part 3, as this part will require the most trial and error.

 

[eca2424]

Appriciate this tutorial. Thank you.

 

[BlueBandicoot]

Amazing tutorial/s Riesscar. Thanks. What a great way to empower the community.

 

[riesscar]

Part 3

Welcome to the third part of my four part custom scoreboard creation tutorial. This guide assumes that you have already read parts 1 and 2, so please do so if you have yet to.

In this last part of the tutorial we will review how to move scoreboard components around... this allows you to realign components, move the clock, color bars, extra time indicator, score digits and team names so that they will fit your scoreboard texure.

Before we delve into things, lets review a few concepts that are necessary to understand in order to grasp the process.

1) Coordinate Plane

Overlays in Fifa 22 are a certain height and width (defined by the .big), and the location of each component within the scoreboard is defined by using the concept of a coordinate plane. Most of you will remember x/y coordinate planes from school, but for those who do not remember or need a little refresher on how the values work we will review briefly.

Here is a coordinate plane example:

X values specify the location of a point on a horizontal axis, while y values specify the location of a point on a vertical axis. Increasing the x value will move the point to the right, while decreasing it will move it to the left. Increasing the y value will move the point up, while decreasing it will move the point down.

2) Hex to floating point integer

Blocks of hex code which specify location of an object on a coordinate plane can be converted to an integer. This integer moves an item either right/left/up or down depending on whether the address is for moving a component along the x or y axis and whether the integer value is positive or negative. This is actually where things become a bit confusing. Logic would tell us that a positive or increase in value of an integer moves the component either to the right or up, while a negative or decrease in value of an integer moves the component either left or down. This is not necessarily the case, though. It is very frustrating, but for some reason the way that it is coded makes it so that increasing the offset integer value for some components moves them in reverse. Let's take a look at the methodology of moving components on the x/y axis and at an example of the reverse values about which I just wrote.

 

[riesscar]

3) Moving the color bars up and down

Open your .big file and scroll to the hex addresses for moving the home and away color bars on the y axis. A look at the spreadsheet shows that the addresses are:

Scrolling down to these addresses we find these two chunks of code:

If we highlight either of them, we can look to the right in the data inspector and - if the code is in fact an integer - we can easily see it. In this case, the code '00 00 48 42' converts to an integer value of '50':

Let's pause for a moment so that we make sure we understand what this value means. This is a y-axis offset with a value of +50. This means that from wherever the original location of the color bar was, a value of +50 has been added to move it either up or down on the overlay. This is the value we need to edit in order to move our color bars down and make them level with the main scoreboard texture. This component is an example of what I referred to as reverse values for the integer. What I mean by this is that - although our color bars are too high up the y-axis and logic would tell us to reduce the value in order to lower them - the color bar y-axis offsets are reversed, such that increasing the value of the integer will move them down, while decreasing will move them up.

* Note that as I create this tutorial I am updating the spreadsheet to specify which components are reverse coded. If you see 'Up -' 'Down +' to the right of the offset, that means the values are reversed.

This leads us into the time consuming part of scoreboard creation... trial and error. There is no way for us to know exactly what value will move the color bars into the right location. We have to make incremental changes to the integer (I usually go in steps of 20). After each edit, we will need to launch the game and begin a match in order to see the result. The first edit I made was to change the 50 to 120... this is super easy, as all that we need to do is delete the '50' in the data inspector, then type 120 and hit enter. Doing so will automatically change the hex code to this value:

Now we save and import the .big into FET and launch the game. Upon doing so, we can see that the value of 120 moved the color bars too far down:

I then exit the game, go back to my file and change the integers for the color bar y-axis values to 100. Again we save and launch to see the result:

Getting closer, but still not quite right. We exit the game, go back to Hxd and again edit the integer values... this time only by 5 (because they are close to being in alignment). So after entering 95 as the integer values for the offset, we launch the game and:

The color bars are now at the correct location on the y-axis, but a new issue has presented itself: the color bar texture height is slightly larger than our scoreboard texture. We can address this in one of two ways: we can trim a bit of the color bar texture to make them shorter or add a bit to the scoreboard horizontal bar to increase its height. I am going to suggest that we increase the height of the main horizontal texture. I say this because if we shorten the color bars we will have to do more adjustments to the offset integers.

After adding 3 pixels to the bottom of the main scoreboard texture (Texture 10), importing it and launching the game, we can see that we now have successfully aligned the color bars on the y-axis:

Of course we still need to move each one along the x-axis to its correct location, but we will do so after aligning everything correctly on the y-axis.

4) Moving the clock up and down

When it comes to moving the game clock, we have two ways we can do so. We can either move each digit on the clock separately (specified in the spreadsheet), or we can move all of the clock digits at once. We are going to want to use the latter option, because the clock is already aligned and we ought not make things more complicated if we can avoid it. Therefore, we will edit the hex offset values at the address specified in the spread sheet:

Scrolling to the address and highlighting the data at the specified address shows us that currently the integer value is 100:

This offset is reverse coded like the last one, so - because the clock is currently below the scoreboard and we wish to move it up - we need to decrease this integer. I recommend doing so in increments of 20 until you get it close, and then moving by increments of 5. After some trial and error, we find the correct integer value to align the clock on the y-axis.

I first edit the value from 100 to 80:

Then - because I know that it needs to go at least twice the distance up as it just did - I test the integer at value 40:

Still not there... let's go all the way down to 0:

Still too low. This means that the integer will need to be negative number. Let's start with -20:

Now we are getting close; however, there is one issue that is apparent: we will not be able to see the clock once it overlays the main scoreboard texture because they are the same color. For this reason, we will edit one of the clock digit colors to white and then switch it back once we have the clock aligned. I will go back to the .big and navigate to the one of the clock digit color offsets and set it to 'FF FF FF' for now. Now we need to keep pushing the clock up. I think the amount of movement from the 0 to -20 is about what we need, so let's go ahead and reduce the integer for the clock offset by another 20... making the value -40:

Now we are very close. As you can see, the digit that I set to be white allows us to see the clock, and - because all of the digits were already aligned - we can deduce where the rest of the digits are. We still need to push the clock up slightly, so we'll begin moving in increments of 10. Our last value was -40... so we need to go back into Hxd and edit the integer to be -50. And again, we save - import - and launch to test:

As you can see, the clock is now centered in the horizontal bar. We still need to move the clock to the left so that it sits within the the white center of the scoreboard; however - as I mentioned - we will do that after aligning everything on the y-axis.

5) Moving the team names and score digits up and down

This is going to be the exact same process, but with the hex address specified in the spreadsheet for moving all fonts on the y-axis:

In the interest of brevity, we will only review the first step in the trial and error adjustment process. I will also show what final value was determined and a screenshot.

We first navigate to the hex address boxed in the image above, highlight the code and take note of the currently set value:

As you can see, the current offset has a value of 100. Because this is another one of the reverse code components, we need to decrease the integer in order to move the components up. * Note that I remembered after making the clock changes that the clock is included when moving all fonts... therefore I should have done 'Font All Move y' prior to any edits of the clock offset. I reduced the integer value from 100 to 45 (originally 50, but it was a bit low so lets skip straight to 45), and now the clock is up too high. That is ok. The more we do this the less times we make these mistakes (I am not an expert btw lol). Here is how things look after editing the integer for all fonts on the y-axis to 45:

As you can see, the team name and score digits are now aligned correctly, but - due to my oversight - I need to bring the clock back down. Given that I brought all font up by reducing the integer by 55 (from 100 to 45), it stands to reason that I can bring the clock back into line by increasing the integer for the all time move address value by 55. Let's see:

Success! We now have all of our components aligned on the y-axis. The last step will be to go through the same process that we just did, except that we will be moving components along the x-axis (right and left).

I will cover moving items on the x-axis in Part 4, which I will release tomorrow. I want to go ahead and release this, because many of you probably get the idea at this point and can apply the principles we just reviewed to editing the x-axis offset values.

Before finishing, I realize that this part of the tutorial may not be as clear and easy to follow. I knew that this would be the case, because I am making the edits as I make the tutorial... therefore, it was more difficult to write everything in a planned/organized manner. If you have any need of clarification at all, please let me know. I am here to help, and I am open to suggestions on ways to make this tutorial as easy to follow as possible.

Until tomorrow, then... Cheers!

 

[riesscar]

Oh... I also wanted to mention that it will be useful to recheck the spreadsheet after I finish the tutorial, as I am updating and making it more clear and informative as I write this. Therefore, downloading it now will not provide you with the most up-to-date list of addresses

 

[christophe83460]

I will try this when I finish my project! Thank you, awesome tutorial.

 

[hoangha7823]

I am trying to make scoreboard based on afc asian world cup qualifiers according to your instructions
but when I change the color of the team name or the color of the time it is thrown out of the game. There seems to be a difference between my file and your tutorial file. I hope you will assist me in this.

 

[Triskele Esports]

Great!
Amazing tutorial.
Thank's for your job.

I started my own scoreboard but at the moment I'm having 3 problems:

1. I entered "COLOR_TEXT_NAVY_BLUE" but it turns black;

2. the X-axis of the score doesn't move anything, neither to the right nor to the left. The problem also occurs in the individual elements of the score ("home", "-", "away");

3. I can't find the address for the timer "hundred" (000:00 this is the primary problem now for me XD )

I haven't worked on ExtraTime yet.

Last question, is there the possibility to insert the bar of the second color of the teams?

Thanks

 

[riesscar]

Great!
Amazing tutorial.
Thank's for your job.

I started my own scoreboard but at the moment I'm having 3 problems:

1. I entered "COLOR_TEXT_NAVY_BLUE" but it turns black;

2. the X-axis of the score doesn't move anything, neither to the right nor to the left. The problem also occurs in the individual elements of the score ("home", "-", "away");

3. I can't find the address for the timer "hundred" (000:00 this is the primary problem now for me XD )

I haven't worked on ExtraTime yet.

Last question, is there the possibility to insert the bar of the second color of the teams?

Thanks

1. Regarding the color_text_navy_blue coding, understand that I made a mistake in the tutorial... as this will change the score color and not the clock. To get an idea of what the color will look like, navigate to 'data/ui/themes/FIFA.xml' and then scroll down until you reach the '<color_set>'. Below it you will see a number of different defined colors and their names. Copy the hex code into photoshop color selector in order to preview the color.

2. I am also having trouble with moving the score digits on the x-axis... in fact, this is why I have not released Part 4 yet. It seems that the offset addresses I have are incorrect. I am going to see if I can reach out to someone more knowledgeable to obtain the correct addresses.

3. I realized that this was missing when I was making Part 4 as well. This is going to be another offset address I need to determine before I can finish the tutorial.

4. Unfortunately the .big we are using does not have a secondary color lookup call coded into it, so we are limited to the primary color only.

I am trying to make scoreboard based on afc asian world cup qualifiers according to your instructions
but when I change the color of the team name or the color of the time it is thrown out of the game. There seems to be a difference between my file and your tutorial file. I hope you will assist me in this.

Can you show me the code that you entered in order to change the color. Did you delete or add to the code? Remember that you can only overwrite previously existing code.



Regarding the state of the tutorial:

While creating the final part of the tutorial, I realized that my x-axis score digit offsets are incorrect... in addition, we are missing the offset address for the clock digit referenced by @Triskele Esports above.

It sucks because I was almost finished:

The score digits are the last thing I need to move to complete the tutorial, but now I have to figure out why the offsets are not correct - or rather, what the correct offsets are.

 

[Triskele Esports]

@riesscar
I looked for the offsets in the HEX and found the hundreds at the address 46BC-46BF for the X axis and 46C0-46C4 for the Y axis

At address EF8-EFB you change the color of the hundreds.
I can't find the color of the extratime
Try...

 

[riesscar]

@riesscar
I looked for the offsets in the HEX and found the hundreds at the address 46BC-46BF for the X axis and 46C0-46C4 for the Y axis

At address EF8-EFB you change the color of the hundreds.
I can't find the color of the extratime
Try...

I messaged KO, who is a very talented scoreboard maker. Hopefully he or she responds with the correct score digit x-axis offsets. If not, I’ll need to begin testing different addresses (so if you find it, yay!)

 

[hoangha7823]

Here are my before and after pictures

 

[hoangha7823]

And it shows up in the game like this

 

[riesscar]

Here are my before and after picturesView attachment 79929View attachment 79930

I do see the problem, but I also want to give you a heads up about your current plan: the way that the scoreboard you are creating is setup is that the color bar is the entire field in which the team name is placed. I would imagine that the reason that 'JPN' is in white and 'VIE' has to do with the team color and visibility. In other words, the home team name will probably not always be yellow... which means that coding it to be yellow is probably not going to be a good idea (if the team color is yellow, it will make the team name illegible). Unfortunately, there is no way to switch the color of the team name according to the team color... I ran into this issue making my NBCSN scorebaord:

What I ended up doing was setting the team name to be gray... that way if the team color is white the name is still visible (albeit to a lesser degree).

The issue you are running into is how you are exporting the file from FET. Rather than exporting the 0.dat file, export the entire .big:

Now open this file using Hxd. Scroll down to the address B00. Your code will look like this (you did code the color correctly, just in the wrong place.... this is because the offset address is different if looking at the code with only 0.dat as opposed to the code of the entire file):

Looking at the scoreboard image you posted, I would code the clock color like this:

It looks like you are going to need to edit the score color to be color I coded above also. Let me know if you need help with that