Configure your Test Environment

Getting your test tool up and running, more specifically the GFxPlayer, is an important step in your development process. It gives you the possibility to try your mod in a more game-like way (instructions for on how to set up GFxPlayer in Flash Pro).

The differences between the AS2 interpreted by the standard Flash Player and Scaleform may cause issues if one does not pay attention.

So, to get the GFx tool up and running in FlashDevelop follow these simple steps:

  • Go to Tools > Settings > FlashViewer.
  • Click on External Player Path
  • Click the little browse-button (three dots) to the right.
  • Browse to: <your udk install path>\Binaries\GFx.
  • Select: GFxMediaPlayerD3d9.exe and click Open, and then Close.
  • Right click on your project in Project Explorer.
  • In the Output tab, and the Test Project section, choose: Play: External Player

If you test your project, you will se that you now use the Scaleform player instead of the standard Flash one.

If you want to enable the GFxPlyer for all your TSW Mod project you can easily edit the TSW Mod Project Template:

  • Open WIndows Explorer
  • Navigate to C:\Users\<your username>\AppData\Local\FlashDevelop\Projects10 The Secret World – Basic Mod Project
  • Open the Project.as2proj file in a text editor (Notepad works just fine):
  • On line 59. Change

<option testMovie="Default" />

to

<option testMovie="ExternalPlayer" />

  • Save your changes.

That’s it!

Happy coding!

MovieClip without a library symbol

So you now have gotten started with FlashDevelop, and you feel happy. The sun is shining and the birds are chirping.

But then you realize that you miss the library from Flash Pro. How are you supposed to write your custom MovieClips, extend them and then add them to the stage?

Say that you for example want to make a button class, and you want to make a stunning layout then you want to be able to reuse this button class (seems kind of nice to be able to use a button more than once, right?).

What you need to do is to use the Packages method. This method is also nice if you’re using Flash Pro, and just dont want to add an empty MovieClip symbol to the library just to be able to add it to your stage with attachMovie().

Create a new project (preferably you just use the Basic Mod Project template I released for you guys yesterday).

Add a com/samples folder structure in the src folder in Project Explorer, and create a new class file (name it MyClipClass to make it easy to follow this tutorial).

You dont have to do anything with the class except extending MovieClip.

Your MyClipClass.as should now look like this:

class com.samples.MyClipClass extends MovieClip
{
   public function MyClipClass()
   {
      // Do fancy constructor things here
   }

   // Your fancy MovieClip implementation here.
}

Very simple and sleek, right?

Go back to Main.as and edit the code to look like this:

public static function main(swfRoot:MovieClip):Void
{
   var classPackage:String = "__Packages.com.samples.MyClipClass";
   Object.registerClass(classPackage, MyClipClass);
   var myNewClip = swfRoot.attachMovie(classPackage, "i_MyNewClip", swfRoot.getNextHighestDepth());
}

So what are we doing here?

var classPackage:String = "__Packages.com.samples.MyClipClass";

This line just defines the name of our class. The magic here is to add “__Packages” before the name of your class. That way Flash knows how to reference it internally.

Object.registerClass(classPackage, MyClipClass);

This line binds the name of our class together with our MyClipClass type. Now Flash can put two and two together and knows what type we are talking about when we refer to the class name we defined in the previous line as reference.

var myNewClip = swfRoot.attachMovie(classPackage, "i_MyNewClip", swfRoot.getNextHighestDepth());

This is a normal attachMovie() statement. At no point do we need to call our constructor. All that is (per usual) handled by the MovieClip baseclass.

Now working with your own MovieClip classes is so much simpler. And if you use this in Flash Pro. No cluttering with empty MovieClips in your library.

Happy coding!

Ps. The project with source code is available from the Downloads page. Ds.

Font Embedding

When embedding fonts for TSW there is need to include more than the standard charset. To make it easier to get this done, a texfile with extended charset (both ISO/IEC 8859-1 and ISO/IEC-8859-2) is available from the Downloads page.

Just paste the embed string when configuring your font assets.

2013-03-10 – UPDATED: Embed string now also includes correct greek and math symbols.

TSW Mod Template for FlashDevelop

I have come to like FlashDevelop more and more over Flash Pro. What I like is the more powerful features that comes with a modern IDE (Adobe has never been close to its competitors when it comes to developer tools, they know design ui, not code development). It’s much more responsive, the intellisense (code suggestion) is much more intuitive. Not to mention all the amazing plug-ins for documentation, versioning, build in snippets and so on. The possibility to more strict compilation to improve the code quality is also welcome. A dream for the productive developer.

The only feature I have found that is better in Flash Pro is debugging. You can not step through compiled code with break points in FlashDevelop. The use is of code stepping when developing mods are somewhat limited anyways since you can’t step and see in game objects. Maybe something to investigate in the future.

What I have done however is starting to add new functionality to MTASC (the AS2 compiler used by FlashDevelop) to add extra features to TSW Mod projects. Whenever this is ready I will share it with you with a new executable to download.

In the meantime,

