Forums » Help » ig.mouse.input.x in appmobi emulator

Hi, i'm a beginner for impactjs and appmobi, I try to get ig.input.mouse.x so that i can track the touch of entities. However, when i try on different emulator other than Iphone, it shows negative value for ig.input.mouse.x from the top left of the mobile screen, but the position for the entities at top left of screen is (0, 0). I wonder why the mouse.x at top left screen will be show negative value?

my scaling is like following:

if( ig.ua.iPad ) {
    // The original iPad on iOS4 is too slow to render the game in fullscreen
    // It's rendered in a 480x320 canvas instead
    ig.Sound.enabled = false;
    ig.main('#canvas', MyGame, 60, 160, 240, 2);
}
else if( ig.ua.mobile ) {
    // For iPhone and Android, make sure to always render in the 
    // native resolution
    ig.Sound.enabled = false;
    ig.main('#canvas', MyGame, 60, 160, 240, 2 * ig.ua.pixelRatio);
    
    // Set the CSS size of the canvas to 320 (160, scaled up 2x)
    // "CSS pixels" will be scaled to native screen pixels by 
    // the browser internally through the pixelRatio
    ig.system.canvas.style.width = '320px';
    ig.system.canvas.style.height = '480px';
}
else {
    // Scale up 3x for desktop
    ig.main('#canvas', MyGame, 60, 160, 240, 3);
}

I'm using the touch tracking with the following:

return (
					(this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
					((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
					(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
					((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
					);

Are you using directCanvas? Touch tracking can be a little tricky in DC which would explain these odd results.

If you are indeed using directCanvas, all you need to do is add this code into line 1 of main.js before any other code

var nX;
var nY;


Canvas.addEventListener('touchstart', function(event){
               
               nX=event.touches[0].pageX;
               nY=event.touches[0].pageY;
               
            }, false);

From there reference nX,nY for mouse/touch position instead of ig.input

Let me know if you have any questions :D

Yes, i'm using directCanvas, and i got it solved....thank you very much ^^

However, i'm still struggling in the game resolutions. I tested the game in different mobile devices(not emulator) but the game does not actually fit the mobile screen.

Somehow its show some dark spaces at surrounding. May i know how to get my game fit to every mobile device screen?

That is the hardest part of making a cross-platform HTML5 game. Each screen resolution is different for each device, so even though it may look awesome on an iPad, there could be part of the game cut off on the Asus Transformer.

Heres a link to a PDF about how to go about designing your app for multiple platforms

I'm also doing a talk about this very issue on July 23rd at DevConf5. Afterwards I'll post my presentation on these forums as another resource.

It's a great source, thanks! I have read the article "Developing appMobi Applications for Multiple Devices", however, im still confuse with the "Build Once" approach.

Is it means that we need to build our game in the bigger resolution and shrink it if the device screen is smaller?

Im using ig.main('#canvas', MyGame, 60, 160, 240, 2 * ig.ua.pixelRatio); and AppMobi.display.useViewport(320, 480);,

but im confuse that what is the relationship between those two function? how do they affect the output screen?

@Aries

I don't want you to think I forgot about this thread, I've been working on a demo video and code to help the conversion of ImpactJS games to DC which I think will help you out a lot.

I'll post the link to the video and files here after it's complete.

I'm so greatful that can get your help and thank you very much on your effort on helping me and others. ^^

I hope the video can be done soon. ^^

@Aries

Look at this new thread I just made for the tutorial information

http://impactjs.com/forums/code/tutorial-video-and-zip-template-on-how-to-convert-impactjs-to-directcanvas

Hi, Tyler.

This is a very gud video tutorial and it's provided gud explaination.

Thanks a lot!