vue和react相同点_我试图在React，Unity，Godot，Construct，Game Maker和Phaser中制作相同的2D游戏原型。 这是我发现的。...

vue和react相同点

I'm a tabletop game developer. In designing a new card game, I decided to build a digital prototype to help me run simulations and easily share a proof of concept with collaborators.

我是桌面游戏开发商。 在设计新的纸牌游戏时，我决定构建一个数字原型，以帮助我进行仿真并轻松与合作者共享概念证明。

I have some background in JavaScript and C#, and I set out as many do: by spending an inordinate amount of time in "what framework should I use" threads and reading documentation without actually making anything.

我具有JavaScript和C＃的背景知识，并且我也有很多背景知识：通过在“我应该使用哪种框架”线程上花费过多的时间，并在不做任何事情的情况下阅读文档。

Flash forward many months, and I've now spent more time working in (and wrestling with) React, Unity, Godot, Construct 3, Game Maker Studio 2, and Phaser 3, in an attempt to understand what makes them tick.

向前闪了好几个月，现在我花了更多时间在React，Unity，Godot，Construct 3，Game Maker Studio 2和Phaser 3中(并与之搏斗)，以期了解使它们产生变化的原因。

Admittedly, I think I've spent way more time in each of them than necessary to make my little game, and I probably could have just stuck with the first one and blundered my way through the prototype. I'm hoping the below info will be helpful for anyone else who is shopping around for an engine or framework.

诚然，我想我已经花了方式他们每个人的比需要更多的时间来让我的小游戏，我可能刚刚套牢的第一个，并通过原型失蹄我的方式。 我希望以下信息对那些正在寻找引擎或框架的人有所帮助。

Bunch of caveats: I'm not attempting to sell one engine or framework over the others, and I'm also not suggesting that one or any of these frameworks will work for your game better than another. I'm also not comparing pricing, back end functionality, or platform deployment. So depending on your requirements, the below information might be of differing value to you.

一堆警告：我并不是试图将一个引擎或框架卖给其他引擎，也不是建议这些框架中的一个或任何一个比另一个对您的游戏更好。 我也没有比较定价，后端功能或平台部署。 因此，根据您的要求，以下信息可能对您具有不同的价值。

Additionally, this experience is based on development for a 2D card game, so I won't be discussing 3D engines, physics, etc.

此外，这种经验是基于2D纸牌游戏的开发而来的，因此，我将不再讨论3D引擎，物理等。

You can also skip to the bottom for the TL;DR.

您也可以跳至TL; DR的底部。

原型 (The Prototype)

My game, Entromancy: Hacker Battles, is a competitive cyberpunk card game with TCG-light mechanics. You can read more on our website or watch how it's meant to be played in this video. But suffice it to say that, as a card game, it requires a potential digital framework to support basic things like state management, UI, drag-and-drop UX, and back end hooks for implementing multiplayer.

我的游戏Entromancy：Hacker Battles是一款具有TCG光机制的竞争性赛博朋克纸牌游戏。 您可以在我们的网站上阅读更多内容，或观看此视频中的播放方式 。 但是可以说，作为纸牌游戏，它需要潜在的数字框架来支持基本事物，例如状态管理，UI，拖放式UX和用于实现多人游戏的后端挂钩。

