The result is that its now possible to gain the performance boosts that AJAX page loading makes possible, across the majority of the major browsers (IE not included), without any fear of compromising backwards compatibility or the native behaviours of the browser (back button etc).

Unfortunately the main source of PJAX goodness is JQuery plugin ( jquery-pjax) meaning that those who favour alternative JavaScript frameworks – or even none at all – are left out in the cold.

To remedy this, I decided to create my own standalone implementation of PJAX (Which I insightfully named as PJAX-Standalone). Like its counterpart PJAX-standalone was designed to be highly customisable while at the same time, incredibly easy to get working. For many webpages nothing more than the addition of an ID to your content container and a single call to the PJAX-Standalone script is required.

For those who want more functionality a number of callbacks can also be set in addition to being able to invoke PJAX page loading programmatically as well.

You can see an example of the script in action on the PJAX-Standalone demo page.

Full details on how to use and configure PJAX-Standalone can be found on  Github.

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2012. | Permalink | No comment

Maybe I’m just falling into the “I hate change” trap, but Unity, for me at least, just isn’t what I’m after. Despite a number of attempts to get used it it,  it just  feels awkward to use and doesn’t really fit with the way I want to interact with my computer. Switching back to the gnome environment doesn’t really do the trick either, as I just find myself annoyed at how the gnome 3 “classic” mode has stripped out so many of the features I took for granted. Gnome 3 itself… lets not even go there. So there is the problem, as much as I like Ubuntu, it no longer provides me with an interface I’m comfortable with.

Rather than just continue to moan about all this stuff at great length, I decided I would actually spend a little time being semi-constructive and have a tinker with some of the other options out there (XFCE  and LXDE being the main contenders). Since I’ve used xfce in the past, I opted to give my attention to LXDE.

I already had a blank Ubunutu 11.10 installation sitting around in VirtualBox, so I decided to use that as my base, rather than downloading and installing the proper lubuntu installation.

To begin, I booted up virtual box and logged in to the Ubuntus default unity environment. Then to add the LXDE desktop, I opened up the terminal and ran:

sudo apt-get install lxde

After agreeuing to its demands (50 or so mb of space) and waiting for it to complete, I logged out, switched my environment from “Unity” to “LXDE” (right click the cog next to the login box to select this) and logged back in.

I was then greeted by the following functional (although not especially pretty) desktop.

LXDE Default Desktop

Although not as fully featured as gnome, I was happy to find the interface provided pretty much everything I wanted (including the ability to freely customise the panels). The only real issues I found with the interface, was the clunky and cluttered menu, and its (in my opinion) somewhat unattractive looks. Thankfully, this being Linux, both issues were fairly straightforward to solve.

My first target was the start menu, having come from a windows system the thing I missed most in the menu was the ability to quickly search for what I was after. To solve this problem, I opted to use Cardapio as it offered the above functionality in addition to being stand alone (making it easy to get running).

To get cardapio installed, you’ll want to run the following 3 commands in the terminal which will add the cardapio repository and then download cardapio itself (along with  tracker – in order to allow file searches, and python-glade2 which is a missing dependency of cardapio).

sudo add-apt-repository ppa:cardapio-team/unstable
sudo apt-get update
sudo apt-get install cardapio tracker python-glade2

Once cardapio is installed, the next step is the slighly more difficult task of setting it up in place of the default start menu. Since I was unable to find any reliable documention on how to do this properly, I fiddled around and finally settled on the solution of “botching” it by replacing the panels “Menu” with an “Application launch bar” containing only the cardapio icon.

To do this right click the taskbar and select “Add / Remove panel items”. Then in the dialog, select “Add” and “Appliction launch bar”. This should place the new “appliction launch bar” on the end of the panel, use the up button to move it in front of the existing “Menu”. Double clicking this will now give you the opportunity to add applictions to the “launch bar”. Unfortunately, Cardapio is no where to be seen.

This is becuse cardapio by deafult is set to hidden. To fix this, in your terminal window run.

sudo nano /usr/share/applications/cardapio.desktop

Then using nano, change the value of “NoDisplay” from true to false and save over the original file.

On opening your appliction launch bar again, you should now find Cardapio helpfully listed under “Accessories”. Hit add to move it in to the Launcher, then close the window and give it a try.

With a decent start manager now in place, the next step is just to pretty it up.

To start with I right click the task bar, selected “Panel Settings” and changed the panel Edge to “top” (to place the panel at the top of the desktop). Then in the “Appearance” tab, I change from “Image” to solid “color (with optacity)” and adjusted the colour and opacity in order to provide a semi-transparent black taskbar.

Next, install avant-window-navigator (my dock of choice) using:

sudo apt-get install avant-window-navigator

Once installed, open the start menu and select AWN (just search avant) which should start it running. Don’t worry that it looks hidious at this point. Just right click the dock and select dock preferences, then in the main panel tick the box that says “start Awn automatically” and close it.

To make AWN (Avant Window Navigator) display correctly, you will now need to install and enable a “compositor”. I opted to use “xcompmgr” for this purpose. Install it using:

sudo apt-get install xcompmgr

And to ensure it starts up whenever your copy of ubuntu does, You’ll need to create it a new startup entry.

Run:

sudo nano /etc/xdg/autostart/XCompmgr.desktop

And add the following data:

[Desktop Entry]
Encoding=UTF-8
Name=XCompmgr
Type=Application
Comment=XCompmgr--a light compositor
Exec=xcompmgr
Terminal=false
OnlyShowIn=LXDE

Once this is done, save, then  logout and in again to see the effects.

Now you have a dock, there is not much point having your running applictions listed up top, so right click the panel, select “add/remove items” and remove the “Task bar” and any other unwanted bits from it.

You can also right click AWN and select a more fitting theme within dock preferences.

To finish off prettying up the desktop, I’d suggest changing the desktop background by right clicking the desktop, selecting preferences and then setting it to use an image of your choice. Adjusting the Theme can then be done using lxAppearence (I stuck with clearlook but switched the highlight colour from orange to dark grey) and Configure the window chrome using the “openbox configution manager”. I switched the theme from “Onyx” to “Carbon”.

The end result, with a little luck should now be a somewhat prettier looking LXDE, with a decent start menu and a nice dock. What’s more, even with all the extra stuff, It’s still quite noticeably nippier than both Unity and Gnome.

LXDE Tweaked

As one final task for those using the AutoLogin feature in Ubuntu, you will need to set Ubuntu to use LXDE by default. You can do this with the following command:

