Slide 1
Slide 1 text
青木とと@lycoris102
unity1week online 共有会 #5
GOOLF!
のデザイン!⛳
Slide 2
Slide 2 text
GOOLF!というゲームの
デザインについて
お話しします
Slide 3
Slide 3 text
GOOLF!
お題「2」= 2つのボールを同時にショットするゴルフゲーム
片方がもう片方を邪魔したり、片方が片方を助ける
複数のボールを制御する理不尽さ、それをうまくできた時の達成感
今回のunity1weekで作ったゲーム
Slide 4
Slide 4 text
ゴルフゲーム
ボールとステージ = 基本的には単純の図形で成り立つゲーム
キャラクターが登場しないので、絵が苦手な自分でも作りやすいのでは
Slide 5
Slide 5 text
ゴルフはステージをデザインして成り立つゲーム
いかに魅力的なレベルデザインやギミックを作れるか
いかに魅力的なステージを複数個用意できるか
ハードルが高い！
Slide 6
Slide 6 text
フリー素材を使おう！
そうだ……!!
Slide 7
Slide 7 text
「KENNEY」
ポップでフラットな2D/3D素材
無償の素材もあれば、有償のバンドルパッケージもある
パブリックドメインCC0ライセンスで提供されています
ケニー
Slide 8
Slide 8 text
「Abstract Platformer」
2Dプラットフォーマーを作る上での良い感じの素材
飾り付けの素材や鍵/スイッチなどのギミックのための素材も含まれている
https://www.kenney.nl/assets/abstract-platformer
Slide 9
Slide 9 text
試しに作ってみる
UnityのTilemapの機能を使って配置していく
Atlas化素材をSpriteEditorでSlice > TilemapのPaletteに配置 > SceneにTilemapを設置
今回はTilemapの詳細な使い方は割愛 / 3D素材を使う際はProGridsを使うと配置しやすい
Slide 10
Slide 10 text
良い感じ！
レパートリーを作るビジョンが湧いてくるのが大事！
Slide 11
Slide 11 text
Tilemapの素材から色のバランスを取る
素材のメインカラーを見て、バランスを取るようにボール/予測線の色を決定
Slide 12
Slide 12 text
差別化する絵作りの話
フリー素材を使っても自分の作品らしさを残すために
Slide 13
Slide 13 text
背景を変更する
作品の解像度(リアルかシンプルか)に合わせることを前提にする
今回はポップ/フラットな背景に合わせパターン素材を使用し
「死んだ画面にしない」ためにShaderGraphでUVスクロール
Bg-patterns 背景パターン配布＆作成サイト: http://bg-patterns.com/
Slide 14
Slide 14 text
ちなみにレベルデザイン後に背景設定しました
最終ステージは情報量が多く、鍵など見つけてもらいたいパーツがある
背景をにぎやかにしすぎるとステージの存在感が薄れるので、暗くシンプルに
Slide 15
Slide 15 text
色のテイストを変更する
Before
After
気持ち明るく、温かみのある色調に
Slide 16
Slide 16 text
色のテイストを変更する
PostProcessのColorLookupを使用する
ルックアップテーブル画像(LUT)を用いて入力色と対応色を置き換えて雰囲気を作る
アセットストアからLUT画像をインポートして使用 (既に配信停止してるやつでした……)
Slide 17
Slide 17 text
ライティングを工夫する
今回はURPの2DLightを使用して、ボールをほんのちょっと光らせるように
これによりボールに目が行きやすくなったりならなかったり
実際のゲームよりも露骨に設定しています
Slide 18
Slide 18 text
UIと演出の話
Slide 19
Slide 19 text
1周目は打数を気にせずにプレイしてほしい
難しいステージも多く、思うように行かないので
打数が増えることをネガティブに捉えられたくない
世界観への没入/アート感の尊重
ポップかつシンプルな見た目が出来たので
システムによってそれを崩したくない
コンセプトの策定
×
必要最低限の情報開示
極力シンプルに!!
Slide 20
Slide 20 text
打数をプレイ画面には表示しないゴルフゲーム
暗黙的な「何回打っても大丈夫だよ」のメッセージ
Slide 21
Slide 21 text
結果画面にて表示する
ランキングと共に表示することで「次はもっとやれるのでは？」
→2回目プレイを訴求を狙う
(狙ったけど、正直そこまでリピートされなかった気がするので、ホール毎のハイスコアは推しても良かったかも)
Slide 22
Slide 22 text
ホールクリアはとにかく褒める紙吹雪🎉
少ない打数でも、多い打数でも褒める
ステージの情報量も多いので文字情報は重ねず、派手に褒めるためにカラフルな紙吹雪を採択
ちなみにParticleSystemと正方形画像の素材で作ってます
Slide 23
Slide 23 text
ここまで来たら操作にも文字は使わない(意地)
ドラッグの起点や方向が分かる / キャンセルできる / ドロップ時に戻して弾いてる感
表示非表示でショットの可不可を判断 / ステージにも使われている◉の模様を使用
(誰も褒めてくれなかったけど) 実は個人的に一番のこだわりポイント
Slide 24
Slide 24 text
ボールの軌跡もさりげなく
アクションに対する賑やかし(すごいことしてる感)として機能する
ステージ素材の花モチーフを利用し、ParticleSystemを使って実装
オブジェクトが移動したら出す系は「Emission」の「Rate over Distance」を使うと楽に実装できる
Slide 25
Slide 25 text
トランジションは基本カラーを使って統一感を出す
時間がなかったので、4つの矩形を順番に引き延ばし / 戻しただけ
黒フェードアウトは気分が沈むかも？と思って、今回はポップでカジュアルで勢いを尊重した
Slide 26
Slide 26 text
まとめ
Slide 27
Slide 27 text
GOOLF!のデザインは
「フリー素材を使いながら」も
「特徴付けにより差別化」し
ポップでシンプルな素材デザインを活かすために
「UIや演出もシンプルにし統一感を持つ」
そんなことを目指しました
何か参考になりそうな部分が1つでもあったなら嬉しいです〜！
Slide 28
Slide 28 text
青木とと@lycoris102
unity1week online 共有会 #5
GOOLF!
のデザイン⛳