Jump to content

Mobile displaying fails


DNL
 Share

Recommended Posts

EDIT:

I already solved the issues. About the html functions that phaser was unable to call using Firefox browser I change how to define them. Instead of:

var changeFullScreen = function(){

actions();

}

I changed for:

function changeFullScreen (){

actions();

}

 

 

 

Hello,

I wanted to create a game that appears with its default size in desktop vesion (800x600). In mobile version should be seen in fullscreen and resized to the device resolution.

It is defined:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL 

Canvas is inside a div and it is defined with one of the following classes:

.desktop{ position:relative; }

.mobile{     width:100%;
                height:100%;
                position:fixed;
                top:0px;
                left:0px;
                background-color: black; }

Following the tutorial http://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/ I setted in boot state the listeners to show a"turn around image", it hide o show the image of a div: 

this.game.scale.forceOrientation(true, false,);
this.game.scale.enterIncorrectOrientation.add(this.handleIncorrect);
this.game.scale.leaveIncorrectOrientation.add(this.handleCorrect);  

handleIncorrect = function(){
show_the_div_with_turn_image();
}  

handleCorrect = function(){
hide_the_div_with_turn_image();
}

When the page is loaded , with a javascript I set the game with it screen configuration:

window.onload = function(){
                if( (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|lumia|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4))) ){
                   define_the_class_of_the_div_for_mobile();
                }else{
                   define_the_class_of_the_div_for_desktop();
                }
               change_size_of_the_canvas_container_div();
}

The game, on the top right position has a button for resizing the screen size. That button change the class of the canvas div. (.mobile or .desktop) so the canvas is streched depending the size of its div container.

I checked the game and with my PC using Chrome it works delightfully.

I can't say the same using Firefox. When I click the rize button it doesn't call the javascript function allocated in the html file:

var fullScreen = function(){
    add_the_resize_button_on_canvas();
    //This next function is not called using Firefox!
    entrarPantallaCompleta();  
}

In the html there is:

entrarPantallaCompleta = function (){
          change_the_class_of_canvas_div()  
        }  

The other problems I found are:

- In android devices I can't not see the canvas.
- In Windows Phone It show the "turn around screen image" when the page is charged with device in horizontal orientation. Also it doesn't load the game in full screen size.

 

What I'm doing wrong?

Thanks

DNL

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...