KLabGames Creative Blog

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

はじめに

お疲れ様です、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イラストレーターのCheonです

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

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

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

明度

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

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

人は平均的に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年、Hi-emon-tryと申します。なんか背景で20年も飯食っていると背景でもそれに付帯する構造物とか建造物とか設定とかのお話を決める事になりがちで、いっそ「金重が全部決めちまったら」と言われたり言われなかったり。

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

前の乙女ゲーの話

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

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

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

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

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

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

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

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

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

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

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

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

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

ただ、アレですよ。

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

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

さて。

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

女性のDがおりまして。

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

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

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

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

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

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

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

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

つまりは答えられない。

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

世界観設定の話

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

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

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

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

それで。

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

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

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

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

キャラクター?

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

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

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

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

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

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

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

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

貨幣の種類

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

①物々交換

②貨幣(貴金属)

③紙幣(印刷物)

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

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

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

①物々交換

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

②貨幣(貴金属)

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

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

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

③紙幣(印刷物)

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

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

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

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

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

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

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

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

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

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

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

使う設定と使わない設定

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

確かに確かに。

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

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

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

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

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

さて。

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

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

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

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

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

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

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

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

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

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

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

はじめに

お疲れ様です、atsuです。

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

半年ほど前からデジタルイラスト制作の際に左手デバイスを導入してみたので、感想などを簡単にまとめてみました。



左手デバイスとは

普通のキーボードよりもコンパクトで、片手で扱えるキーボードです。

通常キーボードで行う「コピー/Ctrl+C」や「貼り付け/Ctrl+V」などのキーコンビネーションによるショートカットを、ワンクリックで行うことができる入力補助ツールです。

種類や用途、機能も様々ですが私がデジタルイラストを制作するうえで使用しているのは

ゲーミングパッドとも呼ばれており、PCゲームに活用している方が多いものです。

これから紹介する左手デバイスもゲーミングパッドになります。

左手デバイスを使い始めたキッカケ

デジタルイラストを描く際には、ツールの切り替えや画面の拡大縮小などを頻繁に行わなくてはいけません。

そのためショートカットを登録しておくのは必須なのですが、簡単なショートカットキーならまだしも、複雑なキーになると覚えるのも大変ですし、キー入力も大変になります。

どうしてもキーボードではムリが出てくることが多くなります。

またPC、モニター、液タブを使用しているので机の上の作業スペースが少なくなっていました。

そこでオススメされたのがこの左手デバイスです。

こんな方は是非参考にしていただきたいです!



キーボードと左手デバイスのメリット・デメリット

キーボードと左手デバイスのメリットデメリットを簡単にまとめてみました


キーボード

メリット
  • 最初からついてくるものなので初期費用がほとんどかからない。

デメリット
  • 場所をとる。指を頻繁に動かさなけれないけないので腕や指が疲れやすい。
  • キーの組み合わせを覚えるのが大変。

左手デバイス

メリット 
  • 自分の好きな位置に好きなキーを登録出来る。
  • 手の位置が固定されているため、疲れにくく入力も早いため作業効率も上がる。

デメリット 
  • 右利きのものが多く左利き向けのものが少ない。
  • 初期費用がかかる。

おススメ左手デバイスのご紹介

左手デバイスはゲーミングパッド以外にもテンキー、ゲームコントローラーなどがあります。

それぞれボタンの数や形状が違いますが、イラスト制作で使用する左手デバイスはボタンの数が多いものが多いので、個人的にゲーミングパッドがオススメかなと思いました。

ただ、ゲーミングパッドは他のデバイスと比べ価格が高いためお財布と相談が必要になります。

実際にどんな製品があるのかをいくつか紹介したいと思います。


LOGICOOL G13r

まず、私も現在使用している左手デバイスで、 LOGICOOL G13r という製品です。

こちらは生産終了しているため価格が非常に高騰している製品ですが、使用している方は多く人気も高いようです。

サイドについているスティックボタンが個人的に好きなところで、ショートカットを登録しておくとブラシや消しゴムのサイズを簡単に変えられたり出来るのでとても便利です。

