11-24-2012 05:43 PM
Some code I contantly use reflows the screen based on the size of the browser
On Desktops this can get fiddly but on a known browser like BB it's pretty easy
Basically you need something like this (note JQuery)...
var wh = window.innerHeight;
var ww = window.innerWidth;
// Positioning code
How you actually do the positioning depends on your HTML
As long as something has an id it can be sized as you desire
Say you've got a div or canvas with id='main'
It's as simple as adding the following after the comment in the ready function
$('main').css('width', ww + 'px');
$('main').css('height', wh + 'px');
Everything else can easily be overlaid or repositioned using ww and wh with similar code
I tend to use overlays with a z-index and absolute positioning so that regardless of the screen dimensions everything is where its meant to be
As long as you know the size of your assets the maths is simple
Top or left positioning is always the same
Right positioning is ww - <image width> - position
Bottom positioning is wh - <image height> - position
Center relative positioning is like right and bottom but dividing ww / wh by 2
This allows you to always have things in the right places regardless of the screen res.
Some caveats are that you may be dealing with a particularly small or large screen so you may need different images for specific resolution breaks although you can also choose which image to use based on ww and wh - again assuming each img has an id you need something as simple as $('img123').attr('src', <res directory>'/image.png');
An extension to this is catering for orientation change although this is somewhat more complicated as you have to snapshot your initial orientation so consistantly get everything in the right place as the results of the width and height measurements are only correct on initial load (height goes wonky later). Having initial readings for everything means you always know how to size and flow the screen.
Personally I always create a reflow() function for such purposes as it makes orienttion changes and possibly image changes easy to deploy
11-24-2012 11:30 PM
I ended up doing a similar think for all of the dynamically changing elements in my games, and just used width:100% and height:100% css rules for the containing elements. We'll see if that works.
Any comments to my question, Erik?
11-26-2012 11:06 AM
11-26-2012 11:08 AM
I see... Well that stinks for me, as I was thinking that it meant 2-5 during the contest. Only a few days ago did I realize that it might have meant that I wasn't going to recieve a PlayBook...
11-26-2012 11:25 AM
Ah, I'm sorry to hear that. Lou mentioned it throughout the Port-A-Thon but depending on when you were connected it may have been missed.
You can still qualify for the cash rewards, and there is still the potential of app sales / 10K qualification assuming the apps will be for sale? I'd also recommend keeping an eye on our devblog as the success of this last event is certain to drive more in the future. While we're able to bend on the dates somewhat, I don't think we'll be able to bend on reward boundaries.
11-26-2012 11:30 AM
Understood. It's my own stupidity that I didn't realize that. Prospects of continued development for BB10 are decreasing though, as I don't think I'll buy a device to develop on.
11-27-2012 08:56 AM
Oddly enough, my second game just got approved, even though it used the same method to fill the screen as the one that got denied. Now I'm even more confused as to what was actually wrong with the first app.
11-30-2012 03:08 AM
Hi Erik. I just had 6 games using canvas rejected for similar very small issues. These should be really easy to fix if only I could test them on the similator (which currently isn't possible since they use canvas). Is there any word on whether we'll get an update that fixes this or will I just have to shoot in the dark?