HSP Tips

ふきだしのあるチャットの構成

吹き出しのあるチャットの構成を考える

説明





まずは、”チャット画面”を作っていきます。

チャットソフトですので、画面のサイズは固定でいいと思いますので、
screen 0,640,480,4


stop

”screen”ウィンドウのサイズを固定します。
これで、真っ白いウィンドウが作れました。

では、肝心のメッセージを表示させる部分を決めていきます。
文字を扱いますので、メッセージボックスを使うことにします。
メッセージボックスは”mesbox”です。

しかし、アバターとなる画像を使うので、”mesbox”だけを使う
わけにはいきません。アバターとメッセージ二つをうまくあわせて
チャットを進行させていく形として、ここではメッセージログを噴出し
として扱います。

アバター画像は左側、メッセージログは右側に表示させるようにします。

#module
#deffunc DrawChat

color
repeat 4
	boxf 10, 10+ (cnt*110), 120,110+(cnt*110)
loop

color 255,255,255
notesel ab@
repeat 4
	
	sdim s1
	noteget s1,cnt
	pos 15,15 + (cnt*110) : mes s1
loop

return
#global

#module

//Talk 発言する人のアバターID, 発言するメッセージ
#deffunc Talk var _id, str _mes


return


#global


	Asan="Aさん"			//実際にはUserという変数で複数ではない
	Bsan="Bさん"
	screen 0,640,480,4
	sdim ab,4,64			//アバター
	sdim ms,4,1200			//メッセージ
	sdim dm,1200
	sdim inmes,64
	repeat 4
		pos 130, cnt*110+10 : mesbox dm,500,100				//メッセージボックス
	loop
	pos 10,450 : input inmes,540,21
	pos 560,450 : button "送信",*send
	


	Talk Asan,"こんにちは"		//Aさんがこんにちはと発言

	DrawChat
	stop


*send
	
	stop
モジュールなどわからないところはF1で調べてみてください。注目してほしいのが

DrawChat

という命令です。これは、アバターを書き換えるためのもので発言があるたびに、
参加者全員のアバターを塗りなおしています。このサンプルでは、まだアバター
の部分は実装していないので、黒い色でためしがきしています。


次は、発言について説明したいと思います。
このサンプルには、まだ機能が追加されていませんが、
Talk Asan,"こんにちは"		//Aさんがこんにちはと発言

という命令があるのに気づきましたか?
この命令は、”Aさんが こんにちは と発言する”という意味のものです。
この命令があるからこそ、Aさんは画面上に発言することができるようになります。

#module
#deffunc DrawChat

color
repeat 4
	boxf 10, 10+ (cnt*110), 120,110+(cnt*110)
loop

color 255,255,255
notesel ab@
repeat 4
	
	sdim s1
	noteget s1,cnt
	pos 15,15 + (cnt*110) : mes s1
loop

return
#global



#module

//Talk 発言する人のアバターID, 発言するメッセージ
#deffunc Talk var _id, str _mes
	//アバターリストの下に発言者を追加。リストが5つになったら、一番上を削除
	notesel ab@
	noteadd _id,-1
	if notemax>4 : notedel 0

	//メッセージリストの下にメッセージを追加。リストが5つになったら、一番上を削除
	notesel ms@
	noteadd _mes,-1
	if notemax>4 : notedel 0

	//メッセージの置き換え
	notesel ms@
	sdim s1
	repeat 4
		noteget s1,cnt
		objprm cnt,s1
	loop


	DrawChat
return


#global

	Asan="Aさん"			//実際にはUserという変数で複数ではない
	Bsan="Bさん"
	screen 0,640,480,4
	sdim ab,4,64			//アバター
	sdim ms,4,1200			//メッセージ
	sdim dm,1200
	sdim inmes,64
	repeat 4
		pos 130, cnt*110+10 : mesbox dm,500,100				//メッセージボックス
	loop
	pos 10,450 : input inmes,540,21
	pos 560,450 : button "送信",*send
	


	Talk Asan,"こんにちは"		//Aさんがこんにちはと発言
	Talk Bsan,"Hello!"		//Aさんがこんにちはと発言

	DrawChat
	stop


*send
	
	stop
ずいぶんと長いスクリプトになってしまいましたね^^;
でも安心してください。このサンプルを見ればわかるとおもいますが、
	Talk Asan,"こんにちは"		//Aさんがこんにちはと発言
	Talk Bsan,"Hello!"		//Aさんがこんにちはと発言
