Article directory
Let’s look at the final effect first
It looks okay, but in fact there are still many problems that have not been solved, because it is completely rendered by js. In fact, the live2d canvas content is completely rendered by ts before packaging, so whether it is adjusting the position or adjusting the style, it is relatively difficult. Trouble, the mouse event is also recognized inside the canvas and cannot fit the entire screen, but these can still be adjusted in theory, but for me now, it should be more difficult (meaning that it will not be solved in a while)
About downloading and using the official package
Adjustment and use in vue3
Basic usage
Here I have assumed that you have packaged bundle.js in the previous official package. If you don’t understand, go to "About downloading and using the official package"
- First introduce the necessary live2d resources into the html homepage
<!--live2D必备资源-->
<script src="https://unpkg.com/[email protected]/minified.js"></script>
- Directly copy the official package to the project root directory. I have completely deleted the Sample folder here, but I have moved the internal resources folder and related js to the public folder (because the ts under src have been packaged, so, Here we can clear them all) to facilitate file management and reading. Considering the resource reading problem of Resource files before ts packaging, I recommend placing it in the public folder. The test is successful first, and then debugging can be done later.
- As you can see, here I created a new file live2d.vue as a vue component to facilitate control display
<script setup>
import '/public/js/bundle.js';
import {
onMounted} from "vue";
onMounted(() => {
const script = document.createElement('script');
script.src = '/public/js/live2dcubismcore.js';
document.body.appendChild(script);
})
</script>
- Note that before this, we need to put the js required by live2d and the js of our packaged ts into the public folder to facilitate resource reading. Therefore, regarding the file import of the live2d.vue file, you must check your own resources. path
- Just use the component directly. I
hope you have succeeded here. If not, you can use my html page below to debug it first.
About style adjustment
The style adjustment of bundle.js before packaging
means that every time we adjust the style, we have to start the official package from another project, then modify the ts, and then package bundle.js, and then move and overwrite the bundle.js in our project. , of course, this is just a solution, it is relatively clean to manage.
Debugging Html home page in vue (alternative debugging solution)
If the above component debugging encounters problems, then we first render live2d directly through js in the index, first look at the effect, and then debug step by step.
Just introduce 3 js outside the app, and the path location is based on your own resource path. Well, I suggest you follow me and walk through it first.
