Auteur/autrice : Patrick Gelinaud

Dans un premier temps tu vas utiliser Inkscape pour dessiner tes plateformes.

Dessiner les plateformes dans Inkscape

Ouvre Inkscape

En bas à droite de l’écran de Inkscape, utilise le bouton pour modifier les préférences du document ou dans la barre menu Fichier puis Propriétés du document :

Tu comprendras plus tard dans Construct quand tu dessineras tes plateformes. Tu crées un espace de travail de trois sur trois tuiles (tiles) afin d’obtenir un canevas de neuf tuiles :
– une tuile haut à gauche pour représenter la partie haut gauche de la plateforme
– une tuile haut à droite pour représenter la partie haut gauche de la plateforme
– une tuile haut au milieu pour représenter la partie haut de la plateforme
– trois tuiles en dessous au milieu pour représenter le corps de la plateforme
– trois tuiles en bas pour représenter le bas de la tuile

Puis dans les ongles de « Propriétés du document » choisis « Grilles » :

Puis clic sur le bouton « nouveau » :

Puis saisie la taille d’une tuile 32×32 (tile) en pixel.

Tu disposes d’un espace de 9 cases (tuiles ou tile en anglais)

Quelques outils pour mieux dessiner

Quand la grille est sélectionnée, les formes que tu dessines viennent se coller sur la grille.

Tu peux ouvrir ces deux onglets « Objets » et « Fond et contour » par le Menu puis Objet.

Ces deux fenêtres t’aident à mieux gérer les objets que tu dessines afin de les placer dans le bon ordre et de leur donner les bonnes couleurs.

Dessine par exemple par deux rectangles, l’herbe et le mur de ta plateforme.

Tu peux si tu le souhaites ajuster la couleur de ta forme :

Tu peux jouer sur le style du contour de ta forme :

Ta plateforme est prête tu peux l’exporter, nous allons la reprendre dans un nouvel outil de pixel art.

Export du dessin de la plateforme

Utilise cet outil pour l’export, tu le trouves dans la barre d’outil à droite.

Choisis d’exporter ton image dans ton répertoire de travail.

Finition du dessin de la plateforme dans PISKEL

Le pixel art est un style de dessin numérique qui consiste à créer des images à partir de petits pixels individuels. Il est souvent associé aux jeux vidéo 2D.
Dans le pixel art, chaque pixel est considéré comme un élément distinct de l’image, et la précision dans le placement et la couleur de chaque pixel est cruciale pour atteindre l’effet visuel souhaité. Le pixel art est souvent associé à un esthétique rétro et peut être utilisé pour créer des images simples comme des personnages, des décors et des objets dans les jeux vidéo 2D.
La technique du « tileset » est une solution du pixel art pour construire les décors. Un « tileset » est une collection d’images (appelées « tuiles ») qui peut être utilisé pour créer des environnements graphiques dans les jeux vidéo 2D. Chaque tuile représente un élément graphique distinct, tels que des murs, des sols, des arbres, etc. Les « tilesets » sont placés côte à côte pour créer des scènes complètes, comme des niveaux de jeux ou des décors.
L’utilisation de « tilesets » permet aux développeurs de gagner du temps en créant des environnements graphiques rapidement et efficacement, sans avoir à dessiner chaque élément séparément. Cela permet également une meilleure gestion de la mémoire, car les images peuvent
être réutilisées plusieurs fois dans le jeu.
En utilisant différents « tilesets » et en les combinant de différentes façons, les développeurs peuvent créer des environnements visuellement variés et riches en détail, sans avoir à dessiner des images complexes. Les « tilesets » sont donc un outil essentiel pour les développeurs de jeux vidéo 2D.
PisKel Outil de dessin 2D en ligne ou à télécharger : https://www.piskelapp.com/p/create/sprite

Ouvrir l’outil PISKEL :

Puis choisis d’importer ton image :

Puis choisis ta grille de travail 32×32 :

Puis redessine ta plateforme pixel par pixel, joue sur les couleurs, les formes, ombre et lumière pour donner du relief :

Choisis la grosseur de tes outils :

Les différents outils à ta disposition :

Reprend une couleur existante avec la pipette :

Choisir les couleurs dans la palette existante :

Modifie une couleur existante :

Ton image est prête, tu peux l’exporter pour l’utiliser dans Construct.

Exporter ton image de PISKEL

Importer ton image plateforme dans Construct

