Games as Applets

As you may know, we are publishing our games in two formats, Applets and Webstart. Applets works in a similar fashion as a Unity or Flash applications does, you open the web page and the game loads inside it. Webstart applications starts as a desktop application, outside the browser.

In this post we will explain how we deal with Java Applets. One thing we didn't like about applets is that they starts as soon as you visit the page, sometimes you want to visit a game page only to see some information or read comments, etc.

We created a workaround for that, it consists in showing a game's screenshot with a text "click to play" and whenever a player clicks on it, the game is started.

Implementation

Our solution consist in a css with the styles to show the screenshot with the text and a javascript with the logic to change the screenshot with the Java Applet.

First we have styles to show the text over the screenshot and highlight it whenever the user moves the mouse over it.

Style:

  
.play {
	display:block;
	position:relative;
	-moz-opacity:0.80;
	opacity:0.80;
}

.play span {
	-moz-opacity:0.60;
	opacity:0.60;
	display:block;
	position:absolute;
	top:225px;
	z-index:100;
	width:100%;
	color: white;
	font-size: 80px;
	text-align: center;
}

.play:hover span {
	-moz-opacity:1;
	opacity:1;
	display:block;
	position:absolute;
	top:225px;
	z-index:100;
	width:100%;
	color: white;
	text-align: center;
}

Then, we have some javascript to create the screenshot div dynamically, and to replace it with the applet tag when the user clicks on it, or send the user to install the needed version of Java if he hasn't installed yet.

Javascript:

  
	var requiredVersion = '1.6.0_10+'
	var width = "640"
	var height = "480"
	var screenshotUrl = "floatingislands03.jpg"

	var url = "launch-applet.jnlp";
	var attributes = { code:'org.newdawn.slick.AppletGameContainer',  width:width, height:height} ; 
	var parameters = {jnlp_href: url}; 

	var isRequiredVersion = deployJava.versionCheck(requiredVersion);
	var text = ""
	var callback = ""

	if (isRequiredVersion) {
		text = "Click to play"
		callback = "startGame()"
	} else {
		text = "Click to install Java"
		callback = "installJava()"
	}

	var screenshotDivHtml = "
"; screenshotDivHtml += ""+text+""; screenshotDivHtml += "\""+text+"\""+""; screenshotDivHtml += "
"; var appletElement = document.getElementById('applet'); appletElement.innerHTML += screenshotDivHtml; function startGame() { var screenshotElement = document.getElementById('screenshot'); var appletElement = document.getElementById('applet'); appletElement.removeChild(screenshotElement); var oldwrite = document.write; var newHtml = ''; document.write = function (str) { newHtml += str; } deployJava.writeAppletTag(attributes, parameters); document.write = oldwrite; var realAppletElement = document.getElementById('realApplet') realAppletElement.innerHTML = newHtml } function installJava() { deployJava.installJRE(requiredVersion); }

Also, we will need to add two divs to the html to make the javascript to work.

Html:

  

That's all, if you want to take a look at a working example, click here.

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)

Android development

We have been wanting to try the Android platform for some time and just recently bought an HTC Desire phone (It rocks, not so much the multitouch implementation).

Right now we are:

  • Investigating the platform, going through the API and Best Practices, to see what kind of games we can do, and how easy it is.
  • Decoupling our engine from some libraries like Slick2d and Groovy in order to test if we can reuse it for Android development.

One huge issue with Android right now is that the market has support for selling apps from a little list of countries. Of course Uruguay which is where we are from is not one of those. So we have to see if we can make things that can be supported with ads, donations, other markets (not the main android market), or some other solution.

We will be making some update when we have more knlowledge about this interesting platform.

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

New way to show our games

As the title says, we have changed the way we were showing the games.

Now, we have a page for each game showing a screenshot, the game's description and links to play it as an applet or via webstart. This is the page where we would add any content about the game like videos, faq, reviews, comments, etc.

One objective of this change was to make applets more friendly letting you see information about the game before interrupting you with the applet loading and also a friendlier message when you don't have the correct version of the java plugin for your browser.

If you click on the play as applet link, a new page is displayed showing an image of the game and the game's instructions, you can load the applet by clicking on the image.

Hope you like the change.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

First attempt at Highscores for games

We are doing our first attempt at implementing online highscores for our games.

Our Score structure right now is:

Score { 
  id : String   - The unique identifier
  name : String - The name of the player 
  points : long - The value of the score
  timestamp : date - The time when the score was submitted
  tags : Set[String] - A set of tags of the score
  data : Map         - Extra data of the score
}

The tags are used to classify the scores by different criteria, for example, the difficulty, the level, etc.

Data is a map of simple values used to add extra information of the score, like bombs left when the user died or enemies killed of each type, etc.

The idea is to have an online application for the highscores of all the games. All comunication is performed using a gameKey which is unique for each game and allow us to separate the scores by game.

Our current API consist of a submit method and a query method and it is based in HTTP and JSON.

 submit(gamekey : String, name : String, tags : Set[String], 
    points : long, data : JSONString) : String

This method allows us to submit a new score and returns the generated id for it. The extra data attached to the score is specified by a JSON string. The timestamp is generated at the moment the score is stored.

 scores(gamekey, tags, limit, ascending) : List[Score]

This method allows us to query for scores of a game by using:

  • tags : returned scores must have every tag in tags
  • limit : returned quantity must be less than limit
  • ascending : if true scores are returned ordered by points ascending

Our first implementation will be based in google app engine but is not online yet, and Jylonwars will be the first game using it.

There are some features we are thinking about:

  • Security: the submitted scores should be encrypted and validated (we know it is not totally safe but it would prevent casual tampering)
  • Online scores board

Also, we are thinking about making the server project opensource.

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)