Menu du jeu BOT_IS_LONELY !
BOT_IS_LONELY game menu!
par Jo Yelland @thejoymachine
- 152
- 9
- 4
(Traduction automatique de l’anglais)
Introduction
Introduction
J'ADORE Canva ! Je l'utilise comme base pour mes animations, pour la création de mes t-shirts et pour créer très rapidement des ébauches de projets complexes !
Jetons un œil à l'écran de menu de mon roman visuel en cours sur la sapience et le comportement parasocial, « 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".
Fournitures
Supplies
Tellement de Canva ! Vous voyez des lignes bizarres et des sections animées ? C'est fait avec Canva. Vous entendez cette musique ? C'est fait avec Canva.
Presque TOUT dans ce document sont des éléments de base de la bibliothèque Canva, des éléments Canva légèrement modifiés ou mon propre travail.
Outre Canva, j'ai utilisé Clip Studio Paint et Medibang Paint pour les ressources artistiques du jeu.
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.
Tout d’abord, commençons par le commencement !
First things first!
Décidez de la marche à suivre. Dans ce cas précis, je souhaitais créer une vidéo compatible avec Tyrannobuilder et le moteur Visual Novel, qui fonctionnerait en boucle et pourrait être exportée vers Unreal Engine pour un travail ultérieur. La boucle et les éléments de menu cliquables sont intégrés au moteur, mais je les ai créés dans la vidéo pour qu'ils fonctionnent ensemble. Un petit travail minutieux pour créer des zones cliquables et réactives dans le moteur, et le tour est joué !
L’objectif principal était de créer une vidéo qui correspondrait au thème et à l’ambiance que je souhaite pour le jeu.
Voici BOT_1. Elle est adorable. C'est vous. J'ai repris sa palette de couleurs et je l'ai décomposée en couleurs composantes. C'est avec elles que j'ai travaillé pour essayer de créer une certaine cohésion entre l'interface utilisateur et les personnages à l'écran.
(BOT_1 est également animé dans Canva pour les clignements des yeux et les mouvements de la bouche de base !)
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!)
Deuxièmement, les choses deuxièmement !
Second things second!
J'avais donc choisi les couleurs et une idée de l'ambiance que je souhaitais. J'ai décidé de créer un menu calme et agréable, à l'opposé de ce que pourrait être le début, selon vos choix.
Passons maintenant à la partie la plus ennuyeuse du processus : les miniatures ! Elles sont absolument indispensables, non seulement pour stimuler votre regard et votre réflexion afin de trouver quelque chose qui fonctionne, mais aussi si vous souhaitez publier votre travail.
S'il s'agit d'un artbook, ils sont très utiles pour transmettre des idées. Idem pour la création de jeux. Si vous souhaitez être publié, décrivez votre processus : votre professionnalisme sera plus évident pour les clients et éditeurs potentiels.
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.
Troisième étape – celle du plaisir !
Third step - the fun one!
Bon, on a un plan ! On a nos couleurs ! On connaît notre thème et notre ambiance ! On s'amuse !
Canva est phénoménal à ce stade. Ne vous découragez pas si vous ne vous en tenez pas exactement à votre miniature ; la plupart des gens ne le font pas. Considérez-le comme un tremplin vers le cool.
J'ai finalement passé trois jours à peaufiner le menu, non seulement pour m'assurer qu'il correspondait à mes attentes, mais aussi que le fichier final était bien optimisé et que les rythmes musicaux étaient parfaitement adaptés. Pendant ce temps, il a beaucoup évolué, mais il est désormais fonctionnel et s'intègre parfaitement dans un jeu vidéo compact. Le voici, une fois sorti du moteur, visible dans 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
Comment ça marche dans Canva
How it works in Canva
Canva est un ensemble d'outils flexibles fonctionnant comme un éditeur WYSIWIG. WYSIWYG ? Ce que vous voyez est ce que vous obtenez ! Si vous voyez l'interface, vous pouvez commencer à créer. Commencez par créer un document : il peut s'agir d'une zone de travail vierge prédéfinie, d'une zone de travail vierge dont vous avez déjà déterminé la taille, ou d'un modèle ! Les modèles sont fantastiques et permettent de créer facilement, mais j'ai opté pour la deuxième option car j'avais un projet précis en tête.
Après avoir défini la taille, l'orientation et le type de ce qui allait devenir le menu, j'ai commencé à rassembler les ressources déjà présentes sur Canva. Ci-dessous, vous pouvez voir l'espace de travail et la recherche « Élément » : c'est ce que nous voulons. Rassemblez tous les éléments individuels dont nous aurons besoin, puis passez à l'étape suivante : les adapter à nos besoins !
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!
Et maintenant la partie la plus difficile...
And now the hardest part...
…ce qui n'est pas si compliqué, juste chronophage. Voyez-vous, je voulais un menu animé en boucle, autrement dit une ANIMATION VIDÉO. Heureusement, nous pouvons le faire avec Canva ; aucun logiciel supplémentaire coûteux n'est requis !
Si vous regardez l'image ci-dessous, vous remarquerez qu'il y a une barre sous la toile sur laquelle j'ai créé le menu. C'est la chronologie, et il est essentiel de comprendre son fonctionnement. Chaque élément utilisé, qu'il s'agisse de gifs animés, d'images, d'effets sonores ou de musique, possède sa propre chronologie.
Commencez par créer votre scène complète. Définissez son contenu final. Ensuite, parcourez chaque élément un par un. Cliquez sur l'élément et vous verrez sa chronologie violette apparaître en bas, accompagnée d'un horodatage. Cet horodatage vous permet de visualiser l'action et le moment où elle se produit. Il vous suffit d'allonger ou de raccourcir cette chronologie violette pour qu'elle corresponde au moment où l'élément est affiché ou en fonctionnement.
Animer est très simple. Si un élément ne bouge pas comme vous le souhaitez, ou si vous souhaitez qu'il rebondisse et brille, vous pouvez utiliser les boutons « Animer » ou « Effets » en haut. Si vous avez créé un élément vous-même, vous pouvez le télécharger dans le menu de gauche et l'utiliser comme s'il faisait partie de 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.
Et enfin !
And finally!
Et voilà ! Le voici en action dans le jeu. J'ai encore beaucoup de chemin à parcourir pour terminer « BOT_IS_LONELY », mais Canva m'a grandement facilité la tâche. Je l'ai utilisé pour créer les animations de mes personnages, les vidéos, les arrière-plans et toute l'interface utilisateur, ainsi que le générique.
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.
Bonus SUPPLÉMENTAIRE !
EXTRA Bonus!
Envie de créer un jeu ? Alors essayez ce projet : https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Je le mets à jour chaque vendredi pour y inclure des tutoriels simplifiés, où trouver des ressources et comment créer le vôtre, y compris de la musique ! Tous les types de jeux sont les bienvenus !
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 commentaires
C'est une musique assez relaxante, j'aime bien, mais je suis plus excité par l'idée de la bande dessinée d'horreur !
@soulsbain préparez-vous à être terrifié, sous réserve de fonds Kickstarter ! XD
Plus d'horreur s'il vous plaît
@johnyelland1234 C'est parti ! Plus de contenu pour la BD LADDER et un nouveau jeu d'horreur point-and-click à venir en 2026 : Memoria Mortuorum !
Connectez-vous ou inscrivez-vous gratuitement pour commenter