sudo /usr/lib/lightdm/lightdm-set-defaults -s LXDE

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2012. | Permalink | No comment

Tank Combat

Hello, welcome to the (somewhat overdue) second part of my “Making HTML5 games by someone who knows pretty much nothing about making games” series. If you’ve not read the first part ( see here ) then it’s probably a good idea to check that out first as the plan is to try and continue from where I left off. If you want to jump right in you can grab a copy of the code produced previously here.

So, just as a recap, the “game” if it can be called that at this stage is being build using the Sprite.js framework and currently consists of a black screen and an ugly looking triangle, which can be controlled using both the arrow and wasd keys. In order to try and bring the “game” closer to something worthy of that description, the next logical step is to start adding a few more features to our game. Shooting, bad guys, stuff like that.

To do this, its probably a good idea to figure out exactly what kind of game we are planning to make, and thus which features its going to need. In the previous tutorial, I’d kinda been thinking of creating a space style shooter, although, to be honest, I don’t really think the movement method fits to well with that. Additionally, I feel like trying something a bit different.

So what’s the new plan?

Tank Combat

Use a tank to fight off the evil alien invaders.

The main aim of this tutorial is to create the above game, with the following four key features;

• The ability to drive the tank with the arrow and wasd keys.
• The ability to aim and shoot using the mouse.
• To have some sort of enemy to fight.
• To have some graphics that actually fit the new game idea.

Given this, I think the first step is to start bringing our existing “game” into line with the new vision.
To start, I’ve created a new “tank” sprite (just a really basic pixel tank).

The tank sprite consist’s of three panels. The first two display the tank body at different stages of movement (basically the tracks move slightly) and the third shows the tanks gun turret, which needs to be separate from the hull so we can position and rotate it separately.

To add the sprite into the game, we will need to update our “ship” sprite definition. I will also rename “ship” to “tank” while here, just to avoid confusion (remember in addition to changing the sprite file, its also important to update the sprite definition with the new sprites width and height).

tank = this.mytank = this.scene.Sprite("tank.png",{
	"layer": this.layer, //Layer tanks will be displayed in.
	"x": 100, 	//X position of sprite
	"y": 100, 	//Y position of sprite
	"w": 36, 	//width of sprite.
	"h": 59 	//height of sprite.
});

To go with the new sprite, you may also want to change the game’s background colour from black to green (like grass) so it fits a little better with the new theme.

Although the tank sprite is now in the game, it’s movement still feels a little wrong, since it was originally set up on the premise that we were going to be controlling a space ship. Because of this I think its worth spending a little time tweaking the way our sprite moves. To start friction plays a much bigger role when not in space, so to replicate this I’ve added an else, to slow the tank down when not accelerating and, in addition I also lowered the acceleration speed from 0.5 to +0.2.

if(this.inputs.keyboard.up){
	if(speed<5) speed = speed+0.2;
}else{
	//Apply friction
	if(speed>0) speed = speed-0.1;
}

While we are playing with movement, it’s also a good time to add some code to stop the tank from constantly flying of the screen as you drive around. To do this, in its simplest form, we just need to add some code that will check whether or not the x & y coordinates the tank is moving too are within the current scene (on screen) and if not, stop that movement from being applied.

