Take 360 Photo and Upload to Facebook with Unity

It’s actually not new thing, but since many people ask me how to do it, then yeah I decided to make some writing about this.

What you need :

• Unity 5.1.2 or higher
• 360 Panorama Capture
• exiftool (Windows Executeable)

So here’s how you do it

1. Download the 360 Panorama Capture asset and import it to Unity
2. 
3. Select your main camera or camera to be rendered, and put Capture Panorama. Leave the settings default.
4. REMEMBER to set the IMAGE FORMAT to JPEG. If you use PNG, you’ll have to convert that again to JPG.
5. Press play if you see it’s good enough.
6. In play mode, press [P] to capture the panorama, the screen would fade to black, don’t do anything while screen is black.
7. Then you’d hear a sound effect and screen fade off. That’s mean the rendering is done.
8. 
9. Now go to your root folder, folder where Unity put stuff like Assets, Library and stuff.
10. Now bring those file to where you put the exiftool.exe
11. 
12. You might need to rename your exiftool to just exiftool.exe
13. Then press Shift + Right Click on the explorer and choose Open command window here.
14. 
15. Copy this code to command window
16. exiftool -ProjectionType=”equirectangular” photo.jpg
17. That photo.jpg is your 360 photo file name.
18. Then press [Enter]
19. And yeah ! You will get the JPG once it done, now it’s ready to upload to Facebook as 360 photo !

Also, I have uploaded few assets on my Asset Store, be sure to check it out.

[Unity] Realtime Lipsync

Back on my manual lipsync using Tagarela. This one is faster to do and also easier, but of course, you’ll get only Anime lipsync (Anime lipsync only have 1 open mouth, there’s no O, U, I or any other mouth shape than A).

The method I’m using is just get Audio Source frequency. So basically it’s like music visualisation but for mouth.

What you need

• Head mesh with 1 mouth blendshape
• Voice
• Audio Source

Here’s the script you should attach to head mesh.

using UnityEngine;
using System.Collections;

public class RealtimeLipsync : MonoBehaviour {

//LIPSYNC CORE
 [Header("Lipsync")]
 public AudioSource audioSource;
 public int mouthBlendShape;
 private float[] _samples = new float[64];
 private float clampedLipsync = 0f;

//PRIVATES
 private SkinnedMeshRenderer blendMesh;

void Awake(){
 blendMesh = GetComponent<SkinnedMeshRenderer>();
 }

void LateUpdate(){
 if(audioSource) DoLipsync();
 }

void DoLipsync(){
 if(audioSource.isPlaying){
 audioSource.GetSpectrumData(_samples,0,FFTWindow.BlackmanHarris);

clampedLipsync = Mathf.Clamp(_samples[2]*3000,0,100);

blendMesh.SetBlendShapeWeight(mouthBlendShape,clampedLipsync);
 }
 }
}

And here’s how to do it

1. Attach this script to your head mesh.
2. Also don’t forget to add audio source and assign audio source in this script. You can put Audio Source in whereever you want, but remember to assign audio source variable on this script.
3. To play sound, use like audioSource.clip = <your clip name>; then audioSource.Play();
4. 
5. Here’s my example to use this. I put it on my player script. It’ll automatically works whenever you have audioSrc.clip = clipName; audioSrc.Play();
6. That’s it, your mouth will move whenever the audio src playing sounds.

 

[Unity UI 4.6] Parallax style menu

So yesterday I was trying to make parallax styled menu with Unity 4.6 UI, although it’s very simple to do.

1. 
2. Check your canvas setting, the render mode should be Screen Space Camera.
3.  
4. After that, add empty game object like Content. Content is like a group of everything that will be moved by script
5. 
6. Add this script on Canvas and set Canvas variable as your Content Rect transform.
7. also you need to adjust minMaxAxis, it’s an array, 0 usually -15, and 1 usually 15