To make use of the extra features in FlashDevelop I have developed a basic TSW Mod Template, and ofc I’ll share it with you guys.

Download the template from the Downloads page.

Unpack the zip to your FlashDevelop project template folder (C:\Users\<UserName>\AppData\Local\FlashDevelop\Projects”) and choose to create a new project.

You should now see the new project template in your New Project dialog:

Step1

I named my test project Test_Mod.

Let’s have a look at the Project Explorer.

Step2

The template does some stuff for us. Lets go through what the project contains fresh of the creation process:

  • bin – will contain your compiled swf
  • deployment – corresponds to your tsw rootfolder. If you want to deploy dependency root swf’s you place them in the Flash folder. If you need to deploy your own script files, you place them in Scripts. No need to manually copy these files anymore, and you have a good overview of them in the project.
  • src – root resource folder for your mod. If you start to create a package structure it is from this folder and not the root of the project, i.e. com.utils would be in src/com/utils in the project structure.
  • assets – place to store your assets. I will cover more about naming assets and how they correspond to the library in Flash Pro in another post.
  • mod – this is the mod folder. Everything in here will be deployed to your  Flash/<Mod name> folder.

The CharPrefs and Modules files are already populated with standard data according to the name of your project. If you want to change the scope of your configuration just rename the CharPrefs file.

This is how Modules.xml look like directly after the project has been created:

Step3

As soon as you build the project (F5), the mod is ready to be loaded into TSW.

By default the deployment directory when building is the %program files% one. But usually most developers use another installation of TSW for testing and developing such as the TestLive setup.

To build to that location, just right click your project name in the Project Explorer and choose Properties. Click on the Build tab and then in the Post-Build Command Line section click Builder.

Change “C:\Program Files (x86)\Funcom\The Secret World[…]” to your own TSW location (the path needs to be changed in three locations).

Done.

Happy coding!

2013-03-11 – UPDATED: Script folder now correctly gets copied to the corresponding script folder in the TSW installation root. Thanks to Michał for pointing that out.

Melior Mods Dropbox

Every release whether it be tools, binaries or mods will be available in the Melior Mods Dropbox. Some content will also be available in other locations such as Curse or SecretUI, but this will be a complete set of all releases, and they will be available here first!

Check it out!

If you don’t yet use Dropbox, use this link to sign up. That way there will be more space to share awesome stuff with you guys.

Ps. A link to the Dropbox will always be available in the information widget in the right navigation. Ds.

Building TSW Mods for free!

Ok, so you have decided that you want to write your own mod. You have found that special thing that you would really love to have in the game, but when you ask about in on the forums, nobody listens. Or maybe they listen, but the mods don’t turn out the way you want them to.

What to do?

You start to browse the internet to buy Flash, and you realize that the price for Flash Professional is somewhere around 500 bucks (unless you’re a student, or teacher and can get the faculty discount), and it just doesnt feel right to spend that amount of your hard earned dollars on having an extra sound playing when your friends come online (or whatever mod you’ve planned to write).

But this isn’t the end of the road. It’s totally possible to write your mod with free (yes, legally free) stuff of the internet. It can be a little tricky for the newbie, but hey, if it’s too easy – no fun, right :).

This is what you do…

(This guide isn’t really a guide on how to code actionscript, it’s focus is to get your environment up and running).

Downloading and installing your tools

The links to all the tools mentioned here is also placed in the linkbox to the right. Before you do anything, make sure that you have the latest Flash ActiveX Debugger installed.

  • Download UDK and install it (pay attention where this is installed to make it easier to configure FlashDevelop later).
  • Download FlashDevelop, and install it.
  • Flex SDK will be installed along with FlashDevelop (all you need to create mods for TSW), but if you want extra SDK’s you can download them manually later.
  • Download and install (just doubleclick the downloaded file) the AS2 templates.

Now to setting up your environment for first use

  • I would recommend that you make a copy of your source directory (usually located: D:\Program Files (x86)\Funcom\The Secret World\Data\Gui\Customized\Flash\Sources). Especially since you need to change some files to be able to compile your project. Make it a good practice to not change files that you have not written yourself. Always change copies.
  • Lets fire up FlashDevelop and start.
  • Create a new Project based the AS2 Template, and just name it Test.

Step1

First we need to configure FlashDevelop on where to find the source files needed

  • Go to Project > Properties.

Step2

  • Click the tab Classpaths and then the button Edit Global Classpaths…

Step3

  • Add the path to the UDK CLIK (your path may differ, but since you read the instructions earlier you know where your install path is). The first line is the path to the copy of the sources folder you made at step 5.

Now we are going to configure deployment of our mod

  • Navigate to the project explorer (the tree view to the right).
  • Create a new folder in your project and name it package.
  • Create a second folder in your project and name it lib. We will use it later.
  • Create a new folder under package and name it Test.
  • Now right click project name and select Properties.
  • On the Output tab, in the General group enter package\Test\Test.swf in the Output file field..

Step4

  • Now click the Build tab.
  • In the Post-build Command Line field enter the following:
