How To Integrate QT's Webkit to TGB (connect to Facebook, play Flash, browse the web)

Hey guys, it's me again. This time I had a fun idea which I didn't see many desktop games do is that I want TGB to be able to post to Facebook walls or players can compete scores with Facebook friends. From what I found out searching the net is that there's the iPhone, Android, Php and Java Script SDK for Facebook but I wasn't able to find anything suitable for C++/desktop to connect Facebook. And after reading Facebook wiki on how to connect to Facebook from a C++/desktop application, the only way to do so is to create an in game web browser and let the user type in the credential themselves. So here we are, a in game web browser for TGB

Features

• Supports Open SSL
• Support both local *.html files and online websites
• Supports Flash
• Multi platform (However, the how to in this resource will be based on Visual Studio 2008 & Window)

Potential

• Connect to Facebook, while this Control can not post to users wall yet. Facebook Api could be added easily
• A Web form for your users to subscribe to your company, give feedback or go to your product page to buy more of your games
• In-Game advertisement, can be a normal Gui or it can be extended to be used as a T2dSceneObject to display ads on billboards or walls in your game.
• Play Flash animations for your Splash Screen or use Flash as a mini game in your game

Credits

• When I start working on this, it only took a few hours to get QT Webkit working in TGB. The hardest part was getting Flash to work in TGB, I read all over the QT docs and Webkit docs and still wasn't able to find a solution. I know what the problem was but wasn't able to find a fix for it, to my luck I found out that the famous Josh had already got Webkit working in T3D, had the same problem and provided the fixes for it. So he's fix was used in this implementation, credit goes to him too.

License

• Giving credit to me is not required but letting the community know how you are using it in your game would be great :)

Requirements

1. Visual Studio 2008

Getting Webkit to work in TGB

in 4 easy step

1. Installing QT and OpenSSL

1. Download OpenSSL binary's from here or you can download the full source yourself from here and build them yourself.
2. Install OpenSSl to C:/openssl
3. Download QT for Visual Studio 2008 from here
4. Install QT to C:/QT/4.7.2

2. Building QT

1. We'll first set the environment variable for Window by opening up "C:/Qt/4.7.2/bin" and run "qtvars.bat"
2. We will then create a Visual Studio 2008 solution file by opening up Visual Studio 2008,
* On the top menu select "Tools"
* Visual Studio 2005 Command Prompt
* type in follow command to change directory to QT


cd C:/QT/4.7.2

* type in the follow command to configure QT solution, for more infomation about the build configuration please refer to this link


configure -opensource -no-qt3support -no-opengl -no-multimedia -platform win32-msvc2008 -no-script -mp -no-libtiff -no-dbus -no-phonon -no-phonon-backend -nomake demos -nomake examples -openssl -I "c:/openssl/include" -L "c:/openssl/lib" -I "c:/Qt/4.7.2/src/corelib/"

* Read QT license agreement and select if you accept it or not

3. At this point, QT configuration should generate a Visual Studio 2008 solution file. Before we start building it, we'll have to apply Josh's fix for flash by opening up the newly created VS2008 solution file at "C:/Qt/4.7.2/projects.sln" and make the following changes

In "src/3rdparty/webkit/WebCore/plugins/PluginView.cpp"


void PluginView::setParameters

Change: 

m_paramNames = reinterpret_cast<char**>(fastMalloc(sizeof(char*) * size));
m_paramValues = reinterpret_cast<char**>(fastMalloc(sizeof(char*) * size));

To:

m_paramNames = reinterpret_cast<char**>(fastMalloc(sizeof(char*) * (size+strlen("wmode") + 1)));
m_paramValues = reinterpret_cast<char**>(fastMalloc(sizeof(char*) * (size+strlen("transparent") + 1)));

Before:

m_paramCount = paramCount;

Add:

m_paramNames[paramCount] = createUTF8String("wmode");
m_paramValues[paramCount++] = createUTF8String("transparent");


In "src/3rdparty/webkit/WebCore/plugins/win/PluginViewWin.cpp"


static inline HWND windowHandleForPageClient(PlatformPageClient client)
{
#if PLATFORM(QT)
      return 0;
#else
    return client;
#endif
}

4. Now you can build the solution by changing your solution configuration to "release" and then right clicking on the solution in Visual Studio 2008 Solution Explorer and select build. This process should take almost about an hour, on my machine there was an fatal error with xml.dll which I just ignore and unload that specific project since I didn't find it related to webkit.

3. Building Your TGB Game

1. For both your "release" and "debug" builds, add QT include directories to the "Additional Include Directories" property of your project

* Right click on your game project in Visual Studio and select "Properties"
* Go to the "C/C++" tab, select General and then select "Additional Include Directories"
* Add the following directories


C:/Qt/4.7.2/include/QtCore
C:/QT/4.7.2/include/QtWebKit
C:/Qt/4.7.2/include/QtGui
C:/Qt/4.7.2/include/

2. For both your "release" and "debug" builds, disable Torque Memory Management feature by

* Right click on your game project in Visual Studio and select "Properties"
* Go to the "C/C++" tab, select "Preprocessor"
* Add the following preprocessor definition


TORQUE_DISABLE_MEMORY_MANAGER

