Backdrops en Sprites maken in Scratch

Wat je gaat creëren

In het vorige deel van deze serie gaf ik een inleiding tot Scratch en de belangrijkste componenten die het gebruikt. In dit deel beginnen we met het maken van een project door achtergronden en enkele sprites eraan toe te voegen.

In Scratch zijn de backdrop en sprites assets. Activa bevatten ook kostuums en geluiden, die u aan uw sprites kunt toevoegen.

Om een ​​achtergrond of een wrok te creëren, kun je een van de vier dingen doen:

• Importeer een achtergrond of sprite uit de bibliotheek van Scratch.
• Importeer een sprite-bestand vanaf uw computer.
• Importeer een grafisch bestand voor gebruik als achtergrond of kostuum en gebruik vervolgens het kostuum om een ​​sprite te maken.
• Teken je achtergrond of kostuum met de tekengereedschappen van Scratch en gebruik kostuums om je sprite te maken.

In deze zelfstudie zullen we een nieuw project doorlopen en elk van deze technieken op verschillende manieren gebruiken.

Wat je nodig hebt

Om deze tutorial te voltooien, heb je nodig:

• een gratis account bij Scratch
• een webbrowser met toegang tot Scratch (ik raad het gebruik van een moderne browser zoals Chrome, Firefox, Safari of Opera aan voor de beste ervaring)

Uw project maken

Begin met het maken van uw project. Log in op Scratch en klik vervolgens op de startpagina op creëren in de beheerbalk boven aan het scherm.

Dit brengt je naar het nieuwe projectscherm:

Geef je project een naam door het in het veld te typen direct boven het podium. Scratch slaat uw project dan automatisch op met zijn nieuwe titel.

Backdrops toevoegen

Laten we beginnen met ons project een achtergrond te geven. Onder het werkgebied ziet u dat er vier opties zijn voor het maken van achtergronden, elk met een pictogram:

• Kies achtergrond uit bibliotheek
• Verf nieuwe achtergrond
• Upload achtergrond van bestand
• Nieuwe achtergrond van de camera

De vierde hiervan is waarschijnlijk de favoriet onder mijn codeclub: de kinderen vinden het leuk om selfies te nemen met hun webcam en die voor achtergronden te gebruiken!

Een achtergrond toevoegen vanuit de bibliotheek

Begin met het gebruik van de bibliotheek. Klik op het linkerpictogram om de achtergrondbibliotheek te bekijken:

Selecteer een afbeelding (ik gebruik 'beach-malibu') en klik op de OK knop.

De kattensprite staat nu voor je achtergrond:

Omdat je project een effen witte achtergrond had toen je begon, zal het nu twee achtergronden hebben. U kunt al uw achtergronden bekijken door op de knop te klikken Stadium (naast je sprites) en klik vervolgens op de achtergronden tab rechts van het podium. Dit onthult het achtergrondvenster:

Hier kunt u backdrops toevoegen of verwijderen en bestaande bewerken. We gaan de ongewenste verwijderen en vervolgens twee nieuwe toevoegen op basis van degene die we zojuist hebben toegevoegd.

Een achtergrond verwijderen

Klik eerst op de witte achtergrond (backdrop1) en klik op de X die rechtsboven verschijnt. Je hebt nu slechts één achtergrond.

Een achtergrond kopiëren

Nu zullen we de bestaande achtergrond kopiëren om een ​​tweede te maken, die we vervolgens zullen bewerken.

Zorg ervoor dat je achtergrond is geselecteerd in het achtergrondvenster en klik er met de rechtermuisknop op. Klik in het snelmenu duplicaat.

Je hebt nu twee achtergronden die hetzelfde zijn:

Een achtergrond bewerken

Nu moet je de nieuwe achtergrond bewerken. Selecteer de opgeroepen achtergrond beach-malibu2 en klik op de kiezen pictogram links van het paneel voor het bewerken van achtergronden (het is tweede van onderen en lijkt op een hand boven een rechthoek met stippellijnen). Selecteer een deel van je achtergrond door er met de muis overheen te slepen. Ik selecteer een centraal gedeelte dat ongeveer 75% van de achtergrond is:

Versleep nu de handvatten van dat geselecteerde deel naar de rand van de achtergrond, zodat deze de hele achtergrond in beslag neemt. Je krijgt een achtergrond die eruitziet als een enigszins ingezoomde versie van de eerste.

Let op: als je fout gaat, klik je gewoon op Bewerk en ongedaan maken in de beheerbalk of verwijder je achtergrond en begin opnieuw!

Herhaal dit nu met de achtergrond die je zojuist hebt gemaakt: dupliceer het en selecteer een centraal gedeelte om de hele achtergrond mee te vullen. Doe dit een paar keer als je wilt. Je zult merken dat als je schakelt tussen de achtergronden, je een effect zult zien van inzoomen op de achtergrond. In een latere zelfstudie gebruiken we een script met achtergronden om dit inzoomen effect te automatiseren.

Ik heb vier achtergronden gemaakt met verschillende zoomniveaus:

Merk op dat je nog andere opties hebt voor het bewerken van achtergronden, namelijk:

• erop tekenen met behulp van het penseel, lijnen of vormen
• tekst toevoegen aan hen, met een verscheidenheid aan lettertypen beschikbaar
• delen wissen (gebruik dit om een ​​'venster' te maken tot een achtergrond achter de voorste)
• gebieden selecteren (wat je zojuist hebt gedaan)
• gebieden dupliceren

