Thunkable FR
  • 👋 Bienvenue dans Thunkable
  • 👶Pour Commencer
    • S'inscrire
    • Votre page de projets Thunkable
    • Tutoriels
    • L'application Thunkable Live
  • 🆕Créer un nouveau projet
    • Modifier les paramètres du projet
    • Actifs et taille des projets
    • Exemples de projets Thunkable
    • Galerie publique des projets
  • 🛠️ Composants
    • 🔘Interface Utilisateur
      • Button (Bouton)
      • Label (Etiquette)
      • Text Input (Saisie de texte)
      • List Viewer (Visionneuse de liste) (relecture en cours)
      • Web Viewer (Visionneuse Web)
      • Switch (commutateur)
      • Slider (curseur)
      • Alert (Alerte)
      • Loading Icon (Chargement de l'icône)
      • Date Input (Saisie de la date)
      • Time Input (Saisie du temps)
      • PDF Reader (Lecteur de PDF)
      • Rating (Classement)
      • 📊Data Viewers (Visualiseurs de données)
        • Data Viewer List (Liste de visualisation de données)
        • Data Viewer Grid (Grille de visualisation des données)
        • Custom Data Viewer Layout (Disposition personnalisée du visualiseur de données)
    • 📐Mise en page
      • Top Tab Navigator (Onglet supérieur Navigateur)
      • Bottom Tab Navigator (Onglet de navigation inférieur)
      • Stack Navigator (Navigateur à pile)
      • Drawer Navigator (Navigateur à tiroir)
      • Screen (Ecran)
      • Row (Ligne)
      • Column (Colonne)
    • 🔊Voix
      • Sound (Son)
      • Audio Recorder (Enregistreur Audio)
      • Text to Speech (Texte au discours)
      • Speech Recognizer (Reconnaissance de discours)
      • Assistant by Dialogflow (Assistant par Dialogflow)
      • Translator by Yandex (Traducteur par Yandex)
    • 📷 Image
      • Image
      • Photo Library (Photothèque)
      • Camera (Appareil photo)
      • Barcode Scanner (Lecteur de codes-barres)
      • Image Recognizer (Reconnaissance d'image)
      • Animation by Lottie (Animation par Lottie)
      • Video (Vidéo)
      • Video Recorder (Enregistreur vidéo)
    • 🗄️ Stockage des Données
      • Local Storage (Stockage local)
      • LocalDB (base de données locale)
      • Airtable
      • Media DB par Cloudinary
      • RealtimeDB par Firebase
      • Web API (API Web)
      • Smart Contract by Oasis (Contrat intelligent par Oasis)
      • Blockchain Wallet by Oasis (Portefeuille Blockchain par Oasis)
    • 🌍Localisation
      • Maps By Google and Apple (Cartes de Google et Apple)
      • Location Sensor (Capteur de localisation)
    • ⏲️ Capteurs
      • Timer
      • Accéléromètre
      • Gyroscope
      • Magnétomètre
      • Bluetooth Low Energie
    • ✉️ Authentification
      • Email Sign In by Firebase (Connexion au courrier électronique par Firebase)
    • 🤝Social
      • Share (Partager)
      • Notifications Push par One Signal
    • 💲Monétisation
      • Ads by Admob (Annonces par AdMob)
    • 🎮Gaming
      • Canvas (toile)
      • Sprites
      • Canvas Label
  • 🤖Blocs
    • Control (Contrôle)
    • Logic (Logique)
    • Math
    • Text (Texte)
    • Lists (Listes)
    • Color (Couleur)
    • Objects (Objets)
    • Device (Appareil)
    • Variables
    • Functions (Fonctions)
    • "Any Component" Blocks (Blocs "Généraliste")
    • Data Sources
    • 🤖🎮Gaming Blocks (en cours)
      • Events (événements)
      • Motion (Mouvement)
      • Looks (Apparence)
      • Direction
      • Sensing (Détection)
      • Add & Remove (Ajouter et Supprimer)
      • Stage (Scène)
      • Canvas Label (Etiquette de la Toile)
  • Post-Developpement
    • 🖥️ Emulateurs et test de l'application (en cours)
    • 🔒Confidentialité des données de l'application
    • 🔗Blockchain & Data Privacy
    • ➕Faire une Copie
    • 📥Téléchargement
    • 📤Partager
    • 📱Publication
      • Publier dans l'App Store (iOS)
      • Publier sur Play Store (Android)
      • Publier en tant qu'application Web (PRO)
    • Générer des captures d'écran
    • 🔎Résolution des problèmes
      • Problèmes de connexion
      • FAQs
    • 📏Introduction à l'espacement
    • 🖼️ Introduction au dimensionnement
    • 🔤Polices
    • 💾Gérer le stockage
    • 📝Bugs et demandes de fonctionnalités
  • Non-Officiel (à faire)
    • Google, Facebook and Github Sign In/Up (à faire)
    • 4 Keys To Designing A Great Mobile App
Powered by GitBook
On this page
  • Vue d'ensemble
  • Sprites et Types de Sprites.
  • Ajout de types de Sprite à votre application
  • Ajouter des Sprites à votre application
  • Propriétés des types des Sprites
  • Propriétés des Sprites
  • Exemple : Différents types de sprites

Was this helpful?

  1. 🛠️ Composants
  2. 🎮Gaming

Sprites

Créer des applications de jeux interactifs avec des sprites.

PreviousCanvas (toile)NextCanvas Label

Last updated 4 years ago

Was this helpful?

Vue d'ensemble

Les sprites sont des images qui peuvent être placées sur la scène dans un Canvas. Ils peuvent réagir en étant touchés ou traînés sur l'écran, ou en entrant en collision avec d'autres sprites ou le bord de l'écran.

Sprites et Types de Sprites.

Un type de Sprite est une catégorie de Sprites que vous pouvez ajouter à votre application. Par exemple, dans un jeu vidéo, vous pouvez avoir un type de sprite de personnage principal et des types de sprites à obstacles.

Un Sprite est une instance unique d'un type de Sprite. Dans l'exemple du jeu vidéo, vous pourriez avoir un seul type de Sprite à obstacles, mais plusieurs Sprites à obstacles dans votre application. Il s'agirait de plusieurs Sprites du même type de Sprite.

Ajout de types de Sprite à votre application

Pour ajouter un type de Sprite à votre application, cliquez sur le stade de votre Canvas. Cela vous amènera automatiquement à l'onglet Canvas. Sous votre arbre de composants, où vous verrez un menu de composants dans l'onglet Design, vous verrez votre menu Sprite Type.

Capture d'écran de la section "Add Sprite Type" de votre application

Vous pouvez cliquer sur "Add Sprite Type" pour ajouter un nouveau Sprite Type à votre application.

Ajouter des Sprites à votre application

Tout comme le menu des composants dans l'onglet Design, vous pouvez cliquer et faire glisser les Sprites de leur catégorie Sprite Type dans votre application.

Dans le GIF ci-dessous, il y a un canvas avec un Sprite, appelé Sprite1. Il y a également un Sprite Type dans le menu Sprite Type, appelé Sprite_Type1. Lorsqu'un Sprite est glissé depuis le Sprite_Type1 et déposé sur le Canvas, nous voyons un nouveau Sprite, appelé Sprite_2.

Propriétés des types des Sprites

Picture List: Vous pouvez télécharger plusieurs images dans la liste d'images d'un Sprite Type. Cela vous permet de changer l'apparence du sprite lorsqu'un événement se produit.

Dans le GIF ci-dessous, nous voyons que lorsqu'un Sprite (le Castor de Thunkable) entre en collision avec un autre Sprite (le tronc d'arbre), l'apparence du Sprite d'arbre change.

Angle: Changez l'angle du sprite. L'angle est mesuré dans le sens des aiguilles d'une montre et est mesuré en degrés. Par exemple, si vous réglez l'angle à 30, votre sprite tournera de 30 degrés dans le sens des aiguilles d'une montre.

Opacity: Modifier l'opacité du Sprite.

Bounce: Lorsqu'un sprite frappe une surface ou un autre sprite, c'est le pourcentage de la vitesse avec laquelle le sprite rebondit. Un rebond de 100 signifie que le sprite rebondit à la même vitesse que celle qu'il avait lors de sa collision. Un rebond de 200 signifie que le sprite rebondit avec une vitesse deux fois supérieure à celle qu'il avait lors de sa collision. Ceci est démontré dans le GIF ci-dessus, sous la liste d'images, où le castor a un rebond de 50, soit la moitié de sa vitesse initiale.

Is Draggable: Quand c'est vrai, le joueur peut faire glisser le sprite.

Passes Through: Lorsqu'il est vrai, tous les sprites passent sous ou au-dessus du sprite. Lorsqu'ils sont faux, les sprites entrent en collision en utilisant le moteur physique. Ceci est démontré dans le GIF ci-dessus sous la rubrique Liste d'images.

Is Static: Lorsqu'un sprite est statique, il agit comme un mur. Aucune force ne peut le déplacer.

FixedRotation: Lorsque la rotation fixe est fausse, le sprite peut tourner dans n'importe quelle direction. Lorsque la rotation fixe est vraie, le sprite reste à son angle actuel.

Drawing: Permet de déterminer si le sprite tracera une ligne lorsqu'il est déplacé sur l'écran. Vous pouvez régler les propriétés Drawing Color et Drawing Width.

Propriétés des Sprites

Angle, Opacity, Bounce, Is Draggable, Passes Through, Is Static, Ignore Gravity, Fixed Rotation, and Drawing sont toutes des propriétés de type de Sprite ainsi que des propriétés de Sprite. Elles sont décrites dans la section précédente.

Picture Selection: Sélectionnez une image dans la liste d'images définie dans le type de Sprite à afficher sur le Sprite.

X, Y: Emplacement du Sprite sur l'axe X et l'axe Y de la scène. Vous pouvez également cliquer et faire glisser le Sprite jusqu'à la position initiale souhaitée.

Z: Où le Sprite se trouve dans la profondeur du canvas. Un Sprite avec une valeur Z supérieure apparaîtra devant un Sprite avec une valeur Z inférieure. Ceci est démontré dans le GIF ci-dessus, dans la section "Picture List" des propriétés des types de Sprite : le castor a une valeur Z plus élevée que l'arbre, il est donc devant lorsqu'il passe devant l'arbre.

Exemple : Différents types de sprites

Les groupes de sprites qui ont le même comportement doivent appartenir au même type de sprite. Dans l'exemple ci-dessous, WallType est un type de sprite, et il y a plusieurs sprites de ce type dans l'application (c'est-à-dire les murs).

Chaque fois que la balle touche l'un des Sprites WallType, elle retourne à son emplacement de départ.

La liste d'images de Sprite_Type2
Démonstration de parcours dans la liste d'images

Ignore Gravity: Permet de savoir si le sprite est affecté par la gravité de la scène. Vous pouvez en savoir plus sur les propriétés de la gravité de la scène .

Sprites et Types de Sprites
Ajout de types de Sprite à votre application
Ajouter des Sprites à votre application
Propriétés des types des Sprites
Propriétés des Sprites
Exemple : Différents types de sprites
ici