How did you get started?

After closing some other projects, we started working on a mobile online multiplayer game in November 2011. Until that time most experts agreed that HTML5 was only usable for simple turn-based board games without much movement. We wanted to prove that it was feasible to create a mobile game with fast moving graphics, realtime multiplayer gameplay and interaction, and multichannel sound, all using HTML5 techniques. At the same time, the game should be deployed to iOS, Android and Facebook with a single code-base. Not an easy task, but hey, we do like a challenge.

What approach did you take?

To solve the many technical challenges we tried everything from game engines (Custom, ImpactJS, CAAT), server possibilities and deployment strategies. The almost weekly pivots made us a bit nervous (in fact, it was driving Bert crazy) but we decided to continue to anyway. The deployment was the most challenging. We already used PhoneGap for deployment to different app stores. PhoneGap solved some multichannel sound issues in standard HTML5, but to be honest, the solution felt uncomfortable. We also had a number of challenges that were left unsolved:

• Canvas rendering performance was below par. Even after extensive optimization we only achieved around 10 frames per second when we had many movements on screen. For 1990 this would have been great, but for 2012 perhaps not!
• Websockets were available, but because the rendering was so intensive on the browser and therefore CPU, packets were being delayed. This caused the realtime game functionality to be broken (we require around 20 packets/second minimum server rate).
• Sound was working, but hacked-in at best. We needed to create a separate sound player for browser deployment and a hook into PhoneGap for mobile.
• Ad-network integration in a HTML5 based game was buggy at best.

That meant: Back to the drawing board…

So, What did you do next?

We first tried appMobi’s services and tools, both commercial and open-source. AppMobi’s game developer tools solve a number of problems like rendering speed and multichannel sound (and from what I hear add integration as well). The Websockets however still work from the browser, as well as user input. Therefore as a developer you have 2 separated environments that have to communicate with eachother though serialized calls (EG. directCanvas.execute(“movePointer(“+x+”,”+y+”);”) ). That communication channel is a nasty bottleneck and is not usable for anything that requires fast updates. Aside from that, the game has to be separated into 2 environments for mobile, breaking our write-once-deploy-everywhere requirement.

So you decided to give CocoonJS a spin?

Yes. Through our CAAT experiences I (RB) got into contact with Ibon Tolosana and Ludei. The description of CocoonJS on the site, a seamless environment that runs HTML5 games without any changes, sounded too good to be true. Ibon emphasized however that that was exactly what was being created and told me about some other solutions that would be accompanied by it. He then offered me the chance to beta-test CocoonJS on our own game sources which I happily accepted. The current version of CocoonJS solves all our problems for us. In the most extreme cases we are still getting around 50 frames per second rendering speeds, multichannel sound and Websockets without delay. It also gives us easy ad-network integration and more. The best thing about that is that it hardly requires any work to make all this work in CocoonJS. Almost all HTML5 functionalities like sound, canvas operations, local storage and sockets are supported transparently. We can’t wait to launch our game ‘MonsterMove’ and start work on the next project using CAAT and CocoonJS!

MonsterMove

MonsterMove is an online multiplayer game, that you can play against your friends, right from your iOS or Android mobile phone or on Facebook. The game objective is to avoid the invasion of earth by monsters coming from planet DooVoo. By sliding rows and columns of monsters, you have to make combinations of 3 or more monsters, which will transport the monsters back to their own world. And of course score points!

Easy? Think again! You have to outsmart and outplay your opponent. When you move your own rows and columns, you also move those of your opponent. The trick is to score points on your side, but avoid making combinations on the side of your opponent.

If you make big combo’s you get VooDoo powers from the monsters. You can use VooDoo to either help yourself or sabotage your opponent.

CocoonJS

CocoonJS is a JavaScript wrapper executed inside the Cocoon platform. It aims to turn JavaScript applications into performance-enhanced native applications by providing a huge performance boost by using OpenGL native binding and other features. The completely transparent functionality and extreme rendering speed increase with CocoonJS are simply amazing.

CocoonJS is currently under private beta. CocoonJS creators Ludei have allowed Appoint:solutions to be their technology testers, and as a result we are proud to present one of the first games in the world that offers this level of speed and online interaction. For more news about CocoonJS, look for Ludei at GDC-12.

Launch

Launch of the MonsterMove is foreseen on Iphone, Android and Facebook in the first weeks of March 2012. Check back here soon or visit the MonsterMove site for news about the launch.

Perceived speed

There are a number of tricks one can apply to the design of a Sencha Touch application to optimize the performance on mobile devices. Tommy Maintz’s writeups about Event Delegation and Optimizing Memory Usage should be compulsory starting points for anyone who is serious about building a more-than-trivial Sencha Touch based app.

