KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

お疲れ様です。2Dイラストチームのtana-Kです。

この記事はKLab Creative Advent Calendar 2018 の 16日目の記事になります。

はじめに

KLabのクリエイティブでアドベントカレンダーを作るから執筆して欲しいと言われたのですが、2Dイラストのテクニックってネットでも書籍でもあらゆるものが出尽くしてしまっているので正直何を書いたらいいのか悩みました。
新社会人イラストレーター向けに、たくさんFBを食らった時でもメンタルを保つ方法や、自分がクリスタで使ってる機能の紹介など考えましたがいまいち訴求力に欠ける…。
そこで考えたのが「IPイラストレーターってどんなお仕事?」というテーマです。
KLabの特色といえば他社IPに強いところ。
そのメイン部分を担うIPイラストはどのようにして作られているのか、なかなか知る機会はないかなと思い書いてみることにしました。

だがしかし、私がメインで関わっている某IPの2Dイラストをアドベントカレンダーで使うのはNGということでしたので、技術書典4で私が描かせていただいた同人誌の表紙を使い擬似的にIPイラストレーターの仕事内容を紹介したいと思います。


こいつです。

IPイラストレーターのお仕事とは

基本的な工程は非IPのイラスト業務とほぼ同じですが、各工程で版元チェックが入ります。

絵柄の分析・練習

配属されてすぐに商材として使うものを描くわけではなく、ある程度の練習期間を設けており、KLabではこの工程をキャッチアップと呼んでいます。

キャッチアップの期間は先人たちの築き上げた「絵柄似せマニュアル」を参照しつつ本番と同じ環境で練習していきます。

絵柄似せマニュアルは、原作キャラのボディバランスや顔の比率などを可能な限り数値化することで、主観に頼らず短期間で原作の絵柄を再現できるような資料になっています。

IPイラストレーターって楽しい?

絵を通して表現したいテーマがある、もしくは自分の名前を売りたいという創作意欲の高いタイプの絵描きにとっては正直つらい仕事だと思います。
私は絵を描くという作業そのものと、案件の絵柄に可能な限り近づけつつ魅力を引き出すための技術を勉強したり実験したりするのが好きなので、今の仕事は楽しいし天職であると思っています。

また、様々なジャンルのIPイラストを経験していくことで、突出したオリジナリティは無いがどんなものでもある程度以上のレベルで描ける器用さを得られます。
器用貧乏なんて言葉がありますがなんでも描ける絵描きは流行に左右されないので食いっぱぐれが少ないです。

長々となりましたが、IPイラストレーターという職業に興味が湧いた、または色々な絵柄にチャレンジすることで技術を磨きたいという方は是非ともKLabの門を叩いてみてください。

はじめに

この記事は KLab Creative Advent Calendar 2018 の 15日目の記事になります。

 皆様、どうもはじめまして!
 KLab Sound Teamの阿部です。
 まずは軽い自己紹介から…

6年程前に某音楽制作会社からKLab株式会社に転職してまいりまして、現在、主にBGM制作業務を手がけておりますが、SEの制作、WwiseとUnityを併用してのカットシーンへのボイス実装や、弊社で運用中タイトルでの音声周りのデバッグやボイス処理などの作業もサポートしています。

概要

制作面でのTips等は実用的な内容のものが既にweb上(SNS,動画サイト)を探せば幾らでも存在している現状…一体何を書いたら良いのか?

などとモヤモヤしていたら、サウンド部屋の遠くの方(といっても広くはないが)から
「サウンドチームの公式twitterのフォロワー数なかなか増えないなぁ」
という声が聞こえて参りました。

 そもそも…
 今、KLabにサウンドチームがあること自体、
 絶望的なまでに知られてなくねぇか?
 世界人口約73億人に対し、フォロワー数約500…
 これ何%?もう少し何とか出来る余地あるんでない?

↑ 脳内仮想上長

はい。…ということで、脳内仮想上長からの示唆に富むお言葉を真摯に受けとめ、
この機会にKLab Sound Teamについて知って貰うことが、お互い一番幸せなんじゃなかろうか?という考えに至り、また我々が「世界と自分をワクワクさせる」ためにどういった活動を行っているのか?という点について書くことにしました。

ちなみに上記の青太字で記載したものが、弊社のビジョン※1)となっております。

KLab Sound Teamとは?

KLab Sound Teamを一言で説明すれば、
「様々な案件を横断し、サウンド面でサポートするグループ」
様々な音楽人生のバックグランドを持った経験豊か、且つ各々が唯一無二の音楽的特殊能力を持つ極めて個性的なメンバーで構成された弊社クリエイティブ部を代表する異能集団。ゲーム周りの音に関係する業務に留まらず、CMや四半期ごとに催される全社会での音響面でのサポートなども行っております。


ヤーガン族のイラスト窓際族のイラスト中二病のイラスト(女性)人工知能と喧嘩をする人のイラスト驚いて目が飛び出る人のイラスト(女性)
個性豊かなKLab Sound Teamメンバーの例

折角の機会なのでKLab Sound Teamの始まりのお話も少々^^
チームの始まりは今から約6年前に遡る2012年の後半になります。

弊社で初めてサウンドスタッフとして採用されたのが宮内(下の写真中の帽子を被った人)で、年が明けた2013年1月に私が加わり…そこから夏が終わった頃に磯田(写真中の左から二人目の眼鏡をかけた人)が加わりました。そこから年に1~2人程度増員していき、2018年12月現在では10名を超える大所帯となりました。

↓ 2017年に撮影したKLab Sound Team集合写真。

制作業務に関係する話

