123Codage

Qu’est-ce qu’un fond d’écran répété ?

Imaginez que vous avez une petite image carrée ou rectangulaire. Au lieu de créer une grande image pour couvrir tout l’écran, tu peux simplement répéter cette petite image plusieurs fois pour remplir l’espace. C’est ce qu’on appelle un fond d’écran répété.

Utilise le logiciel Inkscape :

Choix de la taille de ton dessin

Dans un premier temps tu vas définir la taille de ton image :

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 :

Choisis portrait ou paysage, l’unité en px (pixel) la hauteur correspondant à celle de l’écran de ton jeu, puis une largeur de ton choix :

Choisis l’arrière plan en damier avec la couleur de fond transparent.

Dessine

Puis dessine ton fond avec les objets à ta disposition :

Tu peux sélectionner tes objets avec la flèche « sélectionner et transformer vos objets »

Tu peux choisir les couleurs de tes objets avec la palette du bas :

Je te conseille de choisir une couleur représentative de l’ambiance de ton jeu, et une couleur un peu estompée.

Pour que ton image puisse se répéter tu dois obligatoirement avoir des formes identiques sur la partie gauche et droite de ton écran. Choisis de mettre une forme qui couvre tout le bas de ton écran. N’hésite pas à déborder !!

Un exemple d’un fond répété d’une ville :

En sélectionnant un objet on peut le redimensionner :

Par un nouveau clic on peut modifier son orientation :

Par le bouton éditer des nœuds on peut modifier la structure des objets :

puis :

Tu peux rajouter des noeuds, ou supprimer des noeuds, ou modifier leurs comportements :

Exporte ton dessin pour l’utiliser dans Construct

Quand ton dessin est terminé tu peux l’exporter pour le tester dans ton jeu, utilise cette icone :

Choisis l’onglet Page puis utilise le bouton Exporter sous …

Choisis ton emplacement sous bureau ALGORA CULTURA puis le répertoire avec ton « Prénom NOM » :

Maintenant retourne dans Construct et ton projet de jeu.

Positionne sur le Calque Fond :

Sur la scène clic avec le bouton droit et demande « Insérer un nouvel objet » puis choisir Arrière plan répété.

Choisir par la croix sur le coin gauche haut de la grille :

Dans l’éditeur de dessin choisir l’icone pour charger une image :

Puis demander à charger ton image de fond répété :

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

Utilise les ancres de la figure pour étendre l’écran répété sur toute ta scène :

Vérifie les propriétés du fond répété dans la partie gauche de l’écran :

• modifie le nom éventuellement
• vérifie l’emplacement 0x0
• vérifie qu’il appartient bien au calque Fond
• joue sur l’opacité

Dans le prochain TUTO, tu apprends à dessiner les plateformes.

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

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 :

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 :

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 vas définir les images, les paramètres ou non de l’animation, régler 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 vas définir les animations de ton joueur en fonction de ses mouvements.
Tu vas déclarer 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 as défini la situation où le Joueur est en mouvement sur la plateforme :

Alors tu vas prendre l’action d’animer le Joueur en marche :

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 :

• attend
• chute
• saute

Pour obtenir le sinon Joueur Plateforme est en mouvement, par un clic droit sur Joueur puis Ajouter et Ajouter « Sinon » :

Lancer le jeu pour tester les animations de ton joueur :

Ton joueur marche, attend, saute, chute. Mais tu peux constater quand il 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 connaître 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 :

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.