Given these requirements, I explored the following frameworks and engines to see which one would be most suitable for making my game...instead of actually making the game (I'm happy to say that now that I've settled on a framework, I'm making a lot more progress).

鉴于这些要求，我探索了以下框架和引擎，以查看哪种框架和引擎最适合制作我的游戏...而不是实际制作游戏(我很高兴地说，既然我已经确定了框架，我正在进步很多)。

You can access a playable version here, and although the game is further along than the live prototype would suggest, this version is pretty stable (in Chrome at least).

您可以在此处访问一个可玩的版本，尽管该游戏比实际原型建议的要远，但该版本相当稳定(至少在Chrome中是这样)。

React (React)

Having already built a character generator prototype in React for a tabletop RPG I designed, I thought a natural step would be to give the framework a spin for the card game. I found state management to be a breeze (it's what React does, after all), whereas implementing simple drag-and-drop functionality for cards proved to be a nightmare.

我已经在React中为我设计的台式RPG构建了一个角色生成器原型，我认为自然而然的步骤就是让该框架成为纸牌游戏的一部分。 我发现状态管理是一件轻而易举的事(毕竟，React就是这样做的 )，而对卡实施简单的拖放功能却被证明是一场噩梦。

There are some libraries out there that can help with basic drag-and-drop (e.g. React DnD), but I found that with a card game, I needed a more elegant solution for dropzones, as Hacker Battles is very specific about which cards can be played where, and when.

有一些库可以帮助您进行基本的拖放操作(例如React DnD )，但是我发现在纸牌游戏中，我需要一个更为优雅的拖放区解决方案，因为Hacker Battles非常具体地说明了哪些纸牌可以在何时何地播放。

This experience led me to check out boardgame.io, which can work in tandem with React. But this ultimately required me to learn another framework on top of an existing framework, which was less than ideal for my purposes.

这种经验使我检查了boardgame.io ，它可以与React协同工作。 但这最终要求我在现有框架之上学习另一个框架，这对我而言并不理想。

统一 (Unity)

Out of general interest, I had spent a lot of time in Unity doing tutorials and learning how to use the editor before attempting to remake the card game prototype with it. The asset store is a great resource, and there's so much documentation, official and unofficial, out there that I was confident I could find an answer to any issue I might encounter.

出于普遍兴趣，我在Unity上花费了大量时间来学习教程和学习如何使用编辑器，然后尝试使用它来重新制作纸牌游戏原型。 资产商店是一个很好的资源，并且有太多官方和非官方的文档，我有信心可以找到可能遇到的任何问题的答案。

My experience with Unity thus far has been a mixed bag. I really enjoy working in C#, and anything code-related has been a relatively pain-free experience. However, Unity is very specific about its implementation and can feel counter-intuitive at times.

到目前为止，我在Unity方面的经历是好坏参半。 我真的很喜欢用C＃进行工作，并且与代码相关的任何事情都是相对轻松的经历。 但是，Unity对其实现非常具体，有时可能会感觉与直觉相反。

The editor, on the other hand, is a bear to work with. To harness Unity's full potential, you need to spend a good long while wrestling with the UI to understand where everything is and how to use it. It's also desperately behind the times with 2D game development, clearly attempting to flatten a primarily 3D engine into a 2D plane, with mixed results.

另一方面，编辑器是可以忍受的。 为了充分利用Unity的潜力，您需要花大量时间在UI上进行角力，以了解一切在哪里以及如何使用它。 在2D游戏开发方面，它也非常落后于时代，显然是试图将主要的3D引擎压平为​​2D平面，但结果却不尽相同。

To be fair, I quite enjoy working in the Unity editor, clunky as it is. But if you're looking for a 2D game engine, your quality of life will be a lot higher elsewhere (watch a video on Unity's animation system or achieving pixel perfection and you'll see what I mean).

公平地讲，我很喜欢在Unity编辑器中工作，虽然很笨拙。 但是，如果您正在寻找2D游戏引擎，您的生活质量将在其他地方更高(观看有关Unity动画系统的视频或达到像素完美的效果，您会明白我的意思)。

Ultimately, Unity's handling of the 2D space is a bit more complex than I need for my prototype, but I will return to it for other types of games.

最终，Unity对2D空间的处理比我的原型要复杂得多，但是我将在其他类型的游戏中使用它。

Also, a sidebar that might be useful to some: I was initially extremely excited about the asset store, with the idea that I could purchase a card game template that would make the development process that much easier for me. It didn't work out. Most of them were MTG/Hearthstone/etc. clones that would require just as much development time on my part to restructure them for my card game as it would to just start from scratch.

另外，可能对某些用户有用的侧边栏：最初，我对资产商店感到非常兴奋，因为我可以购买纸牌游戏模板，从而使开发过程对我而言变得更加容易。 它没有解决。 其中大多数是MTG / Hearthstone / etc。 对于我的纸牌游戏来说，克隆克隆需要花费大量的开发时间，就像从头开始一样。 <耸肩>

戈多 (Godot )

My first thought upon encountering Godot was: "open source game engine that supports C#? Sign me up!" Then I downloaded it, worked through a couple of basic tutorials, and had it crash on build. Hurm.

遇到Godot时 ，我的第一个念头是：“支持C＃的开源游戏引擎？注册我！” 然后，我下载了它，通过一些基本教程进行了研究，并使其崩溃。 rm

Several Google searches, reinstalls, and hairs pulled later, I figured out it had something to do with my version of VS Build (I think?), which led me down a separate rabbit hole. I knew from experience that other engines - Unity chief among them - could cause game-breaking issues completely outside of your own code, but this was an annoying hurdle that likely colored the rest of my experience with Godot.

Google进行了几次搜索，重新安装和拔毛，后来我发现这与我的VS Build版本有关(我认为吗？)，这使我跌入了另一个兔子洞。 我从经验中知道，其他引擎-其中的Unity首席引擎-可能会完全在您自己的代码之外引起游戏中断问题，但这是一个令人烦恼的障碍，可能会使我在Godot上的其他经历充实。

In terms of the editor, I quite liked Godot's node-based implementation, which I actually found counter-intuitive coming from Unity's prefabs, but eventually warmed to. I'd actually go as far as to say that its 2D functionality is better than Unity's, but it's missing the community, asset store (see sidebar above), and especially, the documentation that Unity has. If you're intending in working in C# with Godot, for example, be prepared to look for answers in the engine's custom GDScript and then translating them to C#.

在编辑器方面，我非常喜欢Godot的基于节点的实现，实际上我发现它与Unity的预制件有悖常理，但最终逐渐流行起来。 实际上，我想说的是它的2D功能要比Unity 更好 ，但是它缺少社区，资产存储(请参见上面的侧栏)，尤其是Unity所拥有的文档。 例如，如果您打算与Godot一起使用C＃，请准备在引擎的自定义GDScript中寻找答案，然后将其转换为C＃。

I have heard, however, of people experiencing great success with Godot while using GDScript, so if you're willing to invest the time to learn it you might enjoy what Godot has to offer.

但是，我听说有人在使用GDScript时在Godot上获得了巨大的成功，因此，如果您愿意花时间学习它，您可能会喜欢Godot所提供的。

构造3 (Construct 3 )

In the caveats that I listed above, I mentioned that I'm not including pricing as a point of discussion. Still, I feel like I need to bring it up with Construct 3, as it turned out to be impactful in my experience.

在上面列出的警告中，我提到我没有将定价作为讨论的重点。 不过，我仍然觉得我需要在Construct 3中提出它，因为事实证明它对我的经验有影响。

Unlike the other game engines listed here, which are, for the most part, free to use (Game Maker Studio 2 has a 30-day free trial), the vast majority of Construct's functionality is behind a pay wall, and a subscription fee at that. Ugh.

与此处列出的其他大多数免费使用的游戏引擎不同(Game Maker Studio 2具有30天的免费试用期)，Construct的绝大多数功能都在付费墙后面，而订阅费为那。 啊。

I really, really like the cut of Construct's jib for simple 2D games. The editor feels a bit like an upgrade from MS Paint, but it handles sprite and object management really well, and is just plain easy to use. I don't love that it uses a "visual scripting" style, but they've recently added the feature of writing plain old JavaScript and it seems to more or less work.

我真的非常喜欢将Construct的副臂切成简单的2D游戏。 编辑器感觉有点像MS Paint的升级，但是它可以很好地处理Sprite和对象管理，并且简单易用。 我不喜欢它使用“可视脚本”样式，但是他们最近添加了编写普通的旧JavaScript的功能，它似乎或多或少地起作用。

I was able to spin up a very rudimentary architecture for the prototype in a brief amount of time before closing the Construct 3 demo (which runs in a browser)...and then trying it all again later with a new demo. I feel like, at least for this card game, I could do a lot with Construct 3, but I'm just not willing to pay $99/year (or more, as a business) for a prototype.

在关闭Construct 3演示(在浏览器中运行)之前，我能够在很短的时间内建立起非常原型的原型架构，然后在以后的新演示中再次尝试。 我觉得，至少对于这款纸牌游戏，我可以用Construct 3做很多事情，但我只是不愿意为原型支付每年99美元(或更多，作为企业)。

游戏制作工作室2 (Game Maker Studio 2)

YoYo Games has clearly done a lot of work to make Game Maker Studio 2 accessible and easily navigable, and it shows. Of all of the engines that I've used for this project, I like the GMS editor the most. For a small project, it's easy to find your way around and go about your business. I suspect, however, that a larger project might get out of hand pretty quickly.

YoYo Games显然已经做了很多工作，以使Game Maker Studio 2易于访问和导航。 在用于该项目的所有引擎中，我最喜欢GMS编辑器。 对于小型项目，很容易找到自己的出路并开展业务。 但是，我怀疑较大的项目可能很快就会失控。

This might be influenced by Game Maker Studio's proprietary language, GML (although GMS 2 supports visual scripting, which I did not use). It works, but if you're coming to it from another OOP language (or, truly, any other widely used language), you might scratch your head at the implementation or figuring out how to do some things. If you're a beginner or willing to spend time figuring out how GMS wants you to use GML, you'll probably be fine.

这可能受Game Maker Studio的专有语言GML的影响(尽管GMS 2支持视觉脚本，但我没有使用它)。 它可以工作，但是如果您是从另一种OOP语言(或者，实际上，是任何其他广泛使用的语言)来学习它，则可能会为实现而抓狂，或者想出如何做一些事情。 如果您是初学者或愿意花时间弄清楚GMS如何希望您使用GML，则可能会很好。

I experienced some quirkiness with Game Maker Studio's drag-and-drop functionality - namely, mouse pointer detection upon dragging is a little wonky and requires some scaffolding to make work correctly.

我对Game Maker Studio的拖放功能感到有些古怪-即，拖动时检测鼠标指针有点不灵敏，需要一些脚手架才能正常工作。

I think - and this is totally personal preference and laziness on my part - that if GMS offered the ability to use another, non-proprietary programming language, I would spend the time to do more damage here. I'm all for leveling up multiple skills while working, whereas spending the time to become an expert in the GMS editor and GML without being able to easily apply that knowledge elsewhere doesn't seem worthwhile.

我认为-这完全是个人喜好和惰性-如果GMS提供使用另一种非专有编程语言的能力，我会花时间在这里造成更大的损失。 我全心全意地在工作中提高多种技能，而花时间成为GMS编辑器和 GML的专家却又不能轻易将这些知识应用到其他地方似乎并不值得。

Still, it's a pretty workable 2D editor, and although the community support may not be on par with Unity's, it's still pretty good.  Beware, also, that once your free trial is up, you'll have to pay to continue using Game Maker Studio 2.

尽管如此，它还是一个非常实用的2D编辑器，尽管社区支持可能无法与Unity相提并论，但它仍然相当不错。 另外，请注意，一旦免费试用期结束，您就必须付费才能继续使用Game Maker Studio 2。

移相器3 (Phaser 3)

Phaser is a lightweight, open-source JavaScript game framework. There are some Phaser IDEs around, but if you're of the sort that wants to work primarily in code, you might wind up here, using Atom, Sublime, or your favorite editor.

Phaser是一个轻量级的开源JavaScript游戏框架。 周围有一些Phaser IDE，但是如果您希望主要在代码中工作，可以使用Atom，Sublime或您喜欢的编辑器结束。

Phaser 2 was and is widely used and well-documented with a ton of tutorials to draw upon. Phaser 3 is the opposite. It has a comparatively high learning curve for beginners, with a bunch of examples and not a lot of context around them.

Phaser 2曾经并且已经被广泛使用，并且有大量的文档可供参考。 相位器3相反。 对于初学者来说，它有一个相对较高的学习曲线，上面有很多例子，但周围没有很多背景。

A lot of the tutorials out there support Phaser 2, and while the learning is transferable, the code is not. Additionally, the devs recently announced that they'll be moving support to Phaser 4 (and TypeScript rather than ES6), which is not great if you've spent time working in Phaser 3.

那里的许多教程都支持Phaser 2，尽管学习是可移植的，但代码却不行。 此外，开发人员最近宣布，他们将把支持移到Phaser 4 (和TypeScript而不是ES6)，如果您花了很多时间在Phaser 3中工作，这并不是很好。

If you're not a professional programmer (I'm not) and up-to-speed with ES6 classes and JavaScript best practices (I wasn't), you might become quickly frustrated with Phaser's lack of handholding and having to set up your own IDE and work flow (I was).

如果您不是专业程序员(不是)，并且不熟悉ES6类和JavaScript最佳实践(不是)，那么您可能会因为Phaser缺乏手持性和必须设置自己而感到沮丧自己的IDE和工作流程(我曾经)。

However, I've found it to be a powerful, lightweight framework that does a lot of things in a much more streamlined fashion than other game engines. Drag-and-drop functionality for the card game has been a relative breeze, and the ability to separate card types into classes (sort of like Unity's prefabs) has compartmentalized some of the cognitive load that this kind of game requires.

但是，我发现它是一个功能强大的轻量级框架，与其他游戏引擎相比，它以更简化的方式来完成许多事情。 纸牌游戏的拖放功能相对容易，将纸牌类型划分为类的能力(类似于Unity的预制件)已经分隔了这种游戏所需的一些认知负担。

If you're a front end developer, you might like or be comfortable with hard coding pixel coordinates for everything, but sheesh, is this painstaking work. Additionally, if you're not up-to-speed on everything JavaScript, you'll most likely be searching for answers in non-Phaser circles and then applying them to your project, which has its own benefit, I suppose.

如果您是前端开发人员，则可能会喜欢或对所有内容都进行硬编码像素坐标感到满意，但是工作量很大。 此外，如果您不了解JavaScript的全部知识，那么您很可能会在非Phaser圈子中寻找答案，然后将其应用于您的项目，这有其自己的好处。

One other note in case it's not clear: Phaser 3 does have quite a bit of official documentation and examples, but it doesn't have the community or Stack Overflow answers that a lot of other game engines enjoy. If you run into an issue or can't figure something out, you'll have to figure out your own solution or post your question on the Phaser Discord server, which has been helpful in my experience.

如果不清楚，请另外注意：Phaser 3 确实有很多官方文档和示例，但没有许多其他游戏引擎喜欢的社区或Stack Overflow答案。 如果您遇到问题或无法解决问题，则必须找出自己的解决方案或将问题发布到Phaser Discord服务器上，这对我的经验很有帮助。

结论 (Conclusion )

Given all of the above, the prototype I've stuck with and continue to iterate upon is the one I've built with Phaser 3. I realize that this may be anti-climactic, as Phaser isn't inherently "better" than the other frameworks and engines at 2D game development (except for, perhaps, React, which isn't trying to be a competitor in the digital game space).

