So I got pretty excited when I first saw Maciej's post about Appmobi over in the fundry thread. And even more so when touch support went into the latest build of C2. Basically we can now make native apps for mobile phones using Construct 2 which is pretty damn amazing if you ask me
Unfortunately even the most basic test application with a single moving sprite seems to run a bit slow on my friend's Android, but hopefully performance will improve in time.
Anyway, one thing I wanted to share is a way to scale a C2 game based on a phone's screen resolution. As you know, Android phones come in many shapes and sizes with different screen resolutions. Then there are iPhones and iPads to further complicate things. You can use some DIV formatting in the index.html file to stretch the canvas to fullscreen but in my experience it throws things off and is ugly. Instead what we need is something like Construct 0.x's DisplayWidth and DisplayHeight to use in expressions within Construct 2 so that we can position and scale sprites correctly based on the available space. I'm sure this will eventually be possible but heres a hacky workaround till then (note: im not a programmer so try not to cringe if this is a horrible way of doing it)
In Construct 2:
Create two text objects. These will be used to store the screen's dimensions. Once we have global variables you should use those instead.
Then on the start of the layout, set a temporary number as the text for each.
On Start of Layout:
TextX: Set text to str(320)
TextY: Set text to str(500)[/code:3k9axzz6]
Now simply pretend TextX represents the screen width and TextY the height and use their text values the same way you would the DisplayWidth and DisplayWidth expressions. Keep in mind that you have to convert these values to integers first, like so: int(TextX.Text)
Once you're ready to try it on a phone, export it to HTML5. Find c2runtime.js among the exported files and open it for edit in Notepad++ or equivalent.
Do a search for TextX and keep going till you find the "SetText" entry under actions. It should look something like this:
[code:3k9axzz6]"actions": [
{
"type": "TextX",
"method": "SetText"
, "parameters": [
{
"type": "any",
"expression": {
"type": "system_exp",
"name": "str"
, "parameters": [
{
"type": "int",
"value": 320
}
[/code:3k9axzz6]
Where it says [b]"value": 320[/b], simply replace the hardcoded number [b]320[/b] with [b]window.outerWidth[/b].
So it should now read: [code:3k9axzz6]"value": window.outerWidth[/code:3k9axzz6]
Do the same thing for TextY but replace that with [code:3k9axzz6]"value": window.outerHeight[/code:3k9axzz6]
Save and close this file.
Now edit the index.html and replace its contents with this:
[code:3k9axzz6]<head>
<style type='text/css'>
div {position:absolute;left:0px;top:0px;width:100%;height:100%;}
</style>
<title>New project</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="c2runtime.js"></script>
<script type="text/javascript">
// Start the Construct 2 project running on window load.
jQuery(document).ready(function ()
{
// Create new runtime based on the preview canvas element
var project = new cr.runtime(document.getElementById("c2canvas"));
// Load and start running
project.load();
project.go();
});
</script>
</head>
<body>
<div><canvas id="c2canvas" oncontextmenu="return false;">
<!-- This text is displayed if the visitor's browser does not support HTML5.
You can change it, but it is a good idea to link to a description of a browser
and provide some links to download some popular HTML5-compatible browsers. -->
Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser.org">What is a browser?</a>
<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
<a href="http://www.apple.com/safari/download/">Apple Safari</a>
</canvas></div>
<script type="text/Javascript">
//get div to gain access to window size
div=document.getElementsByTagName('div')[0]
//set canvas size to the whole window
canvas=document.getElementsByTagName('canvas')[0]
canvas.width=div.scrollWidth
canvas.height=div.scrollHeight
</script>
</body>[/code:3k9axzz6]
It probably doesn't need any of the browser checking but whatever. It's just a slightly modified default index.html that makes the canvas fullscreen without actually stretching the contents.
That's it. Now you can convert it to a mobile app using AppMobi and it should get each phones screen dimensions fed into the two text objects.
Here's a simple example project that positions four decorative sprites exactly in the screen's corners
<img src="http://www.rustwork.com/temp/app_SS.JPG">
Here's a zip file containing the xcap and the modified exported files:
[url=http://www.rustwork.com/temp/screensize.zip]screensize.zip[/url]
NOTE: This will only look correct on phones. In browsers and AppMobi's emulator it's way off.
PS.: Sorry about the wall of text
EDIT: I've only tested this on Android so no guarantees that it'll work on iPhones or other things. I'm hoping it does.