One thing about the user experience that is often forgotten about is the perceived speed of an application. Users of applications, whether they are mobile of internet applications, don’t mind too much about waiting a second or two for an action to finish, as long as they know what is going on. Nobody likes staring at a blank screen like the one on the left, wondering if anything still is going on.

The load mask

One of the simplest ways of accomplishing this in Sencha Touch is of course by using a loading mask that shows a spinner and a simple waiting text. The mask should immediately show once the action is initiated and hidden once it finishes. For maximum performance we create a global loadMask that can easily be called through the app namespace.

[javascript]
myTapHandler: function() {
	MyApp.mask();
	Ext.dispatch({
		controller: 'controllerX',
		action: 'loadComplexPanelIntoCardLayout'
	});
}
[/javascript]

And in our app.js:

[javascript]
mask: function() {
	this.views.viewport.loadMask.show();
}
[/javascript]

The problem

The panel’s afterrender event is used to make a call to ‘MyApp.unmask()’ that removes the mask. This setup should show our mask before loading and hide it after the new panel is rendered right? Wrong.

Now this is the part where things start getting a bit annoying. We are calling the show method of the load mask before our controller is instructed to start loading a new panel, but the mask is only shown after the entire panel has finished rendering. In fact at first you won’t see the loadMask at all because it is only shown after the panel is rendered, but the panels afterrender event immediately hides it again. If you’re lucky you might just catch a quick glimpse of it. Spitting through the code you make sure that the entire loadMask code from Sencha Touch is finished before the panel starts loading, then what is the problem???

Sencha Touch is not the problem, the JavaScript engine from your mobile browser is. The engine creates the required elements in the DOM, but rendering of the new elements (the load mask) is deferred until it ‘has time’. It is still busy finishing the rest of your call, creating the new panel and inserting it’s required elements into the DOM as well. The rendering process is only started after that.

The solution

We found a quick and easy solution to this problem: we force the Javascript engine to finish the flow of our first call first, including rendering and starting the Controller action only after that. For this we created a custom dispatch method that defers the call to the controller by 1 microsecond. What this does is that by means of JavaScript’s setTimeout function, a new function call is scheduled immediately. It will however only begin processing once the process that is currently active has finished, allowing the process to complete the rendering process as well.

in app.js

[javascript]
dispatch: function(config) {
	new Ext.util.DelayedTask(function(){
		Ext.dispatch(config);
	}).delay(1);
}
[/javascript]

We can then replace our original dispatch call by:

[javascript]
myTapHandler: function() {
	MyApp.mask();
	MyApp.dispatch({
		controller: 'controllerX',
		action: 'loadComplexPanelIntoCardLayout'
	});
}
[/javascript]

And voila, the loadMask show nicely before the controller starts working with no (well ok, 1ms) delay.

Hope this helps others. Let me know what you think or if you’ve got an even simpler solution

ABN AMRO: Alternative Funds

An alternative investment is an investment other the traditional investments  of stocks, bonds or cash. The investments can include tangible assets such as real estate, private equity, art, wine and antiques and financial assets such as commodities and derivatives. ABN AMRO Luxembourg acts as a custodian to highly specialized alternative investment funds. Without going into detail of all responsibilities of a custodian bank, roughly the custodian is responsible for safeguarding and supervising the fund’s assets.

With the responsibilities of a custodian come a great number of internal and external requirements that have to be met. In order to demonstrate that the custodian has properly performed its obligations, it is important that the structure of the funds, all actions by the custodian’s staff and all required documentation are captured and are always up to date. At any moment the custodian should be able to produce a complete overview of the history of a fund, including all historic changes. This requires a very tight workflow that needs to be supported by specialized software. Most banks rely on excel spreadsheets for this task, which presents some specific risks.

Alternative Fund System

The Alternative Fund System has been designed as a intranet application. Aside from the technical requirements there were a number of functional requirements that needed to be covered by the foreseen application:

• Ease of use
• Authentication and authorization
• 4-eye-control – input validation
• Print-outs
• Audit trail
• Entity structure
• Workflow management
• Todo management
• Document management

AFS Project

Because of the tight planning, close cooperation with ABN AMRO was necessary. The project has been executed using agile methodologies. In short iterations of 2-3 weeks the system was designed and implemented. At the start of each iteration, the set of requirements were discussed that were to be developed during that iteration. During the next meeting the results were discussed and evaluated and new requirements for the next iteration fixed. This close cooperation between the client and supplier requires both parties to be actively involved in the development. The result is a software solution that better fits the business requirements since the client is consulted and informed throughout the project, and a much faster development process. Design errors or business requirement mismatches are caught and solved early on in the project.

