This is the game involved in the experiment:

Use arrow keys to move the frog, or click on the frog controller in the bottom right corner of the game.

Here is a brief intro by Roger:

I will first explain something of the logic controlling the game. It is very important to point out that the logic itself has nothing to do with any of the frameworks I’ll use. The frameworks for the most part only influence the VIEW part of the logic: the actual rendering of textures on screen in place of all the rectangle objects the logic handles.

So these tutorials are not meant to be on how to build a game like Frogger, but how to blitt stuff to the screen.

Having said that, I thought I might as well explain enough of the game logic so that you can separate that logic from the actual framework code.

The Game Engine

The engine manages a series of Screen objects, but displays only one screen at a time. So you can build an Intro Screen, a How to Play Screen, a High Scores Screen, a Game Screen… The Engine then updates the currently displayed Screen object within a loop.

For this example I created two screens, one called a MenuScreen that shows the instructions on how to play the game, and one screen called GameScreen where the actual game runs.

The main Game object contains exposed references to GameData, the TextureAtlas and Sounds. Every object in the game receives a reference to the Game object. I’ve decide to use composition and drop the Singletons.

Controls

For the Flash version of the game I will use two sets of controls: Key presses and Mouse clicks. Later when porting to mobile devices I will drop the Keyboard input logic and just keep the touch events.

The Game Logic

The game logic is very simple. The screen is divided into 13 rows, I called them Tiers. Each Tier has a bunch of sprites inside it, they can be cars, or turtles or tree logs.

The frog sprite, controlled by the player, can have only 13 possible values for its Y position, one value per Tier. So with every UP or DOWN movement the player Y value changes to either the next Tier or the previous one.

Collision is run only with the objects belonging to the Tier the frog is currently at.

Each Tier has the responsibility to update the positions of the sprites it contains.

The Skin Property

As I talked about earlier, the different frameworks used will be in charge of the SKIN property of the Sprites used in the game as well as the various Texture objects a skin may use (if it’s animated for instance.) It is here that the Framework logic and syntax can be found.

However when I update the position of sprites in the game I do this through the wrappers and not directly to the Image objects. This might seem like extra work for you, and you’re free to change this. I simply find this way to be the easiest when taking the same logic to different platforms as I only need to change the logic controlling rendering of the skins.

Now, you are ready to ready one of the most interesting tutorials I’ve ever seen.

http://www.rengelbert.com/tutorial.php?id=163 (using Starling)
http://www.rengelbert.com/tutorial.php?id=167 (using Sparrow)
http://www.rengelbert.com/tutorial.php?id=171 (using Cocos2D)
http://www.rengelbert.com/tutorial.php?id=175 (using LibGDX)

I am looking forward for playing and messing around with frameworks and publish my thoughts.

So, I wrote this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	public final class Main extends Sprite {
		private static const tailLenght:Number=1;
		private static const tailNodes:Number=300;
		private static const head:Head=new Head();
		private static const tailCanvas:Sprite=new Sprite();
		private static const bg:Background=new Background();
		private var nodes:Vector.<Point>=new Vector.<Point>();
		private var followTheMouse:Boolean=false;
		public function Main() {
			addChild(bg);
			bg.cacheAsBitmap=true;
			addChild(head);
			head.cacheAsBitmap=true
			head.x=160;
			head.y=240;
			head.addEventListener(MouseEvent.MOUSE_DOWN,followMouse);
			addChild(tailCanvas);
			for (var i:int=0; i<tailNodes; i++) {
				nodes[i]=new Point(head.x,head.y);
			}
			addEventListener(Event.ENTER_FRAME,update);
			stage.addEventListener(MouseEvent.MOUSE_UP,stopMouse);
		}
		private function followMouse(e:MouseEvent):void {
			followTheMouse=true;
			head.visible=false;
		}
		private function stopMouse(e:MouseEvent):void {
			followTheMouse=false;
			head.visible=true;
		}
		private function update(e:Event):void {
			if (followTheMouse) {
				head.x=mouseX;
				head.y=mouseY;
				tailCanvas.graphics.clear();
				tailCanvas.graphics.lineStyle(2,0xffffff);
				tailCanvas.graphics.moveTo(head.x,head.y);
				nodes[0]=new Point(head.x,head.y);
				for (var i:int=1; i<tailNodes-1; i++) {
					var nodeAngle:Number=Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
					nodes[i]=new Point(nodes[i-1].x+tailLenght*Math.cos(nodeAngle),nodes[i-1].y+tailLenght*Math.sin(nodeAngle));
					tailCanvas.graphics.lineTo(nodes[i].x,nodes[i].y);
				}
			}
			// do other stuff in the game
		}
	}
}

