Short update


i know it was quite calm the last 2 month on my blog. The reason for that is that we had an awful huge amount of work at work to do. Deadline after deadline after deadline. But nevertheless I focused on game development in my free time and have quite some nice stuff in the pipeline.

More info on that will come soon. I also planned to write more tutorials so keep coming back and look if there is something new. I see that I have a constant traffic due to my tutorials so the interest is there. Its just always a lot of work to write one (as most of you probably know 🙂 ).

So, see you around 🙂

P.S. The walking dead series rooocksss! 🙂 

Categories: Uncategorized

How to write a generic delegate class with C++ and Templates. (Tutorial)

Delegate Tutorial C++

Good morning, it is a cold but beautiful Saturday right now in Amsterdam and I decided to write a new tutorial for my blog. This time not about Objective C but about the world’s sexiest things after microchips: C++, templates and function pointers to methods.
During the last week I was improving code in my game engine and while implementing a messaging system for my objects I stumbled over the problem that function pointers are actually great but don’t work fine with class methods.
C++11 has this great template std::function which I adore and that can handle class methods with std::bind as well. But in my situation it was not suitable and so I had to think of my own solution.

The problem:
The problem I had to solve was to implement an EventHandler system which can take any arbitrary function or class method. In ActionScript, the coder can call the method stage.addEventListener (, …) to add listeners to certain objects which will than receive events, like in this case mouse clicks. I adored the idea behind it and wanted to implement something like this as well.

REResponder -> Callback to Class Methods:
Our function will have to overloads. One will take a lambda function and the other one will take a class method which gets called when it receives an event. The lambda overload will take a std::function argument while the class method overload will take our own class. In this tutorial I will only write about the Responder method as the lambda method is actually pretty easy to implement.

So let’s see what we have:

typedef void* id;			// thanks to apple for that typedef

