Menu gry BOT_IS_LONELY!
BOT_IS_LONELY game menu!
przez Jo Yelland @thejoymachine
- 152
- 9
- 4
(Przetłumaczone automatycznie z języka angielskiego)
Wstęp
Introduction
KOCHAM Canvę! Używam jej jako bazy do animacji, do moich projektów koszulek i do tworzenia szkiców skomplikowanych projektów super szybko!
Przyjrzyjmy się ekranowi menu mojej powstającej powieści wizualnej o inteligencji i zachowaniach paraspołecznych, „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".
Zaopatrzenie
Supplies
Tak dużo Canvy. Widzisz dziwne linie i animowane sekcje? Zrobione w Canvie. Słyszysz tę muzykę? Zrobione w Canvie.
Prawie WSZYSTKO w tym tekście to podstawowe elementy z biblioteki Canva, elementy Canva lekko zmodyfikowane lub moja własna praca.
Oprócz Canvy do tworzenia elementów graficznych w grze używałem Clip Studio Paint i Medibang Paint.
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.
Najważniejsze na początek!
First things first!
Zdecyduj, co zrobić. W tym przypadku chciałem stworzyć wideo przyjazne dla Tyrannobuilder i Visual Novel Engine, które działałoby w pętli i potencjalnie byłoby eksportowane do Unreal Engine do przyszłej pracy. Pętla i klikalne elementy menu są wykonane w silniku, ale stworzyłem je w wideo, aby wszystkie działały razem. Trochę bardzo ostrożnej pracy, aby zbudować klikalne, reaktywne obszary w silniku i gotowe!
Głównym celem było stworzenie filmu, który pasowałby do tematu i klimatu gry.
To jest BOT_1. Jest urocza. Ona jest tobą. Wziąłem jej schemat kolorów i rozbiłem go na kolory składowe. To właśnie z nimi pracowałem, aby spróbować zbudować trochę spójności między interfejsem użytkownika a postaciami na ekranie.
(BOT_1 jest także animowany w programie Canva, co umożliwia wykonywanie podstawowych mrugnięć oczami i ruchów ust!)
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!)
Po drugie, po drugie!
Second things second!
Więc miałam wybrane kolory i pomysł, co chcę, aby miało klimat. Postanowiłam, że menu będzie spokojne i słodkie. Co jest w bezpośredniej opozycji do tego, jak może wyglądać początek, w zależności od twoich wyborów.
A teraz najnudniejsza część całego procesu - MINIATURY! Są absolutnie niezbędne, nie tylko po to, by zaangażować oczy i mózg, żebyś znalazł coś, co zadziała, ale także, jeśli zamierzasz opublikować swoją pracę.
Jeśli to artbook, są BARDZO pomocne w przekazywaniu pomysłów. To samo dotyczy tworzenia gier. Jeśli chcesz zostać opublikowany, uwzględnij swój proces — Twój profesjonalizm będzie bardziej widoczny dla potencjalnych klientów i wydawców.
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.
Trzeci krok – ten przyjemny!
Third step - the fun one!
Okej, więc mamy plan! Mamy nasze kolory! Wiemy, jaki jest nasz temat i nastrój! Bawmy się!
Canva jest w tym momencie fenomenalna. Nie zniechęcaj się, jeśli nie trzymasz się dokładnie swojego miniatura — większość ludzi tego nie robi. Potraktuj to jako platformę startową do czegoś fajnego.
Skończyło się na tym, że spędziłem 3 dni na majstrowaniu przy menu, nie tylko upewniając się, że wygląda tak, jak chciałem, ale także, że ukończony plik jest dobrze zoptymalizowany i że rytmy muzyczne są dokładnie takie, jak powinny. Przez ten czas wiele się zmieniło, ale teraz jest funkcjonalne i ładnie pasuje do małej gry wideo. Oto ono po wyjęciu z silnika, widoczne w 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
Jak to działa w Canva
How it works in Canva
Canva to elastyczny zestaw narzędzi, działa na zasadzie edytora WYSIWIG. WYSIWYG? Co widzisz, to dostajesz! Jeśli widzisz interfejs, możesz zacząć tworzyć. Po pierwsze, zaczynasz od utworzenia dokumentu — może to być wstępnie zdefiniowane puste płótno, puste płótno, w którym już określiłeś, jaki rozmiar zostanie utworzony, lub szablon! Szablony są fantastyczne i łatwym sposobem na stworzenie czegoś, ale wybrałem drugą opcję, ponieważ miałem na myśli coś konkretnego, co chciałem stworzyć.
Tak więc, po ustawieniu rozmiaru, orientacji i typu tego, co miałoby stać się menu, zacząłem zestawiać ze sobą zasoby, które Canva już ma. Jeśli spojrzysz poniżej, zobaczysz obszar roboczy i wyszukiwanie „Element” — to jest to, czego chcemy. Zbierz wszystkie poszczególne elementy, których będziemy potrzebować, a następnie zacznijmy następną część — dostosujmy je do naszych potrzeb!
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!
A teraz najtrudniejsza część...
And now the hardest part...
...co wcale nie jest takie trudne, po prostu zabiera czas. Widzicie, chciałem mieć zapętlone animowane menu, co oznacza ANIMACJĘ WIDEO. Na szczęście dla nas, możemy to zrobić w Canva - nie jest wymagane żadne drogie dodatkowe oprogramowanie!
Jeśli spojrzysz na poniższy obraz, zauważysz, że pod płótnem, na którym budowałem menu, znajduje się pasek. To jest oś czasu i naprawdę ważne jest zrozumienie, jak to działa. Każdy element, którego używasz, czy to animowane gify, obrazy, sfx i muzyka, ma WŁASNĄ oś czasu.
Najpierw stwórz całą scenę. To, co ma na końcu wyglądać. Następnie przejdź przez każdy element po kolei. Kliknij element, a zobaczysz jego fioletową oś czasu na dole, wraz z znacznikiem czasu. Znacznik czasu pozwala zobaczyć, co się dzieje, kiedy. Wszystko, co musisz zrobić, to wydłużyć lub skrócić tę fioletową oś czasu, aby dopasować ją do czasu, w którym chcesz, aby element był na ekranie lub działał.
Animowanie jest naprawdę proste, jeśli element nie porusza się już tak, jak tego potrzebujesz, lub może chcesz, aby odbijał się i świecił, możesz użyć przycisków Animate lub Effects u góry. Jeśli sam coś stworzyłeś, możesz to przesłać w menu po lewej stronie i używać, jakby było częścią 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.
I na koniec!
And finally!
Ta-dah! Oto praca w samej grze. Mam przed sobą długą drogę do ukończenia „BOT_IS_LONELY”, ale Canva znacznie ułatwiła mi sporą część pracy. Użyłem jej do zbudowania animacji postaci, uruchomienia wideo, stworzenia tła i stworzenia całego interfejsu użytkownika i napisów końcowych.
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.
DODATKOWY bonus!
EXTRA Bonus!
Chcesz stworzyć grę? Wypróbuj ten projekt: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Aktualizuję go co piątek, aby uwzględnić uproszczone instrukcje, gdzie zdobyć zasoby gry i jak tworzyć własne - nawet muzykę! Wszystkie typy gier są mile widziane!
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 komentarze
To całkiem spokojna muzyka, podoba mi się, ale bardziej ekscytuje mnie pomysł na komiks grozy!
@soulsbain przygotuj się na przerażenie, zależnie od funduszy Kickstarter! XD
Więcej horroru proszę
@johnyelland1234 Na to! Więcej komiksu LADDER i nowej gry point and click horror w 2026 - Memoria Mortuorum!
Zaloguj się lub dołącz bezpłatnie, aby móc komentować