また、他の製品にあまりないところでいうとペイントソフトによってショートカットを登録することが出来るので、ソフトを起動するとそのソフト用のショートカットに自動で切り替わってくれます。


Tartarus V2

次に、Razer から出ているものも有名です。私は Tartarus V2 という製品をG13の前に使用していました。

メンブレムキーという押し心地のあるキーが搭載されているため、G13よりもボタンが固めで打鍵音がしっかりしていました。操作性等はG13とほとんど変わりません。

クッションがついていて手にフィットしたり、ピカピカ光るのがカッコイイのでゲームをする時に使用するとテンションが上がりそうです。


CLIP STUDIO TABMATE

他にも、CLIP STUDIO PAINT からも CLIP STUDIO TABMATE という左手デバイスが出ていて、こちらは上の2つよりもすごくコンパクトでいながらもショートカットが200件以上も登録ができる製品のようです。

価格も手が出しやすくなっています。

CLIP STUDIO PAINT専用というところがネックですが、イラスト制作用で作られているのでこちらも少し気になっています。

※こちらは実物がないためイラストで失礼します。

好みに合ったものを実際に触ってみて決めてみるのがいいと思います。


左手デバイスを使い始めてみた感想

最初は設定したキーを覚えるのに苦戦しそうでしたが、意外と一枚絵を完成させるころには覚えられていました。

液タブを使用してもキーボードは無くせないので、スペース的にもこうした左手デバイスはすごく便利だと思います。

個人的に置いてあるだけでもカッコイイので気分が上がります。

実際に腕や指の疲れも以前より少なくなり作業効率も上がりました!今では左手デバイス無しではイラストが描けないといっても過言ではないです・・!



宣伝

そんな左手デバイスを使用して描いたイラストが表紙になっている
KLab Tech Book の電子版がなんと無料で配布されています!是非ダウンロードしてみてください!



おわりに

以上、左手デバイスのススメでした。 

イラストを描く人もそうでない人も、是非左手デバイスの導入を検討してみてはいかがでしょうか。

KLab Creative Advent Calendar 2018 の 12日目は、Hi-emon-tryさんです。

よろしくお願いします。

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

こんにちは、KLabGames 3Dデザイナー兼R&Dグループのnaoieです。

私はテクスチャなどを製作するうえで利用するPhotoshopの保存に関するアプローチを

新卒の頃から、割と最近までスクリプトで対応していたので、そのお話をさせて頂きます。

概要

表題の通り、ワンボタンで所定の画像ファイルを保存するアプローチをまとめてみました。

アクションを作る

学生の時にはあまり利用していませんでしたが、仕事で扱うテクスチャ画像が多いため

少しでも楽をしたいと思い、アクションによる保存の履歴を作成から着手しました。

保存の工程を録画

アクション1.png

アクションを作り、実行

しかし、保存された画像名に”のコピー”がついてしまう…

のコピーの原因.png

一部の拡張子は保存時、複数のレイヤーが存在すると

画像データの上書き保存を防ぐため、”のコピー”がつくようになります。

※保存オプションの”複製を保存”のチェックを消すことができず、マスクされる。

回避するには…

のコピーの対策.png

保存する画像のレイヤーすべてを統合すると

保存オプションのチェックボックスが解除でき

この状態でアクションを録画すると”のコピー”が付きません

記録したアクションを実行すると…

アクション完了.png

これでpsdと同名の画像データをアクションの自動操作で保存することができました。

しかし、アクションの場合、保存先が絶対パスで記録されてしまうので

アクションの共有が難しいと判断しました。

絶対パス.png

そこで次のアクションに移りました">そこで次のアクションに移りました。

スクリプトを作る

職場の先輩からJavaScriptを薦められたのがきっかけに

勉強するようになりました。

”Adobe Photoshop CC自動化作戦”という、JavaScriptのリファレンスサイトを教えてもらい

どのように利用できるのか調べてみました

機能ごとにリファレンスがまとめられ

▼記載例)

説明とコードが簡潔にまとめられています

▼記載例)

