Unityで作るDissolveShader

エンジニア

目次

自己紹介

初めましてクライアントエンジニアのK.Kです。

主にクライアントの作業をしている者ですが、 より見た目を綺麗にしたい、より製品のクオリティを自分の力で良くしたいなどの理由から1年ちょい前からシェーダーの勉強をしています。

まあシェーダーで何が出来るかイメージつかないかもなので、私が勉強がてらに作成したものを紹介します。

地面を塗ることができるシェーダー

f:id:rf-blog-sagyo:20201016160337g:plain

キャラクターを炭で書いたように表現するシェーダー

f:id:rf-blog-sagyo:20201016160825p:plain

塗るシェーダーと炭シェーダーを掛け合わせたもの

f:id:rf-blog-sagyo:20201016163500g:plain

そして今回ちょっとおしゃれな遷移を作りたかった！

f:id:rf-blog-sagyo:20201015200802g:plain

シェーダーとは

シェーダーとは簡単に考えるとCPUがGPUに表示方法を教えるための物です。 ではなぜCPUがGPUに表示方法を教える必要があるのでしょうか？

1920x1080のモニターで一度考えてみましょう。 1920x1080この数字はピクセル数を表しています、なので画面を一度描画するためには2,073,600ピクセルを処理しなければいけません。 CPUは難しい計算を淡々とこなしていくことが得意です。 ですが200万近くもしくはそれ以上の単純処理を一度にお願いしてしまうと突然処理が間に合わなくなります。 そこでGPUの登場です。 GPUは複数の単純処理を一度に行うことが得意で、200万近くの処理を行うにはもってこいです。 そのためにシェーダーが存在しています。

Unityでシンプルなシェーダーを見てみる

UnityでのShaderはShaderLabを使用しています。 ShaderLabは普通 Cg/HLSL プログラミング言語で書かれています。 Unityは自動的にDirect3D 9、OpenGL、Direct3D 11、OpenGL ES 等にコンパイルしてくれるため、シェーダーはすべてのプラットフォームで動作します。 そこで画像をそのまま表示する一番シンプルなシェーダコードがこちらです。

Shader "Simple"
{
    Properties
    {
    }
    SubShader
    {
        Tags {"Queue"="Transparent" "RenderType"="Transparent"}
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;

            fixed4 frag (v2f_img i) : COLOR
            {
                fixed4 col = tex2D(_MainTex,i.uv);
                return col;
            }
            ENDCG
        }
    }
}

いきなり見ても分かりづらいのでかみ砕いてこのシェーダーコードを簡単に説明していきます。

Shader

Shader "Simple"
{
    // シェーダーの中身
}

こちらがシェーダーの名前を指定する箇所です。

Properties

Properties
{
    // 追加パラメータ
    _NoiseTex ("Noise",2D) = "white"{}
}

シェーダー外部から入れるパラメータです。 ここで画像や値を入れることができます。また外部のコードからアクセスする事が出来る箇所です。 f:id:rf-blog-sagyo:20201015195935p:plain

構造が シェーダーで使う変数名("外部から見たときの名前",変数の種類) = デフォルト値になります。

ですのでこちらは_NoiseTex ("Noise",2D) = "white"{} シェーダー内では_NoiseTexという変数名で扱う Unity内ではNoiseという名前になる パラメータ自体は2D画像の物になる 最後のデフォルト値は"white"{}とあります。 こちらは画像が設定されていない場合白い画像が使われます。

SubShader

SubShader
{
    // 共通な設定やTagなどの指定
    Pass
    {
        // passのコード
    }
}

SubShaderとはPassで共通使用する設定、Tagなどを指定できる場所です。

#pragma

#pragma vertex vert
#pragma fragment frag

#pragmaとありますがこちらは何を利用するかを指定する場所です。
#pragma vertex name はnameに値する関数で頂点プログラムを含むことです。
#pragma fragment name はnameに値する関数でフラグメントプログラムを含むことです。

FragmentShader

fixed4 frag (v2f_img i) : SV_Target
{
    return fixed4(1,1,1,1);
}

fragはフラグメントシェーダーのコード部分です。 フラグメントシェーダーは描画される各ポリゴンに対して行う処理です。 フラグメントシェーダー色々ありますが画像編集ツールでよくある効果やマスクをイメージしてもらえると良いかもしれません。 f:id:rf-blog-sagyo:20201015212532p:plain

DissolveShader

今回はここからフラグメントシェーダーのみを利用して画像が消える演出、DissolveShaderを作っていきます。 f:id:rf-blog-sagyo:20201015200109g:plain

DissolveShaderは色々な物に使われており、使い方次第で敵が倒され、黒くなりつつ消えていく演出もできます。f:id:rf-blog-sagyo:20201015200144g:plain

まずはノイズのテクスチャーのパラメータとエフェクトがかかる強さを表すRateを用意します。

Properties
{
    _NoiseTex ("Noise",2D) = "white"{}      // 追加
    _Rate ("DissolveRate",Range(0,1)) = 0   // 追加
}
SubShader
{
//...
    Pass
    {
        //...
        
        sampler2D _MainTex;
        sampler2D _NoiseTex;    // 追加
        FLOAT _Rate;            // 追加
    
        //...
    }
}

DissolveShaderはノイズの画像を利用してDissolveをかけるRateに応じて画像のα値を抜いていくものになります。 使用するノイズの画像ですが基本的には白黒の画像を使用します。
f:id:rf-blog-sagyo:20201015212747j:plain

さてこちらのグラデーションの画像を見て一般的にはどこから消えるべきでしょうか？ こちらの画像をフラグメントシェーダー内で見る場合はピクセル単位の色を見ることになります。

シェーダの色はfixed4(r,g,b,a)で0から1の間で値を持っているのですが、 左上のピクセルの場合色がfixed4(1,1,1,1)、右下のピクセルの場合色がfixed4(0,0,0,1)になります。

マスクなどでもそうですが1が表示すべき、0が隠すべきといった考え方になります。 よって、黒い部分から消えていくのです。

この二つのパラメータを準備した後にノイズテクスチャーの色の値を取る関数を用意します。

FLOAT NoiseValue(sampler2D tex, half2 uv)
{
    fixed4 col = tex2D(tex, uv);
    return (col.r + col.g + col.b) * 0.3333; 
}

sampler2Dは画像でuvはピクセルの座標になります。 その後にrbgの色値を平均させた値を返します。

ノイズの値を取る関数を用意したのでフラグメントシェーダーに反映させ、以下のようにします。

fixed4 frag (v2f_img i) : COLOR
{
    fixed4 col = tex2D(_MainTex, i.uv);
    
    FLOAT noise = NoiseValue(_NoiseTex, i.uv);
    col.rgb = lerp(col.rgb ,1 ,step(col.a ,0));
    
    return col;
}

こちらが実行結果です。 f:id:rf-blog-sagyo:20201015212933g:plain

Rateのパラメータを変えても変わりません。

これはシェーダーに正しい設定が出来てないからです。

SubShader
{
    Tags {"Queue"="Transparent" "RenderType"="Transparent"}
    Blend SrcAlpha OneMinusSrcAlpha  // 追加
    ZWrite Off  // 追加
    Pass
    {
        //...
    }
}

Blend設定に SrcAlphaとOnMinusSrcAlphaを追加 Blend設定を簡単に考えると描画されている物の色の混ざり具合の設定です。 こちらではα値を見て不透明にする設定の追加です。