Which is basically the same as the original prototype, just dragging the string when the finger (mouse) is down and showing a circle where to tap (click) to start dragging again if the player leaves the finger (releases mouse button).

Play with the result:

Drag the white circle to move the string.

I also optimized a bit the code defining the class as final since it’s not meant for being extended and its methods aren’t meant for being overridden. final classes should execute faster than other classes, and since I am looking for the best performance improvement, I used this trick.

Using static in some variable declarations also should increase the speed. static specifies that a variable (or a constant) belongs to the class rather than to the instances of the class.

Finally, cacheAsBitmap method allows me to render the Display Objects as bitmaps rather than vectors. You may say “just use a PNG image then”, and you’re right, but I wanted to keep the code as much similar to the original as I can.

This is the final example of the app working on my Iphone4:

It works quite well although I am considering using a sequence of dots rather than a thin line, I will keep you updated.

Christian Wisniewski made a Corona version of the prototype to be played on mobile devices as you can see here:

With this main.lua file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

-- Declaring Variables
-- Stage Width and Height
local _W,_H = display.contentWidth,display.contentHeight
 
local tailLength = 5
local tailNodes = 200
local head = display.newCircle(_W/2,_H/2,10)
local nodes = {}
 
for i=1,tailNodes,1 do
	nodes[i] = {}
	nodes[i].x = head.x
	nodes[i].y = head.y
end
 
-- Creating Display Groups
local tailGroup = display.newGroup()
 
local function startDrag(event)
	-- Store the Target (the Head) in a variable
	local t = event.target
	if event.phase == "began" then
		-- When the touch started, set the Focus on the Head
		display.getCurrentStage():setFocus( t )
		t.isFocus = true
		-- Store initial Position of the Head
		t.x0 = event.x - t.x
        	t.y0 = event.y - t.y
	elseif t.isFocus then
		if event.phase == "moved" then
			-- While moving the head
			-- remove every drawn line from the group
			for i=tailGroup.numChildren,1,-1 do
				tailGroup:remove(i)
			end
 
			-- Move the Head
			t.x = event.x - t.x0
			t.y = event.y - t.y0
 
			-- Create starting line and insert it into the group
			local line = display.newLine(head.x,head.y,nodes[1].x,nodes[1].y)
			tailGroup:insert(line)
			line.width = 20
 
			nodes[1].x = head.x
			nodes[1].y = head.y
 
			-- Loop through every tailNode and save new positions in table
			-- Note: LUA tables start with an index of 1 and not 0!
			for i=2,tailNodes,1 do
				local nodeAngle = math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
				nodes[i].x = nodes[i-1].x+tailLength*math.cos(nodeAngle)
				nodes[i].y = nodes[i-1].y+tailLength*math.sin(nodeAngle)
 
				-- You could use
				-- line:append(nodes[i].x,nodes[i].y)
				-- but this wouldn't allow you to alter each segment (fading the color, reducing linewidth etc.)
 
				-- Creating new line segments
				local nLine = display.newLine(nodes[i-1].x,nodes[i-1].y,nodes[i].x,nodes[i].y)
				-- c will store the colorvalue - starting from 255 and ending with 0 (white to black)
				local c = 255-i/tailNodes*255
				nLine:setColor(c)
				-- width will start at 20 and fade out to 0
				nLine.width = line.width-i/tailNodes*line.width
 
				-- Important: insert the new Line segments into the table!
				tailGroup:insert(nLine)
			end
		elseif event.phase == "ended" or event.phase == "cancelled" then
			-- Remove the focus
			display.getCurrentStage():setFocus( t, nil )
			t.isFocus = false
		end
	end
end
 
-- Create touch Eventlistener
head:addEventListener("touch",startDrag)

During next days I will improve the prototype, maybe this could be a start for a mobile version of Stringy game.

Built on top of OpenGL, OpenAL, Box2D, and Lua, Corona lets you develop games which run run at native speeds using native iOS features like multitouch, GPS, accelerometer, gyroscope, camera, Google Maps, WebKit and software keyboards.

Moreover, Corona supports an huge list of APIs which will let you add to your games a lot of interesting features like ads, virtual currency, databases and so on.

In this first step, I’ll try to port my old Flash game Red Flowers to iPhone, handling the retina display of iPhone 4 models.

We will deal with two different screen sizes: 320×480 and 640×960. So the first thing to do is to design two different splash pages, one for normal iPhones and one for retina-powered.

