BOT_IS_LONELY spelmenu!
BOT_IS_LONELY game menu!
van Jo Yelland @thejoymachine
- 152
- 9
- 4
(Automatisch vertaald uit Engels)
Introductie
Introduction
Ik ben dol op Canva! Ik gebruik het als basis voor animaties, voor mijn T-shirtontwerpen en om razendsnel schetsen van complexe projecten te maken!
Laten we eens kijken naar het menuscherm voor mijn visuele roman die nog in ontwikkeling is over intelligentie en parasociaal gedrag, "BOT_IS_LONELY".
I LOVE Canva! I use it as a base for animations, for my tee designs and to create roughs of complex projects super quickly!
Let's take a look at the menu screen for my in-progress visual novel about sapiency and parasocial behaviour, "BOT_IS_LONELY".
Benodigdheden
Supplies
Zooooo veel Canva. Zie je gekke lijnen en geanimeerde secties? Gemaakt in Canva. Hoor je die muziek? Gemaakt in Canva.
Bijna ALLES hierin zijn basisitems uit de Canva-bibliotheek, licht aangepaste Canva-items of mijn eigen werk.
Naast Canva heb ik ook Clip Studio Paint en Medibang Paint gebruikt voor de in-game kunst.
Soooooooo much Canva. You see funky lines and animated sections? Done in Canva. You hear that music? Done in Canva.
Almost EVERYTHING in this are base items from the Canva library, Canva items modded slightly, or my own work.
Other than Canva, I used Clip Studio Paint and Medibang Paint for the in-game art assets.
Het allerbelangrijkste eerst!
First things first!
Beslis wat je gaat doen. In dit geval wilde ik een Tyrannobuilder- en Visual Novel Engine-vriendelijke video maken, die in een lus zou werken en mogelijk geëxporteerd zou worden naar Unreal Engine voor toekomstig werk. De lus en klikbare menu-items zijn al in de engine gemaakt, maar ik heb ze in de video gemaakt zodat ze allemaal samenwerken. Een beetje heel zorgvuldig werk om klikbare, reactieve gebieden in de engine te bouwen en je bent klaar!
Het belangrijkste was om een video te maken die paste bij het thema en de sfeer die ik voor het spel wilde creëren.
Dit is BOT_1. Ze is schattig. Ze is jij. Ik heb haar kleurenschema overgenomen en opgedeeld in de componentkleuren. Hiermee heb ik gewerkt om een beetje samenhang te creëren tussen de gebruikersinterface en de personages op het scherm.
(BOT_1 is ook geanimeerd in Canva voor basis oogknipperingen en mondbewegingen!)
Decide what to do. In this instance, I wanted to create a Tyrannobuilder and Visual Novel Engine friendly video, that would work on a loop and potentially be exported into Unreal Engine for future work. The loop and clickable menu items are done in the engine, but I created them in the video so they'd all work together. A little bit of very careful work to build clickable, reactive areas in the engine and it's good to go!
The main focus was to create a video that would fit the theme and feel I want for the game.
This is BOT_1. She is adorable. She is you. I took her colour scheme and broke it down into the component colours. These are what I worked with, to try and build a bit of cohesion between the user interface and the characters on-screen.
(BOT_1 is also animated in Canva for basic eye blinks and mouth movements!)
Het tweede is het tweede!
Second things second!
Dus ik had de kleuren uitgekozen en een idee van hoe ik de sfeer wilde creëren. Ik besloot het menu rustig en lief te maken. Dat staat haaks op hoe het begin eruit kan zien, afhankelijk van je eigen keuzes.
En nu het saaiste deel van het hele proces: MINIATUREN! Ze zijn absoluut noodzakelijk, niet alleen om je ogen en hersenen te prikkelen en iets te vinden dat werkt, maar ook als je van plan bent je werk te publiceren.
Als het een artbook is, zijn ze ZO handig om ideeën over te brengen. Hetzelfde geldt voor het maken van games. Als je wilt publiceren, vermeld dan je proces - je professionaliteit komt dan duidelijker over bij potentiële klanten en uitgevers.
So, I had the colours picked out and an idea of what I wanted for the feel. I decided to make the menu a calm, sweet thing. Which is in direct opposition to how the beginning can be depending on your choices.
Now for the most boring part of the entire process - THUMBNAILS! They're absolutely necessary, not just to engage your eyes and brain so you find something that will work, but also if you intend to publish your work.
If it's an artbook, they are SO helpful for getting ideas across. Ditto for game creation. If you want to get published, include your process - your professionalism will be more obvious to potential clients and publishers.
Derde stap - de leukste!
Third step - the fun one!
Oké, we hebben een plan! We hebben onze kleuren! We weten wat ons thema en onze sfeer zijn! Laten we eens wat experimenteren!
Canva is op dit moment fenomenaal. Wees niet ontmoedigd als je je niet precies aan je thumbnail houdt – de meeste mensen doen dat niet. Zie het als een springplank naar cool.
Uiteindelijk heb ik drie dagen met het menu zitten rommelen. Niet alleen om ervoor te zorgen dat het eruitzag zoals ik wilde, maar ook om ervoor te zorgen dat het voltooide bestand goed geoptimaliseerd was en de muziek precies goed klonk. In die tijd is er veel veranderd, maar het is nu functioneel en past perfect in een compacte videogame. Hier is het uit de engine, te bekijken in Canva: https://www.canva.com/design/DAF6hLtXgvE/LaKPNSVbxVUA4TzcS_1g_Q/watch?utm_content=DAF6hLtXgvE&utm_campaign=share_your_design&utm_medium=link2&utm_source=shareyourdesignpanel
Okay, so we have a plan! We have our colours! We know what our theme and feel are! Let's mess around!
Canva is phenomenal at this point. Don't be disheartened if you don't stick exactly to your thumbnail - most people don't. View it as a launchpad for cool.
I ended up spending 3 days messing around on the menu, not only making sure it looked how I wanted, but that the completed file optimised well and that the music beats were exactly right. During that time it changed a lot, but it is now functional and fits nicely into a small footprint videogame. Here it is out of the engine, viewable in Canva: https://www.canva.com/design/DAF6hLtXgvE/LaKPNSVbxVUA4TzcS_1g_Q/watch?utm_content=DAF6hLtXgvE&utm_campaign=share_your_design&utm_medium=link2&utm_source=shareyourdesignpanel
Hoe het werkt in Canva
How it works in Canva
Canva is een flexibele toolkit, gebaseerd op een zogenaamde WYSIWYG-editor. WYSIWYG? Wat je ziet is wat je krijgt! Als je de interface kunt zien, kun je beginnen met creëren. Je begint met het maken van een document - dit kan een vooraf gedefinieerd leeg canvas zijn, een leeg canvas waarvan je de grootte al hebt bepaald, of een sjabloon! Sjablonen zijn fantastisch en een makkelijke manier om iets te creëren, maar ik koos voor de tweede optie omdat ik iets specifieks in gedachten had dat ik wilde maken.
Nadat ik de grootte, oriëntatie en het type van het menu had ingesteld, begon ik met het verzamelen van de assets die Canva al had. Hieronder zie je de werkruimte en de zoekfunctie 'Element' - dit is wat we willen. Verzamel alle individuele items die we nodig hebben en begin dan met het volgende deel: ze aanpassen aan onze behoeften!
Canva is a flexible tool set, it runs on being what's known as a WYSIWIG Editor. WYSIWYG? What You See Is What You Get! If you can see the interface, you can start making things. Firstly, you start by creating a document - this can be a pre-defined blank canvas, a blank canvas where you have already determined what size it'll be created at, or a template! Templates are fantastic and an easy way to get something created, but I went for the second option because I had something specific in-mind that I wanted to create.
So, having set the size, orientation and type of what would become the menu, I then started collating together assets Canva already has. If you take a look below you can see the workspace and the "Element" search - this is what we want. Collect all the individual items we're going to need, then we start the next part - altering them to our needs!
En nu het moeilijkste gedeelte...
And now the hardest part...
...wat helemaal niet zo moeilijk is, alleen tijdrovend. Kijk, ik wilde een loopbaar geanimeerd menu, wat VIDEOANIMATIE betekent. Gelukkig voor ons kunnen we dat in Canva doen - geen dure extra software nodig!
Als je naar de onderstaande afbeelding kijkt, zie je een balk onder het canvas waarop ik het menu aan het bouwen was. Dit is de tijdlijn en het is erg belangrijk om te begrijpen hoe die werkt. Elk element dat je gebruikt, of het nu geanimeerde gifs, afbeeldingen, sfx en muziek zijn, heeft zijn EIGEN tijdlijn.
Creëer eerst je complete scène. Hoe het er uiteindelijk uit moet zien. Bekijk vervolgens elk item één voor één. Klik op het element en je ziet de paarse tijdlijn onderaan verschijnen, samen met een tijdstempel. De tijdstempel laat zien wat er wanneer gebeurt. Het enige wat je hoeft te doen, is die paarse tijdlijn langer of korter maken, afhankelijk van de tijd waarop je het item op het scherm wilt hebben of wilt laten werken.
Animeren is heel eenvoudig. Als een element nog niet beweegt zoals je wilt, of als je het wilt laten stuiteren en oplichten, kun je de knoppen Animeren of Effecten bovenaan gebruiken. Als je zelf iets hebt gemaakt, kun je het uploaden in het linkermenu en gebruiken alsof het onderdeel is van Canva.
...which isn't that hard at all, just time-consuming. You see, I wanted to have a loopable animated menu, which means VIDEO ANIMATION. Lucky for us, we can do that in Canva - no expensive extra software required!
If you look at the image below, you'll notice that there's a bar underneath the canvas I was building the menu on. This is the timeline and it's really important to understand how that works. Every element you use, whether it's animated gifs, images or sfx and music, has it's OWN timeline.
First, create your complete scene. What it has to look at in the end. Then go through each item one at a time. Click on the element and you'll see it's purple timeline appear at the bottom, along with a timestamp. The timestamp lets you see what happens when. All you need to do, is make that purple timeline longer or shorter to match the time you want the item on-screen or working.
Animating is really easy, if an element isn't already moving the way you need it, or maybe you want it to bounce and glow, you can use the Animate or Effects buttons at the top. If you've created something yourself, you can upload it in the left menu and use it like it's part of Canva.
En tot slot!
And finally!
Ta-dah! Hier werkt het in de game zelf. Ik heb nog een lange weg te gaan om 'BOT_IS_LONELY' af te maken, maar Canva heeft een groot deel van het werk veel gemakkelijker gemaakt. Ik heb het gebruikt om mijn personage-animaties te maken, video's af te spelen, de achtergronden te creëren en de volledige gebruikersinterface en aftiteling te maken.
Ta-dah! Here it is working in the game itself. I have a long road ahead of me to finish 'BOT_IS_LONELY', but Canva made a large chunk of the work much easier. I've used it to build my character animations, run video, create the backgrounds and create the entire user interface and credits.
EXTRA Bonus!
EXTRA Bonus!
Wil je een game maken? Probeer dan dit project: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Ik werk het elke vrijdag bij met vereenvoudigde instructies, waar je game-assets kunt vinden en hoe je je eigen game kunt maken - zelfs muziek! Alle gametypes zijn welkom!
Wanna make a game? Then try this project: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. I update it each Friday to include simplified how-to's, where to get game assets and how to create your own - even music! All game types welcome!
4 opmerkingen
Het is vrij relaxte muziek, ik vind het leuk, maar ik word nog enthousiaster van het horrorstripidee!
@soulsbain bereid je voor op doodsangst, mits Kickstarter-gelden beschikbaar zijn! XD
Meer horror alstublieft
@johnyelland1234 Aan de slag! Meer voor de LADDER-strip en een nieuwe point-and-click horrorgame in 2026 - Memoria Mortuorum!
Log in of doe gratis mee om te reageren