Super Fast Game Development Flowcharts in VS Code ToddMitchell, November 1, 2023July 11, 2024 Free, flexible flowchart scripting in your editor with no drawing required I was pleasantly surprised that my recent post about tracking to-dos in VS Code generated some interest, so here’s another killer free extension to help you manage your projects from within the editor. If you’ve ever formally trained for software development, project management, or any discipline requiring design and planning, you may already be very familiar with flowcharts. Don’t worry if you haven’t. Here we’re just going to use a neat VS Code flowcharting extension to make diagrams that help us naturally think our way through various game design scenarios. The extension you’ll need is Markdown Preview Mermaid Support by Matt Bierner. While you don’t have to fully understand what’s happening to use it, the short story is that Mermaid is a Javascript-based diagram rendering tool often used to draw up flowcharts from connections defined in Markdown files. All you need to do is install the extension, start a .md file in your project or another location of your choosing, define nodes and connections using Mermaid’s flowchart syntax (the extension also requires some formatting illustrated at the extension link above), and open Preview Mode to see the chart. I have several examples to share, but you’ll probably think of loads of potential applications for this when you get going like I did. Example: Planning screens and major features I don’t chart out every little thing I do in development, games or otherwise, and you probably shouldn’t either. That said, I think it’s very helpful at the outset to sketch up everything you think a small project might contain and see if it’s really a small project or not. I came up with a quick chart for what a game jam project might look like if development went according to plan. I used sharp rectangles for different scenes and rounded rects for major features. # Jam Entry Fall '23 ```mermaid graph TD Splash-->Title subgraph Options Main--> a("Audio") & v("Video") & g("Gameplay") end Title<-->Options subgraph Gameplay PlayScene<-->GameOver-->l(Leaderboard) end Title<-->Gameplay Title<-->Credits ```-->-->-->--> After creating a header and telling VS Code I’m writing a Mermaid diagram, I defined a top-down graph using “graph TD.” Nodes can be defined with one word if you don’t need spaces, and they can be created while defining a connection like in the line “Splash–>Title.” You can define a node with a different ID than the caption if you want to use spaces in the name, and the how you enclose the caption determines the node’s shape: ( ) for a rounded rectangle, [ ] for a regular rectangle, (( )) for a circle, etc. The arrows and subgraph are probably easy to figure out. Here’s how the chart renders in Preview Mode: https://www.instagram.com/p/CzEx0wvuH_m/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA== Example: Playing with map layouts Flowcharts can hold more than feature plans. Using less than ten lines of markup I was able to sketch out a reasonably complex level map plan. It’s worth pointing out here that you can’t fully control the direction specific connections flow on the chart, meaning this likely wouldn’t be your final level map, but when you can sketch the basics this quickly, it’s probably a useful trick to have in your back pocket. # First Floor Map ```mermaid graph BT Spawn-->EntryWay EntryWay-->StairsDown & MainHall & StairsUp StairsDown-->LongCorridor-->JailCell & ServantQuarters & GoldRoom MainHall-->ThroneRoom & Kitchen StairsUp-->KingsChambers & GuardTower ``` If you’re okay with simple rectangles and one-word labels, you can create a diagram almost as quickly as you can think of all the nodes. Here’s how it renders: https://www.instagram.com/p/CzEyLmkOvrv/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA== Example: Planning branching dialog When I see people talking about game design around the web, I see a lot of discussion about branching dialog systems. This is for good reason. Dialog in games gets complicated fast when the player has multiple response options and those options have different consequences. Once again, I found this Mermaid extension suitable for great planning. This script got a little more complex, but it illustrates how powerful the node styling system is. Similar to CSS, I can define custom style classes and apply them to as many nodes as I want, meaning I was easily able to ensure you can easily distinguish between characters when going through the diagram. # City Guard at Gate ```mermaid graph TD subgraph Legend direction LR Guard Player end guardHalt["Who goes there?"]-->playerFriend["A friend. Well met."] playerFriend-->guardClosed["The city gate is closed by order of the king."] guardHalt-->playerEnemy["Your worst nightmare! (attack)"] playerEnemy-->fight((Result: Battle)) guardClosed-->playerWrong["Wrong answer, metal pantser! (attack)"]-->fight guardClosed-->playerKing["I uh...I am...the king...?"] playerKing-->guardHail["MAKE WAY FOR HIS MAJESTY, THE KING!"]-->gate(("Result: The gate is opened")) class Guard,guardHalt,guardClosed,guardHail NPC class Player,playerFriend,playerEnemy,playerWrong,playerKing Player classDef NPC fill:#025b7a; classDef Player fill:#7a0202; ``` Again, you can do a much simpler version of this, but it was an interesting look at what’s possible. Here’s what you end up with: https://www.instagram.com/p/CzEydxrOwQK/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA== After playing with this extension for an afternoon, I think this may be very helpful in thinking through designs of all sizes. It also seems like an excellent way to communicate flows and bring others up to speed on what I’m doing if the need arises. For totally free, you can’t beat the price. If you have another great extension for managing work inside VS Code, I’d love to hear about it. Share this:FacebookXLike this:Like Loading... Game Development game devgtdprogrammingproject managementVS Code
Game Development The Old and New Testaments of Game Development January 28, 2019July 11, 2024 Update: We’ve had a slow start on giveaway entries, so we’re opening it up to everyone! Man, we’ve had some great guests lately, and you won’t believe some of the folks we’re going to be talking to in the coming months! With all this action, it was nice to get… Share this:FacebookXLike this:Like Loading... Read More
Culture My Big Stupid Mouth October 29, 2020July 11, 2024 Trying to leverage LinkedIn and participating in a discussion about parenting, revenue models, and publisher trust may have recently landed me deeper in enemy territory than I intended to go. Get the full story, hear a good rule of thumb for dealing with publishers, and learn a two-word phrase that… Share this:FacebookXLike this:Like Loading... Read More
Game Development Creating a Prototype November 21, 2019July 11, 2024 This time on GameDev Breakdown, as promised, Todd runs through his prototyping process, start to finish. Share this:FacebookXLike this:Like Loading... Read More