Tutorials – Leah Lee Studio

Serving up your Webtoon

October 6, 2016 Leah Lee Comics, Tutorials

Wouldn’t you like to view your webtoon online and on your phone, just as people will be seeing it when you upload it to webtoons or other long-form comics? I put together a simple php script and css stylesheet to do just that!

First thing I do is export my comic pages from clip studio.
export-pages
Then I upload it to my site, which supports php, using ftp into an images folder.

Here is the php and css you’ll need:


<html>
<head>
  <title>In progress</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
  <meta name="robots" content="noindex">
</head>

<body>
<?php
  $dirname = "images/";
  $images = glob($dirname."*.jpg");
  foreach($images as $image) {
  echo '<img src="'.$image.'" /><br />';
  }
?>
</body>
</html>

<html>

<head>

<title>In progress</title>

</head>

<body>

<?php

$dirname = "images/";

$images = glob($dirname."*.jpg");

foreach($images as $image) {

echo '<img src="'.$image.'" /><br />';

}

</body>

</html>


img {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1000px) {
    img {
       width: 100%;
       overflow: hidden;
       margin-left: 0;
       margin-right: 0;
    }
    body {
      margin: 15px 0 15px 0;
    }
 }

img {

display: flex;

margin-left: auto;

margin-right: auto;

}

