1.
C#でゲームをつくろう
第伍回 05/21
担当: suzusime

2.
自己紹介
 京都大学理学部理学科二回生
 ID: suzusime（すずしめ）
 物理学徒
 お絵かき勢になりたかった。

3.
近況報告
 ゆうべ Adobe Creative Cloud を契約してしまいました。
 本日限定で半額とかいうのを23:30ごろに発見して、一瞬
迷った後に購入してしまいました。
 今朝インストールしたら動きませんでした。
 設定を弄ったらなんとか動きました。
 でも重いのでデスクトップPCの購入を模索中……

4.
自己紹介をしましょう
 名前（もし部員であればID）
 所属（学部、回生など）
 出身地
 好きなゲーム、本、音楽等
 一言
（※全て任意です）

5.
Slackチャンネルに入ってね
 Slackに#csgameというチャンネルを作ったので、部員の
人はここに入ってください。質問などをここでも受け付
けます。
 まだ部員でない方も、もし質問があれば口頭で説明する
ので、安心して下さい。

6.
今日の目標
 今回は、むずかしいぷろぐらみんぐのはなしはやりませ
ん。
 もうプログラミング疲れた……
 ということで画像編集講座です。
 （私の本業）
 画像で遊びましょう！

7.
初めての人のために
 このプロジェクトでは最後（夏休み前か後を予定）に
作ったゲームを発表してもらおうと思っています。
 みんなで遊んで品評会をしましょう。
 実際に作る段になってから考え初めても大変なので、ど
ういうものを作りたいか予め考えておいて下さい。
 高度なものは求めません。3分ゲーのようなもので結構
です。

8.
提供素材
 Id: hakurin君がこのプロジェクトのために
キャラ立ち絵をかいてくれました！

9.
自分としての目標を
 自分として目標をもってやってみると良いのではないで
しょうか。

10.
ゲームを完成させること
 一つの例として「ゲームを完成させること」を目標にし
てみるのはいいのではないかな、と思います。
 誰かゲーム会社の人がツイッターで「どんな稚拙なもの
でも、ゲームをエンディングまできちんと完成させた学
生さんはどれほどいるだろう？」みたいなことを言って
いたのを見た記憶。
 ちなみに私は完成させたことがないのでこれを目標にし
たいと思います。

11.
なぜ画像編集術を学ぶのか
 まずこちらをご覧下さい。
 マシなUIを作る（メニュー編） - 実践ゲーム製作メモ帳
