unity 灯笼_如何创建将自己拼成文字的漂亮灯笼

unity 灯笼

In this tutorial, we will go through how to create a group of festival lanterns that arrange themselves into the words you choose. An online demo can be found here.

在本教程中，我们将介绍如何创建一组节日灯笼，这些灯笼将自己布置成您选择的单词。可以在此处找到在线演示。

This tutorial is a little bit more advanced than my previous tutorials. I am going to assume you can figure out a lot of the rudimentary things on your own. I have also made some tutorials for total beginners, which I have attached in the end as links.

本教程比我以前的教程更高级。我假设您可以自己解决许多基本问题。我还为初学者编写了一些教程，最后将它们作为链接附在其中。

介绍 (Introduction)

Since this tutorial is a bit longer, we will go over what you are about to read. First, we will go through how to design a breathing lantern with CSS. After that, we will learn how to dynamically create lanterns through JavaScript. Then we will learn how to create the input box and how to decipher the input text. After that, we will go over some algorithms that arrange the lanterns appropriately. Finally, we will learn about how to animate the lanterns.

由于本教程要长一些，因此我们将介绍您将要阅读的内容。首先，我们将介绍如何使用CSS设计呼吸灯。之后，我们将学习如何通过JavaScript动态创建灯笼。然后，我们将学习如何创建输入框以及如何解密输入文本。在那之后，我们将介绍一些适当安排灯笼的算法。最后，我们将学习如何为灯笼设置动画。

Enough said, let’s get started! Before you start you will need a website. If you do not wish to use one of your own, you can copy the code below and save it as an .html file.

够了，让我们开始吧！在开始之前，您将需要一个网站。如果您不想使用自己的代码，可以复制以下代码并将其另存为。 html文件。

<!--Copyright to Shen Huang, you can reach me out at [email protected]>
<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
 <head>
  <title>LANTERN DEMO</title>
  <style>
   body {
    background-color : #190f00;
   }
  </style>
 </head>
 <body>
</body>
 <script>
</script>
</html>

1.设计灯笼 (1. Designing the Lanterns)

We will be using CSS to define the shapes and animations for the lanterns, and then construct them inside the HTML body to test our results.

我们将使用CSS定义灯笼的形状和动画，然后在HTML正文中构造它们以测试结果。

The lantern consists of 3 parts:

灯笼由三部分组成：

The Outer Light
外光
The Lantern Body
灯笼体
The Inner Light
内在的光

The Outer Light is placed behind the Lantern Body, and the Inner Light is placed in front of the Lantern Body. These 3 elements are placed within an invisible Lantern object, which is responsible for the shaking left and right animations.

外部灯放在灯笼体的后面， 内部灯在灯笼体的前面。这3个元素放置在一个不可见的Lantern对象中，该对象负责左右晃动动画。

1.1灯笼 (1.1 Lantern)

The Lantern object is essentially an invisible object with the same size as the Lantern Body. It has a pivot at the top center, defining the center of rotation of the pendulum movement. The following CSS code defines the Lantern.

Lantern对象本质上是一个与Lantern Body大小相同的不可见对象。它在顶部中心有一个枢轴，定义了摆运动的旋转中心。以下CSS代码定义了Lantern 。

@keyframes shake {
 0% {
  transform : rotate(10deg) scale(1);
 }
 50% {
  transform : rotate(-10deg) scale(1);
 }
 100% {
  transform : rotate(10deg) scale(1);
 }
}
.lantern {
 z-index : 999;
 position : absolute;
 height : 70px;
 width : 50px;
 transform-origin : top center;
 animation : shake 4s ease-in-out infinite;
}

1.2外灯 (1.2 Outer Light)

The Outer Light is actually a radial gradient from a bright color to transparency. The animations scale its size to make it breathe. The Outer Light can be defined by the following code:

外光实际上是从明亮的颜色到透明的径向渐变。动画会缩放其大小以使其呼吸。可以通过以下代码定义外部光 ：

@keyframes outerlightbreathe {
 0% {
  height : 100px;
  width : 100px;
  top : -10px;
  left : -20px;
 }
 50% {
  height : 200px;
  width : 200px;
  top : -60px;
  left : -70px;
 }
 100% {
  height : 100px;
  width : 100px;
  top : -10px;
  left : -20px;
 }
}
.outerLight {
 z-index : -1;
 position : absolute;
 background-image:
  radial-gradient(rgba(117, 107, 60, 1.0), rgba(117, 107, 60, 0.0), rgba(117, 107, 60, 0.0));
 opacity : 0.5;
 border-radius : 50%;
 animation : outerlightbreathe 3s ease-in-out infinite;
}

1.3灯笼身 (1.3 Lantern Body)

The Lantern Body is a rectangle with a rounded border, with heavier rounding on the bottom. The Lantern Body can be defined by the following code:

灯笼主体是一个带有圆角边框的矩形，底部的圆角较大。 灯笼体可以通过以下代码定义：

.lanternBody {
 position : absolute;
 background-color : #756b3c;
 height : 70px;
 width : 50px;
 border-radius : 15px 15px 25px 25px;
}

1.4内灯 (1.4 Inner Light)

The Inner Light, similar to the Outer Light, is also a radial gradient from a bright color to transparency, but with a larger bright portion. The animation also chops off the light when it reaches a certain size to make it look like the light is contained by the Lantern Body. The code defining the Inner Light can be found below:

与外部光类似， 内部光也是从明亮的颜色到透明的放射状渐变，但是明亮部分更大。当动画达到一定大小时，动画也会将其截断，以使其看起来像灯笼体中包含的灯光。定义内部灯的代码可以在下面找到：

@keyframes innerlightbreathe {
 0% {
  height : 30px;
  width : 30px;
  opacity : 0.1;
  top : 35px;
  left : 10px;
 }
 20% {
  clip-path : inset(0px 0px 0px 0px);
 }
 50% {
  height : 60px;
  width : 60px;
  opacity : 0.5;
  top : 5px;
  left : -5px;
  clip-path : inset(0px 5px 0px 5px);
 }
 80% {
  clip-path : inset(0px 0px 0px 0px);
 }
 100% {
  height : 30px;
  width : 30px;
  opacity : 0.1;
  top : 35px;
  left : 10px;
 }
}
.innerLight {
 position : absolute;
 background-image:
  radial-gradient(rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 0.0));
 border-radius : 50%;
 animation : innerlightbreathe 3s ease-in-out infinite;
}

1.5灯笼构造 (1.5 Lantern Construction)

To test our result, we can use the following CSS and HTML code to build a lantern at the center of our HTML page.

为了测试结果，我们可以使用以下CSS和HTML代码在HTML页面的中心构建一个灯笼。

CSS:

CSS：

center {
 position : absolute;
 top : 50%;
 left : 50%;
}

HTML:

HTML：

<center>
 <d