According to the game's creator, Lynn Zheng,

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

If this is the first time you're hearing about this game, you can download it and play it first on your own.

And if you want to learn more about the game from Lynn herself, check out this introductory article.

Learn to Code RPG Story Milestones

These are the achievements that you get for sure by following the storyline.

3, 2, 1, Learn to Code! You'll get this achievement the first time you start working on the quizzes.

Got My First Interview! You get this achievement once your character goes through their first interview after completing the curriculum.

Got My First Offer! Once you receive your first job offer you get this achievement.

Gotta Crush Those Technical Interviews! Once you start preparing for the technical interviews you get this achievement.

Nailed the Curriculum! You unlock this achievement once you reach a CS Knowledge of 60 or more, enough to allow you to go to the next step.

Now Streaming: My Dream Dev Job You unlock this achievement once you accept an offer for a dev job.

Submitted My First Dev Job Application! When you submit your first job application, you get this achievement.

Learn to Code RPG Story Easter Eggs

You can unlock these special achievements mostly by making certain choices in the game, by employing some skill, or in some cases by pure chance.

Applied to CupcakeCPU Through a Recruiter: This achievement has the prerequisite of getting all the questions of the trivia quiz at the Hacker Space right. This will give you the opportunity to apply to CupcakeCPU.

Asked My Tech-Savvy Friends about Tech Buzzwords: Ask about one of the buzzwords you discovered by eavesdropping on people's conversations.

Barista Is My Undercover Identity for Collecting Buzzwords: You unlock this one during your first Barista shift.

Beat Up AI at Pong: beat the Pong AI to unlock this achievement.

Chill Beats to Code to: listen to music during one of your rest days.

Chill Beats to Smash Keyboard to: play the rythm game during one of your rest days.

Flunked All Quizzes in a Session: Get all questions in a session wrong.

Got Beaten Up by AI at Pong: lose at Pong.

Got a Nearly Perfect Score on ALL Music Tracks: Get above 95% for all tracks. See next achievements for details.

Got a Nearly Perfect Score on My Favorite Music Track: Get this achievement for reaching a score above 95%. For reference to reach 90% you need at least 3/4 of your scores to be perfects (100pt each) and 1/4 to be goods (60pt each).

Hanging Out at the Hacker Space: you get this achievement after hanging out at the Hacker Space for the first time.

I Might Get a Puppy Just So I Can Go to the Park: Go take a walk on one of your rest days.

Late-night Cookie Crunch: When confronted with all the certifications available in the freeCodeCamp curriculum, choose Quality Assurance and go grab a cookie.

Maxed Out ALL CS Knowledge Stats: Max out all of the CS Knowledge Stats.

Maxed Out One CS Knowledge Stat: Max out one of the CS Knowledge Stats.

Nailed All Quizzes in a Session: Get all quizzes in a session right.

Referred by a VIP Member: In the intro, after the disaster of an interview you are asked how you came across the opportunity. If you say you were referred by certain people, for example, me, you can get the achievement. (Fine, the complete list of names is Quincy, Lynn, Abbey, Estefania, Jessica, Oliver, Ilenia, Dionysia, Naomi, Yoko, Daniel, Beau.)

Rejected? Well, The First One Seldom Works Out: Be rejected by a job you applied to for the first time.

Rejected Again? I Thought Third Time Was the Charm: Be rejected by a job you applied to for the third time.

Set a New High Score in the Rhythm Game: available from the second time you play a song, just get a new high score!

Tech Buzzword Encyclopedia: collect all buzzwords at the coffee shop.

Tech Trivia Guru: Answer correctly to all questions in the Trivia quiz at the Hacker Space.

The Hacker Space Is My Second Home Now: Experience all events at Hacker Space.

This Job Needs Me to... ?: there are 6 achievements of this kind, related to job interviews. You could find job postings that have strange skill requirements, and finding those you unlock these achievements. The whole list of skill requirements is: Brew Coffee, Fix Fax Machines, Fuse Cables, Handle Angry Customers, Pacify Office Pets, and Retrieve Lost Passwords.

Travel in Time and SAVE the World: unlock one of the alternative endings (ones that are not getting a dev job) and then go back in time to continue playing.

You Can Never Be Too Careful with Prod: get a dev job, and once it's time to push your code to production, check your code again and again as many times as possible.

Quiz Question Easter Eggs

