Qpic2017年度、グラフィック講座資料です。

2. 今日の予定
• ①自己紹介的な
• ②前回までの軽い振り返り
• ③ドット絵でオリジナルキャラを描くには？（メイン）
• ④SPRITE STUDIOの紹介

3. 自己紹介的なサムシング
・HN ねむー（4回生）
・学科 電情
・役職 ドット絵グラフィッカー
ディレクター
・趣味 百人一首かるた
ボードゲーム

4. お仕事内容
主にキャラクターのドット絵をかいたりしてます
マップのアイテムやアイコンといった
小物も作ってます
3Dモデリングもしてたりします

5. なんでグラフィッカーになったの？
• 一番作業が楽しかったから
• （大学入るまで絵を描いた経験は）ないです
全く経験とか関係ないよ（大声）
ぜひみなさんグラフィッカーになってください！

6. グラフィック講座のおさらい
前回までの

7. おさらい：
ゲーム作りの中のグラフィック
（第一回の内容）
～実例をもとに～

8. まずイメージする
テーマをブレインストーミングした結果
今回は横スク２Dアクション作るとしましょう
• どういう画面が必要でしょうか？
• いくつのシーンが必要でしょう？
• 思い浮かべたらゲーム本編から作り始めます

9. 一枚のシーンを細かく見る
必要なものは？
一枚絵とドット絵どっちがよい？
①背景
②キャラクター
③ブロック
④とげ
⑤橋
⑥右のスコアなど

10. プログラマーに相談できること
• プログラマーは文字、数字を画面上に出せます
• プログラマーは画像を、拡大縮小、反転できます
• プログラマーは1個の画像を複数回描画できます（マップチップなど）

11. グラフィッカーの心構え
•時間が命
•透過をかけて下さい

12. 実際のドット絵の作り方
（第二回の内容）

13. 実際にかいてみましょう
• 時間がないのでカット
• りんご、できましたか？

14. こうしてみなさん
「俺でさえドット絵作品制作できるのに、先輩なんで作
品制作してないんですか？」
と言うことができるイキリオタクになれたわけですね
先週作品（りんご）を作れたので、

15. 実際のグラフィック
～オリジナル作品を作る手順～

16. ①資料を持ってきます
• インターネットでグーグル画像検索しましょう
• 頭の中のイメージ縛りしてる人いますけど、
資料見た方が僕はイメージ湧きますね
今回はツインテール書きたかったので右の資料みながら作りました

17. ②線画を書く
• ドット絵は曲線が書けないので
うまく階段状に書くのがコツです
直線を使いすぎるとカクカクするので
できるだけ曲線風にするのがコツです

18. ③線画の見直し
• 一発で神線画が書けない自分のグラフィック力の無さを哀れんでください

19. A.角をなくす
• この右手の部分をみてください
• 手が四角い人間なんてこの世にいるはずがないのですから修正しましょう

20. B.ダブり、直線をなくす
長い直線のところや、線を斜めに書くと途中で太くなってるように見えるダブりの点
は不自然に見えやすいですので注意しましょう

21. C.アンチエイリアス
• 色の境界に中間色を使うことでドット絵をきれいにみせる技法です
• ダブりのところがうまく消せない時などに使うとよいでしょう

22. 実際にみなさんもやってみましょう
さっきの三点を守って修正してみましょう！

23. ④色付け
• 塗りつぶしツールで色を割り当てていきましょう
• 今回は魔法系で攻撃するイメージを持ったので
• 魔法使いっぽい「黒」のイメージに
「紫」の女性っぽいいやらしい感じ出せたらいいなと思って選びました
色の選び方はデザイン講座とかで説明あるはず（丸投げ）

24. ⑤影付け
• 光源を頭の中で１点設定します
• 光源の逆側にあたるところに少し暗い影の色を付けます
• 丸い面なら光のあたる面を丸く
• 四角いものなら光源に近い面ごとにグラデーションですかね
• へこんでいるものは暗く、でっぱったものは明るく描くとそれっぽくなります

25. ⑥輪郭線の色を調整
• それっぽくなります

26. SPRITE STUDIOの紹介

27. アニメーションの便利ツールです
• アニメーションって何枚も描くのめんどくさぁぁぁぁぁぁいってなってるそこのあなた！
• このツールはアニメーションを補完してくれます！！

28. 使い方を説明するぜ！

29. 準備
• 動かしたい部分をレイヤーに分けた状態でイラストを描きます
• 先生、イラスト力がありません… という方は来週からイラスト系講座なので、頼もしい先輩方が
イラスト力を爆上げさせてくれるに違いないですよ（他人任せ）

30. ここで禁断の術を使います

31. 無事爆発しました
• 実際はレイヤーごとに場所移動させてます

32. パーツ登録
• SPRITESTUDIOを開いてセルマップを新規作成します
• 点線で領域選択してダブルクリックしてパーツを登録できます
• パーツの名前と回転するときの中心位置を選びましょう

33. レイアウトで組み立て
• 新しくアニメーションを作成します
• パーツをレイアウトのところまでドラッグ＆ドロップして
• 位置調整して組み立てましょう

34. キーフレーム設定
• 下のバーみたいなところがフレームの設定になってます
• 例えば５フレーム目を押して位置を変更すると自動的に間が補完され５フレーム目の位置にな
るようアニメーションされます

35. まとめ

36. ドット絵の良さ
• 長所 小さいものが作りやすい
アニメーションさせやすい
練習しやすい
• 短所 細かくはかけない
ドット絵というのは基本的に1ドット単位の世界
正解がみつけやすいです
１ドットを①消すか②書き直すか③残すか
の３択しかないので考えるのが簡単です

37. 有用なページたち
•「質感博士DOT」
でグーグル検索してみましょう
幸せになれます（宗教）

38. 有用なページたち
•ドットピクト（携帯アプリ）
• 携帯でドット絵が描けます
• 1年生のうちはクソほど暇な授業が多い気がする（体験談）のでいつでも授業中にドット絵地力
を上げることができます

39. 有用なページたち
• 色彩検定、カラーコーディネーター という資格
色の選び方とか色の特徴とかが勉強できます、やる気ある方はどうぞ
• イラストの描き方がのってる本
イラスト講座でも紹介あるかもですが、一冊あるとバイブル的な感じで使えます

40. 有用な方々と言えば…
優しいグラフィッカー先輩のみなさん
敬称略でいきますね 困ったらこのへんのみなさんを頼ってみましょう
6回生 ちくわ、yossy
5回生 ろむ、さんぴょん
4回生 ねむー、タクシー、Uta.、ときう
2回生 さくさん、モノ、わらび などなど

41. 結局ドット絵上手くなるには…
•とにかく描く
描けば上手くなります

42. おわり