Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Canvasによる2Dウェブゲーム開発

9a9ba864ec37c5c72c72f0377fe4ccf4?s=47 Sora Arakawa
August 08, 2021
Programming
0
54

HTML5 Canvasによる2Dウェブゲーム開発

静大情報LT大会 -2021年8月-

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

August 08, 2021
Tweet

More Decks by Sora Arakawa

See All by Sora Arakawa
ヤフオクで原付買った話
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
67
パソコンの消費電力と省エネ化のおはなし
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
100
"成果物"を作ろう（提案）
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
70
Python(+α)でスマートプラグを制御してみた
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
130
学情絶叫ウェブシステムGX
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
67
C++とDXライブラリでLTタイマーを作った話
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
92
Googleの新デザイン言語 Material You
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
67
Amazon Echo Show向けウェブアプリの開発
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
220
1500円で始める自宅ウェブサーバ
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
280

Other Decks in Programming

See All in Programming
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
341ac9f717b3904d6674784c0fcd9cf2?s=48 owaspkansai
0
290
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
140
How to start contributing to Kubernetes Projects
Db3181d9b15867e445d87720bfc59577?s=48 ydfu
0
140
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
210
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
198d69383210fbec8c6bea4a35863c9d?s=48 tippy
1
3.2k
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
Dda24cce92447593513292ec748c70c4?s=48 oleindesign
0
110
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
170
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
490
Amazon Lookout for Visionで 筆跡鑑定してみた
B3cc0e7ba8e6c941f08a2e6f69d3e4c2?s=48 cmnakamurashogo
0
160
Efficient UI testing in Android
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
1
120
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
C54e383f9597a63832fcc1c2547c7540?s=48 turamy
1
210
Scaling Productivity- How we have improved our dev experience
63c8b0590595c3de58406678ef99a6bf?s=48 sockeqwe
1
120

Featured

See All Featured
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
21
1.4k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
269
12k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k

Transcript

  1. HTML5 Canvasによる 2Dウェブゲーム開発 Sora Arakawa (arkw) 2021/08/08 静大情報LT大会@オンライン 「#静大情報LT」でツイートすると 画面上部に表示されます!

  2. 自己紹介 Sora Arakawa（arkw） • 静岡大学 情報学部 行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON

    • 浜松でAlexaスキル開発のバイトをしています （時給900円） • 愛知県岡崎市在住 • https://arkw.net/

  3. 自己紹介 浜キャン近辺で安いアパート（～1.5万）を探しています。 情報ください。

  4. プロ生早押しクイズ • 2021年1月2日公開 • 最新バージョンは1.5.0 (2021年7月31日）

  5. ① 画面設計 • HTMLでCanvasを置く サイズは適当に（プロ生早押しクイズは640x480） • 必要に応じて操作説明やリンクなどを書く • CSSでデザインを調整する

  6. ② 操作方法 • Canvasにマウス／タッチイベントを追加する • CSSでCanvasを拡大縮小すると座標がずれるので、画面サイズ を基に計算して修正する • 「プロ生早押しクイズ」では上記処理がめんどいのでHTML側に ボタンを設置した

    • キーボード入力も拾えるが、モバイル端末への配慮が必要
  7. None

  8. ③ メインループの生成 • メインループはゲームに不可欠 • setIntervalでは予め待ち時間を設定する • requestAnimationFrameはモニタの周波数に依存 • requestAnimationFrameの方が安定している？

  9. ③ メインループの生成 • requestAnimationFrameは基本的に60fps • ゲーミングモニタ対応するなら、早送り対策が必要

  10. ④ グラフィック • メインループ内で適当に文字や画像を出す • 画像はクソデカ1枚絵にするとファイル読み込みが楽 • WebフォントならOSに関係無く同じ書体が出せます

  11. None

  12. ⑤ ロード画面 • インターネット上からデータを取得するため、ロードに若干の 時間が掛かる（感覚としてはPSのCD-ROMに近い？） • リソースの読み込みが終わる前にプログラムを進めると画面表 示がバグる • 「プロ生早押しクイズ」では、最も大きな画像の読み込み終了

    後60フレーム程度待つように実装

  13. ⑥ 音楽 • HTMLファイルに<audio loop>タグで指定 • Chromeでは無限ループ時に一瞬音が止まる • 参照するファイルはJavaScriptから変更できるのでHTMLに書く のは最初の1曲だけでOK

  14. ⑦ 効果音 • HTMLファイルに<audio>タグで指定 • 頻繁に鳴らす音は全部HTMLに書く • 鳴らし終わったら一時停止→再生位置を0に戻す • 使用頻度の低い音はJavaScriptで切り替えてもOK

    • 素材を使用する際は無音部分のカットを忘れずに!!

  15. 音声ファイルの形式について • MP3、OGGあたりがオススメ？

  16. まとめ • メインループはrequestAnimationFrame • 細かい画像はクソデカ1枚絵から切り出す • ロード画面を実装する • 音はMP3かOGG •

    具体的なコードの書き方はググって、どうぞ

  17. ご清聴ありがとうございました