On the left, the 480×320 splash screen for normal iPhones, on the right, the 960×640 HD splash for retina displays.

I saved them in a folder, calling them respectively splash.png and splash_hd.png.

Note the HD image has the same name as the normal image, just with an _hd suffix.

Now, the very basic Corona project has three files: build.settings which includes duild-time properties, config.lua which contains runtime properties, and main.lua which is the main file itself.

As you can see looking at lua extensions, Corona SDK uses Lua as programming language. Probably some of you already met it when playing with World of Warcraft macros and interfaces. Anyway, it’s not that hard and not that different than AS3.

Let’s look at build.settings file:

1
2
3
4
5
6
7

settings =
{
	orientation =
	{
		default = "landscapeRight",
	},
}

Here I just set the orientation as landscape, as the game is meant to be played in landscape mode.

This is config.lua file:

1
2
3
4
5
6
7
8
9
10
11
12
13

application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "letterbox",
		imageSuffix =
		{
			["_hd"] = 2,
		},
	},
}

Another easy and intuitive settings: I am defining game width and height, and setting scale mode as “letterbox”.

These are the possible dynamic scale settings:

* none – turns off dynamic content scaling

* letterbox – uniformly scales up content as much as possible, while still showing all content on the screen. This is similar to watching a widescreen DVD on a non-widescreen TV set, except that you can use offstage content to fill the “bleed” areas rather than displaying black bars.

* zoomEven – uniformly scales up content to fill the screen, while preserving aspect ratio. Some content may appear offscreen, if the new screen has a different aspect ratio

* zoomStretch – non-uniformly scales up content to fill the screen. All content will remain onscreen, but it may be stretched vertically or horizontally.

Then, we defined on imageSuffix the suffix to be used when the images need to be multiplied by 2 to match device resolution. Do you remember the _hd suffix we added to our HD splash screen? Here it is.

Finally, let’s code main.lua:

1
2
3
4

display.setStatusBar(display.HiddenStatusBar)
local bg = display.newImageRect("splash.png",480,320)
bg.x = bg.contentWidth/2
bg.y = bg.contentHeight/2

Line 1: hides the status bar

Line 2: defines a variable called bg assigning it the path of the low resolution splash screen, along with its size. At this time the image is automatically shown, with its origin (the center) aligned with the top left corner of the device.

Line 3: centers horizontally the splash according to its width

Line 4: same thing with the height.

Notice how x and y properties work the same way as AS3, while contentWidth and contentHeight work like AS3 width and height.

Once all files are saved in the same folder, it’s time to run the simulator in iPhone and iPhone 4 mode

And finally we have our splash screen up and working. Next time, I’ll add interactivity.

Moreover, a lot of readers of this blog are skilled with Flash and ActionsScript3, but they don’t feel comfortable with Objective-C, the programming language used to create native iPhone applications.

Well, I am going to show you a step by step detailed guide to help you publishing an iPhone application just with your Windows computer, thanks to Flash Professional CS5.5.

This will be a very long tutorial but once finished, you will be able to create a Flash application and make it run on your iPhone as a native application.

1 – CREATING THE FLASH APPLICATION

This is the easiest part, as you only have to do what you are really used to do: create a Flash application. Just remember to select AIR for iOS. Leaving all settings with their default values, you will create a 320×480 pixels document, which is the size of the non-retina iPhone display.

We will start with something simple, with this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	public class Main extends Sprite {
		private var circle:circleMc;
		public function Main() {
			circle= new circleMc();
			addChild(circle);
			stage.addEventListener(MouseEvent.CLICK,moveCircle);
		}
		private function moveCircle(e:MouseEvent):void {
			circle.x=mouseX;
			circle.y=mouseY;
		}
	}
}

Where circleMc is just a small red circle. It’s quite obvious what this script is supposed to do: clicking (later: tapping) on the stage, you will move the circle under the mouse pointer (later: your finger).

Test the movie, and once you are sure everything works, it’s time to create the developer certificate

2 – APPLYING TO APPLE IOS DEVELOPER PROGRAM

If you never developed an iPhone application, probably you aren’t part of Apple iOS Developer Program, so you must enroll to it. This is a paid service which costs $99/year, or €79/year if you live in the Euro zone. Actually, the change is a bit unfair since the Euro certification may cost up to $10 more than the Dollar certification.

Anyway, everything starts from this page, click on Enroll Now and follow the steps filling forms with your information.

As you proceed with the enrollment, you will notice a warning:

“You must have an Intel-based Mac running Mac OS X Snow Leopard or later to develop Mac OS X and iOS apps for the App Store”.

Ignore it, as you won’t need any Mac.

