1 decade ago by tarrent
Hi everyone I hope you could share insights on how to better scale touch areas relative to a mobile browser's size, given an original Impact game scaled to 1 in ig.main() and that relies to CSS width:100%,height:100% for full screen.
Here's the demo I'm working with:
http://html5test.blueprintgaming.com/test/goldleafdemo/
The demo works quite fine for desktop browsers but still needs a little more tweaking for mobile browsers (although it's quite tolerable for Android Samsung Galaxy Ace2).
The game's original size is 480x280 and I've initialized it in ig.main as
Its always to be run in full screen so I've written its CSS as:
#canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #555;
background-color: red;
width:100%;
height:100%;
}
#
Now, the game's touch areas works fine for mobile browsers which are near to or divisible by the game's original size 480x280 i.e., Samsung Galaxy Ace2's 480x800, but not so for larger sizes, i.e. Ipod iTouch 4's 960x640 screen or Samsung Galaxy S3's 720x1280 pixels. Well.. they CAN be touched on the larger screens but their locations seem to stick with the original scale=1 from Impact. As I see, the scale specified in ig.main() does not scale up/down or re-size with the CSS.
I've tried scaling in Impact to 2 for larger screens and they work; images and touch locations sync but performance is very slow so I'd as much as possible would like to stick with CSS for full screening and staying at game scale 1 in ig.main().
For big screens, I've been thinking on scaling the mouse or touch location's position relative to the game's original size regardless of browser's size such that let's say if I clicked on large-screen coordinates (1100,500), an Entity's touch area originally at (400,220) will be clicked. (But this may have trouble on clicking Entities using javascript, and not through users' direct actions via ig.input())
Insights and tips for this topic will be greatly appreciated.
Thanks!
Here's the demo I'm working with:
http://html5test.blueprintgaming.com/test/goldleafdemo/
The demo works quite fine for desktop browsers but still needs a little more tweaking for mobile browsers (although it's quite tolerable for Android Samsung Galaxy Ace2).
The game's original size is 480x280 and I've initialized it in ig.main as
ig.main( '#canvas', MyGame, 60, 480, 280, 1 , ig.ImpactSplashLoader);
Its always to be run in full screen so I've written its CSS as:
#canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #555;
background-color: red;
width:100%;
height:100%;
}
#
Now, the game's touch areas works fine for mobile browsers which are near to or divisible by the game's original size 480x280 i.e., Samsung Galaxy Ace2's 480x800, but not so for larger sizes, i.e. Ipod iTouch 4's 960x640 screen or Samsung Galaxy S3's 720x1280 pixels. Well.. they CAN be touched on the larger screens but their locations seem to stick with the original scale=1 from Impact. As I see, the scale specified in ig.main() does not scale up/down or re-size with the CSS.
I've tried scaling in Impact to 2 for larger screens and they work; images and touch locations sync but performance is very slow so I'd as much as possible would like to stick with CSS for full screening and staying at game scale 1 in ig.main().
For big screens, I've been thinking on scaling the mouse or touch location's position relative to the game's original size regardless of browser's size such that let's say if I clicked on large-screen coordinates (1100,500), an Entity's touch area originally at (400,220) will be clicked. (But this may have trouble on clicking Entities using javascript, and not through users' direct actions via ig.input())
Insights and tips for this topic will be greatly appreciated.
Thanks!