¡Menú del juego BOT_IS_LONELY!
BOT_IS_LONELY game menu!
por Jo Yelland @thejoymachine
- 154
- 9
- 4
(Traducido automáticamente del inglés)
Introducción
Introduction
¡Me encanta Canva! Lo uso como base para animaciones, para mis diseños de camisetas y para crear bocetos de proyectos complejos rapidísimo.
Echemos un vistazo a la pantalla de menú de mi novela visual en progreso sobre la sapiencia y el comportamiento 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".
Suministros
Supplies
Muchísimo Canva. ¿Ves líneas divertidas y secciones animadas? Hecho en Canva. ¿Oyes esa música? Hecho en Canva.
Casi TODO en este sitio son elementos básicos de la biblioteca de Canva, elementos de Canva modificados ligeramente o mi propio trabajo.
Además de Canva, utilicé Clip Studio Paint y Medibang Paint para los recursos artísticos del juego.
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.
¡Lo primero es lo primero!
First things first!
Decide qué hacer. En este caso, quería crear un vídeo compatible con Tyrannobuilder y Visual Novel Engine, que funcionara en bucle y que pudiera exportarse a Unreal Engine para futuras mejoras. El bucle y los elementos de menú interactivos se crean en el motor, pero los creé en el vídeo para que funcionaran juntos. Un poco de trabajo minucioso para crear áreas interactivas y interactivas en el motor, ¡y listo!
El objetivo principal era crear un vídeo que se ajustara al tema y la sensación que quiero para el juego.
Esta es BOT_1. Es adorable. Eres tú. Tomé su esquema de colores y lo dividí en los colores que lo componen. Trabajé con ellos para intentar crear cierta cohesión entre la interfaz de usuario y los personajes en pantalla.
(¡BOT_1 también está animado en Canva para parpadeos básicos y movimientos de boca!)
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!)
¡Lo segundo es lo segundo!
Second things second!
Ya tenía los colores elegidos y una idea de la atmósfera que quería. Decidí que el menú fuera tranquilo y dulce, lo cual contrasta totalmente con cómo puede ser el inicio según tus preferencias.
Ahora viene la parte más aburrida de todo el proceso: ¡LAS MINIATURAS! Son absolutamente necesarias, no solo para que la vista y el cerebro se entretengan y encuentren algo que funcione, sino también si pretenden publicar su trabajo.
Si se trata de un libro de arte, son muy útiles para transmitir ideas. Lo mismo ocurre con la creación de videojuegos. Si quieres publicar, incluye tu proceso: tu profesionalismo será más evidente para clientes y editores potenciales.
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.
Tercer paso: ¡el divertido!
Third step - the fun one!
¡Bueno, ya tenemos un plan! ¡Tenemos nuestros colores! ¡Sabemos cuál es nuestro tema y nuestra atmósfera! ¡A experimentar!
Canva es fenomenal en este punto. No te desanimes si no te ciñes exactamente a la miniatura; la mayoría de la gente no lo hace. Considéralo una plataforma para lo genial.
Terminé pasando tres días trasteando con el menú, no solo asegurándome de que se viera como quería, sino también de que el archivo final estuviera bien optimizado y de que la música tuviera el ritmo perfecto. Durante ese tiempo, cambió mucho, pero ahora es funcional y encaja a la perfección en un videojuego compacto. Aquí está, recién salido del motor, visible en 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
Cómo funciona en Canva
How it works in Canva
Canva es un conjunto de herramientas flexible que funciona como un editor WYSIWYG. ¿WYSIWYG? ¡Lo que ves es lo que obtienes! Si puedes ver la interfaz, puedes empezar a crear. Primero, crea un documento: puede ser un lienzo en blanco predefinido, un lienzo en blanco con el tamaño que ya has determinado, ¡o una plantilla! Las plantillas son fantásticas y una forma sencilla de crear algo, pero opté por la segunda opción porque tenía algo específico en mente.
Una vez definido el tamaño, la orientación y el tipo de lo que sería el menú, comencé a recopilar los recursos que Canva ya tenía. Si miran a continuación, pueden ver el espacio de trabajo y la búsqueda de "Elementos": esto es lo que necesitamos. Recopilamos todos los elementos individuales que necesitaremos y comenzamos con la siguiente parte: ¡modificarlos según nuestras necesidades!
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!
Y ahora la parte más difícil...
And now the hardest part...
...lo cual no es nada difícil, solo lleva tiempo. Verás, quería tener un menú animado en bucle, lo que significa ANIMACIÓN DE VIDEO. Por suerte, podemos hacerlo en Canva, ¡sin necesidad de ningún software costoso!
Si observas la imagen de abajo, notarás que hay una barra debajo del lienzo donde creé el menú. Esta es la línea de tiempo y es fundamental entender cómo funciona. Cada elemento que uses, ya sean GIF animados, imágenes, efectos de sonido y música, tiene su propia línea de tiempo.
Primero, crea tu escena completa. Lo que debe mostrar al final. Luego, revisa cada elemento uno a uno. Haz clic en el elemento y verás que su línea de tiempo morada aparece en la parte inferior, junto con una marca de tiempo. Esta marca te permite ver qué sucede y cuándo. Solo tienes que alargar o acortar la línea de tiempo morada para que coincida con el tiempo que quieres que el elemento esté en pantalla o funcionando.
Animar es facilísimo. Si un elemento no se mueve como necesitas, o si quieres que rebote y brille, puedes usar los botones "Animación" o "Efectos" en la parte superior. Si has creado algo tú mismo, puedes subirlo al menú de la izquierda y usarlo como si fuera parte 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.
¡Y por último!
And finally!
¡Listo! Aquí está funcionando en el juego. Me queda un largo camino por delante para terminar "BOT_IS_LONELY", pero Canva me facilitó gran parte del trabajo. Lo he usado para crear las animaciones de mis personajes, reproducir vídeos, crear los fondos y crear toda la interfaz de usuario y los créditos.
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.
¡Bono EXTRA!
EXTRA Bonus!
¿Quieres crear un juego? Prueba este proyecto: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Lo actualizo cada viernes para incluir tutoriales simplificados, dónde conseguir recursos para juegos y cómo crear el tuyo propio, ¡incluso música! ¡Todos los tipos de juego son bienvenidos!
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 comentarios
Es una música bastante relajada, me gusta, ¡pero me entusiasma más la idea del cómic de terror!
@soulsbain ¡prepárate para el terror, sujeto a los fondos de Kickstarter! XD
Más terror por favor
@johnyelland1234 ¡A por ello! Más sobre el cómic LADDER y un nuevo juego de terror point-and-click que llegará en 2026: Memoria Mortuorum.
Entra o únete Gratis para comentar