Avant d’importer ton image, tu dois préparer tes calques. Sélectionne le calque Joueur du niveau 1 et rend le transparent :

Puis sélectionne le calque Fond du niveau 1

Puis demande sur l’onglet Niveau 1 par le clic droit de ta souris d’Insérer un nouvel objet :

Puis clic sur l’objet « Tuilage »

Choisis l’emplacement par la croix, dans l’éditeur grahique tu demandes à charger ton image par cette icone haut de l’écran :

Quitte l’éditeur par la croix de la fenêtre Windows :

Clic sur l’onglet Tuilage pour obtenir l’outil de dessin de tes plateformes :

Dans les propriétés de l’objet Tuilage, partie gauche de l’écran, modifie le nom, vérifie l’emplacement à 0 x0, qu’il appartient bien au calque Fond et modifie l’élévation Z pour être au dessus du fond répété :

Maintenant avec l’outil de dessin tu dessines tes plateformes :

Utilise ces outils pour sélectionner, dessiner, gommer, peindre des parties entières :

Puis donne un comportement à tes plateformes qui devront recevoir ton joueur :

Choisis le comportement Saut-à-travers:

Dans un premier temps, tu vas créer un joueur qui se déplace dans ton jeu et saute de plateforme en plateforme :

• marcher
• sauter
• chuter
• attendre

Liste des propositions graphiques d’un joueur

A toi de dessiner un personnage et ces différentes attitudes avec PISKEL ou peux explorer les différentes propositions suivantes dans ton espace : 12 JEUX VIDEOS\JEUX 2D PLATFORMER\TILSET\Characters

city-man-pixel-art-character-sprite-sheets

free-forest-bosses-pixel-art-sprite-sheet-pack

golem-tiny-style-2d-character-sprites

Player

satyr-tiny-style-2d-sprites

soldier-sprite-sheets-pixel-art

street-animal-pixel-art-asset-pack

wraith-tiny-style-2d-sprites

zombie-sprite-sheet-pack-pixel-art

A toi de choisir !!!

Quand tu auras fait ton choix, suis les instructions suivantes pour donner vie à ton joueur.

Ajout du joueur

Avant tu vas bloquer le calque de Fond avec le cadenas pour éviter de le modifier puis tu sélectionnes le calque Joueur.

Sur la scène, clic le bouton droit de la souris et choisis Insérer un nouvel objet :

Choisis Sprite puis choisis l’endroit où tu souhaites que le joueur apparaisse avec la croix. Dans l’éditeur graphique tu crées les différentes animations dans la partie droite de l’écran sous animation :

• marcher
• sauter
• chuter
• attendre

Utilise le clic droit de souris pour Ajouter une animation

Puis utilise le clic droit pour renommer chaque animation Renommer

Pour chaque animation, tu associes plusieurs images soit image avec une bande d’images ou image par image.

Choix d’une animation avec une bande d’images

Sélectionne une animation par exemple marcher :

Clic droit de la souris dans marcher Frames dans la partie basse de l’écran :

Puis choisis par un clic droit de la souris importer des frames puis Depuis une bande de frames :

choisir dans la bibliothèque la bande de frames que tu souhaites :

Coche Boucler dans les propriétés de l’animation :

Tu peux t’amuser à vérifier ton animation par un clic sur le bouton Aperçu :

Recommence cette opération pour les autres animations.

Choix d’une animation image par image

Dans marcher Frames, clic droit de la souris puis Importer des frames puis Depuis fichier.

Sous l’arborescence des fichiers sélectionner tous fichiers :

Demander à Boucler et règle la vitesse :

Zones de collision et point d’image

Vérifie les zones de collision de chaque image :

Tu peux rajouter un point en sélectionnant un point existant puis clic droit :

Puis fixe le point d’image en bas au milieu de ton personnage :

Puis par un clic droit sur Origine :

Demande Appliquer à toutes les animations

Maintenant, tu peux quitter l’éditeur graphique.

Comportement du joueur

Tu vas définir la position de ton joueur, sa taille et son comportement :

Si tu lances ton jeu, tu constates que ton joueur marche sur place.

Rajoute un comportement à ton joueur pour qu’il puisse sauter de plateforme en plateforme :

Lance de nouveau le jeu et ton joueur a la capacité de sauté de plateforme en plateforme :

Par contre, tu constates que ton joueur sort de l’écran, tu vas rajouter un nouveau comportement pour que la caméra suive ton joueur :

Maintenant tu as ces deux comportements pour ton joueur :

