How To Modify The BF2 Flash Menu
Not entirely sure if there is already a flash menu editing tutorial around, so I'm going to write up one here to show you the basics of modifying the Battlefield 2 flash menu, which is used in the main menu (where the server browser and stuff is), and the loading menu (what you see when you are loading).
What you need: -
- Adobe Flash CS4 (Though you can use CS3 or MX, but this tutorial is using CS4)
- BF2 v1.5 Flash Menu files
- Knowledge in ActionScript 2, image editing, and basic BF2 modding skills
- Some kind of idea on how to make a good UI (User Interface)
- A lot of time to spend
Now while I'm most definitely not the best person around for giving advice on how to design the best UI, I have picked up on a few things since I started making the Project Reality interface, which I am the first to admit is kind of poor when going by some of these design tips. But, I'm going to say a few words on UI design anyway.
The UI is probably the most important aspect of a game. Without it, the user would not be able to launch into the 3D world, they wouldn't be able to find servers, they wouldn't be able to configure options. It's the first thing the user sees when they launch your game, and it's the first thing that they're going to base an impression off. If it's poorly designed, some users won't even make it into the 3D world, no matter how awesome it may be.
So, it's pretty important to know what the user wants, how they want it, and what they want to do with it. Put yourself in the users shoes, they first load up your game, what is the first thing you want to draw their attention to? Where to join an online server? How to configure their profile settings? Some latest news on your game? If things are too cluttered, they won't know where to begin. You want to keep the interface clean and simple, so an 8 year old, or an 80 year old, can figure out what they need to do and where they need to go to do it.
Another real important point is consistency. If you have a "back" button for example, it should be in the same place always. Say you go into an online server list, and the back button to return to the main menu is in the bottom left of the UI. Then you go into a LAN server list, and the back button is in the top right. The user will originally expect it's in the bottom left (or top right if they visited the LAN list first). They will go WTF, and have to spend time searching for it. This is not good! The user needs to be able to anticipate where elements are, before they get there, so they spend the least possible time in your menu. That's right, the less the user looks at your UI, the better, no matter how much you want to show off your work!
Well anyway, there are some real basic tips to UI design. If you want more help, there are plenty of guides written by people more professional than me out there on the internet.
Your First UI:
So, you want to design an awesome UI? Great! So what now?
Designing a UI takes a LOT of planning. It's not one of those things that you can just jump into and design as you go. You need to plan out exactly what you are going to do first. This is not only so you can visualize your menu and make adjustments quickly and easily, but also so you get a good consistency across all UI screens. For me, I use Photoshop, since it's quick and easy to position elements, and you can then get coordinates of the elements later on to insert into Flash. But if you have a better program you're good at using, then go ahead and use that!
For example a prototype I made in Photoshop a few weeks back of a potential Project Reality: Vietnam menu, though it's probably never going to end up happening...
As you can see, the fonts are the same, the colors are the same, the structure is the same, elements are positioned in common positions, etc. From here, I can easily see how the menu will look like finished, and can get feedback before I even start the real work.
But of course, for your first UI, you might not want to delve into something as complex as a complete redesign of the BF2 UI. Maybe you might start simple, add in a new screen, replace BFHQ with a manual, update the layout of the server browser, whatever. The process however still remains the same, you should have a clear idea on what you want to do first, and the best way to do that is to graphically visualize it.
Idea to Implementation: Alright, so you have your idea, you've got a great plan, now how the hell do you implement it. This is of course the hardest part, since it is very rare for all your great ideas to be possible. So you have to be willing to make compromises, and be willing to change your idea if needed, or scrap it completely.
Now here is where the fun begins, and where this tutorial really gets into business!
Open up the .fla in Flash, for this tutorial I'm going to be using the main Menu. Now the first thing you're going to see, is Font Mapping. This is because you probably won't have all the fonts used in the BF2 UI installed. The bad thing is however, I can't really link you to the fonts you need, firstly, because I can't remember, and secondly, because some fonts cost money, and I'm sure it's not very legal to just hand these out for free. But all you need to do is open up trusty Google, and search for the missing font, I'm sure you'll find a free copy of the font somewhere. The fonts are pretty important to have, if you don't have them, I'm pretty sure the in game fonts get screwed up (even though they use the fonts in fonts_client.zip, it still screws up). One thing to note however, the names may not necessarily be the exact font needed. For example, I always get a "missing font" called tahoma_11pt_st. This is simple enough however, it's just Tahoma, so map it to Tahoma, it'll sort out the rest.
Once you've gotten the fonts all sorted out, re-open the fla, and you should end up staring at the in game main menu.
Now what? First up you need to ensure that the publish settings are correct, they should be, but you never know.
Open up Publish Settings:
Image File: MMimage4.jpg
And make sure it looks like the following:
Image File: MMimage7.jpg
If it is, all is good. You can do a test publish and test it out ingame at this point.
To do this, Publish the file:
Image File: MMimage6.jpg
You can now paste in the created .swf file into menu_client.zip\External\FlashMenu
Image File: MMimage10.jpg
Now load up your mod, you should hopefully not crash, and you should be seeing your menu. Obviously it looks exactly like the original menu, but you can test it is indeed your custom menu by seeing if a little bug fix I created is working.
Go into Options -> Audio, and start the microphone test. On the original BF2 menu, the green volume bar does not update as you speak, however on the custom menu, it does:
Image File: MMimage8.jpg
If that works, well you've successfully imported a custom flash menu into your mod, yay!
Alright, of course your want to actually do something though, so lets get into some basic things. BF2's menu uses various classes to create it's parts. It also uses lots of objects within objects. So lets try something real basic and create an MMimageContainer.
What I do, is find an existing element of the same type, copy/paste it, then modify it to give me something new. So lets do this.
First up, we need to find an MMimageContainer. I know there are MMimage containers on the internetJoin page, so lets navigate to that page:
Image File: MMimage13.jpg
And then open up the main internetJoin object by double clicking on it (just double click on the big grey server list box and you should be able to open it up):
Image File: MMimage11.jpg
Now I know that the GameSpy logo down the bottom uses an MMimage container, so I'm going to select that object, and copy it via Ctrl-C.
Image File: MMimage12.jpg
I'm going to return to the root object (click "Scene 1" on the Edit Bar):
Image File: MMimage14.jpg
And I'm going to return to the "none" page, make a new layer and fix up the keyframes so it only will show on this page:
Image File: MMimage15.jpg
And finally, Ctrl-V to paste it in. And after a quick resize of the MMimageContainer with the Free Transform Tool, it'll look something like this:
Image File: MMimage16.jpg
Now let's open up the object's Actions panel (F9 with the object selected):
Image File: MMimage17.jpg
We want to change the "MMimageURL" parameter to something different. The MMimages are rooted out of "menu_client.zip\external\flashmenu", but can be changed to the mod movie directory for bik movies with a ?, or the root mod folder with #. For example: "?menu_loggedin.bik" will give the MMimageContainer the mods/bf2/Movies/menu_loggedin.bik" movie to play. But anyway, I am going to give it an Australian flag which exists already in BF2; "menu_client.zip\external\flashmenu\MMimages\flags\AU.png". So, I will update the "MMimageURL" parameter to "MMimages/flags/AU.png":
Image File: MMimage18.jpg
Lets recompile and update the zip with the new swf, and see what we have. And... For some reason it crashes now:
Image File: MMimage19.jpg
Bloody hell, so for some reason, the fonts have screwed up. This tends to happen some times, and it's bloody annoying, but it shouldn't happen much. To fix this, simply copy some existing font to be called Titles_11. So, I'm going to use DynamicText_11. Copy fonts_client.zip\DynamicText_11.dds and .dif, and rename to Titles_11:
Image File: MMimage20.jpg
Don't forget to do the exact same in the fonts_client.zip\800 folder, otherwise if a user has 800x600 for their ingame resolution, it'll crash. Repeat the process for any missing fonts you get (as I said, real annoying), but once you've done it once, it shouldn't happen again, unless you start messing with fonts, which isn't covered in this tutorial. Might make one for that, but not right now... Anyway, let's try again...
Image File: MMimage21.jpg
And wow, will you look at that, it works . Obviously you would have an MMimage sized correctly to the size you gave the MMimage element, in my case, 390x330px, but it's a basic example.
And that is the real basics. For text or buttons, you would find a textContainer or standardButton, and modify the localizationId to match the ID given in your localization utxt files. For example: "localizationId = "MAINBUTTON_2";" would make the button be called "MULTIPLAYER", since that is what that string is defined as in the localization files.
I'm not going to go into much more detail, since this tutorial is way too long already and I'm getting tired, but if in doubt, try and find something already existing to work off.
Though, actually, I should briefly visit one thing. As I said earlier, most of the stuff is defined in ActionScript classes, like MMimageContainer, textContainer, standardButton. Where "most" of them get their colour from is from another ActionScript class, "dice.UI". To modify this, open up dice/UI.as (where the .fla is), and you'll find all the colours defined at the bottom. The colours are in decimal, you can have them in hex like I do if it's easier, just have it like "var m_UIBGColor = 0xFF0000;". To find what colour is used where, you'll have to do a bit of searching, and this is where you really need to know your ActionScript 2 to be able to figure out wtf is going on.
So if you wanted to change the background colour of the StandardButton, you would find the "LCD" number of the button (in the bit where you define the localizationId), in the multiplayer button's case, it's 4. Then we open up "dice/UIs/Commons/StandardButton.as", fine "else if (m_useLCD == 4)" which is on line 139, and see that "m_buttonBGColor = m_UIBGColor;". Since StandardButton.as extends upon UI.as, the variable m_UIBGColor is defined in UI.as, which you will find is "var m_UIBGColor = 4013373;". Changing this to "var m_UIBGColor = 0xFF0000;" will give buttons of LCD = 4 a red background:
Image File: MMimage9.jpg
Other Random Stuff: Just some super quick things that you should remember when you're going through this stuff (you probably already know this stuff, but you never know). - Always name your variables something that is logical. Don't call something that stores a boolean value of whether the user has visited the multiplayer screen before "var123". Instead call it something like "hasVisitedMultiplayerScreen". It'll make things easier in the long run, even if it takes longer to type. - Keep your image structure logical. Store images used in the background in a background folder. Store flags in a flag folder. Kind of default stuff. - Google Google Google! Really, it helps way more than you think. Someone is bound to have encountered the same problem as you before. It's just up to you to try and translate the solution into something that will work for the BF2 menu system.
My method of making BF2 fonts, using AngelCode's BMFont with my own custom conversion script.
Download files: BF2_FontCreatorScript.zip (If the included BMFont doesn't want to work, download it from the above link to their site)
1. First up, open BMFont/BMFont.exe
2. Open up Options -> Font Settings
3. Select the font face, size, all that sort of stuff
Image File: AM1.jpg
4. Select the characters you need
5. Open up Options -> Export Options
6. I've got mine set up like the following. Here, the only thing you probably want to modify is the width and the height.
Image File: AM2.jpg
7. Go to Options -> Visualize.
8. Here, you want to make the output as small as possible, while fitting it all on 1 sheet. So at 256x256, I can go a lot smaller:
Image File: AM3.jpg
9. Go back to the Export Options, and change the width and the height to be smaller. Remember that the number must be a power of 2.
10. And that 128x64, it's much better:
Image File: AM4.jpg
11. Now go Options -> Save Bitmap Font As. I'm going to save it as testFont.fnt on my desktop, but at the moment, it really doesn't matter what you call it. You will end up with a .fnt and a .tga file.
Image File: AM5.jpg
12. Now, Shift+Right Click the .fnt file, and go Copy As Path:
Image File: AM6.jpg
13. I'm not 100% sure if this is possible in XP or Vista (I'm on 7), but basically what you want is a path in your clipboard that looks like this: "D:\Documents\Desktop\testFont.fnt"
14. Open up Script/fonts.bat
15. It will ask for a path, here is where you type in the location you just got:
Image File: AM7.jpg
16. Now it will ask you to type the name of the font. I am going to call it testFont again. This will be the name of the font in BF2.
Image File: AM8.jpg
17. Next up, it's going to ask you for the font language. This is what folder it goes in in fonts_client.zip. If it's a common font across all languages, leave it blank. I'm going to have this font be an English font only, so I'm going to type English:
Image File: AM9.jpg
18. Now it's going to ask you if it's an 800x600 font (if it goes in the 800 subfolder). Simple y or n response. I'm going to do n:
Image File: AM10.jpg
19. And it'll be done. Open up fonts_client-zip, and you'll see your newly created font ready to roll for BF2. Very simple, very easy to do. If any edits are required, like the size is too big or small, it's real quick to fix up, you just need to modify the size of the font back in BMFont, and repeat these steps. Over all, to get a properly sized font looking good, it only takes about 2min once you know what you are doing.
Image File: AM11.jpg
Hopefully the script works properly for everyone, it's just a bat script with no error handling, so it's not really going to help you out if something has gone wrong.