Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
HTML5 Canvasによる2Dウェブゲーム開発
Sora Arakawa
August 08, 2021
Programming
0
54
HTML5 Canvasによる2Dウェブゲーム開発
静大情報LT大会 -2021年8月-
Sora Arakawa
August 08, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
ヤフオクで原付買った話
arkw
0
67
パソコンの消費電力と省エネ化のおはなし
arkw
0
100
"成果物"を作ろう(提案)
arkw
0
70
Python(+α)でスマートプラグを制御してみた
arkw
0
130
学情絶叫ウェブシステムGX
arkw
0
67
C++とDXライブラリでLTタイマーを作った話
arkw
0
92
Googleの新デザイン言語 Material You
arkw
0
67
Amazon Echo Show向けウェブアプリの開発
arkw
0
220
1500円で始める自宅ウェブサーバ
arkw
0
280
Other Decks in Programming
See All in Programming
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
290
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
140
How to start contributing to Kubernetes Projects
ydfu
0
140
NestJS_meetup_atamaplus
atamaplus
0
210
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.2k
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
110
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
170
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
490
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
160
Efficient UI testing in Android
alexzhukovich
1
120
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
Featured
See All Featured
Happy Clients
brianwarren
89
5.6k
KATA
mclloyd
7
8.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Faster Mobile Websites
deanohume
294
28k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Git: the NoSQL Database
bkeepers
PRO
415
59k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Design by the Numbers
sachag
271
17k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Unsuck your backbone
ammeep
659
55k
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 •
具体的なコードの書き方はググって、どうぞ
ご清聴ありがとうございました