弊社で開発しているタイトルに関連した制作業務の話でいえば、主な作業は以下のものが挙げられます。

  1. BGM/SEの制作(音の生録音を含む)
  2. ゲーム内でのカットシーンでのMA作業
  3. UnityとWwise/CRI-ADXなどを連携させての音の実装作業
  4. BGMを外注する際のディレクション
  5. リズムゲームの譜面作成
  6. ボイスの整音作業
  7. ボイス収録時のディレクション
  8. ゲームに関係するサウンド面での全面的なディレクション

上記に記載した業務を詳細に語るよりも、実際に制作した成果物を見て頂く・聴いて頂くほうが手っ取り早いだろう…と。成果物の幾つかは公式にwebサイト上で試聴出来ますので、そちらを紹介します!^^
♪BLEACH Brave Souls全世界3000万DL記念、アプリ内BGM無料視聴
ゲーム中の全ての楽曲ではありませんが、代表的な楽曲が試聴可能です!
https://www.bleach-bravesouls.com/index.php?dc_action=contents%2Fbgm_listen

BLEACH Brave Souls(ブレソル)のカッコイイカットシーンは、ブレソル公式Twitterで紹介しているのでこちらを御覧ください。
https://twitter.com/Bleach_BS/

ヘッドホンで音楽を聞く人のイラスト(男性)


制作業務以外の業務。対外的な活動。

制作業務以外にもアレヤコレヤと、以下のような対外活動を積極的に行っております。

SNSの活用

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam

サウンドチームの名前が外部に出る際の発表がメインですが… メンバー個人による役立つTipsなどの紹介や日常系脱線話などなど、 チームの雰囲気が感じられるものになっています。

フォローされていない方…
是非ともこの機会に、お気軽にフォロー頂ければ幸いです!^^

ライブ活動

東京ゲームショウ2018にてビジネスデイのみではありましたが、KLab Sound Teamとしてライブ活動を行いました。こちらの模様、公式映像がyoutubeに上がっておりますので、この機会に御視聴をお願いしますm(_ _)m

