Construct 3

De EduTech Wiki
Aller à : navigation, rechercher
Construct3 est un logiciel d'édition de jeux vidéo

1 Présentation

Construct3 est un logiciel (outil auteur) de création de jeux vidéos développé par Scirra. Il fait suite à Construct 2.

Annoncé au début de l'année 2015, la version beta publique est sortie en mars de cette année-là. Construct 3 est finalement sorti plus de 2 ans plus tard, en décembre 2017.[1]

Aujourd'hui on trouve de nombreux jeux développés puis exportés sur différentes plateformes (PC, Linux, Mac, Smartphone mais aussi Xbox ou Nintendo Switch). On citera par exemple: The next Penelope, CoinOp Story, Last Moon[2] ou encore Creature Keeper ou Guinea Pig Parkour (Ayant récolté respectivement 50 000$ et 25 000$ sur Kickstarter)[3].

2 Installation

2.1 Obtenir Construct3

Construct 3 peut-être utiliser directement dans le navigateur. Il n'est pas nécessaire d'installer un logiciel pour l'utiliser même si cela est possible.

Construct3 n'a pas besoin d'accès à internet permanent pour fonctionner. Il est nécessaire d'être connecté pour le premier chargement de Construct 3. Après ce chargement, une notification apparaitra pour prévenir que Construct 3 peut maintenant être utilisé "hors-ligne".

2.2 Compte d'utilisateur

Il est possible d'utiliser Construct3 en tant qu'invité cependant, créer un compte d'utilisateur permettra à la personne identifiée de créer jusqu'à 50 évènements contre seulement 25 en tant qu'invité (en version gratuite).

Il est nécessaire d'être identifié pour acheter Construct 3 et avoir accès à de nombreux avantages.

2.3 Spécifications techniques

  • Smartphone et tablette : Construct 3 peut-être utilisé sur téléphones (non-recommandé) et tablettes
  • Connexion à internet : Comme évoqué précédemment, il faut une connexion à Internet lors du premier chargement.
  • Navigateurs supportés : Google Chrome, Opera, Yandex (Avec chromium 57+), Firefox (55+), Dafari (13+) et Microsoft Edge (79+).
  • Systèmes d'exploitation : Windows, Mac, Linux, Chrome OS, Android et iOs.

3 Utilisation

3.1 Interface

Page d'accueil d'un nouveau projet sur Construct 3

On y trouve la gestion des propriétés à gauche, la gestion des calques et une arborescence des fichiers à droite et des onglets pour passer d'un fichier à l'autre en haut.

3.2 Fonctionnalités

Construct 3 présente des centaines de fonctionnalités. On peut citer les exemples suivants :

  • Création de jeux par blocs
  • Association des blocs avec du code Javascript
  • Prévisualisation du jeu en cours de développement
  • Création d'animation (pour les cinématiques par exemple)
  • Création d'images en pixels
  • Utilisation de calques
  • Ajout d'audio ou de vidéo
  • Fonctions variées comme le "pathfinding" permettant de trouver un chemin entre 2 objets.

3.3 Nouveautés par rapport à Construct 2

Construct 3 apporte plusieurs éléments nouveaux.[4]

3.4 Tutoriels

Les tutoriels des fonctionnalités de base de Construct sont disponibles sur la page de Construct 2. Ces fonctionnalités ont peu évoluées avec la nouvelle version mais une mise à jour sera progressivement disponible ici avec une adaptation de ces tutoriels pour Construct 3.

3.4.1 Créer un projet ou ouvrir un projet existant

3.4.1.1 Ouvrir un projet existant

Pour ouvrir un projet existant, il faut se rendre sur la page d'édition de Construct et cliquer sur "Cloud" ou Fichier" en haut de la page si vous voulez avoir accès à des fichiers enregistrés en local ou sur le cloud. Vous pouvez aussi naviguer parmi les projets existants et les modèles proposés par le site directement sur la page.

Page "d'édition" de Construct 3 permettant d'ouvrir des fichiers (nouveaux ou enregistrés)

Sur l'interface qui s'ouvre alors, se trouvent les éléments suivants : l'onglet des propriétés, un bouton de prévisualisation, les différents onglets de vos feuilles d'évènements et de vos scènes, l'espace de création ou l'espace de programmation, l'arborescence du dossier du projet qui contient les différents éléments insérés sur la page et l'organisation des calques.

