banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

Add a Live2D mascot to your blog.

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

image
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 #

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.

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.)

Preparations #

As the saying goes: "Teaching a man to fish is better than giving him a fish," but since this fish is quite difficult to catch, let's just sit down and enjoy the fish!
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)
image image

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 #

Pio
image

Tia
image
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. image

User Comments:

image Passerby A 7 months ago (2020-09-03)
Really excellent

image 6666666 9 months ago (2020-07-24)
I want to use the character from the webmaster, can I package and share it? [#Proud]

image Unknown 1 year ago (2020-01-23)
The real return is divided into negative two and negative one

image 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]

image ICON 1 year ago (2019-11-23)
What software is that v in the first purple icon? [#aru_21]

image Aque 1 year ago (2019-11-23)
@ICON: The model viewer is provided by LIVE2D.

image Yao 2 years ago (2019-04-18)
Follow-up question
The IP address left, and then
The character does not display
Why is that?

image Aque 2 years ago (2019-04-19)
@Yao: I don't understand.

image 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)

image Aque 2 years ago (2019-04-22)
@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]

image Yao 2 years ago (2019-04-18)
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)

image Aque 2 years ago (2019-04-19)
@Yao: Either way is fine, for dress-up you can go to my friend link FGHRSH blog to find the new version.

image 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.

image Aque 2 years ago (2019-02-16)
@Su Zhe: That might be due to some conflicts in certain places, it's hard to say exactly where.

image QQ Account Error 2 years ago (2019-01-06)
Can you give me the skin?
mynamezhf@gmail.com Thanks

image 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.

image Aque 2 years ago (2018-11-12)
@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.

image Cherishing What You Lose 2 years ago (2018-11-07)
##This comment is private##

image Aque 2 years ago (2018-11-08)
@Cherishing What You Lose: You can search for it on 17 Material Network.

image Į 2 years ago (2018-09-01)
Can I add a character to a regular webpage? [#aru_1]

image Į 2 years ago (2018-09-01)
@Į: And my text is showing up, but the animation model is not coming out.

image Aque 2 years ago (2018-09-01)
@Į: Theoretically, it should be possible as long as there are no conflicts.

image Chen Xi 2 years ago (2018-08-24)
Can this be placed on a confession wall??

image Aque 2 years ago (2018-08-24)
@Chen Xi: Theoretically, it can.

image Social Cat 2 years ago (2018-07-20)
The code cannot be copied 233 [#aru_113]

image Shepherd 2 years ago (2018-07-14)
I can't copy those codes, and I also want your site's dress-up, thank you.

image 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]

image Aque 2 years ago (2018-07-09)
@Yi Xiaodu: I'm really very sorry, you can come to me for yours.

image Shepherd 2 years ago (2018-07-14)
@Aque: I want it.

image Andy Lau 2 years ago (2018-07-19)
@Yi Xiaodu: Just disable breakpoints in Chrome~ [#(Haha)]

image Aque 2 years ago (2018-07-19)
@Andy Lau: Don't say it out loud, shh~

image Yang Xiaojie Blog 2 years ago (2018-05-10)
This girl is cute.

image Aque 2 years ago (2018-05-11)
@Yang Xiaojie Blog: I'm glad you like it.

image henry 2 years ago (2018-05-10)
##This comment is private##

image henry 2 years ago (2018-05-10)
[#aru_42] Can other website programs add it? For example, mine.

image Aque 2 years ago (2018-05-11)
@henry: Theoretically, it should be possible.

image Cold Dream 2 years ago (2018-04-08)
[#aru_18] Can you share the character's skin?~[#aru_91]

image Star 2 years ago (2018-03-30)
Requesting skin, thank you [#aru_1]

image Star 3 years ago (2018-03-30)
Requesting skin, thank you [#aru_1]

image inpm 3 years ago (2018-03-13)
+1 Requesting skin
inpm.cy@gmail.com

image pony 4 years ago (2018-01-28)
= =, I want your site's refresh dress-up method.

image Aque 4 years ago (2018-01-31)
@pony: If you don't want to leave a URL or QQ, how do you expect me to give it to you?

image ′Qian Xuan 4 years ago (2018-02-22)
@Aque: I didn't notice the detail of changing clothes, impressive~

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.