Implementation

Because of the speed of the project the choice was made for the Catalyst Framework as a basis for the server component of the AFS application. Besides the great flexibility, extensibility and performance this MVC framework offers, it also allows the use of the 90.000+ CPAN modules directly from the framework.

It quickly became apparent that the major bulk of complexity was to be expected in the interface of the system. The choice for the interface framework was easily made: ExtJS by Sencha Inc. The ExtJS framework is currently the most sophisticated Rich Internet Application framework available, by far. Besides an enormous amount of readily available interface widgets and cross-browser functionality, the framework allows developers to create custom interface widgets very easily and quickly and develop the interface in a maintainable Object Oriented fashion.

The client and server components are closely integrated using Ext Direct technology which allows seamless communication between the client and server while optimizing bandwidth usage.

Features

Ease of use

The application needed to provide an easy-to-use interface such that extensive training should not be required. The complexity of the underlying investment project should be abstracted away. All information that is not required for a user’s task should be hidden. The resulting interface can be adjusted on a per-user basis. The user can define which functions and information to show, and how the information should be presented. All user settings are stored on the server so that settings are also available after logging out and back in, or when using the application from another computer.

No matter what information is being worked on, the interface works exactly the same way. This speeds up the learning curve significantly while reducing the risk of human errors.

As the fund structures can become very complex, it is crucial that the fund team members can find any information in the system quickly and easily. All data views and grids have been equipped with server side filters and search functionality.

Authentication and authorization layer

ABN AMRO internal IT can define and administer user accounts and authorization levels. A role-based authorization editor was added to the system allowing IT staff to exactly define the access rights per user and role.

4-eye-control, event triggers and workflow management

The system provides an easy-to-use 4-eye-control system in which certain user input must be validated by another user. These controls can be set up by the IT staff using a simple 3-step trigger editor. Using this simple procedure, very complex rules can be defined under which an action is triggered in the system. For example:

• When a legal entity of type SA is changed, the input has to be validated by a user that has the role ‘Management’
• When a Bank Account with currency USD is added to a Legal entity, 3 documents must be submitted and a monthly recurring task is setup to register the end-of-month balance

This functionality offers complete 4-eye control and task management in the AFS application. When one action is executed it can be configured to automatically create new Todo items.

Audit trail

All changes into the system by any user are logged, including a change-log of exactly what was changed by whom in the system.

Entity structure

The underlying legal structures of the fund are easily made available in the form of a dynamically created organizational chart. The organizational chart is interactive, allowing the user to navigate to a legal structure and all related content with the click of a mouse. At every level in a legal structure the complete substructure can be made visible this way.

And much, much more

This project would not have been possible without the close cooperation with ABN AMRO. Because of their timely and accurate feedback on development, a very complex application was created in a very short period of time.  It was fun and exciting to work on a project with a party that knows it’s business inside out. The result is an application that is very closely matched to the internal work processes.

From a technical viewpoint the application would not have been feasible without the excellent ExtJS framework. The framework is an absolute joy to work with, in completeness, extensibility and maintainability and the excellent documentation.

Besides the enormous physical challenges, which the team has been training for for 2.5 years, there were also a number of technical problems to solve. When the team contacted us to ask for help solving those problems we immediately said YES.

The problems that needed a solution were:
- Communicating with followers and the home support team during the trip
- Sharing journals, pictures and movies with the public
- Communicating about the progress along the route

Brand new website

The team had a website that had been set up during the preparation for the trip. The website served perfectly for communicating static information about the preparations, the goals and sponsors and partners. For the next phase of the project, the journey itself, other goals however became more important. After trying to integrate all the wishes into the existing site we decided, together with the team, that it would be better to completely rebuild the website using WordPress as a basis. Check the new website here.
The new setup would enable the team itself to continuously update the website with all information coming from Australia. It would also enable us to:
- create a more modern look-and-feel with more call-for-action. Thus a completely new website style was created.
- integrate the website with social media
- include secure donations using PayPal
- optimize the site for search engine rankings
- include tracking by Google analytics, set up goals and funnels to measure conversion
- integrate content from YouTube, Picasa and Flickr
- make the site multilingual
- integrate GPS tracking information

Aside from the site itself, a mobile site was also created. The first initiative was to build a native iphone application but because of the fact that Apple blocks most applications that are used to make donations, the choice was made for a mobile theme for WordPress.

GPS tracking