template <class T>
class RESelector: {
     RESelector(T* _target, void (T::*_func)(id, RE_MSG_CODE), id _msgObj,  RE_MSG_CATEGORY _category){
         this->target = _target;
         this->category = _category;
         this->msgObj = _msgObj;
         this->actionFunc = _func;

    void fire (RE_MSG_CODE code){
         (this->target->*actionFunc)(this->msgObj, code);

    Inline RE_MSG_CATEGORY getCategory() const {
         return this->category;

    T* target;
    id msgObj;
    RE_MSG_CATEGORY category;
    void (T::*actionFunc)(id, RE_MSG_CODE);

typedef std::vector<id> SelectorCache;
typedef std::vector<RE_MSG_CODE> Messages;

class REMessageHandler {
	Messages *msgCache;
	SelectorCache *selectorCache;
	template<class T>
	void addEventListener(REResponder<T> *responder) {

        Inline void postEvent(RE_MSG_CODE code){
	void evaluateMessages();

First of all, don’t worry about RE_MSG_CODE and RE_MSG_CATEGORY. It is just my way of decoding messages but doesn’t actually influence how the code works. RE_MSG_CODE is actually the code itself like KEY_A or MOUSE_LEFT while RE_MSG_CATEGORY is the category the object has to listen to like RE_MSG_CATEGORY_TOUCH or RE_MSG_CATEGORY_RUNLOOP.

So what is happening here? We have a template class called RESelector which consists of not much but 2 methods and a constructor.
The field variables are a pointer to a target which is the template type. An enum category which is the category the object will listen to, a pointer to a member method from a class of T and an id (or void*) to an object which gets send with the message.
Than we have a std::vector that takes id’s and finally the class REMessageHandler. This class is by no means complete but it will do the job for this tutorial.
We have 2 pointers to vectors in this class. One takes MSG_CODES while the other one is id vector. You will ask, why do we store raw pointers in a vector that should store objects from RESelector? Well, we only need the addresses stored  and because what we will store is actually a template class, we are not able to do: std::vector . We would have to define a std::vector FOR EACH template and this would suck.
The two corresponding messages are straightforward. Both push back stuff on the right vector.
Let’s move on to the most interesting method of this class.
Receiving Messages

void REMessageHandler::evaluateMessages() {
    for (auto it = this->selectorCache->begin(); it != this->selectorCache->end(); ++it){
	RESelector<__tPlaceholder> *selector = (RESelector<__tPlaceholder>*)*it;
	If (selector->getCategory() & RE_MSG_CATEGORY_INPUT) {
            for (auto sec_it = this->msgCache->begin(); sec_it != this->msgCache->end(); ++sec_it) {
	        if (*set_it & RE_MSG_CATEGORY_INPUT) {
		     RE_MSG_CODE code = (RE_MSG_CODE) ((*sec_it) & (~RE_MSG_CATEGORY_INPUT));
		     selector->fire (code);

Wow.. Looks kinda weird right? I try to explain. We first iterate through the selectorCache which contains all the objects which are registered to listen for events.
As the selectorCache stores only addresses, we need to cast the object to the right type. RESelector is a template class so can’t create a pointer without a type. Of course we want it as generic as possible, so making the method itself a template message is absolutely no option. I came up with the idea to define a struct __tPlaceholder which is just empty. The typedef looks like this

typedef struct __tPlaceholder {} __tPlaceholder

and it’s only purpose is to act as a placeholder. So we create a pointer to an RESelector of type placeholder and assign the value of the iterator to it. Nice!
The next step to check is to what category the selector is listening to. In this example I only implemented RE_MSG_CATEGORY Input so we check if it does and if yes we iterate through all the messages. For each message we check if it is a message for the input category and if yes we fire.
For completeness, this is how a message gets encoded and decoded:

RE_MSG_CODE encoded=(RE_MSG_CODE)(category|code);

With this bunch of code we can now easily make stuff like this

class Foo {
	void mouseCallback(id obj, RE_MSG_CODE msg) {

	     dbgPrint(“I received msg %x from %p”, msg, obj); 
                 case RE_MSG_MOUSE_INPUT_KEY_UP: {
                     // do
                 default: break;

void Runloop::Init(){
	Foo *foo = new Foo();
        RESelector<Foo> selector = new RESelector<Foo>(foo, &Foo::mouseCallback, this, RE_MSG_CATEGORY_INPUT);

bool Runloop::Run() {
        return this->goOn();

And every time somewhere gets a input message posted the mouseCallback function in Foo gets called.

Cool? Isn’t it? There are still areas to improve of course but I will leave this to you to figure out what the best approach for your problem is.

Well. That was a huge tutorial and I hope I did an ok job. If you like it I would appreciate a small comment or 


News RPG Project

First of all: HAPPY NEW YEAR !!!!

The RPG project was a little bit quiet the last three months, but that didn’t mean that we were not working on it. The team has grown to four people and consists now of a Game Designer, an American who lives in Beijing and works there at a Chinese Game Company, a Swedish composer, who is so god damn talented that it scares me, a 2D Pixel artist from Amsterdam with an incredible talent for character design and last but not least… me, the nerdy programmer and some how manager of this all. Together we will work hard in 2012 to realize our project.

The goal for the next year is to design all the necessary production tools to develop and further to create a 2 hour long game which introduces the player to the world and the main characters. After that we will try to find a publisher! So, if you know one, let me know 🙂

We have awesome ideas in our design paper right now and I can tell you, this RPG is about to become great. It will be an awful lot of work but we love what we do and that is what drives us forward.

So lets hope the world will remain after 21.12.2012 ^^



Happy Holidays to everybody,

I had a great year and I hope you too. I wish you all the best in your upcoming life, stay tuned and positive and get the best out of each minute you are breathing. The upcoming year is about to become pretty interesting. The world will eventually go down (or restart), the Illuminati will conquer the world (or they did already) and Michael Jackson will still be dead (which is a shame actually). I am still waiting for Zombies to be honest but ok, thats an other story.

My blog has now a constant visitors rate of 10 to 30 visitors each day and I am pretty proud of it. My RPG Engine draws a lot of attention and my tutorials too. That motivates me guys and I will keep on to blogging for at least another couple of months.. 🙂

I also have some quiet nice stuff going on in my career but i can’t tell you more than …. GAMES!!! hehe

Happy new year everybody, stay cool!


Adding Swiping to UIWebView using JavaScript (iOS4/iOS5) and custom URL scheme

December 25, 2011 2 comments

Hey folks, welcome to my new Tutorial, which will cover the topic of how to implement swiping in a UIWebView using JavaScript and will explain how to send variables back to our UIWebView using Custom URL Schemes.

The code itself is straightforward but will cover a lot of cool things.

To load the JavaScript code we call in our webViewHasFinishedLoading Delegate method the following code:

#define DEVICE_IOS5()   (([[[UIDevice currentDevice] systemVersion] floatValue]>=5.0))

if (DEVICE_IOS5()){

     [self.webView stringByEvaluatingJavaScriptFromString:@"loadListenerIOS5()"];

} else {

     [self.webView stringByEvaluatingJavaScriptFromString:@"loadListenerIOS4()"];


This is the JavaScript code:

File: SwipeEvent.js

Use your local html to let the browser know about it. I showed how to do that in my last tutorial.

         EDIT: One more thing. When copying JavaScript files from the Finder to XCode, it will not treat it as an added resource but as a file to compile. Of course that is not possible so it will give you warnings back and the file will not be copied to the resource folder on your device / simulator. To fix that problem, go to target->build settings and than drag and drop the file from Compile Sources to Copy Bundle Resources.

var startX;

var startY;

var diffX;

var diffY;

var hypo;

var isIOS5;

function loadListenerIOS4(){

    var body = document.getElementsByTagName("body")[0];

    body.addEventListener("touchstart", touchStart, false);

    body.addEventListener("touchend", touchEnd, false);

    body.addEventListener("touchmove", touchMove, false);


    return "JS Listener iOS4 loaded";


function loadListenerIOS5(){

    var body = document.getElementsByTagName("body")[0];

    body.addEventListener("touchstart", touchStart, false);

    body.addEventListener("touchend", touchEnd, false);

    body.addEventListener("touchmove", touchMove, false);


    return "JS Listener iOS5 loaded";


function fireSwipeScheme(a,b,c){

    var scheme="swipe:" + a + ":" + b + ":" + c;



function touchStart(event){



    if (isIOS5){



    } else {





function touchEnd(event){

    if (diffX>50||diffX<-50){




function touchMove(event) {

    var a;

    var b;

    if (isIOS5){

        a = event.pageX - startX;

        b = event.pageY - startY;

    } else {

        a = event.touches[0].pageX - startX;

        b = event.touches[0].pageY - startY;


    var c = calcHypotenuse(a,b);





function calcHypotenuse(a,b){

    return Math.sqrt(a*a,b*b);


LoadListenerIOS4 and LoadListeneriOS5 are there to attach an event listener to the body object of our DOM. The first is a constant which can be either “touchstart”, “touchend”, “touchmove” or “touchcancel” and the second determines the function we are about to call. So in this case, “touchstart” calls touchStart( … ).

Both loaders are the same, only that one sets the variable isIOS5 to 1 and the other sets it to 0. This is important if you look into the touchStart function.

On iOS5, to get the current x/y coordinates of a touch, some must call event.pageX and event.pageY, while on iOS4, its event.touches[0].pageX and event.touches[0].pageY.

The same goes for all the other touch function.

So what we do here is, we register the touch coordinates on touch start, calculate all the way through touchmove the current distance and fire immediately an url scheme to the UIWebView if the touches ended.

fireSwipeScheme is also pretty interesting.

The variable “scheme” is a combination about the keyword “swipe” and a, b, c which are actually the variables diff x, diff y and the hypotenuse.

So, how do we now get these variables into our objective C Code?

In the delegate method webViewShouldStartLoadOnRequest: withNavigationType:  we add the following code

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    NSString*scheme=[[request URL]absoluteString];

    //NSLog(@"received scheme: %@", scheme);

    NSArray *components=[scheme componentsSeparatedByString:@":"];

    if ([[components objectAtIndex:0]isEqualToString:@"swipe"]){
        [self handleSwipeInWebView:components];
        return NO;

     return YES;


And to our class we add the following method:

#define kMinSwipeDistanceHorizontalInWebView 100.0f

#define kMaxSwipeDistanceVerticalInWebView 50.0f

-(void)handleSwipeInWebView: (NSArray*)code{

    @autoreleasepool {

        NSInteger swipeDistX=[[NSNumber numberFromString:]intValue];

        NSInteger swipeDistY=abs([[NSNumber numberFromString:]intValue]);

        NSLog(@"swipeDistY: %d", swipeDistY);

        NSLog(@"swipeDistX: %d", swipeDistX);

        if ((swipeDistX>kMinSwipeDistanceHorizontalInWebView||swipeDistX<-kMinSwipeDistanceHorizontalInWebView)&&swipeDistY>kMaxSwipeDistanceVerticalInWebView){


            if (ptr){

                 if (swipeDistX<-kMinSwipeDistanceHorizontalInWebView){

                     [ptr moveDownInTreeHierarchy];

                 } else if (swipeDistX&gt;kMinSwipeDistanceHorizontalInWebView){

                     [ptr moveUpInTreeHierarchy];





In the delegate method, the UIWebView catches all clicked links events or all document.location events from JavaScript. By sending a custom URL script we can first return NO, to make sure that no new page will get loaded and we can use it actually as an encoder for our variables. The url scheme in this example looks something like this



In the delegate method, I break the array into components by separating them by the ASCII character ‘:’. In the handleSwipeInWebView method, I can easily use the components than to let my code do what I want him to do.

In my case, I am firing the swipe Event from the DetailViewController in my SplitViewController and notify the MasterViewController about it.


UIWebView – Calling Javascript from iOS with passing parameters … Tutorial

Right now I am working on a project for my company which has to display a lot of content, that is delivered in the XML format and consists of small chunks of HTML formatted text-code.

The only way on iOS to display HTML is to use the UIWebView and so I had to write some small Javascript code which can be called to display the content. It has to be dynamic, as the content is sorted by chapters and the user can navigate through a tree structure to display only relevant content.

So what I did was, parsing the XML and than writing everything into Core Data (btw. Core Data is AWSOME!… the speed, the usability.. incredible). With Core Data I do the sorting and when the user opens content, I load my local HTML, which does actually nothing but tell the browser where the .JS files are.

The reason why I write this tutorial is because I couldn’t find a good one on the web that covers that topic which my requirements (.JS files, parameter passing from Objective C to JS)

Btw: this is not finished code , it works but is rough to get the basic system to work.



<meta http-equiv=“content-type”content=“text/html;charset=utf-8” />



</– th, td { vertical-align: top; } –>


<script src=“displayContent.js”></script>





The JS File looks like this:

function textNodeWithColorAndSize(text, rgb, size, font){

    var textNode=document.createTextNode(text);

    var font=document.createElement(“font”);;;


    return font;


function printHeadOfTable(code, headline) {

    var body = document.getElementsByTagName(“body”)[0];

    var table     = document.createElement(“table”);

    var tableBody = document.createElement(“tbody”);

    var row = document.createElement(“tr”);

    for (var i = 0; i < 3; i++) {

        var cell = document.createElement(“td”);

        var cellText;

        if (i==0){


            cellText=textNodeWithColorAndSize(code, “#FF3344”, “12px”, “font”);

        } else if (i==1) {

            cellText=textNodeWithColorAndSize(headline, “#000000”, “18px”, “font”);

        } else {

            cellText=textNodeWithColorAndSize(“[E-Mail Button]”, “#555555”, “12px”, “font”);









function resize(){

    var frames=document.getElementsByTagName(“div”);

    for (var i=0;i<frames.length;i++){




function printBodyOfTable(bodyString){

    var body = document.getElementsByTagName(“body”)[0];

    var frame=document.createElement(“div”);




So, fine enough. Resize does resize all elements <div> to 94% of the web view browser. This is important because of rotation.

printBodyToTable( … ) and printHeadToTable ( … ) are functions to print content.

So, when you load up now the webpage nothing appears of course. Thats why we have to call the JS from our Objective C code. This looks like this:

The array assets is passed from the fetchedResults.

-(void)loadWebViewWithAssets: (NSArray **const)assets{

    [self setWebViewFrame:CURRENT_ORIENTATION()];

    @autoreleasepool {

        _assetArray=[[NSArray alloc]initWithArray:*assets];

        NSURL *file = [NSURLfileURLWithPath:[[NSBundle mainBundle]pathForResource:@”contentView”ofType:@”html”]];

        NSURLRequest *urlRequest=[[NSURLRequest alloc]initWithURL:file];

        [self.webView loadRequest:urlRequest];

        [urlRequest release];



So this loads our basic html. Now when the webView is done loading, we are free to call our Javascript functions.

I think it is a bit a pity, that the JS Script methods ONLY work AFTER the web view finished its loading. It would be cool to do that beforehand but well.. lives a b**** sometimes 🙂


(Asset and Content are Core Data entities.)

The abort calls are there for debugging purposes.

-(void)webViewDidFinishLoad:(UIWebView *)webView{

     for (int i=0;i<[_assetArray count];i++){

         Asset*asset=[_assetArray objectAtIndex:i];


         if (!content){



         NSString *jsPrintHeadOfTable=[[NSString alloc]initWithFormat:@”printHeadOfTable(\”%@\”, \”%@\”)”, asset.at_code, asset.at_title];

         NSString *jsPrintBodyOfTable=[[NSString alloc]initWithFormat:@”printBodyOfTable((\”%@\”))”, content.at_content];

         if (!jsPrintBodyOfTable){



         [self.webView stringByEvaluatingJavaScriptFromString:jsPrintHeadOfTable];

         [self.webView stringByEvaluatingJavaScriptFromString:jsPrintBodyOfTable];

         [jsPrintHeadOfTable release];

         [jsPrintBodyOfTable release];


     [_assetArray release];


So, you see, we are even able to pass parameters to our Javascript which is incredible awesome. The same webView method is able as well to retrieve values from the javascript by capturing the NSString return value. But there a lot of tutorials out there for this.

Ah yeah, and is very important that you prepare your parameters. content.at_content for example is a complete HTML formatted text. Before you pass it you have to make sure that there are no _ ” _ characters in it (replace them with _ ‘ _  . Now newline characters, no carriage return etc.. Just to tell you 🙂 Took me some while to get the idea. 😉

From this point on we can now call the stringByEvaluatingJavaScriptFromString method wherever and whenever we like.. Cool huh?

Yeah, this was my first tutorial and I hope it helped ..



October 21, 2011 4 comments

Hey Guys,

attached a BRAND NEW GAMEPLAY VIDEO from my Game. It shows random encounter and the Turn Based Battle Engine. Until now I’ve not implemented a lot of features but time will tell.

I AM STILL LOOKING FOR PARTNERS!! The team is growing and there is already a Composer on Board, but I need still Level Designers, AI Coders, Item Scripters and A STORYWRITER!!!!

Don’t hesitate to contact me!! We can make great things together!