These are achievements that are unlocked by chance while you complete the quizzes. If you get one of the questions about freeCodeCamp right, you unlock one of these achievements.

• Contribute to Open Source with freeCodeCamp!
• Dr. DevDocs.io
• Hello, Earth to Code Radio!
• The Launch of freeCodeCamp
• The Mission of freeCodeCamp
• The Tech Stack of freeCodeCamp
• What inspired freeCodeCamp?
• freeCodeCamp Has a Chat Server? Fancy!
• freeCodeCamp Has a Forum? Neat!
• freeCodeCamp Has a Mascot? Cute!

Alternative Learn to Code RPG Endings

These are the achievements you unlock by playing the six different endings. There's one you can get to easily just by following the main storylines – but the others are all about chance. There is a small chance of the event that unlocks the ending happening in certain moments.

Cat Who Codes: this ending involves Mint the cat, during the night you could be woken up by the cat doing something...
Coding It Forward: during dinner you could have the chance to become a coding tutor, accept the offer to unlock this ending.
Dev Who Brought Down Prod on the First Day: get a dev job and play till the end to unlock this one.
Just Another Day at the Office: while going through job postings you could find one unrelated to coding, for an office job. Accept that job to unlock this ending.
Nature Lover at Heart: each day of forced rest there is a small chance that the character may come to the conclusion that learning to code is too much and decide to do something different...
Now serving 0xc0ffee: you could be offered a promotion at the Coffee Shop, accept it to unlock this ending.

Conclusion

This is the list of achievements for the release on December 22nd. I hope you can satisfy your completionist spirit with this guide. Have nice replays!

If you want to learn more about the game you can read the article Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts from the game dev herself about the process of creating the game.

In this article, I will talk about the different game engines and tools that you can use to build your own games. I will also provide you with dozens of resources and tutorials to help get you started.

There are many tools and game engines out there but I will cover a few of the popular ones.

1. Unity
2. Unreal Engine
3. Godot
4. Phaser
5. GameMaker Studio
6. CryEngine
7. Amazon Lumberyard
8. Ren'Py Visual Novel Engine
9. Pygame
10. LÖVE
11. Kaboom.js

Unity

This is a cross platform video game engine that is popular with game developers. Unity supports many platforms including iOS, Android, Windows, Mac, Linux and game consoles such as PlayStation and Xbox.

Some popular games that have been built with Unity include Cuphead, Pillars Of Eternity, Ori And The Blind Forest, Escape Plan, and Hearthstone.

Unity provides you with the opportunity to create your own 2D and 3D games. You can create shooter games, platformer games, educational games and more with Unity.

The programming language used with Unity is C#. If you are new to C#, you can take this freeCodeCamp YouTube course.

To get started with Unity, you can sign up for a free plan on their website. They offer free plans for both students and individual use.

Unity also provides hours of courses, project tutorials, live training sessions and certifications. All of this education is available on their website.

freeCodeCamp also provides many resources to help you get started.

• Game Development for Total Beginners - Free Unity Course
• Learn Unity Multiplayer Basics with Mirror
• Learn C# and Unity by Making Digital Tabletop Games
• Unity Game Engine Guide: How to Get Started with the Most Popular Game Engine Out There

Unreal

Unreal is a game engine where you can build 3D games. Unreal supports many platforms including iOS, Android, Windows, Mac, Linux and game consoles such as PlayStation, Xbox and Nintendo Switch.

Popular games built with the Unreal game engine include Fortnite, Yoshi's Crafted World, Hellblade: Senua's Sacrifice, Street Fighter 5, and Star Wars Jedi: Fallen Order.

The programming language used with Unreal is C++. If you are new to C++, you can take this freeCodeCamp YouTube course.

You can download the Unreal game engine for free on their website. They also provide 100's of hours of free online tutorials.

freeCodeCamp also provides many resources to help you get started.

• Learn Unreal Engine 4 by Coding 3 Games - A Free 5-hour Game Dev Video Course
• Unreal Engine Course: Create a 2D Snake Game
• How to Build A 2.5D Platformer Game With Unreal Engine – a Free 3-hour Course

Godot

Godot is a free open source game engine designed to create 2D and 3D games. Godot supports many platforms including iOS, Android, Windows, Mac, and Linux.

Some popular games that have been built with Godot include Carol Reed Mysteries, Commander Keen in Keen Dreams, and Cruelty Squad.

