react开发模式

by Pavel Vlasov

通过帕维尔·弗拉索夫(Pavel Vlasov)

通过开发带有精灵动画的游戏来学习高级React模式 (Learn advanced React patterns by developing a game with sprite animation)

Have you ever wanted to learn some advanced React patterns? Or build your own game engine? If at least one answer is yes, then this article is for you.

您是否曾经想学习一些高级React模式？ 还是构建自己的游戏引擎？ 如果至少有一个答案是肯定的，那么本文适合您。

In this tutorial, you’ll learn how to build basic sprite animation using React, styles-components, and requestAnimationFrame. At the end you’ll be able to create characters like this:

在本教程中，您将学习如何使用React ， styles-components和requestAnimationFrame来构建基本的精灵动画。 最后，您将可以创建如下字符：

You may ask me why can’t I learn it another way? Well… There’re three reasons for that:

您可能会问我， 为什么我不能以其他方式学习它 ？ 好吧……这有三个原因：

So, let’s do it! ?

所以，让我们开始吧！ ？

让我们从一些理论开始 (Let’s start with a bit of a theory)

What is a sprite animation? Wikipedia says that

什么是精灵动画？ 维基百科说

In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene.

在计算机图形学中， 子画面是一个二维位图，已集成到较大的场景中。

So basically sprite animation is a repeatedly changing two-dimensional bitmap.

因此，基本上，精灵动画是一个反复变化的二维位图。

Sprite is usually represented like a png image with different states of the animation:

Sprite通常表示为具有不同动画状态的png图像：

We’ll start by creating a tile component that will show us one frame at a time and allow us to change frames with state property:

我们将首先创建一个tile组件，该组件一次向我们显示一帧，并允许我们使用state属性更改帧：

Basically, we’ll need to show one part of the image at a time and hide the rest. Pretty straightforward.

基本上，我们需要一次显示图像的一部分，然后隐藏其余部分。 非常简单。

瓦 (Tile)

First of all, we’ll create a container component to create the shape of our frame:

首先，我们将创建一个容器组件以创建框架的形状：

width and height represent the size of the tale, and scale increases the size of the image. overflow: hidden will hide the unused part of the image and transform-origin will make a container to keep its top and left the same when we scale it.

width和height代表故事的大小，而scale增加图像的大小。 overflow: hidden将隐藏图像的未使用部分，而transform-origin将使容器在缩放时保持顶部和顶部不变。

Now we need to adjust the position of the inner image. We’ll use the transform: translate CSS property for that:

现在我们需要调整内部图像的位置。 我们将使用transform: translate CSS属性：

Now let’s combine everything together in the tile component:

现在，让我们在tile组件中将所有内容组合在一起：

• src property contains a link to the image

  src属性包含图像的链接

• tile is the object with width and height fields, represents the size of the tile

  tile是具有width和height字段的对象，代表tile的大小

• state frame index

  state框架索引

• scale property to increase the size of the image (For example, scale = 2 is 2x image)

  scale属性以增加图像的大小(例如， scale = 2是2x图像)

In the next step, we’ll add some movement to our image.

在下一步中，我们将为图像添加一些移动。

雪碧 (Sprite)

We’ll use requestAnimationFrame for that. You may ask why we don’t use setTimeout or setInterval. The problem with timeouts is that the callback will fire somewhere in between frames, that may result in clunky animation.

我们将为此使用requestAnimationFrame 。 您可能会问为什么我们不使用setTimeout或setInterval。 超时的问题在于回调将在帧之间的某个位置触发，这可能会导致笨拙的动画。

Also, requestAnimationFrame allows us to synchronize animations of different objects on the screen. In the game you’ll have lots of them!

另外， requestAnimationFrame允许我们同步屏幕上不同对象的动画。 在游戏中，您将有很多！

Let’s put together a Sprite component:

让我们把一个Sprite组件放在一起：

In the animate function, we should change the state of the frame and request a new animation frame:

在animate功能中，我们应该更改帧的state并请求一个新的动画帧：

We use the eframesPerStep property to control the number of states per frame, so our animation won’t be too fast.

我们使用framesPerStep属性来控制每帧的状态数，因此动画不会太快。

那枪呢？ ？ (What about a gun? ?)

Now the only thing we need to do is combine our sprite with the gun image:

现在，我们唯一需要做的就是将我们的精灵与枪的图像结合起来：

And you should get the following result:

并且您应该得到以下结果：

The best way to learn something it to build it by yourself. So I encourage you to use this codesandbox:

自己学习构建东西的最好方法。 因此，我鼓励您使用以下codeandbox ：

The TypeScript version is available here as well.

这里也提供 TypeScript版本。

As a bonus, you can implement different animations using files from the assets folder.

另外，您可以使用资产文件夹中的文件来实现不同的动画。

You can find the source code here. I used game assets made by finalbossblues.

您可以在此处找到源代码。 我使用的是finalbossblues制造的游戏资产。

Hope you enjoyed the article! ?

希望您喜欢这篇文章！ ？

Follow me on Medium and Twitter to get more updates on new articles. Also, share this article to help others know about it. Sharing is caring ?

在Medium和Twitter上关注我，以获取有关新文章的更多更新。 另外，分享这篇文章以帮助其他人了解它。 分享在乎吗？

Destroy this clap button if you want more.

如果您想要更多，请破坏此拍手按钮。

You can clap up to 50 times! ?

您最多可以拍手50次！ ？

Some more resources about the topic:

有关该主题的更多资源：

Understanding JavaScript's requestAnimationFrame() method for smooth animationsrequestAnimationFrame() is a JavaScript method for creating smoother, less resource intensive JavaScript animations…www.javascriptkit.com

了解JavaScript的requestAnimationFrame()方法以实现平滑的动画 requestAnimationFrame()是一种JavaScript方法，可用于创建更平滑，资源占用更少JavaScript动画…… www.javascriptkit.com

Originally published at react.camp.

最初发表于react.camp 。

翻译自: https://www.freecodecamp.org/news/learn-advanced-react-patterns-by-developing-a-game-with-sprite-animation-5dc072886975/

react开发模式