TAが勉強を兼ねてモバイル向け電光掲示板シェーダー書いてみた

はじめまして、亀川と申します。

セガゲームス開発統括部アート＆デザイン部TAセクションというところに所属しており普段はモバイル向けのゲーム開発に従事しております。

所属はTAセクションですが、業務内容はデザイン業務とTA業務が半々ぐらいです。
内容はモーション制作・管理、Mayaをはじめ各種DCCツールのツールやライブラリの開発、保守など日々TAセクションに寄せられる要望に応える形で作業を行っております。

弊部のゲーム開発は全てUnityで行われているのですが、ご存じの通りUnityはかなりオープンなゲームエンジンなので各種情報が公式ドキュメントやWEB上でも入手しやすく学習しやすいものとなっており、ゲームの実装に関わる部分でもTAが関われる部分が増えてきたというのが実感としてあります。

そういった中でもシェーダー開発は飛躍的に敷居が低くなったのではないかと思います。
少しプログラムをかじったことがあればレベルにもよりますが、すぐにでも画面に出るものが作って試せます。これは非常に楽しいです。

そういった事もあり、ここ1、2年は空前のシェーダープログラミングブームが来ていると思います。
私もご多分に漏れず、これまであまり触れる事のなかったゲーム中のビジュアル周りに関わるシェーダーの勉強を始めてみました。

前置きが長くなってしまいましたが、今回の記事は以前に部内のあるプロジェクト用に作った「電光広告看板」、「電光掲示板」用シェーダーについて作成のプロセスと内容について触れていきたいと思います。

目次

電光広告看板とは？

電光広告看板という言葉は普段生活している中ではほぼ聞く事はないのですが、街中や施設の中など目にする機会は非常に多いと思います。

LED電球を並べて広告を映像として表示させることができるものです。
その中でも特に今回はサッカー場の横に置かれている電光広告看板を想定して作成しました。

制作物

結果から先に見せてしまうと、こういう物を制作しました。

電光広告看板に見えますでしょうか？実際はアニメーションしていますので本当は動画を置きたかったのですが”はてなblog”に動画を直接アップロードできなかったので静止画になっています。

それではこの看板シェーダーを作るプロセスと実際のコード内容を説明していきたいと思います。

制作前の仕様確認

制作前には仕様の確認が必要となりますので発注者であるアートリーダーと最終イメージと使い方などを含めた仕様のすり合わせを行いました。

具体的には広告の動かし方？テクスチャは何パターン用意するのか？メッシュのUVの持たせ方は？背景のライティングとの兼ね合いは？プログラムからの操作、アーティストがどこまで調整できるかなどなどをまずはざっくりで良いのでヒヤリングを行いシェーダーに持たせるパラメータや仕様を決めて行きます。

最初のヒヤリングで全ての要求仕様が出揃うことはないので、まずは最低限作成できるレベルの仕様はつめます。

ここでざっくり決まった仕様はこんな感じです。

・最近の電光掲示板のような広告
・サッカー場の回りにポリゴン板を立てて置くイメージ。何パターンか置きたい。
・ライティングは反映する必要はない。
・テクスチャスロットは2枚。プログラムで切り替える。
・2枚とも非表示にする事がある。その時は指定色が出るようにしたい。
・ブレンドで切り替えたい。
・広告テクスチャの移動はUVアニメーションで制御したい。

電光掲示板らしさの要素抽出

機能的な仕様が出そろったのでいよいよ今度はビジュアル面の方向性を固めていきます。

今回のゲームでは中継カメラを意識したような視点が想定されるので素直にTVを通して見た電光掲示板らしい表現を目指すことにします。

そのためは電光掲示板がそれらしく見えている特徴的な部分の抽出が必要です。この要素分解をするのが楽しいところですが、私はこう考えました。

・LEDならではのドット感。
・カメラのレンズを通す事による色収差、にじみ感。
・広告が切り替わる動き。スクロールする時のアニメーション。
・LED表示を描画しているスキャンラインの雰囲気。
・光のにじみのグロー表現

以上の要素があればだいたいそれらしく見えるのではないかと思いました。
今回は、広告の動きはUVアニメーション、光のにじみはポストエフェクトで適宜行うとして看板シェーダー自体の描画ではその前段階までを表現することにしました。

シェーダー実制作

先に完成したコードがこちらになります。

全体のシェーダーコードは以下のようになります。

▶クリックで展開

Shader "Custom/LED_Display"
{
    Properties
    {
        [KeywordEnum(REAL_LED, FAKE_LED )]
        _IS_REAL("IS Real LED", Float) = 0

        _BaseColor("Base Color", Color) = (0.0, 0.0, 0.0, 1.0)
        _BlendPower("Base Blend", Range(0.0, 1.0)) = 1.0

        _LedTex("Led Flame(RGBA)", 2D) = "white" {}

        _MainTex ("Base map(RGBA)", 2D) = "white" {}
        _MainTex2  ("Base map2(RGBA)", 2D) = "white" {}

        _MainTex2_BlendPower("Map2 Blend", Range(0.0, 1.0)) = 1.0

        _LineBrightness("Line Brightness", Range(0.0, 1.0)) = 0.2
        _LineSpeed("Line Speed", Float) = 4
        _LineSpacing("Line Spacing", Float) = 4
        _LineSpacing2("Line Spacing2", Float) = 1

        _Near("Near", float) = 0.1
        _Far("Far", float) = 100.0
    }
 
    SubShader
    {
        Tags{ "Queue" = "Geometry" }
        Blend Off
        Lighting Off
        Fog{ Mode Off }
        ZWrite On
        Cull On


        Pass {
            
            CGPROGRAM
            
            #include "UnityCG.cginc"
            #pragma multi_compile _IS_REAL_REAL_LED _IS_REAL_FAKE_LED
            #pragma vertex vert
            #pragma fragment frag


            uniform half4 _BaseColor;
            uniform half _BlendPower;

            uniform sampler2D _LedTex;

            uniform sampler2D _MainTex;
            uniform half4 _MainTex_TexelSize;

            uniform sampler2D _MainTex2;
            uniform half4 _MainTex2_TexelSize;

            uniform half _MainTex2_BlendPower;

            uniform half _LineBrightness;
            uniform half _LineSpeed;
            uniform half _LineSpacing;
            uniform half _LineSpacing2;

            uniform half _Near;
            uniform half _Far;

            struct v2f
            {
                half4 pos : SV_POSITION;
                half2 uv : TEXCOORD0;
                half2 uv2 : TEXCOORD1;
                half2 celluv : TEXCOORD2;
                half depth : TEXCOORD3;
            };
 
            half4 _MainTex_ST;
            half4 _MainTex2_ST;
            half4 _CellTex3_ST;
            half4 _LedTex_ST;

            half4 col;
            half4 col_mt2;

            static const half2 _Texby1pt = half2(_MainTex_TexelSize.x , _MainTex_TexelSize.y );
            static const half2 _CellSizeXY = 1.0 / _LedTex_ST.xy;


            v2f vert(appdata_base v)
            {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MV, v.vertex);
                o.depth = o.pos.z;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX ( v.texcoord, _MainTex);
                o.uv2 = TRANSFORM_TEX( v.texcoord, _MainTex2);
                o.celluv = TRANSFORM_TEX(v.texcoord, _LedTex);
                return o;
            }
 
            fixed4 frag(v2f i) : COLOR
            {
                  
                #ifdef _IS_REAL_REAL_LED
                    //Pixelate for MainTex
                    half2 steppedUV = i.uv.xy + _CellSizeXY*0.5;
                    steppedUV /= _CellSizeXY.xy;
                    steppedUV = round(steppedUV);
                    steppedUV *= _CellSizeXY.xy;
                    col = tex2D(_MainTex, steppedUV);

                    //Pixelate for MainTex2
                    steppedUV = i.uv2.xy + _CellSizeXY*0.5;
                    steppedUV /= _CellSizeXY.xy;
                    steppedUV = round(steppedUV);
                    steppedUV *= _CellSizeXY.xy;
                    col_mt2 = tex2D(_MainTex2, steppedUV);

                #elif _IS_REAL_FAKE_LED
                    //Shift Texture color by 1px
                    col = tex2D(_MainTex, i.uv);
                    col.g = tex2D(_MainTex, i.uv.xy + _Texby1pt.x).g;
                    col.b = tex2D(_MainTex, i.uv.xy + _Texby1pt.x).b;

                    //Shift Texture color by 1px
                    col_mt2 = tex2D(_MainTex2, i.uv2);
                    col_mt2.g = tex2D(_MainTex2, i.uv2.xy + _Texby1pt.x).g;
                    col_mt2.b = tex2D(_MainTex2, i.uv2.xy + _Texby1pt.x).b;
                    
                #endif
                
                //Blend Texture Main and Main2farPower
                col.rgb = lerp(col.rgb, col_mt2.rgb, _MainTex2_BlendPower);
                //Blend Base color and Textures.
                col.rgb = lerp(_BaseColor.rgb, col.rgb, _BlendPower);

                // create flame of LED valve.
                fixed4 led_col = tex2D(_LedTex, i.celluv);
                // calc far distance
                half farPower = saturate((-i.depth - _Near) / (_Far - _Near));
                col.rgb = lerp(col.rgb, col.rgb * led_col.rgb, (1-farPower));

                // 走査線1　uv基準でスキャンラインを描画
                half scanLineColor = sin(_Time.y * _LineSpeed + i.uv.y * _LineSpacing);// / 2 + 0.5;

                // 走査線2　uv基準でスキャンラインを描画
                half scanLineColor2 = sin(_Time.y * _LineSpeed*0.5 + i.uv.y * _LineSpacing*0.1);/// 2 + 0.5;
                
                // 走査線3　uv基準で横スキャンラインを描画
                half scanLineColor3 = sin(_Time.y * _LineSpeed*0.25 + i.uv.x * _LineSpacing2); //; / 2 + 0.5;
                // スキャンラインを加算
                col += (clamp(scanLineColor, 0, 1.0) + clamp(scanLineColor2, 0, 1.0) + clamp(scanLineColor3, 0, 1)) * (_LineBrightness * (1 - farPower)) * _BlendPower;

                return saturate(col);
            }
         
            ENDCG
        }

    }

    FallBack "Diffuse"

}