このコードをアクションのように並べれば自動処理ができるのではと思い

スクリプトに着手しました。

Photoshopでスクリプトを作るには?

Adobe Extend Script Toolkitというエディタがあり

そこでスクリプトの作成、実行を行います。

ExtendScript.png

起動すると下図のような画面が表示され

スクリプトを入力後、左上のプルダウンメニューで実行するアプリケーションを選択

再生ボタンを押すと、入力されたスクリプトが実行されます。

スクリプトを作る ~コピペしてみる~

1.処理の流れを考える

 下図のような処理を行えば、保存することが可能になるかと思います。

 基本はアクションを製作する流れとほぼ同じです。

 これらの流れを参考にソースコードを先ほど紹介した”Adobe Photoshop CC

 自動化作戦”を参考に作成してみます。

  ▼処理の流れ 

コピペしたスクリプトと流れは以下のようになります。

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path);
//PNGファイル作成 ~PNGを保存する設定を宣言~
pngOpt = new PNGSaveOptions();
//↓以下内容=============================
//1.インターレースを有効にするのか true:する false:しない
pngOpt.interlaced = false;
//2.圧縮設定。0~9の数値? デフォルトは0 9になるほど圧縮される
pngOpt.compression = 0;
//3.上記の設定で現在のドキュメントを保存する
activeDocument.saveAs(fPath, pngOpt, true, Extension.LOWERCASE);
// ※fPathにpngOptの設定で同名で保存。拡張子は小文字で。
// ※trueの部分をfalseにすると、別名保存になる。
//  ⇒実行すると保存ポップアップが表れます。

保存結果

 作成したスクリプトで保存した画像がPSDファイルのある同一フォルダだと

 ”のコピー”が付きます…

 保存名を変えれば防げますが、ほかの方法で回避してみようと思います。

方法はざっと考えて以下の2つがあります。

1. WEB用に保存

2. 保存フォルダを分ける

WEBように保存形式で保存するスクリプト

WEB用に保存すると画像が圧縮されるため

同一データとみなされず”のコピー”が付加されなくなります。

先ほどの保存スクリプトにWEB用に保存する処理を追加してみます。

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path);
//PNGファイル作成 ~PNGを保存する設定を宣言~
pngOpt = new PNGSaveOptions();
//==================================
// 「Web用に保存」のためのオプション Web保存
var options = new ExportOptionsSaveForWeb();
// PNGで保存
options.format = SaveDocumentType.PNG;
//==================================
// 最適化有効
options.optimized = false;
// インターレース無効
options.interlaced = false;
// 保存の実行
activeDocument.exportDocument(fPath, ExportType.SAVEFORWEB, options);

WEB用に保存の処理を通せばデータ名を変えることなく保存が可能です。

でも、この方法だと画像データが圧縮されてしまいます。

圧縮したくない!という方はPSDファイルとは別フォルダに保存するようにしましょう

保存フォルダに分けて保存するスクリプト

pngフォルダを作成し、そのフォルダ内にpngデータが保存されるようにします。

混同してしまうと、データが散らかってしまう為とても便利です。

保存するスクリプトにフォルダを作成するスクリプトを追加する

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path +"");
//ドキュメントの名前を求める
var dName = activeDocument.name;
//==================================
//PNG保存フォルダ生成
foldername = (fPath + "/png");
folderObj = new Folder(foldername);
folderObj.create();
//==================================
//PNGファイル作成
fileObj = new File( foldername + "/" +dName);
pngOpt = new PNGSaveOptions();
pngOpt.interlaced = false;
activeDocument.saveAs(fileObj, pngOpt, true, Extension.LOWERCASE);

psdファイルと画像データを分別できるのでこちらをお勧めしています。

レイヤー毎にファイルを分けて保存するスクリプト

グループレイヤ毎に画像データを保存したいときに利用します。

保存するのも面倒だし、要素ごとにPSDが増えるのも嫌なので

一つのPSDから複数の画像を保存してくれるスクリプトです。

同一PSDで編集するため、作業効率も上がります。

