Want to reach international audiences with your YouTube videos? Adding dubbed audio — not just subtitles — dramatically improves the viewing experience. Previously, this required hiring professional narrators or speaking foreign languages yourself, but ElevenLabs' TTS API has changed the game.

This article walks through my complete workflow for automatically generating multilingual dubbed audio for YouTube videos. The tools are Claude, Python, ffmpeg, and ElevenLabs API. Claude handles the core text processing, while Python + ffmpeg automate audio generation and processing. No special equipment needed — individual creators can get started right away.

:::ad

:::toc

• Workflow Overview
• Prerequisites
  • Required Tools & Accounts
  • Getting Your ElevenLabs API Key
• Why Claude (LLM) Is Essential
  • Why Python Alone Isn't Enough
  • Why I Recommend Claude
• Step 1: Create Subtitles (Text)
  • Transcription Methods
  • Preprocessing: Python + Claude Two-Stage Approach
• Step 2: Create Translated Subtitles with Claude & Optimize for TTS
  • Translation Tips
  • TTS Optimization Rules
• Step 3: Generate Audio with ElevenLabs API
  • API Basics
  • Python Script Implementation
  • Caching & Retry Strategy
• Step 4: Build Timeline with ffmpeg
  • Speed Adjustment (atempo)
  • Silence Base + adelay for Absolute Timestamp Placement
  • Mixdown with amix
• Step 5: Mastering & Quality Verification
  • Gain Adjustment & Peak Limiter
  • Quality Check via Report
• Step 6: Combine with BGM & SFX in Premiere Pro
• Step 7: Upload to YouTube Studio
• Cost & Usage Estimates
• Conclusion

:::

:::ad