According to Apple’s suggestions, if you intend to enroll in a paid Developer Program for business purposes, you may prefer to create a new Apple ID that is dedicated to your business transactions and used for accounting purposes with Apple, and your Apple ID is associated with an existing iTunes Connect account you should create a new Apple ID to avoid accounting and reporting issues.

They are right, I tried to upgrade my iTunes account, and my Developer certification was kept on hold because of some difference between my living and billing addresses, which is quite common if you work both at home and in a studio.

So I recommend to create a brand new account.

Once the (huge) process is done, you will finally see this screen:

Enter the activation code you should have received in your email after the purchase, and you are now an iPhone developer!!

In some cases, Apple will keep your certification on hold anyway, to ensure the (big) amount of data you entered is correct. It will be asked you to send a fax with a notarized copy of a government issued identification and wait “several working days” to get the certification. Before doing it, go to the contact page and send a form explaining you made everything right. In most cases, common sense will win and you will have your account approved in less than 24 hours.

3 – GETTING A DEVELOPMENT CERTIFICATE

Once you registered as developer, you need to acquire a Development Certificate, as well as register your Apple devices and applications.

Go to iOS Dev Center, log in and enter the iOS Provisioning Portal:

Then click on Certificates:

And since you are new to the iOS Provisioning Portal and don’t have any certificate, click on Request Certificate:

You will find yourself in front of a page where you are asked to choose a file and submit it to the page:

Don’t click anything at the moment, as you don’t have any file yet. We have to create it.

It’s time to play a bit with SSL protocols.

Go to the Win32 OpenSSL Installation Project and download and install both Win32 OpenSSL v1.0.0e Light and Microsoft Visual C++ 2008 Redistributable Package.

First install Microsoft’s package, then Win32 OpenSSL which will probably install in C:\OpenSSL-Win32 path. During this tutorial, I will refer to this path, but obviously you should change yours if different.

Open the command prompt window by entering cmd into Start-Run or through Start->All Programs->Accessories, and write:

cd \OpenSSL-Win32\bin

Remember I am assuming OpenSSL has been installed on C:\OpenSSL-Win32. Anyway, access to bin folder inside your installation.

Once you’re in the bin folder, write:

openssl

To change the prompt from C:\OpenSSL-Win32\bin> to OpenSSL>.

If you get a warning you can’t open the config file, don’t worry at the moment. Write:

genrsa -out thekey.key 2048

To generate a file called thekey.key in bin folder. Feel free to change the file name if you want. I’ll assume you will use the same filename I used. Then write:

req -new -key thekey.key -out certificate.csr  -subj "/emailAddress=info@emanueleferonato.com, CN=Emanuele Feronato, C=IT" -config "openssl.cfg"

Which will create a file called certificate.csr in bin folder. Just change thekey.key with your key filename, info@emanueleferonato.com with the email address you used during the registration, Emanuele Feronato with the name you used during the registration and IT with the country code of the Country you live in. -config "openssl.cfg" is necessary only if you previously got the warning you couldn’t open the config file.

This is how my command prompt window looked like once I’ve finished (sorry for the italian text, it’s a real example):

Microsoft Windows [Versione 6.1.7600]
Copyright (c) 2009 Microsoft Corporation. Tutti i diritti riservati.
 
C:\Users\User>cd \OpenSSL-Win32\bin
 
C:\OpenSSL-Win32\bin>openssl
WARNING: can't open config file: /usr/local/ssl/openssl.cnf
OpenSSL> genrsa -out thekey.key 2048
Loading 'screen' into random state - done
Generating RSA private key, 2048 bit long modulus
.....................+++
........+++
e is 65537 (0x10001)
OpenSSL> req -new -key thekey.key -out certificate.csr  -subj "/emailAddress=info@emanueleferonato.com, CN=Emanuele Feronato, C=IT" -config "openssl.cfg"
Loading 'screen' into random state - done
OpenSSL>

Finally you can upload the file .csr in the certificate page, and your certificate will be in Pending Issuance status.

Refresh in a couple of minutes, and your certificate will be issued! Download it (its name should be developer_identity.cer) and for the sake of simplicity save it in the same bin folder where you created the other files, as the process is not over.

Connect your iPhone to iTunes and get the UDID, you will find in the iPhone page and probably you will have to click on the series number in order to get it.

Return to the Provisioning Portal and click on Devices, then since you shouldn’t have any device installed, click on “Add Devices”.

Add a device name and the UDID you just got from iTunes, then click on “Submit”:

Your iPhone should be successfully registered now.

Time to register your app now. Go to App IDs page and click on New App ID.