Here’s the script (C#)

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class ParallaxMenu : MonoBehaviour {

 public RectTransform canvas;
 public float smoothTime = 0.3f;
 public float minMaxXAxis = new float[2]; //0 min, 1 max
 public float minMaxYAxis = new float[2]; //0 min, 1 max
 public float mouseSensitivity = 50.0f;
 private float xVelocity = 0.0f;
 private float yVelocity = 0.0f;
 private float x;
 private float y;
 private float xSmooth;
 private float ySmooth;

 void Awake(){
 Cursor.lockState = CursorLockMode.None;
 Cursor.visible = true;
 }

 void Update(){
 x -= Input.GetAxis("Mouse X") * mouseSensitivity * 0.02f;
 y -= Input.GetAxis("Mouse Y") * mouseSensitivity * .02f;

 if(y > minMaxYAxis[1]) y = minMaxYAxis[1];
 if(y < minMaxYAxis[0]) y = minMaxYAxis[0];
 if(x > minMaxXAxis[1]) x = minMaxXAxis[1];
 if(x < minMaxXAxis[0]) x = minMaxXAxis[0];

 xSmooth = Mathf.SmoothDamp(xSmooth, x, ref xVelocity, smoothTime);
 ySmooth = Mathf.SmoothDamp(ySmooth,y, ref yVelocity, smoothTime);

 Quaternion parallax = new Quaternion();
 parallax = Quaternion.Euler(ySmooth / 7,xSmooth/7,0);

 canvas.transform.localPosition = new Vector3(xSmooth, ySmooth, 0f);
 canvas.transform.localRotation = parallax;
 }
}

[C4D, Maya, Blender] Convert FBX to MMD

This is not game dev related, but you can also import your MMD’ed FBX model to Unity, and it gives you better physics simulation using stereoarts’ MMD4Mecanim, read tutorial here.

Anyway, I maybe will stop posting about tutorial, cause I think I post too much that my blog almost become educational site. Beside, I think there’s enough tutorial on Unity. I’ll maybe post a research about porting 2D traditional anime to Unity 3D Cel shaded Anime or Unity tips, not tutorial anymore.

On my previous post about MMD, I only tell you how to import PMD or PMX to Unity, but now, I’ll tell about how to make your own MMD model using Maya, Blender, or Cinema4D. You can also import PMD model to Cinema 4D by using MMDTools.

If you already made model with Blender, you could simply jump to step 3, and export it as PMX by using Blender2Pmx.

In this post, I’ll use Cinema 4D.

What you need is

• Any 3D Program that can export to FBX like Maya, Cinema 4D, Blender
• Blender 2.72 or latest, but Blender 2.72 is highly recommended
• Blender2PMX plugin
• PMX Editor

1. Prepare your 3D character and get it MMD compatible. Everything must have skin, don’t attach head mesh to head joint. Blendshape is supported on latest version of FBX (2014 or 2015).
2. Export to FBX
3. Now, open your blender. I use blender 2.76, yep it’s totally fine just use 2.72
4. If you had problem with built-in FBX importer, try use Experimental FBX as in 2.72, else, you have to copy experimental FBX from 2.72 to your blender addon folder, along with blender2pmx
5. from blender 2.72 folder, copy io_scene_fbx_experimental to your blender addon folder. Do the same with your blender2pmx.
6. After you installed both PMX and FBX plugin and turned it on, import your FBX by using Experimental FBX import. Also check automatic bone and manual orientation if you had problem with your model.
7. Select all by pressing CTRL + A and export to PMX
8. open your PMX Editor and open your PMX file
9. Well, now you got your own 3D Model on MMD. I don’t really know how to set up physics on PMX.

[Tutorial] HDRI as Unity Skybox

I actually been used HDRI as skybox back then, but it wasn’t really good cause older Unity doesn’t has GI. Now Unity 5 has GI, so HDRI is good too for Unity.

You’ll need HDRI Image (JPG, if it’s hdr or exr, you have to convert it first), and Unity 5.

1. First, if your HDRI is not JPG yet, then convert it to JPG by set the channel to 8bit.
2. 
3. Import your JPG HDRI to Unity. Remember, 4000px is enough, cause you’ll get 2048px in Unity. Set your HDRI to Cubemap and Cubemap type to cylindrical or latitude bla bla bla…
4. Now create a material. Click Assets > Create > Material
5. Set your material shader to Skybox > Cubemap
6. Now drag your HDRI Cubemap to skybox cubemap.
7. Now open Lighting tab, and drag your HDRI Material to skybox. Sometimes it might happens like this, but to fix it just change the cubemap type to Cylindrical (in this screenshot, I set it to Spherical).

Yep, it’s really simple. Simple as any other 3D programs.

[Tutorial] IES Light on Unity

Without IES Light

IES Light on Unity

Back then, I thought IES light was useless, but when I’m making an interior scene for my Animation I notice a weirdness on ceiling lights. It was circle!!! There’s no circle shaped ceiling lights (except lightbulb)!

You’ll gonna need

• IESviewer 2.9
• Prtscr (Optional, if you don’t want to use MSPaint)
• And IES / LDT light of course!

And this is how

1. 
2. Go to IES Viewer and right click on your IES or LDR light and then click Render, or simply just press CTRL+R. Sometimes, the Render window just wont show, just delete .ini file and reopen IESViewer.
3. 
4. Adjust brightness, Zoom, and Distance until you pleased with the result then press Prt Scn / Print Screen on your keyboard. If you don’t have PrtScr, then you’ll need to open MSPaint (Press Winkey + R and type MSPaint). If you have PrtScr, hold CTRL and left click the render window and it’ll automatically crop it.
5. 
6. Paste (CTRL+V) on MSPaint and then crop the pasted clipboard like this. Save it as JPG or PNG.
7. This is my IES Light
8. Now go to Unity and import your IES light. Set texture type as Cookie, Light type as Point, Mapping : Mirrored Ball, Glossy Reflection, Fixup Edge Seams, Alpha from Grayscale (IMPORTANT!), and filter mode to Trilinear.
9. Go to Game Object > Light > Point Light, and assign your IES file to Cookie texture.
10. 
11. Now look! IES Light on Unity! Although it’s not important, but it’ll make scene looks more realistic than a nonsense circle light.

[Unity] Blendshape Eye Controller (Look At, Random Eyes, and Random Blink)

 

2019 UPDATE

I’ve noticed that Mediafire deleted the original script. Please use this script instead. This script is from my game (Project IMG). I’m sorry if there’s any error happened. This is more updated version and it’s C#

https://drive.google.com/open?id=1uIVj-o5HvuuEr6_oHDRl1Or9umX1Vl9k

Controlling eyes with Unity’s blendshape controller is difficult especially Unity likes to make a blendshape is a float value which harder to control and you can’t even control any movement like down or left. The picture above represents the movement of their eyes. See closely with that cyclops, her eyes were move following that ball, meanwhile the penguin just stuttered with the eye (Random Eye and blink).

You’re gonna need 4 / 5 basic eye blendshapes like Up eye, Right eye, Down eye, Left eye, and blink (optional).

This is very useful tool especially for wannabe animator like me.

Download the script here,

Tutorial

1. 
2. Add this script on the root of your character.
3. 
4. Assign the number / ID of your Blendshape as in your blendshape mesh. I added isDebugging mode, that’ll ease you out finding the number of the blendshape.
5. 
   
6. After found the right ID, now you’re done! You can control eye movement via 2D Target now. But is that enough ? LOL NOPE!
   
7. To make it focus in 3D Way, create an empty game object and set it as target.
8. 
9. Sometimes this might happens (A certain eye moves in reverse way), to fix it, just invert the blendshape ID like Positive X Axis was 0 and set it to 1 and Negative X Axis was 1 and set it to 0.
   
10. Now look! Your character will focus on that object forever! But if that’s not please you enough, you can use Random Eyes mover (I forgot to make it move along with your target, so it’ll move along with the center of your head). But if you really do want random movement along your target, then just remove “target” line below randomizer target transform.

11. if(!randomizerTarget){
     randomizerTarget = new GameObject("RNDTRG");
     randomizerTarget.transform.position = blendshapeEyeMesh.transform.position;
     target = randomizerTarget.transform; // remove this
     }else{
     target.position += Random.onUnitSphere * Time.fixedDeltaTime/randomCompressor;
     }

12. And so do you want them blink ? just turn on Blinkable and your character will be blinkable. The higher value of blink speed the faster it’ll be. And what is Target Multiplier ? That’s just speed multiplier of your 3D target, how fast / sensitive their eye will follow your 3D target.

[Tutorial] MMD 4 Unity

Flawless, I wish Bullet Physic comes to Unity 5. VMD Anim + FBX Anim demo.

So I found out how to Import PMD / PMX to Unity. My old trick uses Blender, PMD Importer, and FBX Exporter. It was like this below, (mine was old anyway…) *keep scrolling for a simpler way* Recipe

1. One Teaspoon of Blender (I use 2.71)
2. A cup of Sugiany Blender MMD Tools
3. a PMD Model of course
4. And 1Kg of Patients

Stereoarts’ MMD4Mecanim

And it was really long and hard and it doesn’t even have an automatic physics configuring! And then I found this good guy posts about MMD4Mecanim which only import PMD / PMX to Unity Assets folder and it’ll automatically do the magic and poof! You got PMD model on Unity.

Any motions can be played with this

Why MMD4Unity ? Isn’t MMD just enough ?

• Unity has Mecanim, it’s easier (for me) to animate especially a lazy person like me (too lazy to reanimate every locomotion for every model)
• Unity 5 now has full access of epic post processing. Depth of Field! Bloom! Motion Blur! Edge Detection!
• And many more…

What you’ll need for MMD4Mecanim,

1. Unity
2. Stereoarts’ MMD4Mecanim (download is on MMD4Mecanim_Beta_*.zip)
3. A PMD / PMX Model.

NOTE FOR PMD Users : Since I see this only supports PMX, you have to convert your PMD to PMX first. Download PMX Editor, then open your PMD file and save it as PMX.

And here’s how to import your PMD / PMX Model to Unity

1. Download and extract PMD / PMX Model, copy whole folder to Unity Assets folder
2. 
3. Then you’ll found there’s a MMD4Mecanim assets file (It has Unity logo)
4. 
5. Read the License agreement and then click process.
6. If you have a VMD File (MMD’s Motion data), copy your VMD data to Unity Assets and put your VMD to Animation Clip field.
7. 
8. Then press process
9. 
10. Always remember to set Animation Type to Humanoid then press Apply. If you not, no animation can be played unless you import a VMD file.
11. 
12. Remember to select your Animator controller and Check Apply Root Motion and turn on Bullet Physics
13. Now add your processed FBX to your scene, it’s now compatible for all your Mecanim like ThirdPersonHumanoid. If you want to add VMD to your mecanim, just Create a New state then put your anim-ized VMD there, and play.
14. 
15. 
16. Flawless isn’t it ?

[Unity] Save Game with ArrayPrefs2

I already use this script since Catapult. This is the best saving script I ever use, but this is not really easy to use. I also developing my own format but it’s not really better than this. My own format will going to be use in Personified Fear or above game. Works with indie don’t worry.

You can see the script here.

It can save any types, but the most i liked is the Array function. It’s easier and much more safe.

For example, if you want to save sound volumes setting information (Javascript for example)

1. In your Menu GUI Script, put var volumes = new float[5];
2. Also set the awake / default value of volumes if Player haven’t set the volumes. like if(!PlayerPrefs.HasKey(“KeyName”)){ awakeVolumes[0] = Camera.main.audio.volume; awakeVolumes[1] = AudioListener.volume; volumes = awakeVolumes; PlayerPrefsX.SetFloatArray(“KeyName”, volumes);}
3. Then set on start / awake function, if(PlayerPrefs.HasKey(“KeyName”)){ volumes = PlayerPrefsX.GetFloatArray(“KeyName”, awakeVolumes); }
4. On your Scroll bar GUI of main volume (volumes[1]) or music volume (volumes[0]), the scrollbar value must be volumes[0] for music volume scrollbar. Whatever you set it, when player press Save, just put PlayerPrefsX.SetFloatArray(“KeyName”,volumes);
5. To delete user data, just simply put PlayerPrefs.DeleteKey(“KeyName”)

Okay, this is the script example of Menu GUI

var volumes = new float[5]; // volumes has 5 array of float with 0 value...
private var awakeVolumes = new float[5]; //must be same array with volumes above

function Awake(){

awakeVolumes[0] = Camera.main.audio.volume; //music volume
awakeVolumes[1] = AudioListener.volume;

if(HasKey("Game Volumes")){
volumes = PlayerPrefsX.GetFloatArray("Game Volumes", awakeVolumes);
Camera.main.audio.volume = volumes[0];
AudioListener.volume = volumes[1];
}else{
PlayerPrefsX.SetFloatArray("Game Volumes", awakeVolumes);
volumes = awakeVolumes;
}

function OnGUI(){

// let's skip making window process
GUILayout.Label("Music Volume");
volumes[0] = GUILayout.HorizontalScrollbar(volumes[0],0.0,1.0);
GUILayout.Label(volumes[0].ToString());

GUILayout.Label("Main Volume");
volumes[1] = GUILayout.HorizontalScrollbar(volumes[1],0.0,1.0);
GUILayout.Label(volumes[1].ToString());

if(GUILayout.Button("Save")){
PlayerPrefsX.SetFloatArray("Game Volumes", volumes);
}
if(GUILayout.Button("Delete")){
PlayerPrefs.DeleteKey("Game Volumes");
}

}

}

My New 2013 saver use something like XML but i’ll make own format to keep player to change every value on XML.

[Unity Editor Tool] Set Tag Recursively

This tool will set all object children tag to parent’s tag. Without this, you would have to set every children tag one by one, with this, you’ll only need to drag one parent object to Object to change and every child object’s tag will be same with parent’s. But remember! The tag you want to change must add to Unity Tags (Unity > Edit > Project Settings > Layers and Tags).

This can be really useful you know since Unity wont let to change tags recursively.

Save it as javascript and put it on Editor folder… Ah yes, I put it on SKiPPER > Set Tag to launch this tool

class SetTagRecursively extends ScriptableWizard
{
	var objToChange : GameObject;
	var tag : String;
	
	function OnWizardUpdate () {
		//objToChange = Selection.gameObject;
	}
	
	function OnWizardCreate () {
		//for(x in objToChange){
			var x = objToChange.GetComponentsInChildren(Transform);
			for(var z in x) z.tag = tag;
		//}
	}
	
	@MenuItem("SKiPPER/Set Tag")
	static function TagRecursively () {
		ScriptableWizard.DisplayWizard("Change Tags Recursively", SetTagRecursively, "Touch to Henshin...");
	}
}