ZWrite Off でポリゴンの裏側の描画をし、無くしています。

こちらが実行結果 f:id:rf-blog-sagyo:20201016133944g:plain

おまけ

”DissolveShaderは色々な物に使われており、使い方次第で敵が倒され、黒くなりつつ消えていく演出もできます。”

α抜きを行う直前に指定した色に変更すれば結構おしゃれになります。

そのためには指定したい色、色のしきい値のパラメータを追加し反映します。

Properties
{
    _NoiseTex ("Noise",2D) = "white"{}
    _Rate ("DissolveRate",Range(-1,1)) = 0
    _Color ("AcidColor",Color) = (1,1,1,1)              // 追加
    _Threshold ("DissolveThreshold",Range(0,1)) = 0.5   // 追加
}
SubShader
{
//...
    Pass
    {
         //...
         
         sampler2D _MainTex;
         sampler2D _NoiseTex;
         FLOAT _Rate;
         fixed4 _Color;         // 追加
         FLOAT _Threshold;      // 追加
         
         //...

         fixed4 frag (v2f_img i) : COLOR
         {
             fixed4 col = tex2D(_MainTex, i.uv);
             
             FLOAT noise = NoiseValue(_NoiseTex, i.uv);
             col.rgb = lerp(col.rgb ,1 ,step(col.a ,0));
             col = lerp(col, _Color, step(noise, _Rate + _Threshold));  // 追加
             col.a = lerp(1,0,step(noise, _Rate));
             
             return col;
         }
         
         //...
    }
}

これが実行結果になります。

f:id:rf-blog-sagyo:20201015200802g:plain

さいごに

シェーダーは何処から始めればいいか、何を勉強すればよいかと敷居が高い分野ですが、 サンプルコードなどはたくさんネットに散らばっています。 色々なサンプルを作っていく際に確実に身につくものはあります。

様々なシェーダーを作っていけば、これが出来るのでないか、あれが出来るのでないかと想像や可能性を実感できるので興味があるならば諦めずに挑戦し続けてほしいです。
難しいけどシェーダーは楽しいからいっぱい書こう！！

参考

docs.unity3d.com

docs.unity3d.com

qiita.com

© UTJ/UCL

学生時代ほぼ自己流で学んでいた専門卒3Dアニメーターが、入社して1年間で得られたことふりかえり

デザイナー

目次

はじめに

こんにちは！3DアニメーターのS.Kです。

今回は入社して丸1年が経ち
・学生の時と何が違うのか。
・そして技術的、精神的にどう成長できたか
という記事を書こうと思います。
まだ二年目ということもあり、学生さんに近い目線でお話ができると思うので、3Dアニメーターを目指す皆さんのお役に立てると嬉しいです！

学生時代にしていたこと

僕は元々アニメが好きでこの業界を目指していました。
しかし、自分が在籍していた学校にはアニメーションに関する授業がほとんどなく
ネットでなんとなく調べたり、創りたいな！と思うものを独自で創っていました。
この、「ちゃんとアニメーションの技術を調べず創りたいものをなんとなく創っていた」ということが、今でも後悔している反省点の一つです。

しっかりとした「知識をインプットし、作品へアウトプット」という工程をしていなかったことが 今でも本当に悔やまれます。
最低限の「12原則」などは何となく理解していましたが、
アニメーションはとても奥が深く、知識、経験がなくても仕事として提出できるものを創れるほど甘い世界ではありませんでした。


＊アニメーションにおける１２原則とは
・SQUASH＆STRETCH ・ANTICIPATION
・STAGING
・STRAIGHT AHEAD＆POSE TO POSE
・FOLLOW THROUGH＆OVERLAPPING
・SLOW IN＆SLOW OUT
・ARCS
・SECONDARY ACTION
・TIMING
・EXAGERATION
・SOLID DRAWINGS
・APPEAL
上記からなるアニメーションの考え方です

昔と違い、今では大事な基礎もネットで調べれば膨大な知識を得ることができる時代なので、学生の皆さんにはしっかりとアニメーションの知識を吸収し
得た知識、技術を作品に反映するということを実践して欲しいです。
最初のうちは退屈かもしれませんが
・重心を意識したポーズ
・アニメーション(一歩前に出る、椅子に座るなど)を創り
体の動かし方、重心の移動を徹底して勉強することをお勧めします。
これができず会社に入ってから僕はとても苦労しました。
本当に大事ですので、是非日々の勉強に取り入れてくださいね！

現在の勉強法

現在は、仕事と並行して時間を決めてポーズやアニメーションを作っては先輩へ提出し、
「なぜこの時はここがこう動くのか」などを教えて頂いています。
↓の画像は実際にポーズ作り、FBをもらい修正した際のデータで、
気を付けるべきことや教えて頂いたことを記載したメモになります。
f:id:rf-blog-sagyo:20200828172122p:plain

「時間を決めて」と書きましたがここが結構重要で、
時間を決めないと結局だらだらと作業してしまい、無駄になってしまうことがあります。時間を区切ることで終わりが必然的に決まるので、作業にもメリハリがつきます。
また、「時間内でどう完成させよう」と自然に効率化が図れます。
集中力も鍛えられるので一石四鳥な作業法です。

また、アニメーションの勉強とは別に美術解剖の勉強もしています。
アニメーションを創る上で骨や筋肉の可動域を理解することは、
とても大切なことです。
最近では 毎日10分は必ず美術解剖の本を読むようにしています。
こういう時には体はこう動く、男女の骨格の違いなどある程度ルールや法則性があるので
知識としてそこを知っていれば、男性らしいポーズ、女性らしいポーズなども
あまり悩まず創ることが出来ます。
僕が読んでいる「ソッカの美術解剖学ノート」という本ですが
アニメーター、モデラー、イラストレーターなど職種に限らず、1冊は持っていて欲しい！と感じる本です。
値段は少し張りますが、イラストも多く、わかりやすく説明してくれているのでサクサク読めますよ！

ソッカの美術解剖学ノート | ジョンヒョン, ソク, ジニ, チャン |本 | 通販 | Amazon

f:id:rf-blog-sagyo:20200828172929p:plain

今の仕事に関して

ゲームのストーリー部分のシネマや必殺技のカットインなどを
メインに作業をしています。
最近では、社内で制作しているゲームの
インゲーム部分のモーションを手伝っていました。
カットシーンの制作はアニメーションだけではなく、カメラワークも加わってくるので
モーションだけを作るよりも難易度は高くなりますが、
やりがいをもって仕事と向き合い
先輩たちに助けてもらいながらも精進しています。

入社から一年が経ち、かわった心境の変化など

学生の時は自分が好きだから、創りたいから作品を創っていましたが、
会社に入るとそうはいきません。
必ずしも自分がしたい仕事、創りたいものだけが創れるわけではないからです。
ですが、そこでふてくされてはいけません。何事も勉強です。
最初の方でも書きましたが、自分が苦手・気が進まない仕事でも必ず自分の経験値になります。
いざ自分がやりたいことができるとなった時、全力を尽くせず不完全燃焼よりも
自分の頭の中にある構想やイメージを全力で作品として具現化し
満足いくものが創れた方が良いし、楽しいですよね！

