Menu do jogo BOT_IS_LONELY!
BOT_IS_LONELY game menu!
de Jo Yelland @thejoymachine
- 152
- 9
- 4
(Traduzido automaticamente de inglês)
Introdução
Introduction
EU AMO o Canva! Uso-o como base para animações, para os designs das minhas camisetas e para criar rascunhos de projetos complexos super rápido!
Vamos dar uma olhada na tela de menu da minha visual novel em andamento sobre sapiência e comportamento parassocial, "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".
Suprimentos
Supplies
Muu ...
Quase TUDO aqui são itens básicos da biblioteca do Canva, itens do Canva ligeiramente modificados ou meu próprio trabalho.
Além do Canva, usei o Clip Studio Paint e o Medibang Paint para os recursos de arte do jogo.
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.
Vamos começar com o mais importante!
First things first!
Decida o que fazer. Neste caso, eu queria criar um vídeo compatível com o Tyrannobuilder e a Visual Novel Engine, que funcionasse em loop e potencialmente fosse exportado para a Unreal Engine para trabalhos futuros. O loop e os itens de menu clicáveis são feitos na engine, mas eu os criei no vídeo para que todos funcionassem juntos. Um pouco de trabalho cuidadoso para criar áreas clicáveis e reativas na engine e pronto!
O foco principal era criar um vídeo que se encaixasse no tema e na sensação que eu queria para o jogo.
Esta é a BOT_1. Ela é adorável. Ela é você. Peguei o esquema de cores dela e o dividi nas cores componentes. Foi com elas que trabalhei para tentar criar um pouco de coesão entre a interface do usuário e os personagens na tela.
(BOT_1 também é animado no Canva para piscar de olhos e movimentos de boca básicos!)
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!)
Em segundo lugar, o mais importante!
Second things second!
Então, eu já tinha escolhido as cores e uma ideia do que queria para o ambiente. Decidi criar um cardápio tranquilo e agradável. O que é o oposto de como o começo pode ser, dependendo das suas escolhas.
Agora, a parte mais chata de todo o processo: MINIATURAS! Elas são absolutamente necessárias, não apenas para exercitar seus olhos e cérebro e encontrar algo que funcione, mas também se você pretende publicar seu trabalho.
Se for um livro de arte, eles são MUITO úteis para transmitir ideias. O mesmo vale para a criação de jogos. Se você quer ser publicado, inclua seu processo — seu profissionalismo ficará mais evidente para potenciais clientes e editoras.
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.
Terceiro passo - o divertido!
Third step - the fun one!
Certo, então temos um plano! Temos nossas cores! Sabemos qual é o tema e a atmosfera! Vamos brincar!
O Canva é fenomenal nesse quesito. Não desanime se você não seguir exatamente a sua miniatura — a maioria das pessoas não segue. Veja-o como uma plataforma de lançamento para o que há de mais moderno.
Acabei passando 3 dias mexendo no menu, não só para garantir que ficasse como eu queria, mas também para garantir que o arquivo final estivesse bem otimizado e que as batidas musicais estivessem exatamente corretas. Durante esse tempo, ele mudou bastante, mas agora está funcional e se encaixa perfeitamente em um videogame compacto. Aqui está ele, retirado do motor gráfico, visível no 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
Como funciona no Canva
How it works in Canva
O Canva é um conjunto de ferramentas flexível, baseado no que é conhecido como um editor WYSIWIG. WYSIWYG? O que você vê é o que você obtém! Se você consegue ver a interface, pode começar a criar. Primeiro, você começa criando um documento — pode ser uma tela em branco predefinida, uma tela em branco com o tamanho que você já determinou ou um modelo! Modelos são fantásticos e uma maneira fácil de criar algo, mas optei pela segunda opção porque tinha algo específico em mente que queria criar.
Assim, tendo definido o tamanho, a orientação e o tipo do que se tornaria o menu, comecei a reunir os recursos que o Canva já possui. Se você observar abaixo, poderá ver a área de trabalho e a busca por "Elementos" — é isso que queremos. Reunimos todos os itens individuais que precisaremos e começamos a próxima parte — alterando-os de acordo com as nossas necessidades!
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!
E agora a parte mais difícil...
And now the hardest part...
...o que não é tão difícil, apenas demorado. Veja bem, eu queria ter um menu animado em loop, o que significa ANIMAÇÃO EM VÍDEO. Para nossa sorte, podemos fazer isso no Canva — sem precisar de softwares extras caros!
Se você observar a imagem abaixo, notará que há uma barra abaixo da tela onde eu estava criando o menu. Esta é a linha do tempo e é muito importante entender como ela funciona. Cada elemento que você usa, sejam GIFs animados, imagens ou efeitos sonoros e música, tem sua PRÓPRIA linha do tempo.
Primeiro, crie sua cena completa. O que ela deve exibir no final. Em seguida, analise cada item, um de cada vez. Clique no elemento e você verá sua linha do tempo roxa aparecer na parte inferior, juntamente com um registro de tempo. O registro de tempo permite que você veja o que acontece e quando. Tudo o que você precisa fazer é aumentar ou diminuir essa linha do tempo roxa para corresponder ao horário em que você deseja que o item esteja na tela ou funcionando.
Animar é muito fácil. Se um elemento ainda não estiver se movendo da maneira que você precisa, ou se você quiser que ele salte e brilhe, você pode usar os botões Animar ou Efeitos na parte superior. Se você criou algo, pode carregá-lo no menu à esquerda e usá-lo como se fosse parte do 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.
E finalmente!
And finally!
Ta-dah! Aqui está funcionando no jogo. Tenho um longo caminho pela frente para terminar "BOT_IS_LONELY", mas o Canva facilitou muito o trabalho. Usei-o para construir as animações dos meus personagens, executar o vídeo, criar os fundos e criar toda a interface do usuário e os 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.
Bônus EXTRA!
EXTRA Bonus!
Quer criar um jogo? Então experimente este projeto: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Eu o atualizo toda sexta-feira para incluir tutoriais simplificados, onde obter recursos do jogo e como criar os seus próprios — até músicas! Todos os tipos de jogos são bem-vindos!
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 comentários
É uma música bem tranquila, eu gosto, mas estou mais animado com a ideia do quadrinho de terror!
@soulsbain prepare-se para ficar apavorado, sujeito aos fundos do Kickstarter! XD
Mais terror, por favor
@johnyelland1234 Pronto! Mais sobre a história em quadrinhos LADDER e um novo jogo de terror point and click que chegará em 2026: Memoria Mortuorum!
Faça login ou cadastre-se Gratuitamente para comentar