Godot supports a few programming languages but the main ones are GDScript and VisualScript. To learn more about supported languages, please visit the documentation.

To get started working with Godot, you can go to their download page. Godot provides many free tutorials in their learn section.

freeCodeCamp also provides this YouTube tutorial on Godot.

Phaser

Phaser is a free open source platform where you can build HTML 5 games for mobile and desktop. Phaser supports iOS, Android, as well as like Apache Cordova and phonegap.

Phaser provides you the opportunity to create your own shooter games, platformer games, educational games, and more. The primary languages used are JavaScript and TypeScript.

If you are new to either of those languages you can look into these freeCodeCamp beginner tutorials.

• Learn JavaScript - Full Course for Beginners
• Learn TypeScript - Full Course for Beginners

To get started working with Phaser, you can go to the download page on their website. Phaser offers dozens of free tutorials to help you get started creating your first games.

If you have experience working with Node, Express, Vue or Socket.IO, then you can look into these tutorials.

• How to Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Node, Express, and Socket.IO
• How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO

GameMaker Studio

GameMaker Studio is a cross platform video game engine where you can create your own 2D games. GameMaker supports many platforms including iOS, Android, Windows, Mac and game consoles such as PlayStation and Xbox.

Popular games made with GameMaker Studio include Undertale: Overwhelmingly Positive, Shovel Knight: Treasure Trove: Overwhelmingly Positive and Katana Zero: Overwhelmingly Positive.

GameMaker Studio uses the GameMaker Language and you can learn more by visiting the documentation.

They also offer dozens of tutorials to get you started making games. Gamemaker has a free option and you can create an account on their website.

CryEngine

CryEngine allows you to create interactive 3D games and supports platforms like Windows, Linux, PlayStation, Xbox, and Oculus Rift. You can create shooter games, platformer games, educational games and more with CryEngine.

Some popular games that have been built with CryEngine include Kingdom Come: Deliverance, Far Cry, State of Decay, and Ryse: Son of Rome.

Programming languages used for CryEngine include C#, C++, and Lua. If you are not familiar with those languages, then you can look into these resources.

• C# Tutorial - Full Course for Beginners
• C++ Tutorial for Beginners - Full Course
• Lua Get Started Guide

CryEngine has dozens of tutorials to help you get started building games and it is free to download on their website.

Amazon Lumberyard

Amazon Lumberyard is a free cross platform video game engine where you can create your own 3D games. Amazon Lumberyard supports many platforms including iOS, Android, Windows and game consoles such as PlayStation and Xbox.

Some games using Amazon Lumberyard include New World and The Grand Tour Game.

Programming languages used for Amazon Lumberyard include C++, and Lua. If you are not familiar with those languages, then you can look into these resources.

• C++ Tutorial for Beginners - Full Course
• Lua Get Started Guide

Amazon Lumberyard is free to download and there are dozens of tutorials to get you started building your own games.

Ren'Py Visual Novel Engine

Ren'Py Visual Novel Engine is a free engine where you can create interactive visual novels and games. Ren'Py supports many platforms including iOS, Android, Windows, Mac, and Linux.

Some popular games and novels created with Ren'Py include, Doki Doki Literature Club!, Zero Deaths, and UFO Swamp Odyssey.

The programming language used with Ren'Py is Python. If you are new to Python, you can take this freeCodeCamp YouTube course.

You can download Ren'Py for free on their website. They also provide a Quickstart guide to creating your first game or novel.

freeCodeCamp also has a walk through tutorial on how to make a visual novel game using Ren'Py.

Pygame

Pygame comes with modules, sounds, and graphics to allow you to create video games using Python. Pygame supports platforms including Linux, Mac and Windows.

Popular games built with Pygame include Frets on Fire and Dangerous High School Girls in Trouble!

The programming language used with Pygame is Python. If you are new to Python, you can take this freeCodeCamp YouTube course.

To get started with Pygame, you can go through their Getting Started guide on their website. freeCodeCamp also has a YouTube course on getting started with Pygame.

LÖVE

LÖVE is a free game engine where you can build 2D games. LÖVE supports many platforms including iOS, Android, Windows, Mac, and Linux.

Some popular games that have been built with LÖVE include Blue Revolver, Move or Die, and Warlocks Tower.

The programming language used for LÖVE is Lua. You can learn about Lua in their get started guide on the website.

