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
150
HTML5 Canvasによる2Dウェブゲーム開発
静大情報LT大会 -2021年8月-
Sora Arakawa
August 08, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
61
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
57
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
62
arkw vs. サーバ移転 -2024年1月版-
arkw
0
230
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
420
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.3k
5分でわかる!? 7セグメントLED制御
arkw
0
61
ヤフオクで原付買った話
arkw
0
170
パソコンの消費電力と省エネ化のおはなし
arkw
0
270
Other Decks in Programming
See All in Programming
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
140
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.8k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
120
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
210
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
2
2.6k
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
170
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
140
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
5k
ErdMap: Thinking about a map for Rails applications
makicamel
1
580
テストコード書いてみませんか?
onopon
2
330
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
A designer walks into a library…
pauljervisheath
205
24k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Making the Leap to Tech Lead
cromwellryan
133
9k
Statistics for Hackers
jakevdp
797
220k
A Philosophy of Restraint
colly
203
16k
Docker and Python
trallard
43
3.2k
Building Applications with DynamoDB
mza
93
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Six Lessons from altMBA
skipperchong
27
3.6k
For a Future-Friendly Web
brad_frost
176
9.5k
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 •
具体的なコードの書き方はググって、どうぞ
ご清聴ありがとうございました