How to mix live2d animations and Unity particle effects?

cj20038413

I'm Cheng-J, a project manager of a mobile game studio from west china.

we have made a demo with live2d and unity, and we are now trying to add
some unity 3d Particle effect in the live2d animation.

For example:

when the role in the live2d animation opened her eyes, it shows our unity 3d Particle effect
such as some star effect;

And when the role closed her eyes, it will remove the Particle effects from the role's eyes smoothly.


we have no idea of how to do it by using live2d and unity technology, so we turn to you for help.

naotaro

Is it something like the following image ?
Although particle generation timing is reversed.



I tried to make in the following environments .

• Unity 4.6.5f1
  
• Live2D Unity SDK 2.0.08_1　→　sample/Simple [Live2D Unity Project]
  
• ParticleSystem　→　[Assets]-[Import Package]-[Particles] - Sparkle Rising(prefab)
  

As the source code below.
[SimpleModel.cs]

using UnityEngine;
using System;
using System.Collections;
using live2d;

[ExecuteInEditMode]
public class SimpleModel : MonoBehaviour
{
public TextAsset mocFile ;
public Texture2D[] textureFiles ;

private Live2DModelUnity live2DModel;
private Matrix4x4 live2DCanvasPos;

[Range(0.0f, 1.0f)]
public float eye_param; // EyeParam Operation
public GameObject particle; // particleSystem prefab

private Boolean particleflg = false;
private GameObject obj;

void Start ()
{
Live2D.init();

live2DModel = Live2DModelUnity.loadModel(mocFile.bytes);

// Live2D Render Mode Change
live2DModel.setRenderMode(Live2D.L2D_RENDER_DRAW_MESH);

for (int i = 0; i < textureFiles.Length; i++)
{
live2DModel.setTexture(i, textureFiles[i]);
}

float modelWidth = live2DModel.getCanvasWidth();
live2DCanvasPos = Matrix4x4.Ortho(0, modelWidth, modelWidth, 0, -50.0f, 50.0f);
}


void Update()
{
if (live2DModel == null) return;
live2DModel.setMatrix(transform.localToWorldMatrix * live2DCanvasPos);

if (!Application.isPlaying)
{
live2DModel.update();
live2DModel.draw();
return;
}

double t = (UtSystem.getUserTimeMSec()/1000.0) * 2 * Math.PI ;
// Open Eye Or Close Eye
live2DModel.setParamFloat("PARAM_EYE_L_OPEN", eye_param);
live2DModel.setParamFloat("PARAM_EYE_R_OPEN", eye_param);

Debug.Log(live2DModel.getParamFloat("PARAM_EYE_R_OPEN"));
if (eye_param == 0.0f)
{
if (particleflg == false)
{
// particle Add
obj = (GameObject)Instantiate(particle);
particleflg = true;
}
}
else
{
if (obj != null)
{
// particle Del
Destroy(obj);
particleflg = false;
}
}

live2DModel.update();
live2DModel.draw();
}
}

If you're using a motion file (.mtn), you can get in the eyes of the opening and closing parameter values ​​in the following code.

Debug.Log(live2DModel.getParamFloat("PARAM_EYE_R_OPEN"));

cj20038413

Hi, @naotaro, thanks for your response, thanks very much .

But, when I downloaded the gif image you upload( only 56kb ), I just see a static gif and it's not a gif animation, so I've no idea of what you want to show to me. I'll be very happy if you would upload your gif animation again.

The problem we met is How To Adding Particle effect into live2d animation's different image layers and it's not simply putting Particle effect file into live2d.

Actually what we want to is adding the Particle effect between the live2d eyes' image layer, and the live2d eyelids' image layer, but we do not know how to do that.

could you help us to solve this question?

naotaro

It was retaken of GIF animation .

・GIF animation

I'm sorry , detailed description had been lacked.

Previous code is an example that displays the particle in front of Live2D model.

It might be difficult to display the particles between the eyes and eyelids of layer .

One way , we will replicate the GameObject of Live2D model .
The replicated Live2D model hides the parts other than the eyelids .


I think that it can be put a particle between the eye and eyelid if this method .

[Live2D GameObject]
　　　│
[Paticle]
　　　│
[Live2D GameObject(duplicated)]


The best way is to draw the eye effect at the time of Live2D modeling rather than Unity development.

cj20038413

ok, thanks @naotaro again.

we choose to use particle effect instead of drawing effect directly in live2d because we desired the best performance of our animation, and that's why we choose live2d too.

we want to add an even sharper twist in our demo application to make the performance looks much more perfect such as beautiful ear-rings flickering in girl's hair with some impressive effect, some teardrops or hearts in girl's eyes which will disappear follow the eyelids' closing, and some hair or the girl's bang flutters along the wind with some special lights or other effect around it.

You've already show us a method and we've tried. It's perhaps a bit difficult and complicated for us now, and this method will take lot of our time to replicated and adjusted the live2d model that is not accepted by us.

It seems that we had to choose draw some effect in live2d images and model it, and then add some particle effect above or below live2d layer.

anyway, thanks very much @naotaro.

cj20038413

by the way, @naotaro, in your first reply, you show me like this code below:

float[] points = live2DModel.getTransformedPoints(drawIndex);

I can get the points from the getTransformedPoints(), but how to transform the points into screen coordinate system?

naotaro

I didn't written the code of "getTransformedPoints".

I don't know how to access the coordinate system.