イケてるボタンを考える
by
lapis2411
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
イケてるボタンを考える
Slide 2
Slide 2 text
自己紹介 lapis2411 ・大学時代 - DXライブラリ(C++)を使ったゲーム開発 ・社会人 - 車載組込開発(3年) - 機械設計&検査ソフト開発(2年) - ブラウザゲームバックエンド (2年) ・趣味 - ボードゲーム Splendor 1000戦 アルナックが好き Dice × Dice Politicsという ボドゲを製作(アークライトゲーム賞優秀賞 )
Slide 3
Slide 3 text
はじめに 大体どんなゲームにもあるものってなんでしょう?
Slide 4
Slide 4 text
はじめに ボタンって大体どのゲームにもありますよね じゃあとりあえずボタンを実装するかと思って意外と難しいな と思ったので ボタンについて考えてみたいなと思います (前提:PCでマウスを使ってクリックすることを想定)
Slide 5
Slide 5 text
ボタンとは クリックすると何かが起こるもの → どのタイミングで? ボタンを押した瞬間?離した瞬間? 離した瞬間が自然そう →それぞれのボタンの上でクリックが離されたかだけ判定する
Slide 6
Slide 6 text
離した瞬間にイベント デモ1 離した瞬間にイベントを発火する場合 (マウスを離した瞬間の位置で判定) 他のところをクリックした後にボタンまでマウスを持ってきて もイベントが発火する → ちょっと違和感
Slide 7
Slide 7 text
離した瞬間にイベント STARTボタンを押したが、Continueと間違えた時に クリックを離す場所をずらすことでイベントの発火をなくす → 他のボタンの上でクリックを離すとイベント発火 → 直感と反する動作 ではクリックしたボタンを覚えておいて、クリックを離した時 にイベントを発火させる?
Slide 8
Slide 8 text
クリックしたボタンを覚える デモ2 クリックしたボタンを覚えておいて、 クリックを離した時にイベント発火 →今度はイベントのキャンセルができない →クリックしたボタンを覚えた上で、クリックがボタ ンの上で離されたかをみる
Slide 9
Slide 9 text
クリックしたボタンを覚える クリックしたボタンを覚えた上で クリックがボタンの上で離されたかをみる
Slide 10
Slide 10 text
ボタンを覚えて、イベントを見る デモ3 キャンセルもできる、一度ボタンを押した後他のボタンの上 でクリックを話してもイベント発火しない →良さそう
Slide 11
Slide 11 text
その他 ボタンにカーソルを合わせたり、 押した時に動きがあるとよりボタンを押していて楽しい → ボタンにカーソルが合わせられているか、クリックされている かなどの状態を描画時にみて拡大縮小すると簡単に実現できる (Ebitengineなら簡単に拡大縮小ができる!!)
Slide 12
Slide 12 text
まとめ 一工夫するとボタンを押していて楽しくなる! Ebitengineなら簡単に拡大縮小ができる!! Ebitengin素敵!!!! コードはこちら https://github.com/lapis2411/button-sample