Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
barkerdogg
Posts: 28
Registered: ‎04-12-2012
My Device: Torch 9800, Playbook
My Carrier: LIME
Accepted Solution

Scale BB!0 app to Playbook

Hi all, in a fit of what can only be described as sillyness i created a game in webworks for my z10. i used fixed assets all at the z10 resolution. now i have decided to port to playbook and obviously the change in resolution is being a bit problematic. is there any way i can use a viewport tag to simply scale down the application to fit the playbook? or do i have to do a lot of recoding and changing asset sizes?

 

please advise.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Scale BB!0 app to Playbook

initial-scale, min-scale, max-scale = 0.9541015625

 

This leaves you with 47 pixels over out of the 1024 on a playbook

 

If the game scrolls you don't need to worry about it, if its a fixed size then you need to pad the 47 pixels - you may need to tweak this 1 pixel either way (I'm just using maths and didn't use exact numbers)

 

These spare pixels can easily be used as either ad space, logo space or whatever

 

If you check out Vexed on the PlayBook and Z10 by me it's all exactly the same JS - I've got a Q10 version as well - same code again

 

In the future it will pay you well to be adaptive to different screen resolutions

 

For example...

 

All the images in Vexed are actually 128x128. At startup I check the size of the display and dynamically alter everything to fit the device I'm running on by simple manipulation of HTML via JQuery so the game tiles on a Z10 are displayed at 96x96, on a Playbook are displayed at 75x75 and a Q10 uses 72x72

 

I allowed a friend to release an iPad version - he had to use 256x256 tiles owing to the Retina Display

 

The only real hassle with this approach is calculating sizes and positioning but it is very effective allowing minimal porting issues to all decent HTML5 platforms (BB, iOS + Droid)

 

I suggest developing any project on BB to start with as its by far the easiest to write for - then port to others if you want and fix any issues (usually touch is the only problem)




Click the like button if you find my posts useful!
Please use plain text.
Contributor
barkerdogg
Posts: 28
Registered: ‎04-12-2012
My Device: Torch 9800, Playbook
My Carrier: LIME

Re: Scale BB!0 app to Playbook

Thank you so much for your help. My problem was because i used ripple and not my actual pb. once i used my pb and scaled to 0.78125 itt worked aas you indicated. now the problem is the left over pixels. You suggested i use them , but how do i accomplish this? right now the extra pixels show up as white space at the right edge of the app. This is unfortunate cause the app background is pretty much a straight black image. What i would like to do is fill those pixels with black simply and maybe move the main div across a couple of pixels so that the div is "middled" in the space. If i can simply get these two accomplished it will sort out the problem.

 

so to recap. how do i turn these unused pixels from white to black?

 

i am assuming i can move my main div across to center the app in the middle of the unused space as opposed to having it all on the right.

 

thank you for your help and please advise.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Scale BB!0 app to Playbook

Simply add an extra div

 

Something like...

 

<body>
  <div id="content">
    <div id="game">
      <!-- Game stuff -->
    </div>
    <div id="spacer">
      <!-- Spacer stuff -->
    </div>
  </div>
</body>

 

Now in your CSS set the width of #game and #spacer to the right numbers (may require experimentation as you're using a funny zoom)

 

Apply a float: left as required to the CSS

 

Stick something in #spacer

 

If you want balance - add two spacers

 

Done for that specific instance

 

The same trick will work on a Q10 but #spacer would be below the main action - forget the float for that one

 

Vexed uses all these concepts (there's a free Z10 version if you wanna look)

 

There is also the concept of font sizes - that one is harder to explain - making it legible on all devices is also possible

 

I think I'll write an article on this subject at some point as its pretty advanced developemnt concepts




Click the like button if you find my posts useful!
Please use plain text.
Contributor
barkerdogg
Posts: 28
Registered: ‎04-12-2012
My Device: Torch 9800, Playbook
My Carrier: LIME

Re: Scale BB!0 app to Playbook

Thank you again,

 

i instead did some  fancy maths and just placed one large div behind the screen with a background color black and voila it worked. 

 

Thank you for all your help. This issue is now closed

 

#loveBlackBerryDeveloperSupport

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Scale BB!0 app to Playbook

Soz - thought you wanted the perfect way to do it - hehehe

 

Yes - that also workd

 

Have you tried altering the CSS so margin is auto? That will stick it in the middle of the screen in the scenario you describe

 

What's the app?

 

I wanna see what I just did :smileyhappy:




Click the like button if you find my posts useful!
Please use plain text.
Contributor
barkerdogg
Posts: 28
Registered: ‎04-12-2012
My Device: Torch 9800, Playbook
My Carrier: LIME

Re: Scale BB!0 app to Playbook

LOL. Indeed. I didn't try the margin I simply shifted the div. Lol not perfect but certainly works. The app is a bit of a secret.  It's a game that I hope to soon submit to bb world and finally make a few dollars off my talents. Lol. 

 

However you have been a great help in porting my app to the playbook from the z10 and hence improve my money making potential lol. So feel free to private message me and I will shoot you the playbook bar. A tester of your caliber will be most appreciated. 

 

Thanks again

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Scale BB!0 app to Playbook

Glad to be of help

 

I intend to expand on the simple explanation provided here when I can find the time

 

If you plan in advance it is relatively easy to make something completely portable accross all devices and (with some adaptions) platforms




Click the like button if you find my posts useful!
Please use plain text.