<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>OBS | RTAGamers</title>
	<atom:link href="https://rtagamers.com/tag/obs/feed/" rel="self" type="application/rss+xml" />
	<link>https://rtagamers.com</link>
	<description>RTAGamersはRTAプレイヤーによる情報サイトです！</description>
	<lastBuildDate>Sat, 09 Dec 2023 05:22:22 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://rtagamers.com/wp-content/uploads/2019/11/favicon-100x100.png</url>
	<title>OBS | RTAGamers</title>
	<link>https://rtagamers.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>RTA タイマーの透過はルマキーがおすすめ</title>
		<link>https://rtagamers.com/rta-tools/luma-key-for-transparency/</link>
					<comments>https://rtagamers.com/rta-tools/luma-key-for-transparency/#respond</comments>
		
		<dc:creator><![CDATA[Kuhaku_玖白]]></dc:creator>
		<pubDate>Sat, 09 Dec 2023 22:00:39 +0000</pubDate>
				<category><![CDATA[RTAツール]]></category>
		<category><![CDATA[KAZAMITimer]]></category>
		<category><![CDATA[Livesplit]]></category>
		<category><![CDATA[OBS]]></category>
		<category><![CDATA[アドベントカレンダー2023]]></category>
		<category><![CDATA[タイマー]]></category>
		<category><![CDATA[透過]]></category>
		<guid isPermaLink="false">https://rtagamers.com/?p=17945</guid>

					<description><![CDATA[RTA の配信や動画に載せるタイマーを透過したい。 そんな時はルマキーがおすすめです。 この記事ではタイマーアプリケーションに LiveSplit と KAZAMITimer、配信・録画ソフトウェアに OBS Studi [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>
RTA の配信や動画に載せる<span class="marker-under">タイマーを透過したい</span>。<br />
そんな時は<span class="marker-under">ルマキーがおすすめ</span>です。
</p>
<p>
この記事ではタイマーアプリケーションに <a rel="noopener" target="_blank" href="https://livesplit.org/">LiveSplit<span class="fa fa-share-square external-icon anchor-icon"></span></a> と <a rel="noopener" target="_blank" href="http://www.kazamit.com/index.php?p=5">KAZAMITimer<span class="fa fa-share-square external-icon anchor-icon"></span></a>、配信・録画ソフトウェアに <a rel="noopener" target="_blank" href="https://obsproject.com/ja">OBS Studio<span class="fa fa-share-square external-icon anchor-icon"></span></a> を使用して説明します。
</p>
<p>
この記事は <a rel="noopener" target="_blank" href="https://adventar.org/calendars/9406">RTAGamers Advent Calendar 2023<span class="fa fa-share-square external-icon anchor-icon"></span></a> の１０日目の記事です。
</p>

  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">ルマキーって何？</a></li><li><a href="#toc2" tabindex="0">設定手順</a></li><li><a href="#toc3" tabindex="0">ルマキーがダメなら他の方法を検討</a></li><li><a href="#toc4" tabindex="0">さいごに</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">ルマキーって何？</span></h2>
<p>
<img fetchpriority="high" decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/sample_luma_key.png" alt="ルマキー透過のサンプル画像" title="ここで透過しているのはペイントの「色の編集」画面です。" width="739" height="585" class="alignnone size-full wp-image-18003" srcset="https://rtagamers.com/wp-content/uploads/2023/12/sample_luma_key.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/sample_luma_key-300x237.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
<span class="marker-under">ルマキーは輝度（明るさ）の範囲を基準に透過するフィルター</span>です。<br />
ルマキーは OBS Studio での呼び名で、他のソフトウェアではルミナンスキーと呼ばれたりしています。（輝度：luminunce）
</p>
<p>
LiveSplit や KAZAMITimer は初期設定で明るい文字と暗い背景になっているため、輝度を基準にして透過範囲を設定するのに元々都合が良い状態です。
</p>
<p>
なお、「輝度」という言葉はいくつかの分野で使用されていて、どの分野における「輝度」なのかによって定義も変わりますが、ここでは「画像処理における輝度」を意味します。（この場合でも<a rel="noopener" target="_blank" href="https://e-words.jp/w/%E8%BC%9D%E5%BA%A6.html">複数の定義<span class="fa fa-share-square external-icon anchor-icon"></span></a>があってややこしい……）
</p>
<h2><span id="toc2">設定手順</span></h2>
<p>
<span class="marker-under">事前にタイマーを起動しておきます</span>。
</p>
<h4>OBS Studio の設定手順</h4>
<ol>
<li>OBS Studio を起動します</li>
<li>ソースにタイマーを追加します</li>
<li>ソースからタイマーを選択します</li>
<li>フィルタボタンを押します</li>
<li>＋ → ルマキーでルマキーを追加します</li>
<li>パラメータを調整します</li>
</ol>
<h4>ルマキーのパラメータについて</h4>
<p><img decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/range.png" alt="ルマキーのパラメータ概要図" title="この図で見ると最大輝度グラデーションだけ矢印の向きが逆で仲間外れ感がありますが、設定画面では最大輝度だけ大きな値がデフォルトなので仲間外れ感がある、と筆者は思っています。" width="800" height="225" class="alignnone size-full wp-image-18000" srcset="https://rtagamers.com/wp-content/uploads/2023/12/range.png 800w, https://rtagamers.com/wp-content/uploads/2023/12/range-300x84.png 300w, https://rtagamers.com/wp-content/uploads/2023/12/range-768x216.png 768w" sizes="(max-width: 800px) 100vw, 800px" /></p>
<table>
<tbody>
<tr>
<th>パラメータ名</th>
<th>説明</th>
</tr>
<tr>
<th>最大輝度</th>
<td><span class="marker-under">明るい部分を透過</span>したい場合に調整します</td>
</tr>
<tr>
<th>最大輝度グラデーション</th>
<td>明るい部分での透過する／しないの境界部分で透明度をグラデーションする幅を調整します</td>
</tr>
<tr>
<th>最小輝度</th>
<td><span class="marker-under">暗い部分を透過</span>したい場合に調整します</td>
</tr>
<tr>
<th>最小輝度グラデーション</th>
<td>暗い部分での透過する／しないの境界部分で透明度をグラデーションする幅を調整します</td>
</tr>
</tbody>
</table>
<h4>設定例</h4>
<p>
LiveSplit と KAZAMITimer の背景を透過する設定例を紹介します。
</p>
<p>
どちらのタイマーも背景色が初期状態での設定例なので、タイマーの色を変えている場合は各自で適切な設定を探してみましょう。<br />
基本的には次の順番にパラメータを調整すると良いと思います。
</p>
<ol>
<li>最小輝度を変更して、<span class="marker-under">完全に透過したい部分を調整</span>します。</li>
<li>最小輝度グラデーションを変更して、<span class="marker-under">半透明にしたい部分を調整</span>します。</li>
</ol>
<h5>LiveSplit の例</h5>
<p>
<img decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key.png" alt="LiveSplit の透過設定例、最小輝度を 0.0235 に設定" title="ここから最小輝度の値を上げていくと、プラスタイムの赤文字やポーズの灰色文字も透過されるようになります。" width="739" height="585" class="alignnone size-full wp-image-17998" srcset="https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key-300x237.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
最小輝度を 0.0235 くらいにすると、背景や区切り線を透過できます。
</p>
<h5>LiveSplit の例２</h5>
<p>
<img loading="lazy" decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key2.png" alt="LiveSplit の透過設定例２、最小輝度グラデーションを 0.0370 に設定" title="Video や Graph などを使っている場合は、意図しない透過にならないように注意です。" width="739" height="585" class="alignnone size-full wp-image-17999" srcset="https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key2.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/livesplit_luma_key2-300x237.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
最小輝度グラデーションを 0.0370 くらいにすると、ちょうど良い感じに半透明にできます。
</p>
<h5>KAZAMITimer の例</h5>
<p>
<img loading="lazy" decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/kazami_luma_key.png" alt="KAZAMITimer の透過設定例、最小輝度を 0.0135 に設定" title="うまいこと設定すれば、背景のロゴだけ透過しないで残すこともできます。" width="739" height="585" class="alignnone size-full wp-image-17997" srcset="https://rtagamers.com/wp-content/uploads/2023/12/kazami_luma_key.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/kazami_luma_key-300x237.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
最小輝度を 0.0135 くらいにすると、背景やロゴマークを透過できます。
</p>
<h2><span id="toc3">ルマキーがダメなら他の方法を検討</span></h2>
<p>
LiveSplit や KAZAMITimer と OBS Studio の組み合わせにおいて、ルマキーは最も楽に背景を透過できる方法だと考えていますが、タイマーの色設定によってはルマキーだと上手く透過できない場合もあります。
</p>
<p>
そのような場合はカラーキーやクロマキーを検討してみましょう。
</p>
<h4>カラーキー</h4>
<p>
<img loading="lazy" decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/sample_color_key.png" alt="カラーキー透過のサンプル画像" title="筆者はルマキーを知る前はカラーキーでタイマーを透過していました。" width="739" height="655" class="alignnone size-full wp-image-18002" srcset="https://rtagamers.com/wp-content/uploads/2023/12/sample_color_key.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/sample_color_key-300x266.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
<span class="marker-under">指定した色の輝度を基準にして透過するフィルター</span>です。<br />
（画像はパラメータ既定値の状態です）
</p>
<p>
タイマーを透過しようとしてルマキーで透過できなかった場合に、次に検討すると良いのがカラーキーだと考えています。
</p>
<h4>クロマキー</h4>
<p>
<img loading="lazy" decoding="async" src="https://rtagamers.com/wp-content/uploads/2023/12/sample_chroma_key.png" alt="クロマキー透過のサンプル画像" title="本文中にも書いていますが、クロマキーは白黒の透過には向いていません。" width="739" height="655" class="alignnone size-full wp-image-18001" srcset="https://rtagamers.com/wp-content/uploads/2023/12/sample_chroma_key.png 739w, https://rtagamers.com/wp-content/uploads/2023/12/sample_chroma_key-300x266.png 300w" sizes="(max-width: 739px) 100vw, 739px" /><br />
<span class="marker-under">色相を基準にして透過するフィルター</span>です。<br />
色相を基準にしている仕組みなので、<span class="marker-under">白黒のモノを透過するには向いていません</span>。<br />
（画像はパラメータ既定値の状態です）
</p>
<p>
クロマキーでタイマーを透過する場合、タイマーの背景色を透過に適した色に設定し、クロマキーのパラメータを繊細に調整しなければならない場合があります。
</p>
<h2><span id="toc4">さいごに</span></h2>
<p>
<span class="marker-under">ルマキーは</span> <a rel="noopener" target="_blank" href="https://github.com/obsproject/obs-studio/releases/tag/23.2.1">2019 年に OBS Studio に追加<span class="fa fa-share-square external-icon anchor-icon"></span></a>された、他の透過フィルターよりも<span class="marker-under">比較的新しいフィルター</span>です。<br />
そのためか、クロマキーやカラーキーと比べると情報量が少ない印象があります。
</p>
<p>
しかし、ルマキーは LiveSplit や KAZAMITimer の色の設定が初期設定のままでもきれいに透過できる、<span class="marker-under">タイマーと相性の良いフィルター</span>なのです。</p>
<div class="saboxplugin-wrap" itemtype="http://schema.org/Person" itemscope itemprop="author"><div class="saboxplugin-tab"><div class="saboxplugin-gravatar"><img loading="lazy" decoding="async" src="https://rtagamers.com/wp-content/uploads/2021/12/KuhakuLogo_mono.png" width="100"  height="100" alt="" itemprop="image"></div><div class="saboxplugin-authorname"><a rel="author" href="https://rtagamers.com/author/kuhaku_o/" class="vcard author"><span class="fn">Kuhaku_玖白</span></a></div><div class="saboxplugin-desc"><div itemprop="description"><p>Livesplit用のコンポーネントを作ったり、Autosplitterを作ったりしている人です。</p>
</div></div><div class="saboxplugin-web "><a rel="nofollow noopener" target="_blank" href="https://soushinsoujin989.blogspot.com/">soushinsoujin989.blogspot.com/<span class="fa fa-share-square external-icon anchor-icon"></span></a></div><div class="clearfix"></div><div class="saboxplugin-socials sabox-colored"><a rel="nofollow noopener" target="_blank" title="Twitter" href="https://twitter.com/Kuhaku81377446" class="saboxplugin-icon-color"><svg class="sab-twitter" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M 9.398 6.639 L 16.922 17.361 L 14.922 17.361 L 7.412 6.639 L 9.398 6.639 Z M 24.026 24.026 L -0.026 24.026 L -0.026 -0.026 L 24.026 -0.026 L 24.026 24.026 Z M 19.4 18.681 L 13.807 10.677 L 18.379 5.319 L 16.627 5.319 L 13.014 9.541 L 10.065 5.319 L 4.921 5.319 L 10.187 12.846 L 5.193 18.681 L 6.975 18.681 L 10.985 13.983 L 14.269 18.681 L 19.4 18.681 Z" />
</svg></span><span class="fa fa-share-square external-icon anchor-icon"></span></a><a rel="nofollow noopener" target="_blank" title="Twitch" href="https://www.twitch.tv/kuhaku_o" class="saboxplugin-icon-color"><svg class="sab-twitch" viewBox="0 0 500 500.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect class="st0" x="-.2" y=".4" width="500" height="500" fill="#6441a5" /><polygon class="st1" points="499.8 247.3 499.8 500.4 283 500.4 135.5 351.6 162 142.3 324 138.3 380.2 128" /><path class="st2" d="m152.7 128l-17.2 44v179.7h61.2v32.5h34.4l32.5-32.5h49.7l66.9-66.9v-156.8h-227.5zm204.6 145.3l-38.3 38.2h-61.2l-32.4 32.5v-32.5h-51.6v-160.6h183.5v122.4zm-38.3-78.4v66.8h-22.9v-66.8h22.9zm-61.1 0v66.8h-22.9v-66.8h22.9z" /></svg></span><span class="fa fa-share-square external-icon anchor-icon"></span></a></div></div></div>]]></content:encoded>
					
					<wfw:commentRss>https://rtagamers.com/rta-tools/luma-key-for-transparency/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