Kaboom.js

Kaboom.js is a library that allows you to build computer games using JavaScript. If you are unfamiliar with JavaScript, then you can take this freeCodeCamp YouTube course.

To get setup, you can use their CDN, NPM or official Replit template. All of the information to get started can be found on their website.

Kaboom.js also provides a walk through tutorial to building your first game. You can recreate classic games like Mario and Space invaders using Kaboom.js.

You can also go through this freeCodeCamp YouTube course, to get started building classic games.

I hope you enjoy my list of popular game engines and tools to get started learning how to build your own games.

I encourage to keep exploring and find even more game options that were not mentioned in this article so you can continue your learning.

Best of luck on your game development journey.

According to True Education Partnerships,

Gamification in learning involves using game-based elements such as point scoring, peer competition, team work, and score tables to drive engagement, help students assimilate new information and test their knowledge.

I have curated a list of 12 coding games for beginners.

Here is the complete list. Once you find a website that interests you, click that link and it will jump you down to a more detailed description of that website.

1. CodinGame
2. CSS Diner
3. Flexbox Froggy
4. Flexbox Defense
5. Grid Garden
6. CodeCombat
7. Scratch
8. Tynker
9. SQL Murder Mystery
10. Untrusted
11. Elevator Saga
12. CheckiO

CodinGame

CodinGame is a site that helps you work on problem solving skills and learn programming basics through a turn-based game.

This platform supports over 25 different programming languages and gives players the opportunity to practice, learn, and compete in coding contests.

Once you create an account, you can get started with the beginner level onboarding section. You will be introduced to standard programming concepts and solve mini challenges.

CSS Diner

In CSS Diner, you can practice the basics of CSS through a series of 32 challenges. This is a good way to get more familiar with the language and have fun learning it.

The first few challenges are short and focus on working with classes and ids. But as you progress through the levels, you will be introduced to Pseudo-selectors, First of Type Selector, Last of Type Selector, and the Universal Selector.

Flexbox Froggy

In Flexbox Froggy, you will learn CSS Flexbox by placing the frogs on the correct lillypads. By the time you finish level 24, you should feel comfortable using Flexbox in your next project.

Each challenge provides a description on the Flexbox properties. The first few challenges start off easy but as you progress in the game things get more complicated.

Flexbox Defense

Flexbox Defense is a tower defense game that helps you strengthen your CSS skills. Position the towers to keep out your enemies using CSS Flexbox.

The challenges will provide you with definitions of the Flexbox properties. Once you write your code, press the Start Wave button and see if you were successful in stopping your enemies.

Grid Garden

Learn CSS Grid by going through 28 levels of Grid Garden. Some familiarity with CSS Grid is encouraged but not required for getting started with the game.

Each challenge provides a description on the CSS Grid properties. The first few challenges start off easy but as you progress in the game things get more complicated.

CodeCombat

CodeCombat works well for both kids and adult learners. You can create a free account and learn the fundamentals of programming like loops, functions, conditionals, and variables.

You can choose which programming language to start with and work your way through the games.

You also have the option to upgrade to the premium account if you are interested in having access to more levels.

Scratch

MIT's Scratch is a block based programming language where you can learn about events, conditionals, variables, and more by building your own games and animations.

Choose from dozens of sprites, sounds and backgrounds to code your own creations and start understanding programming basics.

Scratch is also used during the first week of Harvard's CS50: Introduction to Computer Science course.

Tynker

Tynker is a site where you can build projects and play games using HTML, CSS, JavaScript, Python, and Java. They have an extensive list of projects, algorithms and data structure challenges.

You can build these projects in the online editor and share your creations within the community. This site is aimed at kids between the ages of 5-18.

SQL Murder Mystery

SQL Murder Mystery is great for both beginners and experienced SQL developers. Strengthen your SQL and problem solving skills by trying to track down the killer in this murder mystery.

The game uses SQLite and you will first have to get acquainted with the database structure before starting the game.

If you are new to SQL, there is a detailed walk through for beginners. Otherwise, if you are an experienced SQL user then you can dive straight into the game.

Untrusted

Untrusted is an adventure game where you can test your JavaScript and problem solving skills. Help guide Dr. Eval through a series of levels by solving JavaScript challenges.

If you are brand new to JavaScript then this game might be a little advanced for you. But if you have spent some time programming in JavaScript then the challenges will be doable.

