Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GOOLF!のデザイン⛳️ / Design of GOOLF!
Search
lycoris102
May 29, 2021
Design
0
630
GOOLF!のデザイン⛳️ / Design of GOOLF!
unity1week online共有会 #5
https://youtu.be/7qeqimK0h2s
lycoris102
May 29, 2021
Tweet
Share
More Decks by lycoris102
See All by lycoris102
コンプリボドゲ2024 ジグザグザクザク 遊び方
lycoris102
0
260
イラレの生成AI + Unity (VectorGraphics) で遊びたい! / Illustrator Generative AI and Unity Vector Graphics
lycoris102
0
550
⌨️ a Key is Landmine 💣のデザイン / Design of "a Key is Landmine"
lycoris102
0
160
[Unity] プレビュー版 Cinemachine 3.0 紹介
lycoris102
1
1.5k
Unityとキャリアとコミュニティの話 / Unity, Carrier, Community
lycoris102
1
170
[Unity] Mobile3D(2D)テンプレートとモバイル向けパッケージ紹介 / Mobile templates and packages for mobile
lycoris102
0
9.2k
期待値と言語化の話 / Verbalize Expectations
lycoris102
1
4.8k
Sweet^2 Honey Hive
lycoris102
2
1.4k
unity1week でUFOキャッチャーのゲームを作ったときに考えたこと / Tips for creating casual game with unity1week
lycoris102
1
1k
Other Decks in Design
See All in Design
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
220
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
610
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.7k
最速[要出典]アクセシビリティチェック
magi1125
2
160
root COMPANY DECK / We are hiring!
root_recruit
1
17k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
200
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
680
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
750
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1k
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
430
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
RailsConf 2023
tenderlove
29
970
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
860
Designing for Performance
lara
604
68k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Gamification - CAS2011
davidbonilla
80
5.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Typedesign – Prime Four
hannesfritz
40
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
青木とと@lycoris102 unity1week online 共有会 #5 GOOLF! のデザイン!⛳
GOOLF!というゲームの デザインについて お話しします
GOOLF! お題「2」= 2つのボールを同時にショットするゴルフゲーム 片方がもう片方を邪魔したり、片方が片方を助ける 複数のボールを制御する理不尽さ、それをうまくできた時の達成感 今回のunity1weekで作ったゲーム
ゴルフゲーム ボールとステージ = 基本的には単純の図形で成り立つゲーム キャラクターが登場しないので、絵が苦手な自分でも作りやすいのでは
ゴルフはステージをデザインして成り立つゲーム いかに魅力的なレベルデザインやギミックを作れるか いかに魅力的なステージを複数個用意できるか ハードルが高い!
フリー素材を使おう! そうだ……!!
「KENNEY」 ポップでフラットな2D/3D素材 無償の素材もあれば、有償のバンドルパッケージもある パブリックドメインCC0ライセンスで提供されています ケニー
「Abstract Platformer」 2Dプラットフォーマーを作る上での良い感じの素材 飾り付けの素材や鍵/スイッチなどのギミックのための素材も含まれている https://www.kenney.nl/assets/abstract-platformer
試しに作ってみる UnityのTilemapの機能を使って配置していく Atlas化素材をSpriteEditorでSlice > TilemapのPaletteに配置 > SceneにTilemapを設置 今回はTilemapの詳細な使い方は割愛 / 3D素材を使う際はProGridsを使うと配置しやすい
良い感じ! レパートリーを作るビジョンが湧いてくるのが大事!
Tilemapの素材から色のバランスを取る 素材のメインカラーを見て、バランスを取るようにボール/予測線の色を決定
差別化する絵作りの話 フリー素材を使っても自分の作品らしさを残すために
背景を変更する 作品の解像度(リアルかシンプルか)に合わせることを前提にする 今回はポップ/フラットな背景に合わせパターン素材を使用し 「死んだ画面にしない」ためにShaderGraphでUVスクロール Bg-patterns 背景パターン配布&作成サイト: http://bg-patterns.com/
ちなみにレベルデザイン後に背景設定しました 最終ステージは情報量が多く、鍵など見つけてもらいたいパーツがある 背景をにぎやかにしすぎるとステージの存在感が薄れるので、暗くシンプルに
色のテイストを変更する Before After 気持ち明るく、温かみのある色調に
色のテイストを変更する PostProcessのColorLookupを使用する ルックアップテーブル画像(LUT)を用いて入力色と対応色を置き換えて雰囲気を作る アセットストアからLUT画像をインポートして使用 (既に配信停止してるやつでした……)
ライティングを工夫する 今回はURPの2DLightを使用して、ボールをほんのちょっと光らせるように これによりボールに目が行きやすくなったりならなかったり 実際のゲームよりも露骨に設定しています
UIと演出の話
1周目は打数を気にせずにプレイしてほしい 難しいステージも多く、思うように行かないので 打数が増えることをネガティブに捉えられたくない 世界観への没入/アート感の尊重 ポップかつシンプルな見た目が出来たので システムによってそれを崩したくない コンセプトの策定 × 必要最低限の情報開示 極力シンプルに!!
打数をプレイ画面には表示しないゴルフゲーム 暗黙的な「何回打っても大丈夫だよ」のメッセージ
結果画面にて表示する ランキングと共に表示することで「次はもっとやれるのでは?」 →2回目プレイを訴求を狙う (狙ったけど、正直そこまでリピートされなかった気がするので、ホール毎のハイスコアは推しても良かったかも)
ホールクリアはとにかく褒める紙吹雪🎉 少ない打数でも、多い打数でも褒める ステージの情報量も多いので文字情報は重ねず、派手に褒めるためにカラフルな紙吹雪を採択 ちなみにParticleSystemと正方形画像の素材で作ってます
ここまで来たら操作にも文字は使わない(意地) ドラッグの起点や方向が分かる / キャンセルできる / ドロップ時に戻して弾いてる感 表示非表示でショットの可不可を判断 / ステージにも使われている◉の模様を使用 (誰も褒めてくれなかったけど)
実は個人的に一番のこだわりポイント
ボールの軌跡もさりげなく アクションに対する賑やかし(すごいことしてる感)として機能する ステージ素材の花モチーフを利用し、ParticleSystemを使って実装 オブジェクトが移動したら出す系は「Emission」の「Rate over Distance」を使うと楽に実装できる
トランジションは基本カラーを使って統一感を出す 時間がなかったので、4つの矩形を順番に引き延ばし / 戻しただけ 黒フェードアウトは気分が沈むかも?と思って、今回はポップでカジュアルで勢いを尊重した
まとめ
GOOLF!のデザインは 「フリー素材を使いながら」も 「特徴付けにより差別化」し ポップでシンプルな素材デザインを活かすために 「UIや演出もシンプルにし統一感を持つ」 そんなことを目指しました 何か参考になりそうな部分が1つでもあったなら嬉しいです〜!
青木とと@lycoris102 unity1week online 共有会 #5 GOOLF! のデザイン⛳