Une dernière action, tu vas renommer ton Sprite en Joueur :

Puis vérifie que Joueur est bien sure le Calque Joueur :

N’oublie pas de sauvegarder ton jeu par Menu Projet Sauver ou par :

Pour définir les mouvements de ton joueur, tu dois être sur le calque joueur :

Définir les animations du joueur

Tu vas double cliquer sur le Joueur pour ouvrir l’éditeur de dessin :

Pour chaque animation, tu définis les images, les paramètres ou non de l’animation, tu régles le point d’image et le cadre de la collision avec les plateformes.

Programmer les animations

A travers la table de décision de Constuct 3, tu définis les animations de ton joueur en fonction de ses mouvements.
Tu déclares l’utilisation du Clavier pour commander les déplacements de ton joueur, et si tu souhaites diffuser ton jeu sur tablette ou smarphone Toucher.

Sur l’onglet Niveau 1 demande par le clic droit Insérer un nouvel objet puis choisis Clavier puis Toucher :

Pour programmer les animations tu vas utiliser la table de décisions de Contruct :

Fais le choix Ajouter un événement sur le Joueur :

Puis descends par l’ascenseur jusqu’au paragraphe Plateforme puis choisis Est en mouvement :

Tu définis la situation où le Joueur est en mouvement sur la plateforme :

Et tu indiques l’action de marche par le choix de l’animation :

Dans le paragraphe Animations tu choisis de Définir l’animation :

Dans Animations, entre les deux guillemets, tu écris le nom de l’animation marcher :

Lance le jeu, ton Joueur s’anime en marcheur.

A toi de trouver pour animer le joueur quand il :

• attendre
• chuter
• sauter

Pour obtenir la condition « Inverser » sur l’événement Plateforme est en mouvement, par un clic droit sur Joueur Plateforme est en mouvement choisir X Inverser dans le menu contextuel :

Lancer le jeu pour tester les animations de ton joueur :

Ton joueur marche, attend, saute, chute. Mais tu constates quand to joueur marche, il ne va que dans un sens vers la droite mais ne se retourne pas vers la gauche. Tu vas récupérer les touches du clavier pour indiquer le sens de la marche.

Puis choisis Lors de la pression d’une touche :

Puis appuis sur la touche de ton clavier pour indiquer la direction gauche :

Dans action tu vas inverser l’image :

Dans la paragraphe Apparence, tu choisis de Définir la symétrie horizontale :

Lance ton jeu, le joueur se retourne quand il va vers la gauche mais ne revient pas vers la droite quand il va à droite. Rajoute cette instruction :

Maintenant, tu vas traiter le cas du Joueur qui tombe en dehors de la scène vers le bas. tu rajoutes une nouvelle condition sur le joueur :

Dans le paragraphe Taille et position du Joueur, tu sélectionnes Est à l’extérieur de la scène :

Tu vas rajouter à la condition d’être en dehors de la scène le fait de sortir vers le bas de la scène :

par le clic droit puis Ajouter pui Ajouter une autre condition :

Puis tu compares la position du joueur en y par rapport à la hauteur de la scène :

Si la position en y du joueur est plus grand que celle de la scène :

Pour trouver la valeur de la hauteur de la scène clic sur Trouver des expressions et cherche HauteurScène :

On va rajouter une action pour redémarrer la scène :

Teste à nouveau ton programme :

Assure toi que sur ton joueur le paramètre global n’est pas coché :

Contrôle les mouvements de ton joueur par les propriétés des comportements plateforme :

Tu peux par exemple gérer la force du saut :

A toi de tester les différents comportements de ton joueur.

Création de l’image de la barre de vie

Sur la scène demande à insérer un nouvel Sprite :

Positionne la croix du sprite en bas de ta scène, puis dans l’éditeur graphique choisir l’image :

Quitte l’éditeur graphique et positionne la barre de vie sur ta scène :

Puis par le clic droit renomme ta barre de vie :

Insère un deuxième Sprite pour la barre dans la jauge de ta barre de vie, renomme le Sprite :

Puis termine en insérant la dernière image :

Ajuste bien la taille de la jauge bleue pour recouvrir la dernière image :

Si tu lances ton jeu, ta barre de vie est bien en bas à gauche. Mais lorsque le joueur se déplace, elle ne reste pas visible à l’écran. Tu vas modifier son comportement pour qu’elle reste fixe à l’écran.

Pour chaque image, tu vas modifier leur comportement :

