スクラッチでオンラインチャットの作り方

中級

今回つくるゲーム

難易度2 out of 5 stars

今回はスクラッチでオンラインチャットを作っていきます。ちがうパソコン同士でメッセージやスタンプを送り合えるようになります。是非自分オリジナルのスタンプをつくってみんなで盛り上がりましょう!

この記事でも順番に作り方を解説しますがくわしくははYouTube動画で確認してください。


まず実際にやってみましょう。投稿ボタンを押してメッセージの番号をチェックボックスに記入すると投稿できます。

youtube解説

こちらの動画ではわかりやすくゲームの作り方を解説しています。実際に作るときはこの動画を見ながら作ることをお勧めします。チャンネル登録もよろしくお願いします!

[スクラッチ]オンラインチャット(定型文・スタンプ)の作り方

スクラッチではクラウド変数を使ったチャットは禁止されています。しかし、”定型文式”は認められているようですので、今回は”定型文”を使ったチャットの作り方を解説します。

スクラッチでオンラインチャットの作り方1

参考)https://ja.scratch-wiki.info//wiki/%e3%83%81%e3%83%a3%e3%83%83%e3%83%88

背景に色を付ける

今回はメッセージの吹き出しを白色にするので、背景に色をつけます。

スクラッチでオンラインチャットの作り方2

メッセージ・スタンプを作る

コスチュームを作る

次にメッセージやスタンプを作っていきます。新しいスプライトを作り、コスチュームにメッセージやスタンプを描いていきます。このときにタテが30ピクセル程度になるようにします。また、コスチュームの中心が、吹き出しの左の方にくるように位置を調整します。下の例だと”おはよう”の”お”の部分に中心がくるイメージです。

とりあえず4つのメッセージ・スタンプをつくりましたが、実際にはもっといっぱいバリエーションを作りましょう。

スクラッチでオンラインチャットの作り方3
スクラッチでオンラインチャットの作り方
スクラッチでオンラインチャットの作り方
スクラッチでオンラインチャットの作り方

コードを書く

次にコードを書いていきます。メッセージのスプライトに以下のようにコードを書きます。

スクラッチでオンラインチャットの作り方4

変数を作るときに、”メッセージ番号”については”このスプライトのみ”にチェックを、”1番””2番”・・については”クラウド変数”にチェックを入れるようにしてください。

スクラッチでオンラインチャットの作り方
スクラッチでオンラインチャットの作り方5

これで🏴を押すと以下のようにメッセージ・スタンプが並べば成功です。

スクラッチでオンラインチャットの作り方6

投稿できるようにする

ではここから投稿ができるようにしていきます。以下のように、ボタンのスプライトを追加し、コスチュームに投稿と文字を追加します。

スクラッチでオンラインチャットの作り方7

次にボタンのコードに移動して、メッセージというリストを作ります。そして、リストの中に先ほど作ったメッセージ・スタンプのコスチュームに対応するように書いていきます。

スクラッチでオンラインチャットの作り方8

次にこのようにコードを書いていきます。

スクラッチでオンラインチャットの作り方9

最後に、”メッセージ”のスプライトにもどって、”メッセージ更新”が送られたときに、クラウド変数を一つづつ上に繰り上げていくようにします。

スクラッチでオンラインチャットの作り方10

ここまでできたら完成ですが、以下のようにクラウド変数の初期値については削除しておきましょう。

スクラッチでオンラインチャットの作り方11

すべてのコード

これで完成です。オリジナルのメッセージ・スタンプをつくってみんなで盛り上がりましょう!
すべてのコードはこちらから確認できます。

オンラインチャット(定型文・スタンプ)

コメント