Elevator Saga

Elevator Saga is a JavaScript game where you will go through a series of challenges trying to transport people in elevators in the most efficient way possible within the time given.

Once you modify the code, you can test the efficiency of your solution by clicking the start button in the top right hand corner. When the program is running, you can check the stats to see if you passed the challenge or not.

CheckiO

CheckiO is a strategy game where you can learn TypeScript or Python through a series of challenges. Once you create a free account, you will start off with the beginner challenges and work your way through to the advanced ones.

The game will give you access to hints and other players' solutions if you need help. You will solve each of the challenges in the online editor and move onto the next mission when the task is solved.

Don't get me wrong – there's nothing wrong with using the games on Code.org or Khan Academy. You can learn Scratch, which is a programming language designed to help kids learn concepts like loops and variables. Some of those games even teach basic Python or JavaScript.

But if you're a fully-grown adult, it may be harder to get excited about a kid-themed game like Minecraft or Disney's Frozen. You may instead want to find more serious games that can keep you engaged while you learn.

If this describes you, well I've got good news. This list is chock-full of games where you'll make meaningful strategic decisions, then execute them through code.

Note that all of the games on this list are fine for kids, too. But their primary audience is adult learners.

Let's dive in.

Best Coding Games Pick #1: SQL Murder Mystery

Upon starting SQL Murder Mystery, you receive some basic instructions:

"A crime has taken place and the detective needs your help. You vaguely remember that the crime was a ​murder​ that occurred sometime on ​Jan.15, 2018​ and that it took place in ​SQL City​. Start by retrieving the corresponding crime scene report from the police department’s database."

From there, you have to use your SQL query skills to find the killer.

If you're experienced with SQL, you may be able to solve the mystery in a single sitting. If not, there is a nice walkthrough to show you some querying tips.

SQL Murder Mystery will help you understand and apply database concepts such as:

• Primary and Foreign Keys
• Aggregate Functions
• Table Joins
• and even Wildcards

You can play SQL Murder Mystery for free right in your browser here.

Best Coding Games Pick #2: Elevator Saga

Elevator Function's minimalistic graphics, stats, and code editor

In Elevator Saga, you program a series of elevators to handle increasingly large loads of passengers.

Through its 19 challenges, you'll adapt your algorithm to minimize the amount of time passengers have to wait to move from floor to floor.

This game will give you a lot of JavaScript practice. It will also force you to get creative and experiment with optimization approaches.

Here's a 30-second demo video that will give you an idea of what the elevator programming gameplay looks like:

You can play Elevator Saga for free in your browser here.

Best Coding Games Pick #3: Screeps

_Screeps Gameplay. Image Credit: Goto64_

Screeps bills itself as an "MMO Sandbox Strategy Game for Programmers."

This is a serious programming game that assumes you already know some basic programming.

You can control your units using real-life programming languages like JavaScript. You can even compile languages like C++ and run them through WebAssembly.

Screeps came out back in 2017, and is still actively maintained. It's currently sitting at an 89% positive rating on Steam with more than 1,000 reviews, which makes it one of the more acclaimed games on the entire Steam platform.

Here's the full trailer:

Note that Screeps is a paid game. But there's a free demo that runs right in your browser here.

If you want to get the full game, you can buy Screeps from the Steam Shop here.

Best Coding Games Pick #4: Untrusted

The minimalist ASCII interface of Untrusted

Untrusted is a browser-based rogue-like game that uses real-world JavaScript as the main gameplay input.

In the game's own words, "You must literally edit and re-execute the very JavaScript running the game in your browser to save Dr. Eval from this dark and confusing reality!"

You can play Untrusted right in your browser here.

Best Coding Games Pick #5: Duskers

A screenshot of Dusker's unique graphical style and command line interface

Whereas the previous 4 games all involved using real programming languages, Duskers more closely resembles shell scripting.

You play as a programmer who is stranded in space and running low on supplies. You have to dock with abandoned space vessels and then scavenge them.

But you can't interact with these ships directly. Instead, you control a team of drones – each with their own abilities – and tell them how to explore these ships.

But look out – there are monsters on these ships that will destroy your drones if you're not careful.

This game is controlled entirely by typing into a command line interface. Because the game is real-time in nature, this can lead to some intense moments of rapidly typing commands as you try to save your drones from danger.

Here is the command-line themed trailer from Duskers' launch:

