c#でゲームを作る2016 第5回
TRANSCRIPT
C#でゲームをつくろう第伍回 05/21
担当: suzusime
自己紹介
京都大学理学部理学科二回生
ID: suzusime（すずしめ）
物理学徒
お絵かき勢になりたかった。
近況報告
ゆうべ Adobe Creative Cloud を契約してしまいました。
本日限定で半額とかいうのを23:30ごろに発見して、一瞬迷った後に購入してしまいました。
今朝インストールしたら動きませんでした。
設定を弄ったらなんとか動きました。
でも重いのでデスクトップPCの購入を模索中……
自己紹介をしましょう
名前（もし部員であればID）
所属（学部、回生など）
出身地
好きなゲーム、本、音楽等
一言
（※全て任意です）
Slackチャンネルに入ってね
Slackに#csgameというチャンネルを作ったので、部員の人はここに入ってください。質問などをここでも受け付けます。
まだ部員でない方も、もし質問があれば口頭で説明するので、安心して下さい。
今日の目標
今回は、むずかしいぷろぐらみんぐのはなしはやりません。
もうプログラミング疲れた……
ということで画像編集講座です。
（私の本業）
画像で遊びましょう！
初めての人のために
このプロジェクトでは最後（夏休み前か後を予定）に作ったゲームを発表してもらおうと思っています。
みんなで遊んで品評会をしましょう。
実際に作る段になってから考え初めても大変なので、どういうものを作りたいか予め考えておいて下さい。
高度なものは求めません。3分ゲーのようなもので結構です。
提供素材
Id: hakurin君がこのプロジェクトのためにキャラ立ち絵をかいてくれました！
自分としての目標を
自分として目標をもってやってみると良いのではないでしょうか。
ゲームを完成させること
一つの例として「ゲームを完成させること」を目標にしてみるのはいいのではないかな、と思います。
誰かゲーム会社の人がツイッターで「どんな稚拙なものでも、ゲームをエンディングまできちんと完成させた学生さんはどれほどいるだろう？」みたいなことを言っていたのを見た記憶。
ちなみに私は完成させたことがないのでこれを目標にしたいと思います。
なぜ画像編集術を学ぶのか
まずこちらをご覧下さい。
マシなUIを作る（メニュー編） -実践ゲーム製作メモ帳
(http://d.hatena.ne.jp/eiki_okuma/20110314/1300099605)
東方素材集 –東方備忘録(http://www.moon.zaq.jp/ohgosho/)
なぜ画像編集術を学ぶのか
みてきたように、ゲームを制作するときには様々なところに画像をあしらうとよいです。
テクスチャは大事、はっきりわかんだね。
また、他にもタイトル画面やメニュー画面、UIなどで使う画像を用意する必要があります。
メニュー画面の例
なぜ画像編集術を学ぶか
画像の用意が必要だと言うことはわかったかと思いますが、それを自分でやる必要はあるでしょうか。
画像関係はすべてグラフィッカーさん、音楽関係は全部音楽の人に任せ、自分はプログラムだけに徹するというのもありでしょう。
が、音楽に比べると画像のほうはちょっとした調整が必要なときにプログラマが自分で修正してしまった方がはやいということが多いかなと思います。
なぜ画像編集術を学ぶか
ということで画像編集の最低限のことを知っておくと武器になるかなと思うのです。
ただし、「キャラの絵を描くぞ！」とかそんなことはしません。あくまで文字画像の作成や既存の画像の加工などの簡単なことをやります。
キャラの絵を描きたい人はぜひお絵かき練習プロジェクトへ！
使うソフトについて
とりあえず私が普段よく使っているソフトを紹介します。
PictureFan
画像閲覧、写真加工ソフト
レイヤーなどの機能は持たず、画像全体に対してフィルターをかけることなど、写真加工系の機能に寄っている。
対応している画像形式が異常なまでに多いので、だいたいどんな画像形式でも開ける（Susieプラグイン対応！）。
画像加工や保存の際に非常に細かいパラメータまで弄ることが出来る（たぶんフォトショ以上）。
Paint.Net
総合的な画像編集ソフト。
ペイントを高機能にしたようなソフトで、比較的癖がなく取っつきやすいと思われる。
レイヤーや透過色、トーンカーブなどの基本的な機能が備わっている。
短所を挙げるならばベクタ画像を扱えないことだろうか。
GIMP
フリーのもののなかではおそらく最高峰の多数の機能を備えているつよい画像編集ソフト。
ベクタ画像や文字は特別なレイヤーとして扱える。
「選択範囲」に関する操作ができる。
レイヤーマスクなんかもある。
ただ、重い。また機能が多すぎて、初心者がいきなり使おうとすると難しい。
画像編集ソフト紹介
以上にあげた3つを私は愛用しています。
PictureFan: いつもの画像閲覧、画像の拡大縮小、画像形式の変換、画像の色味の修正など
Paint.Net: 画像のトリミング、レイヤーを使った画像の加工など
GIMP: 文字入れをしたいとき、ロゴ画像を作るとき、その他ある程度高度なことがしたいとき
他にも必要になったときに花子、CLIP Studio Paint、Inkccapeなどを適宜使っています。
画像編集ソフトの役割分担
画像編集ソフトにもさまざまなものがあって、ひとつで全部賄うよりは得意分野に合わせて使い分けるとよいでしょう。
大きく分けると写真編集向け、画像加工・作成向け、お絵かき向けの3つのレベルがあるかと思います。
画像編集ソフトの役割分担
写真編集 一般画像編集 お絵かき
Adobe Photoshop
GIMP
PictureFan
SAI
Pxia
CLIP Studio Pain
Paint.Net
画像編集ソフトの選択
以上のように画像編集ソフトはたくさんあるのですが、今回はGIMPを使うことにしました。
マルチプラットフォームなのが大きい。
複雑とはいっても、ゲームのための画像を作るなら結局GIMP
の機能くらいは使う必要がでてくる。
一緒にやるのでまあ難しさはなんとかなるはず。
できればみなさんインストールしてね。
機能紹介
前で実演しつつ機能を紹介していきます
知っておきたい機能
レイヤー
レイヤーのモード
レイヤーの種類
レイヤーマスク＊
選択範囲
色域選択
選択範囲の拡大・縮小・ぼかし
知っておきたい機能
各種フィルタ
ガウスぼかし
トーンカーブ
その他
「スタンプで描画」（コピースタンプツール）
キャンパスサイズの変更と画像の拡大・縮小の違い
レイヤー
レイヤーとは「層」という意味の英単語です。
ひとつの画像ファイルは何枚ものレイヤーが重なって出来ています。
透明なフィルムが重ねてあって、あるレイヤーの透明な部分は後ろのレイヤーが透けて見える、というイメージです。
レイヤー
描画する、塗りつぶす、フィルタをかける、移動する等の操作は基本的に現在選択しているレイヤーに対して行われます。他のレイヤーには影響しません。
レイヤーモード
レイヤーを重ねるときに特殊な処理を行うことが出来ます。これをレイヤーモードと言います。
たくさんありますが、最初の内は通常、乗算、オーバーレイあたりをなんとなく知っていれば良いと思います。
詳しくは https://ofo.jp/osakana/cgtips/blendmode.phtmlなどで。
それぞれのレイヤーには透明度が個別に設定できます。
レイヤーマスク
レイヤーマスクは、レイヤーの部分毎に透明度を変える機能です。
レイヤーマスクのうち白いところはそのまま表示され、黒に近づくほど薄くなり、黒で透明になります。
選択範囲
「選択範囲」をうまく扱うことはとても大切です。
選択範囲をコピー、切り取り、塗りつぶし、切り抜き、などなどが基本操作です。
選択範囲を作るときは、基本は矩形選択を使うのですが、ほかにもいろいろ便利な機能があります。
色域選択
同じ色の範囲を探して自動で選択してくれます！
凄く便利。
閾値を変更することで、同じ色と見做す範囲が変わります。
選択範囲の拡大・縮小
文字通り、選択範囲を拡大、縮小します。
その選択範囲で塗りつぶすことで文字の縁取りをする、などのことができます。
各種フィルタ
いろいろな効果を掛けられます。
ガウスぼかし
ぼかします。
トーンカーブ
色味や明るさを変更できます。
これが使えると写真の修正がだいたいできる。
横軸が入力、縦軸が出力です。
S字カーブでコントラストをあげる……とかいろいろ
スタンプで描画
「フォトショ修正」の肝。
コピーソースとして指定した部分を使って塗っていく。
キャンパスサイズ
「キャンパスサイズの変更」は余白が増えたり減ったりするもので、今までの画像の大きさは変わりません。
一方、画像の拡大・縮小はいままでの画像の大きさが変わります。
基本事項の紹介終了
まあだいたいこのあたりが基本事項です。
さて、では実習と洒落込みますか……
パロディロゴをつくる
私、いままでそんなことばかりしていたんですよね……
パロディロゴをつくる
でも、結構勉強になっている気がします。
絵なら模写、音楽なら耳コピといいますし。
どう再現するか考えることで、どういう技法を使えば良いのかわかっていきます。解らなければ調べます。
ということで今日は実習として、みなさん一緒にパロディロゴを作りましょう。
お題：
チエちゃん最高。
パロディロゴをつくる
ということで始めましょう。
次回予告
5月28日（土曜日）
復習回です。
C#の復習をします。
終了
お疲れ様でした！