一番の心境の変化は、作品を見てくれる方々に満足してほしいと思うようになりました。
理由は、とある案件で携わらせていただいた作品の動画がYouTubeにあがり、親にそのことを話した時、とても喜び、褒めてくれたからです。
また、僕がアニメを見て感じたドキドキやワクワクを
今度は自分の作品を見てくれた人に感じてほしいと強く思いました。

会社に入ると、作業以外の業務は多く発生します。
業務に加えミーティングや、進捗会、その他雑務など一日はあっという間です。
そこで、なるべく時間を無駄にしないために最近では
一日のタイムスケジュールを作るようにしました。
「現在の勉強法」でも書きましたが、制約があるからこそ
作業の効率化を必死に行うし集中できるものです。
また、自分がいま置かれている状況を具現化することで、どうすればよいのか
作業が遅れてしまっていたら、どこで巻き取ればよいのかなども見えてきます。
↓画像は実際に自分決めて行っていたタイムスケジュール表です。

＊「用語集調べ入力対応」とは
カメラワークやアニメーションの用語をエクセルにまとめ、
重要度を決めたり参考サイトのリンク付けを行うなど、
エクセルに用語をまとめる作業の事です。

f:id:rf-blog-sagyo:20200828175521p:plain

おわりに

学生の皆さんにお伝えしたいのは、就職してもそこはゴールではなく
ようやくスタートラインに立ったということです。
就職したらそこには自分よりも知識、技術をもった方たちが多くいます。
その人たちの中で自分も対等、もしくはそれ以上の
パフォーマンスを発揮できる人にならなくてはいけないのです。
仕事である以上、作品に対し「新卒だからしょうがない」ということは通用しません。
作品がクオリティーラインに達していなかったり、
劣っていればそれだけダメ出しがあったり、リテイクとなります。
そうならないためにも、「内定をもらったから」「就職したから」とあぐらをかかず
勉強や技術を高めることを続けてほしいと思います。
最後にはなりますが、皆さんがこの業界に入り、
一緒に仕事ができることを楽しみにしています。
先輩方に負けないようともに頑張っていきましょう！

長文になってしまいましたが最後までご覧いただきありがとうございました。

ゲーム開発の最後の砦！？ QAチームについて

QA

はじめに
初めまして。QAのリードをやっているものです。
QAとはゲーム開発においてクオリティを担保するための重要な砦として存在する部署です。
今回アールフォースで行っているQAの流れを説明します。



アールフォースのQAについて
まず初めにQAとは何かについてになります。
「QA」とは「Quality Assurance=品質保証」の略称になります。
会社によってはQC（Quality Control=品質管理）と言ったりします。

一言で簡単に言うと「デバッグ」になります。

デバッグと言われてイメージするのは長時間壁に向かって走り続けるようなすり抜けのチェックを思い浮かべる方もいるかもしれません。
そのようなデバッグをやることもありますが、アールフォースではそのデバッグ作業をメインでは行っていません。


作業の概要を端的に説明しますと
・クオリティを担保する為に必要な調査/提案
・クオリティを上げるためにテスト計画を立て実行

などを行っています。

もっと具体的に作業を説明しますと以下のような順番で作業を行っています。


上記をざっくりとした説明ものが以下になります。

仕様書レビュー

f:id:rf-blog-sagyo:20200717183048j:plain 開発の初期から仕様書を確認し、仕様漏れやユーザビリティ、ユーザーエクスペリエンスについての指摘/提案を行っていきます。

テストプランの作成

f:id:rf-blog-sagyo:20200717183448j:plain 開発中期に作成する資料で、テストの計画書になります。
テスト範囲や環境、テストスケジュール、人員計画等をまとめ、どのようなテストが行われるか事前に確認してもらうものになります。

テストケースの作成

f:id:rf-blog-sagyo:20200717184124j:plain 開発中期に作成する資料で、チェックシートの設計書のようなものになります。
どの機能に対しチェックシートを作成するかをまとめます。

チェックシートの作成

f:id:rf-blog-sagyo:20200717184223j:plain テストケースに記載されてる機能に対して仕様通りの挙動になっているかチェックするための資料になります。
確認するための操作とその結果どうなるのが仕様通りか、データの数値がどうなっているのが正しいのかなどがまとめられています。
また組み合わせチェックでは無数にあるパターンを記載しテストプランで決めた範囲をチェックしていきます。

テストパスの作成

f:id:rf-blog-sagyo:20200717184524j:plain すべてのチェックシートの確認に必要な時間と作業者の人数をまとめた資料になります。
すべてのチェックシートの確認が終わる事で1回のテストパスが終了となり、テストパスを13回行えば、致命的なバグはすべて発見できると考えています。

テストスケジュールの作成

f:id:rf-blog-sagyo:20200717184347j:plain テストパスを基に、13回すべてのチェックシートの確認を行うことができるスケジュールを作成します。
スケジュールは予定通り、想定外、理想など3通りほど作成し、プロジェクトに提案します。

BVT(Build verification test)の作成/実行

f:id:rf-blog-sagyo:20200717184707j:plain テスト用のアプリ作成時に必ず行う簡易的なチェックシートになります。
アプリの安定性向上やデバッグを行うための準備を目的として行います。

バグプロジェクション

f:id:rf-blog-sagyo:20200717184813j:plain 過去プロジェクトのデータを使用し、バグ報告のピークがいつになるか、報告件数はどれくらいになるか、修正可能件数は何件か、どのようなバグが多いかを予測します。
予測を基に、安定したリリースを行うためピークが来る時期を調整します。

バグトリアージ

f:id:rf-blog-sagyo:20200717184904j:plain 残っているバグが多い場合に、対応すべきバグとそうでないバグを仕分けます。
対応すべきものを明確化することで、やるべき作業に注力し、スケジュールの延期またはクオリティが低いゲームをリリースしてしまうことを防ぎます。

ポストモーテム

f:id:rf-blog-sagyo:20200717184957j:plain 開発終了後に行う反省会のようなものになります。
次回の開発の際に同じ轍を踏まないように、問題点に対し改善策を出していくものになります。
各セクションでまとめたものをリーダーたちで共有することで開発の度に成長していく組織を作っていきます。


まとめ
結構発言を軽視されがちなQAですが、最初にも言ったように実は最も大事な部署だと思っています。
QAやデバッガーがいないプロジェクトは開発を行いながら自分でデバッグを行い、バグを直しきれず、ユーザーに発見してもらうという状態になってしまいます。
そのような状態でリリースしたゲームはユーザーの皆さんに長く遊んでもらえない事が多く、そうならないための砦としてQAは存在していると思っています。
f:id:rf-blog-sagyo:20200717185050j:plain

就活生の必須科目？ プランナーこそ「コミュ力」を磨くべき

プランナー

目次

はじめに

お疲れ様です、プランナーのT2と申します。

好きな三国志の武将は鄧艾です。

 

さて。

今回は、就活生の間でよく取沙汰される、「コミュ力」についてのお話です。

f:id:rf-blog-sagyo:20200625152147p:plain

 

「コミュ力」とは何か

略さず言うと、「コミュニケーション能力」。

アルファベットで書くと"communication"。

コミュニケーションと、ネットで検索してみると、

英単語の1つで、「伝達」「通信」「意思疎通」などの意味。 言語、身ぶり、画像などの物質的記号を媒介手段とした、精神的交流のこと。通じ合い。

といった意味の言葉であることがわかります。

 

たまに間違った解釈をしている人がいますが、「コミュ力」というのは、ただ会話ができたり、自分の意見を一方的に通す能力のことではありません。

