“I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.”

  • ๐Ÿ“ข welcome to like ๐Ÿ‘ collect โญ message ๐Ÿ“ if there is an error please correct!
  • ๐Ÿ“ข This article was originally written by the stupid little Y *๐Ÿ™‰
  • ๐Ÿ“ข The future is long and worth striving for a better life โœจ

๐Ÿ“ข preface

  • Mid-Autumn FestivalComing soon, think of the Mid-Autumn Festival will naturally think of a folktale, that isChang e!
  • Then we borrow this Mid-Autumn festival to write an animation to make a Chang ‘e fly to the moon to express the feelings of this story!
  • The effect of this article may be some unsatisfactory, really the blogger technology is not in place!

Chang e

โค๏ธ Step 1: Open Unity and create a new project

As always, open UnityHub and create a new Unity project

Change a name, select an appropriate path, and click Create


๐Ÿงก Step 2: Create a new scene and add a canvas

This step is also a basic requirement. Create a new scene

Then create a new one in the hierarchy panelThe canvasAnd add oneImageUsed to display pictures


๐Ÿ’› Step 3: Add an Image to the Image component

Then simply rename the Image to moon map to show the moon

Here are three simple steps for thisImagAdd a moon image

Then 1234 again, add an Image, find a picture of Chang ‘e and add it!

Then right-click and add a Text component as the title, renaming the Text: Chang ‘e flying to the Moon

Simply reposition an image and text to look like this:Haha, don’t feel very low~, it doesn’t matter, we continue to look at ~


๐Ÿ’š Step 4: Adjust the camera’s background rendering

Now it’s just like the day. It’s bad

Then we changed the camera background, changing the default sky box to a solid color background

Select the firstThe Main Camera CameraThen in the properties panel select Solid Render and change the color to solid black!

After modification, the effect is as follows:


๐Ÿ’™ Step 5: Add “Run to the moon” animation

This step is the most critical step, we will add a moon – flying animation to chang ‘e

First select the Image with chang ‘e Image in the hierarchy panel, then click Window -> Animation -> Animation

I’ve switched Chinese and English here, so it looks like it might be a little bit of a problem, as long as you find thisAnimationJust click!And when you’re done, there’s a little window that pops up, so let’s click on thisCreate

When you’re done clicking on it, there’s a window that shows you how to save the file, because when you click on Create, you Create an animation, and that’s the animation that you’re going to Create

As long as the path is in the current project, change the name and click Save!After saving, it will look like this, the window changes, and two files will be added under the project

Then we first select the one in the hierarchy panel with the Chang ‘e diagramImageThen click in the windowAdd Property And then select thisRect TransformUnder the Anchored PositionClick the little plus sign, as shown below

The window will then look something like this, with the position information on the left and the starting and ending positions of the animation on the rightWhat we need to do is to move chang ‘e from the starting position in the lower left corner to the end position of the moon through animation

So you can do a super simple “Chang ‘e fly to the moon”!

And then I’m going to show you the Settings that I have here, and maybe the location information is different for everyone

This doesn’t matter, can only set up a good starting and ending position, we can achieve the effect we want!

As shown below, setCoordinates of the starting and ending pointsCan!


๐Ÿ’œ run the program

Here, we can click on the animation of Chang ‘e flying to the moon to cancel Loop Time

thisLoop TimeIs choice:Whether to loop, we only need to play it once, so cancel it

Then this time directly run the program can!

But that’s not standard enough

The correct animation use, can be implemented through the code, we are just here to complete the “Chang ‘e moon” this simple small animation, so it does not involve the code!

There’s a lot more you can do with Unity’s animation system, but if you’re interested, check out my article on animation systems

Nearly ten thousand words of tutorial in Unity animation system foundation comprehensive analysis + actual combat exercise


๐Ÿ’ฌ summary

This article uses Unity animation system to do a super simple “Chang ‘e flying to the moon”, the effect is above

Feel very Low can not help, the blogger tried his best hahaha ~

If you are interested in Unity’s animation system, you can study it yourself. That’s the end of this article