鉴于以上所有内容，我一直坚持并继续迭代的原型是我使用Phaser 3制作的原型。我意识到，这可能是反高潮的，因为Phaser本质上并不比“移相器”更好。 2D游戏开发中的其他框架和引擎(也许是React，但它并不想成为数字游戏领域的竞争对手)。

Phaser does, however, seem to handle drag-and-drop and game loop management for Hacker Battles more smoothly, and for my purposes, that's important. I also enjoy that using Phaser is requiring me to invest more heavily in the JavaScript ecosystem(s) and communities, but I'm interested in doing that anyway so it feels like a bonus.

但是，Phaser确实可以更顺畅地处理Hacker Battles的拖放和游戏循环管理，这对我来说很重要。 我也很喜欢使用Phaser要求我在JavaScript生态系统和社区上投入更多的资金，但是无论如何我都对此很感兴趣，因此感觉像是一种奖励。

If you're more of the "what can I use to build something quickly and not care about the context in which the engine is situated" type, YMMV.

如果您更喜欢“我可以用来快速构建某些东西，而又不在乎引擎所处的环境”类型，则为YMMV。

TL; DR (TL;DR)

React: great for front end development. Wouldn't use it for games, particularly drag-and-drop.

React：非常适合前端开发。 不会将其用于游戏，尤其是拖放操作。