自分の意見を伝え、かつ相手の意見を聞き、自分を含めた複数の人の声を正しく理解する力のことなのです。

f:id:rf-blog-sagyo:20200625152236p:plain

 

ゲーム開発に「コミュ力」は必要なのか

一般企業の就職活動において、「コミュ力」の高さを求められる、という話をよく耳にします。

それでは、ゲーム業界ではどうなのでしょうか？

 

 

 

 

結論から言うと、めっちゃ必要です。

ゲーム業界に対して、

「高い技術力」や「センス」のある人材が求められる

といったイメージを抱いている人も多いかもしれませんが、

それらと同等か、あるいはそれ以上に、「コミュ力」は重要視されます。

f:id:rf-blog-sagyo:20200625152351p:plain

 

なぜ「コミュ力」が必要なのか？

「コミュ力」が重要視される理由は明白で、

ゲーム開発イコール「チーム仕事」だからです。

極端に小規模なゲームや、時間的制約が少ない自主制作タイトル、そして数少ない天才クリエイターを除いて、スタッフ1人のできる仕事の範囲は限られています。

例えば私は、プログラムコードは書けませんし、絵も描けません。 仕様書は書けますし、シナリオも書いた経験がありますが、両方を並行作業するのは、すごく時間が掛かってしまいます。

ところが、商業作品の制作には、往々にして納期・締め切りが伴います。

1人のスタッフによる開発には、限界があるのです。

そのため、チームを結成し、プロジェクトとしてゲーム開発に取り組んでいくのが、一般的なやり方となります。

 

しかし、複数のスタッフが同時並行で作業を進めている途中で、

それぞれが思い描く「できあがり」のイメージにズレが出る

ことがあります。

それも、かなりの頻度で。

 

抽象的な例を挙げると、

プログラマーが5mmのネジを作っているのに、デザイナーは5cmのネジ穴を作ってしまい、それぞれ出来上がったものを合わせてみたら、全然サイズが合わない！

みたいなことが起こったりします。

（なお、こういう時にプランナーは、仕様書の単位記載漏れのミスを、把握していなかったりします）

こうした事態が延々と発生すると、開発が遅々として進まなくなり、スケジュールが遅れるハメになります。

お互いに不信感が生まれてしまうと、これはもう最悪ですね。

 

f:id:rf-blog-sagyo:20200625152643p:plain

プランナーの仕事

上記のような、スタッフ間での連絡の齟齬・食い違いのことを、

「ディスコミュニケーション」と呼んでいます。

平易に言い直すと「コミュニケーションの不足」ですね。

 

はい。

ここで「コミュ力」という最初の話題にボールが戻ってきます。

上記したような認識の齟齬は、コミュニケーションを丁寧に行うことで、事前に回避可能です。

スタッフが「いま作ってるネジって、どのサイズだっけ？」ということを確認すれば、 「なんか作っているもの違っていない？」という疑問が生まれ、互いの認識を擦り合わせる機会を持つことができるわけです。

 

私の考えでは、プランナーの役割の1つに

「面白いゲームを構成する要素の1つ1つを、設計段階から検討し、責任もって完成まで遂行すること」

があります。

仕様書や設計書を書くのは、チームのスタッフに仕事をしてもらうための、手段の1つに過ぎません。

この役割を達成するにあたって、「コミュ力」はこの上ない武器になります。

「コミュニケーションの不足」によって問題が引き起こるならば、「コミュニケーション」によってその問題を解消、もしくは未然に防ぐことができる、というわけです。

チームの仕事を停滞させず、開発を円滑に進めるために、プランナーには「コミュ力」が必要なのです。

f:id:rf-blog-sagyo:20200625152725p:plain

 

求められる「コミュ力」の正体

それでは、プランナーを志望する皆様に向けて、

私の考える「どんなコミュ力があれば、ゲーム制作に役立つか」を特別大公開。(ｼﾞｬｰﾝ)

 

1. ポジティブな思考

コミュニケーションの第1歩は、人と気兼ねなく話ができることです。

吐き散らかされるネガティブに、人は心を開きません。

「なぜその機能の実装が必要なのか」 「なぜそのデザインでなければならないのか」

ポジティブな思考と話を心がけ、相手の心のドアを優しくノックしましょう。

2. 軽妙なフットワーク

開発スケジュールは常に動き続けます。

わからないこと・不安を抱えたまま、居付いて押し黙ることは時間の無駄。

軽い足取りで出かけて、意思の疎通を図って、あなたを覆う不安の雲を晴らしましょう。

3. 相手の気持ちをよく考え、推し量る

上に挙げた1と2の例ですが、行き過ぎると失礼なコミュニケーションになることも…

人はそれぞれ異なる意見や考え方を持っていますし、プライドだってあります。

そもそも仕事がすごく溜まっていて、聞く耳を持つ時間すらないかもしれません。

そうした時は、慎重に考えて、コミュニケーションの内容を選ぶことも、重要になるのです。

4. 最終目的は常に1つ！

私たちの最終目的は、最高のエンターテインメントを作り出し、お客様を喜ばせることです。

それは不変の事実であり、どんな仕事をしていても、それを決して忘れてはいけません。

もし、その目的に背くような類のコミュニケーションを取らなければならない…

そんな時は立ち止まり、もう一度考え直してみる時間が必要なのです。

 

 

まとめ

  • ゲーム開発者に「コミュ力」は必要。開発＝チーム仕事だから

  • プランナーには特に必要。チーム仕事を遂行させるのが役割だから

  • ポジティブに、アクティブに。冷静さと情熱も忘れずに！

初心者向けIllustrator講座その②　～ライブペイントツールの使い方編～

デザイナー

目次

はじめに

前回はペンツールの使い方を中心に記事を書きましたが、今回はライブペイントツールの使い方になります。
その中でもIllustratorでの塗りは大きく分けて
①線で描き、塗りはライブペイントで ②面で描く の2通りあるのですが、今回は①の塗り方を説明いたします。 (パーツごとに分けてアニメーションなどを作成したい場合は、①の塗り方が良いです)

●線画を複製する

Windowsに入っているペイントのように、このままバケツツールで色を塗る･･･ということはできません。
この線画を一度「ライブペイント化」してからではないとライブペイントツール(バケツツール)で色を塗ることができないのです。
線画を一度ライブペイント化しても解除をすることはできるのですが、念のためライブペイント化前の線画を別のレイヤーに複製しておくことをお勧めします。

①選択ツールを選んで、線画全体を囲うようにドラッグで選択 f:id:rf-blog-sagyo:20200518164001j:plain

②「Ctrl」「C」キーを同時押しで「コピー」 f:id:rf-blog-sagyo:20200518164015j:plain

(※「Ctrl + C」でコピーするのも多用するので覚えましょう！ちなみに、Ctrl+Xは「カット(切り取り)」になります。)

③レイヤーパネル右下のアイコン(ゴミ箱の左隣)で、新規レイヤーを追加
④追加したレイヤーを選んだ状態で「Ctrl」「F」キーを同時押し
(※わかりやすくするため、レイヤー2は一旦非表示にしています) f:id:rf-blog-sagyo:20200518164142j:plain

「Ctrl + F」でコピー元のものと「同じ位置にペースト」することができます。
「Ctrl + V」でもペーストすることができますが、コピー元とは違う位置にペーストされるので、同じ位置にペーストしたい場合は「Ctrl+F」を使いましょう。