//現在のドキュメントの上書き保存
activeDocument.save()
//レイヤー名を宣言
var color,spe;
//アクティブなドキュメントを調べる
var docRef = activeDocument;
//アクティブなドキュメントの名前を調べる
var dName = activeDocument.name;
//アクティブなドキュメントがどの階層にあるか調べる
var fPath = activeDocument.path;
//アクティブなドキュメントの階層に率PNGを追加
sPath = fPath + "/png";
//sPathで設定した階層にpngという名前でフォルダを作る
folderObj = new Folder(sPath);
folderObj.create();

//拡張子を覗いた名前の取得
var a = docRef.name.lastIndexOf(".");
var fNameStr = docRef.name.slice(0,a);

//レイヤーセットを1つずつ調べる
//colorespeがあったらフラグ立てて、レイヤーセットを非表示にする
n = docRef.layerSets.length;
for (i=0;i<=n-1;i++){
layerSetName = docRef.layerSets[i].name;
if(layerSetName=="color") {
color=docRef.layerSets[i];
color.visible = false;
}
if(layerSetName=="spe"){
spe=docRef.layerSets[i];
spe.visible = false;
}
}
//pngの保存設定 インターレースしない
pngOpt = new PNGSaveOptions();
pngOpt.interlaced = false;
//括弧に入ったレイヤーセット名があったら、以下の保存設定で保存する
if(color){
color.visible = true;
fileObj = new File(sPath + "/" + fNameStr + "_color.png");
docRef.saveAs(fileObj, pngOpt, true, Extension.LOWERCASE);
pngOpt.alphaChannels = false;
}
if(spe) {
spe.visible = true;
fileObj = new File(sPath + "/" +fNameStr +"_spe.png");
docRef.saveAs(fileObj, pngOpt, true,Extension.LOWERCASE);
spe.visible = false;
}

PSDファイル名+レイヤー名で保存されるようになりました。


禍つヴァールハイトでの利用方法

弊社で開発中のモバイルオンラインRPG"禍つヴァールハイト"というタイトルがあります。

ユーザーは広大なフィールドを巡り、光によって覚醒した敵と戦い、世界の終焉を食い止めるという内容です。

このゲームでは前述したように広大なフィールドを作る必要があり、特に自然をモチーフにしたフィールドでは、地形、材質の変化を多用したいという要望がありました。

それを実現するために、1つのオブジェクトに複数のテクスチャをアサインすることが出来る"5レイヤーシェーダ"というシェーダが利用されています。

5枚もテクスチャを利用するということで、このシェーダで利用するテクスチャを一括りで保存することができるスクリプトを作成しました。

ちなみにこちらのシェーダを作成されたのはAdvent Calendar 2日目を担当されたfo-taさんが作製したシェーダです。

頂点カラー(黒/R/G/B/A)の5チャンネルを割り当てると、それに該当するテクスチャが割り当てられるというものになります。

広大なフィールドを表現するゲームならではのシェーダです。

▼頂点カラー表示

▼テクスチャ表示

グループレイヤー名に割り当てる頂点カラーを入力

それらの名前を識別して自動保存を行っています。先ほどの保存スクリプトを拡張するだけで簡単に作成できます。

▼保存結果

まとめ

スクリプトって本から勉強してもなかなかゲーム制作に合わせた解釈で説明されていないことが多くて、取っ掛かりで挫折してしまうことが多いと思います。

作例を見ても「こうじゃないんだよな」とか「自分が欲しい処理と少し違うんだよな」という風に思うこともあります。

私の場合は、前記で紹介させて頂いた”Adobe Photoshop CC自動化作戦”

他の人が作ったスクリプトからどんなことができるのかを探ることで処理でできることの

流れや手法を知ることから始めていきました。

スクリプトは慣用句のようなもので、今は使わないことかもしれませんが、いつかそれを役立ることがあるくらいのスタンスで勉強をつづけたほうが良いのかなと思っています。

このページを見て頂いた方が、スクリプトや自動化処理に興味を持ってもらえ

少しでもクリエイティブな事に日々の時間を費やせるようになれば幸いです。