Share
Wat je gaat creërenIn deze tutorial ontwerpen we een gamescherm voor een soort 'match three'. We transformeren geometrische basisvormen om prachtige dierenpictogrammen te maken en verschillende soorten verloopvullingen toe te passen om de objecten levend en driedimensionaal te maken. We eindigen met het maken van een achtergrond voor het instellen van een sjabloon voor een gamescreen.
"Match drie" -games zijn erg populair, vooral voor mobiele apparaten. De gameplay is vrij simpel en verslavend: plaats drie identieke objecten op een rij om steeds meer punten te scoren. In deze tutorial ontwerpen we een levendig gamepaneel met mooie vierkante dieren. Bovendien helpt deze les je om geïnspireerd te raken en elk ander type match-drie-spelscherm te ontwerpen, bijvoorbeeld een spel met kostbare edelstenen of plat fruit. Voel je vrij om Envato Market te bekijken voor meer ideeën over het ontwerp van een plat spelscherm, en laten we aan de slag gaan!
Begin met het maken van een Nieuw bestand van 600 x 800 px. Als u niet graag op een witte achtergrond werkt, gebruik dan de Rechthoekgereedschap (M) maak een vorm die het canvas bedekt en vul deze met geel. Slot het in de Lagen paneel door op een klein te klikken vergrendelingspictogram bovenop. We houden deze vorm onderaan en kunnen deze later opnieuw kleuren.
Laten we het hoofd van ons eerste dier vormen: een schattige beer. Neem de Afgerond rechthoekgereedschap (M) en maak een 200 x 200 px lila vorm. Vergeet niet dat u het kunt aanpassen Hoekradius van je vorm via de knoppenbalk bovenaan. Laten we het houden 25%.
Neem de Vulgereedschap (G), houden Verschuiving en plaats de Vullen schuif verticaal over de vorm en breng een tweekleurige laag aan Lineair kleurverloop.
We kunnen de kleur van de vulling aanpassen door op de uiteinden van de schuifregelaar te klikken en de juiste kleur in te kiezen Kleur paneel. Laten we een licht-lila kleur kiezen voor de bovenste punt en een donkerdere kleur voor de onderkant van de vorm, waardoor de dimensie wordt toegevoegd.
Laten we beginnen met het vormen van het oog. Neem de Ellipse Tool (M), houden Verschuiving en maak een even cirkel van 50 x 50 px. Schakel over naar de Vulgereedschap (G) en verander de Type vulling naar Radial in het bedieningspaneel bovenaan. Breng een witte kleur aan op het midden van de vorm en grijze kleur op de rand, waardoor het oog bolvormig wordt.
Laten we nu de iris vormen. Kopiëren en Pasta (Command-C> Command-V) de oogbol, houd vast Command-Shift en maak de kopie kleiner, kleiner tot ongeveer 35 x 35 px met behulp van de Verplaatsingsgereedschap (V). Vul het met een radiale vulling van turquoise kleur in het midden en donker turquoise aan de rand.
Duplicaat (Command-C> Command-V) de iris en maak de kopie kleiner en vorm een pupil. Vul het met een donker-turquoise effen kleur. Maak een kleine witte markering bovenop het oog, met behulp van de Ellipse Tool (M).
Nu het oog klaar is, Groep (Command-G) al zijn elementen, houd vast Option-Shift en sleep naar rechts, maak een kopie. Groep beide ogen, selecteer ze samen met de vorm van het hoofd en gebruik de richten paneel op de bovenkant naar richten de vormen Horizontaal naar de centrum.
Gebruik de Ellipse Tool (M) om een geplette neus van te maken 50 x 15 px grootte. Pas een verticale lineaire vulling toe van lichtroze bovenop naar donkerrozer aan de onderkant. Maak er een kleinere donkerroze ellips bovenop en wissel van positie Mengmodus naar Scherm in de Lagen paneel, waardoor een semi-transparant hoogtepunt wordt gevormd.
Vervolgens vormen we een mond. Gebruik de Pen gereedschap (P) en hou vast Verschuiving om een rechte lijn te maken. Stel de Vullen kleur tot geen in de Kleur paneel en breng een donker-lila kleur aan op de Beroerte. Ga naar de Beroerte paneel en stel de Breedte naar 2 pt, alle andere opties als standaard.
Neem de Hoekgereedschap (C) en maak de hoeken van de vorm volledig afgerond door de hoekknopen omhoog te trekken.
Duplicaat de vorm en gebruik de Draai horizontaal functie vanaf de bedieningsbalk bovenaan om de vorm te spiegelen.
Nu voegen we de oren toe. Gebruik de Ellipse Tool (M) om een te maken 70 x 70 px cirkel. Laten we zorgen dat het mooi in het hoofd past door de juiste kleur te kiezen. Vind de Kleur kiezer hulpmiddel in de Kleur paneel, vasthouden en slepen het boven het hoofd van de beer. Je zult een vergrootglas zien, zodat je de kleur kunt vinden die je nodig hebt. Kies de licht-lila kleur naast het oor en laat de muisknop los. Nu kunt u het oor selecteren en de kleur uit het staal naast de kleur toepassen Kleur kiezer. Daar hebben we het!
Laten we nu kijken hoe we de complexe opvulstijl van andere objecten kunnen kopiëren. Duplicaat (Command-C> Command-V) het oor en maak de kopie kleiner. Kopiëren (Command-C) het hoofd, selecteer het bovenste element van het oor en ga naar Bewerken> Stijl plakken. Bewerk de positie van de vulling met behulp van de Vulgereedschap (G). Voeg een tweede oor toe aan de andere kant van het hoofd.
Zoals u kunt zien, kunnen we niet alleen de objecten zelf kopiëren, maar ook hun uiterlijk.
Laten we eindigen met de beer door nog een element toe te voegen: een gestileerde buik. Gebruik de Ellipse Tool (M) om een ovaal te maken en het te vullen met donker-lila kleur, schakel de Mengmodus naar Scherm in de Lagen paneel.
We kunnen de gemaakte ellips plaatsen binnen de vorm van het hoofd, waardoor de overbodige stukken worden verborgen. Selecteer het gemaakte ovaal in de Lagen paneel en sleep het over de vorm van het hoofd totdat je een smalle blauwe streep ziet zoals in de onderstaande afbeelding. Laat de ellips vallen en plaats deze in de koplaag.
En we zijn klaar! Laten we naar het volgende dierpictogram gaan.
Laten we het bear-pictogram gebruiken dat we al hebben gemaakt om een nieuw element te maken. Duplicaat en laten we de kleuren van de lineaire vulling wijzigen in wit bovenaan en grijs onderaan. Kleurt dan de oren van lila in een heel donkergrijs. Verander ook de lineaire vulling van de neus in donkergrijs en pas de kleur van de mond aan Beroerte, schakelen naar roze.
Pas tenslotte de kleur van de ogen aan door de radiale vulling te veranderen in lichtbruin in het midden en donkerder bruin aan de randen, waarbij de pup in de donkerbruine kleur ook wordt aangebracht.
Vervolgens voegen we donkere vlekken rond de ogen toe om ons karakter meer op een echte panda te laten lijken. Gebruik de Ellipse Tool (L) om een te maken 75 x 95 px vorm, vullen met een lineaire vulling van donkergrijze tinten.
Draai de vorm rond 45 graden en plaats het onder het oog door de vorm naar beneden te slepen in de Lagen paneel.
Let op het verschil tussen het plaatsen van een vorm binnen de andere en één vorm plaatsen onder de andere. Deze keer zie je een langere blauwe markering, zoals in de onderstaande afbeelding.
Dupliceren (Command-C> Command-V) de plek en Draai het horizontaal naar de andere kant, met behulp van de transformaties functie in de bedieningsbalk bovenaan. Verplaats de kopie van de plek, zodat deze in het tweede oog past.
En daar hebben we onze panda! Laten we verder gaan.
Laten we duplicaat het pandakarakter en verander het in een leuke wasbeer! Verander allereerst de kleur van de vorm van het hoofd in een verticale lineaire vulling van lichtblauw bovenaan naar donkerblauw onderaan.
Ga door met het veranderen van de kleuren van de ogen naar rozerood en laten we de mond vervangen. Gebruik de Pen gereedschap (P) om een in een hoek geplaatste mondvorm te maken met donkergrijs Beroerte.
Laten we nu de oren aanpassen. Selecteer de grotere cirkel van de oorvorm en Converteren naar curven, met behulp van de knop in de bedieningsbalk bovenaan. Neem de Node Tool (A) en selecteer het bovenste knooppunt van de vorm. Converteren naar scherp vanaf het bedieningspaneel aan de bovenkant, waardoor het oor wees. Doe hetzelfde voor het binnenste gedeelte van het oor: Converteren naar curven en Converteren het bovenste knooppunt scherp maken.
Verander de kleur van het oor, zodat het in het hoofd past en het oor roteert 45 graden. Duplicaat het oor en Draai horizontaal, de kopie aan de andere kant plaatsen.
Selecteer de plek rond het oog met de Vulgereedschap (G) en pas de kleuren van de vulling aan, verander ze naar lichtere en donkerdere blauwtinten. Kopiëren (Command-C) de plek, selecteer de tweede plek en Bewerken> Stijl plakken, een nieuw uiterlijk toepassen.
Eindig met het karakter door een lichtgrijze ellips onder het neusgebied toe te voegen. En dat is het voor de wasbeer! Laten we doorgaan naar ons laatste pictogram!
Laten we ons allereerste pictogram - de paarse beer - dupliceren en gebruiken om een grappige papegaai te maken. Verander de kleur van de kop in lineaire vulling van lichtgroen bovenaan naar donkerder groen onderaan. Verwijder de elliptische buikvorm en de mond van de beer, want we hebben ze niet meer nodig.
Verander de kleur van de ogen in oranjebruin.
Laten we de berenneus in de snavel van een papegaai veranderen! Draai het 90 graden en Converteren naar curven. Selecteer het onderste knooppunt met de Node Tool (A) en Converteren naar scherp vanaf de bedieningsbalk bovenaan.
Verander de kleuren van de lineaire vulling naar geel aan de bovenkant en oranje aan de onderkant.
Neem de Ellipse Tool (M) en maak een smalle vorm van 15 x 40 px. Vul het met lichtgroene kleur en verander de Mengmodus naar Vermenigvuldigen, een donkere semi-transparante veer maken.
Houden Option-Shift en sleep de veer naar rechts, maak een kopie. druk op Command-J een paar keer om nog twee kopieën te maken.
Laten we een laatste detail aan onze papegaai toevoegen. Gebruik de Ellipse Tool (M) om een te maken 40 x 70 px vorm in het midden op het voorhoofd, kies de juiste kleur op de lichtste plek op het voorhoofd en breng een lichtgroene kleur aan op de vorm.
Voeg twee kleinere ellipsen aan beide zijden van de middelste vorm toe. Selecteer alle drie vormen en gebruik de Operatie toevoegen vanaf het bedieningspaneel bovenaan om alle ellipsen samen te voegen tot een enkele vorm.
Dupliceren (Command-C> Command-V) de vorm en verplaats de onderste kopie een stukje naar beneden door op de te drukken Pijl-omlaag sleutel een paar keer. Verander de kleur van de vorm in donkergroen en maak een vlakke schaduw.
En daar hebben we het! Ons papegaaisymbool is klaar!
Hier is onze set van schattige vierkante dieren die we gaan gebruiken als de elementen van een "match three" -game. Laten we verder gaan en een eenvoudig spelscherm maken om te zien hoe het samenwerkt!
Laten we ontsluiten onze achtergrondvorm en verandert de kleur in een zachte sinaasappel. Gebruik de Afgerond rechthoekgereedschap (M) om een te maken 415 x 600 px gele vorm met Hoekradius van 10%.
Dupliceren (Command-C> Command-V) de vorm en maak de kopie kleiner, verander de vulkleur naar donkerder geel.
Duplicaat de nieuwe vorm en het formaat van de kopie weer verkleinen, en de kleur veranderen in dezelfde lichtgele kleur als bij de grotere afgeronde rechthoek.
Tenslotte, duplicaat de grootste afgeronde rechthoek en verplaats de onderste kopie een stukje naar beneden door op de te drukken Pijl-omlaag sleutel een paar keer. Maak de kopie iets groter en verander de Mengmodus naar Vermenigvuldigen in de Lagen paneel, vormt een subtiele schaduw. Al met al hebben we vier afgeronde rechthoeken voor het spelpaneel.
Gebruik de Ellipse Tool (M) en houd ingedrukt Verschuiving maak een grote groene cirkel in het onderste deel van het canvas. Plaats het tussen het spelscherm en de achtergrondvorm. Voeg meer cirkels toe, die het onderste deel van het canvas bedekken.
Selecteer een lichtere groene tint en blijf de Ellipse Tool (M) om kleinere en lichtere cirkels te maken, met eenvoudige gestileerde struiken.
Ga door met dezelfde techniek en vul de bovenkant van het canvas met lichtoranje cirkels met gestileerde wolken.
Nu kunnen we de dierenpictogrammen op het spelpaneel plaatsen. Hier gebruik ik een eenvoudige truc om alle elementen gelijk te maken. Zoals je waarschijnlijk hebt opgemerkt, is onze papegaai iets kleiner dan de rest van de personages, omdat deze geen oren heeft. Dit kan het vormen van de vormen een beetje gecompliceerd maken, en daarom kopieer ik de oren van het pandapictogram en maak ik ze vast aan de papegaai. Maak de oren volledig transparant door de Vullen en Beroerte kleuren voor geen, en groepeer de elementen dan samen.
Nu kunnen we de pictogrammen op een rij plaatsen en het formaat verkleinen, zodat ze op het spelscherm passen. Houd de pictogrammen geselecteerd, ga naar de bedieningsbalk bovenaan en open de Regelen paneel. Klik hier vanaf Ruimte horizontaal en vink het Automatische distributie checkbox, de gap-waarde instellen op 0 px.
Jij kan richten de vormen naar Bodem ook, met behulp van hetzelfde Regelen paneel.
Groep (Command-G) de rij met pictogrammen, houd vast Option-Shift en sleep het naar boven, maak een kopie. druk op Command-J meerdere keren, het vullen van het spelscherm met pictogrammen. Selecteer alle rijen, ga naar de Regelen paneel en klik Verticaal ruimte. Haal het vinkje weg Automatisch distribueren en stel de gap-waarde in op 2 px, smalle openingen maken tussen de randen van de pictogrammen.
U kunt de lay-out aanpassen door de pictogrammen kleiner of groter te maken en de afstand tussen de rijen aan te passen, waardoor de pictogrammen in het spelpaneel passen.
Direct hierna kunnen we de pictogrammen willekeurig schudden, waardoor de hele scène op een echt spelscherm lijkt. Dubbelklik op de rij met pictogrammen om de groep te isoleren en de pictogrammen horizontaal in de groep te verplaatsen terwijl u deze vasthoudt Verschuiving.
Goed werk! Ons match-drie gamescherm is klaar! Ik hoop dat je deze tutorial met plezier hebt gevolgd en een aantal nuttige tips en trucs hebt ontdekt tijdens het werken met basisvormen, verloopvullingen en verschillende transformaties van Affinity Designer. Voel je vrij om je kennis toe te passen tijdens het maken van nieuwe game- en personageontwerpen en vergeet niet om je geweldige resultaten te delen!
Als je wilt weten hoe je wat meer gamedesign-spullen kunt maken in Affinity Designer, kijk dan ook naar de volgende tutorials:
Accentsconagua