おえかきワルキューレ

■何ができるものですか?

  • 1つのキャンパスに複数人で絵を描き、共有できます。
  • スタンプなどを使って画面をたのしく彩ることができます。
  • OBSに取り込むと、配信画面に絵を重ねることが出来ます。

■システムの入り口

 ●現行版(v1.3):こちらからどうぞ。

■バージョンアップ予定

■お約束

  • ご利用について」を事前に確認の上ご利用ください。
  • ハッシュタグ#おえかきワルキューレ」で呟いて貰えると嬉しいです。
  • 改善などはメンションもしくは discordで受け付けます
  • ルーム名が一致すると誰でも参加できるので、必要な方以外には共有しないようにしましょう。また、個人情報など見られて困るものは書かない方が良いかと思います。

■使い方 (v1.3~)

  • ルーム名を決めます。最初は適当な数字が入っていますが、文字列でも構いません。このルーム名が一致した人と共有できるようになります。
  • パスは入れても入れなくてもいいです。このパスが一致する方の層さのみ反映されます。
  • 設定したら、「接続」をおします。
  • 一緒にお絵描きする人に、シェア用URLを渡して、アクセスしてもらってください。
  • リアルタイム送信をOFFにすると、絵は描けますが相手には送らず保留します。そのあとにリアルタイム送信をONにしたタイミングで一気に絵が贈られます。
  • 背景色が選べます。ボタンを押すと絵はいったん消えます。
    イラストを描く相手の配信画面が暗いときは黒背景にして書くと、
    絵をかきやすいと思います。

■絵の描き方

  • 下の○の所に使えるコマンドがあります。まずはここを押します。
    1、3、6、10:透明度(OBSへ取り込むなら10がおススメ)
    色○:ペンの色
    ■:ペンの太さ
    消:消しゴム
    AC:全消し
    上の1列:スタンプ
  • あとは、マウスで絵をかきます。
  • 💾をおすと絵を保存できます。

■OBSでの取り込み方

  • まず、OBSのソースにブラウザを追加します。
  • クロマキーベース色を変えたい場合はURLの中身を書き換えます。
    URLの「&bg=00FF00」の色コードを書き換えてみてください。
    (白ならFFFFFF、青なら0000FF になります)
  • 幅、高さは目安。都合の良い感じにしてください。
  • URLは、共有相手に渡されたものを貼ります。
  • 緑を抜くためのカラーキーを設定します。類似性を上げた方がきれいに出るよ。
  • 淵にいらないものが映るのが嫌なケースがあるとおもうのでクロップで、いらないものを排除してください。
  • あとは、うまーく重ねてあげてください。

■謝辞

実現するにあたり、ご協力頂きました。感謝申し上げます。

  •  zzさん
    キャンバスで絵を描く部分のプログラムサンプルを活用させていただきました。公開にあたり、使用許諾を頂いております。
  •  ネガ憂鬱さん
    今回のコンセプトについて発案された方です。
    (絵を重ねることや、複数人で書くことなどのアイディア)
  • Asumaくん
    可愛いスタンプをつくってくれました。
    スタンプの使い方のアイディアも出してくれました。

■更新

  • v1.0
    ●プロトタイプ版公開
  • v1.1
    ●iPadからの書き込みに対応
    ●画像基本サイズを 1270 x 700に設定
  • v1.2
    ●画面幅にあわせてキャンバスサイズが変わるようにした
  • v1.2b
    ●画面基本サイズを 1280 x 720に修正。
    ●キャンバスサイズがかわっても正しく再現できるようにした
    ●色を増やした。
  • v1.3
    ●スタンプを追加
    ●リアルタイム送信のON/OFF機能
    ●背景色変更機能(白・黒)