luke2125

Phaser 3 - Cordova Question

Recommended Posts

Hi,

Would like to thank the developer / staff for such a nice community and framework to create games. Now, my main question is, that I'm using the latest builder for Phaser 3 ( 3.15.1 ) and have managed to create a game, but would like to test the mobile performance via Cordova - CLI : https://cordova.apache.org/docs/en/latest/guide/cli/index.html

I've created everything as per the link above, the skeleton of the folders ( www, etc.. ) and platform target being IOS, I've also copy my files to the www folder and done via cli : cordova prepare ios as per my folder. And I opened up the helloworld in my Xcode, and set up permissions, etc....And installed it via build ( on my Iphone 5S ) to test fps and memory usage, and everything so far so good, but then I just see a black screen with a very small rectangle ( which I think it's my game screen, but it's very small ), so I'm thinking it could be relation to scaling. Here's my code:

var config = {
    type:Phaser.AUTO,
    width:1280,
    height:720,
   // scale: 'SHOW_ALL',
  //  orientation: 'LANDSCAPE',
  //mode:Phaser.DOM.FILL,
    fps:60,
  //  parent: 'phaser-example',
   physics:{
        default:'matter',
            matter:{
             gravity:{
                x:0,
                y:0
               
            },            
            debug:true,
        }  
    },
    
   // scene:{
      //  preload: preload,
     //   create: create,
      //  update: update
   // }
   //render,
   // scene:[main,menu,gameover]
    scene:[main]
};
var game = new Phaser.Game(config);
<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Game</title>
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0, minimal-ui" />
        <style type = "text/css">
            body{
                padding: 0px;
                margin: 0px;
            }
            canvas{
                display:block;
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            
        </style>
        
        <script type="text/javascript" src="phaser.min.js"></script>
        <script type="text/javascript" src="game7.js"></script>
     
    </head>
    <body>
             </body>
</html>

Now, I've tried different variations by following :

https://labs.phaser.io/index.html?dir=game config/scale/&amp;q=

https://labs.phaser.io/index.html?dir=scalemanager/&amp;q=

But still, no luck. By the way, I'm using a Mac Mini, with Visual Studio Code installed. Is there any standard tutorial that I can use or template for that matter to export to IOS using Cordova? Also is Phaser 3, a viable solution for mobile games / performance wise. I really like using Phaser, but would like opinions as to the viability of using for mobile games ( IOS / Android ). Thanks for your time and God Bless...

 

Sincerely,

Sunday 

Share this post


Link to post
Share on other sites

You'll first want to verify that Cordova is running; from your html file above it will not, as you're not loading cordova.js. You can reference the Cordova helloWorld example for the basic setup of the html file.

Share this post


Link to post
Share on other sites

Hi Prob,

Thanks for the response, yes, indeed, I've added the same as above, but referencing to cordova.js to my index html file. Also, on my Iphone 5S, I see the logo of Cordova coming out, then  it goes to black screen, and I just see a small rectangle, which I believe it's my game......I'm going to try again, thanks for the response, God Bless.....

<script type="text/javascript" src="phaser.min.js"></script>

 

Share this post


Link to post
Share on other sites

You can use Safari to debug your Cordova app on a connected device (Safari > Develop > Show Web Inspector), which can help you see any errors in the console.

There is also the issue of Phaser and XHR loads on Cordova in iOS; you'll need an intermediate server to load content.  I'd recommend Ionic Webview.

Share this post


Link to post
Share on other sites

Hi Prob,

Thanks for the help, really appreciated it, yes, I went ahead and view my game installed on my Iphone 5S, via Safari - Web Dev, and I'm getting the XHR, which tries to load the sprites, but it cannot through file. But I just would like some clarification, I need to have a web server via http:// in order to build / compile my games for the app stores via Cordova or Ionic, or any other 3rd party Hybrid compilation? i understand that I needs a server on my Mac mini, for development purposes, which i did use through Mamp. I was also reading that Apple would be deprecating UIWEB in the next release of IOS, either IOS 12 or 13 in the near future, and if not mistaken Cordova uses UIWEB, but I went ahead and updated Cordova IOS through CLI to 4.5.5, and tried again to build the game and view it on my IPHONE 5S, but still nothing. I'm sorry for the many questions, but I just want to make sure that I can build / compile for IOS / Android, and don't need a server. Thanks again and God Bless....

 

Sincerely,

 

Sunday

Share this post


Link to post
Share on other sites

FYI the scaler isn't in 3.15.1, I believe it's currently slated for 3.17

If you want something to tide you over in the meantime I would suggest this plugin:

https://github.com/samme/phaser-plugin-game-scale

 

I am currently working on a Phaser 3 Cordova project. I followed this guide to get started and found it very helpful: https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/

Share this post


Link to post
Share on other sites

Hi B3L7,

 

Thanks for the help, much appreciation, yes, i follow the tutorials, and finally was able to get the game going in IOS, but with the Ionic Web https://github.com/ionic-team/cordova-plugin-ionic-webview

But one thing that concerns me, is that I've read some articles concerning the deprecation of Open GL, from Apple, starting if not mistaken from IOS 12 and on, I understand that Phaser 3 goes with WEB GL, Canvas, but what's to stop Apple from going further and going after WEBGL - CANVAS, let's not forget that they want future mobile game developers to export to Metal? I remember the goo ole days  of Flash, but that went south after Apple went afterwards, who's to say that in the near future, it will not be the same for WEB GL, especially that Web Assembly has begun. Also, the services that 3rd party offers, like Cordova, etc... for compilation, since they are compile into Hybrid, it's not Native though. I mean there are just too many if and but's, but I just want to settle in a framework that's in for the long haul. I don't know if it would be feasible for the creator of Phaser 3, to create a plug - in that would allow us developers to compile games to native / or JSB Bindings, through a donation campaign? Thanks again and God Bless....

 

Sincerely,

Sunday

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.