et choisir un comportement Ancre :

Si tu relances ton jeu, tu constates que la barre de vie reste fixe à l’écran :

Maintenant tu vas faire varier ta barre de vie en fonction des circonstances. Si le joueur tombe en dehors de la scène, alors il va perdre une vie :

utilise le clic droit de ta souris sur la feuille d’événements niveau pour demander l’ajout d’une variable globale :

Crée la variable NbrVies avec une valeur de départ à 5 vies par exemple :

Maintenant chaque fois que le joueur tombe en dehors de la scène il perd une vie. Rajoute une action lorsque le joueur est à l’extérieur de la scène :

Choisis system puis suivant :

Puis descend dans l’arborescence jusqu’à Variables globales et choisis soustraire de :

Demande à soustraire 1 à NbrVies :

Tu obtiens ce résultat :

Lance ton projet en mode Déboguer le projet :

Utilise l’ascenseur de l’interface pour trouver le paragraphe Variables globales, ainsi tu peux visualiser les changement de ta variabl :

Si tu fais tomber ton joueur, tu remarqueras que ta variable NbrVies change :

Maintenant on va associer la variable NbrVies à la barre de vie, ajoute un nouvel événement Système :

Choisis dans Système, dans le paragraphe Général, à Chaque tick :

Rajoute une nouvelle action :

Choisis ta barre pour modifier son aspect en fonction de NbrVies :

Tu vas modifier la largeur de la barre en fonction du nombre de vies :

Si on décide que l’on peut avoir 5 vies au maximum, utilise ce calcul pour gérer la jauge de tes vies :

Pour construire ce calcul utilise Trouver des expressions :

Retrouve ta variable nbrVies dans Système puis Variables globales :

Puis recommence pour trouver la largeur de ta barre de vie :

Prend l’objet de la jauge de fond car sa largeur va servira de référence :

Choisis la propriété Largeur :

Tu obtiens ce résultat, maintenant il faut l’organiser pour calculer la largeur en fonction du nombre de vie :

Tu obtiens ce résultat :

Lance ton jeu et contrôle :

Textcraft est un site web en ligne qui permet de créer des logos et des éléments graphiques avec du texte. Il offre une variété d’options pour personnaliser l’apparence du texte, telles que des polices de caractères, des couleurs, des ombres, des textures, etc.
L’utilisation de Textcraft est simple et accessible, avec une interface en ligne intuitive. Il n’y a pas besoin de télécharger de logiciel ou de se rappeler de sauvegarder le travail, car tout est géré en ligne. Les utilisateurs peuvent télécharger leur création en plusieurs formats différents, y compris PNG, JPG et GIF, pour une utilisation dans des projets en ligne ou hors ligne.
Textcraft est gratuit et facile à utiliser, avec des options pour la personnalisation et l’exportation de la création finie.

Pour utiliser TEXTCRAFT : https://textcraft.net/

Saisie un texte puis appuie sur le bouton create :

Ton texte est affiché.

Tu peux modifier la police de caractères et les propriétés :

A toi de jouer avec l’outil pour trouver le meilleur écran Game Over !!!

Quand tu as terminé la conception de ton écran, tu vas le télécharger pour l’utiliser dans ton jeu :

Dans construct, demande la création d’une nouvelle scène par un clic droit sur Scènes dans la fenêtre Projet :

Nomme la nouvelle scène GAME OVER :

Sur la nouvelle scène, demande à Insérer un nouvel objet par le clic droit de ta souris :

Choisis l’objet Sprite :

Positionne en utilisant la croix, puis charge ton image dans l’éditeur graphique :

Puis agrandis et positionne ton image dans la scène en tenant compte des dimensions de l’écran, représentées par les pointillés.

Pour la scène GAME OVER choisis la feuille d’événement de ton projet :

Et pour ton projet choisis la scène initiale :

Puis rajoute dans ta table d’évènements cette condition :

Tu vas rajouter un bouton sur ton écran GAME OVER pour proposer à rejouer :

Dans TEXTCRAFT dessine deux boutons REJOUER un bouton en attente d’un appui et un autre appuyer :

Sur la nouvelle scène, demande à Insérer un nouveau sprite par le clic droit de ta souris :

Crée deux animations sur ton image.

Une animation attendre

Une animation appuyer

Renomme le bouton et change le texte du bouton :

Puis dans la table des événements programme le fonctionnement du bouton :

Sur l’onglet calques sélectionne Claque Joueur :