ここに書いているAさんとBさんの発言が、上から下へと流れていることに気づきましたでしょうか?
	Talk Asan,"こんにちは"		//Aさんがこんにちはと発言
	Talk Bsan,"Hello!"		//Aさんがこんにちはと発言
	Talk Asan,"欧米カッ!"		//Aさんがこんにちはと発言
	Talk Asan,"Hello! World!"		//Aさんがこんにちはと発言
	Talk Asan,"だから欧米カッ!"		//Aさんがこんにちはと発言
このように書き換えてみると、
Aさんが最初に発言したこんにちは という部分がきえているのがわかりますね。
これは、いったいどういう仕組みなのかというと
	//アバターリストの下に発言者を追加。リストが5つになったら、一番上を削除
	notesel ab@
	noteadd _id,-1
	if notemax>4 : notedel 0
4行の実行結果を文字列リストとして保持しているからなんです。特に”if notemax>4 : notedel 0”
に注目していただきたいのですが、この行では文字列リストが4行より多い場合、一番先頭の、つまり
一番古い行を削除してることになります。その後に、”objprm cnt,s1”で全てのメッセージボックスを
更新し、更に、先ほど説明したDrawChat命令でアバターの部分の描画を更新しています。


では、次に実際に下にある発言バーを使って発言していきたいと思います。
#module
#deffunc DrawChat

color
repeat 4
	boxf 10, 10+ (cnt*110), 120,110+(cnt*110)
loop

color 255,255,255
notesel ab@
repeat 4
	
	sdim s1
	noteget s1,cnt
	pos 15,15 + (cnt*110) : mes s1
loop

return
#global



#module

//Talk 発言する人のアバターID, 発言するメッセージ
#deffunc Talk var _id, str _mes
	//アバターリストの下に発言者を追加。リストが5つになったら、一番上を削除
	notesel ab@
	noteadd _id,-1
	if notemax>4 : notedel 0

	//メッセージリストの下にメッセージを追加。リストが5つになったら、一番上を削除
	notesel ms@
	noteadd _mes,-1
	if notemax>4 : notedel 0

	//メッセージの置き換え
	notesel ms@
	sdim s1
	repeat 4
		noteget s1,cnt
		objprm cnt,s1
	loop


	DrawChat
return


#global

	onkey *keys
	Asan="Aさん"			//実際にはUserという変数で複数ではない
	Bsan="Bさん"
	screen 0,640,480,4
	sdim ab,4,64			//アバター
	sdim ms,4,1200			//メッセージ
	sdim dm,1200
	sdim inmes,64
	repeat 4
		pos 130, cnt*110+10 : mesbox dm,500,100				//メッセージボックス
	loop
	pos 10,450 : input inmes,540,21
	pos 560,450 : button "送信",*send
	
	objsel 4
	DrawChat



	stop


*send
	
	Talk Asan,inmes		//Aさんがこんにちはと発言
	inmes="" : objprm 4,inmes	//メッセージボックスを真っ白に戻す
	stop

*keys
	if iparam=13 : goto *send
	stop
起動してみて最初にきづきましたか?
発言バーにフォーカスが最初に移っていることです。
これは”objsel”という命令で、指定された番号のオブジェクトにカーソルを合わせてくれるようになる
命令です。便利ですね。
そしてまた新たに追加されたのが、onkey *keysです。これは、キーボード操作をすると、”*keys”というラベル
に処理がジャンプするようになるものです。このラベルではiparamにキーボードのキーの名前が入っているので、
13番がエンターキーの名前なので、エンターキーが押されたら”*send”ラベルへジャンプすることになります。
つまり、発言ボタンを押したことと同じことになります。


それでは肝心の”*send”ラベルをみていきましょう。

Talk Asan,inmes

先ほどあった、Talk命令が入っていますね。Asanが発言し、なにやら二番目には”inmes”という変数が入っています。
これは、
	pos 10,450 : input inmes,540,21
input命令にあるように、inputに代入される変数です。つまり、このinputに入力された言葉が、そのまま発言になるんです! そして、発言しおわったので
inmes="" : objprm 4,inmes
inmesを何も入力していない状態にして、objprmを使って発言バーを空白にしておきます。