You will be asked to enter a name, you will find a precompiled App ID prefix and you will be asked to enter the APP ID suffix. You can enter anything you want but you’d better follow Apple guidelines using the reverse domain name style. Click on “Submit”:

And now your App is registered.

One last effort and go to Provisioning to create a Development Provisioning Profile and click on “New Profile”:

Fill the form (it shouldn’t be hard at this time) and click on “Submit”

Your Provisioning Profile will appear in Pending mode:

And just like before, in a few minutes it will be Active. Download it (it should call Test_Profile.mobileprovision if you named the Provisioning Profile as Test Profile) and save it in your friend bin folder.

Open a new command prompt window, enter the old same

cd \OpenSSL-Win32\bin

and

openssl

and from OpenSSL> prompt write:

x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

to create a file called developer_identity.pem, then

pkcs12 -export -inkey thekey.key -in developer_identity.pem -out iphone_dev.p12

to create an iphone_dev.p12 file. You will be asked for a password, enter it (and possibly, remember it).

This is how my prompt command window looked like:

Microsoft Windows [Versione 6.1.7600]
Copyright (c) 2009 Microsoft Corporation. Tutti i diritti riservati.
 
C:\Users\User>cd \OpenSSL-Win32\bin
 
C:\OpenSSL-Win32\bin>openssl
OpenSSL> x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM
OpenSSL> pkcs12 -export -inkey thekey.key -in developer_identity.pem -out iphone_dev.p12
Loading 'screen' into random state - done
Enter Export Password:
Verifying - Enter Export Password:
OpenSSL>

Now finally we have everything we need.

4 – PUBLISHING WITH FLASH FOR IPHONE

Back to Flash Professional CS5.5, in your publish settings, add the certificate file, the password you entered before, the provisioning profile, and select the iOS development type as “Quick publishing for device testing”.

Publish the application. It will take up to some minutes, unlike regular Flash movies publishing. And finally the App is ready to be uploaded to your iPhone.

This should be the content of your Flash application folder: look at the iTest.ipa file. It’s your App!!!

Go to iTunes connect the iPhone, and install the provisioning profile, using File->Add To Library. Then, synchronize your iPhone to have it installed on it. To check if everything worked fine, in your iPhone select Settings->General->Profiles and look for your profile.

With the profile installed, add your application with File->Add To Library, and you will find it in your Sync Apps page:

Synchronize your iPhone again, and you will find the working application on your device:

Congratulations, you made it. Now, let’s port your Flash blockbusters on iPhone

With javascript’s devicemotion event you can add a listener to your iPhone browser and have your x, y and z acceleration values ready to be used in your scripts.

Before we see any script, let’s see what these acceleration values mean: if you place your iPhone on a table, that’s what you can get:

X: roll, that is the rotation around the vertical axis, from the home button to the earpiece.

Y: pitch, that is the rotation around the horizontal axis.

Z: yaw… no… surprise! It’s not the yaw, it’s just a face up/face down detection. This means you can toss your iPhone in the air and play “head or tail” just like you are used to do with coins.

(warning: tossing your iPhone in the air can cause damage to the phone itself and injuries to nearby people)

Even more interesting, with the iPhone in your hand you can determine where is the “sky”, that is the iPhone highest point, just combining X and Y values and some trigonometry. Useful if you are buried under an avalanche.

(warning: getting buried under an avalanche may reduce life expectancy)

So this is what you can do with a little jQuery Mobile script and a touch of HTML5 canvas:

This is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="user-scalable=no, width=device-width" />
 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 
     <script type="text/javascript" src = "http://code.jquery.com/jquery-1.6.2.min.js"></script>
     <script type="text/javascript" src = "http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function(){
			window.addEventListener("devicemotion",onDeviceMotion,false);
		});
 
		function onDeviceMotion(event){
			var ctx = document.getElementById("c").getContext("2d");
			var accel = event.accelerationIncludingGravity;
			$("#sliderX").val(Math.round(accel.x)).slider("refresh");
			$("#sliderY").val(Math.round(accel.y)).slider("refresh"); 
			$("#sliderZ").val(Math.round(accel.z)).slider("refresh");
			var angle = Math.atan2(accel.y,accel.x)  
			ctx.clearRect(0,0,100,100);
			ctx.beginPath();
			ctx.arc(50,50,5,0,2*Math.PI,false);
			ctx.moveTo(50,50);
			ctx.lineTo(50-50*Math.cos(angle),50+50*Math.sin(angle));
			ctx.stroke();
		}
	</script>
 
</head> 
<body> 
 
