【ゲーム UI】ローカライズとUIデザイナー テクスチャ編

【ゲーム UI】ローカライズとUIデザイナーテクスチャ編アイキャッチ AdobeCC
AdobeCCゲーム制作
この記事は約9分で読めます。

アフィリエイト広告を利用しています-

かなりのご無沙汰しております。
一応生きてます。

さて今回は結構前に書いたローカライズの記事の続きというか、
単純にローカライズ用のスクリプトを改修したのでついでというか……まぁそんな感じのお話。

スポンサーリンク

ローカライズに対するテクスチャの制作

昨今は主にゲームのシステム内のフォントを使用して表示させるテキスト(以後便宜上”システムテキスト”)を使用することがほとんどとなり、ローカライズも多少は楽になりました(ほんと多少ね……)

上記システムテキストはデザイン的な制限はあるものの(エンジンによってはリッチな処理も可能ではある)、レイアウト等を気にして構成してあれば、多少言語が変わってしまっても見た目をある程度は担保できる点と
スケーラブルフォントを使用することで拡縮による見た目のクオリティの減少を抑えられるという点が魅力で、
さらに翻訳が変更されてもデザイン側で作業がほぼほぼ発生しない(ように作っておくのは重要)というのが利点ですね。

スケーラブルフォントとは、ベクターデータで構成されているフォントデータの為拡縮による劣化の影響を軽減できる

しかし今でも一部テクスチャとしてテキスト素材を使用すること自体は未だに残っています(以後便宜上”グラフィックテキスト”)
例えばロゴやバナーなどもそれに当てはまります。

昔はシステムテキストは一部の文章などに使用して、UIで使用する文字などもほとんどグラフィックテキストを使用していたので、
ローカライズの時などは膨大なコストとなっていた。
今では結構一般的におこなうローカライズも、以前は国内販売のみのタイトルなども多くローカライズの対応すらされていないタイトルをローカライズさせるなんてのはまさに地獄の作業でしたw

まぁそんな面倒くさい作業を出来るだけ簡略化してければ、それだけコストも下げることが出来るので
できればそうしたい、ってかすべき!

スクリプト(jsx)で自動化

まぁそんなわけで面倒くさい作業は極力省エネでいきたいので繰り返すことはすべてエクステンドスクリプト(jsx)に任せてミスも減らしていこう!ってこと。

そのまえにグラフィックテキストってどんな風な作業をするのかを紹介

グラフィックテキストの制作時の主な作業の例

基本的には、他のテクスチャと同じルールで制作していきますが、
ローカライズの特徴としては、各言語ごとに同じだけどテキストが翻訳された状態の物を言語の数だけ増産しなければいけません。

各言語の準備

例えば日本語で“ねこ”と表示されているテクスチャがあるとして
英語だと”Cat” フランス語だと”Chat” イタリア語だと”Gatto”……。   
みたいな全然違うわけですよ(綴りが同じであっても別に作るんですが)

日本語の”ねこ”のグラフィックテキスト


まずは日本語の”ねこ”のテクスチャだけがあった場合、
それをもとに英語の”Cat”を用意します。日本語と英語ではフォントによる差異がでるのでこの時に調整をします。

複製後の日本語の”ねこ”
複製後の英語の”Cat”

続くフランス語以降(アルファベットがベースの言語)は都合が良い英語の”Cat”を複製しておきます(言語分)

フランス語以降を複製したレイヤー構成

翻訳文字列をテキストレイヤーにコピペする

あとは翻訳された文字列をPSDのテキストレイヤーにコピペしていきます(以降言語分繰り返し)
みたいな地味な作業を翻訳言語(テキストテクスチャ×言語数)分進めるわけです。
これでとりあえずPSD(画像データ)は準備できた(はず)

複数の翻訳された言語が入れられた状態

言語ごとに任意のフォーマットで書き出し

次はこれをエンジン等で使用しているフォーマットに保存し直してデータ化して実装します。

書き出されたデータ

例としてはこんな感じでしょうか。
これらの作業を全てスクリプトで自動化してしまおうというのが今回のお話となります。



ダウンロード

サンプルのpsdも内包してます

テスト用にスクリプトと同名のフォルダ内にサンプルのpsdを準備してますので、そちらで動作確認も可能です。

どんなScript(jsx)?

さて本題。何ができるScriptなのか?

中身は大きく分けて3つのスクリプト

  • Run_standby_localize.jsx (各言語の準備)
  • Run_importString_localize.jsx (翻訳文字列をテキストレイヤーに置換)
  • Run_exportSave_localize.jsx (言語ごとに任意のフォーマットで書き出し)

その他に共通処理用の「Lib_generalMethod.jsx」「Lib_localize_language.jsx」
おまけの「Act_getFontName.jsx」とcsv制作用のxlsmデータが入っています。

そのいち 「Run_standby_localize.jsx」と「Run_importString_localize.jsx」の使いかた
そのに 「Run_exportSave_localize.jsx」とおまけ「Act_getFontName.jsx」の使いかた 
csv制作用のxlsmデータ