Unity: you can make any type of 2D game if you're willing to wrestle with the editor and underlying 3D idiosyncrasies. Great community support, and C# is awesome. Asset store exists, but may not be useful for your purposes.

统一性：如果您愿意与编辑器和底层3D特性进行搏斗，则可以制作任何类型的2D游戏。 强大的社区支持，C＃很棒。 资产存储已存在，但对于您的目的可能没有用。

Godot: open source and supports GDScript, C#, even C++ and Python if you're willing to do a lot of the heavy lifting. Good 2D implications but not nearly as much community support as something like Unity. Also, my experience was buggy.

Godot：如果您愿意承担很多繁重的工作，那么它是开源的，并且支持GDScript，C＃，甚至C ++和Python。 良好的2D含义，但社区支持不如Unity那样多。 另外，我的经验是越野车。

Construct 3: really easy to use, high barrier to entry because of the subscription paywall. Visual scripting may get on your nerves if you're looking to use or learn code, although there is now some JavaScript support.

构造3：确实易于使用，由于订阅收费墙，进入门槛很高。 尽管现在有一些JavaScript支持，但是如果您想使用或学习代码，可视脚本可能会引起您的注意。

Game Maker Studio 2: user-friendly editor with good community support. GML or visual scripting might not be your cup of tea if you're coming from another more popular programming language, but hey, when in Rome. Also, requires payment after a 30-day free trial.