<div data-role="page" id = "intropage">
 
	<div data-role="header">
		<h1>Accelerometer</h1>
	</div>
 
	<div data-role="content">	   
     	<label for="sliderX">X Acceleration (Roll)</label>
		<input type="range" name="sliderX" id="sliderX" value="0" min="-10" max="10" data-theme="a" />
 
          <label for="sliderY">Y Acceleration (Pitch)</label>
          <input type="range" name="sliderY" id="sliderY" value="0" min="-10" max="10" data-theme="b" />
 
          <label for="sliderZ">Z Acceleration (<strike>Yaw</strike> Face up/down)</label>
          <input type="range" name="sliderZ" id="sliderZ" value="0" min="-10" max="10" data-theme="c" />
     </div>	
 
	<div style = "text-align:center;margin-top:10px;">
		<canvas id="c" width="100" height="100"></canvas>
	</div>
 
</div>
 
</body> 
</html>

The core lies at line 15 (the listener) and 20 (getting acceleration data).

You can see it in action pointing your iPhone browser at this link:

http://www.emanueleferonato.com/stuff/iaccelerometer/

or using this QRCode:

And that’s it!

and play GuessNext for iPhone!

It’s the web remake of an old game I published on Kongregate more than three years ago, and it’s the perfect kind of game if you want to take the first steps into iPhone web app development.

During the next days I will explain in detail every (interesting) line of code, meanwhile have a look at the features:

* Powered by jQuery Mobile
* Optimized to be launched from Home
* Loading screen (only if played from Home)
* Custom icon when adding it to Home
* Reminder to add it to Home if the game is not launched from Home
* Smooth transitions between pages
* Best score saved locally
* In game Adsense ads
* Views and plays tracking powered by Playtomic

The game was built starting from the tutorials Making a game with HTML + jQuery Mobile and publishing it to Apple App Store step 1 and step 2, reading those tutorials will give you a lot of clues about the development of this game.

Your feedback is needed to improve a bit the game, to finally convert it into a native iPhone app. Also, I would like to know your best scores.

Now we are going to improve the game with three exciting new features:

* Showing a splash/preloader screen
* Changing iPhone top bar appearance
* Saving data locally

To show a preloader we just need to add a line in the header of the page:

<link rel="apple-touch-startup-image" href="splash.png" />

This will work only on iOS 3.0 and later, and splash.png (which you will change with any other path) is the splash image that is displayed while your web application launches, replacing the default screenshot of the web application taken the last time it was used.

Your image must have a size of 320×460 pixels.

In the following picture, on the left the picture I used, on the right how it is shown on the iPhone.

You can also change the status bar with just one line in the header:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This will work only if your app is launched in full screen mode (refer to step 1 to see how to launch a web app in full screen mode).

content attribute may have three values:

default: displays the status bar as you are used to see.

black: the status bar will have a black background.

black-translucent: the status bar is black and translucent. In this case, the web content is displayed even below the status bar, partially obscured by the status bar.

This is how my app looks before and after changing the status bar:

As you can see, the status bar is black.

To save data locally, localStorage comes into our help as it acts like a browser local database, or something like a cookie, if you prefer.

That’s why in this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(document).ready(function(){
	var currentNumber = Math.floor(Math.random()*10);
	var score = 0;
	if(localStorage.topScore==undefined){
		localStorage.topScore=0;	
	}
	$("#topscore").html("Top score: "+localStorage.topScore);
	$("#number").html(currentNumber);
	$("#comment").html("Click higher or lower");
	$("#higher").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber >= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);	
	}));
	$("#lower").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber <= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}	
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);
	}))
});

At lines 4-7, 14-17 and 30-33 we are using a variable called topScore saved into localStorage accessing it just like an ordinary variable.

And that’s enough for this step, no we have everything we need to create a complete game with high scores, which will be shown during next step.

Normally when you design web pages you don’t need to handle swipes because we expect the final user to interact with it with the mouse or the trackpad.

On mobile phones, people expect to use their fingers to interact with the content, and we have to meet their wishes if we want our app to be successful.

I am about to show you how easy it is: let’s start with the jQuery Sokoban prototype I published about a year ago, and change keyboard input with swipe input.