And here's a more in-depth overview of the gameplay and its programming roots (17 minute watch):

Best Coding Games Pick #7: Flexbox Defense (Browser)

The main Flexbox Defense gameplay loop: programming your towers to defend against invaders.

This is a Tower Defense Game that involves you protecting yourself using Flexbox-based commands.

By using real-life CSS Flexbox code, you'll adjust the position of your turrets to shoot invading enemies before they can overrun you.

Fun fact: this game was designed by Channing Allen, the brother of Indie Hackers founder Courtland Allen. The two brothers are both excellent programmers with a passion for teaching.

You can play Flexbox Defense in your browser here.

Best Coding Games Pick #8: CSS Diner

CSS Diner is browser game that will help you learn CSS selectors. Over the course of 32 levels, you'll learn a how to select DOM elements using a variety of different attributes:

• id
• classname
• nth-of-type
• nth-child
• not(x)
• [attribute="value"]
• and a whole lot more

This is a breezy playthrough, and you may want to beat it several times just to tighten up your CSS Selector muscle memory.

You can play CSS Diner for free in your browser here.

Best Coding Games Pick #9: CodinGame

CodinGame is actually a collection of several coding minigames.

And the best part is that you can code in any language you like. Their editor supports a ton of languages and compiles these on a server for you somewhere.

Some of the languages CodinGame supports for its programming games

CodinGame has built-in leaderboards and other features to give you plenty of motivation to keep practicing your coding. Even though the platform was launched way back in 2012, there is still nothing else quite like it.

If you're looking for a programming game to stream while live coding on Twitch or YouTube, look no further. There is plenty of fun to be had here.

You can explore CodinGame for free in your browser here.

Bonus Coding Game: VIM Adventures

VIM Adventures teaches you how to use VIM by navigating mazes and gathering items.

OK – so this isn't a coding game, but rather a game that teaches you a powerful coding tool: the VIM code editor.

You will learn VIM keyboard shortcuts and essential VIM concepts in a fun way. This is way less frustrating than thrashing about, trying to remember, for example, how to quit VIM.

You can play VIM Adventures for free in your browser here.

Gotta Play 'Em All

I hope this list has given you plenty of adult-oriented programming games to practice your coding skills with.

If I missed any good ones, let me know by tweeting at me.

Happy coding.

Why did I, and others, spend so much of our spare time exploring, surviving, dying, and (so, so much) grinding? Hundreds of factors contribute toward making an engaging experience, but the one I’m going to focus on is the notion of progression.

The idea of gamification isn’t new. Many popular applications (like todoist, or challenge timer) have incorporated some sort of progression scheme to make us, the consumers, use their app, give them money, and hand over our personal data. So I decided to go about my way of enabling others to do just that, through beautiful skill trees! Note: I expect neither money nor data from those using my skill trees.

The last few weeks have seen me toil away to create what I hope to be a pleasant plug’n’play React package to help you create exciting skill trees. You can test it yourself by following the tutorial. I hope it will be a frictionless experience.

We hope to have something resembling the skill tree below:

“A dying puppy. A baby in tears. If the previous statements elicited any emotional reaction report to your supervisor for summary destruction.”

beautiful-skill-tree@0.7.5

Grab the starter repo by using git clone git@github.com:andrico1234/borderlands-skill-tree.git

Move into the directory and run the starting script, yarn start. Give the site a whirl, you'll see nothing but the Borderlands logo and environment.

beautiful-skill-tree exposes three components: the SkillProvider, SkillTreeGroup, and the SkillTree components.

SkillProvider: This takes in no props and supplies the children with the skill tree's context. This puppy handles all of the global data related to the skill tree.

SkillTreeGroup: Is more involved in that it can take an optional theme property, where we can pass in some custom styling, to make our skill tree feel very Borderlands. The SkillTreeGroup also uses the children-as-a-function pattern to give us access to some imperative api functionality, such as skill tree reset, selected skills counter, etc. We don't need to worry about any of those for the scope of this article.

SkillTree: This is the most exciting of the package's exports, unless you're a sucker for typings (which are also exported, for all you TS fans). The SkillTree doesn't take any children but requires 3 props: treeId, title, and data. The treeId should be an id that's unique to each skill tree, but should be persistent across user sessions as this is used as the key for getting and setting the data to local storage. I'm not going to explain what the title prop does, I'll leave you to experiment. The data is the mixing pot of the application. You'll pass in your skill tree data structure which the app will use to render a beautiful-skill-tree. Let's get a real basic tree going before we move on to our multi-tree, multi-branch Borderlands spectacular.

