「ビームと五目並べ」の制作 - kekemoto

「ビームと五目並べ」の制作

概要

WebRTC を使ってリアルタイム通信したい。WebRTC とは何か？

最終的にはぷよぷよ風5目並べを作れたらなぁ

今日やりたいこと

何でもいいから音をつける✅

操作禁止

どう攻略していくか

WebRTC の概要を掴む✅

サンプルを写経する✅

テキストのやり取り✅

完全交渉を使ったピア接続✅

互いにメッセージを送り合う✅

STUN/TURN からICE候補を収集する✅

ICE再起動✅

統計情報✅

複数のピア接続✅

勉強したことをまとめる：WebRTC で P2P 接続するまでの流れ✅

OpenAyameについて調べる✅

p5.js の学習✅

ぷよぷよ五目並べのメモ

トークン作成✅

盤面の作成✅

勝敗判定✅

コンボ判定✅

ゲーム進行管理✅

ターン進行管理✅

アニメーションの仕組み✅

画面移動✅

ターン演出✅

置ける場所のガイド✅

コンボ演出✅

ゲームセット演出✅

音✅

ローカライズ✅

チュートリアル

UI系

課題

Perfect Negotiation に必要な機能が未サポートのブラウザがある

adpter.js で吸収してくれるっぽい

restartIce() は何故かない

STUN と正常に通信できてそうだが「701:STUN host lookup received error.」とエラーが返ってくる

Ayame Labo が自分の用途では使えない問題

p5.js のレスポンシブが上手くいかない。特にスマホの縦横の変更ができない

ゲームセットの描写順

最悪、盤面をリセットして重ならないようにする

参考リンク

0000 STUDIO：作業配信しています

WebRTC で P2P 接続するまでの流れ

WebRTC 殴り書きメモ

WebRTC のサンプル集

OpenAyame プロジェクトのドキュメント

Ayame の README

Ayame 使ってみる

Ayame Labo の公式サイト

Ayame Labo のドキュメント

SDK の API ドキュメント

SDK のサンプル

配信テンプレ

こんな感じの作ります。

https://bit.ly/3qK0tXk

ほげ

https://bit.ly/2Yp22P0

配信テンプレ PV版

こんな感じのゲームです！

https://bit.ly/3mR6uS4

コメント、質問、なんでも歓迎です！