3ddy Posted April 12, 2016 Share Posted April 12, 2016 Hello, I have some projects in Phaser working on web. I wanted to try PhoneGap (need some of plugins). I've started from converting some simple project to app (without any additional plugins yet) and I run into problems. APK is builded without any errors on PhoneGap Cloud Builder, but apk after install doesn't show any of Phaser content. I'm installing app from .apk file, not from Google Play/Market or whatever it is currently called - in short not from store. I have PhoneGap HelloWorld example working. It consists of: empty .cordova directory empty hooks directory empty platforms directory empty plugins directory www directory described later config.xml I didn't change anything in config.xml, but here it is : <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="pl.myapp.sample" version="1.0.0"> <name>appSample</name> <description>Hello World sample application that responds to the deviceready event.</description> <author href="http://phonegap.com" email="[email protected]">PhoneGap Team</author> <content src="index.html"/> <preference name="DisallowOverscroll" value="true"/> <preference name="android-minSdkVersion" value="14"/> <plugin name="cordova-plugin-battery-status" source="npm"/> <plugin name="cordova-plugin-camera" source="npm"/> <plugin name="cordova-plugin-media-capture" source="npm"/> <plugin name="cordova-plugin-console" source="npm"/> <plugin name="cordova-plugin-contacts" source="npm"/> <plugin name="cordova-plugin-device" source="npm"/> <plugin name="cordova-plugin-device-motion" source="npm"/> <plugin name="cordova-plugin-device-orientation" source="npm"/> <plugin name="cordova-plugin-dialogs" source="npm"/> <plugin name="cordova-plugin-file" source="npm"/> <plugin name="cordova-plugin-file-transfer" source="npm"/> <plugin name="cordova-plugin-geolocation" source="npm"/> <plugin name="cordova-plugin-globalization" source="npm"/> <plugin name="cordova-plugin-inappbrowser" source="npm"/> <plugin name="cordova-plugin-media" source="npm"/> <plugin name="cordova-plugin-network-information" source="npm"/> <plugin name="cordova-plugin-splashscreen" source="npm"/> <plugin name="cordova-plugin-statusbar" source="npm"/> <plugin name="cordova-plugin-vibration" source="npm"/> <plugin name="cordova-plugin-whitelist" source="npm"/> <icon src="icon.png"/> <platform name="android"> <icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/> <icon src="www/res/icon/android/drawable-mdpi-icon.png" density="mdpi"/> <icon src="www/res/icon/android/drawable-hdpi-icon.png" density="hdpi"/> <icon src="www/res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/> <icon src="www/res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/> <icon src="www/res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> <splash src="www/res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/> <splash src="www/res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/> <splash src="www/res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/> <splash src="www/res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/> <splash src="www/res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/> <splash src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/> <splash src="www/res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/> <splash src="www/res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/> <splash src="www/res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/> <splash src="www/res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/> <splash src="www/res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/> <splash src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/> </platform> <platform name="ios"> <icon src="www/res/icon/ios/icon.png" platform="ios" width="57" height="57"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="114" height="114"/> <icon src="www/res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="80" height="80"/> <icon src="www/res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="100" height="100"/> <icon src="www/res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="120" height="120"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="180" height="180"/> <icon src="www/res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="144" height="144"/> <icon src="www/res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="152" height="152"/> <icon src="www/res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="58" height="58"/> <icon src="www/res/icon/ios/[email protected]" platform="ios" width="87" height="87"/> <splash src="www/res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/> <splash src="www/res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/> <splash src="www/res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/> <splash src="www/res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/> <splash src="www/res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/> <splash src="www/res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/> <splash src="www/res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/> <splash src="www/res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/> <splash src="www/res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/> <splash src="www/res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/> </platform> <platform name="wp8"> <icon src="www/res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/> <icon src="www/res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/> <splash src="www/res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/> </platform> <platform name="windows"> <icon src="www/res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/> <icon src="www/res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/> <icon src="www/res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/> <splash src="www/res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/> <icon src="www/res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/> <icon src="www/res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/> <icon src="www/res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/> <icon src="www/res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/> <icon src="www/res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/> <icon src="www/res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/> <icon src="www/res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/> <icon src="www/res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/> <icon src="www/res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/> <icon src="www/res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/> <splash src="www/res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/> </platform> <access origin="*"/> <allow-intent href="http://*/*"/> <allow-intent href="https://*/*"/> <allow-intent href="tel:*"/> <allow-intent href="sms:*"/> <allow-intent href="mailto:*"/> <allow-intent href="geo:*"/> <platform name="android"> <allow-intent href="market:*"/> </platform> <platform name="ios"> <allow-intent href="itms:*"/> <allow-intent href="itms-apps:*"/> </platform> </widget> In www directory I have: index.html spec.html (default from PhoneGap) config.xml copied from previous directory phaser.min.js and phaser.map some assets from my project (.xml, .json, .jpg) directories for: css, img, js, res, spec index.html: <!DOCTYPE html> <!-- Copyright (c) 2012-2016 Adobe Systems Incorporated. All rights reserved. Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> <!-- This is a wide open CSP declaration. To lock this down for production, see below. --> <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> <!-- Good default declaration: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src * Enable eval(): add 'unsafe-eval' to default-src * Create your own at http://cspisawesome.com --> <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> --> <link rel="stylesheet" type="text/css" href="css/index.css" /> <style type="text/css"> body{ background: #ffffff; padding:0px; margin:0px; } </style> <title>Hello World</title> </head> <body> <div class="app"> <h1>Hello PhoneGap N00B</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script src="phaser.min.js"></script> <script src = "js/preload.js"></script> <script src = "js/intro.js"></script> <script type="text/javascript"> app.initialize(); var game = new Phaser.Game(1920, 1080); game.state.add('Preload', MyGame.preload) game.state.add('Intro', MyGame.intro); game.state.start('Preload'); </script> </body> </html> In js directory I have: index.js (default from PhoneGap example) intro.js (my project state) preload.js (my project state) index.js: /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); //console.log('Received Event: ' + id); } }; What I get after installing my app is just HelloWorld, no states are loading. When I emulate that project using PhoneGap launcher App it looks the same, but when I connect on same ip (generated through PhoneGap Desktop app) using web then states are loaded properly. I've uploaded my files in a .zip to PhoneGap Cloud in order to build. Everything from www directory was added to .zip file and sent - there were no compiling errors (I didn't attach any key, but I don't want to upload it to store yet, just custom install from .apk). Any help appreciated. EDIT: differencies that I see in web and emulation on android device : -web is displaying my states correctly, but on PhoneGap part, where it is trying to connect to the device it is stuck (all the time there is displayed "Connecting to device") -while on mobile emulation it is correctly connecting to device, but nothing from my project is displayed If you know about some working tutorials that I can follow to export Phaser app with states to PhoneGap - they are welcome. Link to comment Share on other sites More sharing options...
jim716 Posted April 12, 2016 Share Posted April 12, 2016 Not very familiar with the PhoneGap Cloud workflow, but I've used Cordova quite a bit. In looking at your code, my initial suggestion would be to move the Phaser code into the onDeviceReady method (in index.js). The 'deviceready' event is fired when Cordova and its plugins are initialized. So in general, you'll want to wait to execute your own code until this event is fired. I learned to develop for Cordova with Phaser using Intel XDK, which is a Cordova IDE and cloud-build service (probably a lot like PhoneGap). Intel XDK includes a Phaser template and does have some tutorials in their documentation - most of which should apply to Cordova in general. Intel XDK also includes the Ripple Emulator, which runs Cordova apps in a simulated device on your PC/Mac. Although it doesn't work with all the Cordova plugins, I found it invaluable when learning because of how quickly you can test your code. Take a look - I'm sure you can probably use Ripple with PhoneGap as well. 3ddy 1 Link to comment Share on other sites More sharing options...
3ddy Posted April 13, 2016 Author Share Posted April 13, 2016 14 hours ago, jim716 said: Not very familiar with the PhoneGap Cloud workflow, but I've used Cordova quite a bit. In looking at your code, my initial suggestion would be to move the Phaser code into the onDeviceReady method (in index.js). The 'deviceready' event is fired when Cordova and its plugins are initialized. So in general, you'll want to wait to execute your own code until this event is fired. I learned to develop for Cordova with Phaser using Intel XDK, which is a Cordova IDE and cloud-build service (probably a lot like PhoneGap). Intel XDK includes a Phaser template and does have some tutorials in their documentation - most of which should apply to Cordova in general. Intel XDK also includes the Ripple Emulator, which runs Cordova apps in a simulated device on your PC/Mac. Although it doesn't work with all the Cordova plugins, I found it invaluable when learning because of how quickly you can test your code. Take a look - I'm sure you can probably use Ripple with PhoneGap as well. Thanks for reply, I tried to switch to Intel XDK but also encountered some troubles - can you please have a look on my other topic? Link to comment Share on other sites More sharing options...
jim716 Posted April 13, 2016 Share Posted April 13, 2016 Took a look and the answer from drhayes is your answer... Link to comment Share on other sites More sharing options...
Recommended Posts