通过开发带有精灵动画的游戏来学习高级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 , , and requestAnimationFrame. At the end you’ll be able to create characters like this:

在本教程中，您将学习如何使用，和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? 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属性来控制每帧的状态数，因此动画不会太快。