同じ形式でcsvを制作できるならばxlsmを使用しなくても問題ありません。

共通必須条件

各スクリプトごとに多少固有の構造条件がありますがそれは後ほど
共通する構造条件をこちらには記載しておきます。

  1. 最前面レイヤーセットとして各言語のレイヤーセットが並列に並んでいること(各言語名称のレイヤーセット)
  2. 上記の親レイヤーセットの子として「loc」の名称を1つだけ配置する(この中がローカライズ対象となります)
    「loc」以外のフォルダがあっても問題はありません(「loc」という名称は1つのみです)
  3. 「loc」の子に置換する”ラベル名称”のレイヤーセットを配置する(この中にあるすべてのテキストレイヤーが対象となります)
共通の必須条件例

各言語の準備のスクリプト

「Run_standby_localize.jsx」は各言語の準備のスクリプトです。

上記で説明した用に
ベースとなる(したい)言語のレイヤーセットを複製設定した言語分複製してくれます。

設定した言語

後で説明しますが、言語の数や種類を設定しないといけないので
「localizeLanguage.xlsm」を使用してcsvデータを作ります
このcsvデータは3つのスクリプト全てで使用します

必須条件(注意事項)

  1. ベースにしたい言語を選択しますが、PSD内にその言語名称のレイヤーセットがない場合は複製されません。
  2. 複製された言語フォルダと同名のフォルダがある場合警告が表示されます(同名の言語フォルダは1つにまとめるか、不要な方を削除してください)
  3. localizeLanguage.xlsmでのA列の順番で複製されます(詳しくは下記をご覧ください)

localizeLanguage.xlsm

以下のルールをもとにデータを入力してください

A列:各言語名称
B列:各言語で使用するフォント名称

各言語の準備でベースとする言語はA列の数字が少ない行に記載しておくことをおすすめします
ベースとなった言語から記載している一番下までを複製となります。ベースとなった言語よりも数字の少ない行は複製されません。

また、フォントの名称はフォトショップなどで表記されている名称ではないことがあります(スクリプト上で判断されている名称と差異がある)
ですのでフォント名を確認したいときは「Act_getFontName.jsx」を使用すると便利です。

一度保存して制作されたcsvデータ「localizeLanguage_BOMutf8.csv」がスクリプトと同じディレクトリに存在していると自動で読み込みをします。
逆に「localizeLanguage_BOMutf8.csv」が存在しない場合は、ウインドウが開きますので任意のcsvを選択して開いてください。

翻訳文字列をテキストレイヤーに置換するスクリプト

「Run_importString_localize.jsx」は翻訳文字列をテキストレイヤーに置換するスクリプトです。

「Run_importString_localize.xlsm」で制作した翻訳文字列を記載したcsvを使用して
PSD内の任意の言語の任意のテキストレイヤーに対して記載された文字列を置換していきます。
この時に言語ごとに指定したフォントに変更することもできます。

データの大きさや、翻訳数によっては時間がかかる作業ですので注意してください

必須条件(注意事項)

  1. 複製されたときに「~のコピー」等が名称に付与される場合がありますが、あってもなくても問題はありません
  2. Run_importString_localize.xlsmのA列と置換したい「loc」の子の名称(ラベル名称)が同じレイヤーセットの中にあるテキストレイヤーが翻訳文字列で置換されていきます
フランス語以降を複製したレイヤー構成

上記の画像ではラベル名称は「text_animal01」の部分になります。

Run_importString_localize.xlsm

以下のルールをもとにデータを入力してください

A列:置換するテキストレイヤーの親のレイヤーセット名称(ラベル名称
B列:言語名称
C列:置換する翻訳文字列

言語ごとに任意のフォーマットで書き出しするスクリプト

「Run_exportSave_localize.jsx」は言語ごとに任意のフォーマットで書き出しするスクリプトです。

各言語ごとのフォルダを制作しその中に任意のフォーマットで保存をします。
名称はPSDと同じものとなります。

おまけのスクリプト

「Act_getFontName.jsx」はフォントの名称(スクリプト内での判別名称)を確認しクリップボードにコピーするスクリプトです。

PSDのテキストレイヤーを選択した状態でスクリプトを起動してください。
起動すると名称の表示と同時にコピーされます。
「localizeLanguage.xlsm」のB列に記載するフォント名はこちらをペーストすると便利です。

使い方とインストール方法

必須条件を満たしたpsdを開いて、
ツールバーの「ファイル」→「スクリプト」→任意のスクリプトを選んで起動してください。

インストールの仕方や詳しいことは下の記事で書いてるのでチェック!

こちらの「どうやって使うの?」に書いてあるよ!




おわりに

ローカライズ対応は地味で手間な面倒な作業ですのでスクリプトなどを使い作業の速度アップとミスの軽減が期待できます。
よかったら使用してみてくださいね。


あっ、スクリプト(jsx)の使用はあくまで自己責任でヨロ(逃走)


コメント