アットウィキロゴ
HSP講座 @ CRS
アットウィキロゴ
HSP講座 @ CRS
ページ一覧

描画命令

この項目では描画命令について勉強していきます。ようやくHSPな感じがしてきました。

1. カレントポジションとカレントカラー

　HSPには「カレント○○」という考え方があります。一つの命令や関数にたくさんの引数を設定して毎回事細かに設定をするのではなく、現在の設定を変更して、その設定で描画などの命令を実行します。まずは、カレントポジションとカレントカラーについてです。流石に、英語の説明はいいですよね。カレントポジションとはその名の通りスクリーン上でどこに描画するのかという設定で、カレントカラーとはどの色で描画するのかという設定です。これらを設定する命令が「pos」と「color」という命令です。これらの命令を使った例をあげます。 
  1. // posとcolorの例
  2. 	repeat 5
  3. 		pos cnt*80, cnt*80
  4. 		color (cnt*50) \ 256, (cnt*50 + 80) \ 256, (cnt*50 + 160) \ 256
  5. 		mes "メッセージが動く"
  6. 	loop
  7.  

実行すると次の画像のようになります。赤い丸はカレントポジションで目印として画像にあとから描き足しました。このように、カレントポジションとカレントカラーが変わっていることがわかると思います。


2. font

　続いては、描画時のフォントについてです。文字の大きさも指定できます。フォント設定も「カレント○○」に含まれるのですが、カレントフォントとは言わないみたいです。それでは、さっきのものにfont命令を追加してみます。 

  1. // fontの例
  2. 	repeat 5
  3. 		pos cnt*80, cnt*80
  4. 		color (cnt*50) \ 256, (cnt*50 + 80) \ 256, (cnt*50 + 160) \ 256
  5. 		font "メイリオ",cnt*10
  6. 		mes "メッセージが動く"
  7. 	loop
  8.  

このプログラムを実行するとfont命令の動作がわかると思います。


3. screenとgsel

　続いてはウィンドウについてです。HSPで生成されるウィンドウにはウィンドウIDという番号がついています。プログラムを実行した時に自動的に生成されるウィンドウIDは「0」です。screen命令を使うとウィンドウのサイズやウィンドウの位置を指定したり、新しいウィンドウを生成したりできます。そして、gsel命令で描画先のウィンドウを指定できます。 
  1. // screenとgselの例
  2. 	screen 0,640,480,,0,0
  3. 	screen 1,320,240,,600,400
  4.  
  5. 	gsel 0 // 描画先をスクリーン0に設定
  6. 	repeat 5
  7. 		pos cnt*80, cnt*80
  8. 		color (cnt*50) \ 256, (cnt*50 + 80) \ 256, (cnt*50 + 160) \ 256
  9. 		font "メイリオ",cnt*10
  10. 		mes "メッセージが動く"
  11. 	loop
  12.  
  13. 	gsel 1 // 描画先をスクリーン1に設定
  14. 	repeat 5
  15. 		pos cnt*40, cnt*40
  16. 		color (cnt*50) \ 256, (cnt*50 + 80) \ 256, (cnt*50 + 160) \ 256
  17. 		font "メイリオ",cnt*5
  18. 		mes "メッセージが動く"
  19. 	loop
  20.  


4. 図形描画

　今度は図形の描画になります。HSPでは様々な図形を表示することができます。以下がそれらの命令です。
命令 描画する図形 引数
line 直線 始点のx座標, 始点のy座標, 終点のx座標, 終点のy座標
boxf 矩形 右上のx座標, 右上のy座標, 左下のx座標, 左下のy座標
circle 円 右上のx座標, 右上のy座標, 左下のx座標, 左下のy座標

これらの命令を組み合わせることで様々な図形を表現できます。少しだけ例を示します。 

  1. // 図形描画の例
  2. 	screen 0, 1024, 480
  3.  
  4. 	left_point = 10
  5. 	right_point = 5
  6.  
  7. 	color 
  8. 	boxf 0, 0, 1024, 480
  9.  
  10. 	color 127,127,255
  11. 	boxf 40,50,340,250
  12. 	color 
  13. 	if(left_point<10){
  14. 		pos 140,38
  15. 	}else{
  16. 		pos 78,38
  17. 	}
  18. 	font "",200,1
  19. 	mes "" + left_point
  20.  
  21. 	shift = 400
  22. 	color 255,100,100
  23. 	boxf 40 + shift,50,340 + shift, 250
  24. 	color 
  25. 	if(right_point<10){
  26. 		pos 140 + shift, 38
  27. 	}else{
  28. 		pos 78 + shift, 38
  29. 	}
  30. 	font "",200,1
  31. 	mes "" + right_point
  32.  


5. マウス関係

　マウスに関わる命令はたくさんありますが、今回は「mouse, mousex, mousey」という3つの命令を紹介したいともいます。
  • mouse命令
　この命令はマウスポインタを任意の場所に動かすことができますできます。また、引数を負の数にするとポインターが非表示になります（こっちのほうがよく使う気がします）。

  • mousex命令
　現在のマウスポインタの位置のx座標を返してくれます。

  • mousey命令
　現在のマウスポインタの位置のy座標を返してくれます。


6. boxfの使い方

　boxf命令は特別な使われ方をすることが有ります。例えば次のような使い方です。 
  1. // 図形描画の例
  2. 	screen 0, 1024, 480
  3.  
  4. 	left_point = 0
  5. 	right_point = 99
  6.  
  7. 	repeat
  8. 		color 
  9. 		boxf
  10.  
  11. 		color 127,127,255
  12. 		boxf 40,50,340,250
  13. 		color 
  14. 		if(left_point<10){
  15. 			pos 140,38
  16. 		}else{
  17. 			pos 78,38
  18. 		}
  19. 		font "",200,1
  20. 		mes "" + left_point
  21.  
  22. 		shift = 400
  23. 		color 255,100,100
  24. 		boxf 40 + shift,50,340 + shift, 250
  25. 		color 
  26. 		if(right_point<10){
  27. 			pos 140 + shift, 38
  28. 		}else{
  29. 			pos 78 + shift, 38
  30. 		}
  31. 		font "",200,1
  32. 		mes "" + right_point
  33.  
  34. 		// 得点の変更
  35. 		left_point += 1
  36. 		right_point -= 1
  37.  
  38. 		if(left_point >= 100) : break
  39.  
  40. 		await 33
  41. 	loop
  42.  
  43. 	wait 200
  44.  
  45. 	end
  46.  



8. redraw

　次のプログラムを実行してみてください。 
  1. // 画面描画の例
  2. *main
  3. 	color 255,255,255
  4. 	boxf
  5. 	color
  6. 	pos 0,0
  7. 	font "", 80
  8. 	mes rnd(1000)
  9. 	wait 1
  10. 	goto *main
  11.  

少し画面がちらついて見えませんか？こんな時に使うのが、「redraw」命令になります。「redraw 0」とすると画面の更新を止めます。そして、「redraw 1」とすることで、それまでの変更を画面に反映します。 

  1. // 画面描画の例
  2. *main
  3. 	redraw 0
  4.  
  5. 	color 255,255,255
  6. 	boxf
  7. 	color
  8. 	pos 0,0
  9. 	font "", 80
  10. 	mes rnd(1000)
  11.  
  12. 	redraw 1
  13.  
  14. 	wait 1
  15. 	goto *main
  16.  



それでは次回に続きます。

タグ：

pos カレントポジション color カレントカラー font screen gsel line boxf circle mousex mousey mouse 画面の初期化 redraw
「描画命令」をウィキ内検索
最終更新：2016年04月05日 13:50
添付ファイル