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

C#でゲームを作る2016 第5回

978 views

Published on

KMC’の新入生プロジェクトの一つ「C#でゲームを作る2016」で使ったスライドです。
まとめ記事:http://kmc.hatenablog.jp/entry/2016/11/20/100421

Published in: Technology
  • Be the first to comment

  • Be the first to like this

C#でゲームを作る2016 第5回

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

×