added expressions and motions

live2d/dist/waifu-tips.js

@@ -44748,7 +44748,9 @@
       const element = document.getElementById(id);
       const app = new Application({
         view: element,
+  	  autoStart: true,
         transparent: true,
+  	  resizeTo: window
       });
       const model = await Live2DModel.from(jsonpath);
       app.stage.addChild(model);
@@ -44764,6 +44766,32 @@
       // Align bottom and center horizontally
       model.x = (parentWidth - model.width) / 2;
       model.y =  parentHeight - model.height;
+
+  	// read json file to find motion groups
+  	let modelJson = await readJSON(`${jsonpath}`);
+  	// if model has motion groups
+  	if (modelJson.motions) {
+  		// change motion after 5-10s
+  		setInterval(() => {
+  			const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
+  			model.motion(motionGroup);
+  		}, Math.floor(Math.random() * 5000) + 5000);
+  	}
+
+  	// change expression after click on model
+  	model.on("pointerdown", () => {
+  		model.expression();
+  	});
+
+  	// function to read json file
+  	function readJSON(path) {
+  		return new Promise((resolve, reject) => {
+  			fetch(path)
+  				.then(response => response.json())
+  				.then(data => resolve(data))
+  				.catch(error => reject(error));
+  		});
+  	}
   }
   }
 

live2d/test1.html

@@ -89,3 +89,4 @@
   }
   </script>
     </script>
+

live2d/waifu-tips.js

@@ -228,7 +228,9 @@ function loadWidget() {
     const element = document.getElementById(id);
     const app = new PIXI.Application({
       view: element,
+	  autoStart: true,
       transparent: true,
+	  resizeTo: window
     });
     const model = await Live2DModel.from(jsonpath);
     app.stage.addChild(model);
@@ -244,6 +246,32 @@ function loadWidget() {
     // Align bottom and center horizontally
     model.x = (parentWidth - model.width) / 2;
     model.y =  parentHeight - model.height;
+
+	// read json file to find motion groups
+	let modelJson = await readJSON(`${jsonpath}`);
+	// if model has motion groups
+	if (modelJson.motions) {
+		// change motion after 5-10s
+		setInterval(() => {
+			const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
+			model.motion(motionGroup);
+		}, Math.floor(Math.random() * 5000) + 5000);
+	}
+
+	// change expression after click on model
+	model.on("pointerdown", () => {
+		model.expression();
+	});
+
+	// function to read json file
+	function readJSON(path) {
+		return new Promise((resolve, reject) => {
+			fetch(path)
+				.then(response => response.json())
+				.then(data => resolve(data))
+				.catch(error => reject(error));
+		});
+	}
 }
 }
 

live2d/waifu.css

@@ -101,6 +101,7 @@
 	height: 280px;
 	position: relative;
 	width: 300px;
+	/* z-index: -1; */
 }
 
 #waifu #live2d:active {