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
HTML5 Canvasによる2Dウェブゲーム開発
Search
Sora Arakawa
August 08, 2021
Programming
0
140
HTML5 Canvasによる2Dウェブゲーム開発
静大情報LT大会 -2021年8月-
Sora Arakawa
August 08, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
0
16
arkw vs. サーバ移転 -2024年1月版-
arkw
0
140
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
310
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1k
5分でわかる!? 7セグメントLED制御
arkw
0
52
ヤフオクで原付買った話
arkw
0
170
パソコンの消費電力と省エネ化のおはなし
arkw
0
260
"成果物"を作ろう(提案)
arkw
0
240
Python(+α)でスマートプラグを制御してみた
arkw
0
1.2k
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
140
Mergeable Libraryで 高速なアプリ起動を実現しよう!
giginet
PRO
1
2k
詳解UIWindow
natmark
3
2.2k
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
470
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
1.1k
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
180
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
540
Rustではじめる負荷試験
skanehira
5
1.2k
XStateでReactに秩序を与えたい
gizm000
0
500
REXML改善のその後
naitoh
0
160
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Scaling GitHub
holman
458
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Embracing the Ebb and Flow
colly
83
4.4k
Teambox: Starting and Learning
jrom
131
8.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Transcript
HTML5 Canvasによる 2Dウェブゲーム開発 Sora Arakawa (arkw) 2021/08/08 静大情報LT大会@オンライン 「#静大情報LT」でツイートすると 画面上部に表示されます!
自己紹介 Sora Arakawa(arkw) • 静岡大学 情報学部 行動情報学科 B2 • 所属:某室(長)、xRサークルはまりあ、ICON
• 浜松でAlexaスキル開発のバイトをしています (時給900円) • 愛知県岡崎市在住 • https://arkw.net/
自己紹介 浜キャン近辺で安いアパート(~1.5万)を探しています。 情報ください。
プロ生早押しクイズ • 2021年1月2日公開 • 最新バージョンは1.5.0 (2021年7月31日)
① 画面設計 • HTMLでCanvasを置く サイズは適当に(プロ生早押しクイズは640x480) • 必要に応じて操作説明やリンクなどを書く • CSSでデザインを調整する
② 操作方法 • Canvasにマウス/タッチイベントを追加する • CSSでCanvasを拡大縮小すると座標がずれるので、画面サイズ を基に計算して修正する • 「プロ生早押しクイズ」では上記処理がめんどいのでHTML側に ボタンを設置した
• キーボード入力も拾えるが、モバイル端末への配慮が必要
None
③ メインループの生成 • メインループはゲームに不可欠 • setIntervalでは予め待ち時間を設定する • requestAnimationFrameはモニタの周波数に依存 • requestAnimationFrameの方が安定している?
③ メインループの生成 • requestAnimationFrameは基本的に60fps • ゲーミングモニタ対応するなら、早送り対策が必要
④ グラフィック • メインループ内で適当に文字や画像を出す • 画像はクソデカ1枚絵にするとファイル読み込みが楽 • WebフォントならOSに関係無く同じ書体が出せます
None
⑤ ロード画面 • インターネット上からデータを取得するため、ロードに若干の 時間が掛かる(感覚としてはPSのCD-ROMに近い?) • リソースの読み込みが終わる前にプログラムを進めると画面表 示がバグる • 「プロ生早押しクイズ」では、最も大きな画像の読み込み終了
後60フレーム程度待つように実装
⑥ 音楽 • HTMLファイルに<audio loop>タグで指定 • Chromeでは無限ループ時に一瞬音が止まる • 参照するファイルはJavaScriptから変更できるのでHTMLに書く のは最初の1曲だけでOK
⑦ 効果音 • HTMLファイルに<audio>タグで指定 • 頻繁に鳴らす音は全部HTMLに書く • 鳴らし終わったら一時停止→再生位置を0に戻す • 使用頻度の低い音はJavaScriptで切り替えてもOK
• 素材を使用する際は無音部分のカットを忘れずに!!
音声ファイルの形式について • MP3、OGGあたりがオススメ?
まとめ • メインループはrequestAnimationFrame • 細かい画像はクソデカ1枚絵から切り出す • ロード画面を実装する • 音はMP3かOGG •
具体的なコードの書き方はググって、どうぞ
ご清聴ありがとうございました