Hi,
I am trying to use Phaser 3 inside a Cordova App.
index.html :
<head>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@samme/colors@1.2.0/dist/colors.umd.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-firestore.js"></script>
<script type="text/javascript" src="configuration.js"></script>
<script type="text/javascript" src="intro.js"></script>
</head>
configuration.js
window.onload = function() {
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 1067//600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: [intro]
};
game= new Phaser.Game(config);
};
and finally
intro.js
class intro extends Phaser.Scene {
constructor(){
super({
key: 'intro',
pack: {
files: [{
type: 'plugin',
key: 'rexwebfontloaderplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwebfontloaderplugin.min.js',
start: true
}]
}
});
}
preload () {
this.plugins.get('rexwebfontloaderplugin').addToScene(this);
var WebFontConfig = {
google: {
families: ['Luckiest Guy']
}
};
this.load.rexWebFont(WebFontConfig);
this.load.image('intro', 'assets/images/intro.jpg');
}
create () {
const decors = this.add.image(400, 500, 'intro');
}
update () {
}
}
if i do a cordova run browser, it’s all good :
but if i do a cordova run android nothing appears !
any advice please ?
THANK YOU !
sorry to bother you, but i need an answer please, i’m blocked
thx guys !
First hit when googling ‘cordova window onload’:
window.onload is only for desktop browser, for hybrid application use,
document.addEventListener("deviceready", function() {
}, false);
well, after few tests, i have the same problem :
To be sure my config is working fine, i’ve launch the cordova demo, and it’s working fine :
But when i try just this code, who is very simple too :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>wanted</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@samme/colors@1.2.0/dist/colors.umd.js"></script>
</head>
<body>
<script type="text/javascript" src="configuration.js"></script>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>
configuration.js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 1067//600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: [intro]
};
game= new Phaser.Game(config);
}
and finally :
class intro extends Phaser.Scene {
constructor(){
super({
key: 'intro',
pack: {
files: [{
type: 'plugin',
key: 'rexwebfontloaderplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexwebfontloaderplugin.min.js',
start: true
}]
}
});
}
preload () {
this.plugins.get('rexwebfontloaderplugin').addToScene(this);
var WebFontConfig = {
google: {
families: ['Luckiest Guy']
}
};
this.load.rexWebFont(WebFontConfig);
this.load.image('intro', 'assets/images/intro.jpg');
}
create () {
const decors = this.add.image(400, 500, 'intro');
}
update () {
}
}
i have a white screen
any other idea please ?
thx !
I have no idea. But it seems pretty clear it has nothing to do with Phaser. I suggest trying StackOverflow, you’re bound to get a lot more reactions.
samme
July 7, 2021, 4:06pm
7
Change //cdn.jsdelivr.net to https://cdn.jsdelivr.net.
nice try, but same result
I clear the code again, so now, he is very very simple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>wanted</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script type="text/javascript" src="configuration.js"></script>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>
configuration.js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 1067//600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: [intro]
};
game= new Phaser.Game(config);
}
and intro.js
class intro extends Phaser.Scene {
constructor(){
super({
key: 'intro'
});
}
preload () {
this.load.image('intro', 'assets/images/intro.jpg');
}
create () {
const decors = this.add.image(400, 500, 'intro');
}
update () {
}
}
samme
July 7, 2021, 7:45pm
9
Must be some way to see runtime errors.
it must be, because even in the demo, they do some “console.log” so we should see them in the debug zone…
but i don’t know how to see them !!! (shame)
Milton
July 8, 2021, 7:09am
11
adb logcat will show everthing the emulator has to tell you
Bon alors, tenez vous bien, mais le probleme venait du fait que j’appelle en cdn la librairie phaser !
J’ai pas réussit à faire marcher logcat, juste je construit le projet en “cordova run browser” à la place de “cordova run android” pour avoir accès à la console F12 !
Maintenant, j’ai un problème, il ne reconnait pas le chemin de l’image, mais au moins je suis rassuré, le phaser est interprété
Merci les gens !
Milton
July 13, 2021, 6:58pm
13
So what happened when you typed ‘adb logcat’? If you have an Android emulator running, adb should be working…
I’m sure there are better ways (read the docs).