BOT_IS_LONELY oyun menüsü!
BOT_IS_LONELY game menu!
ile Jo Yelland @thejoymachine
- 152
- 9
- 4
(İngilizce dilinden otomatik çeviri)
giriiş
Introduction
Canva'yı SEVİYORUM! Animasyonlar için bir temel olarak, tişört tasarımlarım için ve karmaşık projelerin taslaklarını çok hızlı bir şekilde oluşturmak için kullanıyorum!
Geliştirme aşamasında olduğum zeka ve parasosyal davranışlar hakkındaki görsel romanım "BOT_IS_LONELY"in menü ekranına bir göz atalım.
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".
Tedarik
Supplies
Çok fazla Canva. Eğlenceli çizgiler ve animasyonlu bölümler görüyor musunuz? Canva'da yapıldı. O müziği duyuyor musunuz? Canva'da yapıldı.
Buradaki hemen hemen her şey Canva kütüphanesinden alınan temel öğeler, hafifçe değiştirilmiş Canva öğeleri veya benim kendi çalışmalarımdır.
Canva'nın dışında, oyun içi sanat varlıkları için Clip Studio Paint ve Medibang Paint'i kullandım.
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.
Öncelikle şunu belirtelim!
First things first!
Ne yapacağınıza karar verin. Bu örnekte, bir döngü üzerinde çalışacak ve potansiyel olarak gelecekteki çalışmalar için Unreal Engine'e aktarılabilecek bir Tyrannobuilder ve Visual Novel Engine dostu video oluşturmak istedim. Döngü ve tıklanabilir menü öğeleri motorda yapıldı, ancak hepsini birlikte çalışsınlar diye videoda oluşturdum. Motorda tıklanabilir, tepkisel alanlar oluşturmak için biraz dikkatli çalışma ve hazır!
Oyun için istediğim temaya ve hisse uyan bir video oluşturmaya odaklandım.
Bu BOT_1. O çok sevimli. O sensin. Onun renk şemasını aldım ve onu bileşen renklere ayırdım. Bunlar, kullanıcı arayüzü ile ekrandaki karakterler arasında biraz tutarlılık oluşturmaya çalışmak için çalıştığım şeyler.
(BOT_1'in temel göz kırpma ve ağız hareketleri de Canva'da canlandırılmıştır!)
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!)
İkinci şeyler ikinci!
Second things second!
Yani, renkleri seçmiştim ve his için ne istediğime dair bir fikrim vardı. Menüyü sakin, tatlı bir şey yapmaya karar verdim. Bu, başlangıcın seçimlerinize bağlı olarak nasıl olabileceğine doğrudan aykırıdır.
Şimdi tüm sürecin en sıkıcı kısmına geçelim - KÜÇÜK RESİMLER! Bunlar kesinlikle gereklidir, sadece gözlerinizi ve beyninizi meşgul etmek için değil, işe yarayacak bir şey bulmanız için de, ayrıca çalışmanızı yayınlamayı düşünüyorsanız.
Eğer bir sanat kitabıysa, fikirleri iletmek için ÇOK faydalıdırlar. Aynısı oyun yaratımı için de geçerlidir. Yayımlanmak istiyorsanız, sürecinizi ekleyin - profesyonelliğiniz potansiyel müşteriler ve yayıncılar için daha belirgin olacaktır.
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.
Üçüncü adım - en eğlenceli olanı!
Third step - the fun one!
Tamam, bir planımız var! Renklerimiz var! Temamızın ve hissiyatımızın ne olduğunu biliyoruz! Hadi biraz uğraşalım!
Canva şu anda olağanüstü. Küçük resminize tam olarak sadık kalmazsanız moralinizi bozmayın - çoğu kişi bunu yapmıyor. Bunu havalı olmak için bir fırlatma rampası olarak görün.
Menü üzerinde uğraşarak 3 gün geçirdim, sadece istediğim gibi göründüğünden emin olmakla kalmadım, aynı zamanda tamamlanmış dosyanın iyi optimize edildiğinden ve müzik ritimlerinin tam olarak doğru olduğundan emin oldum. Bu süre zarfında çok değişti, ancak artık işlevsel ve küçük boyutlu bir video oyununa güzelce uyuyor. İşte motordan çıkmış hali, Canva'da görüntülenebilir: 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
Canva'da nasıl çalışır?
How it works in Canva
Canva esnek bir araç setidir, WYSIWIG Editörü olarak bilinen bir şey olarak çalışır. WYSIWYG? Ne Görürseniz Onu Alırsınız! Arayüzü görebiliyorsanız, bir şeyler yapmaya başlayabilirsiniz. İlk olarak, bir belge oluşturarak başlayın - bu önceden tanımlanmış boş bir tuval, ne boyutta oluşturulacağını önceden belirlediğiniz boş bir tuval veya bir şablon olabilir! Şablonlar harika ve bir şey oluşturmanın kolay bir yoludur, ancak ikinci seçeneği seçtim çünkü aklımda oluşturmak istediğim belirli bir şey vardı.
Yani, menünün ne olacağının boyutunu, yönünü ve türünü ayarladıktan sonra, Canva'nın halihazırda sahip olduğu varlıkları bir araya getirmeye başladım. Aşağıya bakarsanız, çalışma alanını ve "Öğe" aramasını görebilirsiniz - istediğimiz şey bu. İhtiyacımız olacak tüm bireysel öğeleri toplayın, sonra bir sonraki bölüme geçelim - bunları ihtiyaçlarımıza göre değiştirelim!
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!
Ve şimdi en zor kısım...
And now the hardest part...
...bu hiç de zor değil, sadece zaman alıcı. Görüyorsunuz, döngülü animasyonlu bir menü istiyordum, yani VİDEO ANİMASYONU. Neyse ki bunu Canva'da yapabiliyoruz - pahalı ekstra yazılım gerekmiyor!
Aşağıdaki görüntüye bakarsanız, menüyü oluşturduğum tuvalin altında bir çubuk olduğunu fark edeceksiniz. Bu zaman çizelgesidir ve bunun nasıl çalıştığını anlamak gerçekten önemlidir. Kullandığınız her öğe, ister animasyonlu gifler, ister resimler veya ses efektleri ve müzik olsun, KENDİ zaman çizelgesine sahiptir.
Öncelikle, sahnenizi tamamlayın. Sonunda neye bakması gerektiğini belirleyin. Sonra her öğeyi tek tek inceleyin. Öğeye tıklayın ve altta mor zaman çizelgesinin ve bir zaman damgasının belirdiğini göreceksiniz. Zaman damgası, ne zaman ne olacağını görmenizi sağlar. Tek yapmanız gereken, öğenin ekranda görünmesini veya çalışmasını istediğiniz zamana uyacak şekilde mor zaman çizelgesini daha uzun veya daha kısa yapmaktır.
Animasyon yapmak gerçekten kolaydır, eğer bir öğe zaten ihtiyaç duyduğunuz şekilde hareket etmiyorsa veya belki zıplamasını ve parlamasını istiyorsanız, üst taraftaki Animasyon veya Efektler düğmelerini kullanabilirsiniz. Kendiniz bir şey oluşturduysanız, onu sol menüden yükleyebilir ve Canva'nın bir parçasıymış gibi kullanabilirsiniz.
...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.
Ve sonunda!
And finally!
Ta-dah! İşte oyunun kendisinde çalışıyor. 'BOT_IS_LONELY'yi bitirmek için önümde uzun bir yol var, ancak Canva işin büyük bir kısmını çok daha kolay hale getirdi. Karakter animasyonlarımı oluşturmak, video çalıştırmak, arka planları oluşturmak ve tüm kullanıcı arayüzünü ve jenerikleri oluşturmak için kullandım.
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.
EKSTRA Bonus!
EXTRA Bonus!
Bir oyun yapmak ister misiniz? O zaman bu projeyi deneyin: https://www.domestika.org/en/projects/1827332-bot_is_lonely-vn-stuff. Her cuma, basitleştirilmiş nasıl yapılırlar, oyun varlıklarını nereden edinebileceğiniz ve kendi varlıklarınızı - hatta müziğinizi - nasıl oluşturabileceğinizi eklemek için güncelliyorum! Tüm oyun türleri hoş geldiniz!
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!
1 yorum
Oldukça rahatlatıcı bir müzik, hoşuma gitti ama korku çizgi romanı fikri beni daha çok heyecanlandırdı!
@soulsbain Kickstarter fonlarına bağlı olarak korkmaya hazır olun! XD
Daha fazla korku lütfen
@johnyelland1234 Hadi bakalım! LADDER çizgi romanı ve 2026'da çıkacak yeni bir korku oyunu olan Memoria Mortuorum için daha fazlası!
Yorum yapmak için Ücretsiz olarak giriş yapın veya katılın