Have a look at the code in the original version, then look at this one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>jQuery Swipe Sokoban by Emanuele Feronato</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="touchswipe.js"></script> 
     <script type="text/javascript">
     $(document).ready(function() {	
     	var map = new Array();
     	map[0] = new Array(1,1,1,1);
     	map[1] = new Array(1,0,0,1,1,1,1,1);
     	map[2] = new Array(1,0,2,0,0,3,0,1);
     	map[3] = new Array(1,0,3,0,0,2,4,1);
     	map[4] = new Array(1,1,1,0,0,1,1,1);
     	map[5] = new Array(0,0,1,1,1,1);
     	for(i=0;i<map.length;i++){
     		for(j=0;j<map[i].length;j++){
     			switch(map[i][j]){
     				case 1:
     					$("#sokoban").append('<div class = "wall" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 2:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 3:
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 4:
     					map[i][j]=0;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 5:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 6:
     					map[i][j]=2;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     			}
     		}
     	}
     	function possible_move(x,y){
     		var tile = map[player_pos[0]+y][player_pos[1]+x]
     		var far_tile = map[player_pos[0]+2*y][player_pos[1]+2*x]
     		var can_move = false;
     		var solved = true;
     		if(tile==0 || tile==2){
                    can_move = true;
                    solved = false;
               }
               else{
                    if((tile==3 || tile==5) && (far_tile==0 || far_tile==2)){
                         map[player_pos[0]+y][player_pos[1]+x]-=3;
                         map[player_pos[0]+2*y][player_pos[1]+2*x]+=3;
                         $("#c"+(player_pos[0]+y)+"_"+(player_pos[1]+x)).animate({
                              left: "+="+(x*32),
                              top: "+="+(y*32)
                         },100,function(){
                              for(i=0;i<map.length;i++){
                                   for(j=0;j<map[i].length;j++){
                                        if(map[i][j]==2){
                                             solved = false;
                                             break;
                                        }
                                   }
                              }
                              if(solved){
                                   alert("SOLVED")
                              }
                         }).attr("id","c"+(player_pos[0]+2*y)+"_"+(player_pos[1]+2*x))
                         can_move = true;
                    }
               }	
               if(can_move){
                    player_pos[0]+=y;
                    player_pos[1]+=x;
     			$("#player").animate({
     				left: "+="+(x*32),
                         top: "+="+(y*32)
     			},100);  
               }
     	}
        	$("#player").swipe({swipe:swipe,threshold:50});
        	function swipe(event,direction){
			switch(direction){
     			case "left":
     				possible_move(-1,0)
     				break;
     			case "up":
     				possible_move(0,-1)
     				break;
     			case "right":
     				possible_move(1,0)
     				break;
     			case "down":
     				possible_move(0,1)
     				break;
     		}
		}
     });
     </script>
     <style type="text/css">
     .wall{
     	background-color:#000000;
     	width:32px;
     	height:32px;
     	position:absolute;
     }
 
     .goal{
     	background-color:#ff0000;
     	width:32px;
     	height:32px;
     	position:absolute;	
     }
 
     .crate{
     	border:10px solid #00ff00;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
 
     #player{
     	border:10px solid #0000ff;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
     </style>
</head>
<body>
     <div id = "sokoban"></div>
</body>
</html>

At line 5 we have the viewport meta declaration as explained in this post but the core lies at line 9 when I call TouchSwipe, a jQuery plugin for touch devices.

Everything is managed by this fantastic plugin, since among its features you can find:

* Detects swipes in 4 directions, “up”, “down”, “left” and “right”
* Supports single finger or double finger touch events
* Supports click events both on the touchSwipe object and its child objects
* Definable threshold to determin when a gesture is actually a swipe
* Events triggered for swipe “start”,”move”,”end” and “cancel”
* End event can be triggered either on touch release, or as soon as threshold is met
* Allows swiping and page scrolling

So WASD key interaction you can find in the original version has been replaced by swipe interaction at lines 90-106, where every swipe longer than 50 pixels is translated into a movement.

To test it, point your mobile browser to this page, put your finger on the hero (the blue square) and move it with a swipe.

That wasy? Yes, that easy. The App store is getting closer and closer.

It will be a long journey, so let’s start with something simple: a jQuery version of MagOrMin – an old php based game, whose concept have been applied for the creation of GuessNext Flash game.

The first step in making an HTML app for iPhone is making an HTML page.

And this is main, the most basic possible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
 
<head>
 
	<script src = "jquery.js"></script>
	<script src = "game.js"></script>
 
</head>
 
<body>
 
<div id = "number"></div>
<div id = "higher">higher</div>
<div id = "lower">lower</div>
<div id = "comment"></div>
 
</body>	
 
</html>

Where jquery.js contains the latest jQuery distribution and game.js is this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(document).ready(function(){
	var currentNumber = Math.floor(Math.random()*10);
	var score = 0;
	$("#number").html(currentNumber);
	$("#comment").html("Click higher or lower");
	$("#higher").click(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber >= currentNumber){
			score++;	
			$("#comment").html("Good! score: "+score);	
		}
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);	
	});
	$("#lower").click(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber <= currentNumber){
			score++;	
			$("#comment").html("Good! score: "+score);	
		}	
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);
	})
});