Ecran de Construct 3
Les éléments qui constituent l'interface de Construct 3

3.4.1.2 Créer un projet

Pour créer une nouveau projet, il faut se rendre sur la page d'édition de Construct et cliquer sur "Nouveau projet" en haut de la page. Une fenêtre s'ouvre alors dans laquelle il faut indiqué le nom du projet mais aussi choisir certains réglages. C'est le moment de définir sur quel support le jeu sortira pour adapter tout de suite la taille et l'orientation de la fenêtre de jeu. Ces paramètres sont modifiables à tous moments.

Fenêtre qui s'ouvre à la création d'un nouveau projet Construct 3

3.4.2 Créer une scène et sa feuille d'évènements (Layout et Event Sheet)

A la création d'un nouveau projet, "la scène 1" et la "feuille d'Evènements 1" associée sont automatique créés dans la partie "projet" en haut à droite de la fenêtre. Vous pouvez en ajouter de nouveau en faisant clic droit sur "scènes" ou sur "Feuille d'Evènements" puis "Ajouter ...". Les nouvelles scènes et feuille d'évènements s'afficheront à la suite des onglets déjà présent en haut de la page. Vous pouvez les renommer pour vous y retrouver plus facilement.

Les feuilles d'évènements doivent être associées à des scènes. Ce sont elles qui créent les interactions entre le joueurs et le jeu. Vous pouvez choisir quel feuille d'évènement est associée à la scène dans l'onglet propriétés.

Vous pouvez utiliser la même feuille d'évènement pour plusieurs scènes. Par contre, vous ne pouvez pas associer plusieurs feuilles d'évènements à une scène.

Menu pour associer une feuille d'évènement à une scène dans Construct 3
Association feuille d'évènements et scène

3.4.3 La scène

Une scène correspond à ce que le joueur pourra faire et voir dans le jeu. Pour cela, il est possible de créer de nombreux "objets" sur la scène en faisant clic droit, "Insérer un nouvel objet". Une fenêtre s'ouvre alors avec tous les types d'objets qu'il est possible d'ajouter.

Liste (part1) des objets que l'on peut créer dans Construct 3
Fenêtre de choix du type d'objets à ajouter.


3.4.3.1 Les éléments de contrôle de formulaire

Ces éléments peuvent servir à implémenter des formulaires de création de profils par exemple ou être affiché pour donner une information mais ils peuvent aussi servir à la mécanique du jeu.

Voici quelques exemples d'utilisation :

  • La barre coulissante peut permettre à un utilisateur de sélectionner une force de projection dans un jeu de mini-golf.
  • La barre de progression sera très utile pour afficher la progression de la construction d'un bâtiment de stratégie.
  • Les boutons peuvent être utilisés dans tous les types de jeu pour des validations ou des choix ou pour lancer les niveaux .
  • La liste peut permettre au joueur de choisir le bâtiment qu'il souhaiterait construire à l'emplacement désigné.
  • La saisie de texte peut permettre d'entrer un nom de personnage mais aussi une réponse à une question (qui sera ensuite comparer à une réponse "cible")
  • Le sélecteur de fichier peut permettre à l'utilisateur d'importer des fichiers de tout type comme un avatar par exemple.
  • L'iframe permet d'afficher une page web.

3.4.3.2 Les éléments de données et de stockage

Ces objets seront disponibles pour l'intégralité du jeu. Ils permettent de stocker des données différentes façons. On y trouve notamment des formats d'échanges de données comme le JSON et le XML.

3.4.3.3 Les éléments généraux

Ce sont les éléments visuels que l'on peut inclure sur une scène pour créer un décor, une ambiance, des personnages ou des éléments interactifs. Les éléments les plus fréquemment utilisés sont l'arrière plan répétés, le Sprite, le texte et le tuilage.

L'arrière plan répété

Cet outil permet de dessiner ou d'importer un arrière plan de n'importe quelle taille. Il sera ensuite répété (aussi bien horizontalement que verticalement) pour couvrir l'ensemble de la scène.

Le sprite

