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

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

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

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

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

August 08, 2021
Tweet

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. ご清聴ありがとうございました