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開發模式