To enable everyone to track the progress of the team a live tracking system was implemented. GPS tracking itself is handled by the RunKeeper IPhone application. The results from the tracks are extracted from the RunKeeper profile using a custom built extractor (exporting is not supported by RunKeeper) on a 5-minute basis. This allows us to track average speed, distance, elevation and calories burnt.

This data is then transformed into a custom dashboard widget that is visible on all pages and uses a combination of Google’s Map API and JQuery to show rotating information about the journey in near realtime. The charts on the live-follow page are created by RunKeeper and have been integrated into the site. When there is network coverage and the team is bicycling, the charts are updated every few seconds.

Other sponsoring

Appoint:solutions sponsored the complete development of the website and related functionalities and further sponsored:

- a portable but powerful solar panel with integrated battery pack. The solar panel keeps the IPhone’s battery from draining due to the constant usage of GPS and 3G. Without this solar panel the battery would die within 4 hours of usage while a typical day’s cycling is 12-13 hours.
- Hosting for the website
- Support for the team by consulting about the possibilities of technology and social media

It was a joy to be able to use our creativity and experience in supporting such a great cause. We wish 100 Days for KiKa all the best and hope to have contributed a small part in realizing their dream of collecting a large sum of money for KiKa. If you like the effort, please support their cause by donating! It will help create less aggressive treatment for children with cancer, better chances of survival and a better quality of live at a later age.

Good luck guys!

Appoint:solutions

[javascript]

getRowClass: function(record, rowIndex, p, ds) {
    p.cols = p.cols - 1;
    var content = this.bodyContent[record.id];
    if (!content && !this.lazyRender) {
        content = this.getBodyContent(record, rowIndex);
    }
    if (content) {
        p.body = content;
    }
    return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
},

/*	If grid already has a getRowClass, don't override it
 *	get the original class and combine it with our class
 */
// @private
combineGetRowClass: function(record, rowIndex, p, ds) {
    var cls = this.originalGetRowClass(record, rowIndex, p, ds) + '"" + this.getRowClass(record, rowIndex, p, ds);
    return cls;
},

init: function(grid) {
    this.grid = grid;

    var view = grid.getView();

    /* create a backup copy of the original, we want to apply both the standard and our custom functions */
    if (view.getRowClass) {
        this.originalGetRowClass = this.clone(view.getRowClass);
        view.getRowClass = this.combineGetRowClass.createDelegate(this);
    } else {
        view.getRowClass = this.getRowClass.createDelegate(this);
    }

    view.enableRowBody = true;

    grid.on('render', this.onRender, this);
    grid.on('destroy', this.onDestroy, this);
},

// @private
clone: function(obj) {
    if (obj == null || typeof(obj) != 'object') return obj;

    var temp = new obj.constructor();
    for (var key in obj)
    temp[key] = clone(obj[key]);

    return temp;
}

[/javascript]

Normally the eventmanager would be created like this this:

[javascript]
// Create the global event manager
MyApp.eventManager = new Ext.util.Observable();

// Tell the event manager to which it events it should listen
// and allow subscribers to hook in to
MyApp.eventManager.addEvents(
    'selectnode',
    'someotherevent'
);
[/javascript]

The global event manager can then be used by components to fire events on, thus signaling subscribers to the event, or subscribe to certain events themselves.

[javascript]
// Somewhere in a tree click handler
// a tree node object is passed to possible event handlers that are listening
MyApp.eventManager.fireEvent('selectnode',node);

...

// A grid somewhere else should refresh it's store on the above event
// Here the MyGrid instance has a 'refreshHandler' function
MyApp.eventManager.on(
    'selectnode', // the event
    myGrid.refreshHandler.createDelegate(myGrid)
);
[/javascript]

The above publish-subscribe method works like a charm but sometimes fails. The eventManager is passed a reference to a function of a component, in this case function ‘refreshHandler’ of component ‘myGrid’. If the ‘myGrid’ component is destroyed (removed from a parent with autoDestroy true), the (now defunct) reference to the handler function still exists in the global eventManager list of subscribers and causes a javascript error to occur when the event is triggered; a function of a non-existent object is called.

The above can be fixed by extending the Observable class. The extended class makes sure that when an object is destroyed (firing it’s destroy event), any event handlers that might be a part of the object are removed from the list of subscribers.

[javascript]
MyApp.eventManager = Ext.extend(Ext.util.Observable, {
	addListener: function(eventName,handler,scope,options) {
		if (scope) {
			scope.on({
				scope:this,
				beforedestroy: function() { //create closure
					this.removeListener(eventName,handler,scope);
				}
			});
		}

		MyApp.eventManager.superclass.addListener.apply(this, arguments);
	}
});
[/javascript]

Hope it helps anyone

Rob