CocoonJS, Images and screen resolution

[jamessimo]

Hey guys! I just want to find out if anyone knows why this is happening to my CocoonJS game. 

 

I had my physics game running at 60+ FPS no problems on my samsung S3 (720x1280). However once I added a single image (58x62) it dropped the FPS to 42~43. The image is attached to a static box2D obj. 

 

Could the screen resolution be too big? I ask because I have made and iPad game with loads of images and no problems on cocoonJS. 

 

For now I have made the resolution smaller and planning to scale up however I wanted to see if I could a better reason to why this happens with a single image. 

 

Thanks all! 

[ericjbasti]

Are you saying you didn't have images before? How many objects are using this image?

[jamessimo]

Are you saying you didn't have images before? How many objects are using this image?

 

Yes before it was just coloured rectangles. Only one object uses this image. 

[ericjbasti]

I can see how that could effect things a little but not that much. Are you using a framework or coding this all yourself?

[jamessimo]

I am using the iio engine. 

I think its just my initial huge screen resolution. HTML5 Canvas blits textures and images every draw which is intensive if your resolution is huge.

 

I have shrunk the res down to 360X480 and I scale up using CSS now and my issues are fixed. 

[rafinskipg]

I have shrunk the res down to 360X480 and I scale up using CSS now and my issues are fixed. 

 

Awesome! Going to try!  Did you had to change your input touch events to calculate the zoomed thing? (in case you use input touch)

[jamessimo]

Awesome! Going to try!  Did you had to change your input touch events to calculate the zoomed thing? (in case you use input touch)

 

Yes, cocoonJS calls the resize event on load so inside it I do this to make the screen the correct size. (this streches to fill the screen) 

this.onResize = function(event){		io.canvas.width = 320;		io.canvas.height = 480;		scaleX = io.canvas.width / window.innerWidth;		scaleY = io.canvas.height / window.innerHeight;		io.canvas.style.width = window.innerWidth + 'px';		io.canvas.style.height = window.innerHeight + 'px';	};

And inside the touches I simply 

  function touchMove(event){    	mouseX = event.touches[0].pageX*scaleX;    	mouseY = event.touches[0].pageY*scaleY;    }

[BdR]

For what it's worth, I've understood that graphics hardware typically works better when textures are sized in powers of 2. so 8, 16, 64, 128, 256 etc. (see here)

 

Have you tried resizing the image to 64x64 pixels instead of 58x62? (just leaving the non-used parts of the image blank)