これで線画をコピーすることができました。
実は、レイヤーそのものを複製することもできます。
レイヤーパネルの「レイヤー○○」と書いてある部分を、「Alt」キーを押しながら上へドラッグすると、同じレイヤーを複製することができます。 (※今回は線画と影用の線画の2枚のレイヤーを1枚のレイヤーに複製したかったためこうしました) (ここの画面もスクショしたかったのですが、手の本数が足りずできませんでした･･･)

今コピーしたレイヤー4を非表示にして、コピー元のレイヤー2,3を表示に戻しておきましょう。

●ライブペイント化

さて、いよいよ塗りに入ります！ ･･･の前に「ライブペイント化」をしましょう。

･･････の前にもう1つ、やることがあります。 ライブペイント化した後にもできるのことなのですが、先にやった方が楽だと思います。

ファンくんの影の部分を、赤いペンで描きましたよね？ あれは、線画の色を「なし」にするための目印です。

①選択ツールで赤い線画だけを選ぶ (レイヤー2をロックして全体を選択すればレイヤー3の赤い線画だけ簡単に選べます。) f:id:rf-blog-sagyo:20200518164905j:plain

(全体を囲わなくても、ドラッグしてできる四角形に少しでも線画が重なっていれば選択することができます。 また、複数箇所選択する場合は、「Shift」キーを押しながらドラッグしてください。)

②ツールバーの下の方にある2つの四角形のうち、右下の方(線の色)が手前に出ている状態(奥に出ていたら、クリックすると手前に出ます)で、その下に並んでいる3つの小さい四角形のうち右のものをクリックする f:id:rf-blog-sagyo:20200518165021j:plain

この小さい四角形は、左から「カラー」「グラデーション」「なし」となります。今回は「なし」を選択します。

これで線画の色がなしになりました。 f:id:rf-blog-sagyo:20200518165141j:plain
(余白をクリックして選択を解除してみれば、色が無いことがわかります。)

さて、今度こそライブペイント化していきます。

①選択ツールを選んで、線画全体を囲うようにドラッグで選択 f:id:rf-blog-sagyo:20200518165220j:plain

このレイヤーに、この線画以外に描いていないものがあれば、「Ctrl」「A」キー同時押し(そのレイヤーのものをすべて選択)でもよいです！

②上から「オブジェクト」→「ライブペイント」→「作成」を選択します。 f:id:rf-blog-sagyo:20200518165252j:plain

これでライブペイント化が完了です！ f:id:rf-blog-sagyo:20200518165404j:plain

見た目には変わっていないように見えますが、選択すると全体がいっぺんに選択される(グループ化されている)のと、枠の四角形が少し変わります。

●ライブペイントツール

さて、準備が終わってようやく色を塗ります！

①ツールバーから「ライブペイントツール」を選択します。 f:id:rf-blog-sagyo:20200518165511j:plain

隠れていたらクリック長押しで出しましょう。
これがライブペイントツールです。試しにマウスカーソルをどこかに乗せてみましょう。 f:id:rf-blog-sagyo:20200518165532j:plain

おお！！塗る範囲が見えます！！！
･･･ちなみに、見えない場合や塗りたい範囲より大きくなって仕舞う場合は、線画がちゃんと閉じていないので、線画を調整しましょう。
選択ツールで選択した状態で「オブジェクト」「ライブペイント」「解除」を選択して線画を調整し直しましょう。
塗ってから解除すると、塗った部分の色も無くなってしまうので、線が繋がっていないことには早めに気づいておきたいですね。
一応、線画をダブルクリックしたあとに調整したい線画を選べば、ペンツールで書き足したりなどの調整をすることもできます。 f:id:rf-blog-sagyo:20200518165640j:plain

さて、線画が繋がったら塗りましょう。 今は「塗り」が「なし」になっているので、色を選びましょう。

②ツールバーの下の方の2つの四角形のうち、左上のものをダブルクリック、カラーピッカーから塗りたい色を選ぶ f:id:rf-blog-sagyo:20200518165700j:plain

うまく目当ての色が選べない･･･という場合は、画像をウェブ上や自分のフォルダに用意したものをコピーして貼り付けてスポイトするのもありです。 f:id:rf-blog-sagyo:20200518165730j:plain

画像のペーストは、画像をコピーした状態で「Ctrl + V」、フォルダから貼る場合には直接ドラッグ＆ドロップです。
スポイトツールはツールバーから選択できますが、 ライブペイントツール選択中なら「Alt」キーを押している間はスポイトツールになるので覚えておきましょう。
スポイトツールで選びたい色の部分をクリックすれば、色を選ぶことができます。 (資料に使った画像はDeleteキーで消すなり別の所に避けておくなりしましょう)

今度こそ塗ります！
③ライブペイントツールで、塗りたいところをクリック f:id:rf-blog-sagyo:20200518165926j:plain

塗れました～～～ッ！！！！
良い感じです！ これを繰り返してすべての色を塗りましょう。

ちなみに、この部分のように、区切られているけど同じ色に塗りたいという場合はドラッグでいっぺんに塗れます。 f:id:rf-blog-sagyo:20200518170003j:plain

これを繰り返して･･･ 完成！！！！ f:id:rf-blog-sagyo:20200518170016j:plain

･･･え？何か物足りないですか？ ファンくんのつやっとした質感を表す光を付けたい？？
･･･ではせっかくなので、追加でもっと塗りたい場合のことも教えましょう！

●追加でライブペイント化する

後から光や影を追加したいという場合には、再度ライブペイント化して塗れるようにすればよいのです。やってみましょう。 (こちらの光なしバージョンも、念のため複製して別レイヤーに残しておきます)

①光を付けたいレイヤーをロックし、新しいレイヤーを用意する
(この作業はなくてもいいですが、あとでまとめて光用の線画を選択する時に便利です)

②新しいレイヤーに、光の線をペンツールで描いていく f:id:rf-blog-sagyo:20200518170154j:plain

この辺りは感覚ですね･･･ペンの色は何色でも良いですが、わかりやすいものがよいでしょう。
この時、元の線画と交差する(くっつく)ようにするのもポイントです。隙間ができると塗れませんので！ はみだしてもよいです。

③選択ツールですべてを選択し、線の色を「なし」にする f:id:rf-blog-sagyo:20200518170330j:plain 選択しているものがすべて同じ色でない場合は、「？」アイコンになりますが、気にせず色をなしにしましょう。

④「Ctrl + X」でカットし、さっき色を塗った絵のあるレイヤーに「Ctrl + F」で同じ位置にペースト f:id:rf-blog-sagyo:20200518170416j:plain

「Ctrl + V」ではなく「Ctrl + F」なのがポイントです。

レイヤーが違うと、選択したときの線の色が違うことに気付いたでしょうか。
レイヤーパネルのロックアイコンの右隣にある色がそのレイヤーのカラーになります。
もし線画と同じ色で見づらい、などありましたら、レイヤーパネルでそのレイヤーのサムネイルをダブルクリックすると変更することができます。 f:id:rf-blog-sagyo:20200518170523j:plain

⑤色を塗った絵とペーストした影・光の線をすべて選択してライブペイント化する f:id:rf-blog-sagyo:20200518170536j:plain

⑥ライブペイントツールで塗っていく ここはさっきと同じです。
線画が見えなくてやりづらい～という場合には、③の工程を省き、色を塗った後に線をダイレクト選択ツールで選択→線の色をなしにする、という手もあります。

