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
700
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
250
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
150
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
150
arkw vs. サーバ移転 -2024年1月版-
arkw
0
310
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
580
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.6k
5分でわかる!? 7セグメントLED制御
arkw
0
78
ヤフオクで原付買った話
arkw
0
240
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
Webサーバーサイド言語としてのRustについて
kouyuume
0
3.3k
Software Architecture
hschwentner
6
2.3k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Devoxx BE 2025 Loom lab
josepaumard
0
110
理論と実務のギャップを超える
eycjur
0
170
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
CSC305 Lecture 06
javiergs
PRO
0
270
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Facilitating Awesome Meetings
lara
56
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Building Adaptive Systems
keathley
44
2.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Docker and Python
trallard
46
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Applications with DynamoDB
mza
96
6.7k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
315
140k
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 •
具体的なコードの書き方はググって、どうぞ
ご清聴ありがとうございました