react開發(fā)模式

by Pavel Vlasov

通過帕維爾·弗拉索夫(Pavel Vlasov)

通過開發(fā)帶有精靈動(dòng)畫的游戲來學(xué)習(xí)高級(jí)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.

您是否曾經(jīng)想學(xué)習(xí)一些高級(jí)React模式？ 還是構(gòu)建自己的游戲引擎？ 如果至少有一個(gè)答案是肯定的，那么本文適合您。

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:

在本教程中，您將學(xué)習(xí)如何使用React ， styles-components和requestAnimationFrame來構(gòu)建基本的精靈動(dòng)畫。 最后，您將可以創(chuàng)建如下字符：

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

您可能會(huì)問我， 為什么我不能以其他方式學(xué)習(xí)它 ？ 好吧……這有三個(gè)原因：

So, let’s do it! ?

所以，讓我們開始吧！ ？

讓我們從一些理論開始 (Let’s start with a bit of a theory)

What is a sprite animation? Wikipedia says that

什么是精靈動(dòng)畫？ 維基百科說

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

在計(jì)算機(jī)圖形學(xué)中， 子畫面是一個(gè)二維位圖，已集成到較大的場景中。

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

因此，基本上，精靈動(dòng)畫是一個(gè)反復(fù)變化的二維位圖。

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

Sprite通常表示為具有不同動(dòng)畫狀態(tài)的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:

我們將首先創(chuàng)建一個(gè)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:

首先，我們將創(chuàng)建一個(gè)容器組件以創(chuàng)建框架的形狀：

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將使容器在縮放時(shí)保持頂部和頂部不變。

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

現(xiàn)在我們需要調(diào)整內(nèi)部圖像的位置。 我們將使用transform: translate CSS屬性：

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

現(xiàn)在，讓我們?cè)趖ile組件中將所有內(nèi)容組合在一起：

• 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字段的對(duì)象，代表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.

在下一步中，我們將為圖像添加一些移動(dòng)。

雪碧 (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 。 您可能會(huì)問為什么我們不使用setTimeout或setInterval。 超時(shí)的問題在于回調(diào)將在幀之間的某個(gè)位置觸發(fā)，這可能會(huì)導(dǎo)致笨拙的動(dòng)畫。

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

另外， requestAnimationFrame允許我們同步屏幕上不同對(duì)象的動(dòng)畫。 在游戲中，您將有很多！

Let’s put together a Sprite component:

讓我們把一個(gè)Sprite組件放在一起：

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

在animate功能中，我們應(yīng)該更改幀的state并請(qǐng)求一個(gè)新的動(dòng)畫幀：

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

我們使用framesPerStep屬性來控制每幀的狀態(tài)數(shù)，因此動(dòng)畫不會(huì)太快。

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

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

現(xiàn)在，我們唯一需要做的就是將我們的精靈與槍的圖像結(jié)合起來：

And you should get the following result:

并且您應(yīng)該得到以下結(jié)果：

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

自己學(xué)習(xí)構(gòu)建東西的最好方法。 因此，我鼓勵(lì)您使用以下codeandbox ：

The TypeScript version is available here as well.

這里也提供 TypeScript版本。

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

另外，您可以使用資產(chǎn)文件夾中的文件來實(shí)現(xiàn)不同的動(dòng)畫。

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

您可以在此處找到源代碼。 我使用的是finalbossblues制造的游戲資產(chǎn)。

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上關(guān)注我，以獲取有關(guān)新文章的更多更新。 另外，分享這篇文章以幫助其他人了解它。 分享在乎嗎？

Destroy this clap button if you want more.

如果您想要更多，請(qǐng)破壞此拍手按鈕。

You can clap up to 50 times! ?

您最多可以拍手50次！ ？

Some more resources about the topic:

有關(guān)該主題的更多資源：

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()方法以實(shí)現(xiàn)平滑的動(dòng)畫 requestAnimationFrame()是一種JavaScript方法，可用于創(chuàng)建更平滑，資源占用更少JavaScript動(dòng)畫…… www.javascriptkit.com

Originally published at react.camp.

最初發(fā)表于react.camp 。

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

react開發(fā)模式

總結(jié)

以上是生活随笔為你收集整理的react开发模式_通过开发带有精灵动画的游戏来学习高级React模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。