インスペクターに表示されるシェーダープロパティはこんな風になっています。

それでは上で書いた要素がソース中でどのように実装されているのか中身を追って見ていきたいと思います。

LED球のドット感の表現

ドット感の表現はシンプルにLED球1つを表現したテクスチャ1枚をタイリングでしきつめて上から乗算で被せます。加えて、広告画像の方にも少し手を加えますがこちらは実装に少し迷ったので2つの表現を用意しました。

LED枠のイメージ

まずはLED枠のイメージですがこんな感じシンプルにタイリングするだけです。
この枠の下に広告画像が来る事になります。

広告画像テクスチャの加工１ ”1ドット1色”

一つ目は広告画像をタイリング枠に合わせて1ドット1色という色の取り方をするものです。
こちらの方がLED球1つに対して1色なので原理的にはより本物に近いのですが、一方で相当細かくLED球をタイリングしないと絵が潰れてしまい判別できなくなる問題もあります。

ソースはこうなっています。

                #ifdef _IS_REAL_REAL_LED
                    //こちらが1ドット1色
                    //Pixelate for MainTex
                    half2 steppedUV = i.uv.xy + _CellSizeXY*0.5;
                    steppedUV /= _CellSizeXY.xy;
                    steppedUV = round(steppedUV);
                    steppedUV *= _CellSizeXY.xy;
                    col = tex2D(_MainTex, steppedUV);

                    //Pixelate for MainTex2
                    steppedUV = i.uv2.xy + _CellSizeXY*0.5;
                    steppedUV /= _CellSizeXY.xy;
                    steppedUV = round(steppedUV);
                    steppedUV *= _CellSizeXY.xy;
                    col_mt2 = tex2D(_MainTex2, steppedUV);

この部分でポイントになってくるのは"_LedTex"で取得したLED枠テクスチャのタイリング単位でテクスチャの色を1色だけサンプリングしてくる部分です。

テクスチャのタイリング数は"_LedTex_ST.xy"でxyそれぞれのタイリング回数を得る事が出来ます。xを3回、yを3回繰り返すなら(3,3)という形で格納されています。

またテクスチャの色はUV空間で取得するのでこのタイリングのxy回数の1回分のサイズを0-1のUV空間の値で知る必要があります。それをコード中で事前に行っている部分がこちらです。

static const half2 _CellSizeXY = 1.0 / _LedTex_ST.xy;

UV値単位で1つのセルサイズを知ることが出来たら後はテクスチャのUVの値に対してセルサイズの半分を足しその値をセルサイズで割り、roundで端数を切り捨てる事で段階的なUV値を得ます。そのUV値を使ってテクスチャの色を取得することで段階的に取得することが出来ます。

広告画像テクスチャの加工２ ”画素ずらしによる疑似色収差”

1ドット1色は本物に近いのですがやはりLED枠タイリングを細かくしないとそもそも画像の認識が難しいです。
そのため、ドット化なしに通常通りテクスチャを張り付けるパターンも用意しました。これが2つ目です。

こちらはそのままテクスチャを表示するだけなのですが、そのままでは少し物足りなかったのでカメラのレンズによる色収差を表現する事にしました。
非常にお手軽な手法ですが色を取得する際にrgbの各チャンネルを1pxずつずらして取得することにしました。

それがこの画像になります。

よりアップで見た画像がこちらです。LEDの枠はまたいで色はあるものの離れて見るときは1ドット1色とそう差異は感じられない印象です。

こちらのソースはこうなっています。

                #elif _IS_REAL_FAKE_LED
                    //枠は関係なくテクスチャを読み込む
                    //Shift Texture color by 1px
                    col = tex2D(_MainTex, i.uv);
                    col.g = tex2D(_MainTex, i.uv.xy + _Texby1pt.x).g;
                    col.b = tex2D(_MainTex, i.uv.xy + _Texby1pt.x).b;

                    //Shift Texture color by 1px
                    col_mt2 = tex2D(_MainTex2, i.uv2);
                    col_mt2.g = tex2D(_MainTex2, i.uv2.xy + _Texby1pt.x).g;
                    col_mt2.b = tex2D(_MainTex2, i.uv2.xy + _Texby1pt.x).b;
                    
                #endif

テクスチャからrgbチャンネルごとに1pxずつずらして取得していることがわかります。
テクスチャの解像度の1px単位がUV値に換算するとどれぐらいになるのかは下に書いた行で事前に取得していました。

static const half2 _Texby1pt = half2(_MainTex_TexelSize.x , _MainTex_TexelSize.y );

マルチコンパイル

この2つの表現方法をUnityのマルチコンパイルという機能を使い1つのシェーダー内で2つのバリエーションのシェーダーを持てるように実装しています。

この機能の実装部分はCGPROGRAM～の少し下の行のスニペットと呼ばれる部分に記述されている以下の行となります。

#pragma multi_compile _IS_REAL_LED _IS_FAKE_LED

これはプロパティ部分を記述している部分に

[KeywordEnum(REAL_LED, FAKE_LED )]
_IS_REAL("IS Real LED", Float) = 0