(http://d.hatena.ne.jp/eiki_okuma/20110314/1300099605)
 東方素材集 – 東方備忘録(http://www.moon.zaq.jp/ohgosho/)

12.
なぜ画像編集術を学ぶのか
 みてきたように、ゲームを制作するときには様々なとこ
ろに画像をあしらうとよいです。
 テクスチャは大事、はっきりわかんだね。
 また、他にもタイトル画面やメニュー画面、UIなどで使
う画像を用意する必要があります。

13.
メニュー画面の例

14.
なぜ画像編集術を学ぶか
 画像の用意が必要だと言うことはわかったかと思います
が、それを自分でやる必要はあるでしょうか。
 画像関係はすべてグラフィッカーさん、音楽関係は全部
音楽の人に任せ、自分はプログラムだけに徹するという
のもありでしょう。
 が、音楽に比べると画像のほうはちょっとした調整が必
要なときにプログラマが自分で修正してしまった方がは
やいということが多いかなと思います。

15.
なぜ画像編集術を学ぶか
 ということで画像編集の最低限のことを知っておくと武
器になるかなと思うのです。
 ただし、「キャラの絵を描くぞ！」とかそんなことはし
ません。あくまで文字画像の作成や既存の画像の加工な
どの簡単なことをやります。
 キャラの絵を描きたい人はぜひお絵かき練習プロジェクトへ！

16.
使うソフトについて
 とりあえず私が普段よく使っているソフトを紹介します。

17.
PictureFan
 画像閲覧、写真加工ソフト
 レイヤーなどの機能は持たず、画像全体に対してフィル
ターをかけることなど、写真加工系の機能に寄っている。
 対応している画像形式が異常なまでに多いので、だいた
いどんな画像形式でも開ける（Susieプラグイン対応！）。
 画像加工や保存の際に非常に細かいパラメータまで弄る
ことが出来る（たぶんフォトショ以上）。

18.
Paint.Net
 総合的な画像編集ソフト。
 ペイントを高機能にしたようなソフトで、比較的癖がな
く取っつきやすいと思われる。
 レイヤーや透過色、トーンカーブなどの基本的な機能が
備わっている。
 短所を挙げるならばベクタ画像を扱えないことだろうか。

19.
GIMP
 フリーのもののなかではおそらく最高峰の多数の機能を
備えているつよい画像編集ソフト。
 ベクタ画像や文字は特別なレイヤーとして扱える。
 「選択範囲」に関する操作ができる。
 レイヤーマスクなんかもある。
 ただ、重い。また機能が多すぎて、初心者がいきなり使
おうとすると難しい。

20.
画像編集ソフト紹介
 以上にあげた3つを私は愛用しています。
 PictureFan: いつもの画像閲覧、画像の拡大縮小、画像形式の変
換、画像の色味の修正など
 Paint.Net: 画像のトリミング、レイヤーを使った画像の加工など
 GIMP: 文字入れをしたいとき、ロゴ画像を作るとき、その他
ある程度高度なことがしたいとき
 他にも必要になったときに花子、CLIP Studio Paint、
Inkccapeなどを適宜使っています。

21.
画像編集ソフトの役割分担
 画像編集ソフトにもさまざまなものがあって、ひとつで
全部賄うよりは得意分野に合わせて使い分けるとよいで
しょう。
 大きく分けると写真編集向け、画像加工・作成向け、お
絵かき向けの3つのレベルがあるかと思います。

22.
画像編集ソフトの役割分担
写真編集 一般画像編集 お絵かき
Adobe Photoshop
GIMP
PictureFan
SAI
Pxia
CLIP Studio Pain
Paint.Net

23.
画像編集ソフトの選択
 以上のように画像編集ソフトはたくさんあるのですが、
今回はGIMPを使うことにしました。
 マルチプラットフォームなのが大きい。
 複雑とはいっても、ゲームのための画像を作るなら結局GIMP
の機能くらいは使う必要がでてくる。
 一緒にやるのでまあ難しさはなんとかなるはず。
 できればみなさんインストールしてね。

24.
機能紹介
 前で実演しつつ機能を紹介していきます

25.
知っておきたい機能
 レイヤー
 レイヤーのモード
 レイヤーの種類
 レイヤーマスク＊
 選択範囲
 色域選択
 選択範囲の拡大・縮小・ぼかし

26.
知っておきたい機能
 各種フィルタ
 ガウスぼかし
 トーンカーブ
 その他
 「スタンプで描画」（コピースタンプツール）
 キャンパスサイズの変更と画像の拡大・縮小の違い

27.
レイヤー
 レイヤーとは「層」という意味の英単語です。
 ひとつの画像ファイルは何枚ものレイヤーが重なって出
来ています。
 透明なフィルムが重ねてあって、あるレイヤーの透明な
部分は後ろのレイヤーが透けて見える、というイメージ
です。

28.
レイヤー
 描画する、塗りつぶす、フィルタをかける、移動する等
の操作は基本的に現在選択しているレイヤーに対して行
われます。他のレイヤーには影響しません。

29.
レイヤーモード
 レイヤーを重ねるときに特殊な処理を行うことが出来ま
す。これをレイヤーモードと言います。
 たくさんありますが、最初の内は通常、乗算、オーバー
レイあたりをなんとなく知っていれば良いと思います。
 詳しくは https://ofo.jp/osakana/cgtips/blendmode.phtml などで。
 それぞれのレイヤーには透明度が個別に設定できます。

30.
レイヤーマスク
 レイヤーマスクは、レイヤーの部分毎に透明度を変える
機能です。
 レイヤーマスクのうち白いところはそのまま表示され、
黒に近づくほど薄くなり、黒で透明になります。

31.
選択範囲
 「選択範囲」をうまく扱うことはとても大切です。
 選択範囲をコピー、切り取り、塗りつぶし、切り抜き、
などなどが基本操作です。
 選択範囲を作るときは、基本は矩形選択を使うのですが、
ほかにもいろいろ便利な機能があります。

32.
色域選択
 同じ色の範囲を探して自動で選択してくれます！
 凄く便利。
 閾値を変更することで、同じ色と見做す範囲が変わりま
す。

33.
選択範囲の拡大・縮小
 文字通り、選択範囲を拡大、縮小します。
 その選択範囲で塗りつぶすことで文字の縁取りをする、
などのことができます。

34.
各種フィルタ
 いろいろな効果を掛けられます。

35.
ガウスぼかし
 ぼかします。

36.
トーンカーブ
 色味や明るさを変更できます。
 これが使えると写真の修正がだいたいできる。
 横軸が入力、縦軸が出力です。
 S字カーブでコントラストをあげる……とかいろいろ

37.
スタンプで描画
 「フォトショ修正」の肝。
 コピーソースとして指定した部分を使って塗っていく。

38.
キャンパスサイズ
 「キャンパスサイズの変更」は余白が増えたり減ったり
するもので、今までの画像の大きさは変わりません。
 一方、画像の拡大・縮小はいままでの画像の大きさが変
わります。

39.
基本事項の紹介終了
 まあだいたいこのあたりが基本事項です。
 さて、では実習と洒落込みますか……

40.
パロディロゴをつくる
 私、いままでそんなことばかりしていたんですよね……

41.
パロディロゴをつくる
 でも、結構勉強になっている気がします。
 絵なら模写、音楽なら耳コピといいますし。
 どう再現するか考えることで、どういう技法を使えば良
いのかわかっていきます。解らなければ調べます。
 ということで今日は実習として、みなさん一緒にパロ
ディロゴを作りましょう。

42.
お題：
チエちゃん最高。

43.
パロディロゴをつくる
 ということで始めましょう。

44.
次回予告
 5月28日（土曜日）
 復習回です。
 C#の復習をします。

45.
終了
 お疲れ様でした！