Il correspond à un élément rectangulaire, dont certaines parties peuvent être transparentes, qui peut bouger dans la scène et être animé. Il permet notamment d'afficher des personnages ou des objets.

Dans Construct, le sprite peut être dessiné directement depuis la fenêtre de sprite ou peut-être importé depuis un fichier externe. Il est possible de trouver de nombreux design sur le forum de Construct où des contributeurs partagent leurs créations.

Outil de création et d'animation des sprites sur Construct3
Outil de création et d'animation des sprites sur Construct3

A gauche apparaissent les outils de création ou de modification des sprites. A droite et en bas, on trouve les outils concernant l'animation du sprite.

L'animation du sprite :

  • Sélectionner l'animation a créer dans la fenêtre de droite, ici, Animation 1.
  • Importer ou créer votre sprite d'origine .
  • Ajouter des "frames" dans la fenêtre en bas.
  • Importer ou créer une image légèrement modifiée sur les différentes frames.

Il est possible de régler certains paramètre de l'animation en bas à droite. On y trouve la vitesse d'animation (en images par seconde), la possibilité de "boucler" c'est à dire de répéter l'animation indéfiniment, le nombre de répétitions de l'animation et la possibilité d'activer "Ping Pong" c'est à dire de jouer les différentes "frames" dans un sens puis dans l'autre.

Il est aussi possible d'importer des "sprites sheet" qui peuvent être obtenues de différentes manières comme la transformation d'un GIF par exemple.

Le tuilage

Il permet d'inclure des éléments de décor en sélectionnant des "carrés" sur une feuille de décors importée ou créée.

3.4.3.4 Les éléments de monétisation

Ces éléments correspondent à l'implémentation d'achats en jeu ou de publicités.

3.4.3.5 Les médias

Cela inclut les images, les sons, les musiques et les vidéos qui seront ajoutés dans le jeu.

Attention, il ne s'agit pas ici d'inclure le fichier audio ou vidéo mais d'indiquer au jeu qu'il y aura des sons, des images ou des vidéos. L'import de fichier doit se faire via le menu "projet" présent à droite de l'écran dans Construct. Il faudra pour cela faire clic droit sur le bon dossier "sons", "musiques" ou "vidéos" puis cliquer sur "importer des ...". Il sera alors possible d'importer votre fichier et l'appeler dans la feuille d'évènement.

Fenêtre de gestion des fichiers du projet en cours
Fenêtre de gestion des fichiers du projet en cours - Construct 3

Certains formats ne sont pas bien supporter lors de l'export du projet. C'est notamment le cas du MP3 et du AAC, qu'il faudra remplacer par du Webm. [5]

3.4.4 La feuille d'évènement

Lors de la création de la scène, il faudra y associer une feuille d'évènement. La feuille d'évènement associée peut-être une nouvelle feuille créée en même temps que la scène ou une feuille d'évènement existante. Pour choisir la feuille d'évènement à lier, il faut aller dans les propriétés de la scène en haut à gauche.

Liaison feuille d'évènement Construct 3
Liaison feuille d'évènement Construct 3

Au départ, la feuille d'évènement est vierge. En cliquant sur ajouter un évènement, une fenêtre apparait.

Fenêtre d'ajout de nouveaux évènements dans Construct 3
Fenêtre d'ajout de nouveaux évènements dans Construct 3

Sur cette fenêtre apparaissent les évènements "système" mais aussi tous les objets qui ont été ajoutés sur la scène correspondante. Suivant les type d'objet, les évènements possibles seront différents. Pour les évènements du système, il peut y avoir des conditions liées à la scène comme au démarrage ou à la fin de la scène, à chaque tick (c'est à dire "toujours"), la mise en place de boucle ou la comparaison de variables. Chaque élément est décrit en haut de la fenêtre.

Exemple d'évènements "système" que l'on peut ajouté dans Construct 3
Exemple d'évènements "système" que l'on peut ajouté dans Construct 3

Lorsque l'on choisit la condition, c'est à dire lorsque l'on clique sur l'un des éléments affichés précédemment, la feuille d'évènement se met à jour.

Feuille d'évènement de Construct 3 avec la condition "A chaque tick"
Feuille d'évènement de Construct 3 avec la condition "A chaque tick"