xcopy "$(ProjectDir)\package\*.*" "D:\Program Files (x86)\Funcom\The Secret World\Data\Gui\Customized\Flash\" /e /y

Make sure that you write the path to your TSW installation. I have mine on the D-drive, you may use C.

This will copy our mod files when we compile. The /e /y flags make sure that our new directory is created for us, and that we can just re-compile our project when we make changes, and not worry about being prompted if we want to overwrite our old version.

Step5

  • Create two new xml files in the package\Test folder. Name them CharPrefs.xml and Modules.xml.

Enter the following content in CharPrefs.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<Root>
   <Value name="Test" value="true" />
   <Archive name="Test_data" />
</Root>

and the following content in Modules.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<Root>
   <Module name = "Test"
           movie = "Test\Test.swf"
           flags = "GMF_CFG_STORE_USER_CONFIG | GMF_DONT_UNLOAD"
           depth_layer = "Top"
           sub_depth = "0"
           variable = "Test"
           criteria = "Test &amp;&amp; (guimode &amp; (GUIMODEFLAGS_INPLAY | GUIMODEFLAGS_ENABLEALLGUI))"
           config_name = "Test_data"/>
</Root>

We’re getting close. Just a few more steps. Hang in there!

Two more things is needed to be able to compile our little test mod.

First, since we don’t have the real flash, the flash pre-compiled classes like Button, and so on is not included (everything in mx.*), and Funcom uses the mx.utils.Delegate class, so we have to write that class ourselves. Easy enough. 🙂

While we’re at it, we’re going to make improve the Delegate class so we also can send arguments to our scoped function (you can use this function even if you code in Flash Pro, since it is better than the built in function).

  • Open up Windows Explorer and navigate to your source folder (where you copied the source directory from your TSW installation folder). You know you found the right level of the folder structure when you see PrecompiledClasses.as and PrecompiledClasses.fla.
  • Create a new folder called mx, and under it utils. In the utils folder create a new textfile, and name it Delegate.as and enter the following content in the textfile and save it:
class mx.utils.Delegate {
   public static function create(t:Object, f:Function) : Function
   {
      var _f:Function = function():Void
      {
         var _na:Array = arguments.slice(2);
         f.apply(t, arguments.concat(_na));
      };
      return _f;
   }
}
  • Navigate back to the source folder (the one with the PrecompiledClasses files). And nagivate down to com\Utils. Open the file Signal.as.
  • On lines 68, and 76. Change the line:
return;

to:

return null;

You see, one thing with using FlashDevelop is that it is harder on the compile rules than Flash. So bad code, that compile in Flash Pro will not compile. In this case Funcom has written code that return void when the function declaration promise a com.Utils.Slot. Big no-no ofc (but the code does compile in Flash Pro). So one of the benefits with using FlashDevelop compared to Flash Pro is that you learn how to write better code automatically, because some bad code will simply not compile.

Now. We have everything set. All that is left is to write some code for our mod and make it visible in TSW.

  • Go back to FlashDevelop.
  • In the project folder lib that we created before. Right-click it and choose Add > Library Asset. Select a font from your font library (i downloaded and choose Aller for my example).
  • Write the following in Main.as:
import com.GameInterface.Game.Character;

class Main
{
   public static function main(swfRoot:MovieClip):Void
   {
      var t:TextField = swfRoot.createTextField("i_txt", 1, 0, 0, 300, 20);
      t.embedFonts = true;
      var tf:TextFormat = new TextFormat("lib.Aller.ttf", 14, 0xFF0000, true, false, false);
      t.setNewTextFormat(tf);
      var c:Character = Character.GetClientCharacter();
      t.text = "Hello " + c.GetName();
      t._y = 20;
   }

   public function Main()
   {
   }
}
  • Go to the toolbar and change your compile mode to Debug, and press the Test button (you want to change this back to Release when your mod has been tested and ready to be shared with the world).

Step6

Big success! You should now be presented with a Flash window that looks like this:

Step7

It says undefined instead of your name, but it’s all good. The Character object will not be available until we are in the game.

Before we start TSW, just check that the mod was deployed correctly.

  • Navigate to the flash folder in TSW (Program Files (x86)\Funcom\The Secret World\Data\Gui\Customized\Flash).
  • There should be a new folder there named Test. And in that folder you should now have Test.swf, CharPrefs.xml, and Modules.xml.

Isn’t this exciting?!

Time to fire up TSW.

Log in, and if you look at the upper, left corner you should now see your new mod!

Step8

And now the character name is displayed correctly! Btw, GhostWorld is my char on TestLive if you want to say hello.

One last thing, just to make it clear how easy you can update your mod when you have everthing configured:

  • Tab to FlashDevelop. And change this line:
t.text = "Hello " + c.GetName();

to:

t.text = "Hello " + c.GetName() + " you are awesome!";
  • Press the Test button again.
  • Tab back to TSW.
  • Reload your ui by pressing Ctrl+Shift+F1.

And there you have it!

How to develop mods for TSW. For free, and legit!

Happy coding!