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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 Sora Arakawa（arkw） • 静岡大学情報学部行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON • 浜松でAlexaスキル開発のバイトをしています（時給900円） • 愛知県岡崎市在住 • https://arkw.net/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

② 操作方法 • Canvasにマウス／タッチイベントを追加する • CSSでCanvasを拡大縮小すると座標がずれるので、画面サイズを基に計算して修正する • 「プロ生早押しクイズ」では上記処理がめんどいのでHTML側にボタンを設置した • キーボード入力も拾えるが、モバイル端末への配慮が必要

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

⑦ 効果音 • HTMLファイルにタグで指定 • 頻繁に鳴らす音は全部HTMLに書く • 鳴らし終わったら一時停止→再生位置を0に戻す • 使用頻度の低い音はJavaScriptで切り替えてもOK • 素材を使用する際は無音部分のカットを忘れずに!!

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

まとめ • メインループはrequestAnimationFrame • 細かい画像はクソデカ1枚絵から切り出す • ロード画面を実装する • 音はMP3かOGG • 具体的なコードの書き方はググって、どうぞ

Slide 17

Slide 17 text

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