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
160
HTML5 Canvasによる2Dウェブゲーム開発
静大情報LT大会 -2021年8月-
Sora Arakawa
August 08, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
380
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
200
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
140
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
130
arkw vs. サーバ移転 -2024年1月版-
arkw
0
300
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
560
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.5k
5分でわかる!? 7セグメントLED制御
arkw
0
75
ヤフオクで原付買った話
arkw
0
230
Other Decks in Programming
See All in Programming
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.5k
階層化自動テストで開発に機動力を
ickx
1
480
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
110
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
190
AIのメモリー
watany
13
1.4k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
350
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
130
kiroでゲームを作ってみた
iriikeita
0
150
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Faster Mobile Websites
deanohume
308
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Facilitating Awesome Meetings
lara
54
6.5k
Writing Fast Ruby
sferik
628
62k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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 •
具体的なコードの書き方はググって、どうぞ
ご清聴ありがとうございました