This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!! Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

👉 about to learn

Learn about FairyGUI in Unity from start to finish

👉 background

Unity 2019 x series

FairyGUI 2021.2 series

👉 Practice

element

Everything in the stage (central operation area) is the symbol, and the right operation area is the property panel Settings for the symbol

Basic components: pictures, graphics, animations, text, loaders, components

Combination components: label, button, drop – down box, scroll bar, slider bar, progress bar

Special elements: lists, trees

The content that can be modified in different property panels is basically the same, basically around changing the name, position, size, zoom, axis, mask, penetration, text modification, image, property control (zoom and move and other excessive dynamic effects).

The picture

One of the most common implementations of visual effects is the picture, which is the foundation of FairyGUI and is designed to be as simple and efficient as possible. Supported formats PNG, JPG, TGA, SVG.

Here we emphasize the zooming and tiling of the grid, the grid drawing will follow the following rules:

  1. Keep the four corners intact
  2. Stretch 4 sides in one direction (that is, the edge between 4 corners, such as the top, is only stretched horizontally)
  3. Bidirectional stretching of the middle part (that is, the middle part of the nine grid, horizontal and vertical stretching at the same time, PS: stretching ratio may not be the same)

This Android.9 image is similar

If you want to use tiling for zooming, with the exception of Flash and Haxe, try to avoid tiling smaller images into larger areas, as this can create a lot of mesh and even overflow errors.

Images also support fill effects, such as clockwise, 90 degrees, etc. Change the fill ratio column to achieve skill CD cooling effect.

Resource adapter

Android has layout adaptation, which also allows you to cut mdPI, XhdPI, xxhdPI, etc. FairyGUI also supports it, you just need to ask the artist to cut out the image, and the same image with different resolution filename suffix @2x, @3x, @4x, you only need to put resources. Check @2x, @3x, @4x options in the release dialog box, the subsequent processing mechanism is automatically unconscious, we do not need to care.

​

animation

The editor supports creating, editing, and using sequence frame animations. There are three ways to create a sequence frame animation:

  1. Create the animation using an animation editing tool such as Adobe Animate CC/Flash, export the description file with the plist or EAS extension and the associated texture (which should be placed in the same directory), and drag the description file (only the description file, not the texture) into the editor to generate the animation material.
  2. Create a new blank animation by clicking on the menu “Resources” -> “New Animation” or clicking on the main toolbar button. Then click “Import Picture sequence” in the animation editing interface to import multiple pictures.
  3. Drag a GIF file directly into the editor and the GIF will be automatically converted to a sequence of frame animations.

Regardless of how an animation is created, the animation material is stored as a single file (with the extension JTA) in the editor. That is, whether an animation is created from an image file in the library or imported from outside, there is no longer a dependency on a single image. For example, if you create an animation by dragging images from the resource library into the animation editor, those images have nothing to do with the animation after they are created. If you want to set the texture set for the animation, setting the animation in the animation editor will not work for those images.

graphics

FairyGUI supports the generation of simple shapes such as rectangles, circles, regular polygons, and polygons (which can be edited at will), as well as a null (blank), which does not consume any display resources and is generally used as a placeholder, but in one respect this blank type is different from full transparency. Transparent graphics block click events, while blank graphic click events penetrate.

Emphasis: do not underestimate this graphic component, her role is really not small, small empty play is fun, can be said to play the limit.

It’s used to block events, it’s used to do diversification masks it’s all little operations, pseudo-correlation, pseudo-kinetic effects, all kinds of pseudo-mediators.

I will practice this in the following case tutorial. Remember to give it a triple link.

I just said that polygons are editable, so how to edit them?

​

Common operations are as follows:

  1. Drag dot to adjust vertex position;
  2. Left-click on a dot to change the point’s coordinate value in the inspector;
  3. Right-click the stage and choose “Add Vertices” from the right-click menu.
  4. Right-click on a dot and choose “Delete Vertex” from the right-click menu.
  5. Check “Lock shape” in the inspector and change the position of one vertex through method 1 or 2. The other vertices will change position at the same time, which is equivalent to moving all vertices as a whole.

placeholder

It says reserving a seat is the same as waiting in line to buy a ticket or get a meal. If you have something to do, find someone to hold the seat for you. When you come back, you can change with them. Blank shape is this function, you can be in Unity with code to the native objects in the placeholder, blankObject. SetNativeObject (UnitySprite); It’s very silky and goes in.

loader

Load, load, load load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load, load.

​

Have what attributes at a glance on the right side, you can casually try, generally check the automatic size on the line. The point is how do we assign dynamically: with GLoader

GLoader can load images, animations, and components. If it is a resource in the UI package, it can be loaded with an address in the format “UI :// package name/image name”. But in a real project, we might also need to load and display images that are not in the UI package, which we call “external.” The default GLoader has limited ability to load external resources, which are:

  1. External resources loaded using flash.display.Loader AS3.
  2. Starling uses flash.display.Loader to load bitmap resources. Convert to Texture after loading.
  3. Egret External bitmap resource loaded with egret.res. getResAsync.
  4. Layabox External resources loaded with laya.loader.load.
  5. Unity uses resources.load to Load external mapping Resources.
  6. Refer to the loadExternal method in GLoader for other SDKS

Such as: / / Unity, this load is a path for the Assets/Resources/demo/aimage a map

GLoader. Url = “demo/aimage”;

If these default external loading mechanisms do not meet your needs, for example, if you want to fetch resources from assetBundles, or if you need to implement caching (which is necessary, but is recommended if you need to re-load), or if you need to control the lifetime of the material (which is also necessary), Since GLoader does not destroy externally loaded resources), you need to extend GLoader.

You will need to inherit GLoader to write your own Loader class, and then register the Loader class. After registration, all loaders in the game will be generated by instantiation of the class you wrote.

Such as registration: UIObjectFactory. SetLoaderExtension (typeof (MyGLoader));

Video/model

FairyGUI is a UI-focused solution with no support for videos, but she does support presentation. Also use the GLoader. With Unity alone we always use the Render Texture on the UI we want the model to display, and it’s the same with our video here. Use RawImage and Render Texture to display videos and models. The detailed operation steps will be explained in a separate article in the series. Stay tuned.

Today the small empty has learned this, we will see you next time!!

👉 other

📢 author: Xiaokong and Xiaoshi nakoko 📢 Reprint: be sure to indicate the source: Zhimen’s personal homepage (juejin. Cn). 📢 welcome to like 👍 collect 🌟 message 📝