GOOLF!のデザイン⛳️ / Design of GOOLF!

unity1week online共有会 #5
https://youtu.be/7qeqimK0h2s

Transcript

1. 青木とと@lycoris102
   unity1week online 共有会 #5
   GOOLF!
   のデザイン!⛳
   

   View Slide

2. GOOLF!というゲームの
   デザインについて
   お話しします
   

   View Slide

3. GOOLF!
   お題「2」= 2つのボールを同時にショットするゴルフゲーム
   片方がもう片方を邪魔したり、片方が片方を助ける

   複数のボールを制御する理不尽さ、それをうまくできた時の達成感
   今回のunity1weekで作ったゲーム
   

   View Slide

4. ゴルフゲーム
   ボールとステージ = 基本的には単純の図形で成り立つゲーム
   キャラクターが登場しないので、絵が苦手な自分でも作りやすいのでは
   

   View Slide

5. ゴルフはステージをデザインして成り立つゲーム
   いかに魅力的なレベルデザインやギミックを作れるか
   いかに魅力的なステージを複数個用意できるか
   ハードルが高い！
   

   View Slide

6. フリー素材を使おう！
   そうだ……!!
   

   View Slide

7. 「KENNEY」
   ポップでフラットな2D/3D素材
   無償の素材もあれば、有償のバンドルパッケージもある
   パブリックドメインCC0ライセンスで提供されています
   ケニー
   

   View Slide

8. 「Abstract Platformer」
   2Dプラットフォーマーを作る上での良い感じの素材
   飾り付けの素材や鍵/スイッチなどのギミックのための素材も含まれている
   https://www.kenney.nl/assets/abstract-platformer
   

   View Slide

9. 試しに作ってみる
   UnityのTilemapの機能を使って配置していく
   Atlas化素材をSpriteEditorでSlice > TilemapのPaletteに配置 > SceneにTilemapを設置
   今回はTilemapの詳細な使い方は割愛 / 3D素材を使う際はProGridsを使うと配置しやすい
   

   View Slide

10. 良い感じ！
    レパートリーを作るビジョンが湧いてくるのが大事！
    

    View Slide

11. Tilemapの素材から色のバランスを取る
    素材のメインカラーを見て、バランスを取るようにボール/予測線の色を決定
    

    View Slide

12. 差別化する絵作りの話
    フリー素材を使っても自分の作品らしさを残すために
    

    View Slide

13. 背景を変更する
    作品の解像度(リアルかシンプルか)に合わせることを前提にする
    今回はポップ/フラットな背景に合わせパターン素材を使用し
    「死んだ画面にしない」ためにShaderGraphでUVスクロール
    Bg-patterns 背景パターン配布＆作成サイト: http://bg-patterns.com/
    

    View Slide

14. ちなみにレベルデザイン後に背景設定しました
    最終ステージは情報量が多く、鍵など見つけてもらいたいパーツがある
    背景をにぎやかにしすぎるとステージの存在感が薄れるので、暗くシンプルに
    

    View Slide

15. 色のテイストを変更する
    Before
    After
    気持ち明るく、温かみのある色調に
    

    View Slide

16. 色のテイストを変更する
    PostProcessのColorLookupを使用する
    ルックアップテーブル画像(LUT)を用いて入力色と対応色を置き換えて雰囲気を作る
    アセットストアからLUT画像をインポートして使用 (既に配信停止してるやつでした……)
    

    View Slide

17. ライティングを工夫する
    今回はURPの2DLightを使用して、ボールをほんのちょっと光らせるように

    これによりボールに目が行きやすくなったりならなかったり
    実際のゲームよりも露骨に設定しています
    

    View Slide

18. UIと演出の話
    

    View Slide

19. 1周目は打数を気にせずにプレイしてほしい
    難しいステージも多く、思うように行かないので
    打数が増えることをネガティブに捉えられたくない
    世界観への没入/アート感の尊重
    ポップかつシンプルな見た目が出来たので

    システムによってそれを崩したくない
    コンセプトの策定
    ×
    必要最低限の情報開示
    極力シンプルに!!
    

    View Slide

20. 打数をプレイ画面には表示しないゴルフゲーム
    暗黙的な「何回打っても大丈夫だよ」のメッセージ
    

    View Slide

21. 結果画面にて表示する
    ランキングと共に表示することで「次はもっとやれるのでは？」
    →2回目プレイを訴求を狙う
    (狙ったけど、正直そこまでリピートされなかった気がするので、ホール毎のハイスコアは推しても良かったかも)
    

    View Slide

22. ホールクリアはとにかく褒める紙吹雪🎉
    少ない打数でも、多い打数でも褒める
    ステージの情報量も多いので文字情報は重ねず、派手に褒めるためにカラフルな紙吹雪を採択
    ちなみにParticleSystemと正方形画像の素材で作ってます
    

    View Slide

23. ここまで来たら操作にも文字は使わない(意地)
    ドラッグの起点や方向が分かる / キャンセルできる / ドロップ時に戻して弾いてる感

    表示非表示でショットの可不可を判断 / ステージにも使われている◉の模様を使用
    (誰も褒めてくれなかったけど) 実は個人的に一番のこだわりポイント
    

    View Slide

24. ボールの軌跡もさりげなく
    アクションに対する賑やかし(すごいことしてる感)として機能する
    ステージ素材の花モチーフを利用し、ParticleSystemを使って実装
    オブジェクトが移動したら出す系は「Emission」の「Rate over Distance」を使うと楽に実装できる
    

    View Slide

25. トランジションは基本カラーを使って統一感を出す
    時間がなかったので、4つの矩形を順番に引き延ばし / 戻しただけ
    黒フェードアウトは気分が沈むかも？と思って、今回はポップでカジュアルで勢いを尊重した
    

    View Slide

26. まとめ
    

    View Slide

27. GOOLF!のデザインは
    「フリー素材を使いながら」も
    「特徴付けにより差別化」し
    ポップでシンプルな素材デザインを活かすために
    「UIや演出もシンプルにし統一感を持つ」
    そんなことを目指しました
    何か参考になりそうな部分が1つでもあったなら嬉しいです〜！
    

    View Slide

28. 青木とと@lycoris102
    unity1week online 共有会 #5
    GOOLF!
    のデザイン⛳
    

    View Slide