Workflow Overview {#workflow-overview}

This workflow consists of 7 steps.

Video file
  ↓ Step 1: Transcription + Python preprocessing + Claude refinement
Japanese text
  ↓ Step 2: Claude translation + TTS optimization
Dubbing subtitles (_en_dub.srt)
  ↓ Step 3: ElevenLabs TTS API
Per-cue audio files (.mp3)
  ↓ Step 4: ffmpeg timeline construction (★absolute timestamp placement, not simple concatenation)
Timeline audio (.wav)
  ↓ Step 5: Mastering
Dubbed audio (.mp3)
  ↓ Step 6: Premiere Pro — mute original audio + combine with BGM/SFX
Final dubbed audio (.mp3)
  ↓ Step 7: Upload
YouTube Studio (dubbed audio track)

Here are the tools used at each step.

The text processing phase in Steps 1-2 requires the most intellectual effort, and Claude (LLM) is essential here. Steps 3-5 are automated processing with scripts and ffmpeg.

Prerequisites {#prerequisites}

Required Tools & Accounts {#required-tools}

Prepare the following tools and accounts.

• Claude (Anthropic) — core tool for translation and text optimization
• Python 3.10+
• ffmpeg / ffprobe (available in PATH)
• ElevenLabs account (Starter Plan or above)
• Premiere Pro (for transcription; Whisper is an alternative)
• Python libraries: requests, python-dotenv (plus faster-whisper if using Whisper)

pip install requests python-dotenv faster-whisper

Getting Your ElevenLabs API Key {#api-key-setup}

1. Create an account at ElevenLabs
2. Copy your API key from the Profile + API Key section in the dashboard
3. Go to "Voices" → "Explore" in the sidebar, filter by language and category (Narration, Conversational, etc.) to find a voice you like
4. Copy the Voice ID from the voice detail page

Create a .env file in your project root with your API key and Voice IDs.

ELEVENLABS_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
ELEVENLABS_VOICE_ID_EN=UgBBYS2sOqTuMpoF3BR0
ELEVENLABS_VOICE_ID_KR=PDoCXqBQFGsvfO0hNkEs

The Voice IDs above are the voices I actually use. I selected them after auditioning voices from ElevenLabs' voice library.

Voice IDs aren't secret — they're IDs of publicly available voices in ElevenLabs' library, so feel free to use them directly. Of course, finding voices that match your own channel's tone is recommended.

You can also check available voices via the ElevenLabs API /voices endpoint.

import requests, os
from dotenv import load_dotenv

load_dotenv()
api_key = os.getenv("ELEVENLABS_API_KEY")

resp = requests.get(
    "https://api.elevenlabs.io/v1/voices",
    headers={"xi-api-key": api_key},
)
for v in resp.json()["voices"]:
    print(f"{v['voice_id']}  {v['name']}  ({v['category']})")

Why Claude (LLM) Is Essential {#claude-role}

This workflow relies not only on Python + ffmpeg automation, but on Claude (LLM) playing a central role.

Why Python Alone Isn't Enough {#python-limitation}

Preprocessing transcriptions and creating translated subtitles require context-aware judgment. Python scripts can only handle formulaic processing like filler removal and string replacement. The following tasks are beyond Python's capabilities:

• Context-based text refinement: Restructuring spoken language into readable text while understanding the speaker's intent
• Translation: Natural multilingual translation that preserves nuance
• TTS optimization: Compressing text to fit within specified time windows while preserving meaning
• Contextual proper noun judgment: Cases where the same sound maps to different correct spellings depending on context

In other words, this workflow is built on a two-stage approach: "parts Python can handle mechanically" and "parts that require LLM understanding".

Why I Recommend Claude {#why-claude}

Translation and dubbing subtitle creation can also be done with ChatGPT (GPT-5.4). However, I find that Claude is clearly superior when it comes to creating dubbing subtitles (TTS optimization).

Creating dubbing subtitles involves a massive number of constrained instructions like "compress this sentence to fit within a 3.5-second window, keeping it under 15 words while preserving meaning." Claude excels at this kind of deft text compression to fit specified time windows. It doesn't just shorten sentences — it consistently produces output that considers naturalness when read aloud by TTS (breath points, contraction usage, list compression).

When building this workflow, I actually created dubbing subtitles with Claude and optimized 181 cues down to 146 cues (19.3% reduction). Claude handled the delicate task of keeping every cue's speed ratio (text length / display time) within 1.3x with high precision.

Step 1: Create Subtitles (Text) {#step1-whisper}

Transcription Methods {#transcription}

First, prepare the Japanese text that serves as the starting point for dubbing. There are two main methods.

Method 1: Premiere Pro's Transcription (Recommended)

This is the method I actually use. Premiere Pro has a built-in Speech to Text feature that delivers high-accuracy transcription with video context awareness. Simply run "Transcribe" from Premiere Pro's caption panel and export the result as a text (.txt) file.

Premiere Pro's transcription also analyzes video visual information, making it feel more accurate for proper nouns and technical terms compared to Whisper alone. If you're already editing in Premiere Pro, it works without any additional setup — a major advantage.

Note that Premiere Pro also has a filler word auto-removal feature ("um," "uh," etc.), but I recommend exporting without applying it. Applying filler removal over-fragments the timecodes, which can degrade Claude's context comprehension accuracy during the meaning-based refinement that follows. Letting Claude handle filler removal while considering context produces higher quality text.

Method 2: Using Whisper (faster-whisper)

For environments without Premiere Pro, faster-whisper is a powerful alternative. With a GPU, the large-v3-turbo model provides fast, high-accuracy transcription.

python transcribe.py "input_video.mp4" "output_dir/" \
    --model large-v3-turbo \
    --language ja \
    --beam-size 5

from faster_whisper import WhisperModel

model = WhisperModel("large-v3-turbo", device="cuda", compute_type="float16")
segments, info = model.transcribe(
    "input_video.mp4",
    language="ja",
    beam_size=5,
    vad_filter=True,
    vad_parameters={"min_silence_duration_ms": 500},
    word_timestamps=True,
    temperature=0.0,
)

vad_filter=True auto-detects silent sections, improving segment splitting. Save the output in SRT format.

Either method leads to the same preprocessing and translation steps that follow.

Preprocessing: Python + Claude Two-Stage Approach {#preprocessing}

Raw transcription output isn't ready for translation. Preprocessing uses a two-stage approach: mechanical processing with Python and meaning-based refinement with Claude.

Stage 1: Mechanical Preprocessing with Python

The following three tasks can be automated with Python scripts.

Filler removal: Remove segments entirely composed of filler words like "um," "uh," "well."

FILLER_ONLY = {
    "はい", "はい。", "えー", "えーと", "えっと",
    "うーん", "うん", "あの", "あー", "おー",
    "そう", "そうです", "そうですね", "ね", "で",
}

if segment["text"].strip() in FILLER_ONLY:
    continue  # Skip this segment entirely

Leading fillers ("um, so next..." → remove the "um,") are also removed with regex.

Mechanical proper noun replacement: Whisper frequently misrecognizes technical terms and proper nouns. Prepare a "misrecognition → correct spelling" replacement list in advance.

# Example channel-specific replacement list
REPLACEMENTS = [
    ("新学校", "進学校"),      # Homophone confusion
    ("元受け", "元請け"),      # Kanji error
    ("下受け", "下請け"),      # Kanji error
    ("MisrecognizedNameA", "CorrectChannelName"),  # Proper noun
]

for old, new in REPLACEMENTS:
    text = text.replace(old, new)

You don't need to build this replacement list perfectly from the start. As you create subtitles for more videos and find new misrecognition patterns, just tell Claude to "add this misrecognition to the lookup table." The more videos you process, the more comprehensive the list becomes, and preprocessing accuracy improves over time.

Segment merging: Merge segments that are too short with adjacent ones.

def should_merge(current, next_seg, max_gap=0.8, max_duration=16.0, max_chars=160):
    gap = next_seg["start"] - current["end"]
    if gap > max_gap:       # More than 0.8s gap = separate segments
        return False
    if next_seg["end"] - current["start"] > max_duration:  # Over 16s after merge
        return False
    if len(current["text"] + next_seg["text"]) > max_chars:  # Over 160 chars after merge
        return False
    return True

Stage 2: Meaning-Based Refinement with Claude

Even after Python's mechanical processing, the transcription is still "spoken language written down." Let's look at an example.

Whisper output (after Python preprocessing):

えーとですね今日はまあ設定周りの話をちょっとしたいなと思ってまして
まあ結構つまずくポイントっていうかですねそのへんをまとめていきます

After Claude refinement:

今回は設定周りでつまずきやすいポイントをまとめて解説します。

What's happening here isn't just "typo correction."

• "えーとですね," "まあ," "ちょっと," "っていうかですね" → Remove conversational filler expressions
• Condense content spanning 2 sentences into 1
• Reconstruct into clear text that's easy to translate, capturing the speaker's intent

Here's another example from the beginning of a livestream.

Whisper output:

はいみなさんこんにちは
今日はちょっと天気が良くてですね散歩がてら来たんですけど
まあそれはさておきですね今日の本題なんですが

After Claude refinement:

(Greeting and small talk removed; starts from the main topic)

Livestream videos often have several minutes of greetings and small talk at the beginning, but dubbed audio only needs content directly related to the topic. The judgment of "where the main topic begins" is something Python can't make — it's a process only possible with Claude's contextual understanding.

This two-stage approach — Stage 1 (Python) mechanically removing noise, Stage 2 (Claude) reconstructing spoken language into natural text — is critical to translation quality.

:::ad

Step 2: Create Translated Subtitles with Claude & Optimize for TTS {#step2-translation}

Translation Tips {#translation-tips}

Pass the preprocessed Japanese text to Claude for translation into target languages. It's efficient to instruct TTS optimization simultaneously with translation.

When giving Claude translation instructions, specify these points explicitly.

All languages:

• Translate as natural spoken language. Unlike display subtitles, this will be read aloud by TTS, so avoid written-language expressions
• Keep text within each cue short enough for TTS to finish reading within the display time window

For English:

• Use contractions actively ("can not" → "can't", "do not" → "don't")
• Cut verbose expressions ("Furthermore" → "Also", "In order to" → "To")

For Korean:

• Use 해요체 (haeyo-che) consistently. Korean has multiple speech levels with varying formality. 해요체 is the casual-polite register equivalent to Japanese "〜です・〜ます," and sounds most natural for YouTube's conversational tone. In contrast, 합니다체 (hamnida-che) is the formal register used in news and official documents, and sounds stiff and unnatural when read by TTS
• Break up long Sino-Korean compound words that TTS reads in one breath into natural rhythm (e.g., "충분조건" → "충분한 조건")

Let's look at an actual conversion example.

Japanese (Claude-refined):

興味があるとか好きだなと思うこと以外、人ってそもそも長い時間はできないじゃないですか。

English dubbing subtitle (_en_dub.srt, created by Claude):

Other than things you're interested in or things you like,
you can't spend long hours on them, right?

Korean dubbing subtitle (_kr_dub.srt, created by Claude):

흥미가 있거나, 좋아하지 않으면
오랜 시간을 들일 수 없잖아요

Claude appropriately converts the Japanese colloquial nuance ("〜じゃないですか" — seeking agreement) to "right?" in English and "〜잖아요" (haeyo-che agreement expression) in Korean. This kind of nuance-level translation accuracy is why I use Claude instead of machine translation.

TTS Optimization Rules {#tts-optimization}

Create "dubbing subtitles" optimized for TTS from the translated subtitles. Name files with language code + _dub like video_name_en_dub.srt to distinguish them from display subtitles.

Core Rule: 1 cue = 1 complete sentence

In regular subtitles, one sentence may span multiple cues, but in TTS dubbing subtitles, each cue contains one complete sentence. TTS engines read per-cue, so cutting mid-sentence produces unnatural intonation.

Let's see a concrete example. If the original Japanese is "基礎練習を毎日続けることが上達の近道ですが、ただ量をこなすだけでは効率が悪い" (Practicing basics daily is the fastest way to improve, but just doing a lot isn't efficient):

Regular display subtitle (_en.srt) — short segments for on-screen display:

1
00:00:03,200 --> 00:00:05,800
Practicing the basics every day

2
00:00:05,800 --> 00:00:08,500
is the fastest way to improve,

3
00:00:08,500 --> 00:00:11,200
but just doing a lot of practice
isn't very efficient.

TTS dubbing subtitle (_en_dub.srt) — 1 complete sentence per cue:

1
00:00:03,200 --> 00:00:11,200
Practicing basics daily is the fastest way to improve, but just doing a lot isn't efficient.

The display subtitle split across 3 cues is combined into 1 cue in the dubbing subtitle. TTS reads this single sentence in one breath starting at 00:00:03,200, producing natural intonation.

Here are more text shortening examples.

Speed estimation guide (English)

1 word ≈ 120-150ms
2-second window → max 13-16 words
3-second window → max 20-25 words
4-second window → max 27-33 words

If text is too long for the cue's display time, speed adjustment will exceed its limit and fail. Use the guide above to calibrate text length.

Step 3: Generate Audio with ElevenLabs API {#step3-tts}

This is the core of the workflow. Send each cue from the dubbing SRT to ElevenLabs API and retrieve audio files.

API Basics {#api-basics}

Endpoint: POST https://api.elevenlabs.io/v1/text-to-speech/{voice_id}
Auth header: xi-api-key: <your-api-key>
Response: audio/mpeg (MP3 binary)

Request body:

{
  "text": "The text to synthesize.",
  "model_id": "eleven_flash_v2_5",
  "voice_settings": {
    "stability": 0.5,
    "similarity_boost": 0.75
  }
}

stability controls voice consistency (higher = more stable, lower = more expressive), similarity_boost controls fidelity to the selected voice. The balance above is recommended for dubbing.

Python Script Implementation {#python-script}

Here's the overall processing flow.

import requests, hashlib, json, re, subprocess
from pathlib import Path
from dotenv import load_dotenv

API_BASE = "https://api.elevenlabs.io/v1"

def tts_generate(api_key, voice_id, text, output_path,
                 model_id="eleven_flash_v2_5", max_retries=3):
    """Generate MP3 audio from a single text"""
    url = f"{API_BASE}/text-to-speech/{voice_id}"
    headers = {
        "xi-api-key": api_key,
        "Content-Type": "application/json",
    }
    body = {
        "text": text,
        "model_id": model_id,
        "voice_settings": {"stability": 0.5, "similarity_boost": 0.75},
    }

    for attempt in range(max_retries):
        resp = requests.post(url, headers=headers, json=body,
                             stream=True, timeout=60)
        if resp.status_code == 200:
            with open(output_path, "wb") as f:
                for chunk in resp.iter_content(chunk_size=4096):
                    f.write(chunk)
            return
        if resp.status_code in (429, 500, 502, 503):
            wait = 2 ** (attempt + 1)
            time.sleep(wait)
            continue
        resp.raise_for_status()
    raise RuntimeError(f"TTS failed after {max_retries} retries")

SRT parsing is also implemented from scratch using regex to extract cue numbers, timestamps, and text.

SRT_BLOCK_RE = re.compile(
    r"(?ms)^\s*(\d+)\s*\n"
    r"(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})\s*\n"
    r"(.*?)(?=\n{2,}|\Z)"
)

def parse_ts(value):
    """Convert SRT timestamp to milliseconds"""
    hh, mm, rest = value.split(":")
    ss, ms = rest.split(",")
    return ((int(hh) * 60 + int(mm)) * 60 + int(ss)) * 1000 + int(ms)

def parse_srt(path):
    text = Path(path).read_text(encoding="utf-8-sig")
    cues = []
    for m in SRT_BLOCK_RE.finditer(text):
        cues.append({
            "index": int(m.group(1)),
            "start_ms": parse_ts(m.group(2)),
            "end_ms": parse_ts(m.group(3)),
            "text": m.group(4).strip(),
        })
    return cues

Call tts_generate() for each cue to retrieve individual MP3 files.

Caching & Retry Strategy {#cache-and-retry}

To minimize API costs, cache generated audio. Generate a SHA1 hash from text, Voice ID, and model ID as the cache key.

def build_cache_key(voice_id, model_id, text):
    payload = f"{voice_id}\n{model_id}\n{text}".encode("utf-8")
    return hashlib.sha1(payload).hexdigest()

cache_dir = Path("_tts_cache")
cache_dir.mkdir(exist_ok=True)

key = build_cache_key(voice_id, model_id, cue["text"])
cached = cache_dir / f"{key}.mp3"

if cached.exists():
    # Cache hit → skip API call
    shutil.copy(cached, output_path)
else:
    tts_generate(api_key, voice_id, cue["text"], cached, model_id)
    shutil.copy(cached, output_path)

Modifying text changes the hash, automatically invalidating old cache. Cache from test runs (generating only the first 5 cues) is reused in production runs, eliminating wasted credits.

Step 4: Build Timeline with ffmpeg {#step4-timeline}

Once per-cue MP3s are ready, combine them into a single timeline audio with ffmpeg.

Speed Adjustment (atempo) {#speed-adjustment}

When TTS audio is longer than the cue's display time, use the atempo filter to adjust playback speed.

def adjust_speed(input_path, output_path, tempo):
    """Adjust WAV audio playback speed by tempo factor"""
    subprocess.run([
        "ffmpeg", "-y", "-hide_banner", "-loglevel", "error",
        "-i", str(input_path),
        "-filter:a", f"atempo={tempo:.4f}",
        "-c:a", "pcm_s16le", "-ar", "48000", "-ac", "2",
        str(output_path),
    ], check=True)

Speed ratio decision criteria:

English can tolerate up to 1.5x, but speech starts sounding rushed above 1.3x.

Silence Base + adelay for Absolute Timestamp Placement {#timeline-placement}

This is the key to timeline construction. YouTube dubbed audio must match the original video's length exactly. Simply concatenating TTS audio front-to-back eliminates silent gaps between cues, making the result shorter than the original video in most cases — causing the upload to be rejected.

Instead, create a silence WAV matching the full video duration as a base, then place each cue's audio at absolute positions based on SRT start times.

# Generate silence WAV matching full video duration
subprocess.run([
    "ffmpeg", "-y", "-hide_banner", "-loglevel", "error",
    "-f", "lavfi", "-i", "anullsrc=r=48000:cl=stereo",
    "-t", f"{total_duration_sec:.3f}",
    "-c:a", "pcm_s16le", "silence.wav",
], check=True)

Apply adelay filter to each cue's audio, placing it at the SRT start time (in milliseconds).

# ffmpeg filter graph example
[1:a]adelay=3200|3200[d0]    # Place cue1 at 3.2s
[2:a]adelay=8500|8500[d1]    # Place cue2 at 8.5s
[3:a]adelay=15000|15000[d2]  # Place cue3 at 15.0s

This approach ensures that even if a cue fails, subsequent timing isn't affected.

Mixdown with amix {#mixdown}

Finally, combine the silence base with all cues using the amix filter.

[0:a][d0][d1][d2]amix=inputs=4:duration=first:dropout_transition=0:normalize=0[out]

Important: Always specify normalize=0. With the default normalize=1, each input's volume gets normalized to 1/N, which with many cues (e.g., 150) results in near-silence.

For large cue counts, batch-process 30 cues at a time with staged mixing. Since filter graphs get long, pass them via -filter_complex_script through a file for safety.

:::ad

Step 5: Mastering & Quality Verification {#step5-mastering}

Gain Adjustment & Peak Limiter {#gain-limiter}

Apply gain and limiter to the timeline audio and output the final MP3.

def apply_mastering(input_path, output_path, gain_db=7.0, limit_db=-1.0):
    limit_linear = 10 ** (limit_db / 20)  # Convert dBFS to linear
    subprocess.run([
        "ffmpeg", "-y", "-hide_banner", "-loglevel", "warning",
        "-i", str(input_path),
        "-filter:a", f"volume={gain_db:.2f}dB,alimiter=limit={limit_linear:.4f}",
        "-ar", "48000", "-ac", "2",
        "-c:a", "libmp3lame", "-b:a", "192k",
        str(output_path),
    ], check=True)

• volume=7.0dB: TTS audio tends to be quieter than original video, so boost it
• alimiter: Prevent clipping by limiting peaks to -1.0 dBFS

Quality Check via Report {#quality-check}

Verify generation results with a JSON report.

{
  "input_cues": 171,
  "ok_cues": 170,
  "silenced_cues": 0,
  "failed_cues": 0,
  "skipped_empty_cues": 1,
  "cache_hits": 5,
  "duration_ok": true,
  "max_ratio": 1.28
}

Three key points to check:

• failed_cues = 0: All cues generated successfully
• silenced_cues = 0: No cues filled with silence
• duration_ok = true: Output MP3 length matches the original video

As a final check, verify no decode errors with ffmpeg.

ffmpeg -v error -xerror -i output_dub.mp3 -f null NUL
# exit code 0 means no issues

Step 6: Combine with BGM & SFX in Premiere Pro {#step6-premiere}

The MP3 from Step 5 contains only TTS audio — no BGM (background music) or SFX (sound effects). Here we leverage Premiere Pro's edited timeline.

By adding dubbed audio tracks to the original video's editing project, you can export both the regular video and dubbed audio from the same timeline.

The export procedure is as follows.

1. Japanese video export: Enable main audio (A1) + BGM (A2) and export as video (.mp4) normally
2. English dubbed audio export: Mute main audio (A1), export audio-only (.mp3) with English audio (A3) + BGM (A2)
3. Korean dubbed audio export: Similarly export with Korean audio (A4) + BGM (A2)

The final output is these 3 files.

• video_name.mp4 — Video with Japanese audio (upload to YouTube)
• video_name_en_dub.mp3 — English dubbed audio (includes BGM+SFX)
• video_name_kr_dub.mp3 — Korean dubbed audio (includes BGM+SFX)

With this approach, you only need to toggle track mutes to export each language's audio, so adding more languages barely increases the workload. When viewers switch languages, they get a natural experience where "only the voice changes, BGM and SFX stay the same."

Furthermore, since the original video and all language dubbed audio tracks are on the same timeline, you can also export Shorts with dubbed audio included. No need to prepare separate audio for Shorts — supporting multilingual Shorts at scale is a major advantage.

Step 7: Upload to YouTube Studio {#step7-upload}

1. Open the target video's edit page in YouTube Studio
2. Add the target language from the "Subtitles" tab
3. Select "Add dub"
4. Upload the final MP3 created in Step 6

YouTube dubbed audio must exactly match the original video's length or the upload will be rejected. This is why Step 4 uses the timeline placement approach (placing each cue at its original timecode position with ffmpeg instead of simple concatenation). This design ensures the total duration always matches the original video, regardless of whether individual cues run slightly long or short.

Viewers can switch audio languages from the video settings menu (gear icon).

Cost & Usage Estimates {#cost-estimation}

ElevenLabs' eleven_flash_v2_5 model costs 0.5 credits per character.

Actual Cost (11-Minute Video)

Here are the actual credits consumed when dubbing an 11-minute video into English and Korean.

ElevenLabs uses per-character billing, so languages with higher information density per character are more cost-effective.

German tends to be pricier than English due to its longer compound words.

Cost in Japanese Yen

At 1 USD = 158 JPY, dubbing an 11-minute video into English + Korean costs:

Even the Starter Plan covers 2 languages for about ¥175 per 11-minute video. With 30,000 monthly credits, you can process 4–5 videos of similar length per month.

Cost Reduction Tips

The key to cost reduction is reducing text character count. Using contractions ("do not" → "don't") and cutting verbose expressions ("Furthermore" → "Also") can achieve 5–10% savings. Changing the model or audio format does not affect credit consumption.

Conclusion {#conclusion}

This article presented a workflow for automatically generating multilingual dubbed audio using ElevenLabs API combined with Python + ffmpeg.

Here's a recap of the full flow.

1. Generate Japanese text with Premiere Pro or Whisper, then preprocess and refine with Python + Claude
2. Create TTS-optimized dubbing subtitles with Claude translation
3. Generate per-cue MP3 audio with ElevenLabs API
4. Build an absolute-timestamp timeline with ffmpeg's adelay + amix
5. Master with gain adjustment and limiter, output dubbed audio MP3
6. Mute the original audio in Premiere Pro and combine with BGM/SFX to create the final MP3
7. Upload to YouTube Studio as dubbed audio

This workflow has two critical elements. First, Claude's text processing (Steps 1–2): spoken language refinement, nuance-preserving translation, time-constrained text compression — these all require semantic understanding that Python scripts alone can't provide. Second, absolute timestamp placement (Step 4): by placing each cue at its original video timecode position with ffmpeg rather than simple concatenation, the output duration always matches the original video exactly. This is essential since YouTube requires dubbed audio to be the exact same length as the original.

ElevenLabs starts at $5/month and Claude is available on a free plan, making multilingual expansion accessible for individual channels. If you're looking to expand your reach to international audiences, give it a try.

That's why I built "VRCFinder" - a web service that assigns custom tags to Booth products for organized searching and browsing. In this article, I'll share the story behind its development and how it works.

:::post-link{url="https://vrcfinder.net/ja/" text="VRCFinder - VRChat Booth Search Companion"}

:::ad

:::toc

• Why I Built This
• VRCFinder Overview
• Data Collection and Custom Tags
• Key Features
• Technical Challenges
• A Research Tool for Creators Too
• Guideline Compliance
• Conclusion

:::

Why I Built This {#background}

VRChat has been growing its user base year after year, becoming increasingly prominent as a metaverse platform. I've been actively participating in tech and academic meetups hosted in VRChat, using them to stay up-to-date on the latest AI technology and development environments.

One of the most vibrant aspects of VRChat culture is "kaihan" (avatar customization). Users take a base avatar and swap outfits, add accessories, modify textures, and create a completely unique look. The creators' marketplace Booth is what drives this customization culture. Countless creators sell VRChat avatars, outfits, and accessories on Booth, creating a massive product ecosystem.

However, Booth isn't a VRChat-specific marketplace. It's a general-purpose marketplace for all kinds of products - doujinshi, music, handmade goods, and more. VRChat-related products are just one of many categories.

Because of this, when searching for VRChat outfits, non-VRC products would appear mixed in with tag and category search results. There was no way to filter by VRChat-specific criteria like compatible avatars, aesthetic style, or body type, making it time-consuming to find what you were looking for.

Booth has creators listing new products every day, making it a very active ecosystem. I'd long thought it would be convenient to organize this product data by clothing type, color, and style for easier searching.

Then in October 2025, Booth updated their scraping guidelines. Among their examples of welcomed applications was "applications that collect publicly available information for custom search and recommendation purposes." When I saw this, I knew it was exactly what I wanted to build, and I committed to developing VRCFinder. (Details on guideline compliance are discussed later.)

:::ad

VRCFinder Overview {#overview}

VRCFinder is a free web service that assigns custom tags and keywords to VRChat-related products on Booth, enabling multi-faceted searching and browsing. No account registration is required, and it works on both desktop and mobile.

An important note: VRCFinder is not a real-time search engine. It covers products released since 2022 with 500 or more likes (favorites), with data collected and analyzed periodically. Since the tag assignment analysis takes time for each product, we also limit the year range.

For checking the latest new products, going directly to Booth is the fastest option. What VRCFinder excels at is scenarios like "I want to find swimwear for summer" or "I'm planning a gothic-themed avatar customization - what outfits are out there?" It helps you efficiently find related products by style, outfit type, and other criteria when you have a specific season or customization theme in mind.

:::post-link{url="https://vrcfinder.net/ja/" text="VRCFinder - VRChat Booth Search Companion"}

Data Collection and Custom Tags {#how-it-works}

Background on Collection Criteria

The "since 2022, 500+ likes" threshold was set as a practical operational baseline. Making it too strict reduces the number of listed products, while making it too lenient increases the volume too much, slowing down analysis and reducing data update frequency. This threshold represents a balance between coverage and update speed.

Tag Generation Process

Custom tags are generated by combining multiple information sources.

1. Text Analysis: Extracts compatible avatars, outfit types, and distinctive keywords from product titles, registered tags, and descriptions
2. Image Analysis: Determines color and style (cute, cool, etc.) from thumbnail images
3. Manual Curation: Reviews automated analysis results, corrects misclassifications, and fills in missing tags

From Text Analysis to Image Analysis

Initially, tags were generated through text analysis alone - extracting outfit types and compatible avatar names from titles and descriptions. While this worked to some extent, there were limits to what text could provide.

Booth product pages include the seller-set title, tags, and description. However, information that can be gleaned from visual appearance - like outfit style (cute, cool, etc.), main color, decorative features, and body type impression - is rarely explicitly stated on product pages. Sellers don't typically write "this outfit is pink with a cute aesthetic."

That's where thumbnail image analysis came in. By analyzing images, we can assign tags for outfit type, style, visual characteristics, color, decorations, and body type - objective information that isn't even registered on the Booth product page itself. This enables searches like "gothic outfits" or "cool-toned long coats" based on abstract visual concepts.

Key Features {#features}

Custom Tag and Keyword Search

Search across products using custom tags and keywords that don't exist on Booth. You can find products using intuitive terms like style tags ("cute," "cool," "gothic," "Japanese-style") and item type tags ("mini skirt," "long coat," "maid outfit," etc.).

Compatible Model Directory

Browse products organized by popular VRChat avatar models. Simply select your avatar to efficiently find outfits and accessories designed for it.

Category and Tag Directory

We provide organized category and tag directory pages. Even if you don't know what tags are available, you can simply tap on interesting tags from the list to browse related products.

Style, Body Type, and Color Filters

Filter by visual aesthetic (style), avatar body type, main color, and other criteria. Search works not only for outfits but also for worlds. This is especially useful when you have a customization theme in mind - for example, if you want a "blue-themed coordination," just select blue in the color filter to find blue outfits and worlds together. Combining multiple criteria helps you narrow down to items that match your vision more closely.

:::ad

Technical Challenges {#technical}

Here are some of the real challenges I encountered during development and how I addressed them.

Obtaining Neutral Product Names

On Booth, creators sometimes run limited-time sales, and it's common practice to prepend sale text like "[50% OFF]" or "[ON SALE]" to the product name during the promotion.

While this is helpful information for buyers, displaying it as-is in VRCFinder's product list would push the actual product name out of view, frequently breaking the layout. Plus, when the sale ends, the name reverts to normal, making the display inconsistent.

To handle this, I implemented processing to detect and hide sale-related text from the list display.

Unifying Tag Variations

Some creators diligently register detailed tags for their products. However, the same concept often appears under different spellings.

• "Angel ring" and "Halo"
• "Gloves" and "Mittens"
• "Horns" and "Antlers"
• "Modular Avatar" and "ModularAvatar"
• "Magic wand" and "Magic staff"

Treating these as separate tags would fragment search results too much. It would be a shame if someone searching for "halo" missed products tagged as "angel ring." VRCFinder addresses this with a synonym dictionary that merges equivalent tags.

Handling Model Name Variations

The spelling variation issue also affected compatible avatar model listings. For example, the popular model "Lapwing" appears in various katakana spellings across different creators' listings.

This is one of the subtle reasons searching on Booth can be frustrating. Searching for the official name won't find products registered under alternative spellings. VRCFinder creates a variation dictionary for each compatible model to ensure all spelling variants are properly captured.

A Research Tool for Creators Too {#for-creators}

VRCFinder originally started as a tool I built for my own asset creation research.

Since custom tags enable cross-cutting product browsing, it doubles as a convenient research tool for creators.

• Trend Analysis: See what aesthetic styles are popular for outfits
• Competitive Research: Check how many products exist in a specific category
• Niche Discovery: Find categories with few products
• Target Avatar Selection: Gauge which avatars have the highest demand

By focusing on popular products with 500+ likes, it's also useful for understanding design trends and what users favor. As a result, it's become a handy search tool not just for creators but for buyers as well.

Guideline Compliance {#guidelines}

VRCFinder's data collection follows Booth's guidelines and their revised scraping guidelines (October 10, 2025), and is limited to publicly available information.

Among Booth's examples of welcomed applications is "applications that collect publicly available information for custom search and recommendation purposes," and VRCFinder operates in line with this policy.

Reference: Booth Guidelines / About the Revised Scraping Guidelines (October 10, 2025)

:::ad

Conclusion {#conclusion}

What started as a desire to more efficiently research Booth product data as a VRChat asset creator has taken shape as VRCFinder.

Booth has an incredible selection of products. VRCFinder adds search dimensions on top of that ecosystem. By enabling searches across style, color, body type, and compatible models, it helps connect you with your ideal items.

I'll continue working on expanding listed products and improving tag accuracy. Please note that since VRCFinder displays periodically collected data, always check the Booth product page for the latest pricing and availability information.

:::post-link{url="https://vrcfinder.net/ja/" text="VRCFinder - VRChat Booth Search Companion"}

"The Miliastra Wonderland tutorial videos use English UI and I can't follow along..."

Sound familiar? Genshin Impact's "Miliastra Wonderland" is an amazing UGC (User-Generated Content) feature, but since the official tutorials use English UI, many Japanese-speaking users struggle to find the corresponding nodes in their Japanese interface.

This article provides screenshots of every node configuration from the tutorial videos, captured in the Japanese UI. Use it alongside the videos for a smoother learning experience.

Related Links:

• Miliastra Wonderland Official Site
• Miliastra Wonderland Official X (formerly Twitter)
• Miliastra Wonderland Official YouTube

:::toc

• What Is Genshin - Miliastra Wonderland?
• About Creator Level
  • 8 Major Features Unlocked
  • Features Unlocked/Expanded at Each Level
  • How to Level Up
• About the Tutorial Videos
• Build Your First Wonderland Component
  • 2. Setting and Modifying Custom Variables
  • 4. Building a Player Node Graph
• Build Your First Wonderland
  • 2. Basic Motion Devices
  • 3. Effects
  • 4. Skills and Jobs
  • 5. Monster Status Presets
  • 6. Collision and Interaction
  • 7. Logic Design
  • 8. Building the Wonderland
  • 9. Interface
• Summary

:::

:::ad

What Is Genshin - Miliastra Wonderland? {#about-realm}

"Genshin Impact - Miliastra Wonderland" is a UGC (User-Generated Content) feature added to Genshin Impact on October 22, 2025. It lets you create original games using Genshin's assets through a visual scripting system.

Getting Started

1. Complete the Genshin Impact prologue
2. The "Miliastra Wonderland" mode becomes unlocked
3. Select "My Wonderland"
4. Start node editing in the editor

Node editing opens in a separate window where you connect visual nodes to build game logic.

:::ad

About Creator Level {#creator-level}

In Genshin's Miliastra Wonderland, some features require a "Creator Level" to access. Levels range from 1 to 5, with various features being unlocked or expanded at each level.

8 Major Features Unlocked {#creator-level-features}

The following 8 features are progressively unlocked and expanded based on your Creator Level:

1. Cloud Save - Cloud storage for wonderland data
2. Inspiration Support Program - Creative support program
3. Custom Text Display - Display custom text content
4. Performance Box - Performance optimization features
5. Achievements - Implementation of achievement elements
6. In-Stage Data - Stage data management
7. Ranking - Ranking system
8. Rank System - Player rank features

Features Unlocked/Expanded at Each Level {#creator-level-rewards}

How to Level Up {#level-up-method}

Miliastra Wonderland has a "Wonderland Level" earned by playing wonderlands, but this is separate from "Creator Level." Playing games won't increase your Creator Level. To level up, you need to complete Growth Tasks.

Reaching Creator Level 2

Complete two quizzes in the Creator Portal: "Wonderland Component Quiz Challenge" and "Wonderland Stage Quiz Challenge." The questions are easy to answer if you've watched the tutorials, so aim for Level 2 first.

Level 3 and Above

You'll need to publish your created wonderland and have a certain number of players try it. Joining the official Discord to connect with other creators and share ideas is recommended.

About Reward Changes

Creator Level rewards may be updated in the future. For example, in the October 31, 2025 adjustment, the tab option that displays "Open" when opening treasure chests was moved from a Lv.3 reward to Lv.2.

Reference: About Creator Level and Benefit Adjustments

:::ad

About the Miliastra Wonderland Tutorial Videos {#tutorial-videos}

Tutorial videos for Genshin Impact's Miliastra Wonderland are available on the official Creator Portal, YouTube, and X accounts.

Two video series available as of October 2025:

• "Build Your First Wonderland Component" - Learn the basics by creating coins and building a system where collecting 5 coins clears the stage
• "Build Your First Wonderland" - Learn to create and connect complex components like enemy spawning, leveling up, and treasure chest mechanics

Both are well-structured tutorial videos, but since they're presented in English UI, finding the same nodes in Japanese can be surprisingly difficult.

This article supplements the official tutorials by compiling node configuration screenshots from the Japanese UI version. Refer to these images alongside the videos for a smoother learning experience.

:::ad

Build Your First Wonderland Component {#first-component}

2. Setting and Modifying Custom Variables {#component-02}

Official Tutorial Video https://www.youtube.com/watch?v=tXXd-y4qWnE

Node: "Prefab - Score on Pickup"

4. Building a Player Node Graph {#component-04}

Official Tutorial Video https://www.youtube.com/watch?v=9tzrJLzuDGI

Node: "Player - End Wonderland"

:::ad

Build Your First Wonderland {#first-realm}

2. Basic Motion Devices {#realm-02}

Official Tutorial Video https://www.youtube.com/watch?v=1EswERt2m3c

Node: "Activate Cobblestone"

Node: "Collapse Cobblestone"

3. Effects {#realm-03}

Official Tutorial Video https://www.youtube.com/watch?v=I8F0bvl4jKY

Node: "Light the Torch"

4. Skills and Jobs {#realm-04}

Official Tutorial Video https://www.youtube.com/watch?v=yQoQn5IzJqc

Node: "Acquire Combat Ability"

5. Monster Status Presets {#realm-05}

Official Tutorial Video https://www.youtube.com/watch?v=It5UWLvC9fg

Node: "Reach Lv40"

Node: "Reach Lv90"

Node: "Unlock Treasure Chest"

Node: "Open Treasure Chest"

:::ad

6. Collision and Interaction {#realm-06}

Official Tutorial Video https://www.youtube.com/watch?v=ZrlBqOkgLmE

Node: "Light the Torch" (with variable addition)

Node: "Unlock Weapon"

Node: "Pick Up Key to Open Gate"

Node: "Open Wooden Gate"

Node: "Exit Wonderland"

7. Logic Design {#realm-07}

Official Tutorial Video https://www.youtube.com/watch?v=cL1VYOA5zDg

Node: "Acquire Combat Ability" (Hilichurl spawn version)

Node: "When Reaching Lv40" (Hilichurl version)

Node: "Open Treasure Chest" (key spawn version)

Node: "Player End Wonderland" (with effects + exit device activation)

:::ad

8. Building the Wonderland {#realm-08}

Official Tutorial Video https://www.youtube.com/watch?v=vHCWOKq8kTI

Node: "Activate Cobblestone" (5 cobblestones simultaneous activation)

Node: "Player - End Wonderland" (with effects added)

9. Interface {#realm-09}

Official Tutorial Video https://www.youtube.com/watch?v=Z-f88zYNrlo

Nodes: "Popup - Wonderland Description", "Textbox - Find Weapon", "Textbox - Find Key"

*Create 3 nodes with the same structure, only changing the prefab index

:::ad

Summary {#summary}

Genshin Impact's "Miliastra Wonderland" is a groundbreaking UGC feature that lets you create original games using assets from the major title Genshin Impact. The official tutorial videos are very comprehensive, but since they're presented in English UI, finding the same nodes in the Japanese UI can sometimes be a challenge.

This article covered the node configuration screens in Japanese UI for both the "Build Your First Wonderland Component" and "Build Your First Wonderland" tutorial series.

For Those Just Getting Started with Miliastra Wonderland

1. Start with the tutorials: Learn the basics with the official "Build Your First Wonderland Component" series
2. Aim for Creator Level 2: Pass two quizzes to reach Lv.2 and unlock many more features
3. Use this article as a reference: Refer to the screenshots in this article while watching the videos for smoother progress

Tips for Creating

In Miliastra Wonderland, you can freely create games using Genshin's beautiful assets. The official Discord lets you connect with other creators and share your work, so don't hesitate to get involved.

Level up your Creator Level, master the various features, and create captivating wonderlands. I hope this article helps you on your content creation journey in Genshin Impact's Miliastra Wonderland.

You could apply a global hue/saturation adjustment, but that changes skin tones and linework too, so it doesn't work for purely comparing color schemes. It's hard to meet that specific need of "keep the skin and linework as-is, just change the clothes and hair."

That's why I built a tool that lets you load an image in your browser, lock the colors you want to keep, and generate new color patterns with a single click.

*Sample illustration is fan art drawn by the site owner

:::post-link{url="/en/tools/character-color-pattern-maker/" text="Character Color Pattern Maker"}

:::ad

:::toc

• The Hassle of Creating Color Patterns
• What Is This Tool?
• Features
• How to Use
• Palette Generation Modes
• Using Color Pattern Sheets
• Secure Browser-Based Processing

:::

The Hassle of Creating Color Patterns {#introduction}

After finishing an illustration, it's common to wonder "what would it look like in different colors?" But duplicating layers and swapping colors part by part is honestly a chore.

Applying a global color adjustment is another option, but it changes skin tones and linework too, defeating the purpose of a pure color comparison. Even when you just want to change the clothes and hair while keeping skin and linework intact, doing it manually is time-consuming.

To solve this problem, I built this tool. It generates color patterns with a single click, and sometimes you'll stumble upon unexpectedly interesting color combinations.

What Is This Tool? {#what-is-ccpm}

It's a browser-based tool that lets you upload an illustration and generate color patterns with a single click. Its standout feature is the ability to lock colors you don't want to change (skin, linework, etc.) and exclude colors you don't need (background, etc.).

This means you can keep the character's skin and hair colors untouched while only changing the clothing and accessory colors. You can try patterns based on color theory or discover unexpected combinations through random generation.

:::post-link{url="/en/tools/character-color-pattern-maker/" text="Character Color Pattern Maker"}

:::ad

Features {#features}

• Analyzes illustrations using a perceptually uniform color space (CIELAB) to extract key colors
• Automatic linework detection for easily locking outline colors
• Click on the image to lock colors you want to keep and exclude colors you don't need
• Multiple palette generation modes including random exploration, color theory, pastel, and more
• Real-time preview of generated color schemes
• Download color pattern sheets as PNG images showing before-and-after illustrations with key color codes
• All processing happens within the browser - illustration data is never sent externally
• Simple drag-and-drop interface

How to Use {#how-to-use}

The basic workflow is 3 steps.

1. Upload Your Image

Drag and drop the illustration you want to recolor onto the left side of the screen, or click to select a file. Character illustrations with transparent backgrounds work best.

2. Lock and Exclude Colors

Once the image is analyzed, set which colors you want to keep unchanged. The most intuitive approach is to click directly on the original image to "lock" specific colors.

Start by clicking on skin and hair colors in the preview to lock them. Then exclude background colors. Finally, locking the auto-detected linework color will improve accuracy.

3. Generate and Download Color Patterns

Click "Random Exploration" or any color pattern button to transform all colors except the locked and excluded ones into a new scheme. Clicking the same button repeatedly generates different patterns each time. When you find a color scheme you like, save it with the "Download Color Sheet" button.

Palette Generation Modes {#palette-types}

Multiple modes are available so you can try a wide variety of color patterns.

• Random Exploration: Each click suggests an entirely new color combination. You might discover something unexpected.
• Color Theory Mode: Generates palettes based on color theory principles like analogous and complementary colors. Results feel cohesive yet fresh.
• Pastel: Transforms the entire palette into soft, gentle tones. Great for achieving a dreamy, cute aesthetic.
• Vibrant: Boosts saturation and brightness for vivid, lively color schemes. Works well for pop-style, energetic characters.
• Others: Try "Blend" mode for mixed colors, "Creative" mode for unconventional combinations, and more.

Using Color Pattern Sheets {#advanced-tips}

When you find a color scheme you like, press the "Download Color Sheet" button.

The downloadable color pattern sheet lets you compare before-and-after illustrations at a glance, complete with key color codes.

• As design reference: Use as comparison materials when proposing new color schemes to your team or clients.
• Social media sharing: Perfect for asking followers "which color scheme do you prefer?"
• Self-review: By comparing different patterns side by side, you can discover your own color preferences and new possibilities.

Secure Browser-Based Processing {#tech-info}

This tool is designed with privacy as the top priority. From image uploading to color analysis, palette generation, and image downloading, all processing happens entirely within your browser.

Your illustration data is never sent to or stored on any external server. Once the page is loaded, basic functionality even works offline. You can safely use it with unpublished work.

:::post-link{url="/en/tools/character-color-pattern-maker/" text="Character Color Pattern Maker"}

That's why I built "Hand Trace Camera" - a tool that overlays your rough hand sketch semi-transparently on the camera feed, letting you capture reference photos at exactly the pose and angle you need.

All processing happens entirely within the browser, so your images and photos are never sent externally.

:::post-link{url="/en/tools/hand-trace-camera/" text="Hand Trace Camera"}

:::ad

:::toc

• The Challenge of Reference Photography
• What Is This Tool?
• Features
• How to Use
• Runs Entirely in Your Browser

:::

:::ad

The Challenge of Reference Photography {#introduction}

Hands are one of the most structurally complex parts of the human body. Each of the five fingers has three joints, and when you factor in wrist angle, there are nearly infinite pose variations.

Common frustrations with reference photography:

• It's physically difficult to photograph your own hand at the angle you want to draw
• Pressing the shutter button throws off your pose
• It's hard to compare your sketch with your actual hand positioning while shooting
• Photographing your non-dominant hand feels unnatural

"Hand Trace Camera" solves these problems with an overlay approach that superimposes your rough sketch on the camera feed.

What Is This Tool? {#what-is-htc}

It's a tool that overlays your rough hand sketch semi-transparently on the camera feed, allowing you to capture the perfect reference photo.

It comes in handy when you've decided on a hand pose but can't quite nail the exact form, when you need to check subtle finger angles, or when you want to accurately depict how a hand grips an object.

Since you can freely adjust the sketch's opacity, you can compare your real hand with the overlay and find the optimal angle and pose.

:::post-link{url="/en/tools/hand-trace-camera/" text="Hand Trace Camera"}

:::ad

Features {#features}

• Overlay your uploaded image semi-transparently on the camera feed and capture while checking in real time
• Freely adjust opacity from 0-100% for fine control over the balance between sketch and live view
• Fine-tune size (10-500%), position (X/Y axis), and rotation (-180 to 180 degrees) to perfectly align your sketch with your actual hand
• On mobile devices, use one finger to move and two fingers to pinch-zoom and rotate
• Supports front/back camera switching (on devices with multiple cameras)
• Saves as high-resolution 900x1200 pixel PNG images in a 3:4 portrait aspect ratio
• All processing happens within the browser - images and photos are never sent to external servers
• Adjustments are instantly reflected in the preview for a smooth, stress-free experience

How to Use {#how-to-use}

The basic workflow is 3 steps.

1. Upload Your Rough Sketch

Drag and drop your rough hand sketch, or click to upload. Supports PNG, JPG, and WEBP formats.

2. Adjust the Image and Start the Camera

Adjust opacity, size, position, and rotation so your sketch aligns with your real hand. When ready, click the "Start Camera" button.

3. Match Your Pose and Capture

Pose your real hand to match the sketch and click the "Capture" button. You can preview the captured image before downloading it.

On mobile devices, you can adjust the image intuitively by touching the screen.

:::ad

Runs Entirely in Your Browser {#privacy}

This tool is designed to handle all processing entirely within your browser. No special software installation is required.

From image uploading to camera feed processing to image compositing, everything runs in the browser. Your uploaded sketches and captured photos are never sent to or stored on any external server.

:::post-link{url="/en/tools/hand-trace-camera/" text="Hand Trace Camera"}

I recently released AnimSprite Pixelizer on Booth, itch.io, and Steam — a tool for 2D game development that batch-converts hand-drawn character walk animations (created in tools like CLIP Studio) to a common pixel size and exports them as sprite sheets.

With Booth and itch.io, you can start selling right after registering your product information and images. Steam, however, requires passing a review by the support team first.

For AnimSprite Pixelizer, the app itself passed review on the first try, but I was asked to make corrections to the product images several times. In this article, I'll cover the 14 images required for Steam and key design pitfalls to avoid.

:::post-link{url="/en/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::ad

:::toc

• Why Are 14 Images Needed?
• Required Image Checklist
• Design Pitfalls to Avoid
• Tips for Efficient Production

:::

:::ad

Why Are 14 Images Needed? {#why-so-many-images}

"Preparing store images is such a pain!!"

Every creator who's sold on Steam has said this at some point. And for good reason — you need to prepare at least 14 images for Steam's review.

"Why so many?!" If you're wondering, take a closer look at Steam:

• Small images displayed in search result lists (Small Capsule)
• Featured images at the top of the front page (Main Capsule)
• Tall images displayed during seasonal sales (Vertical Capsule)
• The hero image displayed at the top when you select a game in your library, alongside play time

You need to prepare all of these.

What's more, these images have strict pixel-exact size requirements. For example, the Header Capsule is 920x430px and the Small Capsule is 462x174px. They must be exactly these dimensions. SteamWorks assigns images based on the pixel size of the dropped file, so even a slight size difference will result in rejection.

:::ad

Required Image Checklist {#image-checklist}

I've created a checklist of all required images. Use this as a reference while designing in Photoshop or your preferred image editor.

The graphic assets needed for Steam store registration fall into three categories: "Store Assets," "Screenshot Assets," and "Library Assets." Use the checklist below as your guide.

Sizes are as of July 2025.

Store Assets

Screenshot Assets

• Screenshots: 1920x1080 (recommended) x minimum 5

Library Assets

Other

• Community Icon: 184x184

:::ad

Design Pitfalls to Avoid {#design-cautions}

Just like image sizes, there are design-related rejection criteria to watch out for.

Warning A: "No Text Besides Your Logo!"

When designing, it's tempting to add descriptive text, but any text other than your logo will result in rejection. Even small text like the examples below is not allowed.

Marketing copy, quotes, or any text information beyond your logo will cause your submission to fail.

Warning B: "Maximize Legibility!"

In the case above, I embedded UI screenshots to convey the app's workflow, but this was rejected. After removing the UI images and displaying elements larger, it passed.

Looking at it objectively, the revised version clearly has better legibility. Remember that these images often appear as thumbnails, and design accordingly.

Tips for Efficient Production {#conclusion}

Following the guidelines in this article should help you register your Steam store information smoothly.

The Steam support team provides quite specific feedback about what needs to be fixed, which was very helpful. While there are many articles explaining image sizes, there's almost no information about design rejection criteria, so I hope this serves as a useful reference.

A good workflow is to start designing with the Header Capsule (920x430), save it as a new file, change the canvas size, adjust element positions, save as another new file, and repeat. This way, you can efficiently produce multiple image variants by mainly adjusting positions.

The most tedious parts of the Steam store submission process are probably the tax information registration when creating your SteamWorks account and creating the store images. Get past these hurdles and get your game released!

Also, for guidance on which languages to localize for when selling on Steam, check out my previous article.

And give AnimSprite Pixelizer a look too. It's great for 2D game developers who also do their own art.

:::post-link{url="/en/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::ad

I recently released AnimSprite Pixelizer on Booth, itch.io, and Steam — a tool for 2D game development that batch-converts hand-drawn character walk animations (created in tools like CLIP Studio) to a common pixel size and exports them as sprite sheets.

After completing the app, I decided to tackle localization as well.

The key question that comes up is: "Which languages should I localize into?" In this article, I'll analyze the "Steam Hardware & Software Survey" data that Steam publishes monthly to help indie and small-team developers decide which languages to prioritize.

:::post-link{url="/en/product/animsprite-pixelizer/" text="AnimSprite Pixelizer"}

:::post-link{url="https://store.steampowered.com/hwsurvey/" text="Steam Hardware & Software Survey"}

:::ad

:::toc

• Current Steam Language Data
• Top 10 Languages and Market Trends
• Localization Priority Rankings
• Practical Implementation Tips
• Designing for Localization from Day One

:::

:::ad

Current Steam Language Data {#steam-language-data}

According to the latest data from Steam's official "Hardware & Software Survey," the current language distribution among Steam users looks like this. While participation is voluntary, it remains the most reliable official statistic available for the Steam platform.

Steam Hardware & Software Survey: June 2025

Top 10 Languages and Market Trends {#top-languages}

Here's the current ranking of Steam users by language:

Key Market Trends

Growing language markets:

• Simplified Chinese: +2.61% (highest growth). Likely driven by the maturing PC gaming market in China.
• Russian: +0.43%. A market known for strong affinity with indie games.
• Korean: +0.27%. A market with passionate gaming communities.
• Traditional Chinese: +0.07%
• Thai: +0.07%

Declining language markets:

• English: -1.93% (largest decline)
• Spanish (Spain): -0.40%
• Portuguese (Brazil): -0.35%
• German: -0.19%

Japanese users account for just 2.59% — a reminder of how vast the global market is.

The most noteworthy insight is that English and Simplified Chinese combined cover over 63% of all users. If you're going to localize, supporting these two languages is practically essential.

Simplified Chinese users have been surging in recent years. In the August 2024 survey — driven by the massive buzz around "Black Myth: Wukong" — Simplified Chinese actually surpassed English to claim the top spot.

:::ad

Localization Priority Rankings {#localization-strategy}

Let's think about which languages to prioritize with limited development resources.

Tier-Based Priority Framework

Tier 1 (Essential)

• English (36.31%) — Still the largest user base and the global standard language
• Simplified Chinese (26.73%) — Rapidly growing with extremely high future potential

These two languages alone cover over 63% of users. For small teams and solo developers, focusing on these first is the most efficient approach.

Tier 2 (High Priority)

• Russian (9.46%) — Steady growth trend, large user base
• Spanish (Spain) (4.34%) — Declining but still a major market. Also potentially reaches the vast Spanish-speaking Latin American audience.
• Portuguese (Brazil) (3.87%) — An important South American market

Tier 3 (Medium Priority)

• German (2.86%) — Major European market
• Japanese (2.59%) — High purchasing power, quality-conscious market
• French (2.33%) — European and Canadian market

Tier 4 (Emerging Markets / Future Potential)

• Korean (1.48%) — Growing (+0.27%), well-developed gaming culture
• Traditional Chinese (1.39%) — Taiwan and Hong Kong market
• Thai (0.88%) — Growing Southeast Asian market

Phased Localization Strategy

For indie developers, a phased approach like the following is realistic:

1. Phase 1: Your native language + English (developer's language + global standard)
2. Phase 2: Add Simplified Chinese (target the largest growing market)
3. Phase 3: Add Russian and Korean (capture growing major markets)
4. Phase 4: Gradually add other Tier 2-3 languages (Spanish, Portuguese, etc.)

Practical Implementation Tips {#practical-tips}

Font Support

Chinese, Korean, Japanese, and Thai each require dedicated fonts. Check in advance whether web fonts or system fonts will work, or if you need to bundle font files with your application.

Text Length Variation

Text length varies significantly across languages. UI design needs to be flexible enough to handle these differences.

• Tend shorter: Japanese, Chinese, Korean (logographic characters)
• Tend longer: German, Russian (compound words and grammatical cases)

Test your buttons and text boxes with longer text strings in advance to avoid overflow issues.

Documentation (FAQ)

Localizing your app means you may receive inquiries in various languages. Responding to every question individually is a huge drain on time. Prepare anticipated questions and answers as documentation, translate them into supported languages, and publish them. This lets users self-serve and significantly reduces developer support burden.

Right-to-Left (RTL) Languages

Languages like Arabic and Hebrew are written right-to-left (RTL) and may require flipping the entire UI layout. While these aren't in the top tiers currently, keep it in mind if you might support them in the future.

Designing for Localization from Day One {#conclusion}

This analysis shows that ideally supporting the top 10 ranked languages would let you reach the vast majority of Steam users.

With generative AI tools like ChatGPT, Claude, and Gemini now available, high-quality translation is more accessible than ever. For UI and system text, AI translation alone can deliver quite good results. Of course, for story text and character dialogue that affect immersion, professional translators or native speaker review is still recommended.

The key takeaway is to design for localization from the very start of development.

Instead of hardcoding text directly in your program, load it from per-language CSV or JSON files. This makes adding new languages later much easier.

There are considerations like font preparation and UI design that prevents layout breakage from text length changes, but the implementation barrier is steadily dropping thanks to AI advances. If you're aiming for the global market, I encourage you to consider localization seriously.

:::ad

In my previous article, I covered the basics of learning Godot. This time, I completed the Udemy course "Godot4: Build a 2D Action-Adventure Game" and tackled building a practical 2D action-adventure game.

The course systematically covers everything from basic player controls to NPC dialogue, puzzles, and combat systems. This article distills the key Godot features and concepts I learned along the way.

:::ad

:::toc

• Course Overview
• Key Godot Features & Concepts
  • Process Mode: Pause Control
  • CharacterBody2D Motion Mode
  • InputMap: Key Binding Management
  • Input Processing Methods
  • move_and_slide vs move_toward
  • Groups: Flexible Object Identification
  • Collision Layers/Masks
  • Terrains: Auto-Tiling
  • Marker2D: The Go-To Manager Node
  • Editable Children & Scene Inheritance
  • Autoload: Cross-Scene Data Management
  • White Flash with modulate
  • AnimatedSprite2D vs AnimationPlayer
• Conclusion

:::

:::ad

Course Overview {#course-overview}

"Godot4: Build a 2D Action-Adventure Game" builds a 2D action-adventure game from scratch. As you work through it, questions like these get answered naturally:

• How do you implement area transitions?
• How do you handle pushable objects?
• How do you persist opened treasure chest states?
• How do you manage NPC dialogue?
• How do you implement a door that requires multiple switches?
• How do you create a damage flash effect?

The curriculum covers 8-directional player movement, Terrains-based auto-tiling, Y-Sort for draw order, RigidBody2D physics puzzles, dialogue systems, Autoload for data persistence, and enemy AI with knockback combat.

It's a step up in difficulty from the beginner course I covered previously, but packed with knowledge you actually need for real game development. Udemy runs sales frequently — add it to your wishlist and grab it on sale.

:::post-link{url="https://trk.udemy.com/Oex4on" text="Godot4: Build a 2D Action-Adventure Game (Udemy)"}

:::ad

Key Godot Features & Concepts {#godot-deep-dive}

Here's a deep dive into the features I found most important during the course.

Process Mode: Pause Control {#process-modes}

"Freeze enemies and the player during NPC dialogue, but keep the dialogue window interactive" — a common game development requirement. Godot handles this with per-node Process Mode settings.

• Pausable (default): Stops when get_tree().paused = true. For game world objects like players and enemies.
• Always: Ignores pause state. For active NPCs, UI, and background music.
• When Paused: Only runs during pause. For pause menu UI.

In Unity, you'd set Time.timeScale = 0 and manually use Time.unscaledDeltaTime in individual scripts. Godot's approach of setting Process Mode per node is far more elegant.

Implementation: pausing the game during dialogue

The scene pauses during conversation and resumes when dialogue ends

# NPC.gd
# Set this NPC's Process Mode to "Always" in the inspector

func _process(delta):
    if Input.is_action_just_pressed("interact") and can_talk:
        if is_dialog_active():
            close_dialog()
            get_tree().paused = false
        else:
            open_dialog()
            get_tree().paused = true

The NPC keeps running while the rest of the game pauses, allowing safe dialogue open/close handling.

:::ad

CharacterBody2D Motion Mode {#motion-modes}

CharacterBody2D has a Motion Mode setting that switches physics behavior based on your game's genre. Always check this at project start.

• Grounded (default): Gravity applies, is_on_floor() works. For platformers and side-scrollers.
• Floating: No gravity, no floor concept. For top-down action games and shooters.

# Player.gd (Motion Mode set to "Floating")
extends CharacterBody2D

@export var speed: float = 200.0

func _physics_process(delta):
    var direction = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = direction * speed
    move_and_slide()

Wrong settings cause unexpected gravity or broken floor detection — an easy mistake to make.

:::ad

InputMap: Key Binding Management {#input-map}

In Unity, it's tempting to write Input.GetKey(KeyCode.A) directly. Godot's Input Map (Project Settings → Input Map) takes a better approach: define action names and bind keys to them. Your code uses abstract names like "move_left", making it more readable and easy to add key remapping.

func _process(delta):
    # One-shot input (moment of press)
    if Input.is_action_just_pressed("interact"):
        open_chest()

    # Continuous input (while held)
    if Input.is_action_pressed("dash"):
        speed = DASH_SPEED
    else:
        speed = NORMAL_SPEED

    # Get 4-directional input as a normalized Vector2 (very handy)
    var direction = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = direction * speed
    move_and_slide()

Input.get_vector() returns a normalized Vector2 from four actions, letting you write top-down movement in a single line.

:::ad

Input Processing Methods {#input-processing}

Once you've defined actions in InputMap, choose the right method based on input state.

:::post-link{url="https://docs.godotengine.org/en/stable/classes/class_input.html" text="Input Class Reference (Godot Docs)"}

func _process(delta):
    # One-shot actions
    if Input.is_action_just_pressed("jump"):
        if is_on_floor():
            velocity.y = JUMP_VELOCITY

    if Input.is_action_just_pressed("attack"):
        perform_attack()

    # Continuous actions
    if Input.is_action_pressed("dash"):
        current_speed = dash_speed
    else:
        current_speed = normal_speed

    # Charge: hold to build, release to fire
    if Input.is_action_pressed("charge"):
        charge_power += charge_rate * delta
        charge_power = min(charge_power, max_charge)

    if Input.is_action_just_released("charge"):
        fire_charged_shot(charge_power)
        charge_power = 0.0

A common mistake: using is_action_pressed() for shooting fires a bullet every frame. Always use is_action_just_pressed() for one-shot actions.

:::ad

move_and_slide vs move_toward {#movement-functions}

Two essential movement functions in Godot:

• move_and_slide(): The workhorse of CharacterBody2D. Moves based on current velocity and automatically handles wall/floor collisions.
• move_toward(target, delta): Gradually shifts a value toward a target. Used for smooth acceleration and deceleration.

The distinction becomes critical when implementing knockback. Here's a real problem I hit during the course:

Directly assigning velocity means the moment a player inputs movement during knockback, the knockback effect vanishes instantly. Using move_toward for gradual velocity changes lets knockback decay naturally into normal movement.

# Direct assignment — knockback disappears instantly
func move_player():
    var move_vector = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    velocity = move_vector * move_speed  # Overwrites knockback velocity

# move_toward — knockback decays smoothly
@export var acceleration: float = 500.0

func move_player():
    var move_vector = Input.get_vector("move_left", "move_right", "move_up", "move_down")
    var target_velocity = move_vector * move_speed
    velocity = velocity.move_toward(target_velocity, acceleration * delta)

# Knockback
func apply_knockback(direction: Vector2, strength: float):
    velocity += direction * strength

The second argument of move_toward specifies how much to approach the target per frame. Using acceleration * delta ensures frame-rate-independent smooth transitions.

:::ad

Groups: Flexible Object Identification {#groups}

"Did the attack hit an enemy or a pushable object?" — Godot uses groups to answer this.

Similar to Unity's Tag system, but with a crucial difference: Unity allows only one Tag per GameObject. Godot groups support multiple assignments, so an object can be both "enemies" and "damageable" simultaneously.

Setup is simple: select a node → Inspector → Node tab → Groups → add a group name. In code, use is_in_group() to check.

# Connected to player's sword Area2D
func _on_sword_area_body_entered(body: Node2D):
    if body.is_in_group("enemies"):
        body.take_damage(attack_power)
    elif body.is_in_group("pushable"):
        pass  # Handle pushable object

:::ad

Collision Layers/Masks {#collision-system}

Without proper collision organization, you'll get "the player's sword hits allies" or "enemies get stuck on each other." Godot's Collision Layers/Masks prevent this.

• Layer: Which collision layer this object exists on
• Mask: Which layers this object checks for collisions

For example, with Player (Layer 1), Enemies (Layer 2), and Weapons (Layer 3):

# Weapon's Mask only detects enemies, so only enemies trigger this
func _on_weapon_area_body_entered(body):
    if body.is_in_group("enemies"):
        body.take_damage(attack_power)

Name your layers in Project Settings → Layer Names to make inspector setup much clearer.

:::ad

Terrains: Auto-Tiling {#terrains}

Godot's Terrains feature makes auto-tiling surprisingly easy. If you've used Rule Tiles in Unity, you'll appreciate how intuitive this is.

In the TileSet resource's Terrains tab, you visually paint which edges of each tile connect to which terrain type. Then the TileMap editor's brush tool automatically selects the right tile based on boundaries.

Handy features include: random brush (dice icon) for selecting from multiple tiles, probability control for tile frequency, and "F" key for batch-applying collision to all tiles.

:::ad

Marker2D: The Go-To Manager Node {#marker2d}

In Unity, the standard practice was attaching scripts to empty GameObjects to create "managers." In Godot, Marker2D fills this role.

Marker2D holds only position data (Transform) — the lightest 2D node available. No rendering, no physics overhead, making it perfect for scene management scripts like GameManager or PuzzleManager. Unlike Unity's empty GameObjects, it shows a crosshair marker in the editor for easy visibility.

:::ad

Editable Children & Scene Inheritance {#scene-inheritance}

Two approaches for creating variations from a base scene, each suited to different use cases:

• Editable Children: Right-click an instance → "Editable Children" to directly modify its internals (sprites, colliders, etc.). Changes only apply to that specific placement. Great for mass-producing NPCs that differ only in appearance or dialogue.
• Scene Inheritance: Create a new scene (Shopkeeper.tscn) that inherits from a base (BaseNPC.tscn). Add unique nodes and scripts while keeping parent functionality. Best for functionally different variants like a merchant NPC that can "talk" and "trade."

:::ad

Autoload: Cross-Scene Data Management {#autoload}

"Open a treasure chest, leave the area, come back — and it's closed again." The classic scene-switching data loss problem is solved in Godot with Autoload — equivalent to Unity's DontDestroyOnLoad + singleton pattern.

Register a script as Autoload in Project Settings, and it loads automatically at game start, accessible globally from any scene.

# GameManager.gd (registered as AutoLoad)
extends Node

var opened_chests: Array[String] = []
var player_hp: int = 3
var player_spawn_position: Vector2

# TreasureChest.gd
extends StaticBody2D

@export var chest_id: String  # Set a unique ID like "forest_chest_01"

func _ready():
    if GameManager.opened_chests.has(chest_id):
        play_open_animation(false)

func open_chest():
    GameManager.opened_chests.append(chest_id)
    play_open_animation(true)

Player HP, scores, inventory, quest progress — any data that needs to survive scene changes goes through Autoload.

:::ad

White Flash with modulate {#visual-effects}

A brief white flash on damage is incredibly effective player feedback. In Godot, it's trivial to implement using the modulate property.

modulate is a color value multiplied against a node and all its descendants. Default is white (1, 1, 1). Higher values = brighter, lower = darker. Changing CharacterBody2D's modulate automatically affects its child AnimatedSprite2D — no individual sprite manipulation needed.

# Player.gd
func take_damage(amount):
    # ...damage calculation...
    flash_effect()

func flash_effect():
    modulate = Color(2, 2, 2)  # Flash white
    await get_tree().create_timer(0.1).timeout  # Wait 0.1 seconds
    modulate = Color(1, 1, 1)  # Restore original

await get_tree().create_timer(0.1).timeout is a one-liner for temporary delays without adding timer nodes.

:::ad

AnimatedSprite2D vs AnimationPlayer {#animation-systems}

Godot has two main 2D animation systems, each suited to different needs.

AnimatedSprite2D

Dedicated to sprite frame animation. Best for walk cycles, attacks, idles — anything that's just swapping sprite sheet frames.

if velocity.x > 0:
    $AnimatedSprite2D.play("move_right")
elif velocity.x < 0:
    $AnimatedSprite2D.play("move_left")
else:
    $AnimatedSprite2D.stop()

AnimationPlayer

A general-purpose animation system controlling position, rotation, scale, and any property simultaneously. Similar to Unity's Animator — used for sword swings, UI animations, and camera work.

func attack():
    var player_animation: String = $AnimatedSprite2D.animation
    if player_animation == "move_right":
        $AnimatedSprite2D.play("attack_right")
        $AnimationPlayer.play("attack_right")  # Controls sword position & angle

Selection Guide

In practice, you'll typically combine AnimatedSprite2D for basic character animation with AnimationPlayer for weapon and effect animations.

:::ad

Conclusion {#conclusion}

This course reinforced how consistently Godot's design philosophy holds together. Process Mode, Motion Mode, Collision Layers — concepts are unified and solutions to common problems are straightforward.

What stands out most is how many "I wish Unity had this built-in" features come standard: Terrains, Y-Sort, move_and_slide(), and more. For Unity developers, Godot offers a compelling combination of low learning curve and development comfort.

:::post-link{url="https://trk.udemy.com/Oex4on" text="Godot4: Build a 2D Action-Adventure Game (Udemy)"}

Godot Engine is an MIT-licensed, open-source game engine first released in 2014. It surged in popularity after Unity's Runtime Fee controversy in 2023, as many developers began exploring it as an alternative.

A Udemy course I'm currently studying: "Godot4: Build a 2D Action-Adventure Game"

This article covers everything a Unity developer needs to get started with Godot: a Udemy course review, first impressions from hands-on experience, a Unity-to-Godot concept mapping table, and side-by-side code comparisons.

:::post-link{url="https://godotengine.org/" text="Godot Engine Official Website"}

:::ad

:::toc

• Godot Engine Q&A
• Udemy Course Review
• What Impressed Me About Godot
• For Unity Developers: Comparison Table
• For Unity Developers: Code Comparison
• Conclusion

:::

:::ad

Godot Engine Q&A {#godot-overview}

Before diving into Godot, I had a bunch of questions. "What's actually special about Godot?" "Isn't the node-based system complicated?" "Is GDScript even worth learning?" — if you're asking the same things, you're not alone. Here are my answers after actually getting my hands on the engine.

Q. What is Godot Engine? An open-source game engine released in 2014. Fully free under the MIT license with zero royalties. The engine core is written in C++.

Q. First impression compared to Unity and Unreal Engine? It's incredibly light. The entire engine is about 149MB as of v4.4.1. You can start developing in Godot before Unity's installer even finishes loading. The trade-off is that community resources are still growing.

Q. What notable games were made with Godot? "Backpack Battles," "Buckshot Roulette," and "Unrailed 2: Back on Track," among others. Some surprisingly well-known titles in there. Check the official Showcase page for a full list — the annual highlight videos are especially worth watching.

Q. What is the node-based system? A system where you build functionality through a hierarchy of nodes. For example, a physics-enabled character would have a CharacterBody2D node with AnimatedSprite2D (animation) and CollisionShape2D (collision) as children. It's similar to attaching components in Unity, so Unity developers should find it familiar.

Q. Doesn't a node-based system limit flexibility? You can extend nodes with custom classes, so the coding freedom is the same as Unity or Unreal Engine.

Q. What is GDScript? Godot's own Python-based scripting language. While C# is also supported, starting with GDScript is far more efficient for learning. The syntax is simple and the engine integration runs deep.

:::ad

Udemy Course Review {#udemy-godot-course}

When learning a new engine, I like to complement official documentation with multiple video tutorials. This time I took the "Godot Engineで気軽に2Dゲームを作ろう" course on Udemy and completed it in about 6.5 hours.

The course starts with fundamentals (project setup, understanding nodes and scenes, Windows/Web builds) then moves into building an original 2D game. Each video is 1–5 minutes, keeping things snappy and focused.

The completed game from the course

The highlight was procedural maze generation using a recursive backtracker algorithm. You also implement UI, data saving, a shooting system, and enemy AI — building a full game cycle from title screen to area selection to maze and back.

Recursive backtracker algorithm execution log

Quality Godot courses in Japanese are still rare, making this one particularly valuable. I'd recommend using it to get the big picture before tackling more advanced English courses. Udemy runs sales frequently, so add it to your wishlist.

As a learning tip: asking ChatGPT or Claude "What's the Unity/Unreal equivalent of this?" while studying Godot dramatically speeds up comprehension. Mapping @export → SerializeField or get_tree().change_scene_to_file() → SceneManager.LoadScene connects new concepts to what you already know, and the difference in learning efficiency is night and day.

:::post-link{url="https://trk.udemy.com/nXQoM9" text="Godot Engineで気軽に2Dゲームを作ろう (Udemy)"}

:::ad

What Impressed Me About Godot {#godot-impressions}

Going through this course gave me a genuine appreciation for Godot's design philosophy. It takes a distinctly different approach from Unity/Unreal Engine, and especially for 2D development, I kept thinking "this is exactly what I wanted."

• Nodes and signals feel intuitive: These are Godot's two core concepts. Nodes define structure, signals handle communication. Once you get used to the combo, it flows more naturally than Unity's GetComponent + UnityEvent pattern.
• Lightweight = comfortable: Opening a Unity project can take tens of seconds to minutes. Godot? Click the .exe, wait a few seconds, and you're back in. Compilation is near-instant too, which dramatically lowers the barrier to "just trying something."
• Scene reusability: The "scene = Prefab + Scene" concept was confusing at first, but in practice it feels just like Unity. Need a GameManager? Attach a script to a Marker2D, make it a scene, set it as AutoLoad for singleton behavior. Done.
• Native 2D support: TileMap, AnimatedSprite2D, and other 2D-specific nodes are built in from the start. Where Unity's 2D is "2D on top of a 3D engine," Godot's 2D is native.
• Sprite sheet workflow: In Unity, you slice sprites and configure each frame individually. In Godot, you pick images from a grid and they're instantly arranged on the timeline. A huge quality-of-life win for 2D developers.
• Tileset management: Collision shapes are set visually, and Physics Layers let you efficiently manage per-tile collision. Fewer steps than Unity's tilemap setup.

:::ad

For Unity Developers: Comparison Table {#unity-developers-api}

When learning Godot as a Unity developer, the first question is always "What's the Godot equivalent of X?" Scanning through this table before you start studying will make everything click faster.

These are approximate mappings. The exact behavior differs, so try things hands-on to feel the differences for yourself.

:::ad

For Unity Developers: Code Comparison {#unity-developers-code}

With the concept mapping in hand, let's compare actual code. GDScript uses Python-like indentation-based syntax and tends to be more concise than C#. The areas most likely to trip up Unity developers are type declaration style, the $ syntax for node access, and the signal system.

Example 1: Exposing Variables (@export vs [SerializeField])

In game development, you constantly need to tweak values in the inspector — movement speed, jump height, spawn rates. Rather than hardcoding these, you want them editable in the editor. Unity uses [SerializeField] for this; Godot uses the @export annotation.

Initialization code that goes in Unity's Start() is written in Godot's _ready().

Godot (GDScript)

# Player.gd
extends Node2D

@export var player_name: String = "Hero"
@export var speed: int = 100

# Equivalent to Unity's Start()
func _ready():
    print("Player Name: ", player_name)
    print("Initial Speed: ", speed)

Unity (C#)

// Player.cs
using UnityEngine;

public class Player : MonoBehaviour
{
    [SerializeField] private string playerName = "Hero";
    [SerializeField] private int speed = 100;

    // Equivalent to Godot's _ready()
    void Start()
    {
        Debug.Log("Player Name: " + playerName);
        Debug.Log("Initial Speed: " + speed);
    }
}

Per-frame logic goes in _process(delta) (equivalent to Unity's Update()). The delta parameter serves the same role as Time.deltaTime — the elapsed time since the last frame, used for frame-rate-independent behavior.

Example 2: Physics Processing (_physics_process vs FixedUpdate)

Moving a character with arrow keys — the bread and butter of game development. In Unity, you attach a Rigidbody2D, call GetComponent in Start() to cache the reference, then set velocity in FixedUpdate(). That's three steps of setup.

Godot's CharacterBody2D has a built-in velocity property and move_and_slide() method, eliminating the component-fetching boilerplate entirely. Compare the two and Godot's simplicity stands out.

Godot (GDScript)

# Character.gd
extends CharacterBody2D

const SPEED = 300.0

# Equivalent to Unity's FixedUpdate()
func _physics_process(delta):
    var direction = Input.get_axis("ui_left", "ui_right")
    velocity.x = direction * SPEED
    move_and_slide()  # Godot's convenient built-in function

Unity (C#)

// Character.cs
using UnityEngine;

[RequireComponent(typeof(Rigidbody2D))]
public class Character : MonoBehaviour
{
    [SerializeField] private float speed = 300.0f;
    private Rigidbody2D rb;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    // Equivalent to Godot's _physics_process()
    void FixedUpdate()
    {
        float moveInput = Input.GetAxis("Horizontal");
        rb.velocity = new Vector2(moveInput * speed, rb.velocity.y);
    }
}

Example 3: Getting Nodes ($ vs GetComponent)

"Play a child's animation" or "disable a collider" — these operations come up constantly in game development. In Unity, the standard pattern is fetching a reference with GetComponentInChildren<T>() or transform.Find(), then adding a null check before accessing it.

Godot's $ syntax (syntactic sugar for get_node()) lets you write node paths directly, making the code remarkably concise. Because the tree structure is explicit, it's immediately clear which node you're accessing.

Godot (GDScript)

# Player.gd
extends Node2D

func _ready():
    # Direct access to child node using $ syntax
    $AnimatedSprite2D.play("run")

    # Alternative using get_node()
    var collision_shape = get_node("CollisionShape2D")
    collision_shape.disabled = true

Unity (C#)

// Player.cs
using UnityEngine;

public class Player : MonoBehaviour
{
    void Start()
    {
        // Get component from child object
        Animator animator = GetComponentInChildren<Animator>();
        if (animator != null)
        {
            animator.Play("run");
        }

        // Find child object by name
        Transform collisionShape = transform.Find("CollisionShape");
        if (collisionShape != null)
        {
            collisionShape.gameObject.SetActive(false);
        }
    }
}

Example 4: Signals (signal vs UnityEvent)

"When the player takes damage, update the HP display in the UI" — inter-object communication is needed everywhere in games. In Unity, you use UnityEvent or C# event, but managing references between senders and receivers can get messy.

Godot's signal system solves this elegantly. Two key features set it apart: you can wire connections between nodes via the editor GUI, and the sender never needs to know about the receiver — a truly decoupled design. Even when connecting via code, it's just one .connect() call.

Godot (GDScript)

# Player.gd
extends Node2D

signal health_changed(new_health)

var health: int = 100

func take_damage(damage: int):
    health -= damage
    health_changed.emit(health)  # Emit signal

# UI.gd
extends Control

func _ready():
    var player = get_node("../Player")
    player.health_changed.connect(_on_health_changed)

func _on_health_changed(new_health: int):
    print("Health is now ", new_health)

Unity (C#)

// Player.cs
using UnityEngine;
using UnityEngine.Events;

public class Player : MonoBehaviour
{
    [SerializeField] private UnityEvent<int> onHealthChanged;

    private int health = 100;

    public void TakeDamage(int damage)
    {
        health -= damage;
        onHealthChanged?.Invoke(health);  // Invoke event
    }
}

// UI.cs
using UnityEngine;

public class UI : MonoBehaviour
{
    [SerializeField] private Player player;

    void Start()
    {
        player.onHealthChanged.AddListener(OnHealthChanged);
    }

    private void OnHealthChanged(int newHealth)
    {
        Debug.Log("Health is now " + newHealth);
    }
}

Example 5: Scene Switching (change_scene_to_file vs SceneManager.LoadScene)

Transitioning to the next stage when a level is cleared. In Unity, you pass a scene name to SceneManager.LoadScene(), but the scene must be registered in Build Settings first.

In Godot, you simply specify the path to a .tscn file directly. Without a registration step like Build Settings, prototyping feels noticeably more agile.

Godot (GDScript)

# GameManager.gd
extends Node

func level_complete():
    print("Level complete!")
    get_tree().change_scene_to_file("res://scenes/Level2.tscn")

Unity (C#)

// GameManager.cs
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    public void LevelComplete()
    {
        Debug.Log("Level complete!");
        SceneManager.LoadScene("Level2");
    }
}

:::ad

Conclusion {#conclusion}

Godot is a game engine I'd especially recommend to 2D developers. It has clear advantages over Unity/Unreal Engine in sprite and tileset management — pure 2D games suit Godot, while Unity remains the better choice for lighting-heavy titles.

In terms of engine maturity, Unity and Unreal Engine are still overwhelmingly ahead in community resources, store ecosystems, and commercial track records. But Godot-made titles like "Backpack Battles" and "Buckshot Roulette" are steadily growing, and as developers who migrated during the Runtime Fee controversy ship their projects, Godot's share should grow.

The open-source angle is also uniquely compelling. Looking at how Blender gradually overtook the 3D industry once dominated by Maya and 3ds Max, Godot might follow a similar trajectory. Unity and Unreal Engine are free until substantial revenue thresholds, so Blender-speed adoption may not happen — but the room to grow as an industry safety net is real.

I'll continue working with Unity and Unreal Engine, but confirming that Godot is a viable third option was a real takeaway. If you're curious, give it a try.

:::ad

Making them from scratch in Photoshop meant fiddling with paths and combining shapes — way too much effort for a simple speech bubble. So I decided to build a browser tool that lets you create them in seconds.

Just drag the edge of the shape to grow a tail, and you can create any speech bubble you want in seconds.

:::post-link{url="/en/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

:::toc

• The Hassle of Searching for Speech Bubble Assets
• What Is This Tool?
• Features
• How to Use
• When Can You Use It?

:::

:::ad

The Hassle of Searching for Speech Bubble Assets {#introduction}

Searching stock sites for speech bubbles comes with several problems. The tail points the wrong direction, the line thickness doesn't match your illustration, or you can't find that specific cloud shape you're looking for.

Trying to make your own in Photoshop — combining ellipses and triangles, merging paths — and you start thinking, "Why am I spending this much time on a single speech bubble?"

That's what motivated me to build a tool that makes creating speech bubbles quick and effortless.

What Is This Tool? {#what-is-sbs}

It's a browser-based speech bubble creator. Choose a base shape and line style, then just drag the edge of the preview area. A tail extends from where you drag, and you can freely adjust the tip position.

Your finished speech bubbles can be downloaded as transparent PNG images.

:::post-link{url="/en/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

Features {#features}

• Drag the edge of the preview to create and adjust tails wherever you want
• Customize shape (ellipse, rectangle, cloud, spiky), line thickness, and color
• One-click presets like "comic style" and "thought bubble"
• Choose between standard (1x) and high-resolution (2x) export as transparent PNG
• Free for personal and commercial use (no credit required)
• Touch support for smartphones and tablets

How to Use {#how-to-use}

The basic workflow is three steps.

1. Adjust the base shape

Use the settings panel on the right to set the shape and line style. Presets make this easy, but you can also fine-tune width, height, line thickness, and more.

2. Create and adjust the tail

In the preview area on the left, click and drag the edge of the shape. A tail extends from that point — use the blue handle to adjust the tip position.

3. Download

In the "Export" section, choose a resolution (1x/2x) and click the "Download PNG" button. Done!

When Can You Use It? {#teq}

Here are some common use cases:

• Blog and website images: Perfect for adding dialogue to illustrations or photos.
• YouTube thumbnails and video captions: Great for character dialogue effects in game commentaries and tutorials.
• Social media posts: Adding a speech bubble to an image instantly makes your post more engaging.

:::ad

Conclusion {#conclusion}

I got tired of the hassle of searching for or hand-making speech bubbles, so I built a tool where you just drag to create them. All speech bubbles you make are free for personal and commercial use. I'd love it if you find it useful for your blog, videos, social media, and more.

:::post-link{url="/en/tools/speech-bubble-studio/" text="▶︎ Speech Bubble Studio"}

:::ad

Using the eyedropper to sample colors only tells you "this color is used" -- it doesn't show you the overall color balance. If you could see "which colors occupy how much area" in actual numbers, your color habits and areas for improvement would become much clearer.

That's why I built the "Character Color Analyzer" -- a tool that visualizes color composition ratios in a pie chart just by uploading an illustration. All processing runs entirely in the browser, so you can safely analyze even unpublished works.

The reference image is fan art drawn by the site owner.

:::post-link{url="/en/tools/character-color-analyzer/" text="Character Color Analyzer"}

:::ad

:::toc

• Why I Wanted to Know My Color Balance
• What Is This Tool?
• Features
• How to Use It
• How to Use the Analysis Results
• How the Analysis Works
• Safe and Browser-Based

:::

:::ad

Why I Wanted to Know My Color Balance {#introduction}

When illustrating, I tend to choose colors by instinct. I'll think "this color feels right" as I paint, and after finishing, I wonder, "But objectively, what's the balance really like?"

Sampling colors with the eyedropper only tells you that a color is present -- it doesn't reveal the proportions. By understanding "which colors occupy how much area," you can uncover your own color habits and find areas to improve.

That's what motivated me to build a tool that visualizes color composition ratios in a pie chart.

What Is This Tool? {#what-is-cca}

It's a tool that analyzes an uploaded illustration image and displays the types of colors used along with their proportions in a pie chart and list.

Use it whenever you want to check the color balance of your illustrations in concrete numbers. A feature to exclude unwanted colors (like backgrounds) from the analysis lets you focus specifically on the character's color scheme.

:::post-link{url="/en/tools/character-color-analyzer/" text="Character Color Analyzer"}

:::ad

Features {#features}

• Start analysis by simply dragging and dropping an image -- nothing is sent to a server
• Visualize results with a pie chart and percentages
• Colors extracted using CIELAB color space (perceptually uniform) and k-means clustering
• Click unwanted areas (backgrounds, etc.) on the preview image to exclude them
• Manage excluded colors in a list, with the option to restore any of them
• Copy analyzed HEX codes with a single click
• All processing happens entirely in the browser -- safe for unpublished works
• Works on both PC and smartphone

How to Use It {#how-to-use}

The basic workflow is 3 steps:

1. Upload an image

Drag and drop the illustration you want to analyze onto the left area, or click to select a file. The image stays in your browser -- it's never sent to a server.

2. Review and adjust the analysis results

A pie chart and color list showing the color composition appear on the right. Use the slider on the left panel to adjust the number of colors to extract.

3. Exclude unwanted colors (optional)

To exclude colors unrelated to the character (like backgrounds), click on the relevant area in the preview image on the left. The clicked region's color is added to the exclusion list, and the analysis results update in real time.

How to Use the Analysis Results {#usage-tips}

The analysis results can yield all kinds of insights:

• View your work objectively: Analyze a completed illustration and you might discover things like "a particular color dominates more than I expected" or "the accent color was too weak." It's a great way to identify your color habits and areas for improvement.
• Expand your color toolkit: Analyze your past works and ask yourself, "Why does this color scheme feel good?" By understanding main-to-sub color ratios and accent color usage in numbers, you can turn intuitive "sense" into concrete "technique."
• Build a color reference library: Analyze various illustrations and collect the results to create your own personal color reference library. You'll learn practical color rules like "energetic characters tend to have high warm-color ratios" or "cool characters use neutral tones effectively."

When analyzing others' works as color references, please be mindful of copyright and limit use to personal study.

:::ad

How the Analysis Works {#advanced-features}

Behind its simple appearance, the tool uses carefully chosen techniques for accurate analysis.

CIELAB Color Space -- Closer to Human Perception: Instead of standard RGB values, color calculations use the "CIELAB" color space, which closely models human color perception. This groups pixels that "look similar to the human eye" rather than pixels that are merely "numerically close" in RGB.

k-Means Clustering -- Smart Average Color Extraction: Illustrations contain countless colors and gradients. To extract "representative colors" from this complexity, the tool uses k-means clustering. It automatically classifies the image's pixels into the specified number of color groups and extracts the average color from each group.

Safe and Browser-Based {#tech-info}

This tool is designed with privacy as the top priority. From image selection through analysis to displaying results, all processing happens entirely within the browser.

Image data is never sent to or stored on any external server. The tool even works offline, so you can analyze unpublished works and personal illustrations without any risk of data leaks.

:::post-link{url="/en/tools/character-color-analyzer/" text="Character Color Analyzer"}

:::ad

Even if you know the basic color rules, generating fresh ideas from them isn't easy. "What clothing color goes with this hair color?" "What should the accent color be?" -- once you start thinking about it, the time adds up.

That's why I built the "Character Color Navigator," a tool that suggests color palettes based on color theory from just a single base color.

:::post-link{url="/en/tools/character-color-navigator/" text="Character Color Navigator"}

:::ad

:::toc

• Struggling to Find Color Palette Ideas
• What Is This Tool?
• Features
• How to Use It
• Types of Color Palettes
• Making the Most of Palette Images
• Runs Entirely in the Browser

:::

:::ad

Struggling to Find Color Palette Ideas {#introduction}

Whenever I'm working on character design, choosing color schemes is always a challenge. With essentially infinite color combinations, it's hard not to get stuck wondering, "Which one is best?"

I know that warm, bright colors give an "energetic" impression and cool, dark colors convey "calmness" or "mystery," but when it comes to actually putting combinations together, I always end up with similar patterns.

I wanted fresh color palette ideas, so I built this tool.

What Is This Tool? {#what-is-ccn}

It's a tool that automatically suggests color palettes based on color theory, just by selecting a single base color.

"I've decided on the hair color, but what about the outfit?" "I want to know bolder color combinations!" "I want to try something different from my usual palette" -- this tool is for moments like these.

The suggested palettes also consider color roles (base, assort, accent), so they can be applied directly in your design work.

:::post-link{url="/en/tools/character-color-navigator/" text="Character Color Navigator"}

:::ad

Features {#features}

• Generate multiple color palettes instantly by selecting just one color
• Covers a wide range of color theories: Monochromatic, Analogous, Complementary, Triadic, and more
• Filter palettes by theme: "Calm & Harmonious," "Bold & Impactful," and others
• Displays guideline ratios for each color's role as Base, Assort, or Accent color
• One-click HEX code copy for any displayed color
• Save all palettes in the current theme (up to 8) as a single PNG image
• Brief descriptions of each palette's characteristics and the impression it creates
• Suggests not only classic color theory combinations but also unexpected pairings
• Runs entirely in the browser -- no software installation required
• Simple interface that anyone can use

How to Use It {#how-to-use}

The basic workflow is 3 steps:

1. Choose a base color

In the control panel on the left, select the "base color" that represents your character's image. Use the color picker to choose intuitively, or enter a HEX code directly.

2. Select a color theme

From the "Choose a Color Theme" section, select a theme that matches the mood you're going for. Options include "Calm & Harmonious," "Bold & Impactful," "Balanced & Colorful," and more. When you select a theme, matching color palettes automatically appear on the right.

3. Review and save palettes

Check out the generated color palettes. Hover over any color to see its HEX code, and click to copy it. When you find a scheme you like, click "Save Palette Image" to download all palettes in the current theme (up to 8) as a single image.

Types of Color Palettes {#palette-types}

The tool suggests palettes based on various color theories:

• Monochromatic:

A palette that uses a single hue and varies only its lightness and saturation. Creates a cohesive, calm impression.

• Analogous:

Uses colors that sit next to each other on the color wheel. Produces a natural, easy-on-the-eyes look with a gentle, approachable feel.

• Complementary:

Combines colors directly opposite each other on the color wheel. Creates strong color contrast for a bold, dynamic impression.

• Split Complementary:

Pairs the base color with the two colors adjacent to its complement. Offers the vibrancy of complementary colors but with more harmony and stability.

• Triadic:

Uses three colors evenly spaced around the color wheel. Provides diverse color use while maintaining balanced stability and a lively, vibrant impression.

• Tetradic:

Uses four colors forming a rectangle or square on the color wheel. Enables rich, diverse expression, though careful attention to color proportion and area balance is important.

Beyond these, many other variations are available. Experiment and explore.

:::ad

Making the Most of Palette Images {#advanced-tips}

Downloaded palette images aren't just for reference -- you can integrate them directly into your illustration workflow.

Load the saved palette image as a new layer in your illustration software (CLIP STUDIO PAINT, Photoshop, Procreate, SAI, etc.). Then simply use the eyedropper tool to pick colors from that layer. This eliminates the need to manually enter HEX codes one by one, letting you apply colors to your artwork quickly.

Runs Entirely in the Browser {#tech-info}

This tool is designed so that all processing happens entirely in the browser. No special applications need to be installed.

Color selection, palette calculations, and palette image generation all happen within the browser (primarily using JavaScript and the HTML5 Canvas API). Your base color input and generated palette data are never sent to any external server.

:::post-link{url="/en/tools/character-color-navigator/" text="Character Color Navigator"}

:::ad

"Wouldn't it be great if I could just make sound effects myself, quickly and easily?" That thought led me to build a browser-based tool for generating sound effects on the fly.

Just drag on the XY pad with your mouse to intuitively adjust pitch and sound variation. Created sounds can be downloaded as WAV files, and commercial use is allowed.

:::post-link{url="/en/tools/simple-sound-fx-generator/" text="Simple Sound FX Generator"}

:::ad

:::toc

• Why I Needed Sound Effects
• What Is This Tool?
• Features
• How to Use It
• Tips for Sound Adjustment
• Runs Entirely in the Browser

:::

:::ad

Why I Needed Sound Effects {#overview}

When prototyping a game, you inevitably need little sound effects like "jump sounds" or "item pickup sounds." Free asset sites are fine, but finding the right match for what you have in mind can eat up valuable time.

"It would be so convenient if I could just whip them up myself" -- and with that, I built a browser-based sound effect generator.

What Is This Tool? {#what-is-tool}

It's a browser-based sound effect creation tool. Just drag on the XY pad with your mouse to intuitively adjust pitch and sound variation.

Beyond basic waveform, duration, and volume controls, you can also fine-tune the envelope (how volume changes over time) and pitch slide (how pitch changes), enabling a wide variety of sounds.

Presets for common retro 2D game sound effects are included, so you can start creating sounds immediately -- no sound design expertise needed.

Features {#features}

• Real-time pitch and pitch variation adjustment via XY pad (mouse or touch)
• Freely customizable waveform selection (sine, square, etc.), duration, volume, and ADSR envelope
• Built-in 2D game sound effect presets: Jump, Shoot, Explosion, and more
• Save created sounds as WAV files
• Free for both personal and commercial use
• Runs entirely in the browser -- no software installation required

How to Use It {#usage}

The basic workflow is 3 steps:

1. Create the basic sound

Use the "Sound Settings" and "Envelope" controls on the left to define the foundation of your sound. Choose a waveform, set the duration and volume. Then adjust the Attack (how quickly the sound starts), Decay (transition from peak to sustained volume), Sustain (the sustained volume level), and Release (the fadeout after the sound ends).

Tip: Setting each envelope time shorter than the overall sound duration will help you get the sound you're going for.

2. Adjust the sound with the Sound Pad

Use the "Sound Pad" on the right to adjust pitch and variation. Drag your mouse or finger across the pad -- the cursor's vertical position (Y-axis) controls pitch, while horizontal position (X-axis) controls pitch change. Experiment to discover interesting sounds.

3. Play & Download

Click "Play" to preview your creation. Once you're satisfied, click "Download" to save it as a WAV file.

Starting from a preset and fine-tuning the parameters is also a great approach.

:::ad

Tips for Sound Adjustment {#sound-tips}

Here are some tips for creating the sound effects you have in mind:

• Using the XY Pad:
  • Y-axis (vertical): Controls the base pitch. Higher position = higher pitch, lower position = lower pitch.
  • X-axis (horizontal): Controls pitch change while the sound plays. Moving left lowers the pitch from the starting note; moving right raises it. Near the center, pitch change is minimal.
• Shaping the sound with Envelope (ADSR):
  • Attack: Short = crisp, punchy sound; Long = soft, gradual onset.
  • Decay & Sustain: Short decay with low sustain = quick, decaying sound; Long decay with high sustain = sustained, ringing sound.
  • Release: Short = abrupt cutoff; Long = lingering fadeout.
• Waveform Types:
  • Sine: Smooth, soft tone. Great for whistles and "pew" sounds.
  • Square: Chiptune-style sound. Perfect for retro game sound effects.
  • Sawtooth: Harsh, overtone-rich buzzing sound. Good as the core of explosion effects.
  • Triangle: Slightly harder than sine but softer than square -- a nice middle ground.

Mix and match parameters to discover your own original sounds.

Runs Entirely in the Browser {#implementation}

This tool is designed so that all processing happens entirely in the browser. No special software installation is needed.

Sound generation uses the Web Audio API built into your browser. Real-time sound manipulation and WAV file export are all performed within the browser.

:::post-link{url="/en/tools/simple-sound-fx-generator/" text="Simple Sound FX Generator"}

:::ad

Starting around February 2025, you may have noticed a growing number of "Punipuni Avatars" in VRChat -- avatars that look like 2D illustrations brought to life.

The trend was kicked off by rio3d's "[3D Model] #PunipuniAvatar NagiChan" released on Booth. By using this avatar as a base, you can make your own illustrations move around in VRChat's 3D world.

It's a delightful concept -- like Paper Mario, where a flat character walks through a three-dimensional space.

This guide walks you through how to replace the artwork in "#PunipuniAvatar NagiChan" with your own illustrations to create an original Punipuni Avatar.

What you'll need:

• [3D Model] #PunipuniAvatar NagiChan (Purchase on Booth)
• Unity + VRChat Creator Companion (VCC) environment set up
• Your own illustrations in the specified format (4 images, details below)

The process is simple:

1. Import "#PunipuniAvatar NagiChan" into your Unity project
2. Replace the avatar's illustrations (textures) with your own
3. Upload to VRChat

That's all it takes to get your character moving in VRChat. Let's walk through the detailed steps.

:::post-link{url="https://rio3d.booth.pm/items/6556549" text="[3D Model] #PunipuniAvatar NagiChan (BOOTH)"}

:::ad

:::toc

• Importing the Punipuni Avatar into Unity
• Easy! Replacing the Punipuni Avatar's Illustrations
  • Preparing Your Replacement Illustrations
  • Overwriting the Image Files in Unity
  • Verifying in Unity and Uploading to VRChat

:::

:::ad

Step 1: Importing the Punipuni Avatar into Unity {#import-avatar}

First, drag and drop the .unitypackage file included in the "#PunipuniAvatar NagiChan" folder (purchased from Booth) into the Assets window of your VRChat project.

Once the import is complete, find the Prefab named "PUNI" inside the Assets/PUNIPUNI_AVATAR folder in the Project window, and drag it into the Hierarchy window (scene).

At this point, if you follow the VRChat Creator Companion (VCC) upload process, you can use the original "NagiChan" Punipuni Avatar as-is.

Step 2: Easy! Replacing the Punipuni Avatar's Illustrations {#modify-avatar}

Now for the main event -- the actual customization. The Punipuni Avatar's appearance and animations are controlled by four PNG images (textures). Simply replacing these images with your own illustrations creates an original avatar.

These images are located in the Assets/PUNIPUNI_AVATAR/Materials folder of your Unity project:

• tex_nagi_default.png: The illustration for the default state (standing/idle)
• tex_nagi_default_talk.png: The illustration for lip sync (talking)
• tex_nagi_walk_1.png: Walking animation frame 1
• tex_nagi_walk_2.png: Walking animation frame 2

In VRChat, the default image is shown while standing, talk when speaking, and walk_1 and walk_2 alternate when walking to create an animation effect.

Unlike typical 3D avatar customization, no complex positioning adjustments are needed. The simplest approach is to prepare your own illustrations with the exact same filenames as the four original files, then overwrite the originals. This preserves all internal references while swapping the visuals to your own artwork.

:::ad

2-1. Preparing Your Replacement Illustrations {#prepare-images}

First, prepare your own illustrations corresponding to the four states described above. Key points:

• Image size: The original NagiChan images are 3035x3035 pixels. Ideally, create your illustrations at the same size with the character centered. (Different sizes will work but may cause display misalignment.)
• Filename: Use the exact same filenames as the originals (e.g., tex_nagi_default.png).
• File format: Save as PNG (transparent backgrounds are supported).

I created my illustrations based on a modified version of a Manuka-chan avatar I had previously made. (I gave them a slight pixel-art look using the "Pixel Art Converter" web tool from this blog.)

:::post-link{url="/en/tools/image-to-pixelization/" text="Pixel Art Converter"}

(From left to right: default, lip sync, walk 1, walk 2)

Rename your four illustrations (drawn or prepared) to match the corresponding original filenames.

2-2. Overwriting the Image Files in Unity {#overwrite-files}

Next, locate the original image files in the Unity editor and overwrite them with your own illustrations.

1. In Unity's Project window, open the Assets/PUNIPUNI_AVATAR/Materials folder.

2. Right-click on one of the original NagiChan PNG files (e.g., tex_nagi_default.png) and select "Show in Explorer" (or "Reveal in Finder" on Mac). This opens the actual folder where these files are stored.

3. Copy and paste (or drag and drop) all four of your prepared illustration PNG files into the opened folder.

4. A warning saying "File already exists" will appear. Select "Replace" to overwrite all four files.

2-3. Verifying in Unity and Uploading to VRChat {#confirm-upload}

Once the files are overwritten, switch back to the Unity editor. Unity will automatically detect the file changes and run an import process. After a moment, the avatar's appearance in the Project window and Scene view should update to show your illustrations.

(The avatar now displays my custom illustrations in Unity.)

From here, the process is the same as any standard VRChat avatar upload. Open the VRChat SDK Control Panel and click "Build & Publish for Windows" to upload your avatar.

And that's it -- your original Punipuni Avatar featuring your own illustrations is complete!

Now go ahead and let your character roam the world of VRChat.

:::post-link{url="https://rio3d.booth.pm/items/6556549" text="[3D Model] #PunipuniAvatar NagiChan (BOOTH)"}

:::ad

I had already experienced a 10x speed improvement using tools like ChatGPT Pro and Claude 3, but after adopting Cursor, I felt another 10x boost -- roughly 100x faster than my original workflow. I'm completely sold on Cursor.

What makes Cursor so powerful is the ability to interact with AI directly inside the editor. While coding, you can ask things like "refactor this group of components" or paste a console error and ask "what's causing this and how do I fix it?" AI-generated code changes are displayed as color-coded diffs (like Git), making it easy to reject unintended modifications. Package installations and file deletions only execute after you click the "Accept" button, so you stay in control.

While web-based AI tools like ChatGPT and Claude can do similar things, Cursor provides suggestions with a deeper understanding of your entire project's file structure and dependencies, resulting in more accurate fixes and a much smoother development experience.

Additionally, web-based AI tools can become unreliable or cut off during long conversations or large code generation tasks. Cursor, on the other hand, handles massive modifications all at once.

Occasionally (especially with high-performance models), overly aggressive modifications may occur, but the "Restore" feature lets you easily roll back file states to the point before your last instruction. (However, recovering deleted folders can be difficult, so reviewing code before clicking Accept is important.)

Now, let's get to the main topic.

Cursor's Pro plan has a monthly limit of 500 requests for using high-performance premium models in Fast mode.

Think of it as 500 tickets per month for high-speed AI processing. This is plenty for typical usage, but if you get deeply engrossed in tool development or large-scale refactoring like I did, you can hit the limit within just a few days.

Once you exceed the limit, you can still use Slow mode, but once you've experienced the speed of Fast mode, Slow mode can feel painful.

Cursor doesn't offer a direct plan to "increase premium model usage." To maintain Fast mode beyond the limit, you need to set up your own API key from OpenAI or Anthropic and pay per usage.

This article provides a clear, step-by-step guide for anyone looking to connect Claude API with Cursor, covering how to obtain a Claude API key from Anthropic Console, add credits, and configure it in Cursor.

:::ad

In This Article

1. What Are Cursor's Premium Models? Understanding the Limits and Fast Mode
2. Setting Up an Anthropic API Key (From Account Creation to Purchasing Credits)
3. How to Connect Cursor with Claude API
4. How Pay-Per-Use API Integration Works and What to Watch Out For
5. Real-World Costs After Claude API Integration and Alternatives
6. Summary: Maintaining Development Efficiency with Cursor and Claude API
7. Update: Slow Mode Might Actually Be Usable?
8. Update 2: The Reality of Slow Mode and Gemini 2.5 Pro as a Powerful Alternative (April 2025)

What Are Cursor's Premium Models? Understanding the Limits and Fast Mode

Cursor comes with multiple AI models built in, and the most capable ones are categorized as "Premium Models." Notable examples include:

• Claude 3.5 Sonnet (by Anthropic)
• GPT-4 / GPT-4o (by OpenAI)
• Other cutting-edge high-performance models

These premium models excel at complex code generation, advanced debugging assistance, and accurate Q&A, delivering significantly better results than standard models.

Cursor's paid "Pro plan" ($20/month) allows you to use these premium models in "Fast" mode up to 500 times per month. In Fast mode, your AI requests are processed with priority, letting you work without any waiting.

Once you exceed the 500 monthly requests, you're automatically switched to "Slow" mode. In Slow mode, AI responses take longer, and during peak server times, you might experience wait times ranging from seconds to minutes.

However, by enabling the "Enable usage-based pricing" option in Cursor's settings, you can maintain Fast mode beyond the 500-request limit. In this case, additional charges are incurred based on the token volume (amount of text processed) through the connected API service (Anthropic, in this case).

When you enable "Enable usage-based pricing," the settings shown above will appear.

The key setting here is the "Monthly Spending Limit." This is a safety feature that automatically stops API usage through Cursor once your pay-per-use charges reach the set limit. Note that this is separate from the Cursor Pro plan fee ($20) -- you pay the API charges directly to the API provider (Anthropic or OpenAI).

At the bottom of Cursor's settings screen, you can view detailed usage history showing which models you've used and how many times.

Items labeled "Included in Pro" represent the 500 monthly premium model requests included in the Pro plan. Items labeled "User API Key" represent usage through your own API key (such as Claude API), which incurs pay-per-use charges.

Looking at the history, you'll notice entries like "Aborted, Not Charged" and "Errored, Not Charged." This means you won't be billed for requests that were cancelled or failed -- a welcome detail for users.

:::ad

Setting Up an Anthropic API Key (From Account Creation to Purchasing Credits)

Let's walk through the steps to obtain an Anthropic API key so you can use Anthropic models like Claude 3.5 Sonnet with pay-per-use pricing in Cursor.

Step 1: Create an Account on Anthropic Console

• Visit Anthropic's official website at console.anthropic.com.
• Click "Sign Up," set your email address and password to create an account, then verify your email through the confirmation message sent to your inbox.
• After logging in, fill in any required basic information such as your name or organization name.

Step 2: Generate an API Key

• After logging in, select "API Keys" from the left menu.
• Click the "Create Key" button.
• Enter a name to identify your API key (e.g., "Cursor-Integration" -- something descriptive is recommended).
• Your API key will be generated and displayed on screen. This key is shown only once, so be sure to copy it and store it in a secure location like a password manager.

Step 3: Set Up Payment Information and Purchase Credits

• Navigate to "Plans & Billing" from the left menu.
• To use the API, you need to purchase credits in advance. Click "Add Payment Method" and register your credit card information.
• Next, purchase credits in the "Purchase credits" section. For testing purposes, the minimum amount of $5 should be sufficient.
• There's also an "Auto-reload" feature that automatically purchases additional credits when your balance drops below a certain amount. However, to avoid unintended charges, it's recommended to keep this turned off initially.

Once the credit purchase is complete, your balance (e.g., $5.00) will be displayed on the dashboard. Each time you use the Claude API through Cursor, charges will be deducted from this balance.

The "Auto Reload" settings allow configurations like "automatically add $10 when the balance drops below $5." This is convenient if you use the API frequently and find manual top-ups tedious, but it's best to assess your usage patterns before enabling it.

:::ad

How to Connect Cursor with Claude API

Once your Anthropic Console setup is complete, it's time to connect Cursor with the Claude API. The process is straightforward.

Step 1: Register the Anthropic API Key in Cursor

• Open the Cursor editor and navigate to "Settings" > "Configure models" from the menu bar (or settings screen).
• Find the "Anthropic API Key" field in the settings.
• Paste the API key you previously obtained from Anthropic Console and saved securely.
• Click "Save" or "Apply" to save the settings (the UI may vary slightly depending on the version).

Step 2: Verify the Connection and Start Using It

• Once configured, try using Cursor's AI features (code generation, chat, etc.). Specifically, try selecting a premium model (like Claude 3.5 Sonnet).
• If you've already exceeded the Pro plan's monthly 500-request limit, the API integration should restore "Fast" mode responses.
• To confirm, check the "Usage" or "Billing" page on Anthropic Console to verify that token usage and corresponding costs are being recorded.

That's it -- your Cursor and Claude API integration is complete. If your Cursor usage history shows entries under "User API Key," the connection is working correctly.

How Pay-Per-Use API Integration Works and What to Watch Out For

Here's a summary of the key concepts and precautions to know when using an external API like Claude API with pay-per-use pricing for the first time.

• How pay-per-use works: Each time you use the Claude API through Cursor, charges are calculated based on the amount of text processed (token count) and automatically deducted from the credit balance you purchased on Anthropic Console.
• Watch your balance: When your credit balance runs out, you may lose the ability to use the API through Cursor (Fast mode becomes unavailable, or errors may occur). Check your balance regularly on Anthropic Console.
• Auto Reload: As mentioned, this feature is OFF by default. When enabled, it automatically charges your credit card when your balance drops below a specified amount. While convenient, it's recommended to keep it OFF (or set the amount carefully) until you understand your usage patterns to avoid unexpected charges.
• Stay cost-conscious: While API integration is technically simple, always keep in mind that you're "paying for what you use." Frequent large-scale code generation or multi-file refactoring can consume credits faster than expected. Regularly monitor your usage on Anthropic Console to stay on top of costs.

Understanding these points will help you confidently leverage the Cursor and Claude API integration.

:::ad

Real-World Costs After Claude API Integration and Alternatives

How Long Does $5 of Credit Last?

After connecting Cursor with the Claude API, the natural question is: "How far does $5 of credit go?"

Based on my usage (frequent multi-file refactoring and moderately complex code generation), $5 of credit was consumed faster than expected. Roughly speaking, intensive usage could exhaust $5 in about 50 requests.

That's a heavy-use scenario. If you continued using the API at the same pace after exhausting the Pro plan's 500 monthly requests, API charges alone could reach $50 for another 500 requests. Of course, simple questions or short code fixes would cost much less (perhaps just a few dollars). (And if your usage is that light, you probably wouldn't exceed the 500-request limit in the first place.)

Alternatives to Reduce Costs

If Claude API integration costs more than expected, consider these alternatives:

• Multiple Cursor account strategy: A bit of a workaround, but subscribing to Cursor Pro with a second account gives you a total of 1,000 premium model Fast requests per month. Depending on your API costs, this might actually be cheaper ($20 x 2 = $40/month).
• Other AI code editors and APIs: Editors like "Cline" can use models like Deepseek, which are reportedly much cheaper than the Claude API. For routine code generation or refactoring, these models may perform well enough while being more cost-effective.
• Hybrid strategy (mixing models): If you have a separate ChatGPT Plus or Claude Pro subscription, use those for complex design discussions and high-level planning, then use Cursor (or other editors) with low-cost APIs for the actual coding work. For example, you could finalize the approach in Claude, then pass those instructions to an editor with Deepseek API integration for implementation -- balancing quality and cost.

Consider these alternatives and find the approach that best fits your development style and budget.

Summary: Maintaining Development Efficiency with Cursor and Claude API

This article explained how to maintain fast response performance (Fast mode) and keep your development efficiency high by integrating the Claude API after reaching Cursor Pro plan's monthly 500 premium model request limit.

We covered the specific steps for creating an Anthropic Console account, obtaining an API key, purchasing credits, and configuring Cursor. We also discussed how pay-per-use API integration works, important considerations, real-world costs, and alternatives for reducing expenses.

For developers looking to further enhance their programming efficiency -- especially those who actively leverage AI assistants in their coding workflow -- Cursor's API integration is worth trying. Combine the methods and alternatives presented here according to your usage frequency and budget to build your optimal development environment.

:::ad

Update: Slow Mode Might Actually Be Usable?

Since publishing this article, I've continued using Cursor and made a new discovery. I tried turning OFF the API integration (pay-per-use) and using Cursor beyond the premium model limit in "Slow Mode" for a while.

The result? I found that "Slow Mode is actually more practical than expected."

With many AI tools, "Slow Mode" typically means painfully slow responses that are barely usable. However, Cursor's Slow Mode, at least in my experience, didn't feel dramatically different from Fast Mode.

Of course, the quality and accuracy of generated code in Slow Mode are essentially the same as Fast Mode. So before switching to API pay-per-use, it's well worth trying Slow Mode first to see if the speed is genuinely bothersome.

That said, response times in Slow Mode may vary depending on the time of day and Cursor's server load.

This leads to a potential strategy: "Use Slow Mode by default and only temporarily enable pay-per-use when responses feel too slow." This could significantly reduce your API costs.

In conclusion, exceeding the Cursor Pro plan's 500 monthly requests doesn't necessarily mean you need to immediately switch to API pay-per-use. "Trying Slow Mode first" is a perfectly valid option.

Update 2: The Reality of Slow Mode and Gemini 2.5 Pro as a Powerful Alternative (April 2025)

In my previous update, I mentioned that "Slow Mode is more usable than expected," but the situation has changed with extended use. One day, I encountered cases where Slow Mode responses took over 30 seconds. As expected, Slow Mode response times can fluctuate significantly depending on the time of day and server congestion.

In that situation, I temporarily enabled Claude API pay-per-use as suggested in my previous update, which restored fast responses. The pay-per-use option works well as a fallback when Slow Mode feels too sluggish.

However, after exhausting Cursor Pro's Fast mode (500 monthly requests), your options aren't limited to just enduring Slow Mode or Claude API pay-per-use. A powerful new alternative has recently emerged!

It's Google's latest large language model, "Gemini 2.5 Pro Experimental," announced on March 25, 2025. This high-performance model, which attracted significant attention immediately after its announcement, is now available directly within the Cursor editor!

After testing it across several projects, the performance is impressively high -- comparable to or even surpassing existing premium models like Claude 3.5 Sonnet and GPT-4o in certain scenarios. The most notable feature of Gemini 2.5 Pro is its massive context window (the amount of information it can process and remember at once), which makes large-scale refactoring across multiple files remarkably smooth and accurate.

And the most noteworthy point as of now (April 3, 2025) is that "Gemini 2.5 Pro Experimental" is available for free on Cursor!

If you've exhausted your 500 monthly Fast mode requests and are frustrated with response speeds, I strongly recommend selecting "Gemini 2.5 Pro Experimental" in Cursor's model settings and trying it before considering Claude API pay-per-use or other paid options.

Despite being free, it delivers outstanding performance, and in many cases, this model alone may be more than sufficient. Give this new option a try.

:::ad

But opening an image editor to create one is a hassle, and searching for free stock images takes time. I thought, "If only I could just specify a size and color and get one instantly" -- so I built a browser tool that generates sample images.

Just specify the size, background color, and text to instantly download a PNG image.

:::post-link{url="/en/tools/sample-image-generator/" text="▶︎ Sample Image Generator"}

:::ad

:::toc

• Why I Needed Dummy Images
• Features
• How to Use
• Supported Formats

:::

:::ad

Why I Needed Dummy Images {#overview}

When working on UI design, there are plenty of situations where you need placeholder images. During the wireframing and prototyping stage, the actual images often don't exist yet.

But opening an image editor just for that is annoying. All you want is something simple, like "an 800x600 gray image."

That's why I built this tool -- just specify the size, background color, and text in your browser and generate a PNG image instantly.

Here are some examples of images you can create:

Features {#features}

• Specify size, background color, text color, and text content in detail
• Text visibility toggle
• Automatic text sizing with center alignment
• Instant preview and download of generated images
• Wide selection of preset sizes and preset colors

How to Use {#usage}

1. Set the size Choose from a preset or enter the width and height manually.

2. Set the background color Choose from a preset or pick any color from the color palette.

3. Set the text Toggle text on/off and specify the text content. Change the text color as needed.

4. Preview & Download The preview updates automatically as you change settings. Click the download button to get a PNG file.

Supported Formats {#format}

Currently supports PNG export. It works on any browser that supports the canvas feature, regardless of whether you're on desktop or mobile.

:::post-link{url="/en/tools/sample-image-generator/" text="▶︎ Sample Image Generator"}

I don't usually play board games, but after playing with some old friends over the holidays, I was completely hooked before I knew it.

Catan has a simple premise: players place settlements on a board made of 19 resource tiles, roll two dice each turn, and any player with a settlement adjacent to a tile matching the dice total collects resources.

By spending resources to build roads and placing new settlements along those roads, you can collect even more resources.

What becomes critical here is the tile placement and number distribution. If the same type of resource tiles are adjacent, or if high-probability numbers (6 and 8) end up next to each other, certain players can dominate resource collection and the game balance falls apart.

To create a fairer game, tiles need to be carefully placed so that probabilities don't skew too heavily in any direction.

That's why I built the "Catan Board Generator" -- a tool that mathematically generates "fair tile layouts" in an instant.

[June 2025 Update] v2.1.0 introduces resource balance visualization and improved generation quality! Building on v2.0.0's Expansion (5-6 player) support and UI improvements, even higher quality board generation is now possible.

:::post-link{url="/en/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

:::ad

:::toc

• What Is the Catan Board Generator?
• Features
• How to Use
• Placement Rules in Detail
• v2.0.0 Expansion Support (2025/06/07)
• v2.1.0 Improved Fairness + Resource Balance Visualization (2025/06/12)
• v2.2.0 Balance Chaos Option (2025/06/14)
• Summary

:::

:::ad

What Is the Catan Board Generator? {#overview}

This tool is a web app that automatically generates Catan boards. It randomly places both resource tiles and number tokens at once, and you can also reshuffle just the numbers. While following the official rules -- such as "keep 6 and 8 apart" and "avoid too many consecutive same resources" -- it aims to create reasonably balanced layouts. When you find a board layout you like, you can save it as an image.

v2.0.0 adds support for the Expansion (5-6 players) in addition to the Standard (3-4 players), along with major UI improvements.

:::post-link{url="/en/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

Features {#features}

• Supports both Standard and Expansion -- switch between 3-4 player (19 tiles) and 5-6 player (30 tiles)
• Automatic shuffling of resource tiles and number tokens
• "Shuffle Numbers Only" to keep the resource layout while changing numbers
• Strict avoidance of adjacent 6 and 8
• Advanced balancing to minimize probability bias
• Two-column layout for greatly improved usability
• Responsive design -- optimized for PC, tablet, and mobile
• Save as a high-resolution image (2000x2000px)

How to Use {#usage}

1. Go to Catan Board Generator
2. Select a board type -- Choose "Standard" or "Expansion (5-6 players)"
3. Click the Shuffle button to randomly place resource tiles + number tokens
4. To keep the resource layout but change the numbers, click the Shuffle Numbers Only button
5. To save as an image, click the Save Image button

Placement Rules in Detail {#rules}

This tool builds on the official rules while adding custom balancing algorithms for a fairer and more strategic gameplay experience.

Basic Placement Rules

• No adjacent same resources: Same resource tiles (forest, pasture, hills, mountains, fields) are never placed next to each other
• No adjacent specific numbers: High-probability "6" and "8" as well as low-probability "2" and "12" are kept apart
• No duplicate numbers on same resource: The same number won't be assigned to the same resource type more than once

Advanced Balancing

• High-probability number distribution: "6" and "8" are distributed evenly across resource types to prevent concentration on a single resource
• Intersection expected value equalization: The value of "intersections" (where 3 tiles meet) is adjusted so that no area has an extremely low total probability
• Per-resource number quality: Prevents poor numbers (2, 3, 11, 12, etc.) from clustering on a single resource type, guaranteeing a minimum production expected value for each resource
• Probability distribution optimization: Fine-tunes each resource type's production probability to approach the ideal ratio

Display Details

• Number probabilities: The dots below each number token represent that number's probability (out of 36 possible dice combinations)
• High-probability highlighting: The particularly high-probability "6" and "8" are displayed in red
• Visual clarity: Each tile is color-coded by resource type for easy board comprehension at a glance

v2.0.0 Expansion Support (2025/06/07) {#v2-0-0}

In the June 2025 update, v2.0.0 was released. Key improvements include:

Expansion Features

• Tile count: Increased from 19 to 30 tiles
• Resource composition: Additional resources of each type enable more diverse strategies
• Number tokens: Additional numbers provide more placement options
• Desert tiles: Increased from 1 to 2

Other Improvements

• Two-column layout: On desktop, the control panel and board display are separated for much better usability
• Responsive design: Layout adapts to different device sizes
• Dynamic parameter adjustment: Generation algorithm parameters are automatically tuned based on board size
• Optimized search space: Expansion mode uses 2.3x more search steps for stable generation
• Performance improvements: Coordinate calculation caching and algorithm optimization
• Error handling: Proper feedback and retry functionality when generation fails

This allows the Expansion board to be generated at the same quality level as the Standard version.

v2.1.0 Improved Fairness + Resource Balance Visualization (2025/06/12) {#v2-1-0}

In the June 12, 2025 update, v2.1.0 was released. Key improvements include:

• Resource balance visualization: Added a statistics section showing "resource production likelihood," scoring and displaying each resource's production expected value
• Improved fairness: Set minimum thresholds for per-resource total production expected values (Standard: 11, Expansion: 16) to prevent any resource from being extremely disadvantaged
• Faster processing: Introduced Web Workers to speed up and stabilize board generation calculations

These improvements make it possible to more accurately evaluate generated board quality, enabling fairer and more strategic gameplay.

v2.2.0 Balance Chaos Option (2025/06/14) {#v2-2-0}

In the June 14, 2025 update, v2.2.0 was released. Key improvements include:

• Balance Chaos option: A new "Balance Chaos" option that intentionally allows resource and number bias. By default, the fairest possible board is generated, but enabling this option lets you create "chaotic boards" with extreme resource or number imbalances.
• Resource expected value balance: Adjustable minimum thresholds for each resource's production expected value, letting you choose the degree of imbalance.
• Resource adjacency control: Toggle whether same resources can be placed adjacently.
• Number adjacency control: Toggle whether high-probability or low-probability numbers can be placed adjacently.

This allows the tool to accommodate not only balanced, fairness-focused play but also novelty games and advanced variant rules.

Use the "Balance Chaos" option to enjoy intentionally unfair boards or highly strategic layouts.

Summary {#conclusion}

The "Catan Board Generator" helps you avoid the problem of clustered 6s and 8s or biased resource tiles, letting you quickly determine your board layout.

v2.0.0 added Expansion support for 5-6 player games, along with UI improvements for better usability. v2.1.0 introduced resource balance visualization and improved generation quality for fairer, more strategic board generation.

It's perfect for cutting down setup time and getting straight to playing.

Usage Notes

This tool is designed to aim for a fair gaming experience, but the "optimality" of a board may vary depending on player strategy and preferences. The generation logic includes probabilistic elements, so please verify the final board balance yourself before playing.

:::post-link{url="/en/tools/catan-board-generator" text="▶︎ Catan Board Generator"}

May your Catan experience be smoother and more enjoyable!

One of my older units, the Synology NAS DS218play, recently started having its fan stop periodically, so I purchased a spare part and replaced it. Here's a record of the process.

NAS Unit + Spare Parts

• NAS unit: Synology NAS Kit 2-Bay DS218play Quad-Core CPU 1GB RAM - Amazon
• Spare fan: Synology Spare Parts - Replacement Fan FAN_92x92x25_1 (92mm fan, 25mm thick)

The Problem: Fan Repeatedly Stopping and Restarting

The issue was that the fan would stop a short while after powering on the Synology NAS, then restart after a few seconds, only to stop again -- repeating this cycle. Warnings like the following were being sent every few minutes:

Cleaning the fan didn't resolve the issue, so I purchased a spare part.

Replacing with the Spare Part

The spare fan arrived. I purchased it from the official Synology seller on Amazon.

Remove the screws from the Synology NAS.

The fan area has a very simple structure. Disconnect the power cable and peel off the silver label.

The fan mounting method varies by Synology NAS model.

For example, the DS218 has the fan secured with screws from the back, but the DS218play uses rubber grommets on the inside like this.

I couldn't find a system maintenance page specifically for the DS218play, but you can check the replacement procedure for the DS223j at the link below. The process is nearly identical for the DS218play.

DS223j Product Manual 4.1 Replacing a Failed Fan - Synology Knowledge Center

Remove the four screws on the bottom of the NAS, then remove the rubber grommets in the lower area that are out of finger reach, and swap in the spare fan.

Installation complete. The fan is now running normally again.

That's where an analog "progress checksheet" can be surprisingly effective. By printing it on paper and physically checking off items with a pen, you get that tangible feeling of "I worked hard today!" and "Almost there!"

So I built the "Progress Checksheet Maker" -- a browser tool that lets you create and print checksheets with ease.

It's useful for all kinds of goals -- studying for certification exams, tracking reading progress, managing online course completion, and more.

:::post-link{url="/en/tools/progress-checksheet/" text="▶︎ Progress Checksheet Maker (Printable)"}

:::ad

:::toc

• The Struggle to Stay Motivated
• Features
• How to Use
• Ideas for Use
• Runs Entirely in Your Browser

:::

:::ad

The Struggle to Stay Motivated {#overview}

When working through textbooks, workbooks, or online courses, it's tough to stay motivated when you can't see your progress over time.

There are digital tools for tracking progress, but the analog act of "printing it on paper and checking things off with a pen" can surprisingly boost your sense of accomplishment and motivation to keep learning.

That's why I created this tool -- just enter a cover image and start/end page numbers to automatically generate an A4 landscape checksheet.

:::post-link{url="/en/tools/progress-checksheet/" text="▶︎ Progress Checksheet Maker (Printable)"}

Features {#features}

• Create checksheets easily with just an image and page numbers
• Set any image as the cover -- a textbook cover, course thumbnail, etc. (or go without an image)
• Specify start and end pages to create a checksheet for just the range you need
• Optimized for A4 landscape printing (3508x2480 pixels)
• Drag & drop to set the cover image easily
• All image processing happens in the browser -- no data is sent to a server
• Checkbox grid size and count are automatically optimized based on total page count
• Download the generated checksheet as a PNG image instantly
• Physically checking off items helps you feel your progress and stay motivated

How to Use {#usage}

The basic flow is three steps:

1. Select a cover image (optional)

Drag & drop an image file (like a textbook cover) or click the area to select one. It's fine to skip this step.

2. Enter page numbers

Enter the "Start page" and "End page." For example, to track pages 10 through 150, enter "10" for the start and "150" for the end. The preview updates automatically.

3. Download the image

Just click the "Download Image" button. A PNG image will be downloaded, ready to print.

Ideas for Use {#benefits}

Printing the checksheet and checking off items with a pen has several benefits:

• Checking off items one by one gives you a visible sense of progress and accomplishment
• Knowing "I've come this far" or "just a little more to go" provides concrete motivation to keep learning
• Posting the sheet on a wall or keeping it in a planner keeps your learning goals visible, helping build habits
• Use task counts instead of page numbers to create checksheets for 30-day challenges and similar goals
• Recording progress with pen and paper can help improve focus and reduce digital fatigue

It works for all kinds of things -- managing children's workbook progress, tracking hobby projects like knitting or crafts, logging long TV series, and more.

Runs Entirely in Your Browser {#tech}

This tool runs entirely in your browser. No special software installation is required.

Cover image processing and checksheet rendering all happen within the browser. Your selected image data is never sent to any external server, so you can use it with peace of mind.

:::post-link{url="/en/tools/progress-checksheet/" text="▶︎ Progress Checksheet Maker (Printable)"}

While Vercel (the creators of Next.js) is well-known as a deployment target, Cloudflare Pages is also an excellent option. It offers a fast CDN, powerful security features, and generous free-tier limits, making it a great choice for everything from personal projects to small and mid-sized websites. In this guide, I'll walk you through the deployment process I frequently use with Cloudflare Pages.

Note: This guide assumes your Next.js project code is already pushed to a GitHub (or GitLab) repository (private repositories are fine).

Steps covered in this article

1. Add a Next.js project to Cloudflare Pages
2. Grant access to a private GitHub repository
3. Build configuration and tips (Node.js version, compatibility flags)
4. Set up a custom domain on Cloudflare Pages (nameserver changes)
5. Summary: Next.js + Cloudflare Pages + Custom Domain Setup Flow

:::ad

Add a Next.js Project to Cloudflare Pages

The first step is to create a new Pages project in the Cloudflare dashboard and link it to the GitHub repository containing your Next.js project.

1. Log in to the Cloudflare dashboard and select Workers & Pages from the left menu. (Note: Cloudflare's UI is frequently updated, so menu names may vary slightly. Look for similar items.)

2. On the overview screen, find and click the Create application button.

3. On the "Create an application" screen, make sure the Pages tab is selected and click the Connect to Git button. Cloudflare Pages primarily uses Git repository integration for automatic deployments.

4. You'll be taken to the GitHub or GitLab account connection screen. If this is your first time connecting, click "Add account" and follow the prompts to authenticate your GitHub account and authorize Cloudflare access.

5. Once the account is connected, the "Select a repository" section will display a list of Git repositories from your linked account. Select the repository containing the Next.js project you want to deploy.

:::ad

Grant Access to a Private GitHub Repository

[Tip] If the repository you want to deploy is set to private, it may not appear in the repository list above. This happens because the Cloudflare Pages application doesn't have permission to access that private repository. In that case, you'll need to grant access on the GitHub side using the following steps.

1. Log in to GitHub, click your profile icon in the top right, open Settings, and select Applications from the left menu.

2. Select the Installed GitHub Apps tab and find and click Cloudflare Pages (or a similar name) in the list.

3. Scroll to the Repository access section. Select the Only select repositories option, then check the repository for the Next.js project you want to deploy to Cloudflare Pages. Click Save to save your changes.

[Security Recommendation] Even if "All repositories" is currently selected, it's recommended to switch to "Only select repositories" and limit access to only the repositories you need, for better security.

4. After completing the GitHub settings, return to the Cloudflare Pages screen and refresh the repository list (or reload the page). The private repository you just granted access to should now appear. Select it and click Begin setup to proceed.

:::ad

Build Configuration and Tips (Node.js Version, Compatibility Flags)

After selecting a repository, you'll see the build and deployment settings screen. This is where you configure how Cloudflare Pages fetches code from the GitHub repository, builds it, and deploys it.

1. In the "Build settings" section, open the Framework preset dropdown menu and select Next.js. Cloudflare Pages supports many frameworks, and selecting a preset automatically fills in the optimal build commands and settings for that framework.

2. After selecting the preset, the "Build command" (e.g., npm run build or next build) and "Build output directory" (e.g., .next or .vercel/output/static, which may vary depending on your Next.js version and configuration) will be automatically populated. Usually, you can leave these as-is.

[Note 1] When you need to specify the Node.js version

The basic setup is complete at this point, but clicking "Save and Deploy" may result in build errors. A common cause is when the Node.js version used in Cloudflare Pages' build environment is older than what your Next.js project requires.

Check the build logs. If you see error messages like the following, you need to specify the Node.js version:

Initializing build environment. Failed: error finding node version '>=18.0.0'
You are using Node.js 18.17.1.
For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.

(The version numbers in the error message may differ.)

To fix this, explicitly specify the Node.js version in your Cloudflare Pages project settings.

Go to your project's Settings > Environment variables, and in the "Build environment variables" section (or both "Production" and "Preview" environment variables), click Add variable and configure it as follows:

• Variable name: NODE_VERSION
• Value: The Node.js version required by your Next.js project (e.g., 18.18.0 or 20.0.0. Match it to the error message, Next.js documentation, or your local development environment). If you have it specified in the engines field of your package.json, use that value.

After setting the environment variable, re-deploy (e.g., click "Retry deployment" from the build log screen). The specified Node.js version will be used and the build should complete successfully.

[Note 2] When you need to set the Node.js compatibility flag

If the build succeeds but you see the following error screen when visiting the deployed site (xxx.pages.dev):

This is called a Node.JS Compatibility Error. It means you need to enable Node.js API compatibility mode for the Cloudflare Pages runtime environment (Cloudflare Workers) to correctly run your Next.js application (especially server-side features and API routes).

To fix this, configure the following setting:

Go to your project's Settings > Functions > Compatibility flags section (or a similar item). Click Configure (or "Add"), add the nodejs_compat flag, and save. (Typically, set this for both production and preview environments.)

After setting this flag and redeploying, your Next.js application should display correctly when you visit the site.

:::ad

Set Up a Custom Domain on Cloudflare Pages (Nameserver Changes)

Once your build and deployment succeed and the site is accessible at a URL like project-name.pages.dev, the final step is to assign your own custom domain (e.g., your-cool-site.com) to this Cloudflare Pages project.

Here's the general flow for setting up a custom domain:

1. Cloudflare Pages configuration: Add the custom domain name you want to use in the project settings.
2. Note the nameserver information: Cloudflare will provide the nameserver addresses to configure for your domain.
3. Domain registrar configuration: In the management panel of the service where you registered your domain (e.g., Namecheap, Google Domains, Route 53, etc.), change the domain's nameserver settings to the ones provided by Cloudflare.
4. Wait for DNS propagation: Wait for the nameserver change information to propagate across the internet. This usually takes a few minutes to a few hours, but can take up to about 48 hours.
5. Activate on Cloudflare Pages: Once Cloudflare confirms the nameserver change, the domain status becomes "Active," and your Pages project is connected to your custom domain.

Below is a step-by-step example. (The basic flow is the same regardless of your registrar.)

Step 1: Add a Custom Domain to Cloudflare Pages

1. Go to your Cloudflare Pages project, select the Custom domains tab, and click the Set up a custom domain button.

2. Enter your custom domain name (e.g., your-cool-site.com) in the text box and click "Continue."

3. If the domain isn't yet managed by Cloudflare, the process of transferring (or partially delegating) DNS management to Cloudflare will begin. Follow the on-screen instructions and click buttons like Begin DNS transfer or "Add site." (Note: This doesn't transfer the domain itself to Cloudflare -- it only points DNS management to Cloudflare.)

4. Enter the domain name and proceed to the step where Cloudflare scans existing DNS records. Click "Continue."

5. A Cloudflare plan selection screen will appear. For basic custom domain usage, the Free plan at the bottom of the screen is typically sufficient. Select it and click "Continue."

6. Cloudflare will display any existing DNS records it found during the scan. Review the contents (it's fine to leave them as-is if you're unsure) and click "Continue."

7. If a confirmation popup appears, click "Confirm."

8. [Important] This screen will display the Cloudflare nameserver addresses (usually two) that you need to set for your domain. Copy or note these addresses accurately (e.g., ada.ns.cloudflare.com, ben.ns.cloudflare.com). You'll need them in the next step.

Step 2: Change Nameservers at Your Domain Registrar

Next, log in to the management panel of the service where you registered your domain (domain registrar) and change the nameserver settings.

1. Go to your domain registrar's website and log in.

2. In the domain management menu, find the "Nameserver settings" or "DNS settings" option for your target domain and open the editing screen.

3. Remove or change the current nameserver settings (usually set to the registrar's own nameservers) and enter the two nameserver addresses provided by Cloudflare. Save the changes.

[Note] DNS propagation takes time!

It takes time for nameserver changes to propagate across the internet. While it can sometimes take effect within minutes, it usually takes several hours and can take up to about 48 hours in some cases. During this time, your custom domain may not be accessible or may show outdated information. Be patient and wait. Check the status periodically on the Cloudflare dashboard or wait for the confirmation email from Cloudflare.

Step 3: Activate the Domain on Cloudflare Pages

Once Cloudflare recognizes the nameserver change, the domain status on the Cloudflare dashboard will change from "Pending" to Active. (In my case, this was relatively quick and took about 5 minutes.)

Once the domain is active, it's time to formally connect your Cloudflare Pages project to your custom domain.

1. Go back to the Cloudflare Pages project settings and open the Custom domains tab.

2. Click the "Set up a custom domain" button, re-enter your custom domain name, and click "Continue."

3. This time, since Cloudflare recognizes the domain, you should see a screen like "Activate domain" or "Verify DNS records." Cloudflare Pages will automatically set (or suggest) the required DNS records (usually a CNAME record). Review the details and click the Activate domain button.

4. The status will show "Initializing" or "Verifying," and after a short wait, it will change to Active. The setup is now complete!

Once the setup is done, visiting your custom domain (e.g., https://your-cool-site.com) will display the Next.js site deployed on Cloudflare Pages. (SSL certificates are automatically issued and managed by Cloudflare.)

:::ad

Summary: Next.js + Cloudflare Pages + Custom Domain Setup Flow

That covers the complete process of deploying a Next.js site to Cloudflare Pages and setting up a custom domain. Let's recap the overall flow:

1. GitHub preparation: Push your Next.js project to a GitHub repository.
2. Cloudflare Pages integration: Create a project on Cloudflare Pages and link it to the GitHub repository. (For private repositories, configure access permissions on the GitHub side.)
3. Build settings and troubleshooting:
   • Select "Next.js" in the framework preset.
   • If needed, set the NODE_VERSION environment variable to specify the Node.js version.
   • If needed, set the nodejs_compat compatibility flag.
4. Custom domain setup:
   • Add a custom domain to Cloudflare Pages and note the Cloudflare nameservers provided.
   • In your domain registrar's management panel, change the nameservers to Cloudflare's.
   • Wait for DNS propagation, and once the domain is active on Cloudflare, activate the domain in the Pages project.

While there are a few things to watch out for -- like Node.js-related build errors and DNS propagation wait times -- the process itself is fairly straightforward. Cloudflare Pages offers fast delivery, strong security, and generous free-tier limits, making it an excellent hosting choice for Next.js applications. Give it a try!

(This article covers the basic deployment steps. Depending on your application's requirements, you may need additional configuration such as environment variables, custom build commands, redirect rules, and more. Refer to the official Cloudflare Pages documentation for further details.)

In this post, I used the Unity tools "Mantis LOD Editor" and "MeshDeleterWithTexture" to reduce my avatar's polygon count, successfully improving the performance rank from "Very Poor" to "Poor." Here's a record of the process and methods used.

Optimization Results: Before and After

Before: 188,784 polygons / Performance Rank: Very Poor

After: 69,995 polygons / Performance Rank: Poor

As shown, the polygon count was reduced by 63% while keeping visual impact to a minimum.

[Before you read: a note on expectations]

This article documents the process of forcibly reducing a ~190,000 polygon high-end model to under 70,000. Honestly, after going through the process, I questioned whether this level of reduction was really necessary.

In practice, keeping a separate lightweight avatar for performance-critical situations is more realistic. That said, this guide is useful as a reference for understanding polygon reduction techniques, or for more modest optimizations (e.g., 100K to 70K polygons). Read it as a learning experience!

Here are the specific methods I used to effectively reduce polygon count. These techniques are also valuable for avatar customization and original model creation:

• Removing hidden parts: Deleting body mesh that's invisible under clothing (e.g., elbows)
• Mantis LOD Editor reduction: Reducing polygon counts on individual parts (clothes, hair, accessories) to the limit before visual quality breaks down
• MeshDeleterWithTexture partial deletion: Removing unnecessary clothing decorations or hidden mesh by specifying texture regions
• (Advanced) Part separation with MeshDeleter: Splitting combined parts (e.g., inner + outer clothing as one object) to optimize them individually

This article walks through each step in order.

:::ad

:::toc

• Required Tools and Setup
• Useful Terminology
• Polygon Reduction with Mantis
• Cases Where Mantis Alone Isn't Enough
• Partial Deletion with MeshDeleter
• Advanced: Separating Clothing Parts
• Optimization Results and Key Takeaways
• References
• Addendum: Considerations for High-End Models

:::

:::ad

Required Tools and Setup {#tools}

Here are the main tools used for this VRChat avatar optimization (polygon reduction):

• Mantis LOD Editor - Professional Edition (Unity Asset Store / Paid: ~$55)

  • A well-established Unity asset with high-quality polygon reduction (decimation) capabilities. Efficiently reduces polygon counts on individual avatar parts. After purchase, import it via Unity's PackageManager > My Assets.

• Non-Destructive Polygon Reduction: NDMF Integration for Mantis LOD Editor (Booth: by Hitsubu / Free *Requires Mantis LOD Editor)

  • A tool that lets you use Mantis LOD Editor within the "NDMF" framework, widely used for VRChat avatar modification, in a safer and simpler (non-destructive) way. Download from Booth and import the unitypackage. This is what you'll actually apply to your avatar.

• MeshDeleterWithTexture beta (Booth: by Gatosyocora / Free)

  • An incredibly useful Unity editor extension that lets you delete mesh regions by painting on a texture image. Ideal for removing fine clothing decorations or hidden mesh that Mantis can't easily handle. Download from Booth and import the unitypackage.

• anatawa12's VRC Avatar Tools (formerly: gists pack) (Install via VCC)

  • A toolkit that includes detailed avatar performance statistics. The "Actual Performance" tab is essential for monitoring current polygon counts and performance rank in real-time during optimization. Easily added via VCC (VRChat Creator Companion) under "Manage Project."

[Important] How to check with the Actual Performance tab:

After installing anatawa12's VRC Avatar Tools, a new "Avatars" tab appears in the VRChat SDK Control Panel with an "Actual Performance" section. After applying Mantis or MeshDeleter optimizations, enter Play Mode in Unity to update these stats and confirm your current polygon count and performance rank. The goal is to get the "Polygons" value below 70,000 (the Poor rank threshold).

(In this example: 188,784 polygons = Very Poor. Target: under 70,000!)

Useful Terminology {#terminology}

Here are some terms that will help you understand the optimization process:

• Non-Destructive An editing approach that doesn't modify the original data directly. The NDMF version of Mantis and MeshDeleter both operate non-destructively, preserving the original mesh data. This means that if you make a mistake or don't like the results, you can simply remove the tool's component or revert the settings to easily restore the original state. This is a huge advantage that makes it safe for beginners to experiment.

• NDMF (Non-Destructive Modular Framework) A framework for VRChat avatar modification. It manages various avatar settings and modifications as "components" that are automatically applied at build time. It pairs well with non-destructive workflows, and many useful tools support NDMF. The "NDMF Integration for Mantis LOD Editor" used in this guide is one of them.

:::ad

Polygon Reduction with Mantis {#mantis-basics}

Start by identifying which parts of your avatar are the biggest polygon offenders.

1. Open the VRChat SDK Control Panel in Unity and select the "Builder" tab.

2. With your avatar selected, attempt to build -- performance warnings (Validation Results) will appear. Click the "Select" button next to the "Polygons" warning message to highlight the meshes (clothing parts, etc.) with the highest polygon counts in the Hierarchy window.

3. Add the "NDMF Mantis LOD Editor" component to the highlighted objects (clothing parts, etc.). In the Inspector window, click "Add Component" and search for "Mantis."

4. Adjust the "Quality" slider on the added component. Lowering this value reduces the polygon count, but going too far will cause the mesh shape to degrade.

[Tip] Use Shaded Wireframe view

When adjusting the Quality slider, switch Unity's Scene view to "Shaded Wireframe" mode. This makes it easier to visually assess how much the polygons are being reduced and whether the mesh is degrading. Toggle between "Shaded" and "Shaded Wireframe" views to find the sweet spot that preserves visual quality.

The basic workflow is: identify high-polygon parts, add the component, and adjust Quality -- repeating this for each major part.

[Important] Delete Unused Parts Completely

When customizing avatars, it's tempting to keep old outfits or hairstyles "just in case" by simply hiding them in the Hierarchy. However, hidden meshes may still count toward the polygon total!

In my case, I had the original Manuka avatar's apron parts hidden but still present. Completely deleting them from the Hierarchy saved approximately 16,000 polygons.

Don't hesitate to delete parts you're not using. If you need them later, you can always reimport from the original avatar or outfit unitypackage.

(Reference: How to escape VeryPoor with just Unity | Kohada)

[Caution] Be Very Careful with Face and Body Polygon Reduction!

While Mantis is effective for polygon reduction, it's generally best to leave the "face" and "body" meshes untouched.

The face area in particular is composed of extremely fine polygons to support rich facial expressions. The mouth area needs various polygon configurations for lip sync shapes, and the eye area needs them for blinking and emotion expressions.

Carelessly reducing these areas with Mantis has a high risk of causing the mouth to break during speech or facial expressions to collapse entirely. Similarly, reducing body joint areas can result in unnatural appearances during poses.

Focus polygon reduction on clothing, hair, and accessories, keeping the face and body as close to their original state as possible.

[Decision] Sometimes Design Compromises Are Necessary

When you simply can't reach your target polygon count (70,000 for Poor rank), you may need to make the tough call of sacrificing part of the design.

For my avatar, I reduced the tail part's polygon count with Mantis to some degree, but it still wasn't enough to hit the target. Ultimately, I decided to remove the tail part entirely. It was disappointing, but sometimes these trade-offs are necessary for performance rank improvement.

:::ad

Cases Where Mantis Alone Isn't Enough {#mantis-limitations}

Mantis LOD Editor is an excellent tool, but during the optimization process, several situations arose where Mantis alone wasn't sufficient or efficient:

• Reduction limits on combined parts: When a single object contains multiple elements (e.g., inner and outer clothing fused together), reducing with Mantis causes the lower-polygon section (e.g., the inner layer) to degrade first, preventing adequate reduction of the higher-polygon section (e.g., the outer coat). Ideally, you'd separate the parts and reduce each individually.
• Remaining hidden mesh: Body mesh hidden under clothing (e.g., the stomach area) still counts toward polygon totals even when hidden. You want to delete just those concealed areas.
• Removing specific decorations: You want to remove just certain clothing details (pockets, belts, frills, etc.) to save polygons, but Mantis only offers global reduction.

This is where "MeshDeleterWithTexture beta" becomes invaluable.

(For example, we want to delete this stomach mesh that's hidden under clothing.)

Partial Deletion with MeshDeleter {#meshdeleter}

"MeshDeleterWithTexture beta" is a revolutionary tool that deletes mesh regions corresponding to areas you paint on a texture image (technically, it generates a new mesh with those areas removed).

The workflow is highly intuitive:

1. Download the unitypackage from Gatosyocora's Booth page and import it into your project.

2. A "GotoTools" item appears in Unity's menu bar. Select "MeshDeleter with Texture" to open the tool window.

3. Drag and drop the object whose mesh you want to delete (e.g., the body mesh object) from the Hierarchy window into the "Renderer" field at the top of the window.

4. The texture image assigned to the object appears in the window.

5. Select "PEN" or another draw type from the right side, then paint the areas you want to delete (e.g., the stomach area hidden by clothing) in black on the texture. The painted areas are reflected in real-time on the model in the Scene view, letting you preview what will be removed.

6. After confirming the deletion area, click the "DeleteMesh" button. A new mesh with the specified areas removed is generated and automatically applied to the object.

[Note] MeshDeleter is also non-destructive!

This tool is also non-destructive -- the original mesh data remains in your project. If you made a mistake or want to revert, simply change the Mesh reference in the object's Mesh Renderer (or Skinned Mesh Renderer) component back to the original file.

Using this method to remove the stomach mesh hidden under clothing saved approximately 1,000 polygons. You can then apply Mantis LOD Editor to the remaining areas for even more efficient polygon reduction.

:::ad

Advanced: Separating Clothing Parts {#advanced}

MeshDeleter's "delete mesh by painting on a texture" functionality can also be used to separate fused clothing parts.

The techware outfit I was working with (~60,000 polygons) had the coat (outer layer) and upper-body inner layer built as a single object (mesh). With Mantis, trying to reduce this combined mesh would degrade the lower-polygon inner layer first, preventing sufficient reduction of the higher-polygon coat section.

So I used MeshDeleter to create separate "inner-only" and "outer-only" meshes.

[Part Separation Steps]

1. Duplicate the original techware object in the Hierarchy (Ctrl+D or Cmd+D) and rename each copy descriptively (e.g., "Inner" and "Outer").

2. Select the "Inner" object and open the MeshDeleter window.

3. On the texture, paint all areas corresponding to the outer coat in black and execute "DeleteMesh." This produces a mesh containing only the inner layer.

4. Similarly, select the "Outer" object, and in the MeshDeleter window paint all areas corresponding to the inner layer in black, then execute "DeleteMesh." This produces a mesh containing only the outer coat.

This separates what was originally a single piece of clothing into two distinct meshes: "Inner" and "Outer." The fact that you can separate parts entirely within Unity without needing external modeling software like Blender is incredibly convenient.

After separation, you can apply NDMF Mantis LOD Editor individually to each part (inner, outer) for much more effective polygon reduction.

Optimization Results and Key Takeaways {#summary}

Using the methods described above, the avatar that started at 180,000 polygons with a VeryPoor rank was successfully reduced to 69,995 polygons with a Poor rank.

To reach the target of under 70,000 polygons, I also made design adjustments like removing clothing decorations and reducing coat polygons. The process of reducing polygon count while preserving visual quality requires trial and error, but it was an excellent learning experience.

Both "Mantis LOD Editor (NDMF version)" and "MeshDeleterWithTexture beta" are non-destructive tools, making them relatively safe for beginners to try. The reassurance that "you can always revert" is a significant psychological benefit when undertaking optimization work.

By combining Mantis's powerful polygon reduction capabilities with MeshDeleter's flexible partial editing and creative applications, even VeryPoor-ranked avatars have a strong chance of being effectively optimized.

If you're struggling with polygon counts on your VRChat avatar, I encourage you to try the tools and methods introduced in this article. (Note that performance rank is also affected by factors like material count, so consider those as well if aiming for comprehensive optimization.)

References {#references}

The following articles and videos were invaluable references during this avatar optimization (polygon reduction) work. Thank you for the excellent information!

• Episode 5: lil NDMF Mesh Simplifier VS Mantis LOD Editor - Polygon Reduction Comparison & Guide (VeryPoor to Medium) - INST Channel YouTube (The original link pointed to a YouTube search -- this is a placeholder. Please search for the actual video.)
• Non-Destructive Polygon Reduction! Introducing the NDMF Integration Tool for Mantis LOD Editor | Metacul Frontier
• November 2024 Update: Must-Have VCC Tools for Avatar Modification | Metacul Frontier
• Getting Your Avatar Under 20K Polygons with Mantis LOD Editor (VRChat) | Suzuha
• How to Escape VeryPoor with Just Unity | Kohada

:::ad

Addendum: Considerations for High-End Models {#appendix}

While this article covers improving a Very Poor avatar to Poor rank, it's worth noting that the same approach isn't always the best option for every case. Optimizing so-called "high-end models" with very high initial polygon counts requires particular caution.

These models are appealing precisely because of their intricate decorations, complex outfits, and numerous gimmicks -- but this comes with enormous polygon counts (commonly exceeding 100,000 by a large margin). Applying polygon reduction tools like Mantis LOD Editor to these models can strip away visual detail even at modest reduction levels, significantly diminishing the model's original appeal.

For avatars that are only slightly above the Poor rank threshold (e.g., 70K-100K polygons) or models with inherently simpler designs, the methods in this article work well. However, for high-end models that exceed twice the threshold -- 150K, 200K+ polygons -- trying to forcibly reduce them to Poor rank while maintaining visual quality is often impractical and not recommended.

So what should you do instead? Rather than extreme optimization of a single model, consider a usage-based approach:

• Regular use: Keep your main avatar at its original quality without optimization
• Performance-critical situations: For large gatherings or worlds where performance matters, prepare a separate lightweight version (Quest-compatible versions may already be available) or use an entirely different lightweight avatar

Personal Experience and Reflection

To be honest, after using the Manuka modification I optimized to Poor rank (69,995 polygons) for a while, my perspective changed somewhat. While the polygon reduction was technically successful, I found myself thinking "Was it really worth removing those clothing details for this?" about some of the design compromises I'd made.

Also, given that my VRChat play style doesn't frequently involve performance-critical worlds, the honest truth is that "keeping this particular model at Very Poor probably wouldn't have caused any real problems."

Avatar optimization is an important aspect of enjoying VRChat comfortably, but it's not always a necessity. I believe it's important to carefully consider your play style, the communities you participate in, and how much visual change you're willing to accept before deciding whether and how far to optimize.

However, features that were trivially implemented with plugins on traditional WordPress sites -- such as a "Popular Posts" ranking -- require a bit more creativity in this architecture.

WordPress makes popular posts easy because article data and page view counts are stored in the same database, allowing dynamic data retrieval and aggregation for ranking display. Most JAMstack setups, on the other hand, generate static HTML files at build time, making it difficult to dynamically display rankings based on real-time view counts. Additionally, with the frontend and backend separated, there's no built-in mechanism for recording and referencing access counts.

This is where Google Analytics comes in -- the widely-adopted analytics tool already installed on most websites. By fetching per-page view count data through its API (Google Analytics Data API / GA4 Data API) and integrating it into the build process, you can display a "Popular Posts" section even on a fully static site.

This article walks you through the specific steps and concepts for using the Google Analytics Data API (GA4) to fetch popular post data and implement a "Popular Posts" section in a static site generator environment like Next.js or Gatsby.js.

:::ad

In this article

1. The challenge of implementing popular posts on static sites (headless CMS)
2. Enabling and setting up the Google Analytics Data API (GA4)
3. Using service accounts and security considerations
4. Implementation example: Node.js script for fetching popular post data
5. Integrating JSON data into your static site at build time
6. Summary: API integration makes popular posts possible on static sites!

The Challenge of Implementing Popular Posts on Static Sites (Headless CMS)

As mentioned, traditional dynamic CMS platforms (like WordPress) typically aggregate page views in real-time through database access to display popular post rankings.

However, in a JAMstack static site setup, content is generated at build time, and there's fundamentally no dynamic server-side data processing. This makes it impractical to aggregate view counts in real-time and update rankings on every page load.

This is where leveraging Google Analytics as an external data source becomes effective. Here's the basic flow:

1. Fetch data before building: Run a script that retrieves per-page view counts for a specified period through the Google Analytics Data API. (e.g., top 10 posts by page views over the last 30 days)
2. Format and save the data: Transform the retrieved ranking data into a convenient format (e.g., a JSON file) and save it within the project.
3. Reference the data at build time: When the static site generator (Next.js or Gatsby.js) builds the site, it reads the saved JSON file.
4. Embed in static pages: Use the ranking data (article titles, URLs, page views, etc.) to generate a "Popular Posts" component or list and embed it in the static HTML pages.

With this approach, the latest ranking information is reflected every time the site is deployed (built), while the site itself is served as fast static files -- no performance compromise.

:::ad

Enabling and Setting Up the Google Analytics Data API (GA4)

First, let's enable the API and prepare the necessary credentials to programmatically access Google Analytics data.

1. Enable the API on Google Cloud Platform (GCP):

   • Go to the Google Cloud Console (https://console.cloud.google.com/) and select or create a project.
   • Navigate to "APIs & Services" > "Library," search for "Google Analytics Data API," and enable it.

2. Create a service account and download the key:

   • In GCP, go to "APIs & Services" > "Credentials," select "Create Credentials" > "Service Account," and create a new service account. (The name can be anything; a role is often not required.)
   • Select the created service account, go to "Keys" tab > "Add Key" > "Create New Key," and create a JSON format key. Download it. This JSON file will be used by your script. Keep it safe.

3. Grant the service account access to your GA4 property:

   • Go to Google Analytics (https://analytics.google.com/) and open "Admin" (gear icon) for your target GA4 property.
   • Navigate to "Property Settings" > "Property Access Management," click the "+" button, and select "Add Users."
   • Enter the service account's email address (visible on the GCP credentials page) and grant at least "Viewer" permissions.

4. Note your GA4 Property ID:

   • In Google Analytics under "Admin" > "Property Settings," find the "Property ID" (a numeric-only ID) and save it. This will also be used in your script.

     

For detailed guidance on these steps (especially GCP and GA4 operations), refer to Google's official documentation and other tutorial resources as appropriate for your setup.

:::ad

Using Service Accounts and Security Considerations

When programmatically accessing Google services like the Google Analytics Data API, you typically use a "service account" -- a special account type. Unlike a personal Google account, it's designed for applications and scripts to authenticate themselves.

The service account key (JSON file) you created and downloaded earlier contains secret credentials for API access as that service account. Therefore, handle this key file with extreme care.

• Never expose it publicly: Never commit the JSON key file to a Git repository (especially public repositories). Accidental exposure creates a risk of unauthorized use. Add the key filename to your .gitignore file to exclude it from Git tracking.
• Store it securely: During local development, you might keep it in the project root, but for production environments (deployment targets), the standard practice is to pass credentials securely via environment variables or secret management features. (See the script example below.)
• Minimize permissions: Grant the service account only the minimum required "Viewer" permission on the GA4 property for data retrieval.

:::ad

Implementation Example: Node.js Script for Fetching Popular Post Data

Here's a Node.js script example that uses the prepared service account key and GA4 Property ID to fetch popular post data and save it as a JSON file.

[Setup]

1. Create a scripts folder in your project root directory and save the following script as fetch-popular-posts.js (or any name you prefer).
2. Place the GCP service account key JSON file in your project root directory as service-account.json (or any name).
3. Create a .env file in your project root directory with your GA4 Property ID in the following format (replace ????????? with your actual ID):

GA4_PROPERTY_ID=?????????

4. [Important] Since service-account.json and .env contain sensitive information, add them to your .gitignore to prevent them from being included in the Git repository.

# .gitignore example
service-account.json
.env

5. Install the required npm packages by running the following command in your terminal:

npm install @google-analytics/data dotenv

(Or `yarn add @google-analytics/data dotenv`)

[Script Example: scripts/fetch-popular-posts.js]

// Load environment variables from .env file
require("dotenv").config();
// Google Analytics Data API client library
const { BetaAnalyticsDataClient } = require("@google-analytics/data");
// Node.js file system and path modules
const fs = require("fs");
const path = require("path");

// Define the popular posts fetching logic as an async function
async function fetchPopularPosts() {
  let credentials;

  // --- Credential Setup ---
  // Prefer GA_CREDENTIALS_JSON env variable for production (recommended)
  if (process.env.GA_CREDENTIALS_JSON) {
    try {
      credentials = JSON.parse(process.env.GA_CREDENTIALS_JSON);
    } catch (e) {
      console.error("Failed to parse GA_CREDENTIALS_JSON environment variable.", e);
      process.exit(1);
    }
  }
  // Fall back to local service-account.json file
  else {
    const keyFilePath = path.resolve(__dirname, "../service-account.json");
    if (fs.existsSync(keyFilePath)) {
      credentials = JSON.parse(fs.readFileSync(keyFilePath, "utf8"));
    } else {
      console.error(`Service account key file not found at ${keyFilePath}. Or set GA_CREDENTIALS_JSON env var.`);
      process.exit(1);
    }
  }

  // --- Initialize GA4 Data API Client ---
  const analyticsDataClient = new BetaAnalyticsDataClient({
    credentials: {
      client_email: credentials.client_email,
      private_key: credentials.private_key,
    },
  });

  // --- Get GA4 Property ID ---
  const propertyId = process.env.GA4_PROPERTY_ID;
  if (!propertyId) {
    throw new Error("GA4_PROPERTY_ID is not set in environment variables.");
  }

  // --- Execute API Request ---
  try {
    const [response] = await analyticsDataClient.runReport({
      // Specify the property ID
      property: `properties/${propertyId}`,
      // Data range (last 30 days)
      dateRanges: [{ startDate: "30daysAgo", endDate: "today" }],
      // Dimensions to retrieve (page path, page title)
      dimensions: [{ name: "pagePath" }, { name: "pageTitle" }],
      // Metrics to retrieve (page views)
      metrics: [{ name: "screenPageViews" }], // GA4 uses "screenPageViews" instead of "ga:pageviews"
      // Sort order (descending by page views = highest first)
      orderBys: [{ metric: { metricName: "screenPageViews" }, desc: true }],
      // Number of results (top 10)
      limit: 10,
      // Dimension filter (only pages starting with '/blog/')
      dimensionFilter: {
        filter: {
          fieldName: "pagePath",
          stringFilter: {
            matchType: "PARTIAL_REGEXP", // Partial regex match
            value: "^/blog/", // Paths starting with /blog/
          },
        },
      },
    });

    // --- Format Results ---
    const popularPosts = response.rows.map((row) => ({
      pagePath: row.dimensionValues[0].value,
      pageTitle: row.dimensionValues[1].value,
      pageViews: parseInt(row.metricValues[0].value, 10), // Convert view count to integer
    }));

    // --- Write to JSON File ---
    // Create data directory in project root if it doesn't exist
    const dataDir = path.resolve(__dirname, "../data");
    if (!fs.existsSync(dataDir)) {
      fs.mkdirSync(dataDir);
    }
    // Save as popular-posts.json in the data directory
    fs.writeFileSync(
      path.join(dataDir, "popular-posts.json"),
      JSON.stringify(popularPosts, null, 2) // Pretty-print for readability
    );
    console.log("Successfully fetched popular posts and saved to data/popular-posts.json");

  } catch (error) {
      console.error("Error fetching Google Analytics data:", error);
      process.exit(1); // Exit on error
  }
}

// Execute the function
fetchPopularPosts();

Key points about the script:

• Authentication: The script prioritizes the GA_CREDENTIALS_JSON environment variable, falling back to the local service-account.json file. This allows secure credential handling across both local development and production environments (like Cloudflare Pages). In production, it's common practice to set the entire JSON key content as an environment variable.
• API Request: The runReport method sends a request to GA4.
  • dateRanges: Specifies the data retrieval period (e.g., "30daysAgo" to "today").
  • dimensions: Specifies the types of information to retrieve (page path, title, etc.).
  • metrics: Specifies the metrics to aggregate (page views via screenPageViews, etc.).
  • orderBys: Specifies the sort order (e.g., descending by page views).
  • limit: Specifies the maximum number of results to retrieve.
  • dimensionFilter: [Important] Filters which pages to include. In this example, only pages whose path (pagePath) matches the regex ^/blog/ are retrieved. This prevents non-blog pages (like the homepage /) from appearing in the ranking. Make sure to adjust this value to match your blog's URL structure.
• Formatting and saving: The API response is converted to a convenient JSON format (an array of objects with path, title, and view count) and written to data/popular-posts.json.

Running this script in your terminal with node scripts/fetch-popular-posts.js will save the popular post data as a JSON file in the data folder (created if it doesn't exist).

:::ad

Integrating JSON Data into Your Static Site at Build Time

Once the JSON file with popular post data is ready, all that's left is to have your static site generator (Next.js or Gatsby.js) read this JSON file during the build process and pass the data to pages or components for display.

The critical requirement here is ensuring that the JSON file is updated with the latest data every time the site is built (deployed). Otherwise, the ranking will become stale.

To achieve this, you typically edit the scripts section of your project's package.json file to run the data-fetching script before the build command executes.

[package.json configuration example (for Gatsby.js)]

{
  "scripts": {
    // Define the command that runs the data-fetching script
    "fetch-data": "node scripts/fetch-popular-posts.js",
    // Optionally fetch data when starting the dev server
    "develop": "npm run fetch-data && gatsby develop",
    // Ensure data is fetched before production builds
    "build": "npm run fetch-data && gatsby build",
    // Start command (for dev server startup, etc.)
    "start": "npm run develop"
    // Plus test, serve, etc.
  }
}

In this example:

1. A command called fetch-data is defined to run the data-fetching script.
2. The build command (for production builds) first runs npm run fetch-data, then executes gatsby build. (&& chains commands sequentially.)
3. Similarly, the development server startup commands (develop, start) also fetch data (useful for working with current data during development). For Next.js, add npm run fetch-data && before next dev or next build.

With this configuration, when you run npm run build (or when automatic builds are triggered on hosting services like Vercel or Cloudflare Pages):

1. fetch-popular-posts.js executes first, saving the latest popular post data to data/popular-posts.json.
2. Then the Gatsby (or Next.js) build process starts, reading data/popular-posts.json and generating static HTML pages that include the popular posts section.

This build-time data fetching approach ensures that site visitors always see the most up-to-date popular posts ranking (as of build time) served as fast static pages, without concerns about server load or runtime API calls. This is a major advantage of the JAMstack architecture from both performance and security perspectives.

From here, follow your framework's conventions to read the JSON data at build time and pass it to React components for display. (For example, in Gatsby you might read the JSON in gatsby-node.js and add it to the GraphQL data layer; in Next.js you could use fs.readFile within getStaticProps.)

:::ad

Summary: API Integration Makes Popular Posts Possible on Static Sites!

In static site environments built with JAMstack or headless CMS architectures, it's not straightforward to display a "Popular Posts" section in real-time like you would with a traditional dynamic CMS such as WordPress.

However, as this article has demonstrated, by leveraging the Google Analytics Data API (GA4) to fetch and format access data before the site build process, saving it as a JSON file, and embedding it into static pages at build time, you can maintain all the advantages of a static site (fast loading, high security, scalability) while still displaying an up-to-date popular posts ranking.

This approach isn't tightly coupled to any specific CMS or frontend framework, making it applicable to Next.js, Gatsby.js, and various other JAMstack configurations. While there are some considerations -- such as secure management of service account keys and proper API request filter configuration -- once the system is set up, it automatically updates your ranking on every build.

I encourage you to adapt this approach to your own static blog or website architecture and implement a "Popular Posts" section of your own.

From your own perspective everything looks fine, but from other people's viewpoint, the back side of the coat isn't rendered and the body shows through... This is a relatively common issue encountered when using avatars in VRChat.

This "see-through clothing lining" problem can actually be fixed fairly easily with a simple Unity tool. In this article, I'll explain the cause and walk you through the solution using a tool called "MeshFlipper."

:::ad

:::toc

• Why Clothing Linings Appear See-Through
• Installing and Using MeshFlipper
• How It Works Technically
• Summary

:::

:::ad

Why Clothing Linings Appear See-Through {#cause}

The main cause of this issue is single-sided rendering (also called backface culling), a technique used in most 3D models.

In simple terms, the polygons that make up a 3D model only render their front face by default -- the back face is not drawn. This saves computational resources. For tight-fitting clothing, this works perfectly fine since only the exterior (front face) is ever visible.

However, for garments like coats, capes, and skirts that flow freely or have long hems, the back face can become visible when the character moves or is viewed from certain angles.

With single-sided rendering, this back face is not a render target, so nothing is drawn -- the background or body shows through instead. This is why it looks like "the lining is transparent" or "there's a rendering bug" when viewed from a third-person perspective or through someone else's camera.

To fix this problem, the clothing simply needs to render its back face as well. The tool that makes this easy is "MeshFlipper," introduced next.

:::ad

Installing and Using MeshFlipper {#meshflipper-usage}

While searching for a solution to the see-through lining problem, I came across "MeshFlipper" -- a Unity editor extension tool -- through the following article. (Thank you for the information!)

:::post-link{url="https://note.com/moegitsubasa/n/nd73471257f31#fcc0f527-bb59-4f40-9edf-f6ba3ca05c92" text="Android(Quest) Support Manual Advanced!! - Moegitsubasa"}

MeshFlipper is an incredibly convenient tool that processes 3D model mesh data in Unity to make it double-sided, so the back face is also rendered. It's distributed for free on Booth by the developer fum1.

:::post-link{url="https://booth.pm/ja/items/5645609" text="[Free] Mesh Back Face Generator / Mesh Flipper (BOOTH)"}

Installation and basic usage are very straightforward:

1. Import MeshFlipper into your Unity project Download MeshFlipper from the Booth link above. Drag and drop the MeshFlipper.cs script file from the download into your Unity project's Assets folder (for example, into an Editor folder).

2. Select the mesh with the see-through lining In Unity's Hierarchy window, select the avatar you want to fix and locate the clothing part (object) with the see-through lining. Find the Skinned Mesh Renderer or Mesh Renderer component attached to that object.

3. Open the MeshFlipper window From Unity's menu bar, select fum1 > Mesh Flipper to open the dedicated MeshFlipper window.

4. Configure the options (Important: select TwoSides) With the target clothing part (the object with the Skinned Mesh Renderer, etc.) selected, configure the following options in the MeshFlipper window:

   • TwoSides: Check this option -- this is the key feature. It makes the mesh double-sided so the back face is also rendered.
   • Flip: This reverses the direction of polygon normals. For fixing see-through linings, TwoSides alone is usually sufficient.

   In most cases, simply checking TwoSides is enough to solve the see-through lining problem.

5. Click "Create Mesh" to apply After configuring the options, click the "Create Mesh" button. MeshFlipper will process the selected mesh to make it double-sided, generate new mesh data, and automatically replace the original mesh. (The original mesh data may be kept as a backup.)

After processing is complete, try viewing the back side of the garment in Unity's Scene view, or upload to VRChat and have a friend check. If the lining renders properly and is no longer transparent, you're all set!

How It Works Technically {#technical-details}

On a slightly more technical level, here's what MeshFlipper does internally:

• Vertex duplication and normal inversion: It copies the original mesh's vertex data and inverts the polygon normals (facing direction) on the copy.
• Mesh merging: It combines the original mesh (front face) with the normal-inverted copy (for the back face) into a single mesh.

This effectively creates mesh data that has polygons for both the front face and the back face. As a result, the surface is rendered regardless of which direction it's viewed from, solving the see-through lining problem.

In essence, MeshFlipper creates a "virtual back side" for clothing that originally didn't have one (wasn't rendered).

Since it handles this complex processing with a single button click, it's extremely handy when working with coats, skirts, and other garments where the back side is likely to be visible.

:::ad

Summary {#summary}

If you encounter the issue where your VRChat avatar's clothing (especially coats, capes, skirts, etc.) appears see-through or transparent from the back, consider using the Unity editor extension tool "MeshFlipper."

With a simple process, it makes meshes double-sided, and in most cases, this alone is enough to make the lining render properly.

MeshFlipper is distributed for free on Booth by the developer fum1. If you're a VRChat user or avatar customizer dealing with the same issue, I highly recommend giving it a try!

:::post-link{url="https://booth.pm/ja/items/5645609" text="[Free] Mesh Back Face Generator / Mesh Flipper (BOOTH)"}

While there are many tools available for this task, I initially tried "Subset Font Maker" but encountered rendering issues in my environment. Ultimately, I used the Python library "FontTools" to subset Noto Sans JP into WOFF2 format while preserving all OTF layout data (kerning, ligatures, and other typographic features), successfully reducing the file size by over 50% and improving load times. Here's a detailed record of the steps and key considerations.

:::ad

In this article

1. What is font subsetting, and why does it help page speed?
2. The pitfall: How Subset Font Maker dropped OTF data and broke the layout
3. The solution: Step-by-step subsetting with FontTools
4. Results: The impact of FontTools subsetting on page speed

1. What Is Font Subsetting, and Why Does It Help Page Speed?

Font subsetting is the process of extracting only the characters your website actually uses from a font file, removing unnecessary character data to reduce file size. The reasoning is simple: "Why load every obscure kanji and special symbol when you only use a fraction of them? Keep just the characters you need, and your site will load much faster!"

"Noto Sans JP", a widely-used Japanese font also available on Google Fonts, is a high-quality typeface that covers a vast number of characters (hiragana, katakana, common kanji, name kanji, symbols, and more).

Noto Sans Japanese (Google Fonts)

Because of this extensive coverage, when you download and use it as a web font (e.g., in WOFF format), even just the Regular and Bold weights can weigh in at roughly 4MB each. That means users have to download a huge amount of data every time they visit a page, creating a significant bottleneck for display speed.

(The font files before subsetting -- notice how large they are.)

This is exactly why subsetting these massive font files is so important.

:::ad

2. The Pitfall: How Subset Font Maker Dropped OTF Data and Broke the Layout

When researching font subsetting, you'll frequently find recommendations for a GUI tool called "Subset Font Maker." Following several tutorial guides, I used this tool along with "WOFF Converter" to create a subset WOFF font from Noto Sans JP (TTF format).

However, when I applied the generated font to my site, unexpected layout issues appeared.

(Left: original rendering. Right: after conversion with Subset Font Maker. Notice how the character spacing in the article title is unnaturally wide.)

After investigating the cause, it turned out that Subset Font Maker had stripped important OTF (OpenType Font) data during the conversion process -- specifically the information needed for character spacing adjustments (kerning, pair kerning) stored in tables like GPOS.

OTF data does more than define character shapes; it contains critical information for fine-tuning the visual appearance of text, such as automatically adjusting spacing between characters, or substituting specific character combinations with ligatures (GSUB table). Without this data, character spacing reverts to default values, causing the layout to break.

There's no point in reducing file size if the visual quality suffers. So I searched for a tool that could perform high-precision subsetting while preserving OTF data, and that's when I found the Python library "FontTools."

:::ad

3. The Solution: Step-by-Step Subsetting with FontTools

FontTools is a powerful suite of Python libraries for manipulating font files. It's open source and supports a wide range of advanced operations on TTF and OTF fonts -- subsetting, data editing, format conversion, and more. It's also conveniently usable from the command line.

FontTools (GitHub Repository)

Here's how to create a Noto Sans JP subset using FontTools:

3-1. Installing FontTools

FontTools is a Python library, so first make sure Python is installed on your system. Once Python is available, run the following pip command in your terminal to install FontTools:

pip install fonttools brotli zopfli

Installing brotli and zopfli alongside FontTools is recommended for WOFF2 support and higher compression ratios (via the --with-zopfli option).

3-2. Running the Subsetting Command

Next, use the pyftsubset command in your terminal to perform the subsetting. Navigate to the directory containing your original Noto Sans JP font file (e.g., NotoSansJP-Regular.ttf) and run the following command. (Adjust filenames and paths to match your environment.)

# Example: Create a subset WOFF2 from NotoSansJP-Regular.ttf
pyftsubset NotoSansJP-Regular.ttf \
  --output-file=NotoSansJP-Regular.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes='U+0020-007E,U+3000-30FF,U+4E00-9FAF,U+FF01-FF60,U+FF65-FF9F' \
  --with-zopfli \
  --verbose

For Bold or other weights, simply change the input and output filenames and run the command again.

Command option breakdown:

• NotoSansJP-Regular.ttf

  The source font file (TTF or OTF) to subset.

• --output-file=NotoSansJP-Regular.woff2

  The output filename and path for the subset font.

• --flavor=woff2

  Specifies the output format as WOFF2. WOFF2 is optimized for web fonts and provides high compression ratios for smaller file sizes.

• --layout-features='*'

  [KEY OPTION] This is what preserves OTF data. Setting '*' retains all OpenType layout feature information, including kerning and ligatures. This prevents the layout issues that occurred with Subset Font Maker.

• --unicodes='...'

  [KEY OPTION] Specifies the Unicode ranges of characters to include in the subset. Characters outside these ranges will not be included and won't render properly (appearing as missing glyphs), so configure this carefully. The ranges in the example above cover:

  • U+0020-007E: Basic ASCII alphanumeric characters and symbols
  • U+3000-30FF: Full-width space, punctuation, hiragana, katakana, etc.
  • U+4E00-9FAF: CJK Unified Ideographs (covers most commonly used kanji)
  • U+FF01-FF60: Some full-width alphanumeric characters and symbols
  • U+FF65-FF9F: Half-width katakana

  Adjust these ranges based on the characters your site actually uses. For example, add corresponding Unicode ranges if you use specific symbols or less common kanji.

• --with-zopfli

  Uses Google's Zopfli compression algorithm for even higher WOFF2 compression. Effective for further file size reduction. (Requires the zopfli library.)

• --verbose

  Outputs detailed logs during the subsetting process. Useful for troubleshooting errors and verifying which data was included or excluded.

3-3. Loading the Generated WOFF2 File via CSS

Once the command completes successfully, a lightweight WOFF2 subset font file will be generated at the specified location. Upload this file to your web server and update your CSS to load it using @font-face rules.

/* Regular weight */
@font-face {
  font-family: 'Noto Sans JP'; /* Specify the font name */
  /* Path to the generated WOFF2 file */
  src: url('/path/to/your/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400; /* or normal */
  font-style: normal;
  /* font-display: swap; controls behavior during font loading. Recommended. */
  font-display: swap;
}

/* Bold weight */
@font-face {
  font-family: 'Noto Sans JP';
  /* Path to the bold WOFF2 file */
  src: url('/path/to/your/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700; /* or bold */
  font-style: normal;
  font-display: swap;
}

/* Add additional weights as needed */

/* Apply the font to body or specific elements */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

Your website will now use the lightweight subset font.

:::ad

4. Results: The Impact of FontTools Subsetting on Page Speed

Here are the results of subsetting Noto Sans JP with FontTools:

(After subsetting with FontTools -- the file sizes are dramatically reduced!)

This reduction in file size means the browser downloads less data, resulting in faster page load times. The following network analysis shows the font loading times before and after the change.

Before (without subsetting):

After (subsetting with FontTools):

The reduced file size clearly results in shorter loading times. This directly contributes to improved page speed metrics like Core Web Vitals.

While FontTools is a command-line tool, once you understand the commands, it enables high-precision subsetting that preserves OTF data. If you're looking to improve your website's load speed -- especially if large Japanese font files are weighing it down -- I highly recommend giving FontTools subsetting a try. You can achieve even greater size reductions by further narrowing the character ranges in the --unicodes option.

• Opening folders or displaying files in Explorer was taking unusually long.
• During file operations like renaming, the display would briefly reset (frustratingly committing the input mid-edit).
• Occasionally the entire PC would briefly freeze, with the Windows taskbar and other elements appearing to reload.

I tried memory diagnostics, GPU driver updates, and deleting unnecessary files, but nothing helped. I was starting to think "Maybe it's time for a new PC..." But before giving up, I decided to check the state of my C drive -- the heart of the PC.

Bright red! Less than 5% free space remaining -- a danger zone.

Generally, it's recommended to keep at least 10-15% free space on the C drive where Windows is installed. When free space is extremely low, it can interfere with Windows temporary file creation, paging file (virtual memory) allocation, and system updates, leading to system instability, performance degradation, slower read/write speeds (especially on SSDs), and various other issues.

So I decided to tackle this storage shortage by cloning the entire contents of my current C drive (a ~500GB M.2 SSD) to a new, larger SSD (a 2TB 2.5-inch SSD) and swapping them. While the capacity expansion ultimately succeeded, I ran into a nasty Windows boot issue along the way that gave me quite a headache.

This article documents the specific steps for the SSD clone and replacement, the tools I used, and how I dealt with the boot error "0xc000000e" -- as a reference for anyone facing similar C drive capacity issues or considering an SSD replacement.

:::ad

:::toc

• Preparation
• Step 1: Creating the SSD Clone
• Step 2: Creating Installation Media
• Step 3: SSD Installation and Boot Error Resolution
• Step 4: Partition Expansion
• Replacement Complete and Results

:::

:::ad

Preparation {#preparation}

Here are the main items and software I used for this SSD clone replacement:

• New SSD: Silicon Power 2TB SSD 3D NAND A58 (2.5-inch SATA)

  • The destination SSD. Choose any capacity, form factor (M.2 NVMe, 2.5-inch SATA, etc.), and brand you prefer. I chose this one because it was on sale. Switching from M.2 to 2.5-inch is fine as long as your motherboard has a free SATA port.

    :::post-link{url="https://amzn.to/3VicRQJ" text="Silicon Power 2TB SSD 3D NAND A58 (Amazon)"}

• SSD Cloning Software: Macrium Reflect Free

  • Software for copying (cloning) the entire contents of the original SSD to the new one. There are many options, but I chose this one because it was free and highly rated.

    :::post-link{url="https://www.gigafree.net/system/SystemBackup/macriumreflectfreeedition.html" text="Macrium Reflect Free (Mado no Mori)"}

    :::post-link{url="https://note.com/combat_travor/n/n931acb354e2d" text="How to Clone an SSD Using Macrium Reflect Free (combat-travor)"}

• USB Drive: 16GB or larger

  • Used for recovery if Windows fails to boot after the replacement. Needed to create Windows installation media. [Important] I strongly recommend creating this beforehand.

    :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows10" text="Windows 10 Media Creation Tool (Microsoft)"}

    :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows11" text="Windows 11 Media Creation Tool (Microsoft)"}

• Partition Management Software: Paragon Hard Disk Manager 15 (or equivalent)

  • Used after the replacement to adjust (expand) the partition size so the new SSD's full capacity is available for the C drive. Windows' built-in "Disk Management" can also do this, but dedicated software offers more flexible operations. I used software I already had, but free partition management tools are also available.

• SATA-to-USB Adapter Cable/Enclosure (optional):

  • Needed if you're doing the clone via USB before installing the new SSD internally. Not needed if you can connect it directly inside the PC.

You can use different SSDs and software than those listed above. Choose based on your setup and budget. However, I recommend creating Windows installation media in advance, just in case of boot issues.

*BCD (Boot Configuration Data) is a file that stores configuration information needed for Windows to boot (such as which disk to boot the OS from). If boot errors occur after an SSD replacement, one possible cause is that the BCD information no longer matches the new environment.

:::ad

Step 1: Creating the SSD Clone {#step1-clone}

First, clone (copy) the entire contents of your current C drive to the new SSD.

1. Connect the new SSD to your PC. (Use a SATA-to-USB adapter or connect to a free internal port)

2. Launch the cloning software (Macrium Reflect Free in this case).

3. Follow the software's instructions to select the source drive (current C drive) and destination drive (new SSD), and start the clone process.

(For detailed steps, the reference article by combat-travor mentioned above is very helpful.)

In my environment, cloning the C drive with about 450GB of data took approximately 3 hours and 40 minutes. The time varies significantly depending on your setup and data volume.

[Tip] Partition Size During Cloning

Some cloning software lets you specify the destination partition size. Generally, it's safest to clone at the same size as the source. Leave the remaining capacity on the new SSD as "unallocated" space at the time of cloning. This unallocated space will be merged with the C drive later in Step 4.

The recommended approach is to set the partition size to match the original drive during cloning. Leave the remaining space on the larger SSD as "unallocated" for now.

After cloning is complete, verify using Windows' "Disk Management" (diskmgmt.msc) or partition management software that the new SSD has the same partition structure as the original C drive, with the remainder as unallocated space.

(The original C drive contents have been copied, with the remainder shown as unallocated)

Step 2: Creating Installation Media {#step2-media}

Ideally, Windows would boot right up after the SSD swap, but boot errors can occur depending on your environment. In my case, I got the following blue screen error:

Error code "0xc000000e" typically occurs when Windows cannot access the boot device (in this case, the new SSD) or when there's a problem with the Boot Configuration Data (BCD).

To repair this error, you need to launch Command Prompt from the Windows Recovery Environment. For this, create Windows installation media (USB drive) in advance.

1. Download the "Media Creation Tool" from Microsoft's official website.

   :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows10" text="Windows 10 Media Creation Tool (Microsoft)"}

   :::post-link{url="https://www.microsoft.com/ja-jp/software-download/windows11" text="Windows 11 Media Creation Tool (Microsoft)"}

2. Connect a blank USB drive (16GB or larger) to your PC.

3. Run the downloaded Media Creation Tool and follow the on-screen instructions to select "Create installation media for another PC (USB flash drive, DVD, or ISO file)" and create the installation media on the USB drive.

With this USB drive, you can perform repair operations even if Windows won't boot.

:::post-link{url="https://jp.minitool.com/data-recovery/fix-error-0xc000000e.html" text="How to Fix Error Code 0xc000000e in Windows 10 (MiniTool)"}

:::post-link{url="https://drmpls.com/2023/07/21/replaced-the-ssd-cannot-boot/" text="Causes and Solutions When a Cloned SSD Won't Boot (Dr. M Place)"}

Step 3: SSD Installation and Boot Error Resolution {#step3-install}

Once the cloning and installation media creation are done, it's time for the actual SSD swap.

1. Completely power off the PC and unplug the power cable.

2. Open the PC case, remove the old SSD (original C drive), and install the new SSD (the cloned one). (Don't forget anti-static precautions!)

3. Close the PC case, connect the power cable, and turn on the PC.

4. Immediately after powering on (while the manufacturer logo is displayed), press the designated key (usually DEL or F2) to enter the BIOS (UEFI) settings screen.

5. In the BIOS settings, find the "Boot" menu and check the boot priority (Boot Options / Boot Priority). Verify that the newly installed SSD is recognized as "Windows Boot Manager" and is set as the first boot priority. (If it's not recognized or has a low priority, change the settings.)

6. Save the settings and exit BIOS to restart the PC.

[Trouble] BIOS recognizes the drive but 0xc000000e error prevents booting!

This was the biggest hurdle in my case. Despite the BIOS correctly recognizing the new SSD as the boot drive, attempting to boot Windows would produce the blue screen error "0xc000000e."

Initially, I suspected a failed clone and re-cloned using different software (Paragon), but the result was the same.

[Solution] Boot from Windows Installation Media and Rebuild the BCD

Ultimately, I resolved the issue by following these steps using the Windows installation media (USB drive) created in Step 2. This process repairs and rebuilds the Windows Boot Configuration Data (BCD).

1. With the PC powered off, connect the Windows installation media (USB drive).

2. Power on the PC and immediately enter the BIOS settings.

3. Change the boot priority to make the USB drive first, then save and restart.

4. When the Windows Setup screen boots from the USB drive, select "Repair your computer" > "Troubleshoot" > "Advanced options" > "Command Prompt."

5. In Command Prompt, execute the following commands in order. These repair the boot sector and rebuild the BCD. (See the reference articles below for detailed procedures.)

   • bootrec /fixmbr
   • bootrec /fixboot (see note below)
   • bootrec /scanos
   • bootrec /rebuildbcd

   (In some cases, you may also need to assign a drive letter to the EFI partition using the diskpart command.)

:::post-link{url="https://freesoft.tvbok.com/tips/efi_installation/uefi_bootrec.html" text="How to Repair UEFI from Command Prompt (Bokunchi no TV Annex)"}

[Note] "Access is denied" error with bootrec /fixboot

During the command execution, you may encounter an "Access is denied" error with bootrec /fixboot. This appears to be a common issue with recent Windows versions (especially when installed in UEFI mode).

In my case, I ignored this error and proceeded to execute bootrec /scanos and bootrec /rebuildbcd, which ultimately allowed Windows to boot successfully. The fixboot command is primarily used for repairing older MBR-format disks, and in UEFI environments, it may not be necessary or may require alternative steps (like EFI partition manipulation using diskpart).

If you encounter this error and Windows still won't boot after running rebuildbcd, you may need to try additional solutions described in the reference articles below.

:::post-link{url="https://itojisan.xyz/trouble/17752/" text="What to Do When 'bootrec /fixboot' Access Is Denied (IT HOOK)"}

Once the BCD rebuild succeeds, exit Command Prompt and restart the PC -- Windows should now boot from the new SSD!

Step 4: Partition Expansion {#step4-partition}

Once Windows boots successfully, it's time for the final step. Currently, the new SSD only has a partition the same size as the original C drive, with the remaining large capacity sitting as "unallocated" space. We need to merge this unallocated space with the C drive so the SSD's full capacity is usable.

This can be done with Windows' built-in "Disk Management," but if a recovery partition or similar is sandwiched between them, expansion may not be possible. Using dedicated partition management software is more reliable.

I used "Paragon Hard Disk Manager 15," which I already had. Select a feature like "Resize/Move Partition," select the C drive partition, and expand it to absorb the unallocated space behind it, maximizing the size.

After applying the settings, the PC usually requires a restart, and the partition change is processed on a pre-Windows boot screen. Once the processing completes and Windows boots again, the C drive capacity should be expanded to the new SSD's maximum capacity (approximately 2TB in this case).

:::ad

Replacement Complete and Results {#result}

After going through all these steps, I successfully replaced the C drive SSD from 500GB to 2TB, dramatically expanding the capacity!

With sufficient free space on the C drive (over 15%), all the PC issues I'd been experiencing -- Explorer slowdowns, display redraws, brief freezes -- disappeared as if by magic. Indeed, insufficient C drive free space has a significant impact on system stability. Don't ignore a red drive indicator; address it early (whether by deleting unnecessary files or expanding capacity like I did).

SSD clone replacement isn't overly complicated in terms of procedure, but boot issues can arise depending on your environment. UEFI environments in particular seem prone to BCD-related problems. I hope the troubleshooting described in this article helps anyone facing the same issue. (Please note: all operations are at your own risk.)

When you want to add dramatic cutscenes (event scenes) to your RPG Maker game, you'll be pleasantly surprised -- compared to other game engines like Unity or Unreal Engine, RPG Maker makes it remarkably easy to create basic cutscenes.

This article covers everything from creating basic cutscenes using RPG Maker's built-in features to enhancing them with camera control for more expressive storytelling. For camera effects, we'll use the popular plugin "Galv_CamControl.js."

With these techniques, you can make your game's story more engaging and memorable for players.

In this article

1. Creating basic cutscenes (RPG Maker built-in features)
2. Adding camera effects (Galv_CamControl plugin)
3. Completing a polished cutscene

:::ad

Creating Basic Cutscenes (RPG Maker Built-in Features)

Let's start with creating cutscenes using only RPG Maker's standard features -- no plugins required.

(You can create scenes like this using just the built-in features.)

By combining the following basic event commands, you can easily create cutscenes with character conversations and movement:

• Show Text: Displays character dialogue or narration. Combine with face graphics to clearly show who's speaking.
• Show Balloon Icon: Displays icons like "!" or "?" above characters' heads to visually express emotions or states.
• Set Movement Route: Moves event characters or the player along a specified path. You can also include direction changes, waits, and switch operations. Being able to specify target characters by "This Event" or by name is incredibly intuitive.
• Change Transparency: Temporarily hides the player character from the screen. Useful for transitions into and out of event scenes.

[Tip] Give Your Events Descriptive Names!

For those with experience in other game engines, RPG Maker's event creation features -- particularly the character targeting (e.g., "Player," "This Event," "Event ID: 1") and movement route setup -- are surprisingly polished and streamlined.

One important practice: always give descriptive names to events placed on the map (e.g., "VillagerA," "Chest_Cave"). Since you can select events by name when setting up event commands, it makes management much easier. Even for solo development, this saves you from the "which event was that again?" confusion during later debugging and modifications, helping your future self. As game development progresses and data grows more complex, these small habits make a big difference.

Now, while built-in features alone can create cutscenes, they may start to feel a bit monotonous with the same fixed camera angle throughout. Let's add some camera work to spice things up.

:::ad

Adding Camera Effects (Galv_CamControl Plugin)

Adding camera control to your basic cutscenes can greatly enhance immersion, guide the player's attention, and create more impressive visual storytelling. In RPG Maker MV/MZ, the standard approach for camera control is to use a plugin.

We'll be using "Galv_CamControl.js," a well-established camera control plugin used by many RPG Maker developers.

Plugin source: Galv's Scripts - MV Cam Control (For MZ, you may need a community-modified version. Please search and verify separately.)

[Installing the Plugin]

1. Download the plugin file (Galv_CamControl.js) from the above site (or find a compatible version).
2. Copy the downloaded file into the js/plugins folder of your RPG Maker project.
3. Open the RPG Maker editor and go to "Tools" > "Plugin Manager."
4. In the Plugin Manager window, double-click an empty row, select "Galv_CamControl" from the "Name" dropdown, and click "OK."
5. Make sure the status is set to "ON" and click "OK" to close the Plugin Manager.

The plugin is now active, and you can execute camera control commands through the "Plugin Command" event command.

Basic Usage of Galv_CamControl (Plugin Commands)

You can control the camera by executing the following commands via the "Plugin Command" event command. (These are MV-based syntax examples. The format may differ slightly for MZ or specific modified versions -- check the plugin's help documentation.)

• Focus the camera on a specific event (follow it): Example: CAM EVENT 1 (focuses camera on Event ID 1) Example: CAM EVENT 2 (focuses camera on Event ID 2)
• Return the camera to the player (follow the player): CAM PLAYER
• Move the camera to specified map coordinates: CAM MAP X Y (Example: CAM MAP 10 15 moves the camera to coordinates (10, 15))
• Unlock camera tracking (fix at current position): CAM TARGET 0

[Note: Camera Scroll Duration] You can add a number (frame count) after a space following any of the above commands to make the camera scroll smoothly over that duration. For example, CAM EVENT 1 60 will smoothly scroll the camera to Event 1 over 60 frames (1 second). If no duration is specified, the camera moves instantly.

Combining these commands with event commands like "Show Text," "Set Movement Route," and "Wait" lets you focus the camera on whoever is speaking, highlight important items or locations, and more.

[Advanced Application: "Show, Don't Tell" Game Design]

Good game design goes beyond telling players "go here" or "pick up that." By briefly showing the destination or target object with the camera, you guide players to understand intuitively what to do next.

Camera control plugins like Galv_CamControl are excellent not just for cutscene effects but also for implementing this "show, don't tell" design approach. For example, when an NPC gives a quest, you can briefly pan the camera to the objective or relevant object. This makes it clearer for players what to do next, improving the overall gameplay experience.

Advanced Technique: Standoff Scenes For tense scenes where characters face each other, you can place a transparent empty event between the two characters and lock the camera on that event (e.g., CAM EVENT [empty event ID] [duration] followed by CAM TARGET 0). This positions the characters at opposite edges of the screen with empty space in the center, creating a cinematic composition.

:::ad

Completing a Polished Cutscene

By combining basic event commands (dialogue, movement, balloon icons, etc.) with camera control via Galv_CamControl, you can see how the initially simple cutscene becomes much more dynamic and visually engaging.

In 2D-based games like those made with RPG Maker, event scenes can easily feel monotonous without visual movement. By effectively moving the camera, you can guide the player's viewpoint, emphasize the importance of a scene, deliver emotional impact, and keep players engaged throughout.

Combining RPG Maker's accessible event creation features with plugin-based camera control is a straightforward way to make your game's storytelling significantly more compelling.

Are you interested in VRChat but wondering "How do I get an avatar?" or "Customization sounds complicated..."? Actually, the process of importing and customizing VRChat avatars has become much more straightforward and accessible compared to before.

This article documents my experience as a VRChat beginner purchasing the popular avatar model "Manuka" on Booth and attempting my first avatar customization -- outfit changes, texture color and eye modifications, hairstyle changes, and more.

In particular, the official tool "VCC (VRChat Creator Companion)" has made the avatar uploading process through Unity remarkably simple. I hope this article serves as a helpful reference for anyone looking to start using avatars in VRChat or try their hand at avatar customization.

(I started VRChat avatar customization as part of my 3D modeling learning journey. Here's my planned learning path:)

1. Basic customization of existing purchased avatars (outfit changes, color modifications, simple gimmicks, etc.) -- The focus of this article
2. Importing VRoid Studio-created models into VRChat (practicing texture creation, etc.)
3. Full-scratch model creation in Blender (ultimate goal)

This time, I'll share a detailed account of Step 1 -- the experience, procedures, and stumbling blocks I encountered.

:::ad

:::toc

• Purchasing and Importing Manuka
• Outfit Changes
• Eye and Clothing Color Changes
• Hairstyle Change
• Summary
• Bonus: World Creation Mishaps

:::

:::ad

Purchasing and Importing Manuka {#manuka-import}

For my first avatar customization base, I chose the hugely popular 3D model "Manuka," created and sold by Studio DINGO.

:::post-link{url="https://jingo1016.booth.pm/items/5058077" text="Original 3D Model 'Manuka' ver1.02 (BOOTH)"}

I happened to be looking for an avatar right when the creator was running a Black Friday sale (50% OFF!) on X (formerly Twitter), which sealed the deal. As expected from such a popular model, the quality is excellent and she's adorable!

[Tips] Sales on Booth: Booth, where many VRChat avatars and outfits are sold, occasionally has individual creator sales. If you find a model you like, following the creator's X account might help you catch special deals.

For the avatar import process (importing into Unity and uploading to VRChat), this article from "Metacul Frontier" was extremely helpful. It features detailed explanations with screenshots, making it a great starting point for beginners.

:::post-link{url="https://metacul-frontier.com/?p=15582" text="[Complete Guide] How to Upload and Import VRChat Avatars (Metacul Frontier)"}

VCC (VRChat Creator Companion) is Incredibly Convenient!

What impressed me most during this avatar import was the VRChat official tool "VCC (VRChat Creator Companion)." I remember the Unity setup and VRChat component installation being much more complicated back in 2018, but VCC made it surprisingly easy.

Just select what you want to create (avatar or world) in VCC and create a new project -- everything you need gets automatically set up in a Unity project. It eliminates the hassle of manual configuration through Unity Hub and is incredibly stress-free. The project management screen is also clean and easy to read, making it a tremendous help for beginners.

:::ad

Outfit Changes {#clothing}

With the avatar imported, it's time for the first step of customization: changing outfits. Normally, third-party outfit assets need fine-tuning in Unity to match the avatar's body shape, but for popular avatars like "Manuka," many creators sell "Manuka-compatible" outfits on Booth that are already optimized for her. This is extremely helpful for beginners.

This time, I wanted to shift from the default energetic vibe to something more subdued and mysterious, so I was looking for oversized techwear. That's when I found "Manuka-Compatible Outfit [Tech Wear]" by hajimata General Store.

:::post-link{url="https://booth.pm/ja/items/6288909" text="Manuka-Compatible Outfit [Tech Wear] (BOOTH)"}

By sheer coincidence, it was released on the same day I was searching, so I bought it immediately. The design and quality are outstanding!

Since it's a "Manuka-compatible" outfit, the import is very straightforward. Basically, you just drag the purchased outfit's Prefab (a pre-configured component set) into the Manuka avatar object in Unity's Hierarchy window. (Hide the original outfit and unnecessary parts. This time, I also hid the animal ears.)

For outfit changing methods, the "Metacul Frontier" article mentioned earlier was also very helpful.

:::post-link{url="https://metacul-frontier.com/?p=13689" text="How to Easily Customize Outfits Bought on BOOTH in Unity (Metacul Frontier)"}

[Pitfall] Accessory Tracking Setup Mistake

I had a small mishap with the placement of the tactical goggles that came with the Tech Wear.

Initially, I placed the goggles Prefab at the same hierarchy level as the outfit body, so the goggles tracked the body's movement but not the head's movement, causing them to clip inside the head.

[Solution] Accessories like goggles that need to follow the head must be placed as a child object of the "Head" bone within the avatar's bone structure (Armature). Specifically, move the goggles Prefab under Armature/Hips/Spine/Chest/Neck/Head. This makes the goggles move with the head.

Understanding the avatar's parent-child relationship (hierarchy structure) is key to properly placing accessories.

:::ad

Eye and Clothing Color Changes {#color-change}

After the outfit, I modified the eye and clothing colors, which greatly affect the avatar's overall impression.

The easiest way to change eyes is to purchase and swap in eye textures sold on Booth. However, this time I tried directly editing Manuka's original face texture file as practice for future 3D model creation.

[Steps]

1. Find the face texture file (.png or .psd, etc.) for Manuka in the Unity project and copy it to a working folder.
2. Open the copied texture file in an image editor like Photoshop or CLIP STUDIO PAINT and redraw the eye area. (This time, I changed the pupil shape and made the color green.)
3. Export the edited texture as a PNG file.
4. Save the exported PNG file to the same folder as the original texture file in the Unity project, overwriting with the same filename.

When you overwrite the file, Unity automatically detects the change and applies it to the avatar's appearance. Very convenient.

[Pitfall] Highlights Still Showing After Deletion? -- The Shape Key Trap

After updating the eye texture, I encountered a puzzling issue: "Wait, the eye highlights and clover pattern I deleted in the texture editor are still showing...?"

[Cause and Solution] These elements were controlled by "Shape Keys," not by the texture. Shape Keys are a feature that lets you change the shape of specific parts of an avatar using sliders, commonly used for facial expressions (eye blinks, mouth movements) and toggling small decorative details on/off.

In Unity's Inspector window, select the avatar's face or body mesh (Skinned Mesh Renderer) and check the "BlendShapes" (Shape Keys) section. If there's a slider with a name corresponding to the highlights or pattern, adjusting its value removes the display. (In other words, I didn't need to remove them from the texture at all!)

While I was at it, I also adjusted the shape key that slightly lowers the eyelids for a more subdued look. Shape Keys are an incredibly powerful feature for giving your avatar personality.

For the clothing color change, I overlaid a navy-colored layer on the original black clothing texture to match the eye color, then used the same overwrite method. For more elaborate customization, you could also draw additional patterns.

This brought me much closer to the "calm and mysterious" look I was going for.

:::ad

Hairstyle Change {#hairstyle}

For the finishing touch, I changed the hairstyle too. Once again, "Manuka-compatible" hairstyle assets were abundantly available on Booth, and I quickly found one that matched my vision. That's the advantage of a popular avatar.

This time, I purchased "Ear-out Bob" by Kayasutoa.

:::post-link{url="https://kayastore.booth.pm/items/5061681" text="Ear-out Bob [Manuka Hairstyle] (BOOTH)"}

Manuka's default bun hairstyle is cute too, but I felt the bob's subdued silhouette better fit this concept. (I kept the included ribbon as an accent and enlarged it to maximum size.)

[Pitfall] Error During Hairstyle Setup

Similar to the outfit, I encountered an error when trying to set up the purchased hairstyle Prefab by placing it into the avatar object. (This particularly happens when using tools like Modular Avatar.)

[Solution] In such cases, you can add "MA Bone Proxy" (a component included in Modular Avatar) to the hairstyle object and specify the avatar's "Head" bone in the component's "Bone Reference." This ensures the hair properly follows the head. (Once this is set up, you don't need to re-run the setup tool.)

Different assets may have different import methods, so it's important to carefully read the included Readme documentation.

:::ad

Summary {#summary}

This time, as my "first VRChat model import and customization," I used the popular avatar "Manuka" as a base to try purchasing and importing outfits and hairstyles, as well as editing eye and clothing textures and colors.

Thanks to the VRChat official tool "VCC," the abundance of compatible assets on Booth, and the many clear tutorial articles left by pioneers, even a beginner like me was able to proceed through avatar customization relatively smoothly and enjoyably. I'm grateful to everyone involved.

I think I managed to achieve the "calm and mysterious" Manuka I was aiming for, at least to some extent.

The road to my ultimate goal of full-scratch model creation in Blender is still long, but through customization work like this, I've been gradually deepening my understanding of texture editing, Unity operations, and avatar structure (Armature and Shape Keys). If I keep trying things like VRoid model imports, I feel like I might eventually reach that goal.

Above all, watching my avatar transform through my own work was incredibly fun. I hope this article serves as some kind of reference for anyone about to step into the world of VRChat avatars or attempt their first avatar customization. Next time, I'd like to try more complex customizations like adding gimmicks!

Bonus: World Creation Mishaps {#bonus}

Alongside avatar customization, I also briefly tried my hand at VRChat "world creation." My naive thought of "If I'm making a world, it should be an obstacle course!" led me straight into a wall.

The most challenging part was the "getting players to ride on moving platforms" mechanic. Even when placing moving platforms using normal game development techniques, players in VRChat don't follow the platform's movement and simply fall through. This is because VRChat is an online game that needs to constantly sync position data for multiple players, so simple physics alone doesn't cut it.

Apparently, workarounds using sit gimmicks exist, but implementing moving platforms requires quite technical implementation. I'll start by learning basic world building first.

Normally, to switch the player character per map, you need to place a "Change Party Leader" command inside each map transfer or location move event. However, as the number of target maps grows, this method has several issues:

• It's time-consuming to set up and copy events for each map.
• It's prone to bugs from missed settings or incorrect character assignments.
• It becomes difficult to review and manage which character leads on which map.

To solve these issues, I created the plugin "UM_MapActorSetting.js" -- simply add a tag to a map's note field, and the player character automatically switches to the specified actor when entering that map.

This article covers the plugin's features, installation method, configuration steps, and specific usage examples. It's recommended for anyone who wants a simpler way to implement character switching without event commands.

:::ad

In this article

1. Plugin Overview and Benefits
2. Plugin Installation
3. Basic Setup (Parameters and Map Notes)
4. Usage Example (Switching Between Hero and Princess)
5. Usage Notes
6. Plugin Code (UM_MapActorSetting.js)

Plugin Overview and Benefits

As mentioned above, the standard way to switch player characters per map in RPG Maker MV/MZ is through the "Change Party Leader" event command. However, this method becomes cumbersome and hard to manage as the number of maps increases.

The UM_MapActorSetting.js plugin was developed to solve this problem.

Key features and benefits:

• Specify in the map's note field: Which character to control on which map is specified with a simple tag (e.g., <Player:hero>) in each map's "Note" field.
• Automatic switching: When the player enters a map with a note tag set, the plugin automatically swaps the party leader (player character) to the specified actor.
• No events needed: You no longer need to create and place switching events on each map.
• Simple configuration: Just link an "identifier" to an "Actor ID" in the plugin parameters and write the identifier in the map notes. It's easy to set up, review, and modify later.

This makes developing games with multiple switchable characters much smoother.

:::ad

Plugin Installation

Installing the plugin is straightforward.

1. Copy the plugin code at the bottom of this article, paste it into a text editor (such as Notepad), and save the file as UM_MapActorSetting.js.
2. Place the created UM_MapActorSetting.js file in the js/plugins folder within your RPG Maker project directory.
3. Open the RPG Maker Editor and go to "Tools" menu > "Plugin Manager."
4. Double-click an empty row in the plugin list, select UM_MapActorSetting from the "Name" dropdown, set "Status" to "ON," and click "OK."

The plugin is now active.

Basic Setup (Parameters and Map Notes)

Next, configure the plugin to work correctly.

Plugin Parameter Settings

First, link the "identifiers (arbitrary strings)" used in map note fields with the actual "Actors (characters)" to switch to.

1. Double-click (or select and press Enter) UM_MapActorSetting in the Plugin Manager to open the "Parameters" section on the right.
2. Double-click the "ActorSettings" (Actor Settings List) item.
3. Double-click an empty row (or use the "+" button) to add a new entry.
4. In the new entry, configure these two items:
   • Character ID: Enter an arbitrary identifier to use in map note tags (alphanumeric characters recommended, e.g., hero, princess, actor1, etc.).
   • Actor: Select the actor you want to associate with this identifier from the database using the dropdown menu on the right.
5. Add entries for as many characters as you want to switch between.
6. Click "OK" when done.

Map Note Settings

Next, configure the maps where you want the player character to automatically switch.

1. In the RPG Maker Editor, open the map where you want automatic character switching.
2. Right-click the map name (or select the map in edit mode) and open "Map Settings" (or "Map Properties").
3. In the "Note" field at the bottom right, enter a tag in the following format:

<Player:identifier>

Replace identifier with the exact "Character ID" you set in the plugin parameters. (e.g., <Player:hero>)

4. Click "OK" when done.

Now, when the player moves to this map, the actor corresponding to the identifier specified in the <Player:identifier> tag will automatically become the party leader (player character).

:::ad

Usage Example (Switching Between Hero and Princess)

As an example, let's say "Actor ID: 1" is "Hero" and "Actor ID: 2" is "Princess" in the database.

1. Plugin Parameter Settings:

Configure the following in the Plugin Manager:

• Entry 1:
  • Character ID: hero
  • Actor: 0001: Hero (Actor ID 1 in the database)
• Entry 2:
  • Character ID: princess
  • Actor: 0002: Princess (Actor ID 2 in the database)

2. Map Note Settings:

For example, set up notes for two maps as follows:

• Map 1 (Hero's Town) Note field:

<Player:hero>

• Map 2 (Castle) Note field:

<Player:princess>

Result:

• When the player enters the "Hero's Town" map, the player character automatically switches to "Hero."
• When the player enters the "Castle" map, the player character automatically switches to "Princess."

This way, you can achieve per-map player character switching without using any event commands.

Usage Notes

• Character switching occurs automatically during map transitions (after a Transfer Player command, etc.) and when loading a save file.
• The identifier in the map note tag <Player:identifier> must exactly match the "Character ID" set in the plugin parameters. It is case-sensitive. If the identifier is incorrect, the switch won't work.
• The plugin performs a simple operation: it swaps the specified actor to the front of the party (moving them to the front if already in the party, or adding them and placing them at the front if not). It does not control the entire party composition or order. If you specify an actor not currently in the party, that actor will be added and become the leader. (The previous leader will be removed from the party.)
• If you add or modify actors in the database, or change the "Character ID" in the plugin parameters, be sure to update the plugin parameter settings accordingly.
• There is a possibility of conflicts with other plugins that modify party members. Please be cautious when using them together.

:::ad

Plugin Code (UM_MapActorSetting.js)

Feel free to use this plugin code. Modifications are also welcome.

//=============================================================================
// UM_MapActorSetting
//=============================================================================

/*:
 * @plugindesc Automatically switches the player character based on map note tags.
 * @author UHIMA
 *
 * @param MapActorSettings
 * @text Actor Settings
 * @type struct<ActorConfig>[]
 * @desc Settings for each actor
 *
 * @help
 * ============================================================================
 * Overview
 * ============================================================================
 * This plugin enables automatic player character switching based on
 * map note tags.
 *
 * ============================================================================
 * Usage
 * ============================================================================
 * Add the following note tag to maps where you want to switch the player character:
 *
 * <Player:characterId>
 *
 * You can link database Actor IDs with character names in the plugin parameters.
 * This allows simple notation like <Player:harold> to switch actors.
 * When adding new characters or changing Actor IDs, update this plugin's
 * mappings accordingly.
 *
 * Example:
 * <Player:harold>
 */

/*~struct~ActorConfig:
 * @param Character ID
 * @text Character ID
 * @type string
 * @desc Identifier used in map note tags (e.g., harold)
 *
 * @param Actor
 * @text Actor
 * @type actor
 * @desc The actor to switch to
 */

(function () {
  var parameters = PluginManager.parameters("UM_MapActorSetting");
  var MapActorSettings = JSON.parse(parameters["MapActorSettings"] || "[]").map(
    (setting) => JSON.parse(setting)
  );

  var _Game_Player_performTransfer = Game_Player.prototype.performTransfer;
  Game_Player.prototype.performTransfer = function () {
    _Game_Player_performTransfer.call(this);
    switchActorByMap();
  };

  function switchActorByMap() {
    if ($dataMap && $dataMap.meta.Player) {
      var characterId = $dataMap.meta.Player;
      var actorConfig = MapActorSettings.find(
        (config) => config["Character ID"] === characterId
      );

      if (actorConfig) {
        var newActorId = Number(actorConfig.Actor);
        var currentLeader = $gameParty.leader();
        var currentLeaderId = currentLeader ? currentLeader.actorId() : null;

        if (currentLeaderId !== newActorId) {
          if (currentLeaderId) {
            $gameParty.removeActor(currentLeaderId);
          }
          $gameParty.addActor(newActorId);
          $gamePlayer.refresh();
        }
      }
    }
  }

  var _Scene_Map_start = Scene_Map.prototype.start;
  Scene_Map.prototype.start = function () {
    _Scene_Map_start.call(this);
    switchActorByMap();
  };
})();

When creating games in RPG Maker MV or RPG Maker MZ, you'll often want to implement gimmicks where a path opens up after a certain condition is met. For example, after defeating a boss or solving a puzzle, floor tiles appear in a previously impassable area, allowing the player to proceed.

These "floors that appear when a switch is turned ON" are effective gimmicks that give players a sense of accomplishment and expand exploration possibilities.

This article explains how to use the Event system in RPG Maker MV/MZ to make floor tiles (platforms) appear and become passable when a specific switch is turned ON.

:::ad

In this article

1. Why Use "Events" to Create Floors? (Overview)
2. Editing the "Tileset" to Use Floor Tile Images in Events
3. Setting Up Floor Events That Appear and Become Passable via Switch
4. Summary: Create Dynamic Maps with Events

Why Use "Events" to Create Floors? (Overview)

In RPG Maker, basic terrain like ground and walls is created by placing "tiles" on the map. However, tiles placed on the map are fundamentally static -- you cannot toggle their visibility or remove them based on in-game switch or variable states.

Therefore, dynamic gimmicks like "floors that appear under certain conditions (switch ON)" need to be implemented using the "Event" system. With events, you can set appearance conditions, specify display images, and control passability settings.

In this article, we'll set up an example where, when the in-game switch "#0001_PassableFloor" is turned ON, floor tiles appear at designated locations and become passable.

:::ad

Editing the "Tileset" to Use Floor Tile Images in Events

First, you need to prepare so that the floor graphic you want to show can be set as an event's image.

Try creating a new event on the map and opening the image settings. You'll likely notice that while you can select images from [Tileset B] (walls, objects, etc.) and [Tileset C] (building roofs, etc.), the ground and floor tile images are not listed.

This is because the tilesets available as event images are limited by default. To fix this, open the "Database" (the gear icon in the toolbar) and modify the settings in the "Tilesets" tab.

1. Open the Database and select the "Tilesets" tab.

2. Select the tileset currently used by your map (e.g., 001: Field).

3. In the settings on the right, set the same image file that's assigned to the [A] tab's [A2] (ground tiles) to the [D] tab (or another available tab, e.g., [E]).

4. That's it. Click "Apply" or "OK" to close the Database.

This adds [Tileset D] (or whichever tab you configured) to the event's image selection list, allowing you to choose floor tiles from there.

[Important] Check the Passability Settings!

In the tileset editing screen, select the floor tile image you just added and make sure to check the "Passability" setting on the left side.

• O: Passable
• X: Impassable
• Star: Passable (displayed above the player)

If the floor tile you want to appear is set to "X" (impassable), the player won't be able to walk on it even when the event displays the floor. Make sure it's set to "O" (or Star, depending on the situation). If it's set to X, click to change it to O.

:::ad

Setting Up Floor Events That Appear and Become Passable via Switch

Once the tileset is prepared, create the events that will make the floor appear. The setup is very straightforward.

1. Right-click on the map tile where you want the floor to appear and select "Create Event."

2. When the Event Editor opens, leave Page 1 (the initial state) with no image set and essentially in its default state. However, check/set the following two points:

• Options: Make sure the "Through" checkbox is unchecked. (If checked, the player could pass through even when there's no floor)
• Priority: Select "Below characters." (This allows the player to walk over the floor when it appears)

(The trigger can stay at the default "Action Button." The execution content can also remain empty.)

3. Next, click the "New Event Page" button at the top of the Event Editor to create Page 2.

4. On Page 2, configure the state when the floor appears:

• Conditions: In the "Conditions" section on the left, check "Switch" and specify that the target switch (e.g., #0001_PassableFloor) is "ON."
• Image: Double-click the "Image" area in the lower left to open the tileset selection screen. Select the floor tile you made available earlier (e.g., from [Tileset D]) and click "OK."
• Options: Same as Page 1, leave "Through" unchecked.
• Priority: Same as Page 1, select "Below characters."

(The trigger and execution content can also remain at their defaults for this page.)

5. The event setup is complete. Click "OK" to close the Event Editor.

6. Copy the "appearing floor" event you created (Ctrl+C or Cmd+C) and paste it (Ctrl+V or Cmd+V) onto other tiles where you want the floor to appear.

Test play the game and trigger the event that turns ON the specified switch (e.g., #0001_PassableFloor). Floor tiles should appear at the locations where you placed the events, and you should be able to walk on them.

That completes the implementation of passable floors that appear via switch operation.

:::ad

Summary: Create Dynamic Maps with Events

This article explained the basic method for implementing "floors that appear when a switch is turned ON" using the Event system in RPG Maker MV/MZ.

Here are the key points:

• Since tiles themselves cannot be dynamically changed, create the floor as an "Event."
• To use floor tile images as event graphics, you need to modify the "Tileset" settings in the "Database" beforehand.
• When editing the tileset, make sure the floor tile's "Passability" is set to "O (passable)."
• The event should have a 2-page structure: Page 1 is blank (switch OFF state), and Page 2 has the appearance condition (switch ON), floor image, and options (Through OFF, Priority: Below characters).

Using this technique, you can create more dynamic games where the map changes based on player actions -- like new paths opening after a boss fight, or hidden passages appearing when puzzles are solved. Try incorporating it into your own projects!

While the Input System offers a "Hold Interaction" for detecting long presses, this guide takes a different approach. Instead, we'll use the basic button events "the moment a button is pressed (started)" and "the moment a button is released (canceled)" to measure the time difference between them.

Compared to the traditional approach of monitoring input every frame in the Update function, the Input System's event-driven approach results in cleaner code and better maintainability, especially when adding or modifying features.

In this article

1. Implementing Charge Attacks: Input System (Press) vs Update vs Hold Interaction
2. Installing the Input System and Creating an Input Actions Asset
3. Input Actions: Defining the Left Click (Attack Button) Action
4. Script Integration: PlayerInput and Event Handling Script
5. Charge Time Calculation Logic: Using started and canceled
6. Adding Mid-Charge Effects: Compensating for Input System Limitations with Coroutines
7. Summary: Pros, Cons, and When to Use the Press Event Approach

:::ad

Implementing Charge Attacks: Input System (Press) vs Update vs Hold Interaction

There are several ways to implement a charge attack. Let's look at the characteristics of each approach.

• Traditional Update function approach:
  • Check input every frame in Update() and measure how long the button has been held.
  • The concept is intuitive, but the code tends to become complex as the number of input types and conditional branches increases.
• Using Input System's Hold Interaction:
  • Set the Interaction to "Hold" in the Input Actions asset. After the button is held for a specified time (Hold Time), the performed event fires.
  • Easy to set up, but as we'll discuss later, implementing both "short press (normal attack)" and "long press (charge attack)" on the same button can become somewhat complex.
• Using Input System Press events (started/canceled) (this article's approach):
  • Use the moment the button is pressed (started) and the moment it's released (canceled) to measure the time between them.
  • Event-driven code stays organized, and you can flexibly implement short press vs. long press detection and mid-charge processing.

Q. Why use Press events (started/canceled) instead of Hold Interaction?

Hold Interaction is convenient for detecting that a button has been held for a specified duration. However, it has some drawbacks when you want to "use the same button for both short press (normal attack) and long press (charge attack)" or when you want to "add visual effects while charging."

• Combining short and long presses: With Hold Interaction, if you want to execute a short press action (like a normal attack) immediately when the button is pressed -- before the Hold is completed and performed is called -- extra work is needed. For example, you might need to trigger a normal attack on started and cancel it if Hold completes, or set up a separate action for short presses, which complicates the implementation.
• Using the press start timing: If you want the character to immediately enter a ready stance or start a charge effect the moment the button is pressed, it can be difficult to control the timing with Hold Interaction alone.
• Mid-charge control: When displaying a charge gauge or implementing level-up effects at certain intervals during charging, Hold Interaction makes fine-grained control difficult since you have to wait for the final performed event.

On the other hand, the Press event (started/canceled) approach introduced in this article offers:

• Precise measurement of hold duration by calculating the time difference between the started event (button pressed) and the canceled event (button released).
• Easy determination of "normal attack if held less than the threshold, charge attack if held longer" within the canceled event handler.
• A natural flow: start the charge animation and effects on started, then trigger the attack on canceled.
• Flexible mid-charge effects and state changes when combined with coroutines (discussed later).

In summary, when you need flexible short press / long press detection and mid-charge effects and state management, the started/canceled event approach is well-suited.

:::ad

Installing the Input System and Creating an Input Actions Asset

First, install the Input System package in your project and create an Input Actions asset to define your inputs.

Installing the Input System Package

This is done through the Unity Editor menu.

1. Open Window > Package Manager.
2. Select "Packages: Unity Registry" from the dropdown in the upper left.
3. Find "Input System" in the list and click the "Install" button.
4. If a dialog prompts you to change project settings during installation, select "Yes" to restart the editor.

Creating an Input Actions Asset File

Next, create an asset file to define input actions.

1. Right-click in the Project window and select Create > Input Actions.
2. Give the created asset file a descriptive name (e.g., PlayerInputActions.inputactions).
3. Select the created asset file, check "Generate C# Class" in the Inspector window, and click the "Apply" button.

Checking "Generate C# Class" auto-generates a C# class corresponding to this Input Actions asset, making it easier to handle input events from scripts.

Input Actions: Defining the Left Click (Attack Button) Action

Double-click the Input Actions asset file (e.g., PlayerInputActions.inputactions) to open the editor window, and define the action used for the charge attack.

1. Click the "+" button in the Action Maps column to create a new Action Map (e.g., Gameplay). An Action Map is a group that organizes related actions.
2. Click the "+" button in the Actions column to create a new Action (e.g., AttackLeft). This corresponds to a specific input operation.
3. Select the AttackLeft Action and configure the following in the Properties panel on the right:
   • Action Type: Select "Button." This is suitable for simple press/release inputs.
4. Select <No Binding> under the AttackLeft Action and configure the following in the Properties panel. This binds the action to a specific device button:
   • Path: Select "Mouse" > "Left Button" from the dropdown menu. (Gamepad buttons can also be configured here)
5. When you're done editing, click the "Save Asset" button at the top of the window to save your changes.

Now, "left mouse click" is registered as an action named AttackLeft that can be received as events from scripts.

Script Integration: PlayerInput and Event Handling Script

To make the defined Input Actions work in your game, set up the script integration.

1. Create an empty GameObject in the scene and give it a descriptive name (e.g., InputManager).

2. Add a "Player Input" component to the InputManager GameObject.

3. Drag and drop the Input Actions asset you created earlier (e.g., PlayerInputActions.inputactions) into the "Actions" field of the Player Input component.

4. Create the following C# script (e.g., InputManager.cs) and attach it to the InputManager GameObject.

using UnityEngine;
using UnityEngine.InputSystem;

// Indicates that the PlayerInput component is required
[RequireComponent(typeof(PlayerInput))]
public class InputManager : MonoBehaviour
{
    // Variable to record the time when the button was first pressed
    private float buttonPressStartTime;
    // Threshold time for determining a charge attack (e.g., 1 second)
    private const float specialAttackThreshold = 1.0f;

    // Method called by the PlayerInput component
    // The method name should be "On" + the action name defined in Input Actions (e.g., AttackLeft),
    // or manually configured in the Inspector as described below
    public void OnAttackLeft(InputAction.CallbackContext context)
    {
        // Processing when the button is pressed (started)
        if (context.started)
        {
            Debug.Log("Attack button pressed (started)");
            // Record the press start time
            buttonPressStartTime = Time.time;
            // You can also add ready stance or charge effect start processing here
        }
        // Processing when the button is released (canceled)
        else if (context.canceled)
        {
            Debug.Log("Attack button released (canceled)");
            // Calculate how long the button was held
            float pressDuration = Time.time - buttonPressStartTime;
            Debug.Log($"Press duration: {pressDuration} seconds");

            // If the hold time exceeds the threshold, perform a charge attack
            if (pressDuration > specialAttackThreshold)
            {
                PerformSpecialAttack(); // Call charge attack method
            }
            // Otherwise, perform a normal attack
            else
            {
                PerformNormalAttack(); // Call normal attack method
            }
        }
        // context.performed is often called at nearly the same time as started for Button type
        // When not using Hold Interaction, primarily use started and canceled
    }

    // Perform a normal attack (placeholder implementation)
    private void PerformNormalAttack()
    {
        Debug.Log("Perform Normal Attack!");
        // Add actual normal attack logic here
    }

    // Perform a charge attack (placeholder implementation)
    private void PerformSpecialAttack()
    {
        Debug.Log("Perform Special Attack!");
        // Add actual charge attack logic here
    }
}

5. Select the InputManager GameObject and set the Player Input component's "Behavior" to "Invoke Unity Events" in the Inspector window.

6. Expand the "Events" section, open the Action Map name you configured (e.g., Gameplay), and click the "+" button next to the action name (e.g., Attack Left).

7. Drag and drop the InputManager GameObject itself into the event field, then select "InputManager" > "OnAttackLeft (InputAction.CallbackContext)" from the dropdown menu on the right. (If your script method is named On[ActionName], it may be recognized automatically)

Now, every time the left mouse button is clicked (pressed or released), the OnAttackLeft method in the InputManager.cs script will be called. This event-driven mechanism allows you to handle input without using the Update function.

:::ad

Charge Time Calculation Logic: Using started and canceled

Let's take a closer look at the charge time calculation logic in the OnAttackLeft method of the InputManager.cs script discussed above.

1. Press start (context.started):
   • This block executes the moment the left mouse button is pressed.
   • The current time (Time.time) is recorded in the buttonPressStartTime variable. This becomes the starting point for measuring charge time.
2. Press end (context.canceled):
   • This block executes the moment the held left button is released.
   • The press duration (pressDuration) is calculated by subtracting the recorded press start time (buttonPressStartTime) from the current time (Time.time).
   • The calculated pressDuration is compared to the predefined charge attack threshold (specialAttackThreshold).
   • If pressDuration exceeds the threshold, PerformSpecialAttack() is called; otherwise, PerformNormalAttack() is called.

By using the Input System's started and canceled events this way, you can precisely measure how long a button was held and branch between normal and charge attacks accordingly. Since there's no need to add time every frame inside Update(), the code becomes simpler and may reduce processing overhead.

Adding Mid-Charge Effects: Compensating for Input System Limitations with Coroutines

The Input System's event-driven model excels at capturing instantaneous events like "pressed" and "released," but it requires some extra work when you want to trigger processing at a specific timing while the button is being held (e.g., the moment a charge attack becomes available).

For instance, if you want effects like "make the character glow when the charge time reaches the threshold" or "play a charge complete sound effect," the started and canceled events alone cannot directly detect that "midpoint."

One common solution is to use Unity's Coroutines. Start a coroutine when the button is pressed (started), and after a set time (the charge attack threshold) has elapsed, send a charge complete signal.

Here's an example of the InputManager.cs with a coroutine added to implement a charge complete signal (using Debug log output here).

using UnityEngine;
using UnityEngine.InputSystem;
using System.Collections; // Required for coroutines

[RequireComponent(typeof(PlayerInput))]
public class InputManager : MonoBehaviour
{
    private float buttonPressStartTime;
    private const float specialAttackThreshold = 1.0f;
    // Variable to hold the running coroutine
    private Coroutine chargeCheckCoroutine;
    // Flag indicating whether the charge complete signal has been sent
    private bool isChargeComplete = false;

    public void OnAttackLeft(InputAction.CallbackContext context)
    {
        if (context.started)
        {
            Debug.Log("Attack button pressed (started)");
            buttonPressStartTime = Time.time;
            isChargeComplete = false; // Reset flag when charging starts

            // Stop any existing coroutine (handles rapid button presses)
            if (chargeCheckCoroutine != null)
            {
                StopCoroutine(chargeCheckCoroutine);
            }
            // Start the charge timer coroutine
            chargeCheckCoroutine = StartCoroutine(ChargeTimerCoroutine());
        }
        else if (context.canceled)
        {
            Debug.Log("Attack button released (canceled)");
            // Stop the charge timer coroutine when the button is released
            if (chargeCheckCoroutine != null)
            {
                StopCoroutine(chargeCheckCoroutine);
                chargeCheckCoroutine = null; // Clear the coroutine reference
            }

            float pressDuration = Time.time - buttonPressStartTime;
            Debug.Log($"Press duration: {pressDuration} seconds");

            // If the charge complete flag is set (= threshold exceeded), perform charge attack
            if (isChargeComplete) // You could also use pressDuration > specialAttackThreshold
            {
                PerformSpecialAttack();
            }
            else
            {
                PerformNormalAttack();
            }

            // Reset the flag after executing the attack
            isChargeComplete = false;
        }
    }

    // Coroutine that monitors charge time
    private IEnumerator ChargeTimerCoroutine()
    {
        // Wait for the threshold duration
        yield return new WaitForSeconds(specialAttackThreshold);

        // When the threshold is reached (and the button is presumably still held)
        // Set the isChargeComplete flag and send the charge complete signal
        // Note: checking context.ReadValue<float>() > 0 would be more precise
        Debug.Log("Charge Complete threshold reached!");
        isChargeComplete = true;

        // Trigger charge complete effects here (glow, sound effect, etc.)
        TriggerChargeCompleteEffect();

        chargeCheckCoroutine = null; // Coroutine finished
    }

    private void PerformNormalAttack()
    {
        Debug.Log("Perform Normal Attack!");
        // Normal attack logic
    }

    private void PerformSpecialAttack()
    {
        Debug.Log("Perform Special Attack!");
        // Charge attack logic
    }

    private void TriggerChargeCompleteEffect()
    {
         Debug.Log("Play Charge Complete Effect!");
        // Charge complete effect processing (display effects, play sound, etc.)
    }
}

In this code, when the button is pressed, ChargeTimerCoroutine starts and after specialAttackThreshold seconds, sets the isChargeComplete flag to true and calls the TriggerChargeCompleteEffect() method. When the button is released (canceled), the code checks whether this flag is true to determine whether to execute a charge attack or a normal attack.

By combining coroutines this way, you can leverage the benefits of the Input System's event-driven model while also handling mid-charge processing at intermediate timings. While it may seem more complex than implementing it in Update, as the number of input types grows or coordination with other actions becomes necessary, the Input System's Action Maps and event-based separation of concerns help keep your overall code organized.

:::ad

Summary: Pros, Cons, and When to Use the Press Event Approach

We've seen how using Unity's Input System Press events (started / canceled) enables an event-driven implementation of charge attacks.

Pros:

• No need to use the Update function; code is organized on a per-event basis.
• Precise capture of press start and end timings.
• Relatively easy to distinguish between short and long presses and branch processing accordingly.
• Input mapping management through Input Actions assets is intuitive, with high extensibility for key configuration and similar features.

Cons (considerations):

• Processing at "specific timings while the button is held" (like charge complete effects) requires complementary mechanisms such as coroutines.
• For simple charge time measurement alone, implementing in the Update function may feel simpler in some cases.

Which approach should you choose?

The best implementation method depends on your project's scale, requirements, and team preferences.

• For small projects or prototypes with few inputs beyond the charge attack, a simple Update function implementation may be sufficient.
• For medium to large projects that prioritize diverse inputs (gamepad support, key configuration, etc.), coordination with other actions, and future extensibility and maintainability, combining the Input System's Press events with coroutines is a strong option. Hold Interaction is also an option, but the Press event approach has advantages when you need the flexibility described in this article.

The Input System has a learning curve, but once you're comfortable with it, it becomes a powerful tool. Give it a try and implement charge attacks in whatever way best suits your project.