Tips: When you see this prompt, it means that the current article has been migrated from the original emlog blog system. The publication date of the article is quite old, and the formatting and content may not be complete. Please understand.
Add a Live2D character to your blog
Date: 2017-12-24 Author: Aque Code tinkering Views: 10584 Comments: 43
Recently, I saw this Live2D character on many blogs and found it quite interesting! So I looked up some related tutorials and added it to my own blog.
Introduction #
The model used in this article is unpacked from Potion Maker mobile game, with copyright owned by the official. (That's right, I'm also here to promote this game.)live2d is not an advanced technology; the effects it produces are achieved through basic operations such as translation, rotation, transparency, and surface deformation. The final effect is greatly related to the textures, and each action requires meticulous adjustments by the creator. This is a process that consumes a lot of time and energy, so there are not many high-quality models, and those that are of good quality are generally protected by copyright in games, and cannot be used freely.
Preparations #
The following code is what I openly borrowed from Harem Senior and cooked it up.
First, go to my Github to download the live 2D code that I have reorganized ( which includes the actions of two characters and the initial three sets of textures ), after all, it's better when it's cooked~
After downloading, unzip the code to the root directory of your blog website. (The directory location can be customized.)
Then rename the extracted folder to: live2d. (The name doesn't matter, what's important is that it looks good.)
(The girl is blindly analyzing)
How to Use #
Now let me teach you how to use it, oops, it really is being used
In the header file of your blog program (header.php), include the interface style by inserting the following code within the head tag:
In the footer file of your blog program (footer.php), include the script by inserting the following code before the closing body tag:
The above code has a note when using absolute paths:
For my blog www.52ecy.cn and 52ecy.cn, both can be accessed, but if you use www in the reference, there will be no problem when accessing www.52ecy.cn, but when directly accessing 52ecy.cn, it will cause a cross-domain issue (different subdomains also belong to cross-domain), resulting in the json not being loaded, and then your character will not show up.
You can change it to the following code (the character switch only needs to change to the corresponding folder name):
Insert the Live2D character element in a suitable position on the page, which can be placed at the bottom:
When the mouse hovers over a certain element on the page, if you need the Live2D character to prompt, please modify the message.json file.
Then, refresh your blog page and see the effect!
Be careful not to get the path wrong ~
Using theme functions to get paths is actually very good.
It is recommended to use absolute paths for references, rather than relative paths as in the examples.
Finished Product Effect Appreciation #
Tia
Meow, the evil watermark go away!
You can tease Pio in the lower left corner of this blog (that's right, I think she's cuter)
Conclusion #
For how to do dress-up play, please refer to the original author's ( Cat and Sunflower ) article " Adding a Dynamic Character (Live2D) to Your Blog - About the Model "Please note that the appearances of "Potion Maker" and "Potion Maker" mentioned in this article, as well as all ownership of the text, models, images, action data, etc. contained within the application, belong to the author of "Potion Maker" Sinsiroad, for research and learning purposes only, not for commercial use.
User Comments:
Passerby A 7 months ago (2020-09-03)
Really excellent
6666666 9 months ago (2020-07-24)
I want to use the character from the webmaster, can I package and share it? [#Proud]
Unknown 1 year ago (2020-01-23)
The real return is divided into negative two and negative one
Aque 1 year ago (2020-01-24)
@Unknown: The other party doesn't quite understand your meaning, so they sent you a hat [#aru_136]
ICON 1 year ago (2019-11-23)
What software is that v in the first purple icon? [#aru_21]
@ICON: The model viewer is provided by LIVE2D.
Yao 2 years ago (2019-04-18)
Follow-up question
The IP address left, and then
The character does not display
Why is that?
@Yao: I don't understand.
Yao 2 years ago (2019-04-21)
@Aque: Ah... Hello, this is my blog: http://www.zhangyyao.com/
It's really hard to express in detail.
You can click in to take a look.
Sorry (covering face)
Can we keep in touch for a long time? (I'm afraid I won't get a reply if I keep asking)
@Yao: It's very normal, no need to look, if you want to keep in touch for a long time, you can join the group, find the group number yourself [#wb_doge]
Is the code "Insert the Live2D element in a suitable position on the page" placed in footer.php?
By the way, I request a character dress-up (starry eyes sincerely)
@Yao: Either way is fine, for dress-up you can go to my friend link FGHRSH blog to find the new version.
Su Zhe 2 years ago (2019-02-15)
Is it conflicting with the Robin theme? After adding it, the images of the articles on the website do not display.
@Su Zhe: That might be due to some conflicts in certain places, it's hard to say exactly where.
QQ Account Error 2 years ago (2019-01-06)
Can you give me the skin?
mynamezhf@gmail.com Thanks
wa 2 years ago (2018-11-11)
Hello, based on this, as well as the Guangshu Typecho plugin and the blood plate of imjad.cn,
I integrated a https://github.com/samondlee/typecho_Live2dHistoire1/tree/master/Live2dHistoire
But I found that it can't screenshot or change clothes like yours, nor can it bounce like the blood plate of Cat and Sunflower. Why is that, sob sob sob.
Clearly the animation has loaded.
@wa: The inability to bounce might be due to issues with the action files, and if you can't screenshot or change clothes, it might be an issue with the js files. I'm not very clear on the specifics, but it's much better to use ready-made ones. Haha.
Cherishing What You Lose 2 years ago (2018-11-07)
##This comment is private##
@Cherishing What You Lose: You can search for it on 17 Material Network.
Į 2 years ago (2018-09-01)
Can I add a character to a regular webpage? [#aru_1]
@Į: And my text is showing up, but the animation model is not coming out.
@Į: Theoretically, it should be possible as long as there are no conflicts.
Chen Xi 2 years ago (2018-08-24)
Can this be placed on a confession wall??
@Chen Xi: Theoretically, it can.
Social Cat 2 years ago (2018-07-20)
The code cannot be copied 233 [#aru_113]
Shepherd 2 years ago (2018-07-14)
I can't copy those codes, and I also want your site's dress-up, thank you.
Yi Xiaodu 2 years ago (2018-07-09)
To get those framed codes, I brought out the developer tools, and my computer froze for half an hour [#aru_15]
@Yi Xiaodu: I'm really very sorry, you can come to me for yours.
@Aque: I want it.
Andy Lau 2 years ago (2018-07-19)
@Yi Xiaodu: Just disable breakpoints in Chrome~ [#(Haha)]
@Andy Lau: Don't say it out loud, shh~
Yang Xiaojie Blog 2 years ago (2018-05-10)
This girl is cute.
@Yang Xiaojie Blog: I'm glad you like it.
henry 2 years ago (2018-05-10)
##This comment is private##
[#aru_42] Can other website programs add it? For example, mine.
@henry: Theoretically, it should be possible.
Cold Dream 2 years ago (2018-04-08)
[#aru_18] Can you share the character's skin?~[#aru_91]
Star 2 years ago (2018-03-30)
Requesting skin, thank you [#aru_1]
Requesting skin, thank you [#aru_1]
inpm 3 years ago (2018-03-13)
+1 Requesting skin
inpm.cy@gmail.com
pony 4 years ago (2018-01-28)
= =, I want your site's refresh dress-up method.
@pony: If you don't want to leave a URL or QQ, how do you expect me to give it to you?
′Qian Xuan 4 years ago (2018-02-22)
@Aque: I didn't notice the detail of changing clothes, impressive~