Explaining HTML and jQuery is beyond the scope of this post, just notice there are four divs:

number contains a random integer number from 0 to 9

higher is a clickable div and when the player clicks on it then he guesses next random number will be higher (or equal) than the current one

lower follows the same concept as higher but the guess assumes next random number will be lower or equal than the current one

comment contains in-game comments, such as “Good!”, “Bad!” and the current score.

At this stage the game has no limit, no game over, no high scores, nothing. But it’s a good start.

This is what you get if you upload the scripts on a page and browse it with your iPhone:

You can even play it, but the text is so tiny!

This happens because unless you tell it otherwise, Safari on the iPhone is going to assume that your page width is 980px.

So we are going to add this line between <head> and <\head> to specify the viewport:

<meta name="viewport" content="user-scalable=no, width=device-width" />

This is how the same page looks with the correct viewport meta data:

Much better now… and more playable since the “buttons” are bigger.

But it’s obvious we won’t go so far without a library designed with mobile devices in mind.

This is when jQuery Mobile comes into play. It’s an unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation, and that’s what we need.

Now it’s time to heavily change our html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html> 
 
<html>
 
<head>
 
	<meta name="viewport" content="user-scalable=no, width=device-width" />
 
	<link rel="stylesheet" href="jquery.mobile-1.0b1.min.css" />
 
	<script src = "jquery.js"></script>
	<script src="jquery.mobile-1.0b1.min.js"></script>
	<script src = "game.js"></script>
 
</head>
 
<body>
 
<div data-role="page">
 
	<div data-role="header">
		<h1>Page Title</h1>
	</div>
 
	<div data-role="content">	
		<div id = "number"></div>
		<div id = "higher">higher</div>
		<div id = "lower">lower</div>
		<div id = "comment"></div>		
	</div>
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>
 
</body>
 
</html>

Line 9: imports jQuery mobile stylesheet.

Line12: imports jQuery Mobile library. Both the library and the stylesheet can be downloaded from this page

Line 19: we are meeting our first data-role attribute. This will tell jQuery Mobile the role of the div in the mobile page. With data-role="page" we tell jQM it’s the beginning of a mobile page.

Line 21: data-role="header" tells us we are working wit the header of the page.

Line 25: data-role="content" tells us we are working wit the content of the page.

Line 32: data-role="footer" tells us we are working wit the footer of the page.

Once the browser is pointed on the page, jQM automatically triggers all HTML5 data-role attributes to render the page with all necessary widgets. That’s what we have now:

This is not that good yet, as the footer isn’t at the bottom of the page but just when the page itself ends. To have the footer (and the header) fixed on the bottom (and on the top) of the page, change lines 21 and 32 respectively with:

21

<div data-role="header" data-position="fixed">

and

32

<div data-role="footer" data-position="fixed">

and now your header and footer will be fixed at the very top and at the very bottom of the page, this way:

Anyway, we are greedy and we want our page to go in full screen mode, without showing the address bar at the top and the toolbar at the bottom.

This will be made in two steps: first, we have to insert this line between <head> and <\head>:

<meta name="apple-mobile-web-app-capable" content="yes" />

Then, we have to launch the web page from Home, that is the iPhone “desktop”. Add the page to home: a custom icon will be generated with the thumbnail of the page:

and once you call it directly from the icon you will get your full page navigation.

The last thing we will see in this first part is how to create two mobile friendly buttons to control “higher” and “lower” guesses.

Change your content block this way:

25
26
27
28
29
30

<div data-role="content">	
	<div id = "number"></div>
	<a href="#" data-role="button" id = "higher">Higher</a>
	<a href="#" data-role="button" id = "lower">Lower</a>
	<div id = "comment"></div>		
</div>

Button divs have been changed to anchor texts with data-role="button". This will make jQuery Mobile render the links as buttons.

This is how the page looks now:

But to interact with them we have to change a bit the javascript changing lines 6 and 18 from respectively

6

$("#higher").click(function(){

and

18

$("#lower").click(function(){

to respectively

6

$("#higher").live("click tap",(function(){

and

18

$("#lower").live("click tap",(function(){

And finally you will be able to play again using the new buttons.

This is where this tutorial ends, but there’s still a lot to do. During next step we’ll build a preloader, save high scores and enhance the visual appeal of the game.