The Apps I Use to Design Games
HTML-код
- Опубликовано: 6 июн 2024
- Heya Pals!
Today we're going to be talking about game design software. There are a ton of tools out there to get your ideas in motion, but which go the furthest and which end up getting in the way?
Here's my take on the subject, I hope you enjoy!
Chapters:
0:00 - Introduction
0:49 - Getting Started with Game Ideas
2:24 - Concepting with Raster Canvases
5:38 - Media Canvases
8:08 - Figma and HTML Canvases
15:53 - Office Suites
17:53 - Game Design Docs
19:03 - Databases & Wikis
21:30 - Zettelkasten and the Holy Graile
23:07 - My Preference
25:05 - Reflection and Outro
Music:
Rifti Beats - Chocobo & Chill [Gamechops.com]
----
This video features clips from my stream. Catch it live: Mon, Tues, Thurs and Fri 1-6pm AEST.
Twitch: / adamcyounis
Twitter: / adamcyounis
Discord: / discord
Become a Patron at / adamcyounis
Download assets and games from the stream at uppon-hill.itch.io/
Later, pals! 
Наука
I just had my first dev team meeting last night and one of the questions was what software we might need. Then this video popped up this morning. The gaming gods work in mysterious ways.
i want to have a team too :(
@@mysilentworld6731 me too
Gotta love that live mic on your phone... you have been *INDEXED!* 😉
More like the cookies on your phone and the phone recording you and sending out the data..
Nah it's just Google spying on you
my goodness...the number of times I have been following along with your explanations and thought "man...I wish you would show a real-life example of what you are talking about to solidify this for me" and then you immediately cut to "here is something I have been working on" is insane. It is like you can read minds. You have a real gift for content creation.
He might just be trying to teach in the way he would like to have learnt something. If you're approaching it like that, you're starting from a point that's 99.99% there.
Obsidian is really good for sketching ideas down like you talked about at the beginning of the video, and then being able to index your idea using tags and relations. I initially started using it for worldbuilding like in the example you gave, but then eventually it became the index or 'wiki' for my whole main game project, containing links to other software for the stuff that Obsidian doesn't do well like moodboards etc.
An Obsidian for something like a Tree-sheets + Penpot documents would be useful to many, I think. Plain text is too plain. Symbols are too abstracted away from impressions.
If you're after managing perceptions, textual descriptions of perceptions are intuitively not ever the best approach. Images are more powerful, diagrams and spacial relations are more powerful. Obsidian's great, if you're text in, and text out manner of thinker, or writing a book.
Have you heard about Obsidian's canvas update? It's still in beta testing, but it adds the ability to use an infinite canvas to embed images, webpages, notes, etc. They can be resized, stacked, made into flowcharts, etc.
There's no digital ink support in canvases yet, but hopefully vector drawings from the excalidraw plugin will play nice with it!
With the Excalidraw Plugin, making Visual maps in Obsidian has improved SO much, althought it still needs better drawing tools
@@memetheew The main saving grace for me is the fact that you can atleast use brushes with different opacities which really helps for sketching imo. I'd love for someone to make a simple raster graphics plugin that you could run right next to Excalidraw and then just quickly copy your drawing over. I guess you could just use another app and drag and drop probably. I would prefer some better tools in Excalidraw as well though.
The only problem I have is that it can run a bit sluggishly on my Fold 4/iPad, but overall it is pretty great
Oh, so that's what figma is, and how to use it. You have no idea how big of a problem you've just solved for me. Thank you for this!!!!!!!!!!!
I'm so fortunate to have found your channel just recently. I love the way you articulate your thoughts and you have really great ideas to share! Excited to continue learning from you as I explore game design and pixel art :)
I really appreciate this video! I recently took a Python course offered by Google and one of the other topics they offer a course on is UX design. I browsed the curriculum and noticed they spend a good chunk of the course working in Figma. I did a very small amount of research and just kept hearing "Figma is a really useful tool", so when I clicked this video and it turns out you mention Figma, and then show what Figma can do, it was really useful! Thanks again.
So valuable hearing your insight and experience with these tools, and how you view your workflow. Thank you!
I've been using OneNote for a couple of years now, as a dude with ADHD it's been invaluable ... slowly all of my regular documents have been getting turned into OneNote documents.
This video really planted a few seeds in my head though. They germinated for a few days as I grumbled at the thought of even more programs .... then I downloaded Figma and was pretty impressed. Then I downloaded Obsidian and was pretty wowed. I really appreciate you putting these kinds of ideas out there, this kind of design stuff I'm super interested in! Your videos are such an incredible free resource for artists and game devs.
I’ve found myself really liking the Notes app, in iOS on my iPad. It lets you paste in pics, type, even do some sketching in the notes. Also, it’s very well indexed. It’s also synced to my phone, computer, etc. So if I have an idea and I only have my phone, I can jot it down.
This was really helpful. New to game dev and i really wished i had seen something like this sooner. Thanks for the quality content
scrivener is a really flexible word editor. i heard it being used for writing novels and essays. it basically let’s your write several chapters/documents at once, which can be rearranged and also have a short description you can edit in the “overview” section. shuffling the cards around can really help out, since you can basically write starting from the middle and expanding out in every direction needed.
I'm using Milanote for make some World Building, but in some cases, it becomes too complex and hard to make simple things for my game, like mecanichs for battles etc. This video comes in the right time, thx for that, Adam 😁
I'm looking to get started in UI/UX game design myself and this has helped, Thank you so much for sharing this.
Some recommendations I use on linux: Joplin for markdown note-taking/tasks; Getting things GNOME! for tasks; Outliner for outlining; Onlyoffice for text, spreadsheets, and presentation; Minder for node-based idea flowchart; Plan by KDE for project management; PureRef for a mood board; Krita for sketching; GridlessDB for databases; Arrow for narrative planning/design.
Super interesting!
I use Google Keep for writing random ideas I got during the day, and then a lot of pencil and paper to brainstorm and sketch them out.
As you said near the end of the video, writing ideas down in a more precise and defined way helps a lot to discover what you really want.
I'd be interested also in a video about project/time management tools!
Very informative video - thank you so much! I really love your mini paintings - gorgeous work!
Milanote has been my go-to for about a year now, it’s great being able to create different spaces and connect them. Super easy to keep things organized, but unfortunately it comes with having to pay a monthly subscription so keep that in mind. I’ll think I’ll try out Figma thanks for the suggestion!
Thank you so much for this video!! I’m always trying to be more efficient, and this helps a ton! Thank you 🙏🏽
There's a small group of us getting into game dev and we've been using notion for a wiki to get our ideas down. I hadn't heard of some of the software you listed out earlier on, I'll definitely be checking some out. Thanks!
Man, the soundtrack ! Cool video, great explanations, but the music is the best of all. Nostalgia!
This is honestly game changing (... Pun not intended, but being left there anyway)I've never even considered that tech exists that can help me organize my designs. I currently have pen and paper, a messy folder full of inspirations, and Google keep for when I don't have pen and paper handy. I'm definitely gonna mess around and consolidate stuff in one of these tonight while I'm at work. Thank you!
I've also settled on Milanote and was so convinced by what it offered me that I bought a pro sub after just a few weeks of use. I also use a paper notebook for jotting down ideas and Trello to break down work into small, achievable chunks (it helps me to focus on the "what's next").
Before Milanote I used WiseMapping (mind mapping tool) a lot and Google sheets and docs but it all felt disconnected and untidy. I love about Milanote that it gives you a single space for almost everything in a fully connected fashion but it has its limitations.
Well presentation video and with pretty cool High-level view of tools walkthrough for your overall design process. Love "Figma" and "Leonardo" very much!!! With such great online mentor is the gem for game indie developers!
Obsidian recently added Canva, so you can now add notes, images, combinations of files, and even other canvases together in a large canvas and annotate them. Obsidian is amazing. I mostly use it while learning programming for games, to link concepts and functions for future reference. Awesome video.
I've been working on a sequential vivid dream journal, processing and converting it to novel form. I use Typora for text (since beta, I may be biased) because I can use Markdown syntax for quickly formatting the text with e.g. headers or tables while typing, VSCode for project search, LibreOffice for writing the standard formatted manuscript, Google Sheets for statistics on word counts and chapter states, yEd for mind maps and visual plot analysis, GitHub for version control and cloud storage... I mostly use Affinity Photo for the memes and detailed presentations. I also have a folder with subfolders for reference images. This Leonardo thing looks like a good addition to my toolset. Thanks!
Thanks, Adam! This was really helpful!
nice one! I use leonardo for visual sketches and ruff for quick notes. used to use onenote for more serious note taking/knowledge keeping but recently moved that to obsidian. never thought of using apps like figma that way (although I've dabbled w it for a bit), might try getting into penpot. I've also been looking into sketching level design ideas in Trenchbroom + quake1 (3d), which might be easier/faster to sketch map layouts than having to go through a full 3d app then bring it to unreal.
Obsidian was hugely overlooked in this!
It's absolutely incredible for personal notes as well as project based planning.
Overall I think Figma + Obsidian is the golden combo.
But you'll never be able to do away with google sheets so those three are my tools of choice that cover everything .
Anything sheets or Figma cant do, obsidian can fill those gaps and be your go to powerhouse for everything else, just make good use of those community plugins. (Not to mention obsidian is fully customisable and FREE)
Since Adobe bought Figma, there has been some pretty limiting changes, like you need a paid account to have access more than 3 pages for example. You can work within that restriction, but if/when the project gets big, you can find yourself in an unorganized mess. I'm a UX designer as well and the difference between using Figma at work and using it for personal projects calls for a re-evaluation of how you'd normally use it.
That is to say, it's a great tool for prototyping, seeing how things will look in your game (think UI elements, user interaction). I've been trying to find another alternative to it for the free side and unless someone knows something I don't, I do not believe there is one at the time.
Such a thorough explanation. Thank you.
How have I never heard of Figma before this? I have to give it a try! Thanks for the vid!
PureRef is also good if you want a freeware moodboard that is just for throwing images in an infinite canvas but it's limited to just keeping pictures together
You can also write text notes there, not to draw them
Neither do exactly both of these but I have used an ipad app called Concepts for this for years. I believe there is a $8 USD in app purchase to get the essential features unlocked and its been well worth it. I use it for mind mapping and sketching out ideas that are still super early.
It behaves sorta like a raster app but is a vector app at its core so comes with some nice vector based features. For instance by default it auto separates each stroke into layers based on the brush type you use so you can easily tweak things. You can easily adjust opacity and color and other settings of each stroke after its been painted. Plus you can add images in and just use it like a mood board app. Its infinite canvas + not quite infinite but still really impressive zoom so you can really drop some ideas into one document
Programs that I think also work for this process:
{FYI the ones with slashes ( ' / ' ) are github links thus providing the source code}
Basic Notes:
gedit
notepad
nvim
Raster Canvas:
Krita
Gimp
HTML Canvas:
Quant-ux
vanila-io/wireflow
penpot (oh hey its in the video!)
plasmic
Cloud Suite:
Nextcloud.... don't know if there are others
42wim/Matterbridge for multiple communication channel protocols
Personal Knowledge Databases:
Joplin (more notes with links)
zadam/Trillium
foambubble/foam (alt of roam research though in early stages)
zettlr/zettlr
logseq/logseq
dendronhq/dendron
Hope you have a great day & Safe Travels!
At Filament Games we use photoshop and illustrator for idea exploration (we're starting to transition to figma though!) and then on the data side we use Google suit for file sharing and we heavily use Google slides for communicating with each other and our subject matter experts. And for info tracking and sharing we use Confluence which is truly just a wiki :)
Thanks for the vid! Going to share the Figma portion with my team to help them understand it better.
Awesome video. I’ve been using notion, but I am really excited about checking out figma.
I definitely started using Google spreadsheets as it solved the problem I was having: How can I get all the characters and province stats, etc., into my game in a way that could allow for modability by users (and myself during the building process). Spreadsheets saved as CSVs and loaded into the engine - problem solved and I can use it for any data values, formula values, multipliers, whatever.
Changing it wouldn't be too annoying or fixed as I'd just save a new CSV to game project data folder. Don't need to change the code to read it in most cases unless I'm adding or removing a whole field and then it's just some const identifiers are whatnot so the arrays read the data correctly.
I'm intrigued by Notion as I never heard of it before and you mentioned it's database abilities. Maybe it could be something I'd learn for/with a future project.
I'm also intrigued about the apps on the "Ideas" side. Never heard of those and I could have seen myself use them to design the various screens of the game, interface ideas, seeing how they all look, visually connecting them together or keeping track of the connections so I can see at a glance if I've missed any even before testing.
Absolutely amazing presentation. thank you lots!
Very useful information! Thank you very much!
Miro is the tool I use the most nowadays. For big games I use the Miro + Notion combo. But for small games I do everything on Miro. From sketches to writing design stuff, level design, art moodboards and mockups.
When I need to create dialogues and texts that will be actually in the game with localization I use google spreadsheets with a import tool that exports everything to a csv or json format
Miro is my go to as well. Altho I have been looking at milanote, seems nice also.
Miro here aswell. I use it for finding new ideas and also make my game dev documents using A4 sized frames, and export them as images. Really wish they would add darkmode, though.
Articy Draft went free for smaller scale use this year I think. It combines some of the features you went over along with data exporting to game engines. I'd be interested to hear your take on it.
Can' t look forward to finish the video!
Thanks for sharing your productivity tools
awesome tips, and not only about the tools
thanks Adam
ps.: ffviii track turns everything a bit better
I use Obsidian for work because it really has the richest automation and data-driven features once you start using the community plugins. It has a great Excalidraw plugin I use for simple diagrams, but now I'm wondering how hard it would be to write a raster canvas plugin for it to really round out the art side, because it has everything else I could want from a game design perspective. Thanks for the brain food!
In Microsoft there is also whiteboard if you have a graphics tablet. You can sketch, write with pen, and type. I use it for s9me sketches for scene ideas and type little notes, or wrote flows for level design. I know you can add html links in the document and be able to click on them. I also youse pureref to put images in to get some idea of colors and design elements for 2d and 3d models. Whiteboard comes with Win10 & 11 free, will load when a graphics tablet is connected and drivers installed. Or enable in settings. Pureref is also available free as well.
Earned a sub without asking for it. Great video
I believe that obsidian is your Holy Grail. It is an amazing tool to create design documents and wikis. It cannot do graphic work (only diagrams) but it excels in every other aspect. The search and indexing aspect is spot on. Give it a try!
Ive been using yEd graph editor to manage game loops and systems. I have nodes for items, actions, groups, abstract ideas, and notes. It works quite well, although it doesn't scale well with complexity. In that case I usually break things up so not everything is connected. It works pretty well.
interesting tools, I am a big fan of Milanote but i may need to try a couple of these you mentioned.
In the studio I work, I have implemented lucidboard (for userflow) and all prototypes and mocks are done in adobe XD. The only reason we use XD was because it played nicer with PSD and PSB files that are deliver.
Your channel is excellent, thank you for share your experience.
Makes me think of *Mind Maps.*
This was good. 👍
Milanote aaaaaaaaahhhhhhhh 📓 I can't live without the ability to make my convoluted RPG route maps in its easy to lay down infinite organigrams. With 32 endings, all the routes of my game needed of a tool to lay down and map all the dialogues and its iconography to perfection (the flags of karma points, previous decissions and the like are tricky to keep organized) and this tool enabled me to do so and I can't live without it now, enough to renew again my yearly sub this 27th. Milanote deserves a ton of love because of how freeing it is to map complicated things for your game. And nope, I'm not sponsored by them; I wish I was lol 😅
Sorry, also, PureRef is good to block out and gather many references in all kinds of resolutions in one single place per file.
Notion is great with their airtables and the like but I prefer to use OneNote to take notes and organize ideas because I'm not constrained to narrow centered canvases and I can add pictures everywhere I please, with the factor of being able to also draw on the canvas too.
Those free tools I use for my own modus, along with my purchased copy of CSP and my dumb sub to Photoshop (and I say dumb because I'm starting to consider to drop it if it wasn't because I still need it for much of my postprocessing things that I don't know how to do in CSP, yet).
I use C++ to write down my ideas.. The benefit is that when I'm done writing down my ideas, the game is already done. The downside is it's much harder to create visual information at the beginning of the project, which is actually quite important.
Hey very interesting as I'm trying to start my game designer career and couldn't really find tools to help me write down and organize ideas. Still, I stumbled upon ArticyDraft but it's not very new user friendly and need more work to be mastered than the tools you talked about but the cool side is that it can somehow be linked to game engines such as Unity to developp games. Articy might come back for me later but right now I'm switching to Figma (plus I'm a student so I benefit the pro version for free :D) as it seems both more easy to use and frequently asked on jobs applications I stumbled upon. Nice vid, thank you very much :)
articy:draft is worth looking into in terms of an app that does a lot of what some might need in game design.
On the faaar left of your graph, I’ve found simple note is the only thing that can keep up with and organize my raw ideas. It’s just text, I can access it on my phone, on my computer, or in browser, and the notes are searchable and tag-able. i just write what comes to mind and forget about the disorganized jumbled mess till i do a search later and find a good idea half way down a shopping list, right after the measurements for the dresser i didn’t end up getting and a pile of youtube and amazon links for some reason
Hey Adam another amazing video, is there someway to get a 'template' figma file for what you were using to plan the Game Jam?
I've designed 3-4 games (never actually developed them, cuz I still don't know how to draw, animate and program yet), and all of them I noted straight to Notion, I plan to start learning all these things by the start of 2023 so I can finally release my first game
Could you please make a video about which task management tools you use? I was using Todoist, but now I'm thinking about changing to something else and I would like an overview of other tools used in game design context
Airtable is cool for card games or classifying bunch of items with dropdown menus and stuff. Used notion too but it seemed more suitable for classifying and organizing ideas rather than items/properties.
Great video! Very useful!
Thanks Adam, for such wonderful video. I'm still working on my first GDD and have a trouble to visualizing my concept into Figma. If you don't mind could you share your level design figma file, I really want to learn how you communicate your concept level design.
Figma seems like such a game changer!
I've been using markdown documents to track ideas and concepts as I learn to code.
Obsidian has been real nice but it's more limited with pictures and such.
You know that Adobe will ruin everything.
I was wondered : What's the name of the purple animated background you use in Figma and Leonardo? It's beautiful and relaxing!
Thank you for you awesome video, I leaned something new with Figma! :)
I was wondering about that too, did you find what it is ?
edit: I found it on istock as a purple blur background it has a watermark though. Used a watermark remover, put some more blur on it (with hexagonal bokeh like effect) then make a copy of the video, reverse it and put the normal one and reversed one back to back on a timeline and there is your video loop you can use for a background, if you have the money you can buy it too but since it's for personal use this is fine too i guess.
Thanks!
I've used a bit of Milanote. They can do stuff similar to Figma, but sadly you are only limited to only a few projects and then your slapped with a pay wall if you want more space... But it has a really good nesting system for data, and you can build a whole lot of boards based on things you need. But again, the pay wall limits you to only 1 or 2 projects... If you have to money to drop, you could always check it out.
This has been educational in a number of ways. I'd like you to know that.
Have you seen Tree-Sheets? It's a neat idea, but lacks in the visual component.
Hey Adam, a little less useful than most of what you mentioned, but I have been using SlimWiki to make a GDD for my game.
I decided on this approach to document stuff in away that I could navigate and so far it's been serving me well.
Your Leonardo canvas probably needs some large-scale graphics, or arrows, or titles, or color regions to aid in navigating when zoomed out. Personally, I use OneNote 2016 (free), but I never draw in it; I draw in Krita or Clip Studio Paint and copy/paste those graphics into OneNote if they're salient there. If you draw within OneNote it treats every stroke as a unique, editable object, which is awfully inefficient.
I considered simply taking open source wiki software and creating something akin to OneNote meets Figma, but I realized how long it would take just to work in the capabilities of OneNote, much less extend beyond. Part of the reaons I use CSP and OneNote is that I'm very capable with those products. I think OneNote stinks, but it stinks less than ALL the other note-taking apps (for me, anyway). The perfect product doesn't exist -- just pick one that's close and that you're good at. If you're joining a team, adopt their methods no matter how painful, because you HAVE to work together.
That said, I'm about to have a good look at this Penpot.
Tags and mind maps are less than useless to me, but to each their own.
I use Obsidian with Excalidraw plugin and Git save. perfect to work with.
What is your hardware setup? Do you do all your work with a mouse? Are you using any drawing surfaces, styluses or tablets?
Hello Adam, can you give me a hint which tool to use for very huuuge mind maps? Maybe infinite canvas with possibility to have text. Most tools become very slow at a certain res.
Have you tried an app called Concepts? Curious about how you would view it in this setup. Also, I am curious about how you view something like CastleDB. I mean a database & level editor built together seems handy to me. Though my understanding is the interface is... dated.
Oh, so I've been spending a month creating my own cheap version of what obsidian sounds like to be, I should check it out.
I was wondering if you @AdamCYounis still use leonardo for creative ideation, or if you also draw with your pen in figma?
thats amazing you were such young while starting it
I see you're on that Figma grindset
I use and prefer notepad, and google docs when I need to share it. I like keeping my images very separate, it's way more organized for me, because my images alone sort of get lost, and if I tied design stuff to them, then they'd both be even more lost than images alone are now. That's partly due to myself not being the only artist, and each artist that gets hired prefers different tools, so mixing their art with mine, due to tools used and requirements from the art itself to stay layered and such its just not feasible. Also there's nothing in my design files that says pretty much anything about the art itself other than core theme's, but that's just a sentence at most in a very long doc.
In a larger studio where employees are forced to use specific tools, or in individuals that like that kind of thing I could see these others being useful, but not for our studio ATM.
i'm not sure what you mean by indexing bitmap into database.
do you mean like using Miro and put a frame on it, then you can search it via the frame name?
Nice take. I just use Google docs and note down stuff I might forget later. I stopped using anything else.
Was wondering... what is your approche to things like WorldAnvil? I think it can be all in one, but it is still a premium app. Tried to use it but I did not suite me well. It can be promissing thou?
Took me a second to recognize a remix of melodies of life playing in the background...
Obsidian seems like it would be really useful for designing a DND campaign/setting
Yo Adam that's some FF7 music cover in the background, what is that, it sounds so good!
There should be a open source or a free no limit mood board or a canvas like milanote and taskade (sadly both have a limit from times you can use it or save limit)
Do you have a preference for sound design stuff because I would like to see that
I need this.
You can try mental canvas for ideation.
bro i like your video its help me full experience for start explain my game ideas... , but one you do not tell it is the tool you draw to explain how get started game idea haha , please whats tool name you use on video , and thanks
😮it looks easyer than hard coding a canvas in javascript css and html does these apps allow coding or would you move your canvas to your editor where you can then add movement and logistics..i realy want to try find ways to draw the canvas faster and then code in functions and more
What's the one software he's using the whole video to show us everything, the one with the purple animated background ?
I wish I heard about Leonardo ages ago 😅
Praise the Bread
Bread 🍞
Wait, did Figma just become a subscription based software in the time since the vid came out?? I can't use it for free anymore.
been using articy draft for planning, but no built in scribble features makes it a bit cumersome...not very flow centric...more plan centric... I think to get what I really want I have to roll my own...but that takes time away from whatever game I'm working on...
how did you make your figma background animated?
It only appears animated for the video, because I'm "green screening" the real background out. On my computer it's just flat purple.
Do you have somewhere that I could post some designs for you critique?
can you share the figma project youve work with?