Some time ago, I saw this Live2D poster girl on many people’s blogs, and I was very interested! I checked some related tutorials and added them to my blog.
Preface
Live2d is not an advanced technology. The effects it produces are all achieved by basic operations such as translation, rotation, transparency, and surface deformation. The final effect has a lot to do with the texture, and every action requires fine adjustments by the producer. This is a process that requires a lot of time and energy, so there are not many good-quality models. The good ones are usually in games, and the copyright is protected and cannot be used casually.
The model used in this article is unpacked from the Potion Maker mobile game, and the copyright belongs to the official game. (Yes, I also came to this Amway game)
Preparation
Although the saying goes: “It is better to teach a man to fish than to teach him to fish.” However, since this fish is more difficult to catch, we might as well just move a small bench and sit on it and enjoy the fish!
The following code is made by cooking the fish I stole from Harem Senior.
First go to my Github to download the live 2D code that I have reorganized (including the actions of two people and the initial three sets of textures). After all, it is still better cooked~
After downloading, unzip the code to the root directory of your blog website. (Directory location can be customized)
Then rename the extracted folder to: live2d. (It doesn’t matter what you call it, good-looking is the most important thing)
(Girl Blind Analysis)
How to eat
Then I’ll teach you how to eat it. Phew, it’s really delicious.
Introduce the interface style into the header file of your blog program (header.php) and insert the following code in the head tag:
Introduce the script into the footer file (footer.php) of your blog program and insert the following code before the end of the body tag:
There is a problem to note when using absolute paths in the above code:
For example, my blogs www.52ecy.cn and 52ecy.cn can be accessed, but if you use www when referencing, there will be no problem when accessing www.52ecy.cn. However, when accessing 52ecy.cn directly, the json will not be loaded due to cross-domain issues (different subdomain names are also cross-domain), and then your billboard girl will not be able to come out.
You can change it to the following code (to switch characters, you only need to change it to the corresponding folder name)
Insert the Live2D billboard element at the appropriate page position, which can be placed at the bottom:
When the mouse is placed on an element on the page, if you want the Live2D poster to prompt you, please modify the message.json file.
{ “mouseover”: [ { “selector”: “.container a[href^=‘http’]”, //Change here to the tag name of your page element “text”: [“Want to see {text}?”] //Change here to the text you need to prompt }, { “selector”: “.navto-search”, “text”: [“What are you looking for? Do you need help?”] } ], “click”: [ //This is the touch event prompt of the Live2D billboard girl { “selector”: “#landlord #live2d”, “text”: [“Don’t touch me! Take your hand away~~”, “I’m… really shameless!”, “If you touch me again, I will call the police! ⌇●﹏●⌇”, “110, there is a pervert here who keeps touching me (ó﹏ò｡)”] } ] }
Then, refresh your blog page and see the effect!
Be careful not to make the wrong path~
It’s actually good to use theme functions to get the path.
It is recommended to use absolute paths for references instead of relative paths as in the example.
Appreciation of finished product effect
Pio
Tia
Damn it, you evil watermark, go away!
For specific effects, you can tease Pio in the lower left corner of this blog (yes, I think she is cuter)
Conclusion
Regarding how to perform dress-up play, please refer to this article by the original author (Cat and Sunflower) “Add an active poster girl (Live2D) to the blog-Two or three things about the model”
Please note that the words “Potion Maker” and “Potion Maker” appearing in this article and the text, models, pictures, action data, etc. included in the application belong to Sinsiroad, the author of “Potion Maker”, and are for research and study only and may not be used for commercial purposes 