影の色を決めるコツは、元の色をスポイトでコピーしてから、それより少し暗い色を選ぶと良いでしょう。

f:id:rf-blog-sagyo:20200518170647j:plain
つやっとしたファンくんになりました！ これで完成です！お疲れ様でした！！！

(やっぱこの光いらなかったな～という場合には、ダイレクト選択ツールで線を選んでDeleteキーで消しましょう。 この時、色が変わってしまった場合にはまた塗り直しましょう。)

おわりに

これで線画(ペンツール)と塗り(ライブペイントツール)の説明は終わりです。 初心者向けということで細かく書いてみましたが、いかがでしたでしょうか･･！！

最後までお読みいただきありがとうございました！

初心者向けIllustrator講座その①　～ペンツールの使い方編～

デザイナー

目次

はじめに

こんにちは。2DデザイナーのM.Yです。 今回は、Illustratorの使い方についての記事になります！

「Illustratorでペンツールを使って絵を描きたい！」という方向けの記事になります。 なかなか教わる機会が無くて手が出せないという方はぜひ参考にしてみてください。

今回はアールフォースのマスコットキャラ「ファンくん」のイラストを描いてみたいと思います！

実際の作業

●準備

Illustratorを開き、上の「ファイル」→「新規作成」を選ぶとこのようなメニューが出ます。
f:id:rf-blog-sagyo:20200518102655p:plain

こちらでカンバスのサイズなどを決めます。(あとからも変えることができます。) 気を付けるのが、「カラーモード」です。 年賀状を印刷したい時など、印刷したい場合には「CMYK」、ウェブ上でイラストを載せたい場合には「RGB」と覚えておきましょう。 今回はRGBでやります。

●下書きを用意する

まずは下書きを用意します。Photoshopで描いたものをjpegにしたり、手書きの物をスキャンしてjpegデータにするでも良いでしょう。 f:id:rf-blog-sagyo:20200508144405j:plain

これが下書きです。ラフなものではなく、できるだけ線をきっちり描くとなぞりやすいです。 これをIllustratorに持って行きます。

フォルダから直接、Illustratorのカンバス上にドラッグ＆ドロップすると配置することができます。 フォルダからドラッグ＆ドロップする方法以外だと、上の「ファイル」→「配置」でフォルダと画像を選択する方法もあります。 f:id:rf-blog-sagyo:20200518112314j:plain

この時、フォルダに保存した画像を「埋め込み」します。 上の「ウィンドウ」→「リンク」でリンクパネルを開き、右上辺りの「≡」をクリックして出てくる「画像を埋め込み」をクリックします。

f:id:rf-blog-sagyo:20200518112409j:plain

これで埋め込みをしないとどうなるかというと、このIllustratorのデータを、持って来た下書き画像と同じフォルダに保存していないと、次にIllustratorのデータを開いたときに下書き画像が表示されないということが起きてしまいます。
他の人にデータを渡す際などには注意が必要ですね。 ウェブ上でコピーして直接貼り付けた場合などには、埋め込みは不要です。 埋め込みをしないことへのメリットも多分あるのですが私はあまり使いません･･･

ドラッグ＆ドロップした後は、カンバスの真ん中へ移動します。

f:id:rf-blog-sagyo:20200518112735j:plain

この時、ツールの一番上の「選択ツール」で選択した状態でないと移動できないので注意です。
選択ツールを選んだ状態で画像の上でドラッグ＆ドロップ、もしくは矢印キーで移動できます。
いちいち選択ツール選ぶのはとてもめんどくさいので、「Ctrl」キーを押している間は「選択ツール」になりますので、ぜひ活用してください！ 選択ツールはIllustratorでは頻繁に使うので覚えておきましょう。

「透明」パネルの「不透明度」の％で不透明度を設定します。
パネルが出ていないときは上の「ウィンドウ」→「透明」で出しましょう。
直接数字を入力するか、プルダウンメニューから10%単位で選択します。今回は細かい不透明度を設定する必要はないのでプルダウンメニューからお好みの薄さを設定しましょう。 「透明度」ではなく「不透明度」なので、数字が低いほど薄くなります。

f:id:rf-blog-sagyo:20200518112850j:plain

これで配置できました。
このままだと選択ツールでクリックするたびに選択されてしまって面倒なので、一番下のレイヤーとして設定してロックしてしまいましょう。 「レイヤー」パネルが無い場合は上の「ウィンドウ」→「レイヤー」で出しましょう。
ロックは、レイヤーパネルでロックさせたいレイヤーの横の□をクリックです。南京錠のマークが出ている間はロックされています。もう1度クリックでロック解除です。

f:id:rf-blog-sagyo:20200518113316j:plain

ちなみに、その左の目のマークをクリックすると「表示」「非表示」の切り替えができます。下書きを非表示にしたい場合などにも使えます。
線画を描くためにレイヤーを1枚増やしておくのも忘れずに！
(レイヤーパネル右下の、ゴミ箱の左隣のマークをクリック)

●ペン入れ準備

これで下準備ができたので描いていきます。
Illustratorでこういった絵を描く場合、
①線で描き、塗りはライブペイントで
②面で描く
 のだいたい2パターンあります。
ゲームなどのデータにする場合は、後から編集がしやすい②でやるのが基本ですが、今回はあまり知られていなさそうな①で説明します。

ツールバー(出ていない場合は「ウィンドウ」→「ツール」)で「ペンツール」を選択します。
下の方にあるのが、「塗りの色」と「線の色」です。白い四角に赤い斜めラインが入っているものは「色なし」です。

(塗りか線の四角をクリックした後、下に小さく3つ並んでいる四角の右のものを選ぶと色なしにできます)
今は線をなぞるので、塗り：なし、線：黒にします。色を変えたい場合は四角をダブルクリックするとカラーピッカーが出ます。
この色は、描いた後からでも変更できるので便利です。

f:id:rf-blog-sagyo:20200518113809j:plain

次に線の太さの設定です。
「線」パネル(無い場合は「ウィンドウ」から以下略)の「線幅」から太さを選びましょう。
私の設定では単位が「ポイント(pt)」になっていますが、ピクセルなどに変えたい場合は「ファイル」→「環境設定」→「単位」から変更することができます。

f:id:rf-blog-sagyo:20200518113908j:plain

ちなみに線パネルからは線の端の形状を変更したり、矢印や点線に変更したりもできますが、この辺は今回は使いません。

f:id:rf-blog-sagyo:20200518113946j:plain

また、線の太さは後からいつでも太くしたり細くしたりできますので、お好みの太さで描きましょう！

●ペン入れ

さあいよいよ描いていきます。
が、フリーハンドではなく「ベジェ曲線」を使って描くので、慣れないうちは大変かもしれません。
ベジェ曲線とは何か？というのを細かく説明するのは難しいので、詳しいことが知りたい場合は検索してほしいのですが、曲線の描き方のコツを順を追って説明したいと思います。

まずこの耳の場合。
描く時は、基本的には端から端に向かって描きますが、途中から描いた場合でも線を繋げられるのでどこからでもやりやすいところから始めましょう。

f:id:rf-blog-sagyo:20200518114054j:plain

①書き始めのところをクリックします。
すると「アンカーポイント」と呼ばれる点ができます。

f:id:rf-blog-sagyo:20200518114113j:plain

②耳の中間辺りをクリックします。
この時、まだマウスのボタンやペンタブの先を離さないでください。

