Créer des toiles de fond et des sprites dans Scratch

Ce que vous allez créer

Dans la partie précédente de cette série, j'ai présenté une introduction à Scratch et aux principaux composants qu’il utilise. Dans cette partie, nous allons créer un projet en y ajoutant des fonds et des sprites..

Dans Scratch, la toile de fond et les images-objets sont des atouts. Les atouts incluent également des costumes et des sons, que vous pouvez ajouter à vos sprites.

Pour créer un arrière-plan ou un dépit, vous pouvez faire l'une des quatre choses suivantes:

• Importer un fond ou une image-objet à partir de la bibliothèque fournie par Scratch.
• Importer un fichier sprite depuis votre ordinateur.
• Importer un fichier graphique à utiliser comme fond ou costume, puis utiliser le costume pour créer un sprite.
• Dessinez votre décor ou votre costume en utilisant les outils de dessin fournis par Scratch et utilisez des costumes pour créer votre image-objet..

Dans ce tutoriel, nous allons travailler sur un nouveau projet et utiliser chacune de ces techniques de différentes manières..

Ce dont vous aurez besoin

Pour compléter ce tutoriel, vous aurez besoin de:

• un compte gratuit avec Scratch
• un navigateur Web avec accès à Scratch (je recommande d'utiliser un navigateur moderne comme Chrome, Firefox, Safari ou Opera pour une expérience optimale)

Créer votre projet

Commencez par créer votre projet. Connectez-vous à Scratch, puis dans la page d'accueil, cliquez sur Créer dans la barre d'administration en haut de l'écran.

Cela vous mènera au nouvel écran de projet:

Donnez un nom à votre projet en le tapant dans le champ situé immédiatement au-dessus de la scène. Scratch sauvegardera alors automatiquement votre projet avec son nouveau titre..

Ajouter des toiles de fond

Commençons par donner à notre projet une toile de fond. Sous la scène, vous verrez qu'il existe quatre options pour créer des arrière-plans, chacun ayant une icône:

• Choisissez le fond de la bibliothèque
• Peindre la nouvelle toile de fond
• Télécharger la toile de fond du fichier
• Nouveau fond de caméra

La quatrième d'entre elles est probablement la favorite de mon code club: les enfants aiment prendre des selfies avec leur webcam et les utiliser comme arrière-plans.!

Ajout d'un fond à partir de la bibliothèque

Commencez par utiliser la bibliothèque. Cliquez sur l'icône de gauche pour afficher la bibliothèque de fonds:

Sélectionnez une image (j'utilise 'beach-malibu') et cliquez sur le bouton D'accord bouton.

Le sprite de chat sera maintenant en face de votre arrière-plan:

Comme votre projet avait un fond blanc quand vous avez commencé, il aura maintenant deux fonds. Vous pouvez voir l’ensemble de vos fonds en cliquant sur le bouton Étape (à côté de vos sprites) puis en cliquant sur le bouton Les décors onglet à droite de la scène. Cela révèle le volet des toiles de fond:

Ici, vous pouvez ajouter ou supprimer des arrière-plans et modifier ceux qui existent déjà. Nous allons supprimer le fichier indésirable, puis en ajouter deux nouveaux, basés sur celui que nous venons d'ajouter..

Supprimer un fond

Tout d’abord, cliquez sur le fond blanc (toile de fond1) et cliquez sur le X qui apparaîtra en haut à droite. Vous aurez maintenant juste une toile de fond.

Copier une toile de fond

Maintenant, nous allons copier le fond existant pour en faire un second, que nous éditerons ensuite.

Assurez-vous que votre arrière-plan est sélectionné dans le volet Fond, puis cliquez dessus avec le bouton droit de la souris. Dans le menu contextuel, cliquez sur dupliquer.

Vous aurez maintenant deux fonds identiques.

Modification d'un fond

Maintenant, vous devez éditer le nouveau fond. Sélectionnez le fond appelé beach-malibu2 et cliquez sur le Sélectionner icône située à gauche du volet d'édition de la toile de fond (sa deuxième à partir du bas et ressemble à une main sur un rectangle en pointillé). Sélectionnez une partie de votre toile de fond en faisant glisser la souris dessus. Je sélectionne une partie centrale représentant environ 75% de la toile de fond:

Faites maintenant glisser les poignées de la partie sélectionnée vers le bord du fond afin qu’elle occupe tout le fond. Vous vous retrouverez avec une toile de fond qui ressemble à une version légèrement agrandie de la première.

Remarque: si vous vous trompez, cliquez simplement sur modifier et annuler dans la barre d'administration, ou supprimez votre toile de fond et recommencez!

Répétez cette opération avec le fond que vous venez de créer: dupliquez-le et sélectionnez une partie centrale pour remplir tout le fond. Faites cela plusieurs fois si vous le souhaitez. Vous constaterez que si vous basculez entre les arrière-plans, vous constaterez un effet de zoom avant sur l'arrière-plan. Dans un prochain tutoriel, nous utiliserons un script avec les arrière-plans pour automatiser cet effet de zoom..

J'ai créé quatre fonds avec différents niveaux de zoom:

Notez que vous avez d'autres options pour éditer des arrière-plans, à savoir:

• dessiner sur eux, en utilisant l'outil pinceau, des lignes ou des formes
• en leur ajoutant du texte, avec une variété de polices disponibles
• en effaçant des parties (utilisez-le pour créer une "fenêtre" donnant sur un fond derrière le devant)
• sélectionner des zones (que vous venez de faire)
• zones de duplication

Vous pouvez également convertir vos fonds de bitmap en mode vectoriel ou inversement. Les fonds importés de la bibliothèque sont des bitmaps (comme des photographies), tandis que si vous dessinez un nouveau fond, ce sera un vecteur (comme un dessin). Si vous souhaitez ajouter des éléments de dessin et du texte et les manipuler, il est préférable de s'en tenir au mode vectoriel..

Créer des sprites

Chaque nouveau projet commence avec un sprite (le chat) déjà chargé, mais vous pouvez également en ajouter autant que vous le souhaitez, ou vous pouvez modifier ou supprimer le chat..

Comme pour les arrière-plans, quatre icônes permettent de créer un sprite:

• Choisissez un sprite dans la bibliothèque
• Peindre un nouveau sprite
• Télécharger une image-objet à partir d'un fichier
• Nouveau sprite de la caméra

Notez que si vous souhaitez utiliser un fichier graphique tel qu'un fichier png pour créer votre image-objet, vous l'envoyez en tant que costume et non comme image-objet. Les sprites sont stockés sous un type de fichier spécifique, utilisable uniquement dans Scratch. Je couvrirai cela plus tard dans ce tutoriel.

Création d'un sprite à partir de la bibliothèque

Commençons par le moyen le plus simple de créer un sprite: en en important un depuis la bibliothèque..

dans le Sprites sous la scène, cliquez sur l’icône immédiatement à droite du bouton Nouveau sprite text, pour voir la bibliothèque:

Choisissez un sprite parmi ceux proposés: je choisis un crabe car mon projet a un thème de bord de mer.

Cliquez sur D'accord et le nouveau sprite sera ajouté à votre projet:

Si vous cliquez sur le Les costumes onglet, vous verrez que ce sprite a deux costumes, avec les pinces ouvertes et fermées:

Nous pouvons utiliser ces costumes plus tard avec un script qui change de costume lorsque le crabe s'approche du chat et le pince!

Si vous cliquez sur le lutin du chat, vous verrez qu'il a aussi deux costumes que nous pouvons utiliser pour créer un effet de course avec un script..

Dessiner un Sprite

Une autre façon de créer un sprite consiste à en dessiner un. Notez que les sprites ne doivent pas nécessairement être des animaux ou des personnes: ils peuvent être tout ce avec quoi vous souhaitez interagir dans votre projet. Donc, si vous voulez que du texte apparaisse à un moment donné, vous créerez un sprite de texte. C'est ce que nous allons faire.

Cliquez sur l’icône 'Paint new sprite' (le pinceau en haut à droite de la fenêtre). Sprites vitre). Cela ouvrira le volet de dessin:

Assurez-vous d'abord que vous travaillez en mode vectoriel. Si ça dit Mode bitmap en bas à droite du volet de dessin, cliquez sur le bouton Convertir en vecteur bouton.

Maintenant, cliquez sur l'icône de texte à droite, cliquez n'importe où dans le volet de dessin et commencez à taper votre texte. Je tape "OUCH !!!".

Maintenant, apportez quelques modifications à votre texte:

• Modifiez la police en double-cliquant sur votre texte pour le sélectionner et en utilisant le menu de sélection situé en dessous du volet de dessin pour choisir votre police. J'utilise le Rayure Police de caractère.
• Changer la couleur en sélectionnant le texte et en cliquant sur une couleur dans le sélecteur de couleur.
• Changez la taille en sélectionnant la zone de texte (pas le texte lui-même) et en faisant glisser les poignées pour redimensionner.

Vous pouvez également dessiner une forme autour de votre texte pour le surligner. Cliquez sur l'outil Ligne et tracez plusieurs lignes pour créer une forme en zigzag autour du texte (si vos compétences en dessin ne sont pas à la hauteur, créez simplement un cercle ou un carré. Je sais que mes élèves sont meilleurs que moi!.

Vous devez maintenant avoir trois sprites en place, dont le texte que vous venez de créer:

Notez que lorsque vous avez dessiné votre troisième sprite, vous avez créé un costume et non un sprite. Parce que ce sprite a juste un costume, cela crée effectivement le sprite. Si vous le souhaitez, vous pouvez ajouter des costumes en cliquant sur l’une des icônes ci-dessous. Nouveau costume, de la même manière que vous avez déjà créé de nouveaux fonds. Par exemple, vous pouvez dupliquer le costume existant et en créer un second avec un texte différent. Vous pourrez ensuite utiliser un script ultérieurement pour basculer entre les deux costumes et afficher un texte différent..

Création d'un Sprite à partir d'une image importée

L'autre façon de créer un dépit est d'importer une image. Vous faites cela en dessinant votre sprite puis en téléchargeant une image en tant que costume.

dans le Sprites volet, cliquez sur l'icône "Peindre un nouveau sprite" (le pinceau).

dans le Les costumes dans le volet du nouveau sprite, cliquez sur l'icône "Télécharger le costume du fichier" (le dossier)..

Télécharger le starfish.png fichier fourni dans la liasse pour ce cours.

Si votre volet de dessin est en mode bitmap, cliquez sur le bouton Convertir en vecteur bouton.

Redimensionnez et déplacez l'étoile de mer jusqu'à ce qu'elle se trouve en bas à droite de la scène:

Vous avez maintenant quatre sprites et votre scène a l'air un peu embrouillée! Ne vous inquiétez pas pour ça: nous allons déplacer les images-objets à l'aide de scripts dans une partie ultérieure de ce didacticiel, et masquer l'image-objet de texte jusqu'à ce que vous en ayez besoin.

Résumé

Dans ce didacticiel, vous avez appris à créer des arrière-plans et des sprites pour votre projet. Vous pouvez ensuite utiliser des scripts pour modifier et déplacer vos fonds et vos images-objets. Comme vous l’avez appris, il existe différentes façons de créer des fonds d’écran et des images-objets: vous pouvez les choisir dans la bibliothèque Scratch, vous pouvez les dessiner vous-même, modifier celles qui existent déjà ou télécharger des images..

Dans la partie suivante de cette série, nous allons passer aux blocs et apprendre comment ils fonctionnent et ce que font les différents types de blocs..