To do this add something along the lines of this just above where the new tank position and angle are applied to the sprite (above the comment “//Tell the tank”).

	//Ensure new X position is inside playable area
	if(nx < 0 || (nx + this.mytank.w) > this.layer.w){
		nx = this.mytank.x;
	}
	//Ensure new Y position is inside playable area
	if(ny < 0 || (ny + this.mytank.h) > this.layer.h){
		ny = this.mytank.y;
	}

With a little luck you should find that you are no longer able to drive your tank outside of the game area. While this gets the job done, it (for me at least) feels a little clunky. My solution to this was simply to swap the outright stop effect for a simple bounce effect instead. The new code looks as follows:

	//Ensure new X position is inside playable area
	if(nx < 0 || (nx + this.mytank.w) > this.layer.w){
		speed = -(speed*0.4);
		nx = this.mytank.x;
	}
	//Ensure new Y position is inside playable area
	if(ny < 0 || (ny + this.mytank.h) > this.layer.h){
		speed = -(speed*0.4);
		ny = this.mytank.y;
	}

It works in a very similar way to the simple stop, except rather than simply stopping the ship it also reverses the ship’s momentum at the same time.

Now that it is possible for the tank to have negative momentum, we need to ensure we still apply friction as the current system is only doing this for positive speed.  To achieve this, add a check for “is speed is less than zero” and if so add to our speed until it reaches zero again.

if(this.inputs.keyboard.up){
	if(speed>0) speed = speed-0.1;
	if(speed<0) speed = speed+0.1;
}

The conversion of our existing “space game” into a “tank” game is now nearly complete. To finish off the conversion, we just need to give our tank its turret.

Adding the turret in a basic way should be fairly simple, so for now, let’s just create a new sprite object to be the turret (ensuring we have the correct offsets so that the turret part of our sprite image is all that is visible).

turret = this.myturret = this.scene.Sprite("tank.png",{
	"layer": this.layer, //Layer tanks will be displayed in.
	"x": 100, 	//X position of sprite
	"y": 100, 	//Y position of sprite
	"w": 36, 	//width of sprite.
	"h": 59, 	//height of sprite.
	"xoffset":75,
	"yoffset":0,
	});

Once that is done, we then need to add some code to keep our turret’s position in sync with the main tank. Under the “mytank.update();”, add the following code.

this.myturret.position(nx,ny);
this.myturret.setAngle(ang);
this.myturret.update();

With a little luck you should now have something along the lines of this:

The next step is to give our tank the ability to aim it’s turret, so when bad guys finally do get added, we can shoot them.

As with the keyboard inputs, getting the mouse position in Sprite.JS is fairly simple and is somthing we can just ask spirte.js’s input object to give us. From this and the tank’s own X,Y coordinates, figuring out which way our turret needs to be angled to fire where we point shouldn’t actually be all that difficult (thanks to a handy little math function called atan2).

//Get center point for the tank
tank_cent_y = this.mytank.y+(this.mytank.h/2);
tank_cent_x = this.mytank.x+(this.mytank.w/2);
//Work out angle that the cursor is from tank.
cursorAngle = Math.atan2(
	(this.inputs.mouse.position.y - tank_cent_y),
	(this.inputs.mouse.position.x - tank_cent_x)
 )+1.571;//Add roughly 90 degrees.

Now we have the angle, we can pass it to the “myturrent.SetAngle” method, so that it’s aim will now follow the cursor (instead of just picking up the its angle from the tank hull as it is currently).

this.myturret.setAngle(cursorAngle);

Now we can aim our tank, it makes sense to give it the ability to fire. As with everything else so far, the first thing is to create the missile sprite, for laziness I just went with another quick “paint.exe” job:

Getting it into the game though, will be a little different to how the tank body/turret were added, as unlike them, chances are we are going to want lots of missiles, not just the one. Thus rather than storing each missile individually, we’ll need to keep track of them in an array.

First,  define a new array to hold all our missiles at the top of the engine object.

this.missiles = [];

Then create a new function we can call every time the tank fires, in order to create us a new missile. For simplicity’s sake I just called mine “fireMissile”.

this.fireMissile = function(){
	//Code here
}

Within this method,  we then want to add the code to generate a new sprite and to store it in to our missiles array.

missile = this.scene.Sprite("missile.png",{
	"layer": this.layer,
	"w":4,
	"h":11,
	"angle": 0,
	"x": 0,
	"y": 0

});
this.missiles.push(missile);

The complex bit here is now going to be working out where the missile  needs to be placed, in order to fire from our tanks turret. Getting the angle is the simplest task as we can just grab it from our turret.

var a = this.myturret.angle;

While the x and y coordinates are a little more complex, as although we could just grab the tanks x and y and use that, a missile suddenly appearing in the middle of the tank and flying out doesn’t really make much scene. Instead, we need to figure out the coordinates of the point thirty or so pixels in front of our tank in the direction that the turret is facing.

To start, we are still going to need to get the centre point.

x = this.mytank.x+(this.mytank.w/2);
y = this.mytank.y+(this.mytank.h/2);

Given that, we can then use the same bit of math we use to calculate tank momentum, in order to figure out where our missile is going to be thirty pixels away from the centre of the tank (travelling in the correct direction). I ended up tweaking this to twenty eight pixels as it seemed to  fit a little better.

My resulting “fireMissile” function ended up looking pretty much like this:

this.fireMissile = function(){
	var a = this.myturret.angle;
	var x = (this.mytank.x+(this.mytank.w/2))+ (28 * Math.sin(a));
	var y = (this.mytank.y+(this.mytank.h/2))+ (28 * Math.cos(a))*-1;
	missile = this.scene.Sprite("missile.png",{
		"layer": this.layer,
		"w":4,
		"h":11,
		"angle": a,
		"x": x,
		"y": y
	});
	this.missiles.push(missile);

}

In order to make clicking actually call the function, you then need to add the following line under the rest of the movement/input code in the run function:

if(this.inputs.mouse.click) this.fireMissile();

At this point you will probably notice that none of the missile sprites added to the game are actually showing up yet, this is because we haven’t yet added a mechanism to update (and therfore draw) the new sprites.

To do this the easiest option is to again create an additioal function, then ensure its called ever time the game loop runs, by adding code such as the following to the bottom of the run function.

this.updateMissiles();

Next you need to create the updateMissiles function in order to give the aforementioned code something to call. Effectively the purpose of the updateMissiles function will be to loop through all missiles contained in the “missiles” array, and apply any updates needed (movement, redrawing etc).

To implement movement, we can use the same technique we used to calculate our missiles initial location (and to move the tank itself around)  in order to calculate the missiles next position. This can then be applied to the sprite before “update()” is called to redraw the sprite in the new location.

this.updateMissiles = function(){
	this.missiles.forEach(function(m){
		var x = m.x+ (6 * Math.sin(m.angle));
		var y = m.y+ (6 * Math.cos(m.angle))*-1
		m.position(x,y);
		m.update();
	});
}

Although this works fine, it’s probably a good idea to add a little bit of functionality to clean up sprites we no longer need, as once a missile leaves the game area there’s not a lot of point keeping it updated, or indeed, in the game at all.

To do this we will need to be able to remove sprites from the “this.missiles” array in engine, meaning we need to ensure the engine is avaible outside the scope of the main game object. (As the .forEach() method will put us in its own scope). To do this simply define a variable called engine above of the engine function.

In order to calculate whether or not we now want to remove a missile, we will need to get it’s x and y position and check they are both above zero and not beyond the width or height of our game area. If it is, we will then want to call “remove()” on the sprite itself and then remove it from our missiles array.

if(!(
	(m.x>0 && m.x < m.layer.w) &&
	(m.y>0 && m.y < m.layer.h)
)){
	m.remove();
	engine.missiles.splice(engine.missiles.indexOf(m),1);
}

Assuming everything has gone to plan, you should now have a game that looks like this:

So we have a tank, we can drive around and can shoot missiles. I guess the next thing on the agenda is to create something to fight. To start I quickly created a new sprite to use as our “bad guy aliens”.

Then i added a additional array to our engine object so we have somewhere to keep track of them (essentially they are going to work in much the same way that missiles do now).

Under our “this.missiles” array, add a:

this.monsters = [];

Then create the outline of your new spawnSlug (which is my monster of choice) and updateMonster methods.

this.spawnSlug = function(x,y){
//stuff here
}
this.updateMonsters = function(){
//stuff here
}

Creating a new slug is going to be almost identical to how missiles are created. We just setup our monster sprite and add the result to our” monsters” array.
The angle itself doesn’t really matter so I’ve just set it as one, and the x and y coordinates to spawn our new slug are passed in as parameters.

this.spawnSlug = function(x,y){
	slug = this.scene.Sprite("slug.png",{
		"layer": this.layer,
		"w":16,
		"h":39,
		"angle": 1,
		"x": x,
		"y": y
	});
	this.monsters.push(slug);
}

Since the slug sprite has a few steps of animation, it’s also a good time to make use of Sprite.js’s Cycle method, which essentially allows us to easily animate our sprite using the sprite panel we created. This is done by providing an array of steps, each consisting of the x and y offset we should apply to our Sprite panel and the duration each panel should display for. Once setup the Cycle can then be attached to the slug sprite.

In order to keep track of the new Cycle object, I’ve chosen to store it within the Sprite object itself in an attribute called animation.

//Create slug sprite
this.spawnSlug = function(x,y){
	slug = this.scene.Sprite("slug.png",{
		"layer": this.layer,
		"w":16,
		"h":39,
		"angle": 1,
		"x": x,
		"y": y
	});
	//setup animation.
	slug.animation = scene.Cycle([
		[0,0,5],
		[16,0,5],
		[32,0,5],
		[48,0,5],
		[32,0,5],
		[16,0,5]
	]).addSprite(slug);
	this.monsters.push(slug);
}

Now we can create slug sprites, the next step is to do something with them once they are in the game. As with the missiles this is done by iterating through the list of monsters and applying certain actions to each, before finally updating the sprite. It is useful to note that if you call update on a cycle (as stored in the m.animation) you no longer need to call update on the Sprite itself in order to apply any movement/rotation.

this.updateMonsters = function(){
	//Loop through each monster sprite
	this.monsters.forEach(function(m){
		m.animation.next().update();
	});
}

Now we can start adding some behaviours to our monster, for example making them slowly advance towards the player. Using “atan2″ again, we can  figure out which direction our sprite needs to travel in in order to find our tank (in the same way that we did when working out which direction to point our turret.)

var a = Math.atan2(
	(engine.mytank.y-m.y),
	(engine.mytank.x-m.x)
)+1.571;//90 degrees

Using this angle we can then point our sprite towards the tank and, then using the movement code now powering both the tank itself and it’s missiles, give our monsters the ability to move. The full code may look something like:

this.updateMonsters = function(){
	//Loop through each monster sprite
	this.monsters.forEach(function(m){
		var a = Math.atan2(
			(engine.mytank.y-m.y),
			(engine.mytank.x-m.x)
		)+1.571;
		//Work out new location
		var x = m.x+ (1 * Math.sin(a));
		var y = m.y+ (1 * Math.cos(a))*-1;
		//Apply changes
		m.position(x,y);
		m.setAngle(a)
		m.animation.next().update();
	});
}

In order to test that everything is now working as we expect, we just need to add a little code to our game to spawn the new slug monsters at certain intervals.

if((engine.ticker.currentTick % 200)==0){
	this.spawnSlug(400,-50);
}

The above code will simply add a new slug monster, every 200 ticks of the game loop. Having monsters that want to eat our tank is all well and good, but not a lot of fun if we can’t shoot them. To start, lets add a hp variable to your tank sprite.

this.mytank.hp = 5;

And the same to your monsters, within the spawnSlug method. (I gave mine 2 hp)

slug.hp = 2;

Now comes the hard part, collision detection, fortunately for us, we don’t need to worry to much about this. Sprite.js helpfully comes packaged with its own collision detection system, stored in “lib/collison.js” . Adding this to our game, suddenly adds a host of useful “collidesWith” style methods for detecting collisions (no Math required).

<script type="text/javascript" src='../vendor/lib/collision.js'></script>

To make use of this, navigate back in to your “updateMonsters” method and under the code to apply sprite changes, add:

//Detect collisions
col = m.collidesWithArray(engine.missiles);
if(col !== false){ //false means there were no collisions
	//Take 1 hp away from this monster.
	m.hp--;
	//If monster has less than 1 hp (0), remove it from the game.
	if(m.hp < 1){
		//Remove sprite
		m.remove();
		//remove fictional sprite from our array
		engine.monsters.splice(engine.monsters.indexOf(m),1);
	}
	//remove missile
	col.remove();
	//remove missile from our array
	engine.missiles.splice(engine.missiles.indexOf(col),1);
}

Essentally the above code checks to see whether the current monster has collided with any of the missiles  stored within the missiles array. If no collisions were detected then the “m.collidesWithArray()”  will return false and nothing will happen.

Alternately, if there was a collision between the current monster and a missile, 1 hp is removed from the monster and a check is done to ensure the monsters isn’t dead (if its hp is below 1 (as in 0)), if the monster turns out to be dead, it is then removed from the game. Once this is complete, the missile that hit the monster is then also removed from the game, regardless of whether the monster was killed.

If you play the game now, you should find you are able to shoot the slug monsters as they come towards you. Fun as this is, being invulnerable takes away from the satisfaction, so the next step will be to add a little danger.

Under the above collision code, add:

//Has a monster got to your tank?
col_me = m.collidesWith(engine.mytank);
if(col_me !== false){
	//If so, remove the monster, and take 1hp away from your tank
	m.remove();
	engine.monsters.splice(engine.monsters.indexOf(m),1);
	engine.mytank.hp--;
	//Check to see if the tank is dead?
	if(engine.mytank.hp < 1){
		engine.ticker.pause();
		alert("game over");
	}
}

This code  does the same thing as the previous collision code, except it is checking for collisions between the current monster and your tank, taking away your hp and removing the monster whenever one gets to you. If your tank runs out of hp, “game over” is then triggered by pausing the game loop and displaying a “game over” warning.

Because spawning is currently quite predictable, I think it’s worth adding a slightly better spawning mechanism, just to make the direction the monsters come from a little less predictable, and to additionally add a slowly increasing level of difficulty to the game.

Create a new function called spawnMonster, with code that looks something like;

this.spawnMonster = function(){
	//50% chance of spawning top/bottom or left/right
	if(Math.round(Math.random())==1){
		//If left or right, randomly choose a height to attach
		//our new monster at
		h = Math.floor(Math.random()*this.layer.h);
		if(Math.round(Math.random())==1){
			//attach right
			this.spawnSlug(this.layer.w+50,h);
		}else{
			//attach left
			this.spawnSlug(-50,h);
		}
	}else{
		//if top/bottom, figure out what width to add our sprite
		//at
		w = Math.floor(Math.random()*this.layer.w);
		if(Math.round(Math.random())==1){
			//at bottom
			this.spawnSlug(w,this.layer.h+50);
		}else{
			//at top
			this.spawnSlug(w,-50);
		}
	}
}

The above code essentially flips a coin on whether the monster should spawn at the top/bottom or left/right of the game area. Then depending on which is picked, pick a random position on either the x or y axis (just off screen) to add a sprite. The side the sprite will spawn on is then selected by another coin flip (so to speak).

Once this is done, go to the “run” function and just above where the speed variable is being defined, define a second one and call it spawnrate. Set it to 200. Now within the run method itself, replace the previous monster spawning code with:

//Spawn monster every time tick is a multiple of spawnrate
if((this.ticker.currentTick % spawnrate)==0){
	//If spawn rate is higher than 20, decrese it by 2.
	if(spawnrate>20) spawnrate=spawnrate-2;
	//Spawn a monster somewhere
	this.spawnMonster();
}

The new code will call the this.spawnMonster to create a new slug in a random location, every time the ticker equals a multiple of “spawnrate”. Additionally, each spawn, the time before the next spawn decreases slightly, meaning the monsters will begin to spawn at a faster and faster rate (until the maximum of one every 20 ticks is reached).

To finish off,  make sure to add all the new sprite images to your scene.loadImages back in your bootstrap function, just to avoid the game starting before all sprites have been loaded in to memory.

scene.loadImages([
	'tank.png',
	'slug.png',
	'missile.png',
	 ], function() {

Hopefully, if everything went to plan your game should now look and play something like this:

Now the game is more a less playable and pretty much all our original goals have been completed. I just wanted to add a few final tweaks, that should hopefully make the game that little bit more enjoyable to play. 90% of this change just being the addition of a Score and the visibility of your hp.

To add the HP & score box, I added the following html in to the page (under the game_map div).

<div id='score_board'>
	<div id='score'>0</div>
	<div >Health: <span id='hp'>5</span>/5</div>
</div>

Combined with the following CSS

#score_board {position:absolute;width:100px;right:0;top:0;color:#fff;z-index:9999;}
#score_board div {text-align:center;}
#score{font-size:5em;font-weight:bold;}

This just adds a div on the top right, with a big number to indicate the score and a smaller line of text to tell you your hp. To make both the HP & score counter work, add a score attribute to the main game object (below “this.inputs”).

this.score = 0;

Then in the updateMonsters method, just below where we removed destroyed monsters from the game, add the following code.

engine.score++;
document.getElementById('score').innerHTML = engine.score;

Then, a little further down where hp is being deducted from your own tank (just under “engine.mytank.hp–;”) add

document.getElementById('hp').innerHTML = engine.mytank.hp;

to keep your HP in sync with the UI.

And last but not least, to make the loosing screen a little less annoying, replace the “game over” alert with:

document.body.innerHTML ='<div class="end"><h1>Game Over!</h1><div>Your Score: '+engine.score+'</div></div>';

And add the following bit of additional css to your styles:

.end {
	background-color:#fff;
	color:#000;
	width:400px;
	text-align:center;
	margin-top:50px;
	padding:10px;
}

With that complete, for the purposes of this tutorial. Your done! Congratulation, you should now have a simple tank game that looks more or less like this:

Keep in mind, at this point the game is still really basic, so I encourage you to have a go at developing it further. Just as a few ideas of things you may want to consider adding:

• Sounds for when firing the cannon, driving and blowing up monsters.
• More monsters types, and maybe some smarter monster behaviours.
• High scores?
• Some terrain, to drive around.
• Mobile support (Sprite.js) adds some basic stuff for mobile, but the game would benefit a lot from a properly mobile oriented control system.

All code seen in this tutorial and comprising the demos is released as Open Source under the MIT Licence. The source for all demos can be found here.

Thanks for reading,

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2012. | Permalink | No comment

Fleet Command - a HTML5 Game

If your thinking about trying your hand at creating a HTML5 game, but have no game creation experince on which to draw, your probably in the same boat as me. Since, despite this limitation, I decided to start making  a HTML5 game anyway, I thought I may as well post about my experiences in the hope they are useful (or at least interesting) to other people.

My true first attempt to create a HTML5 game was a few months back when I decided I’d start hitting the keyboard and hope something worked. Over the following week  I slowly hacked together the outline of a more-a-less functional but totally unsustainable JavaScript based Asteroids style shoot-em up game. Although it never really went any where, I did  learn some pretty important lessons from the experience. The summarise them:

Based on this, for my latest attempt at making a game (which is substantially more ambitious) I decided to actually have a proper think at how I planned to develop it. I even went so far as to think up a basic plot and doodle roughly how i wanted it all to look. Aside from this though, one of my first major actions was to have a look at some of the HTML5 Game Development frameworks out there, so as to save myself having to reinvent the wheel for the second time (Granted that for the purpose’s of this analogy my last “wheel” was more oval than circle).

It turns out there are actually  quite a lot of HTML5 Game Development frameworks out there, after trying a few though i ended up selecting Batiste’s Spirte.js to be my starting point. The reasons for this are fairly simple, sprite.js is very lightweight,  it support’s webGL (I’m not actually making use of this, i just think its cool), it includes some great extras such as functions for path finding class & collision detection (which you can include as needed) and even though the documentation is a little sparse, the code is easy to read and there are a load of useful examples included.

After finally deciding to go ahead with the game using sprite.js, I spend a good few hours playing around with it, reading its documentation and taking a look though the examples on offer. One of the first things I noticed was that features such as pausing a game, were actually added by sprite.js out of the box. Additionally there were also handy methods to access user input, load assets in to memory prior to the game starting and a host other other little bits & bobs which help to make starting a new game much less painless.

After getting roughly to grips with the codebase, I decided I may as well start actually building my game. My initial aim was to try and replicate the functionality iIhad managed on my first foray in to HTML5 Game building territory. To do this I started off by creating a new HTML file, set up a basic HTML5 structure  (html,head,body kinda stuff, no real content) and added a JavaScript include to grab sprite.js itself, plus this code in the head:

<script type="text/javascript">
	var bootstrap = function(){
		//Create new Sprite.js Scene (effectively the Canvas that sprite js draws on to)
		var scene = sjs.Scene({'w':window.innerWidth, 'h':window.innerHeight});
		var layer = scene.Layer("game_layer");
		//Load images needed to display (ensure these images exist or it won't load)
		scene.loadImages([
			'ship.png',
	 		'background.png'
			 ],
		 function() {
	 		//Create instance of Engine (class i'm using to run the game)
	 		engine = new Engine(scene, layer);
	 		//Setup game loop via Sprite.js's ticker (calls engine's run method)
	 		ticker = scene.Ticker(function() { engine.run(); });
	 		//Pass ticker to engine
	 		engine.setTicker(ticker);
	 		//Start the ticker
	 		ticker.run();
		});
	}
	//Bootstap Game (when page is loaded)
	window.addEventListener("load", bootstrap, false);
</script>

The job of the above code is pretty much to set sprite.js up and then pass along all the important values to my “engine” class. Once the document has loaded and sprite.js has loaded its required assets, the engine class is instantiated, the ticker is created and finally everything gets set in motion with the call to ticker.run().  The most basic engine class that won’t crash should look something along the lines of:

function Engine(scene, layer){
		//store scene and layer for later
		this.scene = scene;
		this.layer = layer;
		this.ticker = null;
		//Create our sprite
		this.myship = this.scene.Sprite("ship.png",{
			"layer": this.layer, //Layer ship will be displayed in.
			"x": 100, 	//X position of sprite
			"y": 100, 	//Y position of sprite
			"w": 37, 	//width of sprite.
			"h": 75 	//height of sprite.
		});

		//Add set ticker method to Engine
		this.setTicker = function(ticker){
			this.ticker = ticker;
		}

		//Create run method which will be called each time the
		//game loop runs.
		this.run = function(){
			//Apply sprites changes (in this case make
			//it so we can see it)
			this.myship.update();
		}
	}

And running the above code should give you something that looks like this.

If all has gone to plan (it hasn’t died horribly) the next step is to make the game actually do something in its run loop. We can use the built in Inputs() Class to get our inputs from the user. To add this, just add the below code under the “this.layer = layer;’ line in the engine class.

this.inputs = scene.Input();

The addition of the above code now means which can check for “this.inputs.keyboard.up” which will return true whenever the user hits the up arrow (or w) key. The same is true for when the down key is pressed, or the left and right arrow keys. Using this we can start making things happen when these keys are pressed, the simplest form of this I could think of was to simply hook each action up so that it alters ships current position by adding or subtracting from its x and y values. The result being that a user will then be able to move the ship around the game are using their arrow keys.

Once this was done, my updated run method looked much like this:

	this.run = function(){
		//Get ships current x and y.
		nx = this.myship.x;
		ny = this.myship.y;
		//Update it depending on which keys are pressed.
		if(this.inputs.keyboard.left){
			nx -= 2;
		}
		if(this.inputs.keyboard.right){
			nx += 2;
		}
		if(this.inputs.keyboard.up){
			ny -= 2;
		}
		if(this.inputs.keyboard.down){
			ny += 2;
		}
		//Tell the ship
		this.myship.position(nx,ny);
		this.myship.offset(0,0);
		//Apply the changes
		this.myship.update();
	}

Assuming everything went well running you game should now give you somthing along the lines of this.

So, now we have movement, but it isn’t really very space ship like movement. To make the movement a little more “space ship” like, my first action was to change the behaviour of the left and right arrow keys, so that the rotate the ship in a given direction, rather than just move it left or right. To do this,  grab the ships current angle and just add or subtract 2 degree’s depending on which way we want to turn the ship. The code may look like:

	ang = this.myship.angle;
	//Update it depending on which keys are pressed.
	if(this.inputs.keyboard.left){
		ang = (-2*(Math.PI/180))+ang;
	}
	if(this.inputs.keyboard.right){
		ang = (2*(Math.PI/180))+ang;
	}

One thing you probably noticed is the adding 2 degrees is a little more maths heavy than you would have guessed. The reason for this is that sprite.js uses radians rather than degrees to calculate the rotation of the ship. To convert from degrees to radians we need to multiply are degree value by PI/180 and then everything will work as expected. Once we have are 2 degrees in radian form, we simply add it to the current angle value to produce a new value for our ships rotation.

On its own though this won’t do a lot as we still need to tell the sprite we want it to rotate to the angle value we just worked out. To do this simply add the call to the setAngle method, passing it our value, before the sprites update method .update() is run.

this.myship.setAngle(ang);

With the addition of the above code and a little luck your ship should now rotate. The next step is going to be making the ship travel in the right direction when we hit the up button, something that’s going to take a little math to solve. Fortunately the required math has already been calculated, meaning all we need to do is to shove our own values in to the formula below.

new_x += (movement * Math.sin(angle));
new_y += (movment * Math.cos(angle));

So for the purposes of our code, our go forward method should look like: (Keep in mind the Y position is the distance from the top of the canvas, so we need to invert this value for it to make sense in the context of our game)

	nx += (5 * Math.sin(ang));
	ny += (5 * Math.cos(ang))*-1;

We now move in the right direction, but it still seems a little lacking. Whats needed is a way to keep track of momentum and for simplicity sake the easiest way to do this is just add a var called speed outside of the run loop and set it to 0. The next step is then to move the “forward” code out for the forward action and to the main body of the run method, so that it will be called every time the game loop runs. Inside the now empty forward if statments action, add the following code

if(speed < 5) speed = speed+0.5;

This will essentially cause the speed value to be increased when you hit the forward button.(limiting it to a max speed of 5 pixels per game loop.) Additionally you now need to swap the 5 in the moment code to use your speed value instead (or you will constantly be moving at that speed).

Now you have momentum, its also probably also worth adding a way of slowing back down again. The simplest way to do this is to add a little code in to the down arrows action, that does pretty much the exact opposite of the forward keys action. For example

if(speed > 0) speed -= 0.5;

Altogether your run loop should now look something like:

	var speed =0;
	//Create run method which will be called each time the
	//game loop runs.
	this.run = function(){

		//Get ships current x and y.
		nx = this.myship.x;
		ny = this.myship.y;
		ang = this.myship.angle;

		//Update it depending on which keys are pressed.
		if(this.inputs.keyboard.left){
			ang = (-2*(Math.PI/180))+ang;
		}
		if(this.inputs.keyboard.right){
			ang = (2*(Math.PI/180))+ang;
		}
		if(this.inputs.keyboard.up){
			if(speed < 5) speed = speed+0.5;
		}
		if(this.inputs.keyboard.down){
			if(speed > 0) speed -= 0.5;
		}
		nx += (speed * Math.sin(ang));
		ny += (speed * Math.cos(ang))*-1;

		//Tell the ship
		this.myship.position(nx,ny);
		this.myship.setAngle(ang);
		this.myship.offset(0,0);
		//Apply the changes
		this.myship.update();
	}

You can see the full code (so far) in action here.

I’m planning to create a series of posts on HTML5/JavaScript game making when I get the time, so with luck this is just the first of many such articles. Since I covered a lot of the basic set-up in this post, hopefully in my next one I’ll be able to make a little more headway in to the actual meat of the stuff.

You can now view the next tutorial in this series here

Also, if your wondering how the game that inspired this tutorial is going, check out what I’ve got so far here.

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | No comment

PHP Secret Santa

After a few years of neglect I decided it was about time I gave my ageing PHP Secret Santa App a bit of an update.

The original, having been the result of a spur of the moment, hacked together reaction to the idea of running a CS Secret Santa between my friends (way back when in my second year of UNI), was as you may have guessed a pretty crappy implementation. The code was awful and the word awful just doesn’t capture just how bad the UI really was. Despite this, I’ve still somehow ended up running the script almost every time Christmas rolls come around.

My newer version of the script functions, effectively, the same as my original. Rather than taking the more common approach of putting the names in to two arrays, shuffling one, then joining em back together until no one ends up with themselves, I decided to stick with my original “names in a hat” style algorithm. Mostly just for nostalgia value. The implementation effectively mirrors its real world equivalent, with each user taking their turn to grab a value from the “hat” (array of users who need gifts buying from them)  and putting it back and taking another if they happen to get themselves. This continues until every user has someone to buy for. The one flaw with this plan is that when the final person comes to pick, if it so happens that the only person left in the “hat” is themselves, there a little stuck. My solution to this problem was essentially just to make them swap with another user. Which so far has worked pretty well

Once everyone has been assigned someone to buy for, the next step is just email everyone telling them who they have. It may not be the shortest, simplest or most straight forward solution, but I quite like it either way.

The next step of the Rebuild was to try and create a “slightly” nicer looking UI, although due to my terrible design skills I’m not sure how successful this was, but on the bright side, I found an excuse to make a JavaScript Add User button.

As normal the code can be found on my github or you can use the live version here: http://userbag.co.uk/labs/santa/

Please feel free to ask questions, point out bugs/flaws or even just use the script for your own Secret Santa’s.

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | No comment

The aim of the class is essentially to make interacting with the SharePoint Lists API a whole lot more straight forward and allow PHP developers to talk with the Lists API without having to get there hands dirty with SOAP.

As with most stuff I create, its free under MIT licence and is being maintained on my Github account. At current the tool is fairly basic, although if I end up working on a SharePoint based project again I may take the opportunity to expand it further. If anyone spots any bugs or wants to add some features feel free to send em my way or just fork the github repo. Currently the SharePointAPI code is only capable of interacting with an existing SharePoint list and does not support creating new ones programmatically at this time.

You can grab the full source from: https://github.com/thybag/PHP-SharePoint-Lists-API

Setting up the PHP SharePointAPI Object

Using the SharePointAPI to read a SharePoint list is pretty straight forward. The first step is to create a new instance of the SharePointAPI object which requires a username and password (which it will authenticate with in order to interact with the lists) as well as the path to a local copy of the SharePoint Lists WSDL file.

You can normally grab the WSDL from: sharepoint.url/subsite/_vti_bin/Lists.asmx?WSDL

$sp = new SharePointAPI('<username>','<password>','<path_to_WSDL>');

Reading from a Sharepoint List

Once the SharePointAPI Object has been created, you can read from a list simply by calling:

$sp->read('<list_name>');

More advanced filtering is also possible, for example if you wanted to filter on surname = Smith and only return 5 results you would call:

$sp->read('<list_name>', 5, array('surname'=>'Smith'));

You can filter on multiple parameters simply by adding extra values to the filter array. (currently only AND ing is possible)

All results are returned as associative arrays, calling print_r on the results of a $sp->read(‘<list>’); is probably the best way to understand exactly what data is being returned.

Writing to a SharePoint List

Writing to a SharePoint list (or inserting a new list item) is equally straight forward. The data to be inserted is simply provided as an associative array to the function. For example to add someone called bob to a list you may use:

$sp->write('<list_name>', array('forename'=>'Bob','surname'=>'Brown','pet' =>'cat'));

Editing a SharePoint List Item

To edit an existing SharePoint item the syntax is fairly similar to the above examples. The primary difference being that the ID of the record you wish to edit is also required. Assuming the ID for Bob’s record was 20, you could change his pet to dog with the following code:

$sp->update('<list_name>','20', array('pet'=>'dog'));

Deleting a SharePoint List Item

Deleting a SharePoint list item also requires the ID of the record you wish to remove.

$sp->delete('<list_name>','<ID>');

Thanks for reading

P.S.  I’m now only one week away from starting my new job on the Kent Web Development team. Woo

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | No comment

Sloveina

As a result of a holiday in Slovenia (obligatory photo to the right), being a little busier than normal at work and a hint of having nothing interesting to post it appears it’s actually been quite a while since I last updated my blog.

My solution as you may have noticed is this somewhat rambling posting purportedly providing interesting information and such.

Probably the most interesting update to the estimated two people that actually read this blog is the release of my latest version of JSnip. The new version includes with it an array of bug fixes and a brand new LightBox Snippet, along with a rather snazzy little zoom animation to go with it. As always you can get the full code on Github and check out the new features on the sample page.

Probably less interesting would be the fact I finally got a more or less functioning version of my portfolio page on-line (minus quite a few projects I lack pictures for). The best part of this being my site is now finally free from those pesky “coming soon” pages, and that I’ve also found somewhere to dump a little feed from my github.

Least interesting of all, but probably still quite a nice change for anyone who actually views these pages is that the blog should now be loading signifcantly faster thanks to the addition of WP Super Cache. (Previously page loads were taking a good ice age and a half which was kinda ridiculous)

P.S. Click the Holiday Image to the right to see the new JSnip Lightbox in action.

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | No comment

/**
 * URL Parse
 * A quick URL parsing function for JavaScript
 * @version 0.4
 * @author Carl Saggs
 */
function urlParse(url){
	var self = {};
	//Store full url
	self.url = url;
	//array to store params
	self.QueryParams = new Array();
	//Use DOM to get URL basics
	self.a = document.createElement('a');
	self.a.href = url;
	//Parse Query String
	q_seg = self.a.search.substring(1).split('&');
	for(i=0; i<q_seg.length;i++){
		s = q_seg[i].split('=');
		self.QueryParams[s[0]] = s[1];
	}
	//Extract the Port
	self.port = url.split('/')[2].split(':')[1];

	//Return Protocol in use
	self.getProtocol = function(){
		return self.a.protocol;
	}
	//Return Host
	self.getHost = function(){
		return self.a.host.split(':')[0];//Remove the port from the end
	}
	//Return Port
	self.getPort = function(){
		//Assume default port if none is set
		return  (self.port == null)
				? ((self.getProtocol=='https:')?443:80)
				: self.port;
	}
	//Return Path
	self.getPath = function(){
		return self.a.pathname;
	}
	//Get full Query String
	self.getQueryString = function(){
		return self.a.search;
	}
	//Get Query String as Array
	self.getQueryArray = function(){
		return self.QueryParams;
	}
	//Get value of parameter in query string
	self.getQueryParam = function(x){
		return self.QueryParams[x];
	}
	//Return original URL
	self.getURL = function(){
		return self.url;
	}
	//Get Fragment
	self.getFragment = function(){
		return self.a.hash.substring(1);//Remove # from start
	}

	//Return self
	return self;
}

The function is designed to be pretty straight forward to use, calling the function will return the object containing all of the URLs attributes which can then be accessed by the provided get Methods. An additional advantage to having the function return an object is that you can chain the functions when it seems appropriate (as in the final example below).

//Usage Demo
var test = urlParse("http://www.sub.domain.com:1337/test/sample.php?queryArg1=Hello&queryArg2=Goodby");
alert(test.getQueryParam('queryArg2')); // "goodbye"
alert(test.getPort()); // "1337"
alert(test.getHost()); // "www.sub.domain.com"
alert(test.getPath()); // "/test/sample.php"
//Alterntive usage
alert(urlParse("http://test.com:17/?a=Cake&b=Cheese").getQueryParam('a')); // "Cake"

Anyways, hopefully someone will find it helpful

Feel free to request additional features / notify me of any bugs in the comments. You can now also find it on my GitHub.

[Edit: 2011/10/07] The source code has been updated to fix the scoping bug mentioned by Rikky.

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | 4 comments

JSnip Sample Page

GITHub and GIT seems to be all the rage these days so I decided it was about time I got myself an account and figured out what all the fuss was about. My problem with this plan was that I had nothing worthwhile to use it with. To solve this issue I finally got around to creating something that I’ve been contemplating making for a while now. I like to call it JSnip.

JSnip is a lightweight JavaScript based Snipping package, aimed at those who want to add interactive elements to their webpages but lack the necessary JavaScript knowledge to do so.

If you know basic HTML then useing JSnip should be a snap. Just upload the JSnip.js and JSnip.css files to your server, import them in the head of your HTML document; probably using something along the lines of:

<link rel='stylesheet' href='jsnip.css' type='text/css' />
<script type="text/javascript" src='jsnip.js'></script>

and JSnip is ready to go.

Adding Snippets to your page is as simple as adding a class name to an element. In fact that’s actually all you need to do. If you want a showHide box for instance, just type out something like:

<div class='jsnipShowHide' title='Title for your ShowHide' >
Show Hide Content
</div>

and you’ll get:

Now, if you wanted the ShowHide to be open by default, all you would need to do is add an data-mode of “open” to the tag. Thus:

<div class='jsnipShowHide' title='Title for your ShowHide' data-mode='open' >
Show Hide Content
</div>

will produce:

Adding Tabs is no more difficult, a basic set of Tabs for example need consist of no more code than:

<div class='jsnipTabs'>
	<div>
		<h2>Tab 1</h2>
		Tab 1 Content! Add tab one content here.
	</div>
	<div>
		<h2>Tab 2</h2>
		Tab 2 Content! Add tab two content here.
	</div>
	<div>
		<h2>Tab 3</h2>
		Tab 3 Content! Add tab 3 content here.
	</div>
</div>

to create a Tabs box such as the one below.

The image switcher snippet as seen in one of my past tutorials has also made it into JSnip. Thus a list of images can be transformed

<div class="jsnipImageSwitcher" style="width: 400px;">
    <img src="/demo/img/skunk.jpg" alt="A baby skunk!" />
    <img src="/demo/img/otter.jpg" alt="An otter" />
    <img src="/demo/img/bunny.jpg" alt="A Bunny Rabbit" />
</div>

into this, with only the above code.

Check out the Sample page to see how these snippets can be used together on a page.

The provided snippets are all nestable so they can be placed inside one another as much as you please, along with any other HTML you wish to add. A nice example of this is if you wanted to make the images in an ImageSwitcher link to a number of other webpages. All you would need to do is wrap the relevant image in a standard A tag pointed at where you want it to go.

The CSS behind the snippets can easily swapped out or modified to fit in with your own layout (as the snippets have been for this blog for instance), making the snippets simple to customise.

For anyone interested in the code, you can view it on my GitHub repo. I shall be creating another blog article soon, aimed at developers, explaining how it all works behind the scenes.

I’d be more then happy to answer any questions you may have in the comments section below.

Thanks for reading,
Carl

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | No comment

The basic idea behind CSS Media Queries is to give web developers the power to tell the browser to apply extra CSS when certain conditions are met. The most useful condition in regards to creating a mobile version of your site website the being browser width’s. As a rough example of how they work, imagine for example you have a website with a default width of 1000px and a user then resizes their browser window to 950px wide.

Using the following code snippet, once the users browser window has been resized to below 1000px the enclosed CSS will be instantly applied to the page, changing the containers width to 900.

@media only screen and (max-width: 1000px) {
	#container {width:900px !important; }
}

The real advantage’s of Media Queries over a standard fluid layout start to show up when you get to the significantly different screen resolutions, for example the 320px width of a mobile phone browser. Since Media Queries allow you to selectively apply whole chunks of additional CSS, you can use it to totally rearrange elements on the page in order to ensure your site remains functional at any resolution. Have a go at resizing this site for instance, the first big change to happen is the removal of the sidebar (at 720px), which coincides with the search bar being moved up to the top. The next big one happens when the site is transformed fully in to the mobile site (at 450px) which has quite substantially different styling to the normal view.

If you want to apply your mobile site CSS to any screen resolution below 350px, your code my look something like this.

@media only screen and (max-width: 350px) {
	#container {width:320px !important; }
	/* Mobile Site CSS here */
}

Or, if you want to resize headings on any resolution between 600px and 800px, your code may be as follows:

@media only screen and (min-width: 600px) and (max-width: 800px) {
	h1 {font-size:0.0em;}
	/* More styles */
}

As you can see, using this technique it becomes relatively straight forward (assuming you already have a good grasp of CSS) to create a mobile version of your site by just altering and adjusting a few of its styles.

One thing you may notice though, is that even if your Mobile Site styles work fine when you resize your browser window to the correct size, your actual mobile phone’s browser still shows the desktop version.

In order to get your mobile CSS styles to be applied correctly, its important to tell the mobile browser that you want everything rendered at its real size (as opposed to the zoomed out view they normally try to adopt when encountering desktop sites).

To do this, you’ll need to ad a veiwport meta tag to your websites header;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Once that’s done your mobile CSS should start showing up on your phone just as you would expect it to.

Having only recently added CSS Media Queries to this site, I’m still incredibly impressed with them. CSS Media Queries turn the rather substantial job of creating an alternate mobile friendly version of your site in to about half an hour’s CSS. Awesome, no?

Please note that tutorial example's will not work in feed readers as they rely on a number of JavaScript files being available. To view the tutorial as it should be seen head over to Userbag.co.uk.

© Carl for Userbag.co.uk, 2011. | Permalink | One comment