Creating Web For Mobile And Desktop
From J2Play
Given sufficient planning and care, a Turn-Based J2Play can be written to accomodate both web and mobile users, allowing them to play against each other and increasing the flexibility of your gameplay.
Contents |
Case Study
QuickPoker, a simple php-based poker game was written to be playable both by mobile and desktop users, taking into account the large difference in capabilities between mobile devices, and between mobile devices and desktop browsers. Mobile users can play each other on their mobile phones, or they can play their friends in their favourite social networks.
Things to Keep in Mind When Designing for Mobile and Desktop Browsers
- Mobile devices have varying ranges of screen sizes.
- Mobile devices have varying degrees of support for web standards and css.
- Mobile devices have varying levels of javascript.
- Both mobile and desktop users expect a user experience that is as good as it can be.
For this reason it is important to make a base version of your application targeted at the lowest specifications of devices you want to support, a full-featured game for modern browsers, and versions to support a few different levels with abilities that lie in between.
Templates
Making many versions of the same game can seem like a daunting task, and a maintenance nightmare. However, using a templating system properly can make this task much easier.
Smarty
For quickpoker, we chose Smarty (http://smarty.net/) as a templating engine. It is easy to initialize, and by querying the J2Play api for the current theme, we can display a different interface for each. This is a good illustration of the importance of separating display from controller. If your html were embedded inside your code, adding new interfaces or changing current ones would become quite cumbersome.
Examples
GameView.php
class GameView
{
protected $tpl;
protected $theme;
public function init() {
if(!isset($this->tpl)) {
$this->tpl = new Smarty();
$this->theme=J2PlayController::getInstance()->getTheme();
if(!isset($this->theme)) {
$this->theme="ajax";
}
$this->tpl->template_dir='templates/';
$this->tpl->compile_dir='templates_c/';
}
}
public function assign($key, $val) {
$this->tpl->assign($key,$val);
}
public function fetch($file) {
return $this->tpl->fetch($this->theme."/".$file);
}
}
index.php
include("GameView.php");
$gameview=new GameView();
$gameview->init();
echo $gameview->fetch("main.tpl");
When index.php is now run, it will pull and display the main.tpl from the relevant template directory. e.g. (templates/mobile_base/main.tpl, templates/desktop/main.tpl);
Control Logic Flow
Modern browsers give you the ability to play a game while only updating the necessary portion of the display, avoiding page reloads. However, most mobile browsers do not yet support such an AJAX interface. Accomodations must be made for both.
Ajax
Most modern web-games rely on AJAX to provide a user-friendly interface, free from the need for page-reloads and redraws. Using Sajax, we defined functions that would update gameplay on the fly without the need for page reloads. Server-side interfaces were defined, but the Sajax-related javascript was relegated to the theme to display. If the template files include the Ajax javascript, then this is the way that control-flow is determined.
Controlling Gameplay Through Standard GET/POST Parameters
Unfortunately, few mobile devices yet support the javascript or processing necessary to render a full ajax-interface. For this reason, anything that we made possible from an AJAX interface, we also made possible using 'gameaction' to control the game flow as well as other associated variables. Everything that is possible in Ajax should be possible using only GET/POST parameters in order to have a game that operates in both mobile and desktop environments. Desktop environments can also use standard GET/POST parameters when it is appropriate.
Examples
index.php
include("GameView.php");
// Standard Sajax stuff. Use Get, and export two main functions to javascript
$sajax_request_type = "GET";
sajax_init();
sajax_set_uri("?".J2PlayController::getInstance()->getTransferableParameters());
sajax_export("ajax_play");
sajax_handle_client_request();
$gameview=get_gameview();
$tpl=$gameview->get_template();
ob_start();
sajax_show_javascript();
$ajaxjscript=ob_get_contents();
ob_end_clean();
$gameview->assign("AjaxJavascript",$ajaxjscript);
$gameview=new GameView();
$gameview->init();
In the case of the ajax interface,
switch($_REQUEST["gameaction"]) {
case "play";
echo $gameview->fetch("play.tpl");
break;
default;
echo $gameview->fetch("entry.tpl");
}
function ajax_play() {
return $gameview->fetch("play.tpl");
}
now you can implement both an ajax interface, and a request-based interface in order to control gameplay, and leave it up to your templates to decide how to display the content.
templates/ajax/entry.tpl
<html>
<head>
<script>
{$AjaxJavascript}
function play(results) {
doc.getElementById('play').innerHtml=results;
}
</script>
</head>
<body>
Welcome to the Game!
<div id="play">
<a href="#" onclick="x_play('play'); return false;">play</a>
</div>
</body>
</html>
templates/ajax/play.tpl
You are now playing.
templates/mobile/entry.tpl
<html> <head> <script> <body> Welcome to the Game! <a href="?gameaction=play">play</a> </body> </html>
templates/mobile/play.tpl
<html> <head> <script> <body> You are now playing. </body> </html>
The ajax interface will substitute play.tpl into the 'play' div when the button is clicked. In the mobile interface, when play is clicked, the page will reload and display play.tpl. The control is the same for both themes, the templates are just different.
