いんでぃーづ

ゲームいろいろ、いろいろ自由

Handwriter Users Manual : on Unity Asset Store

Handwriter User's Manual

This document describes how to quick start Handwriter.

Version 1.0.1

Handwriter applies handwriting-like appearance effect to Text components and Image components in your scenes!!

  • Very intuitive and easy to use editor window
  • Simple runtime script components
  • Overlay, Camera and World canvas on Unity GUI supported
  • No program code needed to use
  • OTF and TTF format font file supported
  • Simple sprite and sprite sheet support
  • Writing progress callback using unity event system
  • Writing position feedback event system
  • Built-in(Default, Standard), Universal (URP), High Definition (HDRP) render pipeline compatible
  • Mobile ready

Technikcal details

Unity Compatibility Requires at least Unity 2019.4 (LTS)

Introduction

Parimary Assets : Author and Book

Handwriter outputs two kind of assets derived from Scriptable Object.

These are Author asset and Book asset.

Author is used only in Unity Editor, and used to create Book asset.
Book is used on runtime script component in built executable.

Handwriter Editor Window

Open Handwriter Window from main menu as below.

Window > Handwriter

Open from Unity Menu

f:id:sugar_affordance:20220303135608p:plain

Handwriter Window

f:id:sugar_affordance:20220303135622p:plain

Basic procedure of both Text Handwriting and Image Handwriting are almost the same.
Please refer to different section for each component type you want to use.

Text Handwriting

Step 1: Create a new Author

Click the New Text Set button and open the select font window.

Click the object field and select a font file you want to use.

TTF or OTF format font files are supported.

Step 2: Add a character to the Book

Type a character you want to add, and click "+" button at the right of the field.

f:id:sugar_affordance:20220303135642p:plain

Handwriter Window automatically shows Stroke Order Setting Tab and show strokes setting of the added character.

f:id:sugar_affordance:20220303135654p:plain

Once, click the Handwriting Asset tab on the top of the window. You can find the added character in the list at the bottom of the window.

Click the added character in the list, then you can move to Stroke Order Setting tab.

Step 3: Add strokes to the character

In the Stroke Order Setting Tab, click the big + button of the window.

Then the Edit Stroke Window will open.

3-1 Mask a part of the stroke

f:id:sugar_affordance:20220303135712p:plain

You can find the character you typed.

Then move mouse pointer over the character, and click left button and drag. A part of the character will be masked by red color.

Continue dragging and fill the part of first stroke order of the character.

f:id:sugar_affordance:20220303135725p:plain

After filled, click the Next button placed bottom of the window.

3-2 Trace along the mask

Trace the masked part of the character with the mouse dragging.

f:id:sugar_affordance:20220303135736p:plain

Then click the preview button. You can check the drawn stroke.

f:id:sugar_affordance:20220303135745p:plain

If a good stroke drawn, click the Save and Exit button. Then the drawn stroke will be backed up as some textures.

Max total writing frames per one character is 765 (255 * 3).

3-3 Repeat until finish all strokes

You can find the added stroke in Stroke Order Setting tab in the Handwriter Window.

Repeat adding strokes until all strokes written.

f:id:sugar_affordance:20220303135756p:plain

After all strokes written, back to the Handwriting Asset tab.

And add all characters you want to type in Text component to the list and create each strokes.

Step 4: Set Output Properties

Set properties in the Handwriting Asset tab.

Author Setting

