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
  • Ajout d'un canvas
  • La scène
  • Gravité
  • Mode de mise à l'échelle de la scène
  • Alignement des étapes
  • Dessin au toucher
  • Etapes multiples

Was this helpful?

  1. 🛠️ Composants
  2. 🎮Gaming

Canvas (toile)

Créer des applications de jeu interactives avec le composant Canvas

Previous🎮GamingNextSprites

Last updated 4 years ago

Was this helpful?

Le Canvas est un panneau tactile qui permet de déplacer des objets.

Vous pouvez utiliser ce composant pour créer une variété de jeux et d'expériences qui impliquent différentes méthodes pour toucher un écran.

Vue d'ensemble

Ajout d'un canvas

Pour ajouter un canevas à votre application, glissez et déposez le composant canevas dans le constructeur de l'application.

Lorsque vous cliquez sur le Canevas dans votre arbre de composants, l'onglet Canevas apparaît. Cliquez sur cet onglet pour personnaliser votre canevas

Les trois éléments d'un canvas sont la scène, les sprites et le Label Canvas.

La scène

La scène est l'arrière-plan de votre toile. Vous pouvez définir une couleur ou une image d'arrière-plan, une couleur de bordure, ainsi que la hauteur et la largeur de la scène. Vous pouvez cliquer et faire glisser vos Sprites sur la scène dans l'onglet Toile.

Gravité

Vous pouvez régler la gravité de la scène le long des axes X et Y. Les Sprites de la scène peuvent être basculés pour ignorer la gravité ou non. Si un Sprite est affecté par la gravité, il sera tiré dans la direction de la gravité.

Mode de mise à l'échelle de la scène

Votre Canvas Stage s'adaptera automatiquement à la taille de l'écran de l'appareil. Si le format de la scène ne correspond pas au format de l'appareil, vous pouvez utiliser le Stage Scaling Mode pour redimensionner l'arrière-plan afin de remplir l'écran de l'appareil.

Scale: Le rapport d'aspect du fond sera maintenu et le fond sera mis à l'échelle. Une partie de l'arrière-plan peut être recadrée.

Stretch: L'image de fond sera étirée afin de remplir l'écran. L'image d'arrière-plan peut être déformée.

Alignement des étapes

Choisissez comment vous voulez que votre image d'arrière-plan soit centrée lorsqu'elle est mise à l'échelle pour correspondre à l'écran de l'appareil.

Peut être réglé sur center, center horizontally only, center vertically only, ou none.

Dessin au toucher

Vous pouvez activer le dessin tactile sur votre écran. Vous pouvez régler la couleur du dessin pour choisir la couleur dans laquelle vous dessinez. Vous pouvez régler la Largeur du dessin pour choisir l'épaisseur de la ligne que vous dessinez sur la scène.

Etapes multiples

Vous pouvez ajouter plusieurs étapes à un composant Canvas, de la même manière que vous pouvez ajouter plusieurs écrans à un projet d'application. Lorsque vous avez sélectionné votre onglet Canvas, cliquez sur le + à côté du nom de votre étape pour ajouter une autre étape au Canvas.

Chaque étape a ses propres sprites, sa couleur de fond, sa gravité, etc.

Ajout d'un Canvas
La scène
Gravité
Mode de mise à l'échelle
Alignement des étapes
Dessin au toucher
Etapes multiples
Behavior of Sprite when Y Gravity = 100, X Gravity = 0
Behavior of Sprite when Y Gravity = 0, X Gravity = 100
Behavior of Sprite when Y Gravity = 100, X Gravity = 100