Pychromecastって何?サイネージ配信で四苦八苦した話
目次
かれこれ10年以上サーバーエンジニアをやっている、でわnです。 これです。 『R-FORCEの社内にてサイネージ配信システム作れない? 』
2020年3月頃その一言から始まり、Chromecast内蔵の機器を幾つか購入しました。 Googleにて検索して、Google Cast API を使えばサイネージ出来ると知り、Chromecast機器とのソケット接続まわりの通信を変わりに行なってくれるPythonのプログラムPychromecastライブラリを発見。 簡単というGoogle検索結果見出しに惹かれて始めること数ヶ月、苦労した点困った点を何かに残そうってことで記事にしました。 これから中心に話す内容は Pychromecastライブラリを使用した開発メインの話になりますので予めご理解の程よろしくお願いします。 概要にてサラッと記載しましたが、Pythonで動かすことが出来るサイネージ配信ライブラリになります。 ネットワークの知識をそこまで必要とせず、Python言語が扱える人がChromecast内蔵の機器をネットワークにつないで、わずか30行あまりのPythonプログラムを書くことでサイネージ配信出来るという代物になります。 ではなぜ苦労することになったのか。それは30行あまりのPythonプログラムでは実現不可能なことをこのPychromecastライブラリを使って実現しようとしたから苦労する羽目になってしまいました。
Googleドライブ上にあるメディアファイルを配信サーバーへダウンロードし、同一ネットワーク上に存在するChromecast機器に対し配信を行なっています。 これからお話するPychromecastライブラリのバージョンは次になります。 https://github.com/home-assistant-libs/pychromecast/commit/7c2bec4af3eedd236c4295a750ea60d3798e1313
作る当初はブロードキャスト送信が出来、全Chromecast機器へ一斉に信号を送れるマルチキャストとばかり考えていたが、Chromecast機器を検出し、その1台1台にメディアの再生命令を出すユニキャスト送信しか出来ず、少し物悲しいものが完成しました。 Zeroconfと呼ばれるネットワーク機器検出サービスを利用しているライブラリであり、中身を変えずそのまま利用すると同一ネットワークのChromecast機器検出として動作するため、同一ネットワーク上に存在するChromecast機器のみに配信可能と制約を受けてしまう。 R-FORCEでは当初サーバー群とChromecast機器群を別々のネットワークにて管理を予定していたが、Zeroconfサービスをそのまま利用しているシステムである故に、同一ネットワーク上に配信サーバーが存在することを余儀なくされてしまいました。 異なるネットワーク上への挑戦は他の方も挑戦されているが、どうすれば成功するのか未だ不明のまま・・・
hogehiga.hatenablog.com
github.com Chromecast機器にメディアの再生命令という表現を使っておりますが、正確にはChromecast機器にメディアURIを送信しChromecast機器に対しメディアURIにアクセスし再生してという命令になります。 サポートメディアとしては公式にて幾つも挙げておりますが、
developers.google.com
メディアを再生するにはChromecast機器がアクセス出来るURIである必要があり、さらにURIがサポートメディアである必要があります。 弊社R-FORCEではプライベートIPにて配信可能なものを作成しましたが、運用保守に関してはネットワーク知識が必須となってしまいました。 このネットワーク構成について、予め社内にて固定のIPアドレス(グローバルorプライベート)又は、ホスト名を配信サーバーに割り当てた方が作成時間を短縮することができます。Zeroconfサービスによる同一ネットワーク上の制限と配信サーバーのメディア取得は切り離すことが出来、Chromecast機器は固定のIPアドレス又はホスト名を指定しての再生が可能となります。 Chromecast機器の電源がOFF、言い換えるとテレビの電源をリモコンでOFFにしてあっても、配信サーバーから再生命令を送信すると電源がONに切り替わりメディア再生を始めてしまいます。 スリープモード解除と似た話ですが、Chromecast機器にて何かしら利用していたとしても上書きしてしまいます。
弊社R-FORCEではChromecast機器に再生命令を発信する前に、配信停止命令を受けているChromecast機器か判別を行ない再生除外を可能としています。 Chromecast機器とのソケット周りの接続実装。README.rst の How to Use を読んで実装は出来ました。 しかし、これには大きな問題がありました。 この接続エラー問題に対し再接続を試みましたが何をやっても解決に結びつかずもがき苦しみました。 弊社R-FORCEではPychromecastライブラリ利用時から拡張しています。 Chromecast機器の再生ステータスとして 大まかにはこのようなステータス変化をメディア再生の度に繰り返していました。 弊社R-FORCEでは上記の流れからChromecast機器のステータスを調べ BUFFERINGの後にまさかのIDLEというステータスを稀に使用しており、この稀の現象を引き当てるとメディアのBUFFERINGが完了し、PLAYINGに切り替わる途中で次のメディア再生命令を配信サーバーから受け取ってしまい、メディア再生途中で次のメディアの再生という現象を引き起こしておりました。 という 自己紹介
弊社R-FORCEではバックエンドエンジニア一員としてゲーム開発に携わっております。
趣味を列挙していくと身バレするので、メイド喫茶に通うことが趣味とだけ。
ただメイド喫茶といってもジャンルがありまして、コンセプトカフェ、コスチュームカフェなどがある上に、にぎやかわいわい系、まったり系、伝統的系などあります。
でわnはメイド喫茶が趣味と話しても社内でも誤解されっぱなしなので、いつかライトニングトークやろうかなと画策中・・・
趣味の話は一旦おいておき、今回そんな私がサイネージシステムを作ったところ、なかなか思うような結果を出せず、四苦八苦したので記事に残すことにしました。サイネージってどんなもの?
正式名はデジタルサイネージ。インターネットを介して映像を投影させるシステムのことを指します。
概要
store.google.comPychromecastって何?
github.comシステム構成図
Pychromecastライブラリのバージョン
7.5.1 (GitTag: 7.5.1、コミットハッシュ: 7c2bec4af3eedd236c4295a750ea60d3798e1313)
苦労点・困った点
マルチキャストを予定していたつもりがユニキャストだった
理想
現実
配信サーバーと同一ネットワーク上しか再生出来ない
再生メディアへはWebアクセスが必須とされている
弊社R-FORCEではこの問題を解決するために、サポートメディアを配信サーバー上にダウンロードし、配信サーバー兼HTTPアクセス可能なWebサーバーとすることで、Chromecast機器は配信サーバーからメディアを取得することで解決しました。
Googleドライブ上のメディアを直接再生など計画はあったのですが、Google認証はChromecastが行なうことが出来ないなど問題が浮上し断念しました。Webサーバーにホスト名および固定IPがオススメ
理由については、先に述べたようにChromecast機器にてメディアを再生するには同一ネットワークである必要があるからです。
配信サーバーのネットワークインターフェースが複数ある中で、Zeroconfサービスにより見つかった同一ネットワーク上のChromecast機器、これがどのネットワークに属しているのか分からなければなりません。これがもし分からなければ、Chromecast機器からみた配信サーバーのプライベートIPが分からず、配信サーバーからメディアを取得することが不可能に陥ってしまいます。
これを解決するためにChromecast機器ホストのプライベートIPから、同一ネットワーク上の配信サーバーのネットワークインターフェースを特定し、配信サーバーに割り当てられたプライベートIPアドレスを取得。これにより各Chromecast機器に対しプライベートIP指定による配信サーバーへのHTTPアクセス、つまりメディアへのHTTPアクセスを可能としています。
ネットワーク環境を制限化することで、開発コストが変わってきますのでぜひご提案してみることをオススメします。配信サーバーの再生命令はChromecast機器のスリープモードを解除してしまう
これにより24時間稼働させるには再生命令を送信しない時間帯制御を行なう実装をする必要となりました。
弊社R-FORCEでは、配信サーバーにCron設定を行ない自動で配信システムの起動と停止の制御を行なっております。配信サーバーの再生命令はChromecast機器の状態を上書きしてしまう
Chromecast機器との接続周りの内部実装が分かりにくい
しかし、弊社R-FORCEでは複数のChromecast機器が存在するため定期的にChromecast機器の検索が必要でした。
実装当初Pychromecastライブラリのバージョン 6.0.1 にて実装していたget_chromecasts()
関数、今の Pychromecastライブラリのバージョン 7.5.0 の How to Use では記載ないがないものの、このget_chromecasts()
関数を利用して接続を行なっておりました。*1
この関数は同一ネットワーク上すべてのChromecast機器をZeroconfサービスを通して検出し、ソケット接続まで行なってくれるため大変ありがたい機能です。
これを利用してメディアを再生して次のメディア再生に進む時に、get_chromecasts()
関数を使ってすべてのChromecastを検索、もしChromecast機器が追加されている場合はここで新たに再生するChromecastとして追加して再生という実装を施しました。
それは数回メディアを再生するとChromecast機器との接続エラーで100%再生不能に陥るという現象です。
Pychromecastライブラリのバージョン v6.0.1 から v7.5.0 にバージョンアップしたり、Pychromecastライブラリ周りのインスタンスをメディア再生の度に全て削除(デストラクタ)して再接続したりと、再接続の失敗の度に悩むに悩まされ別の手法別の手法と数回に渡り修正実装に着手。
そして、あまりにも失敗続きであることからネットワーク通信の監視ソフトWiresharkを導入し調査するまでに発展。
このWiresharkによるとPychromecastライブラリが利用しているZeroconfサービスを通して、マルチスレッドにてChromecast機器へソケット接続。メディアの再生の度に、Pychromecastライブラリ側で新たな接続を行ない、あるところでChromecast機器との接続失敗が始まっていることが確認出来るようになりました。
これもしかして、一度接続に成功したChromecast機器とのソケット接続、この接続が生きたままメディア再生の度にget_chromecasts()
関数によってChromecast機器とのソケット接続を新しく確立してはいないかと。そしてこのことがChromecast機器との接続最大数の上限に達してしまい切断を引き起こしていないかと疑惑が浮上しました。
この疑惑のキッカケとなったのは次のissueより
github.com
issue情報を元に、実装をPychromecastライブラリのバージョンv7.5.0の How to Use を参考にしながら、discover_chromecasts()
関数にて同一ネットワーク上のChromecast機器を探し、切断検出したChromecast機器を検出した場合、または新しくChromecast機器を検出した場合に接続を行なうように変更しました。
このように処理を切り替えたところメディアが一定回数再生してもChromecast機器との切断がなくなり、ようやく安定的な配信が可能となりました。Chromecast機器のステータス判断種類が少ない
その理由としてはChromecast機器のステータスPychromecastライブラリが標準で実装しているのが、
* 再生中か?(PLAYING*2またはBUFFERING*3か?)
* 一時停止中か?(PAUSED*4か?)
* 何も再生していないか?(IDLE*5か?)
この3パターンを提供しているものの、Chromecast機器のステータスのIDLE
、BUFFERING
、PLAYING
、PAUSED
の4種類のステータス遷移が上記3パターンだけでは要望を満たせないため拡張を行ないました。
「再生中のBUFFERINGとPLAYINGを分けたい」「PAUSEDは再生中だけれど例外として扱いたい」「IDLEは再生前後で分けたい」といった条件分けを行ないたかったために、Chromecast機器のステータスについてはPychromecastライブラリ標準のものはほぼ利用せず、Pychromecastライブラリの外部から直接Chromecast機器のステータスを確認するように独自実装を行なっています。Chromecast機器の拡張ステータスの取得部分を独自実装
IDLE ⇛ BUFFERING ⇛ PLAYING(PAUSED) ⇛ IDLE
IDLE
というステータスを軸に、再生命令からIDLE
というステータスに切り替わったとき再生終了と見なし次のメディア再生という遷移を行なっておりました。
しかし、メディア再生途中で次のメディアの再生を開始してしまうというバグ報告を受けて調査を行なったところ、実際には次のステータス遷移を行なっておりました。IDLE ⇛ BUFFERING ⇛ IDLE ⇛ PLAYING(PAUSED) ⇛ IDLE
稀という表現行ないましたが、一度BUFFERINGされたメディアを再度再生している時に起こしており、Chromecast機器にて同一メディアを複数回再生していると発生するように感じました。ただ、この現象について原因を確定し現象を必ず再現させるまでは至れず稀という表現を行なっております。
バグの調査を続けるに当たり、BUFFERINGの後のIDLEの場合は{..., 'playerState': 'IDLE', ..., 'extendedStatus': {'playerState': 'LOADING', ...}}
extendedStatus
というパラメータを使ってChromecast機器のステータスplayerStateを返却しているため、Chromecast機器のステータスplayerStateがIDLEでもextendedStatusというパラメータが返却されたら、extendedStatus内のステータスplayerStateを優先するという処理をPychromecastライブラリを拡張させることで解決をさせました。結論
確かに1台だけの配信や1メディアだけの1回だけ再生であれば非常にかなり簡単に実装が出来ました。
しかし要望は再生リストを作成してループ再生や複数のChromecast機器へ配信などetc...
GoogleCastApiを利用したライブラリはPychromecast以外にも存在していました。
ネットにある情報を鵜呑みにせず、ライブラリの比較や検証を正しく行なっていれば違った結果に行きつけたのかも知れません。
この記事を読んだ人が私と同じようなまだトゲが残っている茨の道を歩むことが無いよう心よりお祈り致します。
*1:バージョン6.0.1の How to Use、バージョン7.5.0の How to Use
*2:PLAYING: 再生中
*3:BUFFERING: 再生に備えて再生メディアデータを取り込んでいる状態
*4:PAUSED: 一時停止中(再生メディアが画像の場合はPLAYINGとならずPAUSEDの一時停止となる。動画メディアなどの場合はPLAYINGのあと再生中のメディアを一時停止するとPAUSEDの一時停止した状態となる)
*5:IDLE: 何も再生していない
Unityで作るDissolveShader
目次
自己紹介
初めましてクライアントエンジニアのK.Kです。
主にクライアントの作業をしている者ですが、 より見た目を綺麗にしたい、より製品のクオリティを自分の力で良くしたいなどの理由から1年ちょい前からシェーダーの勉強をしています。
まあシェーダーで何が出来るかイメージつかないかもなので、私が勉強がてらに作成したものを紹介します。
地面を塗ることができるシェーダー
キャラクターを炭で書いたように表現するシェーダー
塗るシェーダーと炭シェーダーを掛け合わせたもの
そして今回ちょっとおしゃれな遷移を作りたかった!
シェーダーとは
シェーダーとは簡単に考えると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"{} }
シェーダー外部から入れるパラメータです。 ここで画像や値を入れることができます。また外部のコードからアクセスする事が出来る箇所です。
構造が シェーダーで使う変数名("外部から見たときの名前",変数の種類) = デフォルト値
になります。
ですのでこちらは_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はフラグメントシェーダーのコード部分です。 フラグメントシェーダーは描画される各ポリゴンに対して行う処理です。 フラグメントシェーダー色々ありますが画像編集ツールでよくある効果やマスクをイメージしてもらえると良いかもしれません。
DissolveShader
今回はここからフラグメントシェーダーのみを利用して画像が消える演出、DissolveShaderを作っていきます。
DissolveShaderは色々な物に使われており、使い方次第で敵が倒され、黒くなりつつ消えていく演出もできます。
まずはノイズのテクスチャーのパラメータとエフェクトがかかる強さを表すRateを用意します。
Properties { _NoiseTex ("Noise",2D) = "white"{} // 追加 _Rate ("DissolveRate",Range(0,1)) = 0 // 追加 } SubShader { //... Pass { //... sampler2D _MainTex; sampler2D _NoiseTex; // 追加 FLOAT _Rate; // 追加 //... } }
DissolveShaderはノイズの画像を利用してDissolveをかけるRateに応じて画像のα値を抜いていくものになります。
使用するノイズの画像ですが基本的には白黒の画像を使用します。
さてこちらのグラデーションの画像を見て一般的にはどこから消えるべきでしょうか? こちらの画像をフラグメントシェーダー内で見る場合はピクセル単位の色を見ることになります。
シェーダの色は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; }
こちらが実行結果です。
Rateのパラメータを変えても変わりません。
これはシェーダーに正しい設定が出来てないからです。
SubShader { Tags {"Queue"="Transparent" "RenderType"="Transparent"} Blend SrcAlpha OneMinusSrcAlpha // 追加 ZWrite Off // 追加 Pass { //... } }
Blend設定に SrcAlphaとOnMinusSrcAlphaを追加 Blend設定を簡単に考えると描画されている物の色の混ざり具合の設定です。 こちらではα値を見て不透明にする設定の追加です。
ZWrite Off でポリゴンの裏側の描画をし、無くしています。
こちらが実行結果
おまけ
”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; } //... } }
これが実行結果になります。
さいごに
シェーダーは何処から始めればいいか、何を勉強すればよいかと敷居が高い分野ですが、 サンプルコードなどはたくさんネットに散らばっています。 色々なサンプルを作っていく際に確実に身につくものはあります。
様々なシェーダーを作っていけば、これが出来るのでないか、あれが出来るのでないかと想像や可能性を実感できるので興味があるならば諦めずに挑戦し続けてほしいです。
難しいけどシェーダーは楽しいからいっぱい書こう!!
参考
© UTJ/UCL
学生時代ほぼ自己流で学んでいた専門卒3Dアニメーターが、入社して1年間で得られたことふりかえり
目次
はじめに
こんにちは!3DアニメーターのS.Kです。
今回は入社して丸1年が経ち
・学生の時と何が違うのか。
・そして技術的、精神的にどう成長できたか
という記事を書こうと思います。
まだ二年目ということもあり、学生さんに近い目線でお話ができると思うので、3Dアニメーターを目指す皆さんのお役に立てると嬉しいです!
学生時代にしていたこと
僕は元々アニメが好きでこの業界を目指していました。
しかし、自分が在籍していた学校にはアニメーションに関する授業がほとんどなく
ネットでなんとなく調べたり、創りたいな!と思うものを独自で創っていました。
この、「ちゃんとアニメーションの技術を調べず創りたいものをなんとなく創っていた」ということが、今でも後悔している反省点の一つです。
しっかりとした「知識をインプットし、作品へアウトプット」という工程をしていなかったことが
今でも本当に悔やまれます。
最低限の「12原則」などは何となく理解していましたが、
アニメーションはとても奥が深く、知識、経験がなくても仕事として提出できるものを創れるほど甘い世界ではありませんでした。
*アニメーションにおける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をもらい修正した際のデータで、
気を付けるべきことや教えて頂いたことを記載したメモになります。
「時間を決めて」と書きましたがここが結構重要で、
時間を決めないと結局だらだらと作業してしまい、無駄になってしまうことがあります。時間を区切ることで終わりが必然的に決まるので、作業にもメリハリがつきます。
また、「時間内でどう完成させよう」と自然に効率化が図れます。
集中力も鍛えられるので一石四鳥な作業法です。
また、アニメーションの勉強とは別に美術解剖の勉強もしています。
アニメーションを創る上で骨や筋肉の可動域を理解することは、
とても大切なことです。
最近では
毎日10分は必ず美術解剖の本を読むようにしています。
こういう時には体はこう動く、男女の骨格の違いなどある程度ルールや法則性があるので
知識としてそこを知っていれば、男性らしいポーズ、女性らしいポーズなども
あまり悩まず創ることが出来ます。
僕が読んでいる「ソッカの美術解剖学ノート」という本ですが
アニメーター、モデラー、イラストレーターなど職種に限らず、1冊は持っていて欲しい!と感じる本です。
値段は少し張りますが、イラストも多く、わかりやすく説明してくれているのでサクサク読めますよ!
ソッカの美術解剖学ノート | ジョンヒョン, ソク, ジニ, チャン |本 | 通販 | Amazon
今の仕事に関して
ゲームのストーリー部分のシネマや必殺技のカットインなどを
メインに作業をしています。
最近では、社内で制作しているゲームの
インゲーム部分のモーションを手伝っていました。
カットシーンの制作はアニメーションだけではなく、カメラワークも加わってくるので
モーションだけを作るよりも難易度は高くなりますが、
やりがいをもって仕事と向き合い
先輩たちに助けてもらいながらも精進しています。
入社から一年が経ち、かわった心境の変化など
学生の時は自分が好きだから、創りたいから作品を創っていましたが、
会社に入るとそうはいきません。
必ずしも自分がしたい仕事、創りたいものだけが創れるわけではないからです。
ですが、そこでふてくされてはいけません。何事も勉強です。
最初の方でも書きましたが、自分が苦手・気が進まない仕事でも必ず自分の経験値になります。
いざ自分がやりたいことができるとなった時、全力を尽くせず不完全燃焼よりも
自分の頭の中にある構想やイメージを全力で作品として具現化し
満足いくものが創れた方が良いし、楽しいですよね!
一番の心境の変化は、作品を見てくれる方々に満足してほしいと思うようになりました。
理由は、とある案件で携わらせていただいた作品の動画がYouTubeにあがり、親にそのことを話した時、とても喜び、褒めてくれたからです。
また、僕がアニメを見て感じたドキドキやワクワクを
今度は自分の作品を見てくれた人に感じてほしいと強く思いました。
会社に入ると、作業以外の業務は多く発生します。
業務に加えミーティングや、進捗会、その他雑務など一日はあっという間です。
そこで、なるべく時間を無駄にしないために最近では
一日のタイムスケジュールを作るようにしました。
「現在の勉強法」でも書きましたが、制約があるからこそ
作業の効率化を必死に行うし集中できるものです。
また、自分がいま置かれている状況を具現化することで、どうすればよいのか
作業が遅れてしまっていたら、どこで巻き取ればよいのかなども見えてきます。
↓画像は実際に自分決めて行っていたタイムスケジュール表です。
*「用語集調べ入力対応」とは
カメラワークやアニメーションの用語をエクセルにまとめ、
重要度を決めたり参考サイトのリンク付けを行うなど、
エクセルに用語をまとめる作業の事です。
おわりに
学生の皆さんにお伝えしたいのは、就職してもそこはゴールではなく
ようやくスタートラインに立ったということです。
就職したらそこには自分よりも知識、技術をもった方たちが多くいます。
その人たちの中で自分も対等、もしくはそれ以上の
パフォーマンスを発揮できる人にならなくてはいけないのです。
仕事である以上、作品に対し「新卒だからしょうがない」ということは通用しません。
作品がクオリティーラインに達していなかったり、
劣っていればそれだけダメ出しがあったり、リテイクとなります。
そうならないためにも、「内定をもらったから」「就職したから」とあぐらをかかず
勉強や技術を高めることを続けてほしいと思います。
最後にはなりますが、皆さんがこの業界に入り、
一緒に仕事ができることを楽しみにしています。
先輩方に負けないようともに頑張っていきましょう!
長文になってしまいましたが最後までご覧いただきありがとうございました。
ゲーム開発の最後の砦!? QAチームについて
はじめに
初めまして。QAのリードをやっているものです。
QAとはゲーム開発においてクオリティを担保するための重要な砦として存在する部署です。
今回アールフォースで行っているQAの流れを説明します。
アールフォースのQAについて
まず初めにQAとは何かについてになります。
「QA」とは「Quality Assurance=品質保証」の略称になります。
会社によってはQC(Quality Control=品質管理)と言ったりします。
一言で簡単に言うと「デバッグ」になります。
デバッグと言われてイメージするのは長時間壁に向かって走り続けるようなすり抜けのチェックを思い浮かべる方もいるかもしれません。
そのようなデバッグをやることもありますが、アールフォースではそのデバッグ作業をメインでは行っていません。
作業の概要を端的に説明しますと
・クオリティを担保する為に必要な調査/提案
・クオリティを上げるためにテスト計画を立て実行
などを行っています。
もっと具体的に作業を説明しますと以下のような順番で作業を行っています。
- 仕様書レビュー
- テストプランの作成
- テストケースの作成
- チェックシートの作成
- テストパスの作成
- テストスケジュールの作成
- BVT(Build verification test)の作成/実行
- バグプロジェクション
- バグトリアージ
- ポストモーテム
上記をざっくりとした説明ものが以下になります。
仕様書レビュー
開発の初期から仕様書を確認し、仕様漏れやユーザビリティ、ユーザーエクスペリエンスについての指摘/提案を行っていきます。
テストプランの作成
開発中期に作成する資料で、テストの計画書になります。
テスト範囲や環境、テストスケジュール、人員計画等をまとめ、どのようなテストが行われるか事前に確認してもらうものになります。
テストケースの作成
開発中期に作成する資料で、チェックシートの設計書のようなものになります。
どの機能に対しチェックシートを作成するかをまとめます。
チェックシートの作成
テストケースに記載されてる機能に対して仕様通りの挙動になっているかチェックするための資料になります。
確認するための操作とその結果どうなるのが仕様通りか、データの数値がどうなっているのが正しいのかなどがまとめられています。
また組み合わせチェックでは無数にあるパターンを記載しテストプランで決めた範囲をチェックしていきます。
テストパスの作成
すべてのチェックシートの確認に必要な時間と作業者の人数をまとめた資料になります。
すべてのチェックシートの確認が終わる事で1回のテストパスが終了となり、テストパスを13回行えば、致命的なバグはすべて発見できると考えています。
テストスケジュールの作成
テストパスを基に、13回すべてのチェックシートの確認を行うことができるスケジュールを作成します。
スケジュールは予定通り、想定外、理想など3通りほど作成し、プロジェクトに提案します。
BVT(Build verification test)の作成/実行
テスト用のアプリ作成時に必ず行う簡易的なチェックシートになります。
アプリの安定性向上やデバッグを行うための準備を目的として行います。
バグプロジェクション
過去プロジェクトのデータを使用し、バグ報告のピークがいつになるか、報告件数はどれくらいになるか、修正可能件数は何件か、どのようなバグが多いかを予測します。
予測を基に、安定したリリースを行うためピークが来る時期を調整します。
バグトリアージ
残っているバグが多い場合に、対応すべきバグとそうでないバグを仕分けます。
対応すべきものを明確化することで、やるべき作業に注力し、スケジュールの延期またはクオリティが低いゲームをリリースしてしまうことを防ぎます。
ポストモーテム
開発終了後に行う反省会のようなものになります。
次回の開発の際に同じ轍を踏まないように、問題点に対し改善策を出していくものになります。
各セクションでまとめたものをリーダーたちで共有することで開発の度に成長していく組織を作っていきます。
まとめ
結構発言を軽視されがちなQAですが、最初にも言ったように実は最も大事な部署だと思っています。
QAやデバッガーがいないプロジェクトは開発を行いながら自分でデバッグを行い、バグを直しきれず、ユーザーに発見してもらうという状態になってしまいます。
そのような状態でリリースしたゲームはユーザーの皆さんに長く遊んでもらえない事が多く、そうならないための砦としてQAは存在していると思っています。
就活生の必須科目? プランナーこそ「コミュ力」を磨くべき
目次
はじめに
お疲れ様です、プランナーのT2と申します。
好きな三国志の武将は鄧艾です。
さて。
今回は、就活生の間でよく取沙汰される、「コミュ力」についてのお話です。
「コミュ力」とは何か
略さず言うと、「コミュニケーション能力」。
アルファベットで書くと"communication"。
コミュニケーションと、ネットで検索してみると、
英単語の1つで、「伝達」「通信」「意思疎通」などの意味。 言語、身ぶり、画像などの物質的記号を媒介手段とした、精神的交流のこと。通じ合い。
といった意味の言葉であることがわかります。
たまに間違った解釈をしている人がいますが、「コミュ力」というのは、ただ会話ができたり、自分の意見を一方的に通す能力のことではありません。
自分の意見を伝え、かつ相手の意見を聞き、自分を含めた複数の人の声を正しく理解する力のことなのです。
ゲーム開発に「コミュ力」は必要なのか
一般企業の就職活動において、「コミュ力」の高さを求められる、という話をよく耳にします。
それでは、ゲーム業界ではどうなのでしょうか?
結論から言うと、めっちゃ必要です。
ゲーム業界に対して、
「高い技術力」や「センス」のある人材が求められる
といったイメージを抱いている人も多いかもしれませんが、
それらと同等か、あるいはそれ以上に、「コミュ力」は重要視されます。
なぜ「コミュ力」が必要なのか?
「コミュ力」が重要視される理由は明白で、
ゲーム開発イコール「チーム仕事」だからです。
極端に小規模なゲームや、時間的制約が少ない自主制作タイトル、そして数少ない天才クリエイターを除いて、スタッフ1人のできる仕事の範囲は限られています。
例えば私は、プログラムコードは書けませんし、絵も描けません。 仕様書は書けますし、シナリオも書いた経験がありますが、両方を並行作業するのは、すごく時間が掛かってしまいます。
ところが、商業作品の制作には、往々にして納期・締め切りが伴います。
1人のスタッフによる開発には、限界があるのです。
そのため、チームを結成し、プロジェクトとしてゲーム開発に取り組んでいくのが、一般的なやり方となります。
しかし、複数のスタッフが同時並行で作業を進めている途中で、
それぞれが思い描く「できあがり」のイメージにズレが出る
ことがあります。
それも、かなりの頻度で。
抽象的な例を挙げると、
プログラマーが5mmのネジを作っているのに、デザイナーは5cmのネジ穴を作ってしまい、それぞれ出来上がったものを合わせてみたら、全然サイズが合わない!
みたいなことが起こったりします。
(なお、こういう時にプランナーは、仕様書の単位記載漏れのミスを、把握していなかったりします)
こうした事態が延々と発生すると、開発が遅々として進まなくなり、スケジュールが遅れるハメになります。
お互いに不信感が生まれてしまうと、これはもう最悪ですね。
プランナーの仕事
上記のような、スタッフ間での連絡の齟齬・食い違いのことを、
「ディスコミュニケーション」と呼んでいます。
平易に言い直すと「コミュニケーションの不足」ですね。
はい。
ここで「コミュ力」という最初の話題にボールが戻ってきます。
上記したような認識の齟齬は、コミュニケーションを丁寧に行うことで、事前に回避可能です。
スタッフが「いま作ってるネジって、どのサイズだっけ?」ということを確認すれば、 「なんか作っているもの違っていない?」という疑問が生まれ、互いの認識を擦り合わせる機会を持つことができるわけです。
私の考えでは、プランナーの役割の1つに
「面白いゲームを構成する要素の1つ1つを、設計段階から検討し、責任もって完成まで遂行すること」
があります。
仕様書や設計書を書くのは、チームのスタッフに仕事をしてもらうための、手段の1つに過ぎません。
この役割を達成するにあたって、「コミュ力」はこの上ない武器になります。
「コミュニケーションの不足」によって問題が引き起こるならば、「コミュニケーション」によってその問題を解消、もしくは未然に防ぐことができる、というわけです。
チームの仕事を停滞させず、開発を円滑に進めるために、プランナーには「コミュ力」が必要なのです。
求められる「コミュ力」の正体
それでは、プランナーを志望する皆様に向けて、
私の考える「どんなコミュ力があれば、ゲーム制作に役立つか」を特別大公開。(ジャーン)
1. ポジティブな思考
コミュニケーションの第1歩は、人と気兼ねなく話ができることです。
吐き散らかされるネガティブに、人は心を開きません。
「なぜその機能の実装が必要なのか」 「なぜそのデザインでなければならないのか」
ポジティブな思考と話を心がけ、相手の心のドアを優しくノックしましょう。
2. 軽妙なフットワーク
開発スケジュールは常に動き続けます。
わからないこと・不安を抱えたまま、居付いて押し黙ることは時間の無駄。
軽い足取りで出かけて、意思の疎通を図って、あなたを覆う不安の雲を晴らしましょう。
3. 相手の気持ちをよく考え、推し量る
上に挙げた1と2の例ですが、行き過ぎると失礼なコミュニケーションになることも…
人はそれぞれ異なる意見や考え方を持っていますし、プライドだってあります。
そもそも仕事がすごく溜まっていて、聞く耳を持つ時間すらないかもしれません。
そうした時は、慎重に考えて、コミュニケーションの内容を選ぶことも、重要になるのです。
4. 最終目的は常に1つ!
私たちの最終目的は、最高のエンターテインメントを作り出し、お客様を喜ばせることです。
それは不変の事実であり、どんな仕事をしていても、それを決して忘れてはいけません。
もし、その目的に背くような類のコミュニケーションを取らなければならない…
そんな時は立ち止まり、もう一度考え直してみる時間が必要なのです。
まとめ
ゲーム開発者に「コミュ力」は必要。開発=チーム仕事だから
プランナーには特に必要。チーム仕事を遂行させるのが役割だから
ポジティブに、アクティブに。冷静さと情熱も忘れずに!
初心者向けIllustrator講座その② ~ライブペイントツールの使い方編~
目次
はじめに
前回はペンツールの使い方を中心に記事を書きましたが、今回はライブペイントツールの使い方になります。
その中でもIllustratorでの塗りは大きく分けて
①線で描き、塗りはライブペイントで
②面で描く
の2通りあるのですが、今回は①の塗り方を説明いたします。
(パーツごとに分けてアニメーションなどを作成したい場合は、①の塗り方が良いです)
●線画を複製する
Windowsに入っているペイントのように、このままバケツツールで色を塗る・・・ということはできません。
この線画を一度「ライブペイント化」してからではないとライブペイントツール(バケツツール)で色を塗ることができないのです。
線画を一度ライブペイント化しても解除をすることはできるのですが、念のためライブペイント化前の線画を別のレイヤーに複製しておくことをお勧めします。
①選択ツールを選んで、線画全体を囲うようにドラッグで選択
②「Ctrl」「C」キーを同時押しで「コピー」
(※「Ctrl + C」でコピーするのも多用するので覚えましょう!ちなみに、Ctrl+Xは「カット(切り取り)」になります。)
③レイヤーパネル右下のアイコン(ゴミ箱の左隣)で、新規レイヤーを追加
④追加したレイヤーを選んだ状態で「Ctrl」「F」キーを同時押し
(※わかりやすくするため、レイヤー2は一旦非表示にしています)
「Ctrl + F」でコピー元のものと「同じ位置にペースト」することができます。
「Ctrl + V」でもペーストすることができますが、コピー元とは違う位置にペーストされるので、同じ位置にペーストしたい場合は「Ctrl+F」を使いましょう。
これで線画をコピーすることができました。
実は、レイヤーそのものを複製することもできます。
レイヤーパネルの「レイヤー○○」と書いてある部分を、「Alt」キーを押しながら上へドラッグすると、同じレイヤーを複製することができます。
(※今回は線画と影用の線画の2枚のレイヤーを1枚のレイヤーに複製したかったためこうしました)
(ここの画面もスクショしたかったのですが、手の本数が足りずできませんでした・・・)
今コピーしたレイヤー4を非表示にして、コピー元のレイヤー2,3を表示に戻しておきましょう。
●ライブペイント化
さて、いよいよ塗りに入ります! ・・・の前に「ライブペイント化」をしましょう。
・・・・・・の前にもう1つ、やることがあります。 ライブペイント化した後にもできるのことなのですが、先にやった方が楽だと思います。
ファンくんの影の部分を、赤いペンで描きましたよね? あれは、線画の色を「なし」にするための目印です。
①選択ツールで赤い線画だけを選ぶ (レイヤー2をロックして全体を選択すればレイヤー3の赤い線画だけ簡単に選べます。)
(全体を囲わなくても、ドラッグしてできる四角形に少しでも線画が重なっていれば選択することができます。 また、複数箇所選択する場合は、「Shift」キーを押しながらドラッグしてください。)
②ツールバーの下の方にある2つの四角形のうち、右下の方(線の色)が手前に出ている状態(奥に出ていたら、クリックすると手前に出ます)で、その下に並んでいる3つの小さい四角形のうち右のものをクリックする
この小さい四角形は、左から「カラー」「グラデーション」「なし」となります。今回は「なし」を選択します。
これで線画の色がなしになりました。
(余白をクリックして選択を解除してみれば、色が無いことがわかります。)
さて、今度こそライブペイント化していきます。
①選択ツールを選んで、線画全体を囲うようにドラッグで選択
このレイヤーに、この線画以外に描いていないものがあれば、「Ctrl」「A」キー同時押し(そのレイヤーのものをすべて選択)でもよいです!
②上から「オブジェクト」→「ライブペイント」→「作成」を選択します。
これでライブペイント化が完了です!
見た目には変わっていないように見えますが、選択すると全体がいっぺんに選択される(グループ化されている)のと、枠の四角形が少し変わります。
●ライブペイントツール
さて、準備が終わってようやく色を塗ります!
①ツールバーから「ライブペイントツール」を選択します。
隠れていたらクリック長押しで出しましょう。
これがライブペイントツールです。試しにマウスカーソルをどこかに乗せてみましょう。
おお!!塗る範囲が見えます!!!
・・・ちなみに、見えない場合や塗りたい範囲より大きくなって仕舞う場合は、線画がちゃんと閉じていないので、線画を調整しましょう。
選択ツールで選択した状態で「オブジェクト」「ライブペイント」「解除」を選択して線画を調整し直しましょう。
塗ってから解除すると、塗った部分の色も無くなってしまうので、線が繋がっていないことには早めに気づいておきたいですね。
一応、線画をダブルクリックしたあとに調整したい線画を選べば、ペンツールで書き足したりなどの調整をすることもできます。
さて、線画が繋がったら塗りましょう。 今は「塗り」が「なし」になっているので、色を選びましょう。
②ツールバーの下の方の2つの四角形のうち、左上のものをダブルクリック、カラーピッカーから塗りたい色を選ぶ
うまく目当ての色が選べない・・・という場合は、画像をウェブ上や自分のフォルダに用意したものをコピーして貼り付けてスポイトするのもありです。
画像のペーストは、画像をコピーした状態で「Ctrl + V」、フォルダから貼る場合には直接ドラッグ&ドロップです。
スポイトツールはツールバーから選択できますが、
ライブペイントツール選択中なら「Alt」キーを押している間はスポイトツールになるので覚えておきましょう。
スポイトツールで選びたい色の部分をクリックすれば、色を選ぶことができます。
(資料に使った画像はDeleteキーで消すなり別の所に避けておくなりしましょう)
今度こそ塗ります!
③ライブペイントツールで、塗りたいところをクリック
塗れました~~~ッ!!!!
良い感じです!
これを繰り返してすべての色を塗りましょう。
ちなみに、この部分のように、区切られているけど同じ色に塗りたいという場合はドラッグでいっぺんに塗れます。
これを繰り返して・・・ 完成!!!!
・・・え?何か物足りないですか?
ファンくんのつやっとした質感を表す光を付けたい??
・・・ではせっかくなので、追加でもっと塗りたい場合のことも教えましょう!
●追加でライブペイント化する
後から光や影を追加したいという場合には、再度ライブペイント化して塗れるようにすればよいのです。やってみましょう。 (こちらの光なしバージョンも、念のため複製して別レイヤーに残しておきます)
①光を付けたいレイヤーをロックし、新しいレイヤーを用意する
(この作業はなくてもいいですが、あとでまとめて光用の線画を選択する時に便利です)
②新しいレイヤーに、光の線をペンツールで描いていく
この辺りは感覚ですね・・・ペンの色は何色でも良いですが、わかりやすいものがよいでしょう。
この時、元の線画と交差する(くっつく)ようにするのもポイントです。隙間ができると塗れませんので!
はみだしてもよいです。
③選択ツールですべてを選択し、線の色を「なし」にする 選択しているものがすべて同じ色でない場合は、「?」アイコンになりますが、気にせず色をなしにしましょう。
④「Ctrl + X」でカットし、さっき色を塗った絵のあるレイヤーに「Ctrl + F」で同じ位置にペースト
「Ctrl + V」ではなく「Ctrl + F」なのがポイントです。
レイヤーが違うと、選択したときの線の色が違うことに気付いたでしょうか。
レイヤーパネルのロックアイコンの右隣にある色がそのレイヤーのカラーになります。
もし線画と同じ色で見づらい、などありましたら、レイヤーパネルでそのレイヤーのサムネイルをダブルクリックすると変更することができます。
⑤色を塗った絵とペーストした影・光の線をすべて選択してライブペイント化する
⑥ライブペイントツールで塗っていく
ここはさっきと同じです。
線画が見えなくてやりづらい~という場合には、③の工程を省き、色を塗った後に線をダイレクト選択ツールで選択→線の色をなしにする、という手もあります。
影の色を決めるコツは、元の色をスポイトでコピーしてから、それより少し暗い色を選ぶと良いでしょう。
つやっとしたファンくんになりました!
これで完成です!お疲れ様でした!!!
(やっぱこの光いらなかったな~という場合には、ダイレクト選択ツールで線を選んでDeleteキーで消しましょう。
この時、色が変わってしまった場合にはまた塗り直しましょう。)
おわりに
これで線画(ペンツール)と塗り(ライブペイントツール)の説明は終わりです。 初心者向けということで細かく書いてみましたが、いかがでしたでしょうか・・!!
最後までお読みいただきありがとうございました!
初心者向けIllustrator講座その① ~ペンツールの使い方編~
目次
はじめに
こんにちは。2DデザイナーのM.Yです。 今回は、Illustratorの使い方についての記事になります!
「Illustratorでペンツールを使って絵を描きたい!」という方向けの記事になります。 なかなか教わる機会が無くて手が出せないという方はぜひ参考にしてみてください。
今回はアールフォースのマスコットキャラ「ファンくん」のイラストを描いてみたいと思います!
実際の作業
●準備
Illustratorを開き、上の「ファイル」→「新規作成」を選ぶとこのようなメニューが出ます。
こちらでカンバスのサイズなどを決めます。(あとからも変えることができます。) 気を付けるのが、「カラーモード」です。 年賀状を印刷したい時など、印刷したい場合には「CMYK」、ウェブ上でイラストを載せたい場合には「RGB」と覚えておきましょう。 今回はRGBでやります。
●下書きを用意する
まずは下書きを用意します。Photoshopで描いたものをjpegにしたり、手書きの物をスキャンしてjpegデータにするでも良いでしょう。
これが下書きです。ラフなものではなく、できるだけ線をきっちり描くとなぞりやすいです。 これをIllustratorに持って行きます。
フォルダから直接、Illustratorのカンバス上にドラッグ&ドロップすると配置することができます。 フォルダからドラッグ&ドロップする方法以外だと、上の「ファイル」→「配置」でフォルダと画像を選択する方法もあります。
この時、フォルダに保存した画像を「埋め込み」します。 上の「ウィンドウ」→「リンク」でリンクパネルを開き、右上辺りの「≡」をクリックして出てくる「画像を埋め込み」をクリックします。
これで埋め込みをしないとどうなるかというと、このIllustratorのデータを、持って来た下書き画像と同じフォルダに保存していないと、次にIllustratorのデータを開いたときに下書き画像が表示されないということが起きてしまいます。
他の人にデータを渡す際などには注意が必要ですね。
ウェブ上でコピーして直接貼り付けた場合などには、埋め込みは不要です。
埋め込みをしないことへのメリットも多分あるのですが私はあまり使いません・・・
ドラッグ&ドロップした後は、カンバスの真ん中へ移動します。
この時、ツールの一番上の「選択ツール」で選択した状態でないと移動できないので注意です。
選択ツールを選んだ状態で画像の上でドラッグ&ドロップ、もしくは矢印キーで移動できます。
いちいち選択ツール選ぶのはとてもめんどくさいので、「Ctrl」キーを押している間は「選択ツール」になりますので、ぜひ活用してください!
選択ツールはIllustratorでは頻繁に使うので覚えておきましょう。
「透明」パネルの「不透明度」の%で不透明度を設定します。
パネルが出ていないときは上の「ウィンドウ」→「透明」で出しましょう。
直接数字を入力するか、プルダウンメニューから10%単位で選択します。今回は細かい不透明度を設定する必要はないのでプルダウンメニューからお好みの薄さを設定しましょう。
「透明度」ではなく「不透明度」なので、数字が低いほど薄くなります。
これで配置できました。
このままだと選択ツールでクリックするたびに選択されてしまって面倒なので、一番下のレイヤーとして設定してロックしてしまいましょう。
「レイヤー」パネルが無い場合は上の「ウィンドウ」→「レイヤー」で出しましょう。
ロックは、レイヤーパネルでロックさせたいレイヤーの横の□をクリックです。南京錠のマークが出ている間はロックされています。もう1度クリックでロック解除です。
ちなみに、その左の目のマークをクリックすると「表示」「非表示」の切り替えができます。下書きを非表示にしたい場合などにも使えます。
線画を描くためにレイヤーを1枚増やしておくのも忘れずに!
(レイヤーパネル右下の、ゴミ箱の左隣のマークをクリック)
●ペン入れ準備
これで下準備ができたので描いていきます。
Illustratorでこういった絵を描く場合、
①線で描き、塗りはライブペイントで
②面で描く
のだいたい2パターンあります。
ゲームなどのデータにする場合は、後から編集がしやすい②でやるのが基本ですが、今回はあまり知られていなさそうな①で説明します。
ツールバー(出ていない場合は「ウィンドウ」→「ツール」)で「ペンツール」を選択します。
下の方にあるのが、「塗りの色」と「線の色」です。白い四角に赤い斜めラインが入っているものは「色なし」です。
(塗りか線の四角をクリックした後、下に小さく3つ並んでいる四角の右のものを選ぶと色なしにできます)
今は線をなぞるので、塗り:なし、線:黒にします。色を変えたい場合は四角をダブルクリックするとカラーピッカーが出ます。
この色は、描いた後からでも変更できるので便利です。
次に線の太さの設定です。
「線」パネル(無い場合は「ウィンドウ」から以下略)の「線幅」から太さを選びましょう。
私の設定では単位が「ポイント(pt)」になっていますが、ピクセルなどに変えたい場合は「ファイル」→「環境設定」→「単位」から変更することができます。
ちなみに線パネルからは線の端の形状を変更したり、矢印や点線に変更したりもできますが、この辺は今回は使いません。
また、線の太さは後からいつでも太くしたり細くしたりできますので、お好みの太さで描きましょう!
●ペン入れ
さあいよいよ描いていきます。
が、フリーハンドではなく「ベジェ曲線」を使って描くので、慣れないうちは大変かもしれません。
ベジェ曲線とは何か?というのを細かく説明するのは難しいので、詳しいことが知りたい場合は検索してほしいのですが、曲線の描き方のコツを順を追って説明したいと思います。
まずこの耳の場合。
描く時は、基本的には端から端に向かって描きますが、途中から描いた場合でも線を繋げられるのでどこからでもやりやすいところから始めましょう。
①書き始めのところをクリックします。
すると「アンカーポイント」と呼ばれる点ができます。
②耳の中間辺りをクリックします。
この時、まだマウスのボタンやペンタブの先を離さないでください。
③クリックしたまま右へドラッグします。
(この時、「ハンドル」と呼ばれる線が表示されます。)
④ボタン(ペン先)を離します。
これ途中まで線が引けました。
③のときに、どの方向にドラッグすれば引きたい線が引けるかがわからない!という方がいるかもしれませんが、慣れていくうちに覚えていくかと思います。色々試しましょう。
もし間違えたから戻りたい!という場合には、マウスのボタンを離している状態で「Ctrl」と「Z」キーを同時押しです。
この操作は絵を描くうえで何度も何度も使う事になるかと思います。
戻しすぎた!という場合には「Ctrl」「Shift」「Z」キーを同時押しです。
ショートカットキーがわからないよ~!という場合は上の「編集」から「ペンの取り消し」「ペンのやり直し」の所にキーが書いてありますし、それを直接選んでも同じ効果が得られます。
このまま耳の端まで書き進めていきます! ⑤耳の中間辺りをクリックしてドラッグ ・・・・・・あれ?線がぐにゃっとして思い通りに描けない?
そうなんです、③でできた「ハンドル」(アンカーポイントから伸びている線)のせいでこのようにうまく線が引けないことがあります。
なめらかな曲線を描く場合には便利な「ハンドル」ですが、時には思い通りの線を引く邪魔をしてしまうのです。
そんなときは、
⑤ ②でできたアンカーポイント(点)をクリックです!
こうすることで、ハンドルが半分消え、これから描く線の軌道が膨らまずに済みます。
こうしてハンドルをうまく使ったり、いい線が引けない時はハンドルを消したりしながら、少しずつでも線を書き進めていきます。
⑥先端をクリックしてドラッグ・・・・・・ ・・・・・・耳が尖ってしまう!!もっと丸みを帯びた耳が描きたい!!!!
・・・そんなときには、一気に端まで描いてしまうのではなく、1本の線を複数の段階にわけて書きましょう。
耳の先の丸い先端を表現したい場合には、この辺りにアンカーポイントを置きます。
2番目に打ったアンカーポイントから離れすぎないのがコツです。
今度こそ気を取り直して・・・
⑥クリックして、離さないまま下へドラッグして、離す
(3つの工程を1つにまとめてしまいましたが、要するに②~④と同じことです!)
これで耳の先端の丸みが描けました。 さあ、今度こそ端まで一気に描きましょう!
⑦ ⑥でできたアンカーポイントをクリック、中間をクリックして離さないままドラッグして、離す、の繰り返しです。
これで耳が一通り完成!長かったですか?慣れれば数秒で終わります。
一旦1つの線を描き終わった後には、
⑧「選択ツール」を選んだ状態でカンバスの余白をクリックして選択を解除
までがワンセットとも言えます。
これをしないまま次の線を描こうとすると、繋がってしまいますので・・・!
線を引き終わったあとに線を微調整したい場合は、ツールバーの白い矢印「ダイレクト選択ツール」でアンカーを選択するとハンドルが現れますので、それをダイレクト選択ツールや、ツールのペンツール長押しで出現する「アンカーポイントツール」でいじることができます。
(「ペンツール」を選択しているときに「Alt」キーを押している間だけ「アンカーポイントツール」になるのも便利ですので覚えておきましょう!)
これでペンツールでの線の引き方はだいたいわかったでしょうか?
ドラッグで曲げながら描くのが難しいよ~という場合には、アンカーポイントだけ先にクリックだけで全部打ってしまって、それが終わってからアンカーポイントツールで曲げるという手もあります。
これを繰り返して線を1本ずつ引いていきますが、よく行きあたる場面とその対処も描いておきます。
●「線を長く描きすぎてしまった!」
Ctrl+Zで戻すと今描いた線も消えちゃうし・・・やだな~~~~
そんな場合にははみだした線を短く調整しましょう。
①選択ツールで、長さを調節したい線を選択
②ペンツールの上で長押しして出てくる「アンカーポイントの追加ツール」を選択
③短くしたいところ(先端にしたいところ)をクリックして離す
これでアンカーポイントが増えました。この状態で、耳に食い込んでいる先端のアンカーポイントを消せば、今打ったアンカーポイントのところが先端になるというわけです。
④ペンツールの上で長押しして出てくる「アンカーポイントの削除ツール」を選択
⑤消したいアンカーポイント(この場合は先端)をクリック
(⑥選択ツールで余白をクリックして選択を解除)
これで調整完了です!
今回は先端なので「アンカーポイントの追加・削除」でできましたが、 線の途中の場合はどうするの?という例も載せておきます。
こんな感じで、中を消したい場合ですね。
そんなときは「はさみツール」を使います。
はさみツールは、普段は隠れていますが、「消しゴムツール」のところを長押しするとでてきます。
①調整したい線を選択
②はさみツールで、「消したいところから消したいところ」を2か所1セットでクリック
します。クリックする度に選択が解除されてしまう場合には、Ctrlを押しながらクリックでその都度選択してください。
これで1本の線を切り分けることができました。あとは余分な部分を削除するだけです。
③選択ツールで、余分な部分を選んで「Delete」キーを押す
(※複数個消したい場合は、1つ目を選択した後Shiftキーを押しながら2つ目以降をクリックでいっぺんに選択できます!)
これで余分な線が消せましたね!
「線の長さがあとほんのちょっと足りない!」
ペンツールで書き足してもいいけど、無駄にアンカーポイントが増えちゃうなぁ・・・
そんなときは「ダイレクト選択ツール」でアンカーポイントを移動させることができます! ツールの上から2つ目の「白い矢印」がダイレクト選択ツールになります。
黒い矢印の「選択ツール」との違いは、「選択ツール」は「全体を選択」することができ、「ダイレクト選択ツール」は「一部を選択」することができます。
ペンツールで描いた1本の線で言えば、 「線1本を全部選択」できるのが「選択ツール」 「アンカーポイントだけ選択」「アンカーポイントの間の線だけを選択」できるのが「ダイレクト選択ツール」です。
①伸ばしたい線の先端のアンカーポイントをダイレクト選択ツールでクリック
②伸ばしたいところまでドラッグして離す
これで伸びました!
ちなみに、今回の塗り方の場合には、線と線をくっつけて隙間を無くさないと色を塗ることができないので注意してください。太い線だから大丈夫!ではなく、太い線の中心を通っている線(選択すると見える線)を繋げてください。
この場合には細い線で見たほうがわかりやすいです。
もっと早く書いて欲しかったですか・・・?この機能を使ってあとからでもやりましょう!
でも、伸ばした分曲線が緩やかになってしまった・・・ そんなときは、ハンドルをいじって調整しましょう。
これを繰り返して・・・線画完成!
赤い部分は、陰影をつけるための線です。
あとで透明にするのでわかりやすく色を付けているだけなのでわかれば何色でも良いです。
あとで透明にする線は、新しいレイヤーに書いておくと、線画と混ざってしまわないので便利です。
おわりに
今回は線画までの初心者向けIllustrator講座を書きました。
次の回ではいよいよ「ライブペイントツール」で色を塗っていきます!
是非お楽しみに!