U kunt ook uw achtergronden converteren van bitmap naar vectormodus of omgekeerd. Achtergronden geïmporteerd uit de bibliotheek zijn bitmaps (zoals foto's), terwijl als u een nieuwe achtergrond tekent, het een vector is (zoals een tekening). Als u tekenelementen en tekst wilt toevoegen en manipuleren, kunt u het beste in vectormodus blijven.

Sprites maken

Elk nieuw project begint met één sprite (de kat) al geladen, maar je kunt er ook zoveel eigen als je wilt toevoegen, of je kunt de kat bewerken of verwijderen.

Net als bij backdrops zijn er vier pictogrammen voor het maken van een sprite:

• Kies sprite uit de bibliotheek
• Verf nieuwe sprite
• Upload sprite uit bestand
• Nieuwe sprite van camera

Let op: als je een grafisch bestand zoals een png wilt gebruiken om je sprite te maken, upload je dat als een kostuum, geen sprite. Sprites worden opgeslagen als een specifiek bestandstype dat alleen in Scratch kan worden gebruikt. Ik zal dit later in deze tutorial bespreken.

Een Sprite maken vanuit de bibliotheek

Laten we beginnen met de eenvoudigste manier om een ​​sprite te maken: door er een uit de bibliotheek te importeren.

In de Sprites paneel onder het werkgebied, klik op het pictogram direct rechts van de Nieuwe sprite tekst, om de bibliotheek te bekijken:

Kies een sprite van degenen die worden aangeboden: ik kies een krab omdat mijn project een kustthema heeft.

Klik OK en de nieuwe sprite wordt toegevoegd aan uw project:

Als u op klikt kostuums tab, je zult zien dat deze sprite twee kostuums heeft, met de tang open en gesloten:

We kunnen deze kostuums later gebruiken met een script dat het kostuum verandert wanneer de krab dicht bij de kat komt en deze knelt!

Als u op de sprite van de kat klikt, ziet u dat deze ook twee kostuums bevat, die we kunnen gebruiken om een ​​lopend effect met een script te maken.

Een Sprite tekenen

Een andere manier om een ​​sprite te maken is door er een te tekenen. Merk op dat sprites geen dieren of mensen hoeven te zijn: ze kunnen alles zijn waarmee je in je project wilt communiceren. Dus als u op een bepaald moment tekst wilt weergeven, maakt u een tekstsprite. Dat is wat we gaan doen.

Klik op het pictogram 'Nieuwe sprite verven' (het penseel in de rechterbovenhoek van de Sprites ruit). Dit opent het tekenvenster:

Zorg er eerst voor dat je in vector-modus werkt. Als het zegt Bitmapmodus Klik rechtsonder in het tekeningvenster op de Converteren naar vector knop.

Klik nu op het tekstpictogram aan de rechterkant, klik ergens in het tekenvenster en begin met het typen van uw tekst. Ik typ 'OUCH !!!'.

Maak nu een paar kleine aanpassingen aan uw tekst:

• Wijzig het lettertype door te dubbelklikken op uw tekst om het te selecteren en gebruik het selectiemenu onder het tekeningpaneel om uw lettertype te kiezen. Ik gebruik de Krassen doopvont.
• Wijzig de kleur door de tekst te selecteren en op een kleur in de kleurkiezer te klikken.
• Wijzig de grootte door het tekstvak te selecteren (niet de tekst zelf) en de grepen te verslepen om de grootte te wijzigen.

U kunt ook een vorm rond uw tekst tekenen om deze te markeren. Klik op het lijngereedschap en teken meerdere lijnen om een ​​zigzagvorm rondom de tekst te maken (als je tekentalenties dit niet aankunnen, maak je gewoon een cirkel of vierkant - ik weet dat mijn studenten hierin beter zijn dan ik!).

Je zou nu drie sprites moeten hebben, een daarvan is de tekst die je zojuist hebt gemaakt:

Merk op dat toen je je derde sprite tekende, je eigenlijk een kostuum creëerde, geen sprite. Omdat die sprite maar één kostuum heeft, dat effectief de sprite creëert. Als je wilt kun je extra kostuums toevoegen door op een van de onderstaande pictogrammen te klikken Nieuw kostuum, op dezelfde manier als u al nieuwe achtergronden hebt gemaakt. U kunt bijvoorbeeld het bestaande kostuum dupliceren en een tweede exemplaar met verschillende tekst maken. U kunt dan later een script gebruiken om tussen de twee kostuums te schakelen en andere tekst weer te geven.

Een Sprite maken vanuit een geïmporteerde afbeelding

De andere manier om een ​​wrok te creëren is door een afbeelding te importeren. Dit doe je door je sprite te tekenen en vervolgens een afbeelding als kostuum te uploaden.

In de Sprites paneel, klik op het 'Paint new sprite' icoon (het penseel).

In de kostuums paneel voor de nieuwe sprite, klik op het pictogram 'Kostuum van bestand uploaden' (de map).

Upload de starfish.png bestand in de bundel voor deze cursus.

Als uw tekeningvenster in de bitmapmodus staat, klikt u op de Converteren naar vector knop.

Formaat wijzigen en de zeester verplaatsen totdat deze rechtsonder op het podium staat:

Je hebt nu vier sprites en je podium ziet er een beetje uit! Maak je daar geen zorgen over: we verplaatsen de sprites in een later deel van deze tutorial met behulp van scripts en verbergen de tekstsprite totdat deze nodig is.

Samenvatting

In deze zelfstudie heb je geleerd hoe je achtergronden en sprites voor je project kunt maken. Je kunt dan scripts gebruiken om je achtergronden en sprites te veranderen en te verplaatsen. Zoals je hebt geleerd, zijn er verschillende manieren om achtergronden en sprites te maken: je kunt ze kiezen in de Scratch-bibliotheek, je kunt ze zelf tekenen, bestaande bewerken of afbeeldingen uploaden.

In het volgende deel van deze reeks gaan we verder met blokken en leer je hoe ze werken en wat de verschillende soorten blokken doen..