Discussion :

[lludol]

Bonsoir,

Je suis entrain de développer un jeu avec un pote. Nous utilisons AngularJS et Phaser.io pour le front-end et nodeJS pour le back-end.

Nous avons un problème avec Phaser à cause d'AngularJS.
Notre jeu est sur la page : game.html. Cette page a un controller, un template et utilise une factory pour "instancier" le jeu.

Dans le template, nous avons juste ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="game"></div>
<a href="#/unepage">Retour</a>

Dans le controller, nous appelons une factory qui va s'occuper d'initialiser le jeu :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var width = XXXX;
var height = XXXX;
var game = null;
function preload() {
    // du code ...
}
function create() {
    // du code ...
}
// encore du code ...
init: function() {
    game = new Phaser.Game(WIDTH, HEIGHT, Phaser.AUTO, 'game', { preload: preload, create: create });
}
destroy: function() {
    game.destroy();
}

Le problème est simple, si on clique sur le lien "Retour" et qu'en suite, sur l'autre page on clique sur un lien qui nous ramène sur la page "Game" (celle ou y a la DIV et ou l'on crée l'instance de Phaser), cela recree une 2eme instance de Phaser !

Pour essayer de régler ça, j'ai regardé sur le net, et ils disent d'utiliser la methode "destroy" de Phaser.Game.
Pour l'appeler, j'utilise ceci dans le controller de la page game :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$scope.$on('$destroy', function() {
    gameFact.destroy();
});

Ça appelle bien la fonction quand on quitte la page (quand on clique sur "Retour"), ça appelle bien la fonction destroy du gameFact et donc le destroy de Phaser mais ça change rien, quand on fera encore un new Phaser.Game, ça va recréer une instance.

En plus, au bout de X instances créer, Google Chrome nous dit qu'on a plus le droit d'en créer :

Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6).

Il parle de l'Audio, mais on a pas de son dans notre jeu ...

Comment corriger ce problème ??

Merci d'avance pour vos réponses.

PS : On veut pas utiliser d'Iframe (une personne avait conseillée ça sur forum)...

[Marco46]

Ton problème est plus lié à Phaser qu'à Angular mais un contournement serait d'instancier ton objet Game non pas dans une méthode de la factory mais dans l'instanciation de la factory elle même.

Par exemple (désolé pour l'indentation dégueu) :

Actuellement tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
(function (angular) {
 
    MyFactory.$inject = ['dep1', 'dep2'];
    function MyFactory(dep1, dep2) {
 
        var instance = {
		width: XXXX,
		height: XXXX,
		game: null,
		preload: function() {
			// du code ...
		},
		create: function() {
			// du code ...
		},
		// encore du code ...
		init: function() {
			game = new Phaser.Game(WIDTH, HEIGHT, Phaser.AUTO, 'game', { preload: preload, create: create });
		},
		destroy: function() {
			game.destroy();
		}
        };
 
        return instance;
    }
 
    angular
        .module('my.module')
        .factory('MyFactory', MyFactory);
 
})(angular);

Je te propose de faire plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
(function (angular) {
 
    MyFactory.$inject = ['dep1', 'dep2'];
    function MyFactory(dep1, dep2) {
 
        var instance = {
		width: XXXX,
		height: XXXX,
		game: null,
		preload: function() {
			// du code ...
		},
		create: function() {
			// du code ...
		},
		destroy: function() {
			game.destroy();
		}
        };
 
	instance.game = new Phaser.Game(WIDTH, HEIGHT, Phaser.AUTO, 'game', { preload: preload, create: create });
 
        return instance;
    }
 
    angular
        .module('my.module')
        .factory('MyFactory', MyFactory);
 
})(angular);

[Marco46]

L'idée c'est donc de n'instancier l'objet game qu'une seule fois pour l'application en cours.

[lludol]

Bonjour,

Merci pour ton aide.

Au niveau de l'instance, ça marche très bien, elle est bien créée qu'une seule fois.

Mais au niveau du jeu en lui même, cela ne marche pas.
Quand on arrive dans le jeu pour la 1ère fois, on a la map qui s'affiche comme il faut. Mais si on reviens dans le jeu plus tard (avec le bouton "retour", etc), le Phaser fonctionne pas : il est tout "blanc".

J'ai essayé d'appeler à nouveau les fonctions "preload" (on load la sprite) et "create" (on l'affiche) mais cela ne change rien.

Je vais essayer de voir du coté de la Doc Phaser.


Si vous avez des idées n'hésitez pas.