Keolot Phaser Editor 2D

Environnement de développement visuel pour jeux 2D sur Phaser JS open source

Keolot Phaser Editor est un environnement de développement visuel gratuit pour les jeux 2D par navigateur, basé sur le moteur open source Phaser et intégrant la physique Matter JS. L'application permet de créer et d'éditer visuellement des scènes, des objets de jeu, des animations, des pistes audio et des touches, ainsi que d'écrire la logique de jeu en JavaScript, avec la possibilité de connecter des plugins et des scripts globaux. Grâce à la représentation visuelle, la création d'un design de jeu est considérablement simplifiée par rapport à une utilisation directe de la bibliothèque Phaser.

L'éditeur interactif vous permet de créer visuellement un design, de déplacer des objets et d'en ajouter de nouveaux. Vous pouvez naviguer dans le design à la souris et à l'aide des éléments d'interface, notamment le réglage du zoom. Des règles avec coordonnées facilitent la navigation. Il est possible d'ajouter, de copier, de modifier et de supprimer visuellement les objets de jeu Phaser suivants :

- Image

- Texte

- Sprite

- Particules

- Vidéo

- Rectangle

- TileSprite

Outre le mode éditeur interactif, deux modes d'aperçu du jeu sont disponibles :

1) Aperçu de la scène actuelle. Vous pouvez mettre le jeu en pause et le reprendre, ainsi qu'interagir avec les objets et modifier leurs paramètres dans l'inspecteur en temps réel. En mode aperçu d'une scène spécifique, vous ne pouvez pas passer d'une scène à l'autre ; il s'agit de la visualisation d'une scène spécifique. De plus, le mode aperçu de scène est lancé en mode physique de débogage.

2) Aperçu du jeu : Lancement du jeu tel quel, sans possibilité d'inspecter les objets ni de mettre la lecture en pause.

Une console est disponible pour le débogage et la visualisation des erreurs.

L'inspecteur d'objets vous permet de définir les paramètres des objets du jeu (par exemple, coordonnées X et Y, angle, opacité, texture, profondeur, etc.), d'ajuster les paramètres physiques, les paramètres des particules et leur apparence (par exemple, durée de vie, fréquence, vitesse, alpha, etc.) et d'ajuster d'autres propriétés dans les panneaux, comme le choix des types d'animation et les paramètres audio.

Les objets Image et Sprite peuvent être transformés en objets Matter physiques directement dans l'inspecteur d'objets en un clic. Vous pouvez spécifier des paramètres physiques (par exemple, densité, forme de collision, catégorie de collision, restitution, gravité ignorée, etc.). Dans l'éditeur de scripts, vous pouvez créer et ajuster d'autres propriétés et objets de jeu, comme si vous travailliez directement dans Phaser, mais l'éditeur visuel fournit tout ce dont vous avez besoin.

L'environnement de développement prend en charge la création visuelle des ressources préchargées suivantes :

- Image (images bitmap JPG, PNG, WEBP, AVIF, GIF, SVG)

- SVG (images vectorielles)

- Audio (MP3, WAV, OGG, M4A)

- Police (TTF, OTF)

- Vidéo (MP4, WEBM)

- Spritesheet

- Atlas

- Animation

- BitmapFont

- JSON

- TXT

- XML

- GLSL

- TilemapTiledJSON

Dans l'inspecteur de scène, vous pouvez déplacer les scènes vers le haut ou vers le bas, modifier la couleur d'arrière-plan locale, définir des limites physiques standard en un clic et définir des scripts pour les principales fonctions du jeu Phaser :

- Init()

- Preload()

- Create()

- Update(time, delta)

Vous pouvez également ajouter un script personnalisé pour la scène. Par exemple, avec vos propres fonctions, il sera ajouté au code du jeu avant l'initialisation. Si vous écrivez l'une des fonctions Init, Preload, Create ou Update dans Custom, elle sera ignorée, car des sections dédiées sont disponibles.

L'éditeur de texte avec coloration syntaxique vous permet d'éditer des scripts (JS, TS) et des fichiers texte (JSON, TXT). L'éditeur de texte prend en charge les fonctions de base, ce qui est largement suffisant. Cependant, pour une manipulation plus aisée du code, il est recommandé d'utiliser votre éditeur de code tiers préféré pour créer et éditer les fichiers de script. Pour l'écriture de scripts, consultez la documentation officielle de la bibliothèque Phaser 3.90.

L'éditeur de code contient également des modèles de code pour des situations courantes, telles que l'ajout d'un événement à un objet, les animations interpolées, la création d'un objet physique personnalisé, les événements clés, la gestion des collisions, etc.

Le projet créé peut être enregistré et exporté au format ZIP, et le jeu final peut être exporté au format ZIP pour être lancé dans un navigateur.