@media screen and (max-width: 1000px) {

img {

width: 100%;

overflow: hidden;

margin-left: 0;

margin-right: 0;

}

body {

margin: 15px 0 15px 0;

}

Here’s what it looks like on my ftp (I renamed mine fools.css):
ftp

Hope you find this useful!

Using a Video as a texture

August 7, 2016 Leah Lee Clip Studio, Tutorials, Visual Novel Development

Warning! I have figured out this is super slow and there is a better way to do this!!!!

I didn’t realize it was so slow until I watched it run on someone else’s laptop. It was baaaaaad.

I found a better way to do this, which is export the animation frames as a series of jpegs, and in Unity, if you drag and drop all those frames into your game, it will automatically make an animation object. From that you can set up triggers to start and stop it. Fungus has a command that sets animation triggers you can use, but if you’re like me and doing way too much in Lua, I made this:


using UnityEngine;

public class EffectsController : MonoBehaviour {

	public GameObject[] effects;
	
	public void StartEffect(string effectName)
	{
		for(int i = 0; i < effects.Length; i++)
		{
			if (effects != null && string.Compare(effectName, effects[i].name) == 0)
			{
				effects[i].GetComponent<Animator>().SetTrigger("activate");
			}
		}
	}

	public void EndEffect(string effectName)
	{
		for (int i = 0; i < effects.Length; i++)
		{
			if (effects != null && string.Compare(effectName, effects[i].name) == 0)
			{
				effects[i].GetComponent<Animator>().SetTrigger("deactivate");
			}
		}
	}
}

using UnityEngine;

public class EffectsController : MonoBehaviour {

public GameObject[] effects;

public void StartEffect(string effectName)

{

for(int i = 0; i < effects.Length; i++)

{

if (effects != null && string.Compare(effectName, effects[i].name) == 0)

{

effects[i].GetComponent<Animator>().SetTrigger("activate");

}

public void EndEffect(string effectName)

{

for (int i = 0; i < effects.Length; i++)

{

if (effects != null && string.Compare(effectName, effects[i].name) == 0)

{

effects[i].GetComponent<Animator>().SetTrigger("deactivate");

}

But for archive purposes I’ll just leave this post here.

—————————————————————————————————————————————-

I was able to import animation made in clip studio into my Visual Novel!

These are the steps I took.

I exported the animation I made from Clip Studio Paint as an AVI2.0 mp4 (AVI1.0 doesn’t work).
Created a cube in Unity and made a Fungus view screen like you would for a background image and resized it to fit. I couldn’t get just a normal plain to work.
Dragged and dropped the video from My Project folder to the cube so that it uses the video for the texture.

It doesn’t play unless you also add a script to the cube.


using UnityEngine;
using System.Collections;

public class RenderMovieTexture : MonoBehaviour {

	Renderer r;
	MovieTexture movieTexture;

	// Use this for initialization
	void Awake()
	{
		r = GetComponent<Renderer>();
		movieTexture = (MovieTexture)r.material.mainTexture;
		movieTexture.loop = true;
		movieTexture.Play();
	}
}

using UnityEngine;

using System.Collections;

public class RenderMovieTexture : MonoBehaviour {

Renderer r;

MovieTexture movieTexture;

// Use this for initialization

void Awake()

{

r = GetComponent<Renderer>();

movieTexture = (MovieTexture)r.material.mainTexture;

movieTexture.loop = true;

movieTexture.Play();

}

It plays the movie texture when the scene starts and I set the option for it to loop.

Hope someone finds this useful. I was jumping around the room when I figured this out.

Using Unity Profiler for Optimization

July 19, 2016 Leah Lee Tutorials

While working on my most recent pull request to Fungus, I was told that Linq and foreach really shouldn’t be used with Unity because it can cause significant slowdowns. Noooooo! So I came up with an idea of what I wanted to implement based off of some provided reading(1)(2) but I wanted to SEE the change in speed for myself. So I decided to use Unity’s built-in Profiler.

To open the Profiler, go to Window->Profiler or hit Ctrl+7.

You can run the profiler and get a broad overview of how much your game hogs resources. But to test a specific method or chunk of code, you can create a custom profiler sample like I did here on my potentially bad bit of code:


Profiler.BeginSample("CharacterSearch");
if (!string.IsNullOrEmpty(characterKey)) character = CharacterSearch(characterKey);
Profiler.EndSample();

Profiler.BeginSample("CharacterSearch");

if (!string.IsNullOrEmpty(characterKey)) character = CharacterSearch(characterKey);

Profiler.EndSample();

I ran the profiler and I watched as the graph went up and down, not much of it making that much sense. Then I saw a spike in the graph where I was sure the problem bit of code ran. I entered the name of my sample, which was “CharacterSearch”, into the search bar to make it easier to find, then I navigated back through the frames until I saw it pop up in the hierarchy view. And that’s where I found this:
Spike before optimization
Garbage Collection Allocation of 0.7kb and time of 2.28ms. It might seem small but this stuff adds up, especially if you want to port to mobile. Let’s see if I can do better!

So I changed my code around to use a struct with a custom compare.


protected struct CharacterItem
{
	public string name;
	public string nameText;
	public Character character;

	public bool CharacterMatch(string matchString)
	{
		return name.StartsWith(matchString, true, System.Globalization.CultureInfo.CurrentCulture)
				|| nameText.StartsWith(matchString, true, System.Globalization.CultureInfo.CurrentCulture);
	}
}

protected struct CharacterItem

{

public string name;

public string nameText;

public Character character;

public bool CharacterMatch(string matchString)

{

return name.StartsWith(matchString, true, System.Globalization.CultureInfo.CurrentCulture)

|| nameText.StartsWith(matchString, true, System.Globalization.CultureInfo.CurrentCulture);

}

…


if (!string.IsNullOrEmpty(characterKey))
{
    Profiler.maxNumberOfSamplesPerFrame = -1; //You might not need this
    Profiler.BeginSample("CharacterSearch");

    for (int i = 0; i < characters.Length; i++)
    {
        if( characters[i].CharacterMatch(characterKey))
        {
            character = characters[i].character;
        }
    }
    Profiler.EndSample();
}

if (!string.IsNullOrEmpty(characterKey))

{

Profiler.maxNumberOfSamplesPerFrame = -1; //You might not need this

Profiler.BeginSample("CharacterSearch");

for (int i = 0; i < characters.Length; i++)

{

if( characters[i].CharacterMatch(characterKey))

{

character = characters[i].character;

}

Profiler.EndSample();

}

When I ran the profiler again with the new optimized code, I got much better results:

Less of a spike after optimization

0B GC Alloc and .34 ms! Wow…I really didn’t expect that much of a change.

Let me know if this is totally wrong or if there’s anything else I could do to speed this up in the comments. 🙂

1 2 »