无国界医生_如何在5分钟内创建无国界风格的技能树-优快云博客

无国界医生

Growing up, I spent my spare time doing what most programmers did: played video games every waking moment. I loved Adventure games and what a time sink they were. If time was the Mary Rose, and I was the French, my artillery were games like Kingdom Hearts, Ōkami, and Borderlands.

长大后，我用业余时间做大多数程序员所做的事情：每一次醒来都玩电子游戏。我喜欢冒险游戏，他们喜欢什么时间。如果时间是玛丽·罗斯(Mary Rose)，而我是法国人，那么我的火炮就是像《王国之心》，《卡卡米》和《无主之地》这类游戏。

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.

游戏化的想法并不新鲜。许多流行的应用程序(例如todoist或Challenge计时器 )都采用了某种渐进方案，以使我们，消费者，使用他们的应用程序，给他们钱，以及移交我们的个人数据。因此，我决定尝试通过美丽的技能树，使他人能够做到这一点！注意：我不希望那些使用我的技能树的人有钱也没有数据。

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.

在过去的几周中，我一直在努力创建我希望成为一个愉快的即插即用React软件包，以帮助您创建令人兴奋的技能树。您可以按照教程自己进行测试。我希望这将是一个无摩擦的经历。

We hope to have something resembling the skill tree below:

我们希望有一些类似于下面的技能树：

beautiful-skill-tree@0.7.5 (beautiful-skill-tree@0.7.5)

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

通过使用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.

进入目录并运行启动脚本yarn start 。旋转一下网站，除了Borderlands徽标和环境外，您什么都看不到。

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

beautiful-skill-tree三个组件： SkillProvider ， SkillTreeGroup和SkillTree组件。

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.

SkillProvider ：这不带任何道具，并为孩子提供技能树的上下文。这只小狗处理与技能树相关的所有全局数据。

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.

SkillTreeGroup ：涉及更多方面，因为它可以采用可选的theme属性，我们可以在其中传递一些自定义样式，以使我们的技能树感觉非常像无主之地。 SkillTreeGroup还使用“儿童即功能”模式来使我们能够访问某些命令性api功能，例如，技能树重置，选定的技能计数器等。我们无需担心其中的任何功能本文。

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.

SkillTree ：这是软件包输出中最令人兴奋的内容，除非您是SkillTree的傻瓜(对于所有TS迷来说，它们都是输出的)。 SkillTree不带任何子代，但需要3个道具： treeId ， title和data 。 treeId应该是每个技能树唯一的ID，但是应该在用户会话中保持不变，因为它用作获取数据并将其设置为本地存储的键。我不会解释title道具的作用，我将让您进行实验。 data是应用程序的混合锅。您将传入您的技能树数据结构，该应用程序将使用该数据结构来渲染beautiful-skill-tree 。在继续进行多树，多分支的Borderlands壮观之前，让我们先看看一棵真正的基本树。

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

在App.tsx中，导入3个组件，如下所示：

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:

将其放在img标签的div之外的img标签下方，但位于外部div中。添加SkillProvider ，将SkillTreeGroup作为子级传递。在对SkillTree进行相同操作之前，请记住，由于SkillTreeGroup使用SkillTreeGroup功能模式，因此您需要呈现一个返回子组件的函数。返回一个SkillTree并给它一个treeId和一个title SkillTree 。将一个空数组传递到data App.tsx以便您的App.tsx如下所示：

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.

转到localhost：3000以查看应用程序正在运行。您应该看到徽标，背景和一个灰色矩形。如果遇到任何错误，请再次阅读介绍，并检查是否存在语法错误或不正确的导入。

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:

接下来，让我们创建一个真正的基本树。仅有3个项目沿直线移动。对于数据结构data是这样的：

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.

每个技能都需要四个属性，其中一个是可选的。您还应该注意， children属性是一个递归类型，这意味着它采用了相同数据结构的数组，用于渲染该技能的孩子。这可以无限进行，并构成一些真正复杂的，蜿蜒的树。我将为您创建第一个技能，并且相信您可以继续进行下两个项目。

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).

将以上代码段添加到App.tsx文件中，并用我们的data定义替换SkillTree的data属性内的空数组。加载页面，并且应该有一个交互式节点。悬停并单击它，它应该对您的操作做出React。如果一切正常，那么我将为您创建两个(或更多个)子节点。试验孩子和兄弟姐妹的身高，看看能做什么。 (如果您也碰巧破坏了我的宝贵软件包，请给我一个GitHub问题，以便我进行修补)。

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

您需要从data文件中导入三棵树，这可以通过以下方式完成

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.

下一步是在当前SkillTrees旁边创建另外两个SkillTrees 。您需要将它们包装在React.Fragment因为SkillTreeGroup现在将尝试渲染3个顶级组件。相应地传递数据，如果不确定，我在下面发布了代码段。

<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!

继续检查您的网络浏览器，它应该已经准备就绪。我们已经提供了技巧，但是样式感觉有些乏味。感觉并不像《无主之地》。幸运的是，我是常规的尼尔·布坎南 ( Neil Buchanan)，并准备了一个自定义主题。导入主题并将其传递给SkillTreeGroup的theme道具。主题对象是通过import theme from './data/theme';导出import theme from './data/theme'; 。简单！

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

我希望您喜欢使用beautiful-skill-tree软件包。我一直在添加新功能并进行更新，因此在github上加个星号吧！您可以在此处找到边疆技能树的在线演示

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

如果您想聊天代码，音乐或健身，可以在Instagram或GitHub上找到我！