f:id:rf-blog-sagyo:20200518114215j:plain

③クリックしたまま右へドラッグします。
(この時、「ハンドル」と呼ばれる線が表示されます。)

f:id:rf-blog-sagyo:20200518114301j:plain

④ボタン(ペン先)を離します。

f:id:rf-blog-sagyo:20200518114341j:plain

これ途中まで線が引けました。
③のときに、どの方向にドラッグすれば引きたい線が引けるかがわからない！という方がいるかもしれませんが、慣れていくうちに覚えていくかと思います。色々試しましょう。

もし間違えたから戻りたい！という場合には、マウスのボタンを離している状態で「Ctrl」と「Z」キーを同時押しです。
この操作は絵を描くうえで何度も何度も使う事になるかと思います。

戻しすぎた！という場合には「Ctrl」「Shift」「Z」キーを同時押しです。
ショートカットキーがわからないよ～！という場合は上の「編集」から「ペンの取り消し」「ペンのやり直し」の所にキーが書いてありますし、それを直接選んでも同じ効果が得られます。

このまま耳の端まで書き進めていきます！ ⑤耳の中間辺りをクリックしてドラッグ ･･････あれ？線がぐにゃっとして思い通りに描けない？ f:id:rf-blog-sagyo:20200518114531j:plain

そうなんです、③でできた「ハンドル」(アンカーポイントから伸びている線)のせいでこのようにうまく線が引けないことがあります。
なめらかな曲線を描く場合には便利な「ハンドル」ですが、時には思い通りの線を引く邪魔をしてしまうのです。

そんなときは、
⑤ ②でできたアンカーポイント(点)をクリックです！ f:id:rf-blog-sagyo:20200518114754j:plain

こうすることで、ハンドルが半分消え、これから描く線の軌道が膨らまずに済みます。
こうしてハンドルをうまく使ったり、いい線が引けない時はハンドルを消したりしながら、少しずつでも線を書き進めていきます。 f:id:rf-blog-sagyo:20200518114953j:plain f:id:rf-blog-sagyo:20200518115024j:plain

⑥先端をクリックしてドラッグ･･････ ･･････耳が尖ってしまう！！もっと丸みを帯びた耳が描きたい！！！！

f:id:rf-blog-sagyo:20200518115421j:plain

･･･そんなときには、一気に端まで描いてしまうのではなく、1本の線を複数の段階にわけて書きましょう。
耳の先の丸い先端を表現したい場合には、この辺りにアンカーポイントを置きます。
2番目に打ったアンカーポイントから離れすぎないのがコツです。

f:id:rf-blog-sagyo:20200518120202j:plain

今度こそ気を取り直して･･･
⑥クリックして、離さないまま下へドラッグして、離す
(3つの工程を1つにまとめてしまいましたが、要するに②～④と同じことです！)

これで耳の先端の丸みが描けました。 さあ、今度こそ端まで一気に描きましょう！

⑦ ⑥でできたアンカーポイントをクリック、中間をクリックして離さないままドラッグして、離す、の繰り返しです。

f:id:rf-blog-sagyo:20200518120532j:plain

これで耳が一通り完成！長かったですか？慣れれば数秒で終わります。

一旦1つの線を描き終わった後には、
⑧「選択ツール」を選んだ状態でカンバスの余白をクリックして選択を解除 までがワンセットとも言えます。
これをしないまま次の線を描こうとすると、繋がってしまいますので･･･！

線を引き終わったあとに線を微調整したい場合は、ツールバーの白い矢印「ダイレクト選択ツール」でアンカーを選択するとハンドルが現れますので、それをダイレクト選択ツールや、ツールのペンツール長押しで出現する「アンカーポイントツール」でいじることができます。
(「ペンツール」を選択しているときに「Alt」キーを押している間だけ「アンカーポイントツール」になるのも便利ですので覚えておきましょう！)

これでペンツールでの線の引き方はだいたいわかったでしょうか？
ドラッグで曲げながら描くのが難しいよ～という場合には、アンカーポイントだけ先にクリックだけで全部打ってしまって、それが終わってからアンカーポイントツールで曲げるという手もあります。

これを繰り返して線を1本ずつ引いていきますが、よく行きあたる場面とその対処も描いておきます。

●「線を長く描きすぎてしまった！」

f:id:rf-blog-sagyo:20200518121831j:plain Ctrl+Zで戻すと今描いた線も消えちゃうし･･･やだな～～～～
そんな場合にははみだした線を短く調整しましょう。

①選択ツールで、長さを調節したい線を選択
②ペンツールの上で長押しして出てくる「アンカーポイントの追加ツール」を選択

f:id:rf-blog-sagyo:20200518122356j:plain

③短くしたいところ(先端にしたいところ)をクリックして離す

f:id:rf-blog-sagyo:20200518122754j:plain

これでアンカーポイントが増えました。この状態で、耳に食い込んでいる先端のアンカーポイントを消せば、今打ったアンカーポイントのところが先端になるというわけです。

④ペンツールの上で長押しして出てくる「アンカーポイントの削除ツール」を選択

f:id:rf-blog-sagyo:20200518123047j:plain

⑤消したいアンカーポイント(この場合は先端)をクリック f:id:rf-blog-sagyo:20200518123536j:plain

f:id:rf-blog-sagyo:20200518123634j:plain (⑥選択ツールで余白をクリックして選択を解除)

これで調整完了です！

今回は先端なので「アンカーポイントの追加・削除」でできましたが、 線の途中の場合はどうするの？という例も載せておきます。

こんな感じで、中を消したい場合ですね。

f:id:rf-blog-sagyo:20200518124003j:plain そんなときは「はさみツール」を使います。
はさみツールは、普段は隠れていますが、「消しゴムツール」のところを長押しするとでてきます。

①調整したい線を選択
②はさみツールで、「消したいところから消したいところ」を2か所1セットでクリック します。クリックする度に選択が解除されてしまう場合には、Ctrlを押しながらクリックでその都度選択してください。

f:id:rf-blog-sagyo:20200518124500j:plain

これで1本の線を切り分けることができました。あとは余分な部分を削除するだけです。

③選択ツールで、余分な部分を選んで「Delete」キーを押す
(※複数個消したい場合は、1つ目を選択した後Shiftキーを押しながら2つ目以降をクリックでいっぺんに選択できます！)

f:id:rf-blog-sagyo:20200518124557p:plain これで余分な線が消せましたね！


「線の長さがあとほんのちょっと足りない！」

ペンツールで書き足してもいいけど、無駄にアンカーポイントが増えちゃうなぁ･･･ f:id:rf-blog-sagyo:20200518124848j:plain

そんなときは「ダイレクト選択ツール」でアンカーポイントを移動させることができます！ ツールの上から2つ目の「白い矢印」がダイレクト選択ツールになります。

黒い矢印の「選択ツール」との違いは、「選択ツール」は「全体を選択」することができ、「ダイレクト選択ツール」は「一部を選択」することができます。

ペンツールで描いた1本の線で言えば、 「線1本を全部選択」できるのが「選択ツール」 「アンカーポイントだけ選択」「アンカーポイントの間の線だけを選択」できるのが「ダイレクト選択ツール」です。

①伸ばしたい線の先端のアンカーポイントをダイレクト選択ツールでクリック
②伸ばしたいところまでドラッグして離す f:id:rf-blog-sagyo:20200518125538j:plain