このように記載することでアーティストがシェーダープロパティからどちらのモードを使用するか使い分ける事が出来ます。

さらにフラグメントシェーダーの中もこれに対応している部分があります。上述のLED部分の中で#ifdefから始まり#endifまでの部分でプロパティのキーワードで条件として処理を分けています。

個人的にはピクセル化を行うREAL_LEDモードの方の方が力を入れて用意したのですが実際の現場では疑似モードの方でLEDの枠のわかりやすさ、テクスチャのわかりやすさから選択されているようです。

広告画像の切り替え

Lerp関数

1枚目と2枚目、そしてベースカラーの3つの色の切り替えは主にlerp関数を使って行っています。
動画が貼れないのでまた静止画ですみません。左から時系列でベースカラー、広告1、広告2そしてまたベースカラーへと変遷しています。

                //Blend Texture Main and Main2farPower
                col.rgb = lerp(col.rgb, col_mt2.rgb, _MainTex2_BlendPower);
                //Blend Base color and Textures.
                col.rgb = lerp(_BaseColor.rgb, col.rgb, _BlendPower);

lerp関数を2回使う事で3つの色の切り替えを行っています。
最初の行で2枚の広告テクスチャの切り替えを、次のlerpで広告と指定カラーの切り替えを行います。

lerp関数はテクスチャのブレンドを行う際はよく使う関数でlerp(x, y, s)という形で使用しx,yの2枚のテクスチャをs(0~1)の値でブレンド度合を決めます。勿論用途はテクスチャに限らず2つの要素を0～1で割合でブレンド調整したい時には使いやすい関数だと思います。

広告の切り替えなので2つのテクスチャで十分ではないかと思われるかもしれませんがどちらの広告もオフにして何も表示しない状態にする時に第三の色が必要になってくるのでこの形式を取っています。また完全にどちらの広告が表示されないという状態の時にプログラムから広告テクスチャを入れかえる事も可能です。

LED描画更新による輝度ムラの表現

ここまでやってきましたがまだ何か物足りない気がしましたので輝度を時間軸で少しいじってみることにしました。

実際のLED電光掲示板は人間の目では意識できないほど高速に1ラインずつ描画を更新しています。それをカメラで写すとシャッタースピードのズレから輝度のムラのようなものを感じる事があります。そういうニュアンスを入れる事でさらに電光掲示板らしさが増します。

左が何もしない時の映像で右が輝度の変化を加えたものになります。
どうでしょうか。上は静止画ですが実際は輝度ムラが上下左右でアニメーションします。
少し右側の方がそれらしく見えるのではないでしょうか？

その部分のソースがこちらになります。

                // 走査線1　uv基準でスキャンラインを描画
                half scanLineColor = sin(_Time.y * _LineSpeed + i.uv.y * _LineSpacing);// / 2 + 0.5;

                // 走査線2　uv基準でスキャンラインを描画
                half scanLineColor2 = sin(_Time.y * _LineSpeed*0.5 + i.uv.y * _LineSpacing*0.1);/// 2 + 0.5;
                
                // 走査線3　uv基準で横スキャンラインを描画
                half scanLineColor3 = sin(_Time.y * _LineSpeed*0.25 + i.uv.x * _LineSpacing2); //; / 2 + 0.5;

                col += (saturate(scanLineColor) + saturate(scanLineColor2) + saturate(scanLineColor3)) * lerp(_LineBrightness, 0.0, farPower) * _BlendPower;

やっていることは簡単です。sin関数を用いて現在の表示色に白を加算する事で輝度ムラを加えています。
それを波形のリズムを変えて3つ重ねています。こうする事で1つの時より自然な感じが出ます。

カメラからの距離に応じた対策

上述の輝度の変化ですがこれは看板に近い時は効果的ですが離れたところから見た時はやや不自然に感じました。

そこでカメラの距離に応じてその影響を加減することにしました。実は上で書いたコードにはそれはすでに含まれています。計算式の中のこの部分になります。

 (_LineBrightness * (1 - farPower)) * _BlendPower;

事前にカメラからの距離をfarPowerという変数に格納してあり距離に応じて光の強度が乗算する割合を変えています。

シェーダー高速化について

シェーダーを書く上で常に意識しないといけないのはやはり処理負荷の部分です。

この高速化について少し触れてみたいと思います。これに関しては月並みですがUnityドキュメントの”シェーダーを書く場合のパフォーマンスのヒント”という項目を忠実に行うにつきるかと思います。
https://docs.unity3d.com/jp/560/Manual/SL-ShaderPerformance.html

できるだけ頂点シェーダー内で済ませる

頂点シェーダー部分で取得した情報はフラグメントシェーダー内では”補間された値”で受け取ることができるので、ライティング情報など頂点で受け取っても問題ない場合は頂点シェーダー内で受け取ります。例えば3頂点で囲まれたポリゴンの場合、頂点シェーダーでの計算は3回ですがフラグメントはピクセル数に応じて行われますのでその計算量の差は圧倒的です。

できるだけ計算の精度を下げる。

floatよりhalf、halfよりfixedの順で計算が低精度になっていくので処理負荷が低くなります。
fixedで問題のないケースは積極的にfixedを使うとよいでしょう。

ただし

現代の多くの GPU(OpenGL ES 3 や Metal を実行することができるもの)は固定小数点数と
半精度浮動小数点数を、内部的にはまったく同じものとして取り扱います。

とUnityのドキュメントにもありますのでhalfで書いていても実質は問題ないというケースは多いのではないかと思います。

テクスチャへのフェッチ（読み込み）回数を減らす

テクスチャは通常フラグメント関数の部分でフェッチしますがピクセル数に応じて行われるのでパフォーマンスに影響します。例えば上述のシェーダーソース内の”画素ずらし”の部分でテクスチャのフェッチを4回やってますがこれはなかなかの負荷だと思われますので画像がこの用途以外に使い道がないのであれば事前にPhotoshop等で画素ずらしを行っておいてこの処理を省いてもよいでしょう。

まとめ

以上、電光掲示板シェーダーの制作事例の説明となります。今回はライティング、影や半透明ソートなどのややこしい部分は考えなくてよいのでシェーダーとしては比較的簡単な部類には入るのではないかと思いますが、それでも実機で表示されて実際のゲーム中で動作するとなかなか達成感があります。

今回は右も左もわからない、それこそセマンティクスって何ですか？というようなところからシェーダー学習を始めたのですが学習法は完全に我流でいろんな情報を並行して学んでいきました。

Unity公式ドキュメントやネット上の制作事例を参考にした他、Unityシェーダーの書籍、nVidiaのCgマニュアルなども参考にしました。

nVidiaのドキュメントはこのあたりから読む事が出来ます。

Cg Toolkit | NVIDIA Developer

ただ上記URL内のドキュメントは全て英語なので正直言ってざっと斜め読みするのも大変です。私を含めてそういった方には日本語に訳された物もあります。

http://developer.download.nvidia.com/cg/Cg_3.0/Cg_Users_Manual_JP.pdf

こちらはリリース日がかなり古いのが気になりますが、Cgの基本や数学関数の説明などは今でも使えるものですので一読されることをお薦め致します。

またゲーム会社ということもありシェーダーを始め描画周りの知識が豊富な者がたくさんおりますからアドバイスをもらったり、コードレビューしてもらったりしたことも大きな助けになりました。

ただ何にでも言えることだとは思うのですが、一番学習効果が高い勉強法は”何か作りたいものがあって実際に作ってみる”。これにつきると思います。

これが一番学習意欲が上がりますし、質問がより具体的になり、望む答えも得やすくなりますので是非皆さんも何か題材を見つけて取り組んでみてください。