In App.tsx, import the 3 components like so:

import { SkillProvider, SkillTreeGroup, SkillTree } from 'beautiful-skill-tree';

Place it underneath your img tag, outside of the image's container div, but within the outer div. Add the SkillProvider, passing the SkillTreeGroup as a child. Before you do the same with the SkillTree, remember that as SkillTreeGroup uses function-as-a-child pattern, you'll need to render a function that returns the child components. Return a single SkillTree and give it a treeId and a title prop. Pass an empty array into the data prop so your App.tsx looks like this:

function App() {
  return (
    <div>
    // <div headercontent />
      <SkillProvider>
        <SkillTreeGroup>
          {() => {
            return (
              <SkillTree treeId="basic-birch" title="First Skill Tree" data={[]} />
            )
          }}
        </SkillTreeGroup>
      </SkillProvider>
    </div>
  );
}

Go to localhost:3000 to see the application running. You should see the logo, background, and a grey rectangle. If you’re running into any errors, go through the introduction again and check to see if there any syntax error or incorrect imports.

Next, let’s create a real basic tree. Just 3 items that move in a linear line. The data structure for data looks like this:

type Skill = {
  id: string;
  icon?: string;
  title: string;
  tooltip: {
    description : string;
  },
  children: Skill[];
}

Each skill requires four properties, with one being optional. You should also notice that the children property is a recursive type, meaning that it takes an array of the same data structure, which it uses to render the children of the skill. This can go on infinitely, and make for some real complicated, winding trees. I'll create the first skill for you, and I'll trust you with carrying on for the next two items.

const data = [{
  id: 'first-skill',
  title: 'The root node',
  tooltip: {
    description : "The parent node, all of the descendants will be locked until it's selected",
  },
  children: [
  // rinse and repeat; always repeat.
]}

Add the above snippet to the App.tsx file, and replace the empty array inside of the SkillTree's data property with our data definition. Load your page, and you should have an interactive node. Give it a hover and a click and it should be reacting to your actions. If things are working, then I'll task you with creating two (or more) child nodes. Experiment with children and sibling lengths, to see what you can come up with. (If you also happen to break my precious package, leave me a GitHub issue so I can patch things up).

Once you’re comfortable with creating a skill tree, let’s go ahead and create our Borderlands skill tree. Fortunately, I’ve done all of the tedious work for you and have already created the data structures and accumulated the images.

You’ll need to import the three trees from the data file, which can be done via

import { motion, harmony, cataclysm } from "./data/data";

The next step is creating two additional SkillTrees alongside the current one. You'll need to wrap them in a React.Fragment as your SkillTreeGroup will now be trying to render 3 top level components. Pass in the data accordingly, and if you're unsure, I've posted the code snippet below.

<React.Fragment>
  <SkillTree treeId="motion" title="Motion" data={motion} />
  <SkillTree treeId="harmony" title="Harmony" data={harmony} />
  <SkillTree treeId="cataclysm" title="Cataclysm" data={cataclysm} />
</React.Fragment>

Go ahead and check your web browser, it should be aaallmoost ready. We’ve got the skills rendered, but the styling feels a little lackluster. It doesn’t feel very Borderlands. Fortunately for you, I’m a regular Neil Buchanan and prepared a custom theme. Import the theme and pass it through to the SkillTreeGroup's theme prop. The theme object is export via import theme from './data/theme';. Easy!

“I HAVE ONE QUESTION FOR YOU. EXPLOSIONS?”

Once you’ve done the above, check out the finished product. If you’re still not satisfied with the styles, check out the theme object and customise it yourself, there are a bunch of additional attributes whose styles can be adjusted, so just peek into the typings of the package.

I mentioned earlier that there are a few additional properties and values that can be used to tweak the skill tree, so have a mess around yourself, and link me to any cool trees you create. I’d love to add it to the growing list of trees found here. Here’s an example of the skill tree that kickstarted this obsession.

I hope you’ve enjoyed tinkering with the beautiful-skill-tree package. I'm always adding new features and updating, so give it a star on github! You can find an online demo of the borderlands skill tree here

You can find me on Instagram or GitHub if you want to chat code, music, or fitness!