Game Maker Studio 2：用户友好的编辑器，具有良好的社区支持。 如果您来自另一种更流行的编程语言，那么GML或可视化脚本可能不是您的最佳选择，但是，嘿，在罗马时。 另外，需要30天免费试用后付款。

Phaser 3: expect to code everything, and do a lot of searching to figure out how to make things work. It's working for me for this particular game and prototype, but Phaser 4 is on the way, so there's that.

阶段3：期望对所有内容进行编码，并进行大量搜索以弄清楚如何使事情正常进行。 它对我来说适用于此特定的游戏和原型，但是Phaser 4即将推出，就是这样。

I hope this post is useful in your own search and discernment process. I'd love to hear about your own experience(s), too, with any of these frameworks/engines or others!

我希望这篇文章对您自己的搜索和识别过程很有用。 我也很想听听您对任何这些框架/引擎或其他框架的经验！

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

如果您喜欢这篇文章，请考虑查看我的游戏和书籍 ， 订阅我的YouTube频道或加入Entromancy Discord 。

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

法赞(MS Farzan)博士 曾为知名的视频游戏公司和编辑网站(例如，Electronic Arts，Perfect World Entertainment，Modus Games和MMORPG.com)撰写和工作，并曾担任《龙与地下城：龙骨无双》和《 质量效应：仙女座》等游戏的社区经理。 。 他是《 Entronancy：Cyber​​punk Fantasy RPG》的创意总监和首席游戏设计师，并且是《 The Nightpath Trilogy》的作者。 在Twitter @sominator上找到MS Farzan 。

翻译自: https://www.freecodecamp.org/news/how-i-made-a-2d-prototype-in-different-game-engines/

vue和react相同点