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 Warner Bros. Takes Bold Stance Against Bethesda in Westworld Lawsuit June 29, 2018July 11, 2024 By now, if you’re the type of person who cares, you’re up to speed on Bethesda’s aggressive lawsuit against Warner Bros. and Behaviour Interactive over suspicious similarities between Fallout Shelter and the new Westworld mobile game, both of which Behaviour developed. After loads of wild speculation across social media, we have our first… Share this:FacebookXLike this:Like Loading... Read More
Game Development Surviving Remote Work October 7, 2019July 11, 2024 Game development and its specialties have a ton of potential for remote work, which is awesome, but has a unique set of challenges only you can solve for yourself. Do you have to agree to sit on calls with clients? How do you navigate project changes? How can you avoid… Share this:FacebookXLike this:Like Loading... Read More
Culture Exception Game Developer Will Traxler September 2, 2019July 11, 2024 Will Traxler of Traxmaster Software discusses his new game, Exception, his first commercial release following years of solo development. Will shares insight into his unique post-launch mindset, his solution to investing in his development, and the dynamics of outsourcing PR responsibilities as a one-man studio. Share this:FacebookXLike this:Like Loading... Read More