3. For both your "release" and "debug" builds, link to QT library by

* Right click on your game project in Visual Studio and select "Properties"
* Go to the "Linker" tab, select "Additional Library Directories"
* Add the following directory


C:/Qt/4.7.2/lib

4. Now link QT's library to your game "Additional Dependencies"

* For your "release" build, right click on your game project in Visual Studio and select "Properties"
* Go to the "Linker" tab, select "Input"
* In the "Additional Dependencies" property add the following dependencies


c:/Qt/4.7.2/lib/qtmain.lib
c:/Qt/4.7.2/lib/QtOpenGL4.lib
c:/Qt/4.7.2/lib/QtGui4.lib
c:/Qt/4.7.2/lib/QtCore4.lib
c:/Qt/4.7.2/lib/QtNetwork4.lib
c:/Qt/4.7.2/lib/QtWebKit4.lib


* For your "debug" build, right click on your game project in Visual Studio and select "Properties"
* Go to the "Linker" tab, select "Input"
* In the "Additional Dependencies" property add the following dependencies (notice the "d" suffix in each lib)


c:/Qt/4.7.2/lib/qtmaind.lib
c:/Qt/4.7.2/lib/QtOpenGLd4.lib
c:/Qt/4.7.2/lib/QtGuid4.lib
c:/Qt/4.7.2/lib/QtCored4.lib
c:/Qt/4.7.2/lib/QtWebKitd4.lib
c:/Qt/4.7.2/lib/QtNetworkd4.lib

5. To be able to compile "zlib" with QT, we need to add the Z lib name prefix to it by

* For both your "release" and "debug", right click on "zlib" project in Visual Studio and select "Properties"
* Go to the "C/C++" tab, select "Preprocessor"
* Add the following preprocessor definition


Z_PREFIX

6. Download the GuiWebVeiwCtrl here.
7. Create a new filter in your project something like "YourTGBGame/Source Files/gui/web", add the follow files to your new filter "guiWebViewCtrl.cc", "guiWebViewCtrl.h" and "moc_guiWebViewCtrl.cc".
8. Now we'll have to do a custom compiling for "guiWebViewCtrl.h" so all the QT callbacks will be generated.

* Right click on "guiWebViewCtrl.h" in Visual Studio solution explorer and select "Properties"
* Select the "Custom Build Step" tab and then select the "General" tab
* Add the following to the "Command Line" property [Please notice the "Where your File is location"]


C:/Qt/4.7.2/bin/moc.exe [Where your File is location]/source/gui/web/guiWebViewCtrl.h -o [Where your File is location]/source/gui/web/moc_guiWebViewCtrl.cc

* Add the following to the "Description" property


Mocing the header

* Add the following to the "Outputs" property [Please notice the "Where your File is location"]


[Where your File is location]/source/gui/web/moc_guiWebViewCtrl.cc

* Add the following to the "Additonal Dependencies" property


C:/Qt/4.7.2/bin/moc.exe

9. If you want TGB Builder to also support Webkit, you will need to repeat the steps above for the "TorqueGameBuilder" project.
10. Build your solution :) (I hope I'm not missing any steps here, if I do please let me know if you can't compile it)

4. Adding GuiWebViewCtrl to your game

1. First we'll create a simple GuiProfile for our guiWebViewCtrl by adding the following code to our project

if(!isObject(GuiWebPageProfile)) new GuiControlProfile (GuiWebPageProfile)
{
   tab = true;
   canKeyFocus = true;
};

2. Add the guiWebViewCtrl to our Gui

new GuiWebViewCtrl(myWebCtrl) {
      canSaveDynamicFields = "0";
      isContainer = "0";
      Profile = "GuiWebPageProfile";
      HorizSizing = "right";
      VertSizing = "bottom";
      Position = "216 70";
      Extent = "524 487";
      MinExtent = "8 2";
      canSave = "1";
      Visible = "1";
      unitClip = "0 0 1 1";
      hovertime = "1000";
      DefaultURL = "www.mayansoftware.com";
   };

3. Done :)

Using the GuiWebViewCtrl

1. There are 4 script callbacks you can use in your game

// Aun - Called when a website is done loading
function myWebCtrl::onFinishLoading(%this)
{
   error("myWebCtrl::onFinishLoading");
}

// Aun - Called when a link is clicked 
function myWebCtrl::onLinkClicked(%this, %url)
{
   error("myWebCtrl::onLinkClicked - " @ %url);
}

// Aun - Called when there's a problem connecting to the website
function myWebCtrl::onConnectionError(%this, %error)
{
   error("myWebCtrl::onConnectionError - " @ %error);
}

// Aun - Called when we start trying to open a url
function myWebCtrl::onLoadStarted(%this)
{
   error("myWebCtrl::onLoadStarted");
}

2. There's only one script method for the GuiWebViewCtrl which is "GuiWebViewCtrl.openUrl("string")"

// Load a local html file with flash
//myWebCtrl.openUrl("game/data/images/localHtmlWithFlash.html");

// open a url
//myWebCtrl.openUrl("www.mayansoftware.com");
myWebCtrl.openUrl("http://www.mayansoftware.com");

That's about it! Really hope you guys can find use of it, and please let the community know how you are using it.