Make games with Superpowers — The extensible, collaborative HTML5 2D+3D game maker

Utiliser des modèles 3D

Importer des modèles

Superpowers supporte actuellement un sous-ensemble des formats de fichier OBJ (statique) et glTF (animé).

Pour l'instant, une texture unique (diffuse map) est supportée pour chaque modèle. Le support des matériaux et des shaders arrive bientôt.

Modèles glTF animés

glTF est un nouveau format supporté par le Khronos Group (les gens qui font OpenGL et Vulkan).
La plupart des outils n'ont pas un support natif pour le moment, donc il faudra exporter en COLLADA et ensuite utiliser le convertisseur COLLADA2glTF.

Les instructions suivantes partent du principe que vous utilisez Blender, mais les autres outils devraient avoir un fonctionnement similaire.

Assurez-vous d'avoir un seul mesh et un seul matériau. Votre mesh devrait être apparenté à une armature et être à l'origine en (0,0,0).

Assurez-vous que votre modèle soit dans sa bind pose sans action active.
Depuis le menu File, sélectionnez Export > Collada (Default) (.dae).
Cochez la case Triangulate.

Glissez-déposez le fichier .dae résultant sur l'exécutable du convertisseur COLLADA2glTF.
Vous obtiendrez plusieurs fichiers, nous aurons seulement besoin du .gltf et du .bin.

Répétez le processus pour chaque action que vous souhaitez exporter, en activant l'action auparavant.

Maintenant, importons votre modèle dans Superpowers. Vous trouverez un modèle exemple dans les asset packs Superpowers.

Créez un nouveau modèle 3D et cliquez sur le bouton Upload.
Sélectionnez à la fois les fichiers .gltf et .bin dans la fenêtre de sélection des fichiers (maintenir Ctrl permet de sélectionner plusieurs fichiers sous Windows).

Utilisez le bouton New pour créer une animation et chargez-la avec le bouton Upload juste à côté.

Attacher un objet à la main d'un personnage

Il est assez simple d'attacher un objet à un os animé, que ce soit une arme, un chapeau ou un sac à dos.

Utilisez simplement Sup.ModelRenderer.getBoneTransform pour obtenir la position et l'orientation globale actuelle d'un os et appliquez-la à l'acteur que vous voulez attacher.

class CharacterHandBehavior extends Sup.Behavior {

  itemActor: Sup.Actor;

  awake() {
    // Paramétrez `this.itemActor` ici
    // ou lorsque vous créez le CharacterHandBehavior
  }

  update() {
    let handTransform = this.actor.modelRenderer.getBoneTransform("Left Hand");

    this.itemActor.setPosition(handTransform.position);
    this.itemActor.setOrientation(handTransform.orientation);
  }
}
Sup.registerBehavior(CharacterHandBehavior);

Voici une petite démo. Vous pouvez télécharger le projet source et l'essayer vous-même.

Si l'objet n'est pas exactement au bon endroit, vous pouvez le décaler avec this.itemActor.moveOriented(...) ou this.itemActor.rotateLocalEulerAngles(...).