次回はリグのネタでも載せられればと考えています。それでは次回またお会いしましょう。

　TAセクションではこのようにアーティストの制作に役立つ環境を提供できるよう力を注いでおります。やりたいことを遠回りせずに行える環境でお仕事したい方はぜひ下記の弊社グループ採用サイトをご確認ください。いっしょに働きましょう！現在いろいろな職種でアーティストを多数募集しております！

採用情報 | セガ企業情報サイト

(C)SEGA

エフェクト統一シェーダーがあると捗るよね

　みなさんUnityしてますか？僕はここ5年くらいはUnityしまくってます。
すっかりモバイル開発はUnityばっかりになりました。もちろん他にも有力なゲームエンジンはあるのですけど、いろいろなハードに出すということや運営面を考えると、セガでは現状Unityがとても強い状況です。

　はじめまして、セガゲームス開発統括部アート＆デザイン部TAセクションの樋口と申します。スマホ向けゲーム開発を専門的に行う部署に所属しています。先日のCEDEC2017で「GameVFX Bootcamp 2017　ゲームエフェクトの今を4つの視点から」におきまして、弊社の綿貫が紹介していました「Effect Uber Shader（エフェクト統一シェーダー）」についてお話しします。

エフェクトのワークフロー

　ワークフローという程でもないのですが、一般的にエフェクトを作る場合には以下のような段階があります。

1. 作成内容のパーツ分解
2. パーツの試作
3. 組み合わせて調整
4. 組み込んで調整

　たとえば爆発のエフェクトを作る場合、イントロの閃光、放射状に広がる火花、少し遅れて広がる煙、衝撃波というような感じで（1）分解して、（2）それぞれを作っていくというような感じです。その後、（3）それらを組み合わせて、同期させて調整を行なっていき、一旦は完成となりますが、ゲームに組み込んでみてから（4）最終的に調整を行うことになります。

　エフェクト統一シェーダーが活躍するのは、主に（3）と（4）になります。調整の段階ではパラメータを変化させて目的に合った状態に設定していくという作業を行いますが、変化の自由度が少ないとデータの作り直しからとなってしまうため、調整作業が非常に高カロリーです。

調整作業を簡略化したい

　例えば、シェーダーが統一されておらず、各機能別にそれぞれシェーダーが用意されていたとすると、個別の機能の切り替えの際に選択するシェーダーを探し当てないとならず、間違いのもととなります。
　ありそうなシェーダー名の例だとこんな感じでしょうか。機能別にどんどん名前が追加されて似たようなものもあったりで、大変です。

• ParticleAdditive
• ParticleAlphaBlended
• ParticleAdditiveZOffset
• ParticleAdditiveOvertop
• ParticleAdditiveUVScroll
• ParticleAdditiveUVScrollZOffset
• ParticleAdditiveUVScrollZOffsetCutoff
• ParticleAdditiveUVScrollZOffsetCutoffMasked
• ...などなど

　これが、使うシェーダーは１つだけとして、各機能別にシェーダー内の設定で必要な機能を選んだりできると調整用途に合わせて、こっちにしたらどうかな？あるいはこれは？というような形で素早く試すことができます。

複数の機能を１つのシェーダーにまとめるUnityの機能

　実は、Unityのシェーダー記法（ShaderLab）では複数の機能を１つのシェーダー内にまとめておくことができます。また、一部の機能についてはパラメータとして与えることだけで変更可能だったりします。この２つを見ていきましょう。

パラメーターだけで変更可能な機能

　はじめは、パラメータだけで変更可能にできるものを紹介します。こちらはシェーダーの書き方だけで対応できるので、省コストで使いではあるようなものです。以下の指定はパラメータを設定するだけ切り替えることができます。後述の「複数の機能を1つのシェーダーにまとめる」の場合では内部的にシェーダーバリアント数が増えてしまう問題が出ますが、以下の機能の切り替えについてはバリアント数は全く影響しませんので、どんどん使うと良いと思います。

• アルファブレンドモード指定
• ZTestのモード指定
• ZWriteのON, OFF
• カリングモード指定

　これはブレンドモードをパラメータで変更した例です。上が標準ブレンド（SrcAlpha, OneMinusSrcAlpha）で、下が加算（One, One）です。設定する数字はUnityの定義するBlendModeという列挙体のもつ値で決まっています。ここではSrcAlpha = 5, OneMinusSrcAlpha = 6, One = 1となります。

　シェーダーソース側では以下のように書きます。Propertiesブロックで定義した値をBlend指定に与えてあげます。

Properties
{
  _MainTex("Texture", 2D) = "white" {}
  _BlendSrc("Blend Src", Float) = 0
  _BlendDst("Blend Dst", Float) = 0
}

Blend [_BlendSrc] [_BlendDst]

　値を調べて入れるのは手間が多く間違いを誘発しますので、プロパティの値を列挙体の名前から選んで指定する機能を使うとより便利になります。以下のように書きます。

Properties
{
  _MainTex("Texture", 2D) = "white" {}
  [Enum(UnityEngine.Rendering.BlendMode)]_BlendSrc("Blend Src", Float) = 0
  [Enum(UnityEngine.Rendering.BlendMode)]_BlendDst("Blend Dst", Float) = 0
}

　同じように、ZTestについても与える値はCompareFunctionという列挙体の値を使いますが、指定は似たようなものです。

[Enum(UnityEngine.Rendering.CompareFunction)]_ZTestMode("ZTest Mode", Float) = 0

ZTest [_ZTestMode]

　ZWriteはOFF = 0, ON = 1です。0と1を切り替える場合は、[Toggle]という指定を付けるとインスペクター上ではチェックボックスとなるので便利です。

[Toggle]_ZWriteParam("ZWrite", Float) = 0

ZWrite [_ZWriteParam]

　カリング指定はCullModeという列挙体の値を使います。

[Enum(UnityEngine.Rendering.CullMode)]_CullMode("Cull Mode", Float) = 0

Cull [_CullMode]

　全体のシェーダーコードは以下のようになります。

▶クリックで展開

//ChangeBlend.shader
Shader "Unlit/ChangeBlend"
{
  Properties
  {
    _MainTex("Texture", 2D) = "white" {}
    _BlendSrc("Blend Src", Float) = 5
    _BlendDst("Blend Dst", Float) = 6
  }
  SubShader
  {
    Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }
    Blend [_BlendSrc] [_BlendDst]
    LOD 100

    Pass
    {
      CGPROGRAM
      #pragma vertex vert
      #pragma fragment frag

      #include "UnityCG.cginc"

      struct appdata
      {
        float4 vertex : POSITION;
        float2 uv : TEXCOORD0;
      };

      struct v2f
      {
        float2 uv : TEXCOORD0;
        float4 vertex : SV_POSITION;
      };

      sampler2D _MainTex;
      float4 _MainTex_ST;

      v2f vert(appdata v)
      {
        v2f o;
        o.vertex = UnityObjectToClipPos(v.vertex);
        o.uv = TRANSFORM_TEX(v.uv, _MainTex);
        return o;
      }

      fixed4 frag(v2f i) : SV_Target
      {
        fixed4 t = tex2D(_MainTex, i.uv);  //テクスチャの色を取得
        return t;
      }
        ENDCG
    }
  }
}

　プロパティを列挙体から指定することや、チェックボックスにするなどの機能については、こちらのページが参考になります。

複数の機能を1つのシェーダーにまとめる

　こちらはかなり骨太な感じの内容となっていますが、実装方法をマスターすると可能性が広がります。
　サンプルとして、グレースケールの元テクスチャに対して、白と黒の部分を別の色に差し替えて利用したいとします。以下のものはフラグメントシェーダーを内容が分かる程度に書いたものです。