Puis sur ton niveau demande par le clic droit de ta souris à Insérer un nouvel objet Sprite :

Choisis avec la croix l’endroit où tu souhaites positionner la plateforme, puis dans l’éditeur graphique dessine ta plateforme. Utilise l’outil rectangle et la palette des couleurs :

Quand tu as terminé ton dessin, redimensionne l’image avec cet outil :

Vérifie le point d’image et le pourtour de collision :

Le point d’image doit être au milieu de l’image.

Les points de collision doivent entourer la plateforme.

Tu peux régler la taille de la plateforme dans ton jeu :

Renomme le nom du Sprite :

Choisis un comportement Saut à travers pour ta plateforme mobile !

Si tu testes ton jeu, ton joueur peut sauter sur ta plateforme :

Maintenant, tu vas rajouter un nouveau comportement Sinus pour que ta plateforme devienne mobile :

Tu peux jouer avec tous les paramètres du comportement sinus pour rajouter des plateformes mobiles avec des comportements différents :

Avec le clic droit demande à cloner ta plateforme mobile :

Sélectionne l’objet PlateFormeMobile puis tire avec la souris pour le positionner à nouveau sur ton niveau de jeu. Puis choisis pour cette nouvelle plateforme des paramètres différents pour son comportement sinus.

Comment créer des jetons à récupérer par le joueur. L’objectif est de créer des jetons à des emplacements aléatoires que le joueur tentera de récupérer.

Pour commencer, sélectionne le Calque joueur :

Sur la scène demande à Insérer un nouvel objet :

Puis choisir l’objet SPRITE :

Insère par la croix en dehors de la scène ton jeton, puis recherche des images pour ton jeton, par exemple :

Ton jeton est créé mais il est unique et non visible du joueur. Maintenant par la feuille d’événements, tu vas créer aléatoirement sur la scène plusieurs jetons à attraper :

Tu déclenches une fois 10 fois la création d’un jeton :

Tu peux également choisir de déclencher la création des jetons au bout d’un certain temps :

Maintenant tu vas générer la création des 10 jetons à des emplacements aléatoires :

Tu peux fixer l’espace dans lequel les jetons vont se générer par l’instruction random sur x et y :

Tu peux également fixer l’espace de génération en fonction de la taille de la scène :

Maintenant tu peux gérer la collision entre le jeton et le joueur :

A l’approche du joueur la porte s’ouvre et se referme dès que le joueur s’éloigne :

Tu te positionnes sur le calque Joueur :

Clic droit sur la souris pour demander Insérer un nouvel objet :

Crée des images de portes fermées et ouvertes, où choisis dans :

Sur ce sprite, crée deux animations : open et close :

Tu vas redéfinir la zone de collision pour quelle soit la plus grande que possible et même dépasse la largeur de la porte. La largeur de la zone de collision permet le déclenchement automatique de l’ouverture de la porte.

Puis applique ta nouvelle boite de collision à toutes les animations de la porte.

Tu peux agrandir la zone de collision en agrandissant la taille de ton image :

Redemande à redéfinir la zone de collision en fonction de la nouvelle taille de ton image :

Pense à renommer ton sprite :

Maintenant dans ta feuille d’événements rajoute les instructions suivantes pour gérer l’ouverture de la porte en fonction de la proximité du joueur :

Des monstres patrouillent dans ton monde et sont potentiellement dangereux :

Choisis le Calque joueur

Rajoute un sprite sur ta scène :

Crée une animation pour ton monstre :

Modifie le nom de ton Sprite :

Crée une barrière invisible que ton monstre ne doit pas franchir, demande à insérer un nouveau sprite :

Dessine un carré avec une couleur transparente :

Positionne ta barrière devant ton monstre :

Renomme ton sprite :

Par un drag up sur l’objet barriere vient placer une deuxième barrière derrière ton monstre :

Sur le monstre crée une variable d’instance pour définir sa vitesse de déplacement :

Maintenant, programme le déplacement de tes monstres dans la table d’événement :

Puis programme pour que les monstres puissent changer de sens de déplacement dès qu’ils rencontrent une barrière :

Puis retourne l’image des monstres quand ils changent de sens :

Tu peux rendre aléatoire la vitesse de chaque monstre au démarrage de scène :

Par des drag up tu peux mettre en place plusieurs monstres sur ta scène :

A toi de jouer pour ajouter une action sur une collision entre le joueur et les monstres :

Comment tuer un monstre en lui sautant dessus :