【Roblox】テキストのサイズ調整

はじめに

今回はRobloxでテキストのサイズを自動調整するための方法について紹介します。
RobloxのUIのサイズ設定にはScaleとOffsetの2種類が存在していて、Scaleを使用して設定することで画面サイズに対しての比率でUIのサイズを設定することができます。
しかしテキストにはサイズを比率で設定する方法がありません。

Robloxバージョン：0.625.0.6250509

①Robloxの標準機能と問題点

RobloxではTextScaledというテキストをUIサイズ最大まで大きくするという設定があります。
しかしTextScaledには問題があり、日本語などの2バイト文字を使用した際に意図しない形で改行されてしまうことがあります。

半角英字の場合

日本語の場合

対応策

上記問題はUIサイズを調整できる場合は問題ないですが、ゲーム内でテキストの内容が変わる場合はかなり見栄えが悪くなってしまいます。
以前のプロジェクトではテキストサイズを自動で調整するスクリプトを組んで対応しました。

AutoTextScaled.lua

local currentCamera = workspace.CurrentCamera

--設定時のスクリーンサイズ
local Default_ScreenSize = Vector2.new(1920, 1080)

--調整したいテキストのテーブル
local TextUIs = {} 

--設定時のテキストサイズを属性として保存
for index, value in TextUIs do
	value:SetAttribute("DefaultTextSize", value.TextSize)
end

--サイズ自動調整関数
local function AutoScale()
	--現在のウィンドウサイズ
	local currentScreenSize = currentCamera.ViewportSize
	--設定時のスクリーンサイズとの比率を計算
	local ratio = Vector2.new(currentScreenSize.X / Default_ScreenSize.X, currentScreenSize.Y / Default_ScreenSize.Y)
	
	--画面比率のより小さい方に合わせる
	local min 
	if ratio.X > ratio.Y then
		min = ratio.Y
	else
		min = ratio.X
	end
	
	--TextUIsに入っているテキストを設定時のテキストサイズに倍率を掛け合わせたものに変更
	for index, value in TextUIs do
		local size = value:GetAttribute("DefaultTextSize") * min
		value.TextSize = size
	end
end

--ゲーム開始時に設定
AutoScale()

--ウィンドウサイズが変更されたときにも自動調整を実行
currentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(AutoScale)

以上がサイズ調整を自動で行うためのスクリプトになっています。
TextUIsの取得方法はModule化してGui側から設定したり、CollectionServiceでTagを使って取得する方法などがあるので、使いやすいものをいろいろ試してみてください。

---

②モバイル端末での2バイト文字表示問題

上記の方法でテキストサイズの調整を行った際にもひとつ問題が発生します。
スマートフォンなどのモバイル端末でRobloxをプレイする際に日本語などの2バイト文字を使用すると半角英数字よりも文字が大きく表示されてしまうというものです。
PC版では正しく表示されていてもモバイル端末では大きく表示されてしまいます。

対応策

Robloxでは残念ながらテキストの一部のみのテキストサイズを変えることがRichTextを使わない限りできないので、今回はテキストに全角文字が含まれている場合のみ文字サイズをさらに小さくする形を紹介します。

AutoTextScaled

local currentCamera = workspace.CurrentCamera

local Default_ScreenSize = Vector2.new(1920,1080)

local TextUIs = {} 

+--モバイル端末かどうか
+local UserInputService = game:GetService("UserInputService")
+local IsMobile = false
+if UserInputService.TouchEnabled and not UserInputService.KeyboardEnabled and not UserInputService.MouseEnabled then
+   IsMobile = true
+else
+   IsMobile = false
+end

for index, value in TextUIs do
	value:SetAttribute("DefaultTextSize", value.TextSize)
end

+--2バイト文字が含まれているか
+local function Is2BYTE(str)
+    for i = 1, #str do
+        local byte = string.byte(str, i)
+        if byte > 127 then
+            return true
+        end
+    end
+    return false
+end

local function AutoScale()
	local currentScreenSize = currentCamera.ViewportSize
	local ratio = Vector2.new(currentScreenSize.X / Default_ScreenSize.X, currentScreenSize.Y / Default_ScreenSize.Y)
	
	local min 
	if ratio.X > ratio.Y then
		min = ratio.Y
	else
		min = ratio.X
	end
	
	for index, value in TextUIs do
		local size = value:GetAttribute("DefaultTextSize") * min
+--2バイト文字を含む場合はサイズをさらに小さく調整
+       if IsMobile then
+           local text = value.Text
+           if Is2BYTE(text) then
+               size *= 0.8
+           end
+       end
        value.TextSize = size
	end
end

AutoScale()

currentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(AutoScale)

工数に余裕があればRichTextを使って文字を判別して全角文字にだけサイズ調整を当てる方法をとった方がより見栄えが良くなると思います。

---

まとめ

今回は

• テキストサイズを画面サイズに合わせて調整する方法
• モバイル端末で2バイト文字が大きくなってしまうときの調整方法

を紹介しました。
ご愛読ありがとうございました。