Forums » Help » Ejecta: Buttons Located Below Button Drawings on Devices Not 1028 Wide

Hello again:

I am having issues with scaling on Ejecta.

My game is designed with a screen width of 1024 px in mind.

The problem occurs when I attempt to play the game on an iPhone 5,
which does not have a width of 1024.

Ejecta will shape the canvas to match the iPhone 5 screen,
which is cool,
but the effect is that the buttons and really
all clickable objects end up with targets that are below
their drawings.

Surely their must be a way to correct this,
but I have reached the limited extent of my knowledge.

Hopefully someone more capable than I has tangled with this issue.

Here is the code in my Ejecta index file:

// Load the game
ejecta.include('lib/impact/impact.js');
ejecta.include('lib/game/main.js');


canvas.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;

I have also attempted to call

this.buttons.align();

repeatedly and have achieved the same results.

Is there a different call or something that I can make to realign
the buttons and clickable entities so that the targets
are within the drawings?

Edit: Whoops, I'm so dumb that I put 1028 in the title.
See how badly I need your help?

Interesting thing:


The button targets are below the drawings if I use this call to ig.main

ig.main( '#canvas', MyGame, 60, 1024, 768, 1 );

This is how I would like the game to run.

Yet, when I set the call to ig.main using these parameters:

var width = window.innerWidth;
var height = window.innerHeight;
ig.main( '#canvas', MyGame, 60, width, height, 1  );

The buttons work, but then the art work no longer scales correctly.

I think you need to update your min.js to handle the screen not trying to edit the canvas size in the index.js

if( window.ejecta ){
		ig.main( '#canvas', GameLoop, 60, ig.ua.viewport.width, 320, 1 )
}else{
		ig.main( '#canvas', GameLoop, 60, 568, 320, 1 ) 
}

This is similar to how I handle adjusting for both the iPhone 4/5 screen sizes and it works without any issues.

Thank you for the suggestion.

I implemented it with the following:

         if( window.ejecta ){
             ig.main( '#canvas', MyGame, 60, ig.ua.viewport.width, 768, 1 )
         }else{
              ig.main( '#canvas', MyGame, 60, 1024, 768, 1 )
         }

This helps me adjust the screen sizes,
but the buttons still are off unless I do like this:

         if( window.ejecta ){
             ig.main( '#canvas', MyGame, 60, ig.ua.viewport.width, ig.ua.viewport.height, 1 )
         }else{
              ig.main( '#canvas', MyGame, 60, 1024, 768, 1 )
         }

Then I'm right back in the same boat
with the screen too far zoomed in.

I suppose that this is why everybody
scales things up...

With the buttons, I'm assuming you have them set to be bottom aligned? Perhaps you skip the vertical scaling, and then just have the buttons offset from the top?

I think the issue is that your so far from scale on the iPhone compared to 1024 that it scales poorly. I had the reverse issue trying to scale up for the iPad, there was too much of the canvas showing, so stuff that would spawn just outside the view would "appear" because the canvas was so big.

Yeah, I'm rebuilding this.
Salvaging what I can etc.

I think the only way to go is totally responsive.

Thanks for thinking about it with me.

This works pretty well for me:

         //iPhone 4 and 4S (480 x 320)
         if (window.innerWidth < 481) {
            ig.main( '#canvas', MyGame, 60, 240, 160, 1 );
         }
         //iPhone 5 (568 x 320)
         else if (window.innerWidth < 569) {
            ig.main( '#canvas', MyGame, 60, 284, 160, 1 );
         }
         //iPads (1024 x 768 [works for Retina too])
         else if (window.innerWidth < 1025) {
            ig.main( '#canvas', MyGame, 60, 256, 192, 1 );
         }
         //Fallback
         else {
            ig.main( '#canvas', MyGame, 60, 240, 160, 1 );
         }