06-10-2013 06:21 PM
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?
Solved! Go to Solution.
06-11-2013 06:21 AM
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
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)
06-11-2013 07:08 AM
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.
06-11-2013 07:59 AM
Simply add an extra div
<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
06-11-2013 08:45 AM
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
06-11-2013 08:55 AM
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
06-11-2013 09:27 AM
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.
06-12-2013 04:34 AM
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