fixed4 frag(v2f i) : COLOR
{
  fixed4 t = tex2D(_MainTex, i.uv); //テクスチャの色を取得
  return t;
}

　上のシェーダーがテクスチャの色を表示するだけものに対し、下のものは色を差し替えて表示するものです。

fixed4 frag(v2f i) : SV_Target
{
  fixed4 t = tex2D(_MainTex, i.uv); //テクスチャの色を取得
  fixed lum = Luminance(t.rgb);  //テクスチャの色から輝度を計算
  t = lerp(_LerpColorBlack, _LerpColorWhite, lum); //黒に入れる色、白に入れる色を輝度で補間する
  return t;
}

　これを1つに合体させるには、#ifで処理を切り替えて書き分けるというのがまず最初の作業です。こんな感じになります。

fixed4 frag(v2f i) : SV_Target
{
  fixed4 t = tex2D(_MainTex, i.uv); //テクスチャの色を取得
  #if _USE_LERP_COLOR
    fixed lum = Luminance(t.rgb);  //テクスチャの色から輝度を計算
    t = lerp(_LerpColorBlack, _LerpColorWhite, lum); //黒に入れる色、白に入れる色を輝度で補間する
  #endif
  return t;
}

　あとは、#pragma multi_compileという指定でキーワードに応じたシェーダーのバリアント（バリエーション）を用意することができます。見かけは1つのシェーダーですが、指定されたキーワードに応じて選ばれるシェーダーが自動的に切り替わるというものです。以下のように書きます。

#pragma multi_compile _ _USE_LERP_COLOR

　全体のシェーダーコードは以下のようになります。

▶クリックで展開

//LerpColor.shader
Shader "Unlit/LerpColor"
{
  Properties
  {
    _MainTex("Texture", 2D) = "white" {}
    _LerpColorWhite("Color White", Color) = (1, 1, 1, 1)
    _LerpColorBlack("Color Black", Color) = (0, 0, 0, 1)
  }
  SubShader
  {
    Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }
    LOD 100

    Pass
    {
      CGPROGRAM
      #pragma vertex vert
      #pragma fragment frag

      #pragma multi_compile _ _USE_LERP_COLOR

      #include "UnityCG.cginc"

      struct appdata
      {
        float4 vertex : POSITION;
        float2 uv : TEXCOORD0;
      };

      struct v2f
      {
        float2 uv : TEXCOORD0;
        float4 vertex : SV_POSITION;
      };

      sampler2D _MainTex;
      float4 _MainTex_ST;
      fixed4 _LerpColorWhite;
      fixed4 _LerpColorBlack;

      v2f vert(appdata v)
      {
        v2f o;
        o.vertex = UnityObjectToClipPos(v.vertex);
        o.uv = TRANSFORM_TEX(v.uv, _MainTex);
        return o;
      }

      fixed4 frag(v2f i) : SV_Target
      {
        fixed4 t = tex2D(_MainTex, i.uv);  //テクスチャの色を取得
        #if _USE_LERP_COLOR
          fixed lum = Luminance(t.rgb);  //テクスチャの色から輝度を計算
          t = lerp(_LerpColorBlack, _LerpColorWhite, lum);  //黒に入れる色、白に入れる色を輝度で補間する
        #endif
        return t;
      }
        ENDCG
    }
  }
}

　
　これだけだと機能の切り替えがGUIから出来ないので、そちらの部分を作っていきます。機能の切り替えは、マテリアルに対しShaderKeywordを設定することで切り替えることが出来ます。Material.EnableKeywordや、Material.DisableKeywordを使用します。あるいは、Material.shaderKeywordsを直接書き換える方法もとれます。

　GUIから操作させるのに一番いいのは、MaterialのInspectorを乗っ取ることで、機能に合わせて必要なパラメータだけを出したり、それに合わせて上記のShaderKeywordを切り替えたりが行えます。

　Inspectorを乗っ取らずにキーワードON、OFFだけを行うのであれば、プロパティに指定を加えるだけで簡単に設定が可能ですが、その場合は不必要なパラメータを隠すなどの凝った機能を付けることはできません。プロパティだけで行うには以下にようにします。

[Toggle(_USE_LERP_COLOR)]_UseLerpColor("Use Lerp Color", Float) = 0

　ON、OFFだけの切り替えは上の方法で良いですが、複数の機能を切り替える場合は以下のように書きます。この場合は、Aを選択すると、_USEMODE_AというキーワードがONとなり、Bの場合は、_USEMODE_BがONとなります。

[KeywordEnum(A, B, C)]_UseMode("Mode Change", Float) = 0

　さて、一番凝った機能を実装できる方法として、MaterialのInspectorを乗っ取るには、シェーダー側で使用するInspectorのクラス名を指定しておく必要があります。指定があると、そのシェーダーをInspectorで表示した際には指定のクラスで描画される事になります。シェーダーの最後に以下のように書き加えます。詳細についてはUnity公式のこちらを見てください。

CustomEditor "LerpColorInspector"

　出来上がったものは以下です。いろいろゴニョゴニョやってますけど、肝となるのはOnInspectorGUI()の中で、shaderKeywordsを取得してきて現在の設定値を得て、それを元にToggleを描画して切り替えスイッチの機能を提供して、また設定値をshaderKeywordsとして書き戻すというところです。
　以下の例では、先程のLerpColor機能のオンオフを切り替えるトグルスイッチを描画して、機能を使用しない場合には関連パラメータを表示しないように細工しています。使わないパラメータを隠すことでアーティストに無駄なことをさせないで済むというやつです。こんな感じで、機能ごとに切り替えを作っていくと良いです。

　Inspector用のコードは以下のようになります。

▶クリックで展開

//LerpColorInspector.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;

public class LerpColorInspector : MaterialEditor
{
  const string keyUseLerpColor = "_USE_LERP_COLOR";

  public override void OnInspectorGUI()
  {
    if (!isVisible)
      return;

    //現在のマテリアルからキーワードを得る
    Material targetMat = target as Material;
    string[] oldKeyWords = targetMat.shaderKeywords;

    bool useLerpColor = false;
    foreach (var key in oldKeyWords)
    {
      if (key.Equals(keyUseLerpColor))
      {
        useLerpColor = true;
      }
    }

    //GUIの変更をチェック開始
    EditorGUI.BeginChangeCheck();

    //パラメータを描画
    EditorGUILayout.BeginVertical("Box");
    DrawProperties("_MainTex");
    EditorGUILayout.EndVertical();

    EditorGUILayout.BeginVertical("Box");
    useLerpColor = EditorGUILayout.Toggle("Use Lerp Color", useLerpColor);
    if (useLerpColor)
    {
      DrawProperties("_LerpColor");
    }
    EditorGUILayout.EndVertical();

    //変更があったら反映させる
    if (EditorGUI.EndChangeCheck())
    {
      //キーワードリスト作成
      List<string> newKeyWords = new List<string>();
      if (useLerpColor)
      {
        newKeyWords.Add(keyUseLerpColor);
      }

      //新しいキーワードリストをマテリアルへ設定
      //これによって適切なバリアントのシェーダーが選択される
      targetMat.shaderKeywords = newKeyWords.ToArray();
      EditorUtility.SetDirty(targetMat);
    }
  }

  void DrawProperties(string showParam)
  {
    Shader shader = ((Material)target).shader;
    for (int i = 0; i < ShaderUtil.GetPropertyCount(shader); i++)
    {
      string name = ShaderUtil.GetPropertyName(shader, i);
      if (name.Contains(showParam))
      {
        MaterialProperty prop = GetMaterialProperty(targets, i);
        ShaderProperty(prop, prop.displayName);
      }
    }
  }
}

社内で使用しているエフェクト統一シェーダーはこんな感じです