これで伸びました！

f:id:rf-blog-sagyo:20200518125625j:plain

ちなみに、今回の塗り方の場合には、線と線をくっつけて隙間を無くさないと色を塗ることができないので注意してください。太い線だから大丈夫！ではなく、太い線の中心を通っている線(選択すると見える線)を繋げてください。 この場合には細い線で見たほうがわかりやすいです。
もっと早く書いて欲しかったですか･･･？この機能を使ってあとからでもやりましょう！

でも、伸ばした分曲線が緩やかになってしまった･･･ そんなときは、ハンドルをいじって調整しましょう。

これを繰り返して･･･線画完成！

f:id:rf-blog-sagyo:20200518125751j:plain

赤い部分は、陰影をつけるための線です。
あとで透明にするのでわかりやすく色を付けているだけなのでわかれば何色でも良いです。
あとで透明にする線は、新しいレイヤーに書いておくと、線画と混ざってしまわないので便利です。

おわりに

今回は線画までの初心者向けIllustrator講座を書きました。
次の回ではいよいよ「ライブペイントツール」で色を塗っていきます！

是非お楽しみに！

会社初！コンシューマーでのオリジナルゲーム開発チームに迫る！　Vol.1

目次

はじめに

今回は、弊社初となるコンシューマーでのオリジナルタイトル開発チームに直撃インタビューしてまいりました。 インタビューにお答えいただくのは、プロジェクトリーダーのIさんとプランナーのT2さんです。

受託開発との違いや、技術的な工夫などご紹介しておりますので是非ご覧ください！

どういったゲームを開発しているのか

──早速ですが、どういったゲームを開発されているのでしょうか？

I：アクションパズルゲームですね。

T2：もともとパズルの方が強かったのですが、テーマチェンジにともなってアクション性が強くなりました。


──やり込み要素などはありますか？

I：繰り返し遊んで、より高いスコアを目指すようなゲームです。

近しいジャンルは「脳トレ」です。

ちょっと全然違うイメージを抱かれるかもしれないのですが、ゲーム内容としては知性を要するものになるので、 そういった意味で、脳トレです。

T2：「自分が操作したことによってどう変わるのか」を瞬時に考えて操作するので 反射神経も必要かもしれないです。

コンシューマーでオリジナルを創り始めたきっかけ

──なぜ今、コンシューマーでオリジナルを創ろうと思ったのでしょうか？

I：社内でオリジナルを創れるラインを増やしたいという想いがあります。

これを機会に会社で新しい仕事の幅を広げていきたいです。


──弊社では近年スマートフォンゲームを中心に開発してきたが、なぜコンシューマーを選んだのでしょうか？

I：今の開発チームは、少し前に大きなプロジェクトを終えたメンバーがほとんどです。

そういったメンバーの布陣や会社の状況を考え、やったことないものに挑戦しよう！ という話になりました。

T2：以前からSteamのインディーズが熱いなと感じていたことと同時に、Switchでゲームを創ってみたいという気持ちもあったので コンシューマー（SwitchとSteam）でオリジナルを開発しようということにりました。

f:id:rf-blog-sagyo:20200519174532p:plain
開発中の為モザイク処理しております。

受託開発との違い

──受託と自社開発での大きい違いはありますか？

I：一番大きいことはプロモーションを自社で行う　ということでしょうか。

いつもは受託開発ですのでその部分はあまり経験がなく、今現在大変さが身に染みているところです。


──開発方面での違いはどうでしょうか？

I：実を言うと開発自体は受託とそんなに大きく変わらないと思っています。

会社のHPにもありますが、もともと受託開発を請け負っていても、ただ指示通りに創っているわけではなく 「おもしろいと思ったものを提案しますよ」というスタイルでやっていたので。

現在のチームは少人数のチームなのですが、セクション問わず各々の意見を募ってトライできるのは良いなと思います。

T2：今創っているオリジナルゲームは一度テーマ変更しているのですが、変更前の元々の企画も今の企画もチーム全員で話し合って創りました。 まずは開発費と人数規模をしっかりチームで決めて、それに見合う企画を出し合います。

企画を出し合う為には何かとっかかりがないといけないなと思ったので、皆で好きなインディーズのゲームを話し合ったりしました。 最終的には8案くらいでていたかなと思います。 8案全部面白そうで、できることなら全部製品化したかったのですけれど、もちろん難しいので最後は「今自分たちがしっかりと開発できてコストに見合うものは何か」という観点で決定しました。

制作体制や期間

──現在の開発での工数や想定している期間など教えて頂きたいです。

I：大体21人月*1ですかね。

最短で半年くらいで制作しようと思っています。今年の秋冬くらいには…。

今回の開発にあたって工夫したこと

──開発にあたって工夫したことを教えて頂きたいです。

I：開発に使用する予定だったアセットが、ゲームのルールの仕様にあっておらず、 メンバーがアセットの仕様変更を行い使いやすいようにしたことです。 また、マルチプラットフォーム向けの検証も時間をかけて行っています。

今回の開発は「コストを抑えて、ゲームパフォーマンスを最大限引き出す」をテーマにしているのですが

こうして自分たちの手を使わずに作業できることを増やせばコストを抑えることにもつながります。

また弊社には社内基盤を整えるチームがあり、そのチームとも連携して新しいプラットフォームに対応してもらっています。

f:id:rf-blog-sagyo:20200519141208p:plain
アセットを拡張し、プロジェクトに合ったマップツールへ


──開発を始めるにあたり一番最初に調べた技術的仕様はなんでしょうか？

I：まずはSwitchに関するスペックです。 解像度であったり、どのくらいのメモリが使えるのかであったり。

今まではスマートフォンのアプリ開発が多かったので、やはり違う部分は多くありました。 新しいプラットフォームで開発を行う際は、「これでどのようなゲームを表現することが可能なのだろう」と調べることが重要かと思います。

T2：あとは、各種サービスとの連携についても調べました。 ゲーム本体以外でも、どういった遊び方ができるだろうと。 幅広いお客様に色々な楽しみ方をして頂いて飽きない作品にしたいです。

スマートフォンゲームを創る時と比べて、苦労した点

──これまでの開発と比べ苦労した、大変だと感じる点はありますか？

I：先ほどもお答えした通り、新しいプラットフォームで開発するという事自体がとても大変です。

今までの、弊社でいうとアプリゲームが多いですが、それとは入力形式が全く違っていたり…

プランナーもエンジニアもお互い大変です。

T2：スマートフォンですと、タッチしたら反応するというインプットですが、コントローラーやキーボードだと入力したときのUI的なルールが複雑です。こちらもチーム全員と検証して考えました。

Steamですと、マウスで動くのかキーボードで動くのかパッドで動かすのか…パターンが結構あるので、ボタンの出し方などかなり時間を使って検証しました。大変でした…。

f:id:rf-blog-sagyo:20200519142804p:plain
開発チームのお二人。

おわりに

やはり新しいプラットフォームで開発するということは、技術的な検証に多く時間を使い、様々なお客様に楽しんで頂けるような工夫が行われているようです。

引き続き、コンシューマーゲーム開発チームのインタビューを続けてまいりますので、次回も楽しみにお待ちください！

*1:人月：1日8時間、1か月20日稼働すると仮定して工数を計算したのが人月です。つまり「1人のエンジニアが1日8時間、20日作業してこなせる仕事量」が1人月となります。