I used Construct2 for a client's project. Since that project is now finished, I'm writing everything that went write or wrong with it, in the classical tradition of the gamedev community's postmortems.
The project was to develop a tactile table to let children play in his shop, while the parents are making their choice.
At the beginning, my client didn't had a clear idea of the device in wanted to use.
A big tactile table was costly, hard to find and difficult to adapt in the defined space inside the shopping place.
After some investigations, the chosen solution was to use three iPads 2. Each iPad was bolted on top of a piece of furniture, the "roof" of the furniture tilted forward at 30 degrees. Each one was at a different height, to accommodate various ages. One was for the children between 1,5-3 years, one for the 3-6 years and the last one for the 6-10 years. The idea was that a flat table was a bit hard to reach for their arm length, and an upright screen was not a good way to play a game.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/IMG_0231.JPG" border="0">
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/IMG_0233.JPG" border="0">
For each age category, it was decided to have 3 games. The games needed to be simple, playable in two minutes, (to avoid a crisis when the parents come back to leave with the children), in phase with their age, and with no reference to colors, religious signs or anything close to that. Since the games must be played by children who can't yet read, the interfaces need to be without text, and self discoverable.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/IMG_0235.JPG" border="0">
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/IMG_0237.JPG" border="0">
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/IMG_0238.JPG" border="0">
For legal reasons, you can't use games available on the AppStore in that context, they aren't going to be customizable, and there is no possibility to block people from doing what they want with the iPad between the various game, when they go back to the Home screen.
It was then decided to create a "portal" for each iPad, containing the games available per iPad, with no possibility to go outside that game. To make it possible, we need to block the access to the physical buttons of the device. For that purpose, we used a metal protection made by nClosures (I have no financial compensation from them ;)). The enclosure completely block the use of the Home button, meaning that if the application is launched, there is no possibility to leave it (apart from a bug crash? :p). The system ensures that nobody can leave the place with one of the tablet, that nobody can leave the game, and that nobody touches the various buttons.
In the AppStore, there's an application which seems, to me, on top of the others when it gets to Kiosks. When you use a desktop machine disguised as a kiosk, you can set up the browser as you want, to hide to the user the fact you are simply using webpages.
The Kiosk Pro app, in various flavors (lite - free -, Pro & Plus, I don't get anything financial from them either, the app is fully paid ;)) lets you customize the behavior of the web browser, when the classic Mobile Safari doesn't let you do that.
You need to display the web page generated by Construct2 without showing an address bar, a tab button, a close button, the info bar at the top (which never disappears on classical website, even when the site is bookmarked on the Home screen), nor letting the user accessing other websites.
In the end, we use the Kiosk app the host the application generated by C2.
To use it, we don't display the tab, the address and the spinning wheel.
From now on, here's what went wrong and what went right.
What went wrong (and what to check)?
If you want something close to a smooth behavior from your game, you need to install iOS5 on the iPads. You won't be getting anything usable on iOS 4.XX.
Don't forget to disable the various multifingers gestures available on iOS 5 ! Children are going to switch between apps without you knowing it.
Don't forget to check that the selecting touches possibilities are disabled inside your CSS file.
In the notification center of the iPad, remove everything. You can't disable the possibility to make it into view, but if there's nothing in it, users can't switch applications.
Disconnect from any Apple account.
Don't let any other application run in background (delete from RAM before running the Kiosk app).
Prevent the iPad from going dark/idle mode (you don't want client to believe it's broken). If you want to economize power, you can set the Night Mode inside the Kiosk settings.
The client wanted that the game, when left unused for some time goes back to the "portal", showing the screen letting players selecting their game. In the Kiosk, there's a setting with a timer to go back to homepage. Unfortunately, it doesn't work on your starting page (and there's a logic behind that behavior). The problem is that, even with several layout, your C2 game lives all the time on the same page (because only the canvas' content changes).
So you need to implement a timer behavior inside your app/game if you want to automatically go back to your home screen. For that, add an event sheet, specifying that on every touch, you set a global variable to zero, which increases otherwise by 1 at each second. When that var is over some predefined time (180 for 3 minutes), you go back to your first layout. Don't forget to include that event sheet in all your other sheets !
You can't use games needing quick reflexes, the iPad isn't accelerating HTML (for the moment, wait for WebGL enabled UIWebViews !) enough to let you do that when you are starting to have lot of elements on the screen. Furthermore, it's not natural for the kids, since they need to have onscreen controls, and that they can't hold the tablet inside their hands (remember that the tablets are bolted on).
At first, it was decided to have some soundboard game for the very little children (animal faces that gives the sound of their species when touched on - dog, rooster, owl, lion, sheep, cat, and so on?)
The problem is that with the metal encasing, added to the noises of the shop galleries, the sound is somewhat faint. On top of that, you can't anymore play a sound automatically with javascript on iOS5 (you need to use soundsprites, as I detailed in one of my previous posts, which is painfull to create when you are starting to have lots of sounds). All that lead us to ditch the idea of sound games.
What went right (and what we have done)?
There are three applications per tablet, each one customized to the target group age.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal01.png" border="0">
For the 1,5-3 years, you can find a shape block game (moving a square peg inside a square hole, a round peg inside a round hole), with 4 shapes only, to not overflow them cognitively (when beta testing, I saw that too much pieces onscreen made the little children freeze, puzzled with what to do). It's a game they are playing in real life, so the children already know where they are. You need to add a magnetic behavior to the peg, to help them (when the shape's distance to the hole is under some predefined number, the peg is automatically place inside the hole).
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal01-2.png" border="0">
The second application is one where the animals drawn for the soundboard are re-used, displayed on some tiles, and you need to click on them when they appear (it was found that children love to touch something new appearing onscreen).
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal01-1.png" border="0">
The last game was one of drawing. Since they lack fine motor skills, and that the screen doesn't let you draw with stylus (it's too much of a work to have iPad stylus in the shop and track them after each child), only basic shapes ("stickies") are shown. Children can, when a shape is selected, paste it on a blank canvas.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal01-3.png" border="0">
Something funny is that the younger ones are careful to cover the whole screen with a shape, to not let a tiny white space be present on screen ! :)
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal02.png" border="0">
For the 3-6 years, the peg game is changed to a "Fifteen" game (one where a puzzle is printed on squared block, and you need to slide the blocks around a enclosure to complete the image).
The game is 3x3 (hence not being a real "Fifteen" :D), but since it's still a bit difficult for them, the complete image is shown alongside the puzzle, to help see where they need to go.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal02-2.png" border="0">
The other game is one where you need to "scratch" the picture to see what's behind it.
The scenery is a western theme, with a saloon in the foreground. When you swipe quickly on the saloon, you erase the "paint", and you can see what's behind.
In the background, there's some mining camp you need to find. When that camp is opened, you can swipe everywhere to see a surprise behind the miner :).
That game is there to encourage children explore a game, without written or spoken instructions.
Since they are still afraid to break something (and their parents too), I added a tagline on top of screen saying that they need to swipe the screen to see something.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal02-1.png" border="0">
The last game is the drawing game, adapted to that age.
Now you can select a color, a pencil width, and an animal picture to color it. The contours of the animal are somewhat simplified. At that time, since it's still difficult for them to be precise with a finger onscreen, I wanted to have the possibility for the children to only select a color, an animal, and when clicking a part of the animal, the color would "flood fill" , to avoid tiny precise movements of drawing.
dl.dropbox.com/u/1412774/FinalPortal/portal02-3.png
Sadly, I didn't had the time to had floodfill to the code at that moment. It's now working (in the Canvas Plugin for Construct 2), but it's not yet backported to the iPad.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal03.png" border="0">
For the last category, 6-years to 10-years old (and more, adults are trying them too ;)), we reused two of the game, but one more time adapted to the age.
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal03-2.png" border="0">
The Fifteen game is now 4x4, without any final picture to help.
dl.dropbox.com/u/1412774/FinalPortal/portal03-3.png
The painting game is the same as the previous category, but now the animals are more detailed.
The third game added some complexities. At the beginning, I integrated a Tetris-like game, coded in classical HTML (with <div>s) and Javascript, by navigating to another local page when the player choose that game (the license of the game was MIT, and I was planning to give credits to the author). I added some onscreen button to control the pieces.
In the beta tests, it appeared that some random bug happened, making the whole application crash.
I didn't had the time (where did I already saw that ? ;)) to recode that game with C2 (even with the physics behavior, since the collision checks made by C2 are one pixel less than the size of the piece worked one - it add its own lot of quirkiness to the whole thing).
<img src="http://dl.dropbox.com/u/1412774/FinalPortal/portal03-1.png" border="0">
So decided to swap that game with another one I remembered playing on some Flash website, where you need to pop some bubbles with another one.
The game has 10 levels, each one adding more bubbles, but your number of authorized touches are not increasing at the same rate, adding some difficulty. When you touch (by yourself, or when popped by another bubble) a bubble, it changes color, increasing its size, and burst, starting the chain reaction with any other bubble in its perimeter.
To move the bubbles around I use the Bullet behavior. The iPad does surprising well with that, even when there's 50 bubbles on the screen. The screen runs a bit more hot than usual, but not all the children (or adults) can go straight to the tenth level every time, so it's not a problem.
To be on the safe side, don't forget to set the iPad to go on sleep quickly, so even when there's a crash and you are not there, the iPad will block itself, and nobody won't be goofing around with it. When there is not bug, the Kiosk app will prevent the iPad to go to sleep, so the normal behavior of your game will unfold...
For various GPU performances, you need to try to have any original image less than 1024x1024.
Since the game is loading locally, the HTML5 logo isn't going to be seen, but if your client asks for it, you can change it with another one using his own brand (rename it to "logo.png").
And remember that when you are doing games like that, you need to have the rights to distribute everything you place inside, even the fonts !
As you can see, I'm french, and it was for a french shop, so all the labels are in french.
My client was OK with letting me publishing that postmortem, providing the graphics are tagged. That's why you see "TEST" everywhere. Obviously, that's not present in the final product :)
At that time, I needed to do things fast, and was in a hurry. I think that now I'm going to integrate everything with PhoneGap for the next products, having seen that it's pretty straightforward (even if it's not using WebGL yet, but it's going to remove the problems with audio?). If you don't use it, but go for a Kiosk software, don't forget to remove the alert text from the C2's runtime JS file (since you know what you are doing). You can still remove it when the file is minified by searching for one word of the alert message?
Before leaving the place, don't forget to boost the iPad luminosity to the maximum, and disable the auto-change. Crude and powerful lights are commons in shop centers, so you don't want to give the idea that, from some distance, the tablets are turned off, and that, when the user is making a shade when in front of it, the screen flickers all the time. (Putting a plastic protection on top of the screen is mandatory, because the wearing is there quickly, with the kids, and you can furthermore remove the glares from the lights of the shop, that little children can't block with their smaller body).
The URL for the three games :
http://dl.dropbox.com/u/1412774/FinalPortal/Portal16/index2.html
http://dl.dropbox.com/u/1412774/FinalPortal/Portal26/index.html
http://dl.dropbox.com/u/1412774/FinalPortal/Portal36/index.html
If you are viewing those on a desktop browser and are seeing bizarre things on the right of the screen, depending on the game, remember that the iPad resolution is 1024x768, and those things aren't visible for the user !
By the way, for the photos of the installation in the shop itself, the lights are so off and powerful that I can't get a color balanced picture to start with, so it's difficult to have something pleasant in the end, even by photoshopping it ;).
(A quick note : if you are planning to use the Kiosk app, don't forget, when you export your app/game, to set the folders for images/medias as ".\", because the application works with flat hierarchies, when everything is in the same folder. Not a big deal, but sometimes, when you do a quick last export, you can't forget that, and you are left puzzling "why is my game screen only orange, with nothing on it ?")
I certainly have forgotten to talk about some things/issues, so don't hesitate to ask me questions, how to do things... (or rates ;)).
Edit : I forgot to say that the provided games URL are mouse compatible, not touch only...