　機能別にチェックボックスやドロップダウンでモードが切り替えられるようになっており、選択されたモードに応じて有効な設定値が出るようになっています。色々設定してパラメータがいっぱい出ると以下のように長くなります。

　使える機能を列挙すると以下のような感じですが、一部の機能はすでにUnityに標準で備わっていますのでそろそろ使用頻度を考慮しつつ内容の再検討したほうがいいかもしれないとは思っていますが、ご参考になれば幸いです。

• マスク機能
• 色変更機能
  • 輝度の暗い方に色を載せる
  • 明るい方、暗い方にそれぞれ色を差し替える
• ブレンド機能
  • 標準ブレンド
  • 加算ブレンド
  • 事前α乗算式ブレンド（設定値次第で加算も可能）
• Z値の操作機能
  • Zテスト無し（最前面描画）
  • Zオフセット
  • ソフトパーティクル
• UVの操作機能
  • UVスクロール
  • パターンチェンジ
  • UVミラーリング
• カットオフ機能
  • パンチスルー（1bit抜き）
  • 半透明カットオフ
• HDR輝度スケーリング
• RenderQueueの値操作

みなさんも一緒に働きませんか？

　ここまで読んでくださった方、ありがとうございます。
　TAセクションではこのようにアーティストの制作に役立つ環境を提供できるよう力を注いでおります。やりたいことを遠回りせずに行える環境でお仕事したい方はぜひ下記の弊社グループ採用サイトをご確認ください。いっしょに働きましょう！
　現在いろいろな職種でアーティストを多数募集しております！

採用情報 | セガ企業情報サイト

sgtech 2017-10-25 10:00

2日間でゲームを作ろう！ ～挑戦し続けるSEGA Game Jam～

皆さん初めまして。
セガ・インタラクティブ 第三研究開発部 プログラマの山田です。
普段はアーケードゲームの開発を行っていますが、今回の記事では社内で行っているSGJ（SEGA Game Jam）についてご紹介します。技術的な内容ではありませんが、セガグループのクリエイティビティを養っている活動の一つとして、その様子とメリットをお伝えしたいと思います。

目次

SGJとは？

参加者を募集して即席のチームを作り、テーマに沿ったゲームを短期間で制作するイベントです。
年に1回、世界規模で行われているGGJ（Global Game Jam）の制作期間は48時間ですが、SGJでは34時間とより短めです。
職種や部署に制限はなく、業務ではゲーム開発を行っていない営業部や宣伝部などの方も参加しています。また、普段はプログラマだけど企画をやってみたい！といった試みも気軽に行えます。
SGJは2012年から年に2回ペースで行っていて、先日記念すべき第10回目のSGJが開催されましたので、これからその模様をかいつまんで紹介していきます。

1日目 7/15(土)

8:30～ 受付

朝早くから続々と参加者が集まってきます。

参加者には受付と同時に、こちらのSGJ記念Tシャツと缶バッジをプレゼントしました！

記念Tシャツのデザインを担当してくれた茂呂さんです。
人との繋がりを大事にしながら楽しいSGJになるようにという思いを込め、エネルギーが沸いてくるようなデザインにしたそうです！

開会式までの時間を利用して、事前に募集していたテーマの候補に対し1人3票で投票します。

9:00～ 開会式・テーマ決定・チーム分け

今回は30名の参加者が集い、SGJが開幕します。

各自簡単に自己紹介をした後、テーマを決定します。
投票で得票数の多かったものの中からサイコロを振った結果、今回のSGJのテーマは「ライブ」に決まりました！

テーマの候補から参加者の趣味嗜好が伺えますね（笑）

このテーマ次第で制作するゲームが大きく変わってきます。
過去には「シバエビ」なんてテーマもありました。

次にチーム分けを行います。
参加者が使いたいツールやチャレンジしてみたいことなどをある程度考慮した結果、今回は5チームで制作をすることになりました。

制作開始！
開会式が終わるとチーム毎に分かれ、それぞれアイデア出しを始めます。

VRゲームを作ると意気込んでいたチームは早速機材を触り始めます。

昼食
そうこうしている内に昼食タイム。
アイデア出しも続けながらチームの親睦も深まります。

昼食の後は企画発表会に向けて作業が始まります。

15:00～ 企画発表会

作業時間もつかの間、企画発表の時間です。
この時点でチーム名やタイトル名を決めてもらっています。





機械学習を取り入れたゲームに挑戦するチームも！

制作再開！
企画発表の後はα版発表に向けて本格的に動くものを作り始めます。
短時間でやるからこそタスクやスケジュール管理も疎かにはできません。

第10回記念として、これまでSGJで制作されたゲームの展示コーナーも用意しました。
その数なんと53！
OculusやLeapMotionなどの特殊なデバイスで遊ぶゲームもあります。

中でもTobii EyeXのアイトラッキングシステムを使ったゲームが注目を集めた模様。
見学者や、参加者が休憩中に遊んで賑わいました。

見学に来てくださった「つくる女」の大河原さん。

20:00～ α版発表会

開会式から早11時間！α版発表会の時間です。
軽食で英気を養いながら発表に聞き入ります。

まだ大雑把ですが、各チーム動くものができています。

制作再開！
α版が終わると再び作業の時間になりますが、明日もあるのであまり無理はしません。
残っているタスクを確認して、今日中にやるものや明日のβ版までにやるものを決めておきます。




キリの良いところまで終えたら1日目終了です！お疲れ様でした！

2日目 7/16(日)

2日目の朝は各チーム毎に決めた時間から作業が始まります。

12:00～ β版発表会

午前が終わると共にβ版の発表です！
デザインやサウンドのデータも入ってきて、α版からの変化が伺えます。

12:30～ 昼食

β版発表の後は完成に向けて腹ごしらえ！腹が減っては戦ができません。
お寿司やピザに加えて、


今回は第10回記念ということでケーキも用意しました！

左に写っているのは嬉しそうに「祝」の部分を貰う私。

この後レッドブルと一緒に食べていたらお腹を壊しました……。

制作再開！
腹ごしらえができたら完成に向けてラストスパートをかけます。
時間との戦いになるので優先度が低いタスクは潔く除外してバグを直したり、入念にゲームバランスを調整したりとゲームのブラッシュアップを行います。

そしてついに……

19:00 制作終了！

やり切ったという人もいればやり残したという人もいますが、これから最終発表会が始まります。

19:15～ 最終発表会

動画でお伝えできないのが心苦しいですが、どのチームもしっかりゲームができていました！

チーム：ゴトトラ
迫りくるおっさん達を掻い潜り、セガハードガールズをライブ会場に導こう！

チーム：好きなことして生きていく
YouTuberとして人気を獲得し生計を立てるカードバトル！

チーム：婚活研究開発部
超回復でデカい男になり、ラスボスと結婚せよ！

チーム：がんばれ加藤くん1号
ロボットを学習させてゴールを目指そう！

チーム：SPACE BOULDER 7
VR＋宇宙空間でボルダリング！

発表会の後に皆で試遊会。VRが大人気です！

最後に集合写真をパシャリ。SGJで繋がるセガグループの輪！

2日間お疲れ様でした！

SGJの効果

さて、第10回SGJの模様を凝縮してご紹介しましたが、参加者には一体どのような効果があるのでしょうか。
毎回アンケートを集計して効果を測定しているので、今回の結果を一部公開します。

