Mobile issues: Scaling and sound

I'm having problems getting my app to scale to fit screen correctly. The following images are screenshots taken directly from my phone.

My game is set to 800,480... According to pixeldensitycalculator.com my phone is 854x480. But I thought the whole point in the fullscreen mode is that it would fill the screen by scaling the game.

Here are the screenshots:

Exported with PhoneGap

<img src="http://dl.dropbox.com/u/44025915/screenshot_2012-02-28_0051.png" border="0" />

<img src="http://dl.dropbox.com/u/44025915/screenshot_2012-02-28_0054_1.png" border="0" />

Exported with appMobi

<img src="http://dl.dropbox.com/u/44025915/screenshot_2012-02-28_1741.png" border="0" />

<img src="http://dl.dropbox.com/u/44025915/screenshot_2012-02-28_1742_1.png" border="0" />

Also. see the quality between appMobi and PhoneGap. The quality is terrible with appMobi.

*Edit*

Finally, as far as the sound is concerned, I've got the 'set muted' configured and working fine for my sounds when the game is run on my computer, but the mobile exports seem to ignore this command. So the sounds work, I just can't shut them up!

You must not use a specific window size for mobiles. Not only do mobiles all have different sized screens, but if you don't use one of the fullscreen modes Construct 2 will try to place your game on a scrollable web page which is probably what's making it go wrong. See supporting multiple screen sizes.

Sound on mobile is not well supported and currently on appMobi only the 'play' action works. Nothing else is supported so don't expect muting/stopping/set volume to work.

Thanks for your response. Just to confirm though, my game is set to Fullscreen scale mode.

Am I right in thinking that it won't scale up, only down? So to be clearer, my game is currently set to 800,480 but my phone is 854,480 and it won't fill the screen even on fullscreen mode. So am I better to just make the game much bigger, for example, 1024x768 and letting C2/appMobi scale it down for all mobile devices?

And thanks for the info on the sound, I'll leave that until future updates.

Hey! I've downloaded Sim Stone, not overly sure what it does yet but it looks nice haha

Anyway, quick question... Could you please tell me how you tackled supporting multiple screen sizes.

I've read all of the guides, set fullscreen crop/scale, used phonegap/appmobi and posted multiple questions on the forum and still no luck.

If you have a minute can you please let me know what is the project size set to in C2 and which fullscreen mode did you use?

You can find my original topic here for more info, but I really am struggling to get to grips with the screen size issue.

http://www.scirra.com/forum/mobile-issues-scaling-and-sound_topic49609.html

Thanks in advance for any help. I used 800,480 project and layout size, with unbounded scrolling with phonegap export through eclipse. on start of layout I create some helper global variables (like X position of left and right screen edges, Y position of top and bottom edges) and reposition + scale all objects according to them manually on creation or start of layout, depending when they are created. also lots of anchor behaviors. have fun, it only sounds quite complicated :)

cheers!

Thanks for your reply!

I'm still not sure how I would go about doing what you have mentioned.

If you get a minute to make a little guide or example capx file that would be great. I'm eager to get it working.

If not though I'll wait until C2 can handle the multiple screen sizes itself without the need for all the additional events you've had to include.

I'm just starting with C2, but from what I see the only way to fill out the entire screen is Crop mode. It's aspect ratio independent.

Since mobile screens have different aspect ratios, scale mode will show empty space (as shown in the "Fullscreen - scaling to window size" demo in Construct 2's examples)

What I'd really love is a hybrid mode, where it keeps the height (for a landscape orientation game) and expands more of the width for wide screen phones.

.

Thunder, how would one go about setting up those custom settings?

Thunder, how would one go about setting up those custom settings?

I'd like to know also please. Sounds really interesting.

.

Excuse my stupidity, coding isn't my strong point, even when editing html files lol.

Could you dumb this down for me and tell me where I've gone wrong here?

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title>Ball Boy</title>
     <!-- Note: running this exported project from disk may not work exactly like preview, since browsers block some features on the file:// protocol.  Once you've uploaded it to a server, it should work OK. -->
     
     <!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="HandheldFriendly" content="true" />

    <!-- All margins and padding must be zero for the canvas to fill the screen. -->
     <style type="text/css">#c2canvas{width:100%;height:100%}*{margin:0;}</style>
     <div style><canvas id="c2canvas" width="800" height="480"></div>
</head> 
 
<body> 
     <div id="fb-root"></div>
     
     <!-- The canvas the project will render to.  If you change its ID, don't forget to change the
     ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
     <canvas id="c2canvas" width="800" height="480" oncontextmenu="return false;" onselectstart="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. -->
          <h1>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><br/>
          <a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
     </canvas>
     
     <!-- Pages load faster with scripts at the bottom -->

     <script src="jquery-1.7.1.min.js"></script>

     <script src="phonegap.js"></script>
     
    <!-- The runtime script.  You can rename it, but don't forget to rename the reference here as well.
    This file will have been minified and obfuscated if you enabled "Minify script" during export. -->
     <script src="c2runtime.js"></script>

    <script>
          // Size the canvas to fill the browser viewport.
          function cr_sizeCanvas()
          {
               var w = jQuery(window).width();
               var h = jQuery(window).height();
               
               if (w === 0 || h === 0)
                    return;
               
               var canvas = document.getElementById("c2canvas");
               
               if (canvas)
               {
                    canvas.width = w;
                    canvas.height = h;
               
                    if (canvas.c2runtime)
                         canvas.c2runtime.setSize(w, h);
               }
               else if (window.c2runtime)
                    window.c2runtime.setSize(w, h);
          }
          
          jQuery(window).resize(function() {
               cr_sizeCanvas();
          });
          
          document.addEventListener("deviceready", function ()
          {
               cr_sizeCanvas();
               
               // Create new runtime using the c2canvas
               cr.createRuntime("c2canvas");
          }, false);
     
    </script>
</body> 
</html>

Ok Guys my phonegap app size :

Android No problem without top bar.

Window Size : 2610,1736

Game Layout size 2610,1736

It s looking good no gap nothing.

Hello, I readed the scirra.com/tutorials/73/supporting-multiple-screen-sizes post, and C2 axample (fullscreen - sacling to windows size.capx) , but It's not working for me.. Please, Can you provide an example (with hub, background and some objects) to test on all mobile device screen size?

Thunder, you could teach to do this with the resolutions? To work on all of them? how to layolt and project exports by cocoonjs?