share page

free screen-saver

 

How to make your website multiplayer with DimensioneX

KB Article n. 019
Date: May, 12nd, 2004
Originally for: DimensioneX 5.3.6

Abstract

This article explains how to enhance any web site with a multiplayer game powered by DimensioneX.

Introduction

One of the most interesting fetures of DimensioneX version 5.3.6 and up is that it can run inside any webpage by using an IFRAME structure. Italy's leading game portal, www.gamesclan.it has incorporated into their home page the online RPG game Underworld so that it can be played within their site - while keeping all the site controls, banners and ads visible.

This is a unique opportunity for webmasters to attract traffic by offering free multiplayer games on their sites, instead of the well-known, single-player games developed as Java or Flash applets.

Click here or here to see how the result would look like. The game is started by the UnderWorld link you can see in the left menu bar.

Step 1 - Get the URL of the game

Each game developed with DimensioneX has an url to be accessed, of the following structure:

http://servername.domain.com:serverport/path/servletname?param1=value1&param2=value2

Note1: [

So one good idea is to go to our online games page, start the game you wish to include in your site, and then find out the game's URL. The best method is probably to right-click on the browser's toolbar, activate the address bar and then copy the URL. Also clicking in a free space of the game page and choosing "Properties" from the pop-up menu can bring you the URL.

Note2: parameters specified on the url after the question mark are always optional - they can pre-define the user's screen size preferences. For the moment, cut off everything including the question mark and after.

By following the above instruction, you should have obtained that - for example - the URL for the game "The Beach" is the following:

http://www.gamesclan.it/dimx/servlet/multiplayer?game=4

Step 2 - Insert an IFRAME into your page

Next step is to design a webpage for your site (with your ordinary banners and menus) which includes, in some part, an IFRAME structure. For those who don't know, let's say IFRAME is a sort of browser window inside a browser window, if you get what I mean.

Here's the HTML tag you should insert in your web page:

Please replace the URL in the SRC tag above with the actual URL of your desired game.

Test the page, it should work, already.

Step 3 - Auto resizing the IFRAME

In order to optimize the IFRAME automatically, you can use some Javascript code. This Javascript was actually developed by webmaster Rick by www.gamesclan.it.

Insert these tags somewhere in your web page (the best place is within the HEAD section):

<script>
function HeightSize() {
  var myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight - 140;
}

function WidthSize() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}
 

function Resolution()
{
	if(WidthSize > 1024)
	{
		return "?width=800&height=600";
	}
	else
	{
		return "?width=640&height=480";
	}
}

</script>

Note: The above functions WidthSize( ) and Resolution( ) will not be used in this tutorial

Now modify the IFRAME tag by inserting an onLoad parameter (code in bold below), so that the HeightSize function is called to determine IFRAME's perfect height.

Now try the page out.

It is possible that the height of the IFRAME is still not perfect. In that case, simply adjust the number in I wrote in bold (140) appearing in the HeightSize function code. Make that number equal to the size of the upper part of your own web page. Adjusting it by means of a brief trial-and-error process will give you the perfect result.

See our finished demo page here.

Copyright issues

Please remind that incorporating a multiplayer game in your own web site is using a third-party resource for your own puroposes. 

On the other hand, by doing this you will bring more traffic to the game itself so it will be a good trade for both. 

In conclusion, you should always contact the owner of the game you are about to incorporate in your site and ask for permission. This way, you will also avoid the event that the game is moved or shut down without you being aware of it (in that case, typically, your site visitors will find out the game isn't working days before you do).

Need help?

We hope this article was useful to you, webmasters out there.

If you need help in the porting process or have questions/doubts always feel free to post on the Developers' Pub forum.