Ce que l'on vient de choisir correspond à la condition de notre évènement. Tant que cette condition est vrai, il se passera quelque chose. La deuxième étape pour la création de l'évènement est donc d'ajouter une action en cliquant sur la barre bleue à droite "ajouter une action". Comme précédemment une fenêtre apparait avec la liste des actions possibles. Il faut ainsi choisir l'objet concerné par l'action puis ce qu'il fait. Je peux par exemple choisir

Exemple d'évènement dans Construct 3
Exemple d'évènement dans Construct 3

L'exemple ci-dessus dit : "A chaque tick, Timmy (le personnage) a une position en X définie à sa position (Timmy.X) + 1 pixel", concrètement, cela veut dire que Timmy va progresser sur l'axe X (l'axe horizontal) : il va donc avancer.

Les possibilités d'évènements sont très nombreuses et ne pourront pas toutes être expliquées ici. La meilleure solution est de tester mais vous trouverez plus bas quelques points importants qui peuvent faire gagner du temps.

3.4.4.1 Les comportements

Dans l'exemple précédent, l'évènement crée permettait de faire avancer Timmy mais il existe en fait des comportements qui auraient permis de déplacer Timmy plus facilement. Ces comportements peuvent être ajoutés sur la scène lors de la sélection du Sprite. Dans la barre de propriétés du sprite (située à gauche par défaut), il y a une section comportement. Il est alors possible de cliquer sur "ajouter/éditer un comportement". Une fenêtre s'ouvre avec la liste des comportements déjà affectés à ce sprite.

Ajout de comportements sur Construct 3
Ajout de comportements sur Construct 3

Quelques comportements intéressants :

  • Solide : Un objet avec le comportement solide ne pas pas être traversé par un autre objet (sprite)
  • Saut-à-travers : Ce comportement permet à un objet solide d'être traversé par en-dessous par un sprite.
  • Défiler vers : Ce comportement permet d'accrocher la "caméra" à un objet. La vue est centrée sur cet objet.
  • Limité à la scène : Ce comportement empêche l'objet de sortir de la scène.
  • Mouvements : il existe de nombreux comportements de mouvements : déplacer vers permet de déplacer un objet vers un point précis ou un autre objet, projectile déplace un objet suivant un angle, 8 directions, plateforme et mouvement en grille sont des déplacements classiques souvent actionnés par le clavier.

Une fois attribué au Sprite, les actions et les conditions liées à ce comportement s'ajouteront à la liste d'actions et de conditions possibles dans la feuille d'évènement.

Exemple d'actions ajoutées par le comportement "déplacer vers" dans Construct 3
Exemple d'actions ajoutées par le comportement "déplacer vers" dans Construct 3

3.4.4.2 Les effets

De la même manière, des effets peuvent être ajoutés à tous les objets présents sur votre scène : saturation, luminosité, couleurs ... ces effets peuvent s'appliquer immédiatement (en définissant directement le paramètre) ou alors être déclenchés sur la feuille d'évènements lorsque quelque chose se passe. Ils peuvent aussi apparaitre dans les conditions. Par exemple, le personnage rencontre un élément ce qui règle la luminosité à 50% (1er évènement avec l'effet comme action). Si la luminosité est à 50% , le système fait apparaitre un élément (2ème évènement avec l'effet comme condition).

3.4.4.3 Les positions et paramètres des objets

Comme c'était le cas dans l'exemple précédent, la position mais aussi tous les paramètres réglables via la feuille d'évènements par exemple peuvent être définis de manière relative c'est à dire par rapport au même paramètre d'un autre objet (voire même par rapport au réglage d'un autre paramètre).

Pour cela, lorsqu'il faut rentrer le paramètre en question, au lieu d'indiquer un nombre (en pixel), j'indique le nom de l'objet en question puis je mets un point et enfin le paramètre. Construct propose de lui même la liste des objets présents et des paramètres qu'il est possible d'indiquer après le point. Il est aussi possible d'y ajouter une formule mathématique.

Exemple de position relative dans Construct 3
Exemple de position relative dans Construct 3

Dans l'exemple ci-dessus, je place Timmy au même X que le Voleur (c'est à dire à la même position sur l'axe horizontal) mais je le décale de 200 pixels sur l'axe Y.

3.5 Liens

Le site officiel de Construct 3