参加者の多くはSGJの経験が今後の業務にも活用できそうだと感じていることがわかります。
また、どのあたりに効果があったと感じたかという質問に対しては、第一に『モチベーションアップ』、次いで『人脈』、『ゲーム作りの経験』、『スキルアップ』という結果でした。
人により効果は様々ですが、モチベーションや人脈といった目では見えにくい部分に高い効果があることがわかります。私自身もSGJを通して初めて会った人が沢山いますし、SGJで初めて使ったツールもあります。
短期間で行うGame Jamの特性上、経験やスキルアップといった直接的な効果は他と比べて低くなっていますが、逆に短期間で行えるからこそ、「次はこうしてみよう」とか「これはうまくいった」といった振り返りがすぐに行え、繰り返し行うことで経験やスキルアップの効果はさらに高くなると私は考えています。

運営側もこうしたフィードバックを受けつつ毎回振り返りを行い、より有意義なSGJになるよう試行錯誤しています。

まとめ

SGJを開催し始めてから早6年、計10回のSGJを行ってきましたが、参加者からは概ね高い評価を得られていて、横の繋がりが深まるきっかけにもなっています。
この記事を読んでくださった方がGame Jamに興味を持ち、各地で行われているGame Jamに参加することで何かを得るきっかけになれば幸いです。

もちろん、私たちセガグループに加わり一緒にゲームを作りたいという方も大歓迎です！
もしご興味を持たれましたら、セガグループ採用サイトをご確認ください。

採用情報|株式会社セガ・インタラクティブ
採用情報｜株式会社セガゲームス -【SEGA Games Co., Ltd.】

モデル協力：セガ・ハード・ガールズ

---

セガ・ハード・ガールズ公式　HP：http://shg.sega.jp/
公式twitter：アソビン教授（セガ・ハード・ガールズ）　@SHG_Official
TVアニメ『Hi☆sCoool! セハガール』公式HP：
http://shg.sega.jp/anime.html

(C)SEGA /セハガガ学園理事会

---

CEDEC 2017 セガグループセッション紹介

皆さんこんにちは！
セガゲームス、開発サポート部の麓です。

このSEGA Tech BlogもCEDECの記事が2回めとなり、オープンより1年経過しました。
月日の流れの速さを感じ、技術の発展の速さに目まぐるしさも感じる今日このごろです。

皆様にとってこの一年、どんな時間を過ごされたのでしょうか？
さて、いよいよ来週に迫ったゲーム業界最大のカンファレンス
CEDEC 2017　会期：2017年8月30日(水)～9月1日(金)
ですが、今年もセガグループからも多く登壇することになっています。
今年はCEDEC登壇者及びセッションを紹介に加えて、ここでしか見れない講演内容の見どころと、当日の資料からの抜粋を一部の講演者から頂いてますのであわせて紹介していきます。

---

Technical Artist Bootcamp 2017 vol.1 「Automation for TA」(前半)

セッションの内容

「TA育成チュートリアル：自動化」をテーマにTAに必要な知識の学習
1.「プログラマに頼らず使えるようになる。Jenkinsを使ったTA向け自動化入門」
プログラマがいつも便利に使っているJenkins。TA（を目指す）方ならアレをうまく使ってデザイン作業の自動化もできないかと考えた事はないでしょうか。本セッションではできるだけ難しい言葉を使わずに、受講者が自分でJenkins環境を作って自動化できるようになる手順を説明します。
株式会社セガゲームス　開発技術部　ビルドエンジニア　粉川 貴至　他
8月30日(水) 11:20〜12:20

資料スナップショット

講演内容についてのコメント

「プログラマに頼らず使えるようになる。Jenkinsを使ったTA向け自動化入門」という事で、普段TAの方々が携わっているDCCツール周りの作業の自動化をJenkinsにやらせてみるための入門講義です。
せっかくのブートキャンプなので、当日はデモをお見せしながら実際に動かすところを中心にレクチャーする予定です！

---

無料で始める！「龍が如く」を面白くするための高速デバッグログ分析と自動化

セッションの内容

ゲーム開発では、テストプレイやツール使用中等、様々な状況でログが発生します。
本セッションでは、「龍が如く6 命の詩。」の開発期に発生する
デバッグログ（Printf出力したものやゲームプレイログを含む）を、
オープンソースの組み合わせ（Fluentd + Elasticsearch + Kibana）により収集・蓄積・分析し、
オートテスト（自動プレイテスト）、Jenkins、Redmine等と連携することで、
開発とテストのコストを削減し、ゲームの品質や面白さの向上につなげた事例についてご紹介いたします。
株式会社セガゲームス　第1CSスタジオ　リードプログラマー　阪上 直樹
8月31日(木) 11:20〜12:20

資料スナップショット

講演内容についてのコメント

ゲーム開発におけるログ分析と自動化は、各社様々な創意工夫をされていると思います。
本セッションでは、コンシューマかつシングルプレイが主体のゲームでも、開発期のデバッグログを集めて分析し、自動化と組み合わせることで、ゲームのクオリティアップに貢献できた事例をご紹介いたします。
帰ったらウチでも試してみようと感じていただけるような講演を目指して鋭意準備を進めておりますので、お気軽に聞きに来ていただけると嬉しいです。

---

高速「体験」を生み出すレベルデザイン　～ソニックフォースの「セット」手法～

セッションの内容

レベルデザインは、プレイヤーを観察しながら調整を続けていくことが必要ですが、ポイントを押さえずに調整を続けても全く良くなっていきません。
本セッションでは、2017年冬発売予定のソニックシリーズ最新作「ソニックフォース」(アクションゲーム)の「セット」(ステージ内にオブジェクトを配置する作業)を例に、レベルデザインを行なう上でのポイントと検証改善の過程をご紹介します。
株式会社セガゲームス　コンシューマーコンテンツ事業部　第２CSスタジオ　プランナー　神谷　聖子
9月1日(金) 16:30〜16:55

資料スナップショット

講演内容についてのコメント

アクションゲームのステージのオブジェクトの配置について話をしようと思います。どんなことを考えながら調整しているのかを、動画を使いながら丁寧に説明していきますのでどなたでもお気軽にお越しください!!

---

若手テクニカルアーティストの業務効率改善への貢献、育成について話すラウンドテーブル

セッションの内容

年々需要が高まってきたテクニカルアーティスト（以下、TA）としての業務効率化。
しかし、TAは技術的な興味や知識も必要とされ、そのため一般的には経験を積んだアーティストもしくはプログラマーの中から、さらに素養が有った場合の人がなる、というレアケースが多いと聞きます。

若手もしくは新人からTAとして業務をし、業務改善や効率化への貢献は出来ないのでしょうか。TAを育てていくという考えに繋げていくことは出来ないでしょうか。

登壇者として名前を挙げているのは、新卒ながらTAとして業務経験を積んだ２人です。その経験をサンプルケースとして、ラウンドテーブル形式で参加者の方々と議論を交わしましょう。

TAとして求められる業務に若手のうちから参加していくことによる業務改善と、それによりTAを育成していく可能性を生み出し、業界への貢献につなげられる事を目標とします。
株式会社セガゲームス　オンラインコンテンツ事業部　開発サポート部　エンジニア　清水　宣寿　他
8月30日(水) 16:30〜17:30

資料スナップショット

講演内容についてのコメント

本セッションは、当日会場に来てくださった参加者の皆様と共に議論を交わし合うラウンドテーブル形式のセッションです。
若手や新人にテクニカルアーティスト業務ができるのか、テクニカルアーティストの育成には何が必要か、
といった内容について、共に話し合いましょう。
皆様のご参加をお待ちしています。

---

GameVFX Bootcamp 2017　ゲームエフェクトの今を4つの視点から

セッションの内容