Property Type Desciption
Font Font Selected font file when Author created (can't change)
Copy font file Font Copy original font file to prevent any changes to the original file
font size float Font size of imported font file
Minimize font file toggle If toggle is on, font importer setting of target font file is set to "Custom Set" and only added characters to the book will be imported

Book Setting

Property Type Desciption
position feedback toggle enable Position Feedback event on Handwriter components. Please refer to Position Feedback section
Default Bleeding int defalut value of Ink bleeding on Handwriter components
Max Atlas Size enum Max texture size of packed stroke order texture

Step 5: Save as a new Book

After all characters added, click the Save as New Book button of the Handwriting Asset tab. Select the folder you want to save the Book.

f:id:sugar_affordance:20220303135810p:plain

Once a Book created, if you update some character strokes, click Overwrite Book button and update Book asset.

f:id:sugar_affordance:20220303135823p:plain

Red circle apeears on Overwrite button if there are any update in Author.

Step 6: Create object in your scene

Right click on your scene and select TextHandwriter

UI > Handwriter > TextHandwriter

f:id:sugar_affordance:20220303135833p:plain

A GameObject will be created under a Canvas (if there are no canvas in the scene, a new Canvas will be created) that has Text component and TextHandwriter component.

TextHandwriter Component in Inspector window

f:id:sugar_affordance:20220303135843p:plain

I recommend to create new Canvas for a new Handwriter component. Because currently Handwriter uses UV1~UV3, so automatically add UV1~UV3 channels to setting of root Canvas.

Step 7: Set created Book

Click Text Handwriting Book property of the created Text Handwriter component.
And select created Book asset.

Step 8: Set Runtime Properties

Set each properties in the added component.

8-1 Base Setting

Property Type Desciption
Text Handwriting Book TextHandwritingBook Created Book asset
speed float writing speed in runtime. (multiplies each stroke speed). If speed is 1, 60 frames per a second
bleeding float Ink bleeding
Minimum Alpha float Alpha Transparency value before written
Position Feedback toggle Toggle on if you want to receive position feedback event. Please refer to Position Feedback section
Auto Start toggle Start writing automatically at Start() callback in MonoBehaviour lifecycle
auto start delay float Delay seconds before auto start
auto fade out toggle Fade out automatically after finish writing
fade out time float Fade out time
destroy game object after fadeOut toggle Destroy the GameObject after auto fadeout

8-2 Event Listener Setting

Create your custom script and Event Listener functions. Please refer API Reference.

Image Handwriting

Special Notice on Image Handwriting

In Unity, sprite importer setting has "Mesh Type" property that can be found in inspector. Currently, Image Handwriting supports only "Full Rect". Automatically change that property of the sprite added to a Author.

Sprite Setting

f:id:sugar_affordance:20220303135857p:plain

Step 1: Create a new Author

Click the New Image Set button and open the select directory window.

And select directory to save new Author.

Step 2: Add a sprite to the Book

f:id:sugar_affordance:20220303135907p:plain

You can find the added character in the list at the bottom of the window.

Click the added sprite in the list, then you can move to Stroke Order Setting tab.

Stroke Order Setting Tab

f:id:sugar_affordance:20220303135917p:plain

Step 3: Add strokes to the sprite

In the Stroke Order Setting Tab, click the big + button of the window.

Then the Edit Stroke Window will open.

3-1 Mask a part of the stroke

f:id:sugar_affordance:20220303135927p:plain

You can find the sprite you selected.

Then move mouse pointer over the image, and click left button and drag. A part of the image will be masked by red color.

Continue dragging and fill the part of first stroke order of the image.

f:id:sugar_affordance:20220303135938p:plain

After filled, click the Next button placed bottom of the window.

3-2 Trace along the mask

Trace the masked part of the image with the mouse dragging.

f:id:sugar_affordance:20220303135949p:plain

Then click the preview button. You can check the drawn stroke.

If a good stroke drawn, click the Save and Exit button. Then the drawn stroke will be backed up as some textures.

3-3 Repeat until finish all strokes

You can find the added stroke in Stroke Order Setting tab in the Handwriter Window.

Repeat adding strokes until all strokes written.

After all strokes written, back to the Handwriting Asset tab.

And add all sprites you want to show in Image component to the list and create each strokes.

Step 4: Set Output Properties

Set properties in the Handwriting Asset tab.

Author Setting

Property Type Desciption
Create Sprite Atlas toggle Create sprite atlas as sub asset of the book

If Create Sprite Atlas options is on, "Sprite Packer" Mode setting in the project setting window automatically be changed to "Always Enabled".

Sprite Atlas Setting

Book Setting

Property Type Desciption
position feedback toggle enable Position Feedback event on Handwriter components. Please refer to Position Feedback section
Default Bleeding int defalut value of Ink bleeding on Handwriter components
Max Atlas Size enum Max texture size of packed stroke order texture

Step 5: Save as a new Book

Click the Save as New Book button of the Handwriting Asset tab. Select the folder you want to save the Book.

f:id:sugar_affordance:20220303140006p:plain

Once a Book created, if you update some sprite strokes, click Overwrite Book button and update Book asset.

f:id:sugar_affordance:20220303140017p:plain

Red circle apeears on Overwrite button if there are any update in Author.

Step 6: Create object in your scene

Right click on your scene and select SpriteHandwriter

UI > Handwriter > SpriteHandwriter

f:id:sugar_affordance:20220303140027p:plain

A GameObject will be created under a Canvas (if there are no canvas in the scene, a new Canvas will be created) that has Text component and SpriteHandwriter component.

SpriteHandwriter Component in Inspector window

f:id:sugar_affordance:20220303140037p:plain

I recommend to create new Canvas for a new Handwriter component. Because currently Handwriter uses UV1~UV3, so automatically add UV1~UV3 channels to setting of root Canvas.

Step 7: Set created Book

Click Sprite Handwriting Book property of the created Sprite Handwriter component.
And select created Book asset.

Step 8: Set Runtime Properties

Set each properties in the added component.

8-1 Base Setting

Property Type Desciption
Sprite Handwriting Book SpriteHandwritingBook Created Book asset
select sprite int book select Sprite to show in the component
speed float writing speed in runtime. (multiplies each stroke speed). If speed is 1, 60 frames per a second
bleeding float Ink bleeding
Minimum Alpha float Alpha Transparency value before written
Position Feedback toggle Toggle on if you want to receive position feedback event. Please refer to Position Feedback section
Auto Start toggle Start writing automatically at Start() callback in MonoBehaviour lifecycle
auto start delay float Delay seconds before auto start
auto fade out toggle Fade out automatically after finish writing
fade out time float Fade out time
destroy game object after fadeOut toggle Destroy the GameObject after auto fadeout

f:id:sugar_affordance:20220303140051p:plain

8-2 Event Listener Setting

Create your custom script and Event Listener functions. Please refer API Reference.

Special Feature

Position Feedback

Handwriter components can notify positions of the edge of writing character or image as some RectTransform objects. You can use these positions with other GameObject (Particle, indicator Sprite image, and so on), also 3D animation with IK. Thereby it will be looked like really written characters.

1. Enable the option in Author

In the Handwriter window, select a Author and open the Book setting. Toggle the Position Feedback checkbox option on and click the Overwrite button.

Author Position Feedback Option

2. Enable the runtime components option

In a game scene, select a Handwriter compoent GameObject and see Inspector window. Toggle on the Position Feedback checkbox option.

If you find Error as below, check the option of Author is on.

f:id:sugar_affordance:20220303140105p:plain

3. Write a Event Listener

Write a OnStrokePosition callback function of Event Listener on your Script. Please refer to the API Rerefrence .

4. Set Event Listeners

Attach a event listener script to something. Then in Handwriter components inspector, attach the OnStrokePosition Event Listener to the property.

Smooth Chaining

Handwriter separates each strokes in a character completely. But actually these are gradually continuous data in binary. If the Smooth Chaining option is on, Handwriter deal continous stroke as one stroke.

This feature is useful in a case of writing 'e', 'o', and so on.

These character is return to the start position in one stroke. If you write as one stroke on StrokeEditor window, you can't write clearly the start position of these character as you want.

In these case, split a stroke into two strokes as below.

f:id:sugar_affordance:20220303140119p:plain

And check the Smoothe Chaining option in first stroke and toggle on. Then Handwriter consider these strokes as one stroke and affects Ink bleeding.


“Unity” and Unity logos are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere, and are used under license.


免責事項

当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。

また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。

すべて自己責任でお願いします。