Hi everyone, I'm programmer Fishskin.
If you have a problem with a website or a product, you will usually look for the "Contact Customer Service" position to get human help. Our team's interview brush product - Interview Duck recently encountered such a problem: obviously, there is a contact customer service button in the lower right corner of our website, and we have a feedback button under each interview question, but many users still do not know how to give us feedback.
We used a third-party website statistics tool to analyze and found that the number of clicks on the customer service button for a whole month was only more than 20! That's a lot of clicks!
So, I pulled my development classmates together for a meeting to discuss and hopefully solve the problem.
I said: as a conscientious product, I want all users to know how to find us for feedback! I don't care how it's implemented, it goes live tomorrow!
Developer A had this look on his face:
As a result, a day later, small A really took the computer to show me the effect. When I looked at it, it immediately turned red and warm, just like a freshly boiled crab:
This. Is this ** customer service? We're a legitimate Web site!
On second thought, though, it feels pretty good... now that's a site full of appeal! Should get a lot of students clicking on it (dog's head).
I thought it would take a long time to develop this customer service image, but Little A told me: it's very simple, it'll be done in a while~!
So, I also went to learn about it and it's really simple, so I'm sharing this post with you.
⭐️ like to watch the video students, more recommended to watch the video tutorials Oh:/video/BV1FeUaYDEKr/
Webmaster Tutorial
In fact, the anime watchers we saw earlier were realized using Live2D technology.
Live2D is a technology that converts 2D images into various animation effects. Through techniques such as skeletal animation and physics engines, it is possible to realize 3D-like stereoscopic animation effects, but in reality it is still the deformation and movement of 2D images.
Compared to GIF images, Live2D models can interact with users in real time, which is more appealing to users.
How about it, can't wait to get a whole one for your website too?
Here's a quick 1-minute, hands-on guide on how to add a cute Live2D lookalike to your website. It should still be helpful for increasing page hits and user visit duration.
If you can't learn it in time, remember to click on a favorite, you might need it later.
I. Preparatory work
First, we need to prepare 2 things: a set of Live2D model files, and a JS script to make the website load the model.
1. Model files
Each Live2D model corresponds to a set of files defining model information, physical effects, pose actions, image resources, etc. The structure is very complex:
Moreover, the model file format is divided into two versions: MOC and MOC3. MOC3 models not only have better visual effects, but also support more complex and natural smooth movements, but the corresponding file structure will be more complicated. The children in red in the website we saw at the beginning is a MOC3 model.
Although the model is complex, don't worry, we can find ready-made model files through the Live2D official website and GitHub's open source project:
-
Live2D Official:
-
⭐️ has many models and example sites:/imuncle/live2d
-
Model Collection:/Eikanya/Live2d-model
A friendly reminder that Live2D development is time-consuming and requires a lot of effort.Generally high quality models are copyrighted, so please use them with caution! 。
2. JS Script
With a model file, how do we get it to appear on the website? This requires JS scripts.
We can write JS scripts using WebGL, the dominant graphics rendering technology. However, this technology has some complexity and learning costs, and I don't think even an experienced web developer would want to write their own WebGL code to load a Live2D model.
We can use off-the-shelf libraries to simplify coding, such as the 2D rendering engine, or we can use the official Live2D Web SDK.
However, if you don't have the skills, you probably won't be able to read the confusing official documentation. So, if we're going to be sweet, we've got a lot of out-of-the-box Live2D loading libraries open-sourced on GitHub.
After my comparison, this library with a high star count is the best to use. With it, you don't have to write a single line of code to add a caretaker to your website! Here's how to try it out.
Open Source Repository:/stevenjoezhang/live2d-widget(Models not included)
II. Rapid access to Kanban Maiden
If you're a beginner, just copy the following line of code from the autoloading script and put it in the html page of your website.head maybebody In the middle, it's possible to load the caretaker:
<script src="/gh/stevenjoezhang/live2d-widget@latest/"></script>
Come on, run the page to see the effect, Kanban girl directly out there is not! It also supports dialog, model change, clothes change, and screenshot function:
Oops, suddenly I feel like I've become a front-end guru... so accomplished!
Why is it implemented with just this one line of code?
In fact, we have just loaded the JS script that the project author has provided us with on the remote server, and this script will download the model file from the remote server for us.
What does this mean? If you want to define yourself which models to load, and what the dialog is about, it's not very convenient, because you can't log into someone else's server to change the script.
The author took this into account, but his approach was to have a PHP backend project that dynamically fetches the list of models to be loaded and the conversation information by way of an interface.
I'm just going to add a caretaker to the site, and you want me to build a backend? I'm not going to do that, I'm not going to do that!
Below Fishskin teaches you a simpler way to customize Kanban.
III. Customization
1. Remodeling projects
First, download the above open source project in its entirety locally and open it with an editor.
locate file, which is the entry point for the whole Live2D loading, we can see the model list and dialog information loaded from the remote address by default.
Among them, the initWidget method is very critical, as the name suggests, it serves to initialize the component. Tap into it, you can see the method to load the component (loadWidget), where a new model object is created.
Clicking in again takes you to the model definition file, which by default is a model list configuration loaded from a remote server via a web request.
Then we just need to change this logic to load the model list configurations I wrote locally, and we're good to go!
Yes, come to think of it, some students might just go ahead and blow up this source file, but that's very inelegant!
We can copy that model definition file to get a newLocal Model Definition File To ensure that the functions and most of the code remain unchanged, only part of the code needs to be modified to load the model file and model configuration file under a specific local location.
This code you do not need to pay attention to for the time being, I will share the source code at the end of the article
Then, wouldn't it be enough to modify the method of loading the component to decide whether or not to load the model locally based on the configuration information passed in by the developer?
Once you've done that, you need to repackage the modified files. Since the project is managed by npm, you'll need to install the service first, then install the dependencies within the project, and then do a build to package it, and you'll have a new loaded file ().
2、Effective display
The remodeling is complete, so let's use the remodeled items~
Start by writing a small random website:
Place the model file and model list configuration file in the project root directory:
You can modify the model list configuration file yourselfmodel_list.json (Each element of an array is a model, each element of a 2D array is a different skin):
Finally, modify the configuration of the load file, including changing the live2d path to the current path, modifying the initialization component configuration to be local (using the local model, specifying the path to the model file, and the path to the model list configuration file), and also customizing the tools to be used:
// Change to relative path
const live2d_path = "./";
// ...
// Initialize the component
initWidget({
isLocalModel: true, // Use of local models
waifuPath: live2d_path + "",
modelsPath: live2d_path + "model",
modelListPath: live2d_path + "model/model_list.json",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});
It's done, let's double click the file to run it~
And it failed! No, dude, where are you?
Why is the model not loaded, just look at the F12 console error report:
This is because browsers limit the ability to load resources directly from the local file system for security purposes. So we need to start a local server to run the web page, which is a difficult step. You can either use the server that comes with the development tool and click on the icon to run it correctly, or you can install a serve tool yourself.
Thus, our Live2D kanban is loaded perfectly!
IV. More operations
Next you can also customize the dialog by modifying the configuration file (), by modifying the tool file Customize the actions performed when clicking on the icon next to the model, adjust the position of the model by adding some CSS code, and so on.
Don't forget to rebuild the package after making the changes.
You can also view the corresponding element with F12 and modify the style file to adjust the position, for example:
<style>
#waifu {
right: 40px !important;
left: unset !important;
}
</style>
Above is the share of this issue, I open-sourced the magically altered code to the
But the cost is that the model file is relatively large and may consume a lot of bandwidth and traffic. We are also struggling whether we really want to apply this feature to our website, some suggestions are welcome~