ハードウェアとプログラム技術の進歩がもたらす表現力の向上により、ゲームのビジュアルを強化するVFX(エフェクト)の重要性は増し続けています。
フォトリアルを追及するもの、差別化のため独自のビジュアルを突き詰めるものなど、多種多様のタイトルがさまざまなプラットフォーム上で進化を続け、目指す表現に最適なエフェクトを突き詰めるため多くのアーティストが試行錯誤を続けています。
その中で、希少性・専門性から他に比べて共有されることの少ないエフェクト制作の現状を「アーケード」「モバイル」「コンシューマ」そして「教育」の4つの側面から切り取ります
・ゲーム全体のビジュアルにおいてエフェクトがどうあるべきか、ディレクションの観点から(マジシャンズ・デッド他)
・少人数で複数のモバイルPJを開発する際の人員管理フロー、並行してR&Dを行うノウハウ、Unity環境での効率化の実態(セガネットワークス)
・最新コンソール向けタイトルにおけるエフェクト作業の全容とそのポストモーテム(龍が如く6 命の詩。)
・ゲームにおけるエフェクト制作を理解し、その技術を身に着けるための教育(実際の現場における社内研修用資料を例に)
などを通し、2017年におけるゲームエフェクトの現状を多面的に理解し、学ぶためのセッションになっております。
株式会社セガゲームス　CSOLカンパニー　第一CSスタジオ　リードアーティスト　岩出　敬
株式会社セガゲームス　ゲーム&デジタルサービス統括本部 IP&ゲーム事業部 開発統括部 アート＆デザイン部　リードデザイナー　綿貫　正　他
8月30日(水) 14:50〜17:30

資料スナップショット

講演内容についてのコメント

ゲームにおけるVFX=Visual Effectsは、映画などのそれ(爆発など)だけでなく、爽快感を増すための演出(ヒットマークや軌跡)や、ルールを表すための記号(属性効果)など、様々な役割があります。
このセッションではそんなエフェクトを作る担当者が集まり、アーケード、モバイル、家庭用それぞれで磨かれてきたノウハウを共有します。
普段あまり話される事がないGameVFXの裏側を楽しんで頂けたら幸いです。

---

スマホゲームで物語を更新し続けること。4年間のストーリー制作コンセプトの変遷をファクトに重ねて

セッションの内容

昨年のセッション「スマホゲームにおけるゲーム性と物語性の“運用で摩耗しない”基礎設計手法～チェインクロニクル３年の運用と開発の事例を交えて～」に対して、モバイルゲームにおける物語について、より突っ込んだ話を、可能ならば実績データを交えて、という声を多く頂きましたので、そのセッションを行わせていただきます。4年間、同タイトルで物語に立てたコンセプトに、どのような結果が返ってきて、そこにどんな対応を行っていったか、その変遷を追っていきます。4年という長さで運営していることによる物語運用の知見、そして物語という作家性の強いコンテンツを運営において大切な「事実に基づく（ファクトベース）の対応」にどう結び付けるかの指針が提示できればと思います。
株式会社セガ・インタラクティブ　モバイルインタラクティブ研究開発部　部長　松永　純
8月30日(水) 14:50〜15:50

---

これからのeSportsへの取り組み ~大会実況システムの開発と運用を通して得られた知見~

セッションの内容

本セッションでは、年間通して多数の大会を開催するセガ・インタラクティブにおける大会運営に関する独自の取り組みをご紹介します。

ゲーム大会はその性質上、上級者が集まるため、高レベルなプレイングやコアなファンとの交流が生まれる一方で、ゲーム初心者や未プレイのお客様にはわかりにくいものになってしまうリスクがあります。そこでセガ・インタラクティブではその解決方法として大会実況システムを開発し、これに対応いたしました。

この大会実況システムを使用した弊社アーケードゲームの大会運営や、社内ゲーム大会運営を通して得られた経験を元に、お客様にイベントを楽しんでいただくための技術的な課題解決のプロセスの紹介や、ショービジネスとしてのeSports運営に活かすべき知見、そして弊社の大会運営システムの機能について実施例の映像を交えて解説いたします。
株式会社セガ・インタラクティブ　第一研究開発本部　野口 洋介
株式会社セガ・インタラクティブ　第一研究開発本部　チーフプログラマ　山本 宗平
8月31日(木) 10:30〜10:55

資料スナップショット

講演内容についてのコメント

弊社ゲーム大会で運用しているゲーム大会実況システム、運用を始めてかれこれ２年となりました。
システム開発の経緯から、これまでの運用で得られた知見などをこの機会にご説明できればと考えています。
ゲーム実況放送やゲームイベントに興味のある方はどなたでもお気軽にお越しください。

---

[芸術科学会(Nicograph)×CEDECコラボセッション] 芸術と科学の融合とTechnical Artist

セッションの内容

近年、コンピュータエンタテインメント業界では高い技術力と表現力を必要とするため、テクニカルアーティスト、テクニカルディレクタの需要がますます高まっています。この分野では，芸術と科学の双方を理解し，それを制作のパイプラインの中で実現していく，人材が求められます．また，Siggraphなどのアカデミックな世界でのCGの研究成果を理解し，それらを応用し作品の中で利用していく能力が求められます．
本セッションでは，古くから芸術と科学との融合領域を対象に活動する芸術科学会から，この領域の研究と人材育成の先端にいる教員と，ゲーム開発の最前線のパネラーを招き，パネルディスカッション形式で実施します．「いかにしてテクニカルアーティストの人材を育成するか」と「最先端の表現技術の研究とその応用」の視点で，学術界と産業界とともに考える場とします．

※ 本招待セッションは、芸術科学会(Nicograph)とのコラボレーション企画セッションとなります。
芸術科学会の公式サイト: http://www.art-science.org/
株式会社セガゲームス　オンラインコンテンツ事業部　開発サポート部　麓　一博　他
8月30日(水) 17:50〜18:50

講演内容についてのコメント

パネルディスカッション形式のこのセッションでは芸術科学会や各分野の先生方や、新進気鋭のゲーム会社の代表の方交え、実際にテクニカルアーティストとして働き、CEDECでもTAラウンドテーブルやTAブートキャンプを企画してきた麓の視点からお話をさせていただき、考える場になればと願っています。

---

気になるセッションはありましたでしょうか？
それでは8月末と9月初日はパシフィコ横浜　会議センター(神奈川県横浜市西区みなとみらい)で会いましょう！

将来CEDECに登壇してみたいと思っている方。
技術力豊かな、オープンで楽しいゲーム会社で働いてみませんか？
興味を持った人は以下にアクセスしてみて下さい！

採用情報｜株式会社セガゲームス -【SEGA Games Co., Ltd.】

採用情報|株式会社セガ・インタラクティブ

※複数社登壇の場合でもセガの社員のみ表記しています

セガ新人日記を別ブログにて新規開設しました！

はじめまして！

セガ・インタラクティブ新人、プランナーのYです！

新入社員として会社に入ったばかりの時に

どんな研修を受けているのか興味はありませんか？

部によって様々な研修のスタイルがあるのですが

今回は、我々セガインタラクティブの第一研究開発本部の

新人研修の様子を紹介させていただきたいと思います！

実は！私たち新人でブログを立ち上げました！！！

このブログでは、特に「プランナー」の研修って何するの？っていうところと

ゲーム制作研修の様子をお伝えします！

バナーも私たちがつくっちゃいました！笑

こちらのブログで紹介させていただきます！！！！

※技術ブログではありません

めったに出てこないセガの開発者の話を聞けるかも・・・？

セガの一員として研修の様子を精一杯お伝えいたしますので

皆様、宜しくお願い致します！

まだまだ入社したばかりですが、色々なことにチャレンジできる会社です！

セガのモノ創りを体験してみたい方など、もしご興味持たれましたら、

弊社インターンシップサイトをご確認下さいね！

http://sega.co.jp/info/internship/　

セガ新人日記もよろしくお願い致します！