♪KLabGames放送局+Plus / KLabGamesStation(9/20)【TGS2018】(※2


【インタビュー】KLabGamesのサウンドを一手に担う"KLab Sound Team"…
メンバーが明かしたTGS2018ライブの開催経緯と今後の展望
https://gamebiz.jp/?p=223203

TGSでのライブ後の記念写真

また、以下は来年のお話になりますが、ライブのサポートも致します!^^

樋口楓さん(@HiguchiKaede)出演の1stライブ(※3)
「Kaede Higuchi 1st Live “KANA-DERO”」
にて、KLab Sound Teamがバンドでライブをサポート致します!

CEDEC, GTMFへの登壇

CEDEC, GTMFなどの開発者向け技術交流会へもKLab Sound Teamが登壇しております。

【CEDEC 2018】ユーザーに、より質の高いサウンド体験を!
ソーシャルゲームでラウドネスコントロールを実現するためのワークフロー構築と考察】

https://gamebiz.jp/?p=219024

【Game Tools & Middleware Forumで、
当社社員がWwiseを用いたモバイルオンラインゲーム開発について登壇をしました!!】
http://pr.blog.klab.jp/archives/51634342.html

シンプルなプレゼンのスライドのイラスト

新製品発表会にゲストとして登壇

以下の動画はNuendo8の新製品発表会の模様です。

KLab Sound Teamからは標葉と私の両名が登壇いたしました。
動画の1:16:16あたりからが登壇場面となります。

発表会のイラスト「タイトル文字」

webインタビューに登場

スタインバーグ・ジャパン(※4)のサイト内「SoundRoster」に、KLab Sound Teamと私がインタビューを受けました。

【KLab サウンドチーム インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_soundteam.html

【Sound Roster -Behind the Scene- #6 KLab】

【阿部公弘 (KLab) インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_abe.html

インタビューのイラスト(男性から男の子)

専門学校等での講義

【これからのゲームサウンドを牽引するソフトウェア「Wwise」。その技術をプロから学びました!】
https://www.hal.ac.jp/tokyo/mind/special/1058

【サウンドクリエイターとして活躍する卒業生から学ぶ!人気ゲームアプリ制作の最前線】
https://www.hal.ac.jp/tokyo/mind/special/14893

【先日、専門学校東京ネットウエイブ様にて、KLab Sound Team4名がサウンド特別講義を行いました!】

つらつらと記載したものを見ると…
「対外活動の方が多いんじゃないか?」

対外活動をするにもわけがありまして…

  1. 「ただ物を作っているだけは他所と一緒じゃないか?」という思い。
  2. 内外で弊社サウンドチームのプレゼンス向上のためのプラスαの活動。
  3. 各メンバーの持つスキルならば、制作だけに留まらない活動が出来るハズ…。
  4. 才能あるサウンドクリエイターに来ていただいて、一緒に盛り上げて貰いたい。
  5. KLab Sound Teamを盛り上げることで、延いてはKLabのクリエイティブ全体を盛り上げていきたい。
  6. より「世界と自分をワクワクさせる」ため。

新興の我々がゲームサウンド業界において新たに居場所を作るという意味においても、対外活動は制作業務と同等の重要性があると考えております。

街頭ビジョンのイラスト

これは街頭ビジョン…

KLab Sound Teamのこれから(夢を語ろう!

以下、記載したものは…
全くもって私自身の個人的な願望でございます!
このアドベント・カレンダー企画にサウンドから手を挙げたのは私だけでしたので、
最後の最後だけ私の思いのたけを語らせていただこうと^^

1. ゲームサントラの配信※5

現状、web上での無料公開になっているものがありますが、それとは違うやり方で楽曲を提供してより多くの人に高音質で楽曲を聴いて貰いたい。それをサウンド主導による制作費用回収策としてやれたら、一層面白いことになるんじゃないか?と。

2. 埋蔵曲の再利用※6

既にサービスを終了してしまったゲーム楽曲の再利用を考えてみる。
現在、もう聴くことは出来ませんが、結構良い曲あるんですよ!それらを思い切ってBGM素材として何らかの形で配布するなどして、もう一度世の中に出してあげることで、音楽的な面での価値を再評価して貰いたい。それ以上に我々の楽曲をより多くの人に聴いていただきたいという思いが強い。

3. 制作者名を出す

作曲者だけに限定した話ではなく、効果音の制作者、MA作業を担当した方の名前も可能な限り出せたら最高だと考えています。まず第一に、誰が何を作ったかが明記されているのは、クリエイター本人のモチベーション維持と向上面から見て極めて重要!第二に、一部のゲーム音楽の熱狂的なファンは作家を追いますから、そういったファンを獲得したいならば名前を出すのは必須事項になると考えています。

また「これ誰が手がけた仕事だろう?」とか「KLabはこんな凄いクリエイター抱えているのか?」いう疑問から、「このクリエイターと仕事したい」に発展するケース(※7)もあるハズ。もし、そうなってくれたら会社にとっても大きなプラスになるものだろうし、クリエイター冥利に尽きるものがあると思います。

4. より一層の対外的な活動

まだ活動の幅はホボ国内なので、夢は大きく海外へ!GDCへの登壇!(などなど

明晰夢のイラスト

まとめ

ここまで、KLab Sound Teamのあれやこれやを記載してまいりましたが、こうして見てみると一般的にイメージされているゲームのサウンドチームとは一線を画すような印象を持ったりしませんでしたか?そんな我々が大きく成長していくには、やはり今よりも叱咤激励が必要であると考えております。

現状、Twitterのフォロワー数は多くはありません。しかし、この状況でフォローしていただくことで「初期から応援していたぜ!」と声高に自慢できる可能性が、まだまだ十分に残されているとも言えるのではないでしょうか?

最後になりますが、弊社配信タイトルのユーザーの皆様、そしてゲーム音楽好きな皆様も御一緒に、KLab Sound Teamを盛り上げることに参加して頂ければ幸いでございます。

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam



皆様、これからもKLab Sound Teamを何卒宜しくお願い致します。m(_ _)m
集合している人たちのイラスト(子供)

文中の注釈(※)のまとめ

※1:弊社のビジョン
弊社にはKLabビジョン(https://www.klab.com/jp/company/vision/)というものがあります。弊社のロゴマークの由来も記載があるので必見必読!
個人的に感じている点として、社内の空気といいますか…割と自由度高くやれる空気が醸成されているのは、このビジョンのおかげだと感じることが実際多いのです^^

※2:KLabGames放送局+Plus
弊社で毎週水曜20時から放送を行っているゲーム情報配信番組。KLabGames新作ゲームのお知らせや、絶賛配信中のゲームに関する情報や、攻略などの情報をお届けしています。MCには内村史子さん

チャンネルKLabGames
https://www.youtube.com/channel/UC5jKrMQl1H7F3TVXZHnb_eQ

※3:樋口楓さん
ただいま人気沸騰中!にじさんじ所属のバーチャルアイドルです^^

年明け2日にNHK総合で放送される【アニメ「NHKバーチャルのど自慢」】への出場も決定いたしました!

樋口楓さんの公式YouTubeチャンネル
https://www.youtube.com/channel/UCsg-YqdqQ-KFF0LNk23BY4A

※4:スタインバーグ・ジャパン
本社はドイツ。音楽制作をやっている者でスタインバーグの名を知らぬ者はいないだろう?
音楽制作向けのCubase、それにポストプロダクションの機能を強化させたNuendo、波形編集ソフトのWaveLabがSteinbergを代表するソフトウェア。NuendoはWwise(ゲーム開発用インタラクティブオーディオソリューション)との連携が強化され、現在急速にゲームサウンド業界での普及が進んでいる。

※5:ゲームサントラの配信
CDとして在庫を抱えることと販路の問題。CDの海賊版問題やCDからの違法アップロード問題。海外リスナーにも広く聴いて貰いたいことなども考慮すると、現状ではサブスクリプションでの配信が一番現実的な気がしています。

以下、海賊版の事例。
・ゲームミュージックサントラの海賊版が中古市場に出回っているらしい
https://togetter.com/li/1205968

※6:埋蔵曲の再利用
印税収入になるような収益モデル(劇伴のサントラのような)だったら埋蔵されることもないのだろうか?と思う瞬間が正直あります。

※7:「このクリエイターと仕事したい」に発展するケース
私は結構これで人生繋がっているところありますが、一般的にはどうなのでしょうか?

はじめに

お疲れ様です、LEEDHです。
この記事は KLab Creative Advent Calendar 2018 の14日目の記事になります。

今日はPhotoshopブラシにカスタム機能について紹介したいと思います

Photoshopのブラシを確認する方法は「ブラシ断面」で確認方法と「ブラシストローク」で確認方法があります。

ブラシ断面:ブラシを構成する基本形のこと

断面02.jpg

ブラシをドラッグ(drag)せずに垂直に点を取ってみると、そのブラシの断面を見ることができる。簡単に言うと筆をカッターで切った断面のことです。

ブラシストローク:基本的な形の線をひく動き

 

同じ形の断面を持つ筆だとしてもストロークの性質の設定によっては、上図のように全然違う形に変わります。

ここに色の混じり方や、より詳細な設定の調整を加えていくことになります。

カスタムによって表面的な変化を与える最も大きな構成要素は、まさにこの断面の形状変化とストローク時の性質の設定に依存されています。

Photoshopから基本として提供されているブラシの本質的な性質をいじる前に、基本ブラシだけでは限界があることを認識し、十分な時間をかけて、じっくり複数の基本ブラシの性質を把握しておく必要があります。

この中で自分の使用意図に最も近い性質のブラシを見つけてそれをベースにてカスタムをしていくとより自分に合うブラシを作ることができます。

早速Photoshopのブラシカスタムをやってみよう

まずはショットカットキー「F5」でブラシ関連メニューを開いて各メニューの役割について調べてみましょう。

ブラシ設定.jpg

1.ブラシ先端のシェイプ

3

A 直径:ストローク時 直径の幅(ブラシの大きさ)を設定

B 角度、真円率:選択された筆テクスチャのシェイプを変形させる

3

C 硬さ:ストローク時、輪郭に鮮明度を決める。数値を下げるとエアブラシのように輪郭を滑らかにする

3

D 間隔(かんかく):ストローク間隔を数値で設定する。

この間隔が狭くなるほど滑らかなストロークが可能になるが、演算が重いブラシの場合一時的にマシン(パソコン)が遅くなる可能性もあります。

2.シェイプ

コントロール 属性

設定メニューの中にはコントロール属性設定項目がついている場合があります。

3


  • オフ:なんの影響も受けない(マウス入力状態)
ブラシ設定09.jpg

  • フェード:まるでエアブラシを噴射したようにストローク後すぐに消えていく。
    この属性を選択すると隣に数値入力欄が出てきて、噴射の持続程度を決めることができます。
  • 筆圧:圧力感知タイプ。圧力によって太さと濃さが変わります。
  • ペンの傾き:この属性を選択すると傾き感知が可能な入力装置ではペンパブレットを傾けることでストロークに影響します。
  • スタイラスホイール:タブレットとサムホイール使用時設定すると色相情報の位置を追跡することができます。

以上の「シェイプ」カスタムはブラシの形によるストローク形態の細かい調節と連携されています。

基本ブラシを持って来て属性と数値をいじってみながら比べてみると理解しやすいと思います。

3.散布(さんぷ)


  • 散布:ストロークが通った線を中心にどのぐらいブラシを拡散させて分布させるのかを決めるオプション

3


  • 両軸(りょうじく):チェックするとストローク中心を基準に両方面に拡散されながら広がる。
  • 数のジッター:「数」は面積当たりに適用されるブラシの数を決めてくれる。「数のジッター」は数値の不規則性を数値で適用するようにしてくれるオプション。

4.テクスチャー

この項目はブラシのストロークに特定のテクスチャを反映させます。

簡単に考えればキャンバスの紙質感と似たような効果を作ることができるが、表現に限度はある。活用度は非常に制限的。

「B」エリア描画(びょうが)モード以外は非活性化されているが、描点ごとにテクスチャを適用にチェックすると全ての項目が活性化されます。

5.デュアルブラシ

ブラシカスタムにおいては大きい影響を与える部分。

さまざまなブラシの基本になるいろんな筆のテクスチャがインデックスとして登場し、現在のブラシの形(シェイプ)に基づいて、ブラシのテクスチャを追加して重ねて表現してくれます。

描画モードでは、選択したブラシ断面が描画モードの属性を持って追加され。直径、間隔、散布、数はそれぞれの機能をする。難しく説明したが、簡単に言えば2つの断面を合体させて新たなブラシを作ることができます。

6.その他

この項目の機能はシンプル
透明度と流量(りゅうりょう)のジッター(不規則性)を調節。
ブラシを選択したときPhotoshop上部に表示されるプロパティで調整できる。

7.そのほかには

「以下のチェック項目について」

ノイズ:ブラシストロークの外郭を荒くする属性

ウェットエッジ:水彩画タッチのようにストロークの外郭を濃くしてくれる

重ね描き効果:エアブラシの特性を一定部分反映させてくれる

滑らかさ:ストロークの外郭を滑らかにしてくれる属性

テクスチャの保護:名前そのまま、テクスチャを保護する機能

デフォルトブラシより特定質感のブラシで試してみた方がその違いが分かりやすいのでいろいろ試してみましょう。

PhotoShopカスタムブラシ作成

ブラシ断面(パターン)を描いてブラシ登録

自分が描いた絵やパターンをブラシとして登録することもできます。

木や人間のシルエット、雲などよく使うシルエットをブラシに作って使っている人も多いです。


  • 色が白に近いほど透明になっていく。
  • グレイは半透明になる。

完成!

おわりに

ブラシの属性や特徴を理解しておくとより効率よくイメージを作成することができるため、いろいろ試して、失敗して、成功して、自分なりのブラシテクニックを身に着けておきましょう!

最後までご覧いただきありがとうございました!

はじめに

この記事はKLab Creative Advent Calendar 2018 の 13日目の記事になります。

お疲れ様です、クリエイティブ部の2Dイラストレーターのチョンです

今日は明度について話したいと思います。

幅広い人に役立つ情報を発信したかったので、基礎的な知識が殆どですので、クリエイティブの方はお浚いの意味で、その以外の方が普通に楽しく読んでいただければと思います。

明度の確認をしやすくするため、モノクロの参考図が多いですので、ご了承くださいませ。それでは早速、はじめたいと思います!

明度

明度とは色の三要素のひとつで色の明るさの度合の事です。

暗い(黒に近い)と明度が低い、明るい(白に近い)と明度高いと言います。

人は平均的に40段階くらいの明度が識別できるらしいです。

明度の段階が多すぎると上図のように明度の段階が区別できなくなります。これができると人間でない可能性が高いので、自分もしくは周りにそんな方がいれば何処かに報告してください!

色はそれぞれ違う明度を持っています。

色をグレーにしてみると明度の差がはっきり見えます。赤の場合、明度が高く見えますが、そんなに高くありません!

明度は明るさ以外に重量も感じさせることが出来、明るいほど軽く、暗いほど重く感じます。

上図を見てください。

ACは軽く、BDは重く感じます。

BCは同じ明度ですが、Dに比べCが明るく比較的に軽く感じられます。

後、BCは同じ明度なのにCが少し明るく見える現象が起こります。その理由は明度対比が発生するからです。その内容については後ほど説明します。

コントラスト(対比)

人は物事を見て、反応することができるのは、明度のコントラストがあるからです。

今文字が読めるのも明度のコントラストのおかげ!

明度対比

明度は周りにある他の明度に影響を受け、本来の明るさよりも明るく、暗く見えたりします。

右図の小さい正方形のほうが左図より明るく見えますよね?実は同じ明度です!

明るい色と暗い色が接するところでは、明るい部分はより明るく、暗い部分はより暗く見える傾向があります。


画像出典:wikipedia「チェッカーシャドー錯視」

チェッカーシャドー錯視です。

AマスBマスは同じ明度ですが、あきらかに違って見えます。それは「側方抑制」と呼ばれるものが関係しています。

あなたの脳がAマスは明るいエリアに囲まれていて、Bマスは暗いエリアに囲まれているという信号を受け取ります。それゆえに脳がAマスは暗く、Bマスは明るく推測をしてしまうのです。それで、AマスBマスより暗く見えてしまいます。何度も何度も繰り返してみても、騙されてしまうのです。

縁辺対比

色と色が接する境界部分に起きる対比効果です。

境界部分(赤四角)を見るともっと濃く、鮮やかに見えるのがわかります。

ハーマングリッドです。

白線部分で黒に接している縁(四角い黒と黒の間の白線)の所で縁辺対比が起こりより明るく見えています。一方、白線の交わった真ん中(薄い影が見える所)は、直接黒とは接していないので、縁辺対比はあまり起こらないのです。そのため、白線の十字部分をより暗くみえ、実際にはない薄グレーの丸が見えます。

理由をわかっていても騙されてしまいます。

明度の基本的な役割

雰囲気とトーン

特定の効果を得ようと、意図的に明度スキームを限定したり、コントロールできます。


コントラストが低いと「淡い、静かい、柔らかい、薄い、軽く」感じ、コントラストが高いと「くっきり・力強い・硬い.・重い、刺激的」に感じられます。


画像出典:Google Arts & Culture『In the Woods at Giverny , 1887 by Claude Monet』

ご覧のとおりに明度のコントラストを最小化し、明度が限られた範疇にある場合は薄くて静かな印象を受けます。


画像出典:Wikipedia『Judith Slaying Holofernes (Artemisia Gentileschi, Naples)』1620 by Caravaggio

明度の範囲をいっぱいに使い、明度を極端に変化させ主題をつよく目立たせています。ドラマチックな画面の演出に望ましいです。

ボリューム(立体)

明度のグラデーションを利用する重要な理由の中に一つはボリューム感です。

人間がモノを立体的に感じるのは明暗(明度のグラデーション)があるからです。

左図の平面の六角形と右図の正六面を比較してみてください。明度が平面の空間のものに立体を付与することがわかります。

次の図を見てください。


画像出典:WebGalleryOfArt 『Madonna and Child』,1520-25 by Michelangelo Buonarroti

子供のどころは明暗で立体的に見えますが、女性は線だけで表現され平面的に見えます。

円柱を使い立体に存在する明度の差を確認しましょう!

明部:光が当たる部分です。明部には最も明度が高いハイライトが存在します。

暗い明部は暗部にある反射光よりは明度が低くならないです。

明暗境界線’:フォームが明部から暗部に切り替わる領域に事です。この領域を正しく決めるのが立体を出す中で一番重要な作業だといっても過言ではありません。

暗部:明暗境界線を超えた直ぐの領域です。暗い暗部にはが存在してます。

陰:光が当たった物体の中で暗く見えなくなったところです。

影:物体によって遮られた光が、その物体のシルエットの形を現したものです。

一般的に陰の部分より明度が低いですが、置かれている場所の明度によって変わる場合もあります。

このルールを沿って明暗を表現するだけで、平面のものを正確に立体に見せることが可能になるのです!

視線誘導

明度のコントラストで特定の領域に視線を誘導することができます。

視線を引き付けるのは最もコントラストが高い領域ですので、右上の白い丸に視線が行きます。

次の図を見てください!


画像出典:Wikimedia『File:Whistler - At the Piano.jpg』At The Piano,1859 by James Abbott McNeill Whistler

ご覧の通り何より右の白いドレスの少女に視線が行きます。このようにコントラストを操作することで、明確の注意を特定の領域に集中させることができ、集点となるメインの領域に迷わず視線を誘導できます。

空気遠近

コントラストの強弱により遠近感が生まれ、空間的に距離感の表現ができます。

コントラストが高いと前に出ているように見え、近く感じます。コントラストが低いと後ろにあるように見えますので、四角は背景とのコントラストを少なくしたほうが、後ろに引いてるように見えます。


画像出典:Wikipedia『雲海の上の旅人』Wanderer above the Sea of Fog,1818 by Caspar David Friedrich 

上図を見ると明度 のコントラストの差で、前後関係がしっかり表現されてます!

まとめ

明度をうまく使うとモノを立体に見せたり遠近を感じさせたりすることができます。それだけではなく観覧者の視線を意図通り誘導させたり、ある感情を感じさせたり事もできますので、作品を作る上で、つかせないものであります。

ただし、この内容を知っているだけでは自分のものになれないのです。たとえ、カーブを投げ方を教えてもらったとしてもすぐには良いカーブが投げられないのと一緒で、重ねて練習するのが大事です!

以上、お読みいただきありがとうございました!

KLab Creative Advent Calendar 2018 の 14日目は、LEEDHさんです。よろしくお願いします。

はじめに

この記事はKLab Creative Advent Calendar 2018 の12日目の2つ目の記事になります。

こんにちは、クリエイティブ部サウンドグループのさだきちです。

普段は担当タイトルでのサウンドディレクションに始まり、
効果音や楽曲等の制作からゲーム内へのサウンド実装まで、
幅広く業務を行っています。

今回はTokyo Demo Fest 2018にてDemo Compo部門で1位をいただいた
@gam0022さんとの共作「WORMHOLE」を制作するにあたり、
サウンド側で取り組んだ内容や制作技法について少しご紹介させていただきたいと思います。

Tokyo Demo Festとは?

Tokyo Demo Festとは日本で唯一のデモパーティで
コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーを行うイベントです。

グラフィック編については以下リンクに掲載されております。

▼Tokyo Demo Fest2018のDemo Compo優勝作品の解説(グラフィック編)
https://gam0022.net/blog/2018/12/12/tdf2018/

▼発表したデモ

コンセプト

今回は、@gam0022さんが「ワームホールによる空間移動」というコンセプトを掲げ、
不思議な球体がワームホールを介して異なる2つの空間を行き来するといった内容でしたので、非現実、デジタルな世界観というテーマを元に制作を進めていきました。

また、@gam0022さんの制作途中のグラフィックが、
青色、黒色を基調としたデジタルで光り輝き、
ポジティブに寄りすぎない幻想的なイメージを感じる奥行きのあるグラフィックだったので、曲調としてはトランス、エレクトロ調の奥行きがありデジタルさが感じられるものに加え、シンセ、ピアノ、ストリングスなどでクールな部分を出したサウンドにまとめる方針で制作を行いました。

展開について(4拍子から3拍子へ)

テンポについては、Unityを使用する上で、BPM120(1小節2秒、1拍0.5秒)で合わせると管理しやすいことから、BPM120の4つ打ちでの制作を採用しました。
(キックドラムが鳴ると同時に、映像が光るなどの映像との同期が容易になる為)

ただ、4つ打ちのループが続いてしまい
展開として単調になってしまうのではないかという懸念があったのと、
聴いていてハッとなるような捻りが欲しかったので、
途中の展開に3拍子を入れてみました。

BPM自体は120と変化はありませんが、
1小節キック4回(キック1回が0.5秒)で2秒かけていた所を、
1小節キック3回で1.5秒で楽曲が展開をしていくため、
拍子を変えることによって楽曲にスピード感をつけることができます。

▼00:51~3拍子のリズムになります。

また、最後02:04~の最後の4小節で4拍子に戻ることで、
最初のリズムパターンに戻り、
楽曲の部分を感じさせられるようにしました。

逆再生による非現実音

今回、デモの非現実的な表現にスポットをあてたかったため、
楽曲の全編にわたり、ピアノ、シンセ、ストリングスなどをサンプリングし逆再生したものを使用しました。

ピアノやシンセなどの音を逆再生させることで、
迫りくるような非現実的なイメージをつけることができます。

ピアノの波形

逆再生したピアノの波形

逆再生した音は、元の波形がアタック(音の頭部分)が強くはっきりと聞こえているもので、かつ余韻も強く感じられる音であればあるほど、
逆再生をしたときに音が迫ってくるような効果を得ることができます。

ストリングスのスタッカートやギターのストロークなど、弾くニュアンスが入っているものは特に効果的です。

また、逆再生した音と元の音を、ブレンドして、
左右に交互にパンを振って使用すると、
より非現実的で幻想的な音を作ることができます。

ピアノの原音と逆再生したものを高速に混ぜたサウンド(動画00:24~)

ストリングスのスタッカートの原音と逆再生したものを混ぜたサウンド(動画00:36~)

逆再生したシンセ(動画01:14~)

ホワイトノイズで無機質さ、奥行きを表現

前半のグラフィックは、
無機質、かつデジタルさ、また奥行のある屋内を想像させるようなグラフィックでしたので、コーン…と無機質に冷たく響き渡るようなソナー音のような音を取り入れてみました。

このような音はシンセで作ることで簡単に表現ができます。

ホワイトノイズで作ったシンセの音(動画00:20~)

作り方はいたってシンプルで、すべての周波数をほぼ均一に持っているとされるホワイトノイズの一部分の周波数帯域を持ち上げる(ピーキング)ことで、
ノイズから音階を生成することができます。

作り方:
1.ホワイトノイズが出せるシンセを用意
  →今回はNative InstrumentsのMassiveというシンセを使用

2.画像の①がノイズを出力できる箇所(オシレータ)となるため、
 Amp(音量)、Color(成分)を右に捻っていく
  →この時点でサーッというノイズが鳴ります

3.②のFILTERでBandpassフィルターを選びResonance(どれだけカットオフ周波数の肩の部分を強く持ち上げるか)の値をほぼ最大値まで捻り、
Bandwidth(周波数の帯域幅)とCutoff(フィルターの周波数帯域の支点)を聞きながら調節
  →コーンという音が鳴り始めるので、自分の理想とする音まで調節

4.③の「4Env」をクリックして音のADSR(音のアタック、余韻など)を決めて調整
 ④のAttackで音の頭の部分を調整(音が硬すぎるときは左に捻って頭を削る)
 ⑤のReleaseで音の余韻を調整すると完成です。

このようなノイズで音階を作ったものは、
オーディオとしてピッチを直接変えることで楽器としても使用しました。

ピッチを変えた音(動画00:51~)

Vari Audioを使用したボイスの加工

広大な空間にボイスを響き渡らせることで奥行きを表現したかったのと、
声が入ることでデジタルなサウンドへのアクセントになると思い、
残響感をつけた女性ボイスのサンプルを加工して使用しました。

加工に使ったツールはDAW(作曲ソフト)のNuendo / Cubaseに搭載されている
Vari Audioというオーディオのピッチ編集機能を使用しました。

ボイスを複製して、
一方のオーディオのピッチを変えることでハモリを作ることもできます。

ボイスをVari Audioでピッチ編集して、ハモリを加えたサウンド(動画00:35~)

ボイス加工したものは楽器のようにアンサンブルの一つとしても使用しています(動画00:51~)

おわりに

以上、「WORMHOLE」のサウンド側で取り組んだ内容と制作技法の紹介でした。

今回、共作させていただいた@gam0022さんのグラフィックが本当に素敵でしたので、
まだまだ紹介仕切れない程、サウンドにもこだわりの部分を詰め込んでおりますが、
もしまた機会がありましたらご紹介させていただきたいと思います。

ちなみに、今回、Tokyo Demo Fest 2018の参加でデモシーンを初めて知りましたが、
使用される音楽はクラブミュージックが大半で、DJ、VJもいらっしゃいますし、
私自身、非常に好みなサウンドが溢れているパーティで、、

もう、色々と最高でした!!

来年も是非、参加したいと考えております!

はじめに

この記事は KLab Creative Advent Calendar 2018 の 12日目の記事になります。

こんにちは。背景で飯を食って20年、金重と申します。なんか背景で20年も飯食っていると背景でもそれに付帯する構造物とか建造物とか設定とかのお話を決める事になりがちで、いっそ「金重が全部決めちまったら」と言われたり言われなかったり。

そんな中で世界観設定に携わるお仕事を沢山してまいりました。

前の乙女ゲーの話

世界観設定、要はゲームにおける世界の仕組みをどう決めるかというお話なんですが、これが簡単にできるように見えて実はわからない方も多くいらっしゃいます。

単に自分の設定をさらけ出すだけでは不足していることも多い。

じゃ、一体何が必要なの?

その指針となればよいと思ってこの記事を思いつきました。

ここではお金から連想する世界観の作り方を書かせていただきました。

世界を設定してみたい!でもどうやって?または上手くできない!という方に向けて書いています。

さて、世界観を決める!決めなくちゃならない(立場的に!)

そんな方が直面する問題は大体2つ。

①世界観を決めたことが無い。

②世界観を決められるが他人の批評にさらされたことが無い。

などがございまして、①はそもそもやった事ないのでやり方がわからない方。②は妄想の中ではいくらでも設定してるけどゲーム仕事としてはやったことがない、もしくはPやらDやらその他の皆様方にご自分の世界をさらけ出したことが無い方などがございます。

実際、①も②も業務の課題として積まれるとなかなかに厄介。特に世界観設定のクォリティーっていう所までお話が進みますとこれはもう素人さん御断りの世界でございます。

そこで世界に於けるお金の話です。

ただ、アレですよ。

とても基本的なことをお話しします。

世界観の設定ができる方(先天的にそういう方はいらっしゃいます)には実に退屈なお話です、とハードルを下げさせていただきます。

さて。

前ゲーム制作では乙女ゲーという物を作ってました。あれです、立ったにいさんと立った兄さんが一緒に走るような話です。匙一つ間違えると気に入られなかったりとなかなか厳しい世界でございました。

女性のDがおりまして。

そのDが男性の設定以外にあまり興味がない人でして。

物語で悪い大臣が出てきたりするのですが。

(σ´・ω・)「〇〇さん、この世界って大臣てどのくらいの権力者なんですか?」

( ☌ω☌)  「どのくらい…の権力…??」

質問者はシナリオライター。

ライターからすると悪い大臣が王様の目を盗んで悪事をする、しかも何回もする、しかし捕まらない、こいつはなんなんだと。

至極全う意見ですが、ゲームにしてみれば裏設定に近くゲームとは関係ない。

そうするとD的には興味もない。

つまりは答えられない。

この辺りで二週間ぐらいシナリオがすったもんだしたりいたしました。

世界観設定の話

世界観設定、それはつまりその世界はどういう成り立ちなのかという文書または画像での設定です。基本的にはシナリオが考えたりDが考えたり、場合によってはPが介入してきたりする分野です。キャラや背景も無縁ではありません。

設定とはつまり【うそ】。

でもユーザーを唸らすゲームは大概上手い【うそ】をついていることが多いのです。【うそ】って言い方が悪いですかね。【洒脱な方便】ってことでしょうか。

【洒脱な方便】の設定とはどんなものかというと、すべての設定が矛盾なく存在ししかも連動している状態を言います。Aという設定はBを補完し、それをCが裏付けしていてCの存在理由はAだ、みたいなことでしょうか。例を出し始めると話が長くなりますのでそこのどこかの機会に。

それで。

作りましたあなたの世界。

愛おしいですね。うまく作り上げていきたいですね。

設定の厚みとは世界の厚み、情報の多さは世界に対しての愛です。

そんな世界を何から設定すれば良いのか。

キャラクター?

いやいや、キャラクターはやりたい事、ユーザーに見せたい事の集合体。一回固定してしまった設定やコンセプトは動かしがたい。それなら王様やら大臣やらの政治機構から決めればいいかな?

政治とか社会組織とか詳しいですか?そんなに凡例を挙げられる?大臣はどんな機構が成立していれば問題ないのかな?

世界は貨幣から想像するといいよ

あなたが作ったその世界、過不足なくいい塩梅で設定をしていくのはどうすればいいのか。

どこから始めればいいのか。

そこで出てくるのが【貨幣】つまりお金の話です。

世界を設定するにはまずどんなお金が使われているのかを考え始めるのが良いです。

貨幣は殆んどの世界にあり、その世界で決定的な役割を担う物ですが驚くほどユーザーに注目されないガジェットです。しかも、設定を変えても重要なコンセプトに関連しない。つまり最初に手を付ける設定として便利なのです。

貨幣の種類

貨幣はザックリ3種類に分類できます。

①物々交換

②貨幣(貴金属)

③紙幣(印刷物)

凄くザックリですが分けるとこんな感じ。もっと厳密に追及するとさらに分けられますが、貨幣の種類を掘り下げてもあまり意味が無いので割愛します。ここで重要なのは貨幣の種類ではなく、それに付帯する【信用】と【文化】ですね。

ここで、【設定の連想】という発想法を使い、世界観の足掛かりをつかみます。

少し連想してみましょう。

①物々交換

人々は物品を直に交換して暮らしています。物品の価値は常に変動していて、取引者の感覚が価値を決めていきます。言ってしまえばより個人の価値がそのままダイレクトに取引の価値を生み出します。

②貨幣(貴金属)

原始的な金属、または鋳造された貨幣が使用されています。物々交換と違う所は【価値の周知】の度合いです。みんな貴金属が貴重な金属と認知しています。尚且つ貴金属を交換することで価値を交換するという事を理解しています。

原始的な物々交換ではただの石ころだったと思われる貴金属に一定の価値を見ています。

ここで重要なのは貴金属という金属に一定の価値があり、それを保有することが価値を保有することだと人々が理解っている事です。

③紙幣(印刷物)

人々は紙または持ち運びに特化した何かに価値を認知し、且つそれを交換することに異議を唱えません。ケツ拭く紙にもなりゃしねぇとか言いません。しかも、何かしらの機関がその紙幣(または何か)の価値を保証しています。そして、それは紙幣(または何か)を大量に流通させることができ、流通量もコントロールできる権力を持っています。

貨幣から推測できる文化レベル

さて、ここのでの話で何がわかったでしょう。いや、何がキモだったかなというべきでしょうか。①から③に進むにつれて文明が発展した?時代が進んだ?いやいや、大覚アキラ様の治める大東京帝国は物々交換でしたよ、確か。

変わったのは人々の認知、正確には価値観が貨幣の設定を支えています。言い換えれば「コレには価値があるという認知」が①より③に向かって広がっていきました。

人はこれを【信用】と呼びます。信用とは読んで字のごとく、人々が信じて用いる価値という所でしょうか。

悪い大臣の居る世界の貨幣、そして信用の度合いはどれくらいが適切なんでしょうか。

一から連想して答え合わせをしたいところではありますが、そんなスペースもなさそうなのでここはさっさと答えを羅列してしまいましょう。

悪い大臣の居る世界は【紙幣】を使い【活版印刷】が存在し、その流通量をコントロールする【政府】が存在し、その中に【大臣】というポストが存在する世界です。

車はどうでしょうか?電気は?まだまだ設定したりないですが、【紙幣】の質や【活版印刷】の普及具合から連想し、世界を広げていけるのです。たとえば、【活版印刷】は書類の大量印刷を連想させ、【本】が普遍的な世界だと連想できますね。という事は大量の書籍を配布することができ【学校】の設立が容易な世界という事です。学校があるという事は【識字率】もそんなに低くないのかもしれません。【識字率】が低くないという事は国内では【言語の統一化】はなされている可能性があります。

連想が止まりませんが、このように一つの設定を皮切りに次々設定していくことが可能です。

そして、貨幣からの連想の素晴らしいところはこれだけ好き勝手考えてもキャラクターの設定や地名、世界の謎などに全く関与することが無いという事でしょうか。

使う設定と使わない設定

そんな使わない設定作ってどうするんだ!という意見が聞こえそうですね。

確かに確かに。

では、主人公の大好物がパンケーキだったとします。よくありますね好物はパンケーキ。

皆さんがすんなり「好物はパンケーキ」を受け入れられるのはパンケーキが現実世界で徹底的に周知されているからです。

もし、パンケーキが周知されていない世界でパンケーキを説明する場合はどのくらいの設定がいるでしょうか。小麦粉と砂糖と・・・フライパンの説明からします?いやいや、小麦粉ってなんだというとこからかもしれません。えー、小麦粉とは小麦という植物からですねー。

キリがありませんのでこのくらいでやめときます。

未知の物品、または価値について説明し始めると設定はその後ろで数倍に膨れ上がります。同時に設定をしないと産まれない価値もあります。使わない設定という言い方が悪いのかもしれません。ユーザーが見えない設定というべきでしょうか。見えないだけであるんですよ実はね。これは背景設定をやって来た人間の設定に対する偏愛かもしれませんが、この世に要らない設定など・・・ない!!・・・たぶん。

さて。

繰り返しになりますが、この記事は世界を設定してみたい!でもどうやって?または上手くできない!という方に向けて書いています。出来る人はこの記事を読む前にもう設定ができる人なのです。

だから、なんでこの記事を書いたのか、意味が解らない方も多くいる事と思います。

ですが世の常として、デキル人はデキナイ人の憤りがわかりません。

発想できる人は発想できない人の引っ掛かっている原因がわかりません。

モテる人はモテない人がなぜモテないのかわからなかったり、モテない人はモテる人の苦労がわからなかったり。持つ者は持たざる者の苦悩はわからないですよね。

今更ながら聞けない〇〇の事ーのような記事がネット上にあふれる昨今、今更ながら世界の設定について足掛かりを示した記事があってもいいんじゃないか、そう考えて記事を掲載してみました。

一つのきっかけがその人のスイッチを押してしまう。

ゲーム業界に属して仕事をし発想にスイッチが入る、そんな瞬間を幾度となく見てきました。

基本の考え方、基本の価値の意味。

それをきちんと記し、後人に残すことも一定の価値があるのではないかと思い、この記事をしたためた次第です。

ちなみに悪の大臣はその後徹底的に設定が見直され、財務大臣でありながら隣国との兌換紙幣のレートに悩み、汚れ役を買いながらも影で救